/* Mock Interview Practice */
#practicePage{padding:36px 0 70px;}
.pr-wrap{max-width:860px;margin:0 auto;padding:0 18px;}
.pr-loading,.pr-note-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;text-align:center;color:var(--text-soft);}
.pr-note-card .btn{margin-top:12px;}
.pr-head{position:static;top:auto;z-index:auto;background:transparent;border:0;box-shadow:none;text-align:center;margin-bottom:26px;}
.pr-head h1{margin:0 0 8px;font-size:clamp(26px,4vw,36px);}
.pr-head p{margin:0 auto;max-width:620px;color:var(--text-soft);line-height:1.55;}
.pr-muted{color:var(--text-soft);}

/* setup */
.pr-setup{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px 22px 26px;box-shadow:0 6px 24px rgba(40,30,90,.07);}
.pr-setup h2{display:flex;align-items:center;gap:10px;font-size:17px;margin:22px 0 12px;}
.pr-setup h2:first-child{margin-top:0;}
.pr-setup h2 span{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px;}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.pr-card{text-align:left;border:1.5px solid var(--border);background:var(--card);color:var(--text);border-radius:14px;padding:12px 14px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:3px;transition:border-color .15s,box-shadow .15s,transform .15s,background .15s;}
.pr-card b{font-size:14.5px;}
.pr-card span{font-size:12.5px;color:var(--text-soft);}
.pr-card:hover{border-color:var(--brand);transform:translateY(-2px);}
.pr-card.on{border-color:var(--brand);background:var(--lilac);box-shadow:0 0 0 3px rgba(91,75,183,.18);}
.pr-row{display:flex;flex-wrap:wrap;gap:10px;}
.pr-pill{border:1.5px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:9px 16px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:all .15s;}
.pr-pill small{font-weight:500;color:var(--text-soft);margin-left:4px;}
.pr-pill:hover{border-color:var(--brand);}
.pr-pill.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.pr-pill.on small{color:rgba(255,255,255,.8);}
.pr-check{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:14.5px;cursor:pointer;}
.pr-check input{width:18px;height:18px;accent-color:var(--brand);}
.pr-note{font-size:12.5px;color:var(--text-soft);margin:12px 0 18px;line-height:1.5;}
.pr-start{min-width:220px;}

/* history */
.pr-history{margin-top:22px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 18px;}
.pr-history h3{margin:0 0 4px;font-size:16px;}
.pr-history ul{list-style:none;margin:10px 0 0;padding:0;}
.pr-history li{display:grid;grid-template-columns:1fr auto 54px;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--border);font-size:14px;}
.pr-history li small{color:var(--text-soft);text-align:right;}

