:root{
--bg:#f4f5f7;
--card:#ffffff;
--border:#e3e6ea;
--text:#171a1f;
--muted:#5c6470;
--accent:#6B46B5;
--accent-soft:#F0EBFA;
--danger:#B0432E;
--danger-bg:#F8E9E5;
--danger-border:#eccdc5;
--ok:#2f9e52;
--radius:14px;
--shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html{font-size:90%}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{
font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.55;
-webkit-font-smoothing:antialiased;
height:100dvh;
overflow:hidden;
}
.hidden{display:none !important}

/* ---------- App shell ---------- */
.app{
height:100dvh;
max-width:1260px;
margin:0 auto;
padding:clamp(8px,1.6vh,28px) 14px clamp(10px,2vh,28px);
display:flex;
flex-direction:column;
min-height:0;
overflow:hidden;
}
@media (min-width:960px){
.app{padding:clamp(14px,2.4vh,32px) 32px clamp(18px,2.6vh,32px)}
}

.scroll-panel{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c9ced6 transparent}
.scroll-panel::-webkit-scrollbar{width:8px}
.scroll-panel::-webkit-scrollbar-track{background:transparent}
.scroll-panel::-webkit-scrollbar-thumb{background:#d3d7dd;border-radius:8px}
.scroll-panel::-webkit-scrollbar-thumb:hover{background:#bfc4cc}

#screen-setup, #screen-practice, #screen-complete{
flex:1 1 auto;
min-height:0;
display:flex;
flex-direction:column;
overflow:hidden;
}

/* ---------- Masthead ---------- */
.masthead{
flex:0 0 auto;
max-width:864px;
margin:0 auto clamp(6px,1.4vh,22px);
text-align:center;
}
.masthead h1{
font-size:clamp(1.05rem,.95rem + 1.2vh,1.7rem);
font-weight:800;letter-spacing:-.02em;margin:0 0 2px;
}
.lede{color:var(--muted);font-size:clamp(.78rem,.72rem + .4vh,.98rem);margin:0;line-height:1.35}

/* ---------- Cards ---------- */
.card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:clamp(14px,2.2vw,28px);
}
.card h2{font-size:1.05rem;font-weight:700;margin:0 0 12px;letter-spacing:-.01em}

/* ---------- Setup layout ---------- */
.setup-grid{
display:grid;grid-template-columns:1fr;gap:12px;
max-width:1152px;margin:0 auto;width:100%;
flex:1 1 auto;
min-height:0;
overflow-y:auto;
scrollbar-width:thin;scrollbar-color:#c9ced6 transparent;
padding:2px 4px 8px;
}
.setup-grid::-webkit-scrollbar{width:8px}
.setup-grid::-webkit-scrollbar-track{background:transparent}
.setup-grid::-webkit-scrollbar-thumb{background:#d3d7dd;border-radius:8px}

.setup-stack{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:900px){
.setup-grid{grid-template-columns:minmax(320px,5fr) minmax(0,7fr);gap:22px;align-items:start;overflow:visible}
.setup-stack{gap:18px}
}
#start-btn{
flex:0 0 auto;
max-width:1152px;
width:100%;
margin:10px auto 0;
}

.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;gap:12px;align-items:flex-start;color:#333a44;font-size:.92rem}
.tick{
flex:0 0 22px;height:22px;border-radius:7px;
background:var(--accent-soft);color:var(--accent);
display:inline-flex;align-items:center;justify-content:center;
font-size:12px;font-weight:700;margin-top:1px;
}

.field + .field{margin-top:18px}
.field h3{
font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
color:var(--muted);margin:0 0 8px;font-weight:600;
}
.seg{
display:flex;gap:6px;background:#eef0f3;
border:1px solid var(--border);padding:5px;border-radius:12px;
}
.seg button{
flex:1;appearance:none;border:0;background:transparent;
padding:9px 6px;border-radius:8px;font:inherit;font-weight:600;
color:var(--muted);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;
}
.seg button:hover:not(.active){color:var(--text)}
.seg button.active{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.rec-field{border-top:1px dashed var(--border);padding-top:16px}
.rec-toggle{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.92rem}
.rec-toggle input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);cursor:pointer;flex:0 0 auto}
.note{
margin:10px 0 0;font-size:.82rem;color:var(--muted);
background:#f7f8fa;border:1px solid var(--border);
border-radius:10px;padding:9px 12px;
}

