:root{--blue:#205c9d;--ink:#17304e;--muted:#617389;--line:#d5dfeb;--pale:#f5f8fc;--good:#16804d;--bad:#b72e36;--surface:#fff}*{box-sizing:border-box}html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--ink);-webkit-text-size-adjust:100%}body{margin:0;background:#f1f6fc;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;border:1px solid transparent;border-radius:12px;padding:10px 15px;font-weight:700;min-height:43px;touch-action:manipulation}button:disabled{opacity:.38;cursor:not-allowed}.primary{background:var(--blue);color:white}.primary:hover:not(:disabled){background:#164779}.secondary{background:#eef3f9;border-color:#c8d7e9;color:#264665}.secondary:hover:not(:disabled){background:#e2ebf5}.hidden{display:none!important}.top{display:flex;justify-content:space-between;align-items:center;padding:13px clamp(16px,3vw,36px);background:#173d70;color:white;min-height:70px}.brand{display:flex;gap:10px;align-items:center;font-size:20px}.brand small{font-size:12px;display:block;color:#c5d9f2}.brand .logo{font-size:38px;line-height:1}.header-right{display:flex;align-items:center;gap:14px;font-size:14px}.header-right .secondary{background:#eaf2ff}main{max-width:1250px;margin:24px auto;padding:0 18px 45px}.card{background:white;border:1px solid #dce5f1;border-radius:19px;padding:22px;box-shadow:0 3px 15px #1b3b660a;margin-bottom:18px}h1{font-size:clamp(24px,3vw,32px);margin:0 0 10px}h2{font-size:20px;margin:0 0 14px}h3{font-size:17px;margin:24px 0 10px}p{line-height:1.47}label{display:block;font-size:14px;font-weight:650;margin:12px 0 16px}input:not([type=checkbox]),select{display:block;width:100%;padding:13px;border:1.5px solid #b7c7dd;border-radius:11px;margin-top:6px;background:white;color:var(--ink);min-height:47px}.hint{font-size:13px;color:var(--muted)}.login{max-width:440px;margin:10vh auto 0}.login form .primary{width:100%;margin-top:3px}.student-top{display:flex;align-items:end;justify-content:space-between;gap:15px}.student-top h1{font-size:clamp(25px,3vw,36px)}.student-top p{margin:0 0 10px}.eyebrow{font-size:12px;font-weight:800;color:#50729d;text-transform:uppercase;letter-spacing:.08em}.lesson-total{text-align:right;min-width:180px}.lesson-total strong{font-size:26px;display:block}.lesson-total small{color:var(--muted);font-size:13px}.progress-track{width:100%;height:11px;border-radius:20px;background:#d8e5f3;overflow:hidden;margin:12px 0 19px}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,#62adff,#1c649f);transition:width .4s}.reference-wrap{display:grid;grid-template-columns:1fr minmax(170px,270px);align-items:center;min-height:220px;gap:15px}.reference-letter{font-size:76px;font-weight:500;line-height:1.15;color:var(--blue)}.reference-wrap svg{max-height:225px;width:100%;aspect-ratio:1;border-radius:12px;background:#f9fbfe}.reference-wrap svg .baseline{stroke:#a7c4e3;stroke-width:.4}.reference-wrap svg .midline{stroke:#cbdcee;stroke-width:.34}.reference-wrap svg .stroke-path{fill:none;stroke:#1a5b9f;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;animation:showstroke 1.2s linear forwards}.reference-wrap svg .number-circle{fill:#ffcd65;stroke:#946214;stroke-width:.65}.reference-wrap svg .number-label{font:6px system-ui;fill:#573c0d;text-anchor:middle;dominant-baseline:middle;font-weight:700}@keyframes showstroke{from{stroke-dashoffset:var(--length)}to{stroke-dashoffset:0}}.work-caption h2{margin:0}.work-caption p{margin:4px 0 15px;color:var(--muted)}.paper-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.paper-card{background:white;border:2px solid #cbd9e8;border-radius:17px;padding:12px;overflow:hidden;position:relative}.paper-card.active{border-color:#367abf;box-shadow:0 0 0 3px #b8d9ff}.paper-card.success{border-color:#329564;background:#f0fbf5}.paper-card.locked{opacity:.66}.paper-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.paper-top b{background:#dce8f7;color:#255481;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-size:19px}.paper-top .box-status{font-size:12px;color:var(--muted)}.success .box-status{color:var(--good);font-weight:700}.writing{width:100%;display:block;aspect-ratio:1;min-width:0;border:1px solid #cee0f2;background:#fff;border-radius:12px;touch-action:none;user-select:none;-webkit-user-select:none}.locked .writing,.success .writing{touch-action:pan-y}.pad-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}.pad-actions button{padding:8px 6px;font-size:12px;min-width:0}.pad-actions .check{grid-column:1/-1;font-size:17px}.page-title{margin:12px 0 24px}.page-title p{margin:0;color:var(--muted)}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:10px 9px;border-bottom:1px solid #e3eaf3;white-space:nowrap}th{background:#edf3f9;color:#345879}.inline-actions{display:flex;flex-wrap:wrap;gap:5px}.inline-actions button{font-size:12px;padding:5px 9px;min-height:34px}.notice{padding:12px 15px;border:1px solid #e8d2a2;border-radius:10px;background:#fff9eb;color:#765820;font-size:14px}.heading-inline{display:flex;justify-content:space-between;align-items:center}.heading-inline h2{margin:0 0 18px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chips span{display:inline-block;border:1px solid #c9d9ef;padding:7px 13px;border-radius:22px;background:#f6f9fd}.teacher-item{padding:10px 0;border-bottom:1px solid #e2eaf4;display:flex;justify-content:space-between;align-items:center;gap:10px}.teacher-item small{display:block;color:#62758a}.editor-layout{display:grid;grid-template-columns:1fr 1.25fr;gap:25px;margin-top:22px}.letter-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}.letter-grid button{padding:5px 0;min-height:36px;border:1px solid #bbcce0;background:#f5f9fd;border-radius:7px}.letter-grid button.selected{background:#1f5a9e;color:white}.letter-grid button.verified{border-color:#71ad8b}.editor-heading{display:flex;justify-content:space-between;align-items:center}.editor-heading h3{margin:0 0 8px}.editor-heading span{font-size:13px;color:var(--muted)}#editor-pad{display:block;width:min(100%,380px);aspect-ratio:1;border:1px solid #b6c9dc;border-radius:12px;background:#fff;touch-action:none}.editor-buttons{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.editor-buttons button{font-size:12px}.verify{display:flex;align-items:center;gap:10px}.verify input{width:23px;height:23px}.finished{text-align:center;background:#f5fbf8}.big-star{color:#eab54b;font-size:90px}#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#15395f;color:white;padding:13px 21px;border-radius:13px;box-shadow:0 7px 30px #0004;max-width:min(95%,580px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1000;text-align:center}#toast.visible{opacity:1}#toast.bad{background:#92292d}#toast.good{background:#156b43}@media(max-width:830px){.editor-layout{grid-template-columns:1fr}.reference-wrap{grid-template-columns:1fr 170px}.reference-letter{font-size:62px}.two-cols{grid-template-columns:1fr}.letter-grid{grid-template-columns:repeat(13,minmax(0,1fr))}}@media(max-width:620px){main{padding:0 10px;margin:12px auto}.top{padding:9px}.brand{font-size:15px}.brand .logo{font-size:29px}.card{padding:15px}.student-top{align-items:start}.lesson-total{min-width:120px}.lesson-total strong{font-size:19px}.lesson-total small{font-size:11px}.reference-wrap{grid-template-columns:1fr 140px;min-height:180px}.reference-wrap svg{max-height:160px}.reference-letter{font-size:56px}.paper-grid{grid-template-columns:1fr}.writing{max-width:370px;margin:auto}.letter-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.header-right{font-size:11px}}@media print{.top,button,.page-title,.two-cols,#stats-rows,.paper-grid{display:none!important}body{background:white}}