/* interview */
.pr-top{display:flex;justify-content:space-between;font-size:13px;color:var(--text-soft);margin-bottom:8px;}
.pr-progress{height:8px;border-radius:99px;background:var(--lilac);overflow:hidden;margin-bottom:18px;}
.pr-progress i{display:block;height:100%;background:linear-gradient(90deg,#5b4bb7,#e0709b);border-radius:99px;transition:width .4s ease;}
.pr-qhead{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.pr-tag{background:var(--lilac);color:var(--brand-ink);border-radius:999px;padding:3px 12px;font-size:12.5px;font-weight:600;}
.pr-question{position:relative;background:var(--card);border:1px solid var(--border);border-left:5px solid var(--brand);border-radius:14px;padding:18px 54px 18px 20px;margin-bottom:18px;box-shadow:0 4px 18px rgba(40,30,90,.07);}
.pr-question p{margin:0;font-size:clamp(17px,2.3vw,21px);line-height:1.45;font-weight:600;}
.pr-question.small{padding:12px 16px;box-shadow:none;}
.pr-question.small p{font-size:15.5px;font-weight:600;color:var(--text-soft);}
.pr-icon{border:0;background:var(--lilac);color:var(--brand);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;}
.pr-question .pr-icon{position:absolute;top:12px;right:12px;}
.pr-icon:hover{background:var(--brand);color:#fff;}
.pr-label{display:block;font-weight:700;margin:0 0 8px;font-size:14.5px;}
.pr-answer{width:100%;min-height:150px;resize:vertical;line-height:1.55;font-size:16px;}
.pr-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 4px;}
.pr-mic{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--brand);background:var(--card);color:var(--brand);border-radius:999px;padding:9px 18px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:all .15s;}
.pr-mic:hover{background:var(--lilac);}
.pr-mic.on{background:#e5484d;border-color:#e5484d;color:#fff;animation:prPulse 1.4s ease-in-out infinite;}
@keyframes prPulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}50%{box-shadow:0 0 0 9px rgba(229,72,77,0)}}
.pr-listen{display:inline-flex;align-items:center;gap:4px;color:#e5484d;font-weight:600;font-size:13.5px;}
.pr-listen i{width:4px;height:14px;border-radius:2px;background:#e5484d;animation:prWave 1s ease-in-out infinite;}
.pr-listen i:nth-child(2){animation-delay:.15s}.pr-listen i:nth-child(3){animation-delay:.3s;margin-right:6px}
@keyframes prWave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1.2)}}
.pr-count{margin-left:auto;font-size:12.5px;color:var(--text-soft);}
.pr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0 6px;}
.pr-link{border:0;background:none;color:var(--text-soft);text-decoration:underline;cursor:pointer;font:inherit;font-size:13.5px;margin-left:auto;}
.pr-status{min-height:22px;font-size:14px;margin-top:8px;color:var(--text-soft);}
.pr-status.busy{color:var(--brand);font-weight:600;}
.pr-status.busy::before{content:"";display:inline-block;width:14px;height:14px;border:2px solid var(--brand);border-right-color:transparent;border-radius:50%;margin-right:8px;vertical-align:-2px;animation:prSpin .8s linear infinite;}
.pr-status.err{color:#c0392b;font-weight:600;}
@keyframes prSpin{to{transform:rotate(360deg)}}

/* feedback */
.pr-feedback{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 6px 24px rgba(40,30,90,.07);}
.pr-score{display:flex;align-items:center;gap:18px;margin-bottom:14px;}
.pr-score h2{margin:0;font-size:clamp(17px,2.4vw,21px);line-height:1.35;}
.pr-ring{position:relative;width:86px;height:86px;flex:none;}
.pr-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.pr-ring path{fill:none;stroke-width:3.4;stroke-linecap:round;}
.pr-ring .bg{stroke:var(--lilac);}
.pr-ring .fg{animation:prFill .9s ease-out both;}
@keyframes prFill{from{stroke-dasharray:0,100}}
.pr-ring.good .fg{stroke:#1f8f4e}.pr-ring.ok .fg{stroke:#e0a21b}.pr-ring.low .fg{stroke:#e5484d}
.pr-ring b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:24px;line-height:1;}
.pr-ring b small{font-size:11px;font-weight:600;color:var(--text-soft);margin-top:2px;}
.pr-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.pr-cols section,.pr-plan,.pr-model{border-radius:12px;padding:12px 16px;}
.pr-good{background:rgba(31,143,78,.09);}
.pr-gap{background:rgba(229,72,77,.08);}
.pr-model{background:var(--lilac);margin-top:14px;}
.pr-plan{background:rgba(91,75,183,.07);margin-top:14px;}
.pr-feedback h3,.pr-report h3{margin:0 0 6px;font-size:14.5px;display:flex;align-items:center;gap:8px;}
.pr-feedback ul,.pr-report ul{margin:0;padding-left:18px;line-height:1.55;font-size:14.5px;}
.pr-feedback p,.pr-report p{line-height:1.6;font-size:14.5px;}
.pr-model p{margin:0;}
.pr-tip{margin:14px 0 0;padding:10px 14px;border-left:4px solid #e0a21b;background:rgba(224,162,27,.1);border-radius:0 10px 10px 0;}
.pr-model .pr-icon{width:30px;height:30px;font-size:14px;background:var(--card);}

/* report */
.pr-report{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:0 6px 24px rgba(40,30,90,.07);}
.pr-report > h2{text-align:center;margin:14px 0 18px;font-size:clamp(17px,2.4vw,21px);line-height:1.4;}
.pr-big{display:flex;flex-direction:column;align-items:center;gap:2px;}
.pr-big b{font-size:clamp(52px,10vw,72px);line-height:1;}
.pr-big span{color:var(--text-soft);font-size:14px;}
.pr-big.good b,.good{color:#1f8f4e}.pr-big.ok b,.ok{color:#c98a0b}.pr-big.low b,.low{color:#d23a40}
.pr-sub{margin:22px 0 10px !important;}
.pr-items{display:grid;gap:8px;}
.pr-item{border:1px solid var(--border);border-radius:12px;padding:0 14px;background:var(--card);}
.pr-item summary{cursor:pointer;display:flex;justify-content:space-between;gap:14px;padding:12px 0;font-weight:600;font-size:14.5px;list-style:none;}
.pr-item summary::-webkit-details-marker{display:none;}
.pr-item summary b{flex:none;}
.pr-item[open] summary{border-bottom:1px solid var(--border);margin-bottom:8px;}
.pr-item p{margin:8px 0;}
.pr-mine{background:var(--lilac);border-radius:10px;padding:10px 12px;white-space:pre-wrap;}
.pr-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;font-weight:600;font-size:14.5px;}
.pr-links a{color:var(--brand);}

@media (max-width:640px){
  #practicePage{padding-top:22px;}
  .pr-cols{grid-template-columns:1fr;}
  .pr-setup{padding:16px 14px 20px;}
  .pr-grid{grid-template-columns:1fr 1fr;}
  .pr-question{padding-right:50px;}
  .pr-actions .btn{flex:1 1 auto;}
  .pr-link{margin-left:0;}
  .pr-report{padding:16px;}
  .pr-score{gap:12px;}
  .pr-ring{width:72px;height:72px;}
}
@media (prefers-reduced-motion:reduce){.pr-mic.on,.pr-listen i,.pr-ring .fg,.pr-progress i{animation:none;transition:none}}

/* personalise: company, resume, materials */
.pr-opt{font-style:normal;font-weight:500;font-size:12px;color:var(--text-soft);background:var(--lilac);border-radius:999px;padding:2px 10px;}
.pr-note-top{margin:-4px 0 12px;}
.pr-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.pr-field{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;margin-bottom:12px;}
.pr-form .pr-field{margin-bottom:0;}
.pr-field input,.pr-field textarea{font-weight:400;width:100%;}
.pr-drop{border:1.5px dashed var(--border);border-radius:14px;padding:14px 16px;margin-bottom:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:var(--card);}
.pr-drop span{font-size:13px;}
.pr-pick{cursor:pointer;margin-top:4px;}
.pr-files{display:flex;flex-wrap:wrap;gap:8px;}
.pr-files:empty{display:none;}
.pr-chip{display:inline-flex;align-items:center;gap:8px;background:var(--lilac);color:var(--brand-ink);border-radius:999px;padding:5px 6px 5px 12px;font-size:13px;font-weight:600;}
.pr-chip button{border:0;background:var(--card);color:var(--brand);width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;}
.pr-chip button:hover{background:#e5484d;color:#fff;}
#prFileMsg{margin:0 0 8px;}
@media (max-width:640px){.pr-form{grid-template-columns:1fr;}}
/* two-step set-up */
.pr-wrap:has(.pr-wizard){max-width:1000px;}
.pr-wizard{display:grid;grid-template-columns:260px 1fr;background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:0 6px 24px rgba(40,30,90,.07);overflow:hidden;}
.pr-side{background:var(--lilac);padding:22px 18px;display:flex;flex-direction:column;gap:22px;}
.pr-pane{padding:24px 26px 26px;min-width:0;}
.pr-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;position:relative;}
.pr-step{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:0;background:transparent;color:var(--text-soft);font:inherit;padding:10px;border-radius:12px;cursor:pointer;transition:background .15s;}
.pr-step:hover{background:rgba(255,255,255,.6);}
.pr-step i{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px;background:var(--card);}
.pr-step span{display:flex;flex-direction:column;line-height:1.25;}
.pr-step b{font-size:15px;color:var(--text);}
.pr-step small{font-size:12px;}
.pr-step.on{background:var(--card);}
.pr-step.on i{background:var(--brand);border-color:var(--brand);color:#fff;}
.pr-step.done i{background:#1f8f4e;border-color:#1f8f4e;color:#fff;}
.pr-presets{display:flex;flex-direction:column;gap:8px;}
.pr-presets>b{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-soft);}
.pr-preset{display:flex;flex-direction:column;text-align:left;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:12px;padding:9px 12px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:border-color .15s,transform .15s;}
.pr-preset small{font-weight:500;font-size:12px;color:var(--text-soft);}
.pr-preset:hover{border-color:var(--brand);transform:translateY(-1px);}
.pr-h{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:21px;}
.pr-h3{margin:22px 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-soft);}
.pr-prefs{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;}
.pr-pref{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;border-top:1px solid var(--border);flex-wrap:wrap;}
.pr-pref:first-child{border-top:0;}
.pr-pref>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:200px;flex:1;}
.pr-pref b{font-size:14.5px;}
.pr-pref span{font-size:12.5px;color:var(--text-soft);}
.pr-pref.pr-col{flex-direction:column;align-items:stretch;gap:8px;}
.pr-pref.pr-col textarea{width:100%;}
.pr-select{width:auto;min-width:190px;}
.pr-toggles{margin-top:6px;}
.pr-on{color:#1f8f4e;font-weight:600;}
.pr-nav{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:20px;flex-wrap:wrap;}
.pr-nav .pr-skip{margin-right:auto;margin-left:0;}
@media (max-width:820px){
  .pr-wizard{grid-template-columns:1fr;}
  .pr-side{padding:14px;gap:12px;}
  .pr-steps{flex-direction:row;}
  .pr-steps li{flex:1;}
  .pr-step{padding:8px;}
  .pr-step small{display:none;}
  .pr-presets{flex-direction:row;flex-wrap:wrap;align-items:center;}
  .pr-presets>b{width:100%;}
  .pr-preset{flex:1 1 140px;}
  .pr-pane{padding:18px 14px 20px;}
}
/* premium look */
body:has(#practicePage){background:radial-gradient(900px 480px at 12% -5%,rgba(139,92,246,.20),transparent 60%),radial-gradient(800px 460px at 92% 8%,rgba(236,112,155,.18),transparent 60%),radial-gradient(700px 500px at 50% 100%,rgba(91,75,183,.12),transparent 65%),var(--bg,#f7f6fd);background-attachment:fixed;}
html[data-theme="dark"] body:has(#practicePage){background:radial-gradient(900px 480px at 12% -5%,rgba(139,92,246,.25),transparent 60%),radial-gradient(800px 460px at 92% 8%,rgba(236,112,155,.14),transparent 60%),var(--bg,#12111c);background-attachment:fixed;}
#practicePage{padding-top:44px;}
.pr-hero{margin-bottom:34px;}
.pr-badge{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;color:var(--text);box-shadow:0 4px 14px rgba(60,40,140,.08);margin-bottom:18px;}
.pr-badge i{width:8px;height:8px;border-radius:50%;background:#1f8f4e;box-shadow:0 0 0 0 rgba(31,143,78,.5);animation:prDot 2s infinite;}
@keyframes prDot{70%{box-shadow:0 0 0 8px rgba(31,143,78,0)}100%{box-shadow:0 0 0 0 rgba(31,143,78,0)}}
.pr-hero h1{font-size:clamp(32px,6vw,56px);line-height:1.08;letter-spacing:-.03em;font-weight:800;margin:0 auto 14px;max-width:760px;}
.pr-hero h1 em{font-style:normal;background:linear-gradient(90deg,#5b4bb7,#c04f9a 60%,#e0709b);-webkit-background-clip:text;background-clip:text;color:transparent;}
.pr-hero p{font-size:clamp(15px,2vw,18px);max-width:640px;}
.pr-trust{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.pr-trust li{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;box-shadow:0 3px 10px rgba(60,40,140,.06);}
.pr-trust b{margin-right:4px;font-weight:400;}
.pr-wizard,.pr-report,.pr-feedback,.pr-history,.pr-note-card{border-radius:24px;box-shadow:0 18px 50px rgba(60,40,140,.12),0 2px 6px rgba(60,40,140,.05);border-color:rgba(120,100,200,.14);}
.pr-side{background:linear-gradient(180deg,rgba(139,92,246,.10),rgba(236,112,155,.08)),var(--lilac);}
.pr-card,.pr-pill,.pr-preset,.pr-drop,.pr-prefs{border-radius:16px;}
.pr-pill{border-radius:999px;}
.pr-card.on{background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(236,112,155,.10));box-shadow:0 0 0 3px rgba(139,92,246,.20),0 8px 20px rgba(91,75,183,.14);}
.pr-pill.on{background:linear-gradient(135deg,#5b4bb7,#8b5cf6);box-shadow:0 6px 16px rgba(91,75,183,.32);}
#prRoot .btn-primary{background:linear-gradient(135deg,#5b4bb7,#8b5cf6 55%,#c04f9a);border:0;color:#fff;border-radius:999px;padding:13px 28px;font-weight:700;box-shadow:0 10px 26px rgba(91,75,183,.38),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .15s,box-shadow .2s,filter .2s;}
#prRoot .btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 34px rgba(91,75,183,.5),inset 0 1px 0 rgba(255,255,255,.3);filter:saturate(1.1);}
#prRoot .btn-primary:disabled{opacity:.6;}
#prRoot .btn-outline{border-radius:999px;padding:12px 24px;font-weight:600;}
.pr-question{border-radius:20px;border-left-width:6px;box-shadow:0 12px 34px rgba(60,40,140,.12);}
.pr-answer{border-radius:16px;}
.pr-wizard,.pr-feedback,.pr-report,.pr-question,.pr-history{animation:prRise .5s cubic-bezier(.2,.7,.2,1) backwards;}
@keyframes prRise{from{opacity:0}}
@media (max-width:640px){#practicePage{padding-top:26px;}.pr-hero{margin-bottom:22px;}.pr-wizard,.pr-report,.pr-feedback{border-radius:20px;}}
@media (prefers-reduced-motion:reduce){.pr-badge i,.pr-wizard,.pr-feedback,.pr-report,.pr-question,.pr-history{animation:none}}
/* required fields */
.pr-star{color:#d23a40;font-style:normal;font-weight:700;margin-left:2px;}
.pr-opt.req{background:rgba(224,112,155,.18);color:#a8466a;font-weight:600;}
.pr-drop.pr-bad{border-color:#d23a40;background:rgba(210,58,64,.05);box-shadow:0 0 0 3px rgba(210,58,64,.12);}
.pr-field .field-error{border-color:#d23a40 !important;box-shadow:0 0 0 3px rgba(210,58,64,.14);}