:root{
  --navy:#173b57;--navy-2:#24506f;--ink:#263b4a;--muted:#6f8290;
  --bg:#f3f6f7;--paper:#fff;--line:#dce6ea;--mint:#eaf7f2;
  --mint-2:#d8f0e7;--teal:#2f8b75;--blue:#eaf3fb;--amber:#fff7dc;
  --focus:#fff9d9;--danger:#b65252;--shadow:0 12px 34px rgba(29,59,77,.09);
  --radius:18px;--font:Inter,"Segoe UI",Arial,sans-serif
}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(145deg,#f8fafb 0%,#eff4f5 62%,#edf6f2 100%);color:var(--ink);font-family:var(--font);font-size:14px}
button,input,select,textarea{font:inherit}button,a{transition:.18s ease}.app{min-height:100vh}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,var(--navy),#367c8d);display:grid;place-items:center;color:#fff;font-weight:800}.brand h1{font-size:16px;margin:0;color:var(--navy)}.brand small{color:var(--muted)}
.top-actions{display:flex;gap:10px;align-items:center}.avatar{width:36px;height:36px;border-radius:50%;background:var(--mint-2);color:var(--teal);display:grid;place-items:center;font-weight:700}
.page{max-width:1320px;margin:0 auto;padding:28px 32px 48px}.crumb{color:var(--muted);font-size:13px;margin-bottom:14px}.crumb a{color:var(--teal);text-decoration:none}
.workspace{background:rgba(255,255,255,.95);border:1px solid rgba(216,228,232,.95);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.workspace-head{padding:22px 26px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.workspace-head h2{font-size:23px;letter-spacing:-.3px;margin:0 0 5px;color:var(--navy)}.workspace-head p{margin:0;color:var(--muted);line-height:1.55}.step-count{white-space:nowrap;color:var(--teal);font-weight:700;background:var(--mint);padding:8px 12px;border-radius:20px}
.stepper{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:22px 26px;background:#fbfcfc;border-bottom:1px solid var(--line)}.step{position:relative;text-align:center;color:#91a0aa;font-size:12px;font-weight:600}.step:before{content:"";height:2px;background:#dfe8eb;position:absolute;left:-50%;right:50%;top:14px}.step:first-child:before{display:none}.dot{width:29px;height:29px;margin:0 auto 7px;border-radius:50%;background:#edf1f3;border:2px solid #dfe7ea;display:grid;place-items:center;position:relative;z-index:2}.step.done{color:var(--teal)}.step.done .dot{color:#fff;background:var(--teal);border-color:var(--teal)}.step.done:before,.step.active:before{background:var(--teal)}.step.active{color:var(--navy)}.step.active .dot{background:#fff7d8;border-color:#e8bd44;color:#8a6410;box-shadow:0 0 0 5px #fff9e8}
.content{padding:26px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:22px}.stack{display:grid;gap:18px}
.section{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}.section-title{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:var(--mint);border-bottom:1px solid #d8ebe4}.section-title.blue{background:var(--blue);border-color:#d9e7f1}.section-title.amber{background:var(--amber);border-color:#efe5ba}.section-title h3{margin:0;font-size:15px;color:var(--navy)}.section-title span{font-size:12px;color:var(--muted)}.section-body{padding:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.field{display:grid;gap:7px}.field label{font-size:12px;font-weight:700;color:#506673}.req{color:#d16c5d}.control{width:100%;min-height:43px;border:1px solid #cfdee3;border-radius:10px;background:#fff;padding:10px 12px;color:var(--ink);outline:none}.control:hover{border-color:#abc7cf}.control:focus{background:var(--focus);border-color:#d6b548;box-shadow:0 0 0 3px rgba(225,192,80,.16)}textarea.control{min-height:90px;resize:vertical}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.choice{display:block;position:relative}.choice input{position:absolute;opacity:0}.choice-card{height:100%;border:1px solid var(--line);border-radius:14px;padding:17px;background:#fff;cursor:pointer}.choice-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(35,71,91,.08);border-color:#a9cfc3}.choice input:checked+.choice-card{border:2px solid var(--teal);background:var(--mint);box-shadow:0 0 0 4px rgba(47,139,117,.09)}.choice-icon{width:38px;height:38px;border-radius:11px;background:var(--blue);display:grid;place-items:center;margin-bottom:12px;color:var(--navy);font-weight:800}.choice-card h4{margin:0 0 5px;color:var(--navy)}.choice-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.editor{border:1px solid #cfdde2;border-radius:12px;background:#fff;overflow:hidden}.editor:focus-within{border-color:#d6b548;box-shadow:0 0 0 3px rgba(225,192,80,.16)}.editor-bar{display:flex;align-items:center;gap:5px;padding:8px 10px;border-bottom:1px solid var(--line);background:#f8fafb;flex-wrap:wrap}.tool{min-width:30px;height:30px;border:0;border-radius:7px;background:transparent;color:#49616f;cursor:pointer}.tool:hover{background:#e8eff2;color:var(--navy)}.tool.sep{border-left:1px solid var(--line);border-radius:0;width:1px;min-width:1px;margin:0 4px}.editor-area{min-height:148px;padding:16px;outline:none;line-height:1.65}.editor-area:focus{background:var(--focus)}.editor-foot{padding:7px 12px;background:#fbfcfc;border-top:1px solid var(--line);font-size:11px;color:#84959f;text-align:right}
.answer-row{display:grid;grid-template-columns:28px 1fr 44px;gap:10px;align-items:center;margin-bottom:10px}.answer-key{width:28px;height:28px;border-radius:8px;background:#edf3f5;display:grid;place-items:center;font-weight:700;color:var(--navy)}.check{width:36px;height:22px;border-radius:20px;background:#d7e1e4;position:relative;cursor:pointer}.check:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;box-shadow:0 1px 3px #83949b}.check.on{background:var(--teal)}.check.on:after{left:17px}
.summary{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcfc;position:sticky;top:94px}.summary h3{font-size:14px;margin:0 0 14px;color:var(--navy)}.progress{height:7px;background:#e5ecef;border-radius:9px;overflow:hidden}.progress span{height:100%;display:block;background:linear-gradient(90deg,#4aa989,#7fc9ae);width:67%}.summary-list{display:grid;gap:10px;margin-top:15px}.sum-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.sum-row b{color:var(--ink)}.tip{margin-top:15px;background:var(--amber);padding:12px;border-radius:11px;font-size:12px;line-height:1.5;color:#695b34}
.footer-actions{padding:18px 26px;border-top:1px solid var(--line);background:#fbfcfc;display:flex;justify-content:space-between;align-items:center;position:sticky;bottom:0;z-index:10}.actions-right{display:flex;gap:10px}.btn{border:1px solid #c9d8de;border-radius:10px;background:#fff;color:var(--navy);padding:10px 17px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;gap:8px;align-items:center;justify-content:center}.btn:hover{border-color:#95b4bf;background:#f5f9fa}.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}.btn.primary:hover{background:var(--navy-2)}.btn.soft{background:var(--mint);border-color:#bcded2;color:#246c5b}.btn.danger{color:var(--danger)}.text-btn{border:0;background:none;color:var(--muted);cursor:pointer}
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:760px;margin:auto}.mode{border:1px solid var(--line);border-radius:18px;padding:25px;text-align:center;text-decoration:none;color:inherit;background:#fff}.mode:hover{border-color:#8fbfb1;transform:translateY(-3px);box-shadow:var(--shadow)}.mode .choice-icon{margin:0 auto 15px;width:52px;height:52px;font-size:20px}.mode h3{margin:0 0 8px;color:var(--navy)}.mode p{color:var(--muted);line-height:1.55;margin:0}
.difficulty{display:grid;gap:12px}.difficulty-row{display:grid;grid-template-columns:140px 1fr 124px;gap:15px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:16px}.difficulty-row.average{background:#f0f8ff}.difficulty-row.below{background:#fff9e8}.difficulty-row.advance{background:#f0faf5}.counter{display:grid;grid-template-columns:38px 48px 38px;border:1px solid #cad9de;border-radius:10px;overflow:hidden;background:#fff}.counter button{border:0;background:#f5f8f9;font-size:18px;cursor:pointer}.counter span{display:grid;place-items:center;font-weight:800;border-left:1px solid var(--line);border-right:1px solid var(--line)}.distbar{height:8px;border-radius:8px;background:#e5ecef;overflow:hidden}.distbar span{display:block;height:100%;background:#79bfa8;width:33%}
.preview-card{border:1px solid var(--line);border-radius:16px;overflow:hidden}.preview-q{padding:20px;background:#fff}.preview-q h4{font-size:15px;line-height:1.6;margin:0 0 16px}.preview-answer{padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-top:9px}.preview-answer.correct{background:var(--mint);border-color:#a9d4c5}.finish{text-align:center;padding:64px 24px}.finish-icon{width:70px;height:70px;border-radius:50%;background:var(--mint);color:var(--teal);font-size:30px;display:grid;place-items:center;margin:0 auto 18px}.finish h2{color:var(--navy);font-size:25px}.finish p{color:var(--muted);max-width:550px;margin:0 auto 24px;line-height:1.6}
.toast{position:fixed;right:24px;bottom:24px;background:var(--navy);color:#fff;padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:50}.toast.show{opacity:1;transform:none}
.question-tabs{height:48px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:stretch;padding-left:28px}.question-tabs a{display:flex;align-items:center;padding:0 18px;color:#30435a;text-decoration:none;font-weight:600;border-bottom:3px solid transparent}.question-tabs a.active{background:#fffbd2;border-bottom-color:#d7d447;color:#17204d;font-weight:800}
.record-shell{background:#fff;border:1px solid var(--line);border-left:6px solid #d8dfe3;border-radius:20px;box-shadow:0 10px 28px rgba(31,55,70,.07);padding:18px}.record-head{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:12px;align-items:center}.q-number{min-width:52px;height:40px;padding:0 14px;border-radius:22px;background:#f0f1ff;color:#2d3ba6;display:grid;place-items:center;font-weight:800;font-size:18px}.type-pill{height:40px;padding:0 16px;border-radius:22px;background:#ddf8e9;color:#087438;display:flex;align-items:center;font-size:18px;font-weight:800}.academic-strip{height:34px;border:1px solid #d8e3e9;background:#f6f9fb;border-radius:9px;padding:0 13px;display:flex;align-items:center;color:#718494;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-btn{height:40px;min-width:48px;border:1px solid #d1dfeb;background:#fff;border-radius:9px;color:#0669d8;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;cursor:pointer}.icon-btn:hover{background:#f1f8ff;border-color:#80bff0}.record-grid{display:grid;grid-template-columns:1.35fr 1fr .83fr;gap:12px;margin-top:26px}.record-panel{min-height:86px;border:1px solid var(--line);background:#f8fafb;border-radius:13px;padding:14px 16px}.record-panel h4{margin:0 0 10px;color:#607381;font-size:14px}.record-panel p{margin:0;color:#17204d;font-size:15px}.answer-badge{display:inline-flex;padding:5px 12px;border:1px solid #80e7a5;border-radius:18px;background:#e2ffec;color:#07833c}
.stats-wrap{position:relative}.stats-popover{position:absolute;width:590px;right:58px;top:-34px;background:#fff;border:1px solid #d2dfe5;border-radius:15px;box-shadow:0 18px 42px rgba(37,62,77,.16);z-index:30;padding:13px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}.stats-popover.open{opacity:1;visibility:visible;transform:none}.stats-title{display:flex;gap:10px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line)}.stats-title-icon{width:30px;height:30px;border-radius:9px;background:#e9f5fb;color:#2082ae;display:grid;place-items:center}.stats-title b{display:block;color:#21364b}.stats-title small{color:#80919d}.stats-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:15px;margin-top:8px}.stats-col:first-child{border-right:1px solid var(--line);padding-right:14px}.stat-line{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;min-height:44px;border-bottom:1px solid #e7edef}.stat-i{width:30px;height:30px;border-radius:50%;background:#e8f7f4;color:#269c8e;display:grid;place-items:center}.stat-line span{color:#6f8291;font-size:12px}.stat-line b{color:#142d4b;font-size:15px}.mini-track{grid-column:2/4;height:5px;background:#e8eef0;border-radius:4px;overflow:hidden;margin-top:-7px}.mini-track i{display:block;height:100%;width:0;background:#58bd9d}.stats-note{margin-top:10px;border:1px solid #d8e5e8;background:#f2f8f9;color:#718391;border-radius:10px;padding:8px 11px;font-size:11px}
.edit-canvas{background:#fff;border:1px solid var(--line);border-left:5px solid #d8dfe3;border-radius:0 0 18px 18px;box-shadow:0 11px 28px rgba(30,55,70,.07);padding:28px 18px}.edit-layout{display:grid;grid-template-columns:1.42fr 1fr;gap:26px}.edit-column{display:grid;align-content:start;gap:12px}.soft-card{background:#f8fafb;border:1px solid #dce5e9;border-radius:18px;padding:12px}.soft-card h3{font-size:17px;margin:0 0 15px;color:#17314a}.soft-card .control{background:#fff}.soft-card .control:focus{background:var(--focus)}.question-entry{min-height:46px}.attach-row{margin-top:7px;min-height:48px;border:1px solid #d8e2e7;border-radius:13px;background:#fff;padding:0 15px;display:flex;align-items:center;justify-content:space-between;font-weight:700;color:#162740}.answer-choice-row{display:flex;gap:12px;align-items:center}.answer-choice{min-width:135px;border:1px solid #dae4e8;border-radius:13px;background:#fff;padding:12px 20px;display:flex;gap:10px;align-items:center}.radio{width:19px;height:19px;border:1px solid #71838e;border-radius:50%;background:#fff}.radio.selected{border:2px solid #1677ff;box-shadow:inset 0 0 0 4px #fff;background:#1677ff}.setting-row{min-height:42px;border-bottom:1px solid #e2e9ec;display:flex;align-items:center;justify-content:space-between;color:#17204d}.setting-row:last-child{border-bottom:0}.switch{width:48px;height:19px;border-radius:18px;background:#aebac5;position:relative;cursor:pointer}.switch:after{content:"";position:absolute;top:3px;left:6px;width:13px;height:13px;border-radius:50%;background:#fff}.switch.on{background:#079068}.switch.on:after{left:29px}.board-row{display:grid;grid-template-columns:118px 1fr 38px;gap:8px}.delete-square{border:2px solid #ff5722;background:#fff;color:#f04b20;border-radius:7px;font-size:18px}.edit-footer{margin-top:18px;display:flex;justify-content:flex-end;gap:10px}
@media(max-width:980px){.record-head{grid-template-columns:auto auto 1fr}.record-head .academic-strip{grid-column:1/-1;grid-row:2}.record-grid,.edit-layout{grid-template-columns:1fr}.stats-popover{right:0;width:min(590px,calc(100vw - 36px))}}
@media(max-width:900px){.page{padding:18px 14px 32px}.topbar{padding:0 16px}.layout{grid-template-columns:1fr}.summary{position:static}.stepper{overflow:auto;grid-template-columns:repeat(6,125px)}.grid-2,.grid-3,.choice-grid{grid-template-columns:1fr}.mode-grid{grid-template-columns:1fr}.difficulty-row{grid-template-columns:1fr}.workspace-head{flex-direction:column}.footer-actions{position:static;gap:10px;flex-wrap:wrap}.actions-right{margin-left:auto}}