/* ---------- Buttons ---------- */
.btn{
appearance:none;border:1px solid transparent;border-radius:12px;
font:inherit;font-weight:600;cursor:pointer;padding:12px 20px;
transition:background .15s,border-color .15s,transform .05s,box-shadow .15s;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:default}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(107,70,181,.25)}
.btn-primary:hover:not(:disabled){background:#5a3a99}
.btn-ghost{background:#fff;border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:#c9ced6;background:#fafbfc}
.btn-lg{padding:14px 24px;font-size:1rem;width:100%}

/* ---------- Practice screen ---------- */
.practice-card{
max-width:1152px;margin:0 auto;padding:0;
flex:1 1 auto;min-height:0;width:100%;
display:flex;flex-direction:column;overflow:hidden;
}
.practice-card.flash .practice-body{animation:fade .35s ease}
.session-progress{flex:0 0 auto;height:4px;background:#eef0f3}
.session-progress .fill{height:100%;background:var(--accent);width:0;transition:width .4s ease}
.practice-head{
flex:0 0 auto;
display:flex;justify-content:space-between;align-items:center;gap:10px;
flex-wrap:wrap;padding:clamp(8px,1.4vh,14px) clamp(14px,2.4vw,26px);
border-bottom:1px solid var(--border);
}
.head-labels{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{
display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;
background:#f1f3f6;border:1px solid var(--border);
font-size:.8rem;font-weight:600;color:var(--muted);
}
.chip-strong{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.chip-type{background:#fff;border-style:dashed}
.rec-badge{
display:inline-flex;align-items:center;gap:7px;
color:var(--danger);font-weight:700;font-size:.8rem;
background:var(--danger-bg);border:1px solid var(--danger-border);padding:4px 11px;border-radius:999px;
}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);animation:pulse 1.4s infinite}

.practice-body{
flex:1 1 auto;
min-height:0;
display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:clamp(10px,1.8vh,22px);
padding:clamp(12px,2vh,28px) clamp(14px,2.4vw,26px);
}
@media (min-width:860px){
.practice-body{grid-template-columns:190px minmax(0,1fr);grid-template-rows:1fr;gap:36px;align-items:stretch}
}
.timer-col{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:clamp(10px,1.6vh,16px)}
@media (min-width:860px){
.timer-col{flex-direction:column;align-self:center;justify-content:center;gap:clamp(8px,1.6vh,14px)}
}
.ring{position:relative;width:clamp(84px,12vh,130px);height:clamp(84px,12vh,130px);flex:0 0 auto}
@media (min-width:860px){.ring{width:clamp(120px,14vh,150px);height:clamp(120px,14vh,150px)}}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring-bg{stroke:#eef0f3}
.ring-fg{stroke:var(--accent);transition:stroke-dashoffset .95s linear}
.ring-fg.warn{stroke:var(--danger)}
.ring-num{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;
font-weight:800;font-size:clamp(22px,3.4vh,34px);letter-spacing:-.02em;
font-variant-numeric:tabular-nums;
}
@media (min-width:860px){.ring-num{font-size:clamp(28px,3.6vh,38px)}}
.ring-num small{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.part-dots{display:flex;gap:8px}
.pdot{width:26px;height:6px;border-radius:3px;background:#e4e7ec;transition:background .3s}
.pdot.done{background:#c9b6e8}
.pdot.active{background:var(--accent)}

.prompt-col{
min-width:0;min-height:0;
display:flex;flex-direction:column;
}
.prompt-title{
flex:0 0 auto;
margin:0 0 8px;font-size:clamp(1rem,.95rem + .7vh,1.35rem);
font-weight:700;letter-spacing:-.01em;
}
.prompt-scenario{
flex:1 1 auto;min-height:0;overflow-y:auto;
margin:0 0 12px;color:#3a414c;
font-size:clamp(.95rem,.9rem + .4vh,1.15rem);
line-height:1.6;
padding-right:6px;
scrollbar-width:thin;scrollbar-color:#c9ced6 transparent;
}
.prompt-scenario::-webkit-scrollbar{width:8px}
.prompt-scenario::-webkit-scrollbar-track{background:transparent}
.prompt-scenario::-webkit-scrollbar-thumb{background:#d3d7dd;border-radius:8px}
.prompt-scenario.hidden{display:none;flex:0 0 0}
.prompt-part-wrap{
flex:0 0 auto;
background:#f8f5fc;border:1px solid #e3d8f2;border-radius:12px;padding:clamp(10px,1.6vh,16px);
}
.prompt-part-label{
font-size:.72rem;font-weight:700;text-transform:uppercase;
letter-spacing:.07em;color:var(--accent);margin-bottom:4px;
}
.prompt-part{margin:0;font-size:clamp(.95rem,.9rem + .3vw,1.08rem);font-weight:500;color:#20242b}

@media (max-width:859px){
.practice-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
.prompt-col{overflow:hidden;display:flex;flex-direction:column;min-height:0}
.prompt-scenario{flex:1 1 auto;min-height:0;overflow-y:auto}
.prompt-part-wrap{flex:0 0 auto}
}

.controls{
flex:0 0 auto;
display:flex;flex-wrap:wrap;gap:10px;
padding:clamp(8px,1.4vh,14px) clamp(14px,2.4vw,26px);
border-top:1px solid var(--border);background:#fafbfc;
}
#btn-next{flex:1 1 100%}
#btn-skip{flex:1}
#btn-end{flex:1}
@media (min-width:640px){
#btn-next{flex:0 0 auto;min-width:170px}
#btn-skip{flex:0 0 auto}
#btn-end{flex:0 0 auto;margin-left:auto}
}
/* Mobile: small fixed self-view, bottom-right (kept small so it clears the action bar) */
#cam-pip{
position:fixed;right:14px;bottom:14px;width:min(128px,34vw);aspect-ratio:4/3;
border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);
background:#000;object-fit:cover;transform:scaleX(-1);z-index:50;
}
/* Desktop: docked under the timer ring so it never overlaps the Part card or End Session */
@media (min-width:860px){
#cam-pip{
position:static;align-self:center;
width:clamp(140px,16vh,176px);
margin-top:clamp(16px,3vh,30px);
box-shadow:var(--shadow);
}
}

/* ---------- Overlays ---------- */
.overlay{
position:fixed;inset:0;background:rgba(17,20,25,.92);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:18px;z-index:100;color:#fff;text-align:center;padding:24px;
}
.overlay-text{color:#c6cbd4;max-width:440px;font-size:1rem;margin:0}
.overlay-num{font-size:clamp(80px,18vw,144px);font-weight:800;line-height:1}
.overlay-num.pop{animation:pop .9s ease}
.overlay-title{font-size:clamp(2rem,6vw,3rem);font-weight:800;line-height:1.1;margin:0}
.overlay-sub{color:#c6cbd4;margin:6px 0 0;font-size:.95rem}

/* ---------- Complete screen (FIXED FOR LIST HEIGHT) ---------- */
.complete-card{
max-width:828px;margin:0 auto;text-align:center;width:100%;
flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;
/* Balanced padding so the scroll area gets maximum height */
padding:clamp(10px,1.8vh,20px) clamp(16px,2.4vw,26px) clamp(10px,1.6vh,16px);
}
.complete-badge{
flex:0 0 auto;
width:clamp(38px,5vh,52px);height:clamp(38px,5vh,52px);border-radius:50%;
background:#e7f6ec;color:var(--ok);
display:flex;align-items:center;justify-content:center;
font-size:1.2rem;font-weight:800;margin:0 auto clamp(4px,1vh,10px);
}
.complete-card h2{flex:0 0 auto;font-size:clamp(1.05rem,.95rem + .6vh,1.5rem);font-weight:800;margin:0 0 2px}
.complete-sub{flex:0 0 auto;color:var(--muted);margin:0;font-size:.85rem}

/* Stats grid tightened to save vertical room for the list */
.stats{
flex:0 0 auto;
display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
gap:8px;margin:clamp(8px,1.4vh,16px) 0;
}
.stat{
background:#f7f8fa;border:1px solid var(--border);border-radius:10px;
padding:clamp(6px,1vh,10px) 8px;
}
.stat .v{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}
.stat .k{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-top:1px}

/* THE SCROLL CONTAINER: Takes all remaining space */
.complete-scroll{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
text-align:left;
margin:0;
padding-right:6px;
scrollbar-width:thin;scrollbar-color:#c9ced6 transparent;
}
.complete-scroll::-webkit-scrollbar{width:8px}
.complete-scroll::-webkit-scrollbar-track{background:transparent}
.complete-scroll::-webkit-scrollbar-thumb{background:#d3d7dd;border-radius:8px}

/* Recordings list tightened so more items fit in the viewport */
.recordings{text-align:left;margin:0 0 12px}
.recordings:last-child{margin-bottom:0}
.recordings h3{
font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
color:var(--muted);font-weight:600;margin:0 0 6px;
}
.rec-list{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:6px;
}
.rec-list li{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
background:#f7f8fa;border:1px solid var(--border);border-radius:8px;
padding:8px 12px;font-size:.84rem;
}
.rec-list li > div{min-width:0}
.rec-list .meta{color:var(--muted);font-size:.78rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){
.rec-list li{grid-template-columns:1fr;align-items:flex-start}
}

.ans-right{display:flex;align-items:center;gap:10px}
.status-up{color:var(--ok);font-weight:600;font-size:.82rem}
.status-ing{color:var(--muted);font-weight:600;font-size:.82rem}
.status-fail{color:var(--danger);font-weight:600;font-size:.82rem}
.dl{color:var(--accent);font-weight:600;text-decoration:none;font-size:.82rem}
.dl:hover{text-decoration:underline}

.complete-card .btn-lg{flex:0 0 auto;width:auto;min-width:200px;margin:12px auto 0}

/* ---------- Toast ---------- */
.toast{
position:fixed;left:50%;transform:translate(-50%,10px);bottom:24px;
background:#22262d;color:#fff;padding:10px 18px;border-radius:10px;
font-size:.88rem;box-shadow:var(--shadow);z-index:200;
opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;
max-width:calc(100vw - 32px);text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Motion ---------- */
.screen-in{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(176,67,46,.45)}70%{box-shadow:0 0 0 7px rgba(176,67,46,0)}100%{box-shadow:0 0 0 0 rgba(176,67,46,0)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}30%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}