:root{
  --ink:#20333b;--muted:#64747c;--paper:#f7faf8;--panel:#ffffff;--line:#dbe5e1;
  --green:#2e7258;--green2:#eaf5ef;--gold:#a87524;--gold2:#fff6e3;--blue:#315f80;--blue2:#eaf2f8;
  --bad:#9a4138;--bad2:#fff0ed;--shadow:0 12px 30px rgba(36,64,54,.09);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#edf5f0 0,#f7faf8 210px);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.55}
button,input,textarea{font:inherit}.hidden{display:none!important}.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.topbar-inner{max-width:1220px;margin:auto;padding:12px 18px;display:flex;justify-content:space-between;gap:16px;align-items:center}.brand-block{display:flex;align-items:center;gap:12px}.course-badge{background:var(--green);color:#fff;font-weight:900;border-radius:12px;padding:9px 12px;letter-spacing:.04em}.brand-title{font-weight:900;font-size:18px}.brand-subtitle{font-size:13px;color:var(--muted)}
.top-stats{display:flex;gap:8px}.top-stats>div{min-width:84px;background:#f3f7f5;border:1px solid var(--line);border-radius:12px;padding:7px 10px;text-align:center}.top-stats span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:block}.top-stats b{font-size:14px}
.page-wrap{max-width:1220px;margin:0 auto;padding:24px 18px 40px}.screen{min-height:68vh}.panel,.hero-card,.content-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.hero-card{padding:30px;max-width:960px;margin:22px auto}.eyebrow{display:inline-block;color:var(--green);background:var(--green2);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.hero-card h1{font-size:clamp(31px,5vw,54px);line-height:1.05;margin:16px 0 8px}.hero-card h2{font-size:clamp(19px,3vw,28px);font-weight:650;margin:0 0 18px;color:#466058}.lead{font-size:18px;color:#40535a;max-width:860px}.goal-grid,.info-grid,.model-grid,.score-grid,.check-grid{display:grid;gap:12px}.goal-grid{grid-template-columns:repeat(3,1fr);margin:22px 0}.goal-card{padding:16px;background:#f6faf8;border:1px solid var(--line);border-radius:14px}.goal-card b{display:block;margin-bottom:5px}.goal-card span{font-size:14px;color:var(--muted)}
.login-box{margin-top:24px;padding:20px;border-radius:16px;background:#fbfcfb;border:1px solid var(--line)}.field{margin:12px 0}.field label{font-weight:800;font-size:13px;display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}.field small{color:var(--muted);font-weight:500}.input,textarea{width:100%;border:1.5px solid #cbd9d3;border-radius:12px;padding:12px 13px;background:#fff;color:var(--ink);outline:none;transition:.15s}.input:focus,textarea:focus{border-color:#5d9a80;box-shadow:0 0 0 3px rgba(70,133,105,.12)}.input[readonly]{background:#f2f6f4;color:#52665e}textarea{resize:vertical;min-height:110px}.writing-box{background:#fffdf8;border-color:#ddc996}.writing-note{font-size:12px;color:#7a6740;margin-top:5px}.word-meter{font-size:12px;color:var(--muted);text-align:right;margin-top:4px}.word-meter.good{color:var(--green);font-weight:800}.word-meter.warn{color:var(--gold);font-weight:800}.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:850;cursor:pointer;transition:.15s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.primary{background:var(--green);color:#fff}.secondary{background:#eaf0ed;color:#2f4940}.gold{background:#a77624;color:#fff}.danger{background:#9b4339;color:#fff}.link-btn{background:transparent;color:var(--blue);padding:8px 0}.spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;margin-right:6px}@keyframes spin{to{transform:rotate(360deg)}}
.notice{border-radius:13px;padding:12px 14px;margin:12px 0;border:1px solid var(--line);font-size:14px}.notice.ok{background:var(--green2);border-color:#b8d9c8;color:#22533f}.notice.warn{background:var(--gold2);border-color:#ead5a1;color:#6b501d}.notice.bad{background:var(--bad2);border-color:#e6bbb5;color:#74352f}.notice.gentle{background:var(--blue2);border-color:#c2d7e6;color:#315b73}.status-line{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted)}.status-dot{width:10px;height:10px;border-radius:50%;background:#b5c1bc}.status-dot.ok{background:#3d8a69}.status-dot.bad{background:#b04d44}
.learning-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px}.side-panel{align-self:start;position:sticky;top:86px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px;box-shadow:var(--shadow)}.student-mini{font-size:13px;padding-bottom:11px;border-bottom:1px solid var(--line)}.student-mini b{display:block;font-size:15px}.student-mini span{color:var(--muted)}.progress-track{height:7px;background:#e9efec;border-radius:999px;margin:12px 0;overflow:hidden}.progress-track>div{height:100%;width:0;background:linear-gradient(90deg,#3d8063,#91bda8)}.stage-nav{display:grid;gap:6px}.stage-btn{width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:10px;color:#53655e;font-size:13px;font-weight:700}.stage-btn.active{background:var(--green2);color:#235541}.stage-btn.done:before{content:'✓ ';color:var(--green)}.stage-btn:disabled{opacity:.55;cursor:not-allowed}.content-panel{min-width:0}.content-card{padding:24px;margin-bottom:15px}.section-tag{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:var(--blue2);padding:5px 9px;border-radius:999px}.content-card h2{font-size:clamp(25px,4vw,38px);line-height:1.15;margin:12px 0}.content-card h3{font-size:20px;margin:20px 0 8px}.content-card p{margin:8px 0}.teacher-guide{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:15px;background:#f3faf6;border-left:5px solid #65a382;border-radius:12px;margin:16px 0}.teacher-icon{width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:900}.teacher-guide b{display:block;margin-bottom:4px}.teacher-actions{margin-top:8px}.listen-btn{border:1px solid #a8cbbb;background:#fff;color:#2e6650;border-radius:9px;padding:6px 9px;font-size:12px;font-weight:800;cursor:pointer}
.concept-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.concept{border:1px solid var(--line);border-radius:13px;padding:13px;background:#fbfdfc}.concept b{display:block;color:var(--green);margin-bottom:4px}.concept p{font-size:13px;color:#53645e}.compare-three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}.compare-card{border-radius:14px;padding:15px;border:1px solid var(--line)}.compare-card.weak{background:#fff3f1;border-color:#efd0cb}.compare-card.better{background:#fff8e9;border-color:#e8d3a9}.compare-card.strong{background:#eff9f3;border-color:#badbc9}.compare-card h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.05em}.compare-card p{font-size:14px}.think{border-left:4px solid var(--gold);padding:12px 15px;background:#fffaf0;border-radius:10px;margin:13px 0}.think b{color:#76551e}.frame-box{background:#f5f8fb;border:1px solid #cedde7;border-radius:14px;padding:15px;margin:14px 0}.frame-box code{display:block;white-space:normal;font-family:inherit;font-weight:750;color:#355c73;margin:4px 0}.model-accordion{border:1px solid var(--line);border-radius:13px;margin:9px 0;overflow:hidden}.model-accordion summary{cursor:pointer;padding:12px 14px;font-weight:850;background:#f7faf8}.model-accordion .model-body{padding:14px}.annotation{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.chip{display:inline-block;background:#eef4f1;color:#426054;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:750}.chip.blue{background:#e8f1f8;color:#315d79}.chip.gold{background:#fff4dc;color:#7b5a20}
.mc-card{position:relative;overflow:hidden;border:1px solid #cddbd5;border-radius:16px;padding:18px;background:#fff;margin:15px 0;isolation:isolate}.mc-card>*:not(.ocr-layer):not(.trace-stamp){position:relative;z-index:2}.ocr-layer{position:absolute;inset:0;z-index:1;pointer-events:none;aria-hidden:true;opacity:.09;background-size:130px 85px}.trace-stamp{position:absolute;right:9px;top:7px;z-index:3;font-size:9px;font-weight:800;color:rgba(52,85,71,.45);pointer-events:none}.q-label{font-size:12px;color:var(--muted);font-weight:800}.q-text{font-size:18px;font-weight:850;margin:8px 0 12px;padding-right:70px}.options{display:grid;gap:9px}.option{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;align-items:start;border:1px solid #d8e2de;border-radius:12px;padding:11px;background:#fbfdfc;cursor:pointer}.option:hover{border-color:#9dbbae}.option.selected{border-color:#5f9e82;background:#eff8f3}.option input{position:absolute;opacity:0;pointer-events:none}.letter{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e7efeb;font-weight:900;color:#466156}.option.selected .letter{background:var(--green);color:#fff}.feedback{margin-top:11px;padding:10px;border-radius:10px;font-size:13px}.feedback.good{background:var(--green2);color:#275844}.feedback.bad{background:var(--gold2);color:#6c511e}
.lab-card{border:1px solid #e3d7ba;background:#fffdf7;border-radius:16px;padding:18px;margin:16px 0}.lab-card h3{margin-top:0}.micro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.checklist{display:grid;gap:8px;margin:12px 0}.check-item{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:11px;background:#fbfdfc}.check-item input{margin-top:4px;transform:scale(1.1)}.score-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 9px;background:#eef4f1;color:#365a4b;font-size:12px;font-weight:850}.nav-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:16px 0 24px}.nav-hint{text-align:center;color:var(--muted);font-size:12px}.submit-card{max-width:900px;margin:20px auto;padding:26px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.readiness-list{display:grid;gap:8px;margin:15px 0}.ready-row{display:flex;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid #edf1ef}.ready-row span{color:var(--muted)}
.identity-result{display:grid;grid-template-columns:1.4fr .8fr;gap:14px;background:linear-gradient(135deg,#f1f8f4,#fff8e9);border:1px solid #d5e2dc;border-radius:17px;padding:18px}.identity-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.identity-grid span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.identity-grid b{display:block;font-size:16px;word-break:break-word}.total-score{display:grid;place-items:center;text-align:center;background:#fff;border:1px solid #dbe4df;border-radius:15px;padding:12px}.total-score span{font-size:12px;color:var(--muted);font-weight:800}.total-score strong{font-size:40px;color:var(--green);line-height:1}.score-grid{grid-template-columns:repeat(4,1fr);margin:14px 0}.score-box{background:#f7faf8;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}.score-box span{font-size:11px;color:var(--muted);display:block}.score-box b{font-size:18px}.submission-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#f5f7f6;border-radius:12px;padding:13px;margin:13px 0}.submission-meta span{font-size:11px;color:var(--muted);display:block}.submission-meta code,.submission-meta b{font-size:12px;word-break:break-all}.screenshot-tip{font-size:12px;color:var(--muted);text-align:center;margin-top:12px}
footer{text-align:center;padding:25px 15px 38px;color:#6a7973;font-size:12px}.modal{position:fixed;inset:0;background:rgba(24,39,33,.45);z-index:100;display:grid;place-items:center;padding:18px}.modal-card{background:#fff;border-radius:16px;max-width:460px;width:100%;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.22)}.modal-card h3{margin-top:0}.modal-actions{text-align:right;margin-top:16px}
@media(max-width:900px){.learning-layout{grid-template-columns:1fr}.side-panel{position:relative;top:0}.stage-nav{grid-template-columns:repeat(3,1fr)}.concept-row{grid-template-columns:repeat(2,1fr)}.compare-three{grid-template-columns:1fr}.goal-grid{grid-template-columns:1fr 1fr}.score-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.topbar-inner{align-items:flex-start}.top-stats{display:none}.brand-title{font-size:15px}.brand-subtitle{font-size:11px}.page-wrap{padding:14px 10px 30px}.hero-card,.content-card,.submit-card{padding:17px;border-radius:14px}.goal-grid,.concept-row,.micro-grid,.identity-grid,.identity-result,.submission-meta{grid-template-columns:1fr}.stage-nav{grid-template-columns:1fr 1fr}.q-text{font-size:17px;padding-right:48px}.option{grid-template-columns:28px minmax(0,1fr);padding:10px}.nav-row{grid-template-columns:1fr 1fr}.nav-hint{grid-column:1/-1;grid-row:1}.score-grid{grid-template-columns:1fr 1fr}.ocr-layer{opacity:.078}.total-score strong{font-size:36px}}
@media(prefers-contrast:more){.ocr-layer{opacity:.045!important}.panel,.content-card,.hero-card,.mc-card{border-width:2px}.option{border-width:2px}}
@media print{body{display:none!important}}