:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#202632;background:#f5f6f8;--red:#d80621;--dark:#171717;--muted:#667085;--line:#e5e7eb;--green:#16794b;--amber:#8a6200;--softred:#fff1f2;--softgreen:#ecfdf3;--softamber:#fff8df}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin-top:0}.muted{color:var(--muted)}.small{font-size:.82rem}.hidden{display:none!important}
.loading,.auth{min-height:100vh;display:grid;place-items:center;padding:22px}.loading{text-align:center}.leaf{font-size:3rem}
.auth-box{width:min(900px,100%);display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 25px 70px #11182722}
.auth-copy{background:var(--dark);color:#fff;padding:52px}.auth-copy p{color:#c9cbd1;line-height:1.65}.auth-form{padding:48px}.tabs{display:flex;gap:8px;margin-bottom:25px}.tabs button{flex:1}
.shell{display:grid;grid-template-columns:245px 1fr;min-height:100vh}.side{background:var(--dark);color:#fff;padding:21px 14px;position:sticky;top:0;height:100vh}.brand{font-weight:900;font-size:1.05rem}.brand small{display:block;color:#aaa;font-weight:500;margin-top:4px}.nav{margin-top:23px}.nav button{width:100%;border:0;background:transparent;color:#ddd;text-align:left;padding:11px;border-radius:9px;margin:3px 0}.nav button:hover,.nav button.active{background:#303030;color:#fff}.account{margin-top:28px;border:1px solid #333;padding:11px;border-radius:11px}.main{padding:28px;max-width:1450px;width:100%;margin:auto}
.between,.row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.between{justify-content:space-between;align-items:flex-start}.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:15px}.s8{grid-column:span 8}.s7{grid-column:span 7}.s6{grid-column:span 6}.s5{grid-column:span 5}.s4{grid-column:span 4}.s3{grid-column:span 3}.s12{grid-column:span 12}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 9px 24px #1118270b;margin-top:15px}.hero{background:var(--dark);color:#fff}.hero p{color:#ccc}
.btn,.secondary,.danger{border-radius:9px;padding:10px 14px;font-weight:800}.btn{border:0;background:var(--red);color:#fff}.secondary{border:1px solid var(--line);background:#fff;color:#202632}.danger{border:1px solid #efb6be;background:#fff;color:#a90018}.btn:disabled{opacity:.55;cursor:not-allowed}
.pill{display:inline-block;padding:5px 9px;border-radius:99px;background:#f3f4f6;font-size:.74rem;font-weight:800}.pill.red{background:var(--softred);color:#a90018}.pill.green{background:var(--softgreen);color:var(--green)}.pill.amber{background:var(--softamber);color:var(--amber)}
label{display:grid;gap:6px;font-size:.87rem;font-weight:700}input,select,textarea{width:100%;padding:10px;border:1px solid #d0d5dd;border-radius:9px;background:#fff}textarea{min-height:95px;resize:vertical}.form{display:grid;gap:12px}.form2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.full{grid-column:1/-1}
.list-item{padding:13px 0;border-bottom:1px solid var(--line)}.list-item:last-child{border:0}.empty{text-align:center;padding:30px;color:var(--muted)}
.stat{font-size:2rem;font-weight:900}.track{height:8px;background:#eee;border-radius:99px;overflow:hidden;margin:7px 0}.track span{display:block;height:100%;background:var(--red)}
.notice,.warning,.error{padding:12px;border-radius:10px}.notice{border-left:5px solid var(--green);background:var(--softgreen)}.warning{border-left:5px solid var(--amber);background:var(--softamber)}.error{border-left:5px solid var(--red);background:var(--softred);color:#a90018}
.tasks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.task{border:1px solid var(--line);border-radius:11px;padding:12px}.task.focus{background:var(--softred);border-color:var(--red)}
.modal-bg{position:fixed;inset:0;background:#0009;display:grid;place-items:center;padding:16px;z-index:30}.modal{width:min(720px,100%);max-height:92vh;overflow:auto;background:#fff;padding:20px;border-radius:17px}
.recorder{background:var(--dark);color:#fff;text-align:center;border-radius:15px;padding:18px}.timer{font-size:4rem;font-weight:900;font-variant-numeric:tabular-nums}.recording{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.45}}
.step{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}.num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f3f4f6;font-weight:900}.step.done .num{background:var(--softgreen);color:var(--green)}
audio{width:100%;margin:10px 0}.code{font-family:monospace;font-size:1.35rem;font-weight:900;letter-spacing:.08em;text-align:center;padding:14px;border:1px dashed #aaa;border-radius:10px}
#toasts{position:fixed;right:18px;bottom:18px;z-index:60;display:grid;gap:8px}.toast{background:var(--dark);color:#fff;padding:12px 14px;border-radius:10px;max-width:380px;box-shadow:0 10px 30px #0005}.toast.bad{background:#a90018}
@media(max-width:850px){.shell{grid-template-columns:1fr}.side{position:relative;height:auto}.nav{display:flex;overflow:auto}.nav button{min-width:max-content}.s8,.s7,.s6,.s5,.s4,.s3{grid-column:1/-1}.auth-box{grid-template-columns:1fr}.auth-copy{display:none}.tasks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.form2{grid-template-columns:1fr}.step{grid-template-columns:30px 1fr}.step>:last-child{grid-column:2}}


.answer-guide{overflow:hidden}
.guide-now{margin:14px 0 16px;padding:16px 18px;border-radius:14px;background:var(--softred);border:2px solid var(--red)}
.guide-now .small{color:var(--red);font-weight:900;letter-spacing:.05em}
.guide-now strong{display:block;font-size:1.45rem;margin:4px 0}
.guide-now p{margin:0;line-height:1.45}
.guide-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.guide-part{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:11px;background:#fff;transition:.2s ease}
.guide-part>span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f0f1f3;font-weight:900}
.guide-part b{display:block;font-size:.88rem}
.guide-part small{display:block;color:var(--muted);margin-top:2px}
.guide-part.active{border-color:var(--red);background:var(--softred);box-shadow:0 0 0 3px rgba(216,6,33,.1);transform:translateY(-2px)}
.guide-part.active>span{background:var(--red);color:#fff}
.guide-part.done{background:var(--softgreen);border-color:#bdebd1}
.guide-part.done>span{background:var(--green);color:#fff}


.prompt-figure{margin:16px 0;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#f8f8fa}
.prompt-figure img{display:block;width:100%;max-height:520px;object-fit:contain;background:#eceef1}
.prompt-figure figcaption{padding:8px 11px;color:var(--muted);font-size:.78rem}
.prompt-figure.compact{max-width:520px}
.prompt-figure.compact img{max-height:260px}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.option-card{border:2px solid var(--line);border-radius:14px;padding:16px;background:#fff}
.option-card h3{margin:10px 0 6px}
.option-card p{margin-bottom:0;line-height:1.45}
.option-grid.compact{max-width:720px}
.option-grid.compact .option-card{padding:12px}
.visual-editor{padding:15px;border:1px solid var(--line);border-radius:13px;background:#fafafa}
.question-library-item{padding:18px 0}
@media(max-width:650px){.option-grid{grid-template-columns:1fr}}

.form-status{min-height:24px;margin:2px 0 8px;font-weight:800}.form-status.working{color:#667085}.form-status.success{color:#16794b}.form-status.error{padding:10px;border-radius:9px;background:#fff1f2;color:#a90018;border:1px solid #efb6be}
.question-tools{position:sticky;top:10px;z-index:8}.selection-bar{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.question-check{display:flex;grid-template-columns:auto auto;align-items:center;gap:7px}.question-check input{width:auto}.bulk-textarea{min-height:300px}.task-page{grid-template-columns:repeat(4,minmax(0,1fr))}.task-page .task{background:#fff;padding:18px}.drill-focus{max-width:760px}.drill-timer{color:var(--dark);text-align:left}.secondary:disabled,.danger:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:1000px){.task-page{grid-template-columns:repeat(2,minmax(0,1fr))}.question-tools{position:static}}
@media(max-width:560px){.task-page{grid-template-columns:1fr}}

/* v9 Task 5 two-stage comparison */
.task5-stage{display:grid;gap:16px}.task5-compare-clock{font-size:44px;font-weight:900;line-height:1;background:#171717;color:#fff;border-radius:14px;padding:14px 18px;min-width:82px;text-align:center}.task5-option{overflow:hidden}.option-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:12px;border:1px solid var(--line)}.task5-choice-row{justify-content:center;margin-top:4px}.visual-editor hr{border:0;border-top:1px solid var(--line);margin:20px 0}@media(max-width:700px){.task5-compare-clock{font-size:34px}.option-grid{grid-template-columns:1fr}}

.link-button{border:0;background:transparent;text-decoration:underline;cursor:pointer;padding:10px 0;font-weight:700;color:var(--muted)}

.recorder-note{color:#d5d7dc;margin:10px 0 2px}
.task5-stage .between{display:block}
.task5-compare-clock{display:none!important}

.task5-choice-row .btn,.task5-choice-row .secondary{min-width:180px}


.activation-help{margin-top:4px;padding:13px;border-radius:11px;background:var(--softgreen);color:var(--green)}
.activation-help p{margin:5px 0 0;line-height:1.45}


/* v11.1 Task 5 distraction-free timed view */
.task5-focus-screen{
 position:fixed;
 inset:0;
 z-index:1000;
 display:grid;
 grid-template-rows:auto 1fr auto;
 gap:14px;
 padding:18px;
 background:#080808;
 color:#fff;
 overflow:hidden;
}
.task5-focus-header{
 display:grid;
 gap:10px;
}
.task5-focus-header>div:first-child{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:18px;
}
.task5-focus-phase{
 font-size:clamp(.9rem,2vw,1.2rem);
 font-weight:900;
 letter-spacing:.08em;
}
.task5-focus-header strong{
 font-size:clamp(2.5rem,7vw,5rem);
 line-height:1;
 font-variant-numeric:tabular-nums;
}
.task5-progress-track{
 width:100%;
 height:14px;
 border-radius:999px;
 overflow:hidden;
 background:#353535;
}
.task5-progress-track span{
 display:block;
 height:100%;
 width:0;
 background:var(--red);
 transition:width .2s linear;
}
.task5-focus-images{
 min-height:0;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:14px;
}
.task5-focus-option{
 position:relative;
 min-width:0;
 min-height:0;
 padding:0;
 border:4px solid transparent;
 border-radius:18px;
 overflow:hidden;
 background:#171717;
 color:#fff;
 cursor:pointer;
}
.task5-focus-option:disabled{opacity:1;cursor:default}
.task5-focus-option.selected{
 border-color:var(--red);
 box-shadow:0 0 0 4px rgba(216,6,33,.3);
}
.task5-focus-option img{
 width:100%;
 height:100%;
 display:block;
 object-fit:cover;
}
.task5-focus-fallback{
 width:100%;
 height:100%;
 display:grid;
 place-items:center;
 padding:30px;
 font-size:clamp(1.5rem,4vw,3rem);
 font-weight:900;
 text-align:center;
}
.task5-focus-label{
 position:absolute;
 left:12px;
 right:12px;
 bottom:12px;
 padding:10px 12px;
 border-radius:10px;
 background:rgba(0,0,0,.78);
 color:#fff;
 text-align:left;
 font-weight:900;
 font-size:clamp(.85rem,1.8vw,1.15rem);
}
.task5-focus-instruction{
 text-align:center;
 font-size:clamp(.95rem,2vw,1.2rem);
 font-weight:800;
}
.task5-focus-instruction.recording{color:#ffb5bf}
@media(max-width:700px){
 .task5-focus-screen{padding:10px;gap:10px}
 .task5-focus-images{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
 .task5-focus-label{left:8px;right:8px;bottom:8px;padding:7px 9px}
 .task5-progress-track{height:10px}
}