:root {
  --ink: #17243d; --muted: #60708b; --paper: #fffdf8; --cream: #f5f1e8;
  --purple: #5b4bda; --purple-dark: #4032ba; --mint: #28aa78;
  --amber: #e3a521; --red: #dc5c58; --line: #dedbd2;
  --shadow: 0 14px 40px rgba(29, 38, 62, .10);
}
* { box-sizing: border-box; }
body {
  min-height: 100vh; color: var(--ink);
  background: radial-gradient(circle at 8% 10%, rgba(91,75,218,.11), transparent 24rem), radial-gradient(circle at 90% 90%, rgba(40,170,120,.10), transparent 26rem), var(--cream);
  font-family: ui-rounded, "Avenir Next", Avenir, system-ui, -apple-system, sans-serif;
}
button, input { font: inherit; } button { -webkit-tap-highlight-color: transparent; }
.app-shell { min-height: 100vh; }
.loading-card { display:grid; place-items:center; align-content:center; gap:12px; min-height:100vh; }
.brand-mark { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:white; background:var(--purple); font:800 30px/1 Georgia,serif; transform:rotate(-4deg); box-shadow:0 8px 20px rgba(91,75,218,.25); }
.topbar { height:72px; padding:0 clamp(20px,5vw,72px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(23,36,61,.1); background:rgba(255,253,248,.82); backdrop-filter:blur(14px); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:850; letter-spacing:-.03em; }
.brand .brand-mark { width:38px; height:38px; border-radius:12px; font-size:22px; }
.top-actions { display:flex; align-items:center; gap:14px; } .user-pill { font-size:14px; color:var(--muted); }
.page { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:48px 0 72px; }
.login-wrap { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.login-intro { padding:clamp(38px,8vw,110px); display:flex; flex-direction:column; justify-content:center; }
.eyebrow { color:var(--purple); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:12px; }
h1,h2,h3,p { margin-top:0; }
.login-intro h1 { max-width:700px; font-size:clamp(44px,6.4vw,86px); line-height:.96; letter-spacing:-.065em; margin:18px 0 24px; }
.login-intro p { max-width:590px; color:var(--muted); font-size:clamp(17px,2vw,21px); line-height:1.65; }
.math-trail { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.math-trail span { padding:10px 14px; background:rgba(255,255,255,.66); border:1px solid var(--line); border-radius:12px; font-weight:750; }
.login-panel { background:var(--ink); color:white; padding:clamp(28px,6vw,90px); display:flex; align-items:center; }
.login-card { width:min(430px,100%); margin:auto; } .login-card h2 { font-size:34px; letter-spacing:-.04em; margin-bottom:8px; }
.login-card>p { color:#bfc8d8; line-height:1.55; margin-bottom:28px; }
.field { display:grid; gap:8px; margin:17px 0; } .field label { font-size:14px; font-weight:700; color:#dfe4ee; }
.field input,.answer-input { width:100%; border:2px solid transparent; border-radius:14px; padding:15px 16px; background:white; color:var(--ink); outline:none; }
.field input:focus,.answer-input:focus { border-color:#a9a0ff; box-shadow:0 0 0 4px rgba(169,160,255,.18); }
.btn { border:0; border-radius:14px; min-height:48px; padding:12px 19px; cursor:pointer; background:var(--purple); color:white; font-weight:800; box-shadow:0 6px 14px rgba(91,75,218,.18); transition:transform .15s ease,background .15s ease; }
.btn:hover { background:var(--purple-dark); transform:translateY(-1px); } .btn:active { transform:translateY(1px); }
.btn.secondary { background:white; color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.btn.danger { background:#fff5f4; color:#a33e3a; border:1px solid #efb6b2; box-shadow:none; }
.btn.danger:hover { background:#fee7e5; }
.btn:disabled { cursor:not-allowed; opacity:.45; transform:none; }
.btn.ghost { min-height:38px; padding:7px 12px; background:transparent; color:var(--muted); border:1px solid var(--line); box-shadow:none; }
.btn.full { width:100%; margin-top:10px; }
.error { min-height:22px; color:#ff9d98; font-size:14px; margin:8px 0 0; }
.hero-line { display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:32px; }
.hero-line h1 { font-size:clamp(35px,5vw,58px); letter-spacing:-.055em; margin:7px 0 8px; }
.hero-line p { color:var(--muted); margin:0; }
.streak { min-width:150px; background:var(--paper); border:1px solid var(--line); padding:15px 18px; border-radius:16px; }
.streak strong { display:block; font-size:25px; }
.section-label { font-size:13px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); margin:35px 0 15px; }
.topic-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.topic-card { min-height:145px; text-align:left; padding:19px; border:1px solid var(--line); border-radius:20px; background:var(--paper); color:var(--ink); cursor:pointer; box-shadow:0 7px 20px rgba(29,38,62,.06); transition:transform .16s,border-color .16s; }
.topic-card:hover { transform:translateY(-3px); border-color:#9b91ef; } .topic-card.mixed { color:white; background:var(--purple); border-color:var(--purple); }
.topic-icon { display:block; font:800 27px/1.2 Georgia,serif; margin-bottom:24px; } .topic-card strong { display:block; font-size:16px; }
.topic-card small { display:block; color:var(--muted); margin-top:5px; line-height:1.35; } .topic-card.mixed small { color:#ddd9ff; }
.recent-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.mini-stat { background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:16px; padding:16px; }
.mini-stat span { display:block; color:var(--muted); font-size:12px; margin-bottom:6px; } .mini-stat strong { font-size:20px; }
.exercise-page { max-width:880px; } .exercise-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.topic-tag { background:#e8e4ff; color:var(--purple-dark); padding:8px 12px; border-radius:999px; font-size:13px; font-weight:800; }
.question-card { background:var(--paper); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); overflow:hidden; }
.question-top { padding:clamp(32px,7vw,72px); text-align:center; border-bottom:1px solid var(--line); }
.question-number { color:var(--muted); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.question-main { margin:26px 0 10px; }
.question-main.with-history { display:grid; grid-template-columns:42px minmax(0,auto) 42px; align-items:center; justify-content:center; gap:12px; }
.expression { grid-column:2; font:700 clamp(48px,10vw,86px)/1.15 Georgia,serif; letter-spacing:-.045em; }
.question-main:not(.with-history) .expression { grid-column:auto; }
.counting-field { grid-column:2; width:min(500px,64vw); min-height:190px; margin:0 auto; padding:22px; display:grid; grid-template-columns:repeat(3,1fr); place-items:center; gap:16px; border:3px solid var(--ink); border-radius:22px; background:#fff; box-shadow:inset 0 0 0 6px #f1eee6; }
.counting-field .count-shape:last-child:nth-child(3n + 1) { grid-column:2; }
.question-main:not(.with-history) .counting-field { grid-column:auto; }
.count-shape { width:42px; height:42px; display:block; background:var(--purple); }
.count-shape.circle { border-radius:50%; }.count-shape.square { border-radius:7px; }.count-shape.triangle { clip-path:polygon(50% 4%,96% 94%,4% 94%); }.count-shape.diamond { border-radius:6px; transform:rotate(45deg) scale(.82); }
.count-shape.color-1 { background:var(--mint); }.count-shape.color-2 { background:var(--amber); }.count-shape.color-3 { background:#e56b67; }
.hand-counting-field { grid-column:2; width:min(500px,72vw); min-height:210px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; justify-content:center; gap:18px; border:3px solid var(--ink); border-radius:22px; background:#fff; box-shadow:inset 0 0 0 6px #f1eee6; overflow:hidden; }
.question-main:not(.with-history) .hand-counting-field { grid-column:auto; }
.count-hand { position:relative; display:block; flex:0 0 170px; width:170px; height:190px; color:#f0b78f; }
.count-hand.mirrored { transform:scaleX(-1); }
.hand-palm,.hand-wrist,.hand-finger,.count-fist i { position:absolute; display:block; background:currentColor; border:3px solid #5e392b; box-shadow:inset 0 -5px 0 rgba(137,76,51,.12); }
.hand-palm { left:38px; bottom:24px; width:104px; height:91px; border-radius:35px 35px 28px 28px; z-index:2; }
.hand-wrist { left:67px; bottom:-9px; width:57px; height:48px; border-radius:0 0 18px 18px; z-index:1; }
.hand-finger { z-index:1; }
.hand-finger.thumb { left:-29px; bottom:18px; width:76px; height:30px; border-radius:18px 8px 8px 18px; transform:rotate(33deg); transform-origin:right center; z-index:3; }
.hand-finger.index { left:38px; bottom:100px; width:26px; height:79px; border-radius:16px 16px 8px 8px; }
.hand-finger.middle { left:65px; bottom:105px; width:27px; height:90px; border-radius:16px 16px 8px 8px; }
.hand-finger.ring { left:93px; bottom:101px; width:26px; height:82px; border-radius:16px 16px 8px 8px; }
.hand-finger.little { left:120px; bottom:91px; width:24px; height:66px; border-radius:15px 15px 8px 8px; }
.count-fist { position:relative; display:block; width:125px; height:145px; color:#f0b78f; }
.count-fist i { inset:27px 10px 8px; border-radius:42px 42px 28px 28px; }
.count-fist i::before { content:""; position:absolute; left:10px; right:10px; top:28px; height:3px; background:rgba(94,57,43,.35); border-radius:3px; box-shadow:0 19px 0 rgba(94,57,43,.25); }
.pair-history { grid-column:3; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:42px; }
.history-mark { display:block; height:27px; font:900 34px/.78 system-ui,sans-serif; text-shadow:0 1px 0 rgba(255,255,255,.8); }
.history-mark.fast { color:#23a96f; }.history-mark.slow { color:#d7a51f; }.history-mark.wrong { color:#e14f48; }
.hint { color:var(--muted); min-height:24px; }
.answer-area { padding:clamp(18px,4vw,28px); }
.answer-input { border-color:var(--line); font-size:28px; font-weight:800; text-align:center; min-height:62px; margin-bottom:16px; caret-color:transparent; }
.keypad { width:min(520px,100%); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.key { min-height:64px; border:1px solid var(--line); border-radius:15px; background:white; color:var(--ink); font-size:24px; font-weight:850; cursor:pointer; box-shadow:0 4px 0 #d8d4ca; touch-action:manipulation; }
.key:active { transform:translateY(3px); box-shadow:0 1px 0 #d8d4ca; }
.key.utility { color:var(--purple-dark); background:#efedff; font-size:18px; }
.key.impossible { grid-column:1/-1; }
.key.enter { grid-column:1/-1; background:var(--purple); color:white; border-color:var(--purple); box-shadow:0 4px 0 var(--purple-dark); font-size:19px; }
.correction-area { padding:clamp(22px,5vw,34px); display:flex; flex-direction:column; align-items:center; text-align:center; background:#fff7f6; }
.correction-area p { margin:0 0 16px; color:#973c38; font-size:17px; font-weight:850; }
.correction-area small { margin-top:15px; color:var(--muted); font-size:14px; font-weight:750; }
.correction-wheel { width:min(300px,76vw); aspect-ratio:1; padding:0; display:grid; grid-template-rows:1fr 1fr; overflow:hidden; border:5px solid #252525; border-radius:50%; background:white; color:var(--ink); cursor:pointer; box-shadow:0 8px 0 rgba(151,60,56,.2); touch-action:manipulation; }
.correction-wheel strong { display:grid; place-items:center; border-bottom:4px solid #252525; font:800 clamp(64px,14vw,94px)/1 Georgia,serif; }
.correction-pair { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; line-height:1; }
.correction-pair > span { display:grid; place-items:center; font:700 clamp(48px,11vw,72px)/1 Georgia,serif; }
.correction-wheel .correction-operator { display:block; color:var(--purple-dark); font:900 clamp(42px,10vw,60px)/1 Arial,sans-serif; font-style:normal; }
.correction-wheel:active,.correction-answer:active { transform:translateY(4px); box-shadow:0 3px 0 rgba(151,60,56,.2); }
.correction-wheel:focus-visible,.correction-answer:focus-visible { outline:5px solid #a9a0ff; outline-offset:5px; }
.correction-answer { min-width:min(300px,76vw); min-height:150px; padding:24px; border:5px solid #252525; border-radius:32px; background:white; color:var(--ink); font:800 clamp(54px,12vw,84px)/1 Georgia,serif; cursor:pointer; box-shadow:0 8px 0 rgba(151,60,56,.2); touch-action:manipulation; }
.feedback { margin:0 25px 25px; padding:17px 19px; border-radius:16px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.feedback.correct { background:#ddf6eb; color:#166a4c; } .feedback.wrong { background:#fee7e5; color:#973c38; } .feedback strong { font-size:18px; }
.progress-row { display:flex; gap:8px; margin-top:18px; } .progress-dot { height:7px; border-radius:20px; background:#d8d4ca; flex:1; } .progress-dot.correct { background:var(--mint); } .progress-dot.wrong { background:var(--red); }
.learned-pairs { margin-top:22px; }
.learned-pairs h2 { margin:0 0 12px; color:var(--muted); font-size:13px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.learned-pair-list { display:flex; flex-wrap:wrap; gap:12px; }
.learned-pair { width:76px; aspect-ratio:1; display:grid; grid-template:1fr 1fr/1fr 1fr; overflow:hidden; border:3px solid var(--ink); border-radius:50%; background:var(--paper); box-shadow:0 5px 12px rgba(29,38,62,.08); }
.learned-pair strong,.learned-pair span { display:grid; place-items:center; line-height:1; }
.learned-pair strong { grid-column:1/-1; border-bottom:3px solid var(--ink); color:var(--mint); font:900 29px/1 system-ui,sans-serif; }
.learned-pair span { color:var(--ink); font:800 22px/1 Georgia,serif; }
.learned-pair span:last-child { border-left:3px solid var(--ink); }
.learned-number span { grid-column:1/-1; border-left:0!important; }
.learned-number-coin { position:relative; width:76px; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border:3px solid #98620c; border-radius:50%; color:#694000; background:radial-gradient(circle at 34% 24%,#fff7bd 0 10%,#f9d85b 32%,#e5a91b 68%,#ae6a08 100%); box-shadow:inset 0 0 0 4px #ffe781,inset 0 -7px 9px rgba(113,64,0,.24),0 6px 12px rgba(92,57,0,.22); }
.learned-number-coin::before { content:""; position:absolute; inset:8px; border:2px solid rgba(139,84,0,.48); border-radius:50%; box-shadow:0 1px 0 rgba(255,255,255,.68); }
.learned-number-coin span { position:relative; z-index:1; font:900 34px/1 Georgia,serif; text-shadow:0 1px 0 #fff1a3,0 -1px 0 rgba(105,58,0,.35); }
.learned-number-coin.silver { border-color:#707985; color:#35404c; background:radial-gradient(circle at 34% 24%,#fff 0 10%,#e8edf2 32%,#b9c2cc 68%,#7d8792 100%); box-shadow:inset 0 0 0 4px #f2f5f8,inset 0 -7px 9px rgba(48,58,68,.22),0 6px 12px rgba(42,50,59,.2); }
.learned-number-coin.silver::before { border-color:rgba(72,82,94,.46); }
.learned-number-coin.silver span { text-shadow:0 1px 0 #fff,0 -1px 0 rgba(45,54,63,.28); }
.dashboard-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:30px; }
.dashboard-head h1 { font-size:clamp(36px,5vw,56px); letter-spacing:-.055em; margin:8px 0 6px; } .dashboard-head p { color:var(--muted); margin:0; }
.student-list { display:grid; gap:18px; } .student-card { background:var(--paper); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:0 8px 22px rgba(29,38,62,.05); }
.student-summary { padding:20px 22px; display:grid; grid-template-columns:220px 1fr; gap:22px; cursor:pointer; align-items:center; }
.student-name { display:flex; align-items:center; gap:13px; } .avatar { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#e8e4ff; color:var(--purple-dark); font-weight:900; }
.student-name strong { display:block; } .student-name small,.summary-copy { color:var(--muted); } .summary-copy { font-size:14px; line-height:1.5; }
.student-details { border-top:1px solid var(--line); padding:20px 22px 24px; } .report-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.report-topic { padding:15px; border-radius:15px; background:#f5f2ec; } .report-topic-head { display:flex; justify-content:space-between; gap:8px; font-size:13px; font-weight:800; min-height:36px; }
.bar { height:8px; background:#dedbd2; border-radius:10px; overflow:hidden; margin:10px 0 8px; } .bar i { display:block; height:100%; border-radius:inherit; }
.bar i.strong { background:var(--mint); }.bar i.medium { background:var(--amber); }.bar i.weak { background:var(--red); }
.report-topic small { color:var(--muted); } .empty { color:var(--muted); padding:8px 0; }
.teacher-page { width:min(1320px,calc(100% - 32px)); }
.class-manager { background:rgba(255,253,248,.78); border:1px solid var(--line); border-radius:20px; padding:18px; margin-bottom:18px; box-shadow:0 8px 24px rgba(29,38,62,.05); }
.class-manager-title { display:flex; align-items:center; justify-content:space-between; gap:20px; }.class-manager-title strong { display:block; margin-top:4px; font-size:20px; }
.class-form { display:flex; gap:8px; }.class-form input { width:180px; min-height:48px; padding:11px 13px; border:1px solid var(--line); border-radius:13px; background:white; color:var(--ink); outline:none; }.class-form input:focus { border-color:#9b91ef; box-shadow:0 0 0 3px rgba(91,75,218,.12); }
.class-tabs { display:flex; gap:9px; overflow-x:auto; padding-top:16px; -webkit-overflow-scrolling:touch; }
.class-tab { flex:0 0 auto; min-width:118px; padding:11px 14px; border:1px solid var(--line); border-radius:13px; background:white; color:var(--ink); text-align:left; cursor:pointer; }.class-tab strong,.class-tab small { display:block; }.class-tab small { margin-top:3px; color:var(--muted); }.class-tab.active { border-color:var(--purple); background:#efedff; color:var(--purple-dark); box-shadow:0 4px 12px rgba(91,75,218,.1); }
.class-error { min-height:0; margin:8px 0 0; color:#a33e3a; font-size:13px; }
.student-manager-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.student-manager-row>div:first-child strong,.student-manager-row>div:first-child small { display:block; }.student-manager-row>div:first-child small { margin-top:3px; color:var(--muted); }
.student-manager-buttons { display:flex; gap:8px; }.student-manager-buttons .btn { min-height:42px; padding:9px 14px; }
.class-rename-form { display:grid; grid-template-columns:minmax(0,260px) auto 1fr; align-items:center; gap:10px; margin-top:14px; padding:14px; border:1px solid #c8c1f4; border-radius:16px; background:#f7f5ff; }.class-rename-form input { min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--ink); font:inherit; outline:none; }.class-rename-form input:focus { border-color:#9b91ef; box-shadow:0 0 0 3px rgba(91,75,218,.12); }
.student-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:end; gap:10px; margin-top:14px; padding:16px; border:1px solid #c8c1f4; border-radius:16px; background:#f7f5ff; }
.student-form .field { margin:0; }.student-form .field label { color:var(--ink); font-size:12px; }.student-form .field input { min-height:46px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; }
.student-form .btn { min-height:46px; }.student-error { grid-column:1/-1; min-height:0; margin:0; color:#a33e3a; font-size:13px; }
.class-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.class-kpis article,.student-kpis article { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:18px 20px; box-shadow:0 6px 18px rgba(29,38,62,.045); }
.class-kpis article.attention { border-color:#efb6b2; background:#fff8f7; }
.class-kpis span,.student-kpis span { display:block; color:var(--muted); font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
.class-kpis strong,.student-kpis strong { display:block; font-size:28px; line-height:1.1; margin:8px 0 5px; letter-spacing:-.035em; }
.class-kpis small,.student-kpis small { color:var(--muted); }
.teacher-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; }
.roster-panel,.teacher-detail { background:rgba(255,253,248,.78); border:1px solid var(--line); border-radius:22px; box-shadow:0 8px 24px rgba(29,38,62,.055); }
.roster-panel { padding:16px; position:sticky; top:92px; }
.panel-title { display:flex; justify-content:space-between; align-items:center; padding:4px 5px 14px; }
.panel-title h2 { margin:0; font-size:18px; }.panel-title>span { display:grid; place-items:center; min-width:28px; height:28px; border-radius:9px; background:#ebe8e0; color:var(--muted); font-size:13px; font-weight:800; }
.roster-list { display:grid; gap:7px; }
.roster-item { width:100%; min-height:68px; display:grid; grid-template-columns:42px 1fr 10px; align-items:center; gap:10px; padding:9px; border:1px solid transparent; border-radius:14px; color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
.roster-item:hover { background:white; }.roster-item.active { background:white; border-color:#b8b0f5; box-shadow:0 5px 14px rgba(91,75,218,.09); }
.roster-item .avatar { width:42px; height:42px; }.roster-item strong,.roster-item small { display:block; }.roster-item small { color:var(--muted); margin-top:3px; font-size:11px; }
.status-light { width:9px; height:9px; border-radius:50%; }.status-light.good { background:var(--mint); }.status-light.weak { background:var(--red); }
.teacher-detail { padding:clamp(18px,3vw,30px); }
.student-profile-head { display:flex; justify-content:space-between; align-items:center; gap:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.student-profile-head .student-name { align-items:flex-start; }.avatar.large { width:58px; height:58px; border-radius:18px; font-size:20px; flex:0 0 auto; }
.student-profile-head h2 { margin:3px 0 5px; font-size:30px; letter-spacing:-.04em; }.student-profile-head p { color:var(--muted); margin:0; line-height:1.45; max-width:620px; }
.student-profile-actions { flex:0 0 auto; display:grid; justify-items:end; gap:10px; }.student-profile-actions label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-weight:800; }.student-profile-actions select { min-height:38px; padding:7px 30px 7px 10px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); font:inherit; }
.progress-badge { flex:0 0 auto; padding:10px 13px; border-radius:999px; font-size:13px; font-weight:850; }.progress-badge.up { color:#146948; background:#ddf6eb; }.progress-badge.down { color:#973c38; background:#fee7e5; }.progress-badge.neutral { color:#73520c; background:#fff1cb; }
.empty-class { min-height:430px; display:grid; place-items:center; align-content:center; text-align:center; padding:38px; }.empty-class-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:#efedff; color:var(--purple); font-size:34px; }.empty-class h2 { margin:16px 0 7px; }.empty-class p { max-width:440px; color:var(--muted); line-height:1.55; }
.student-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
.student-kpis article:nth-child(3) strong { font-size:18px; margin-top:11px; }
.table-assignment { margin:0 0 14px; padding:18px; border:1px solid var(--line); border-radius:18px; background:white; }
.table-assignment-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }.table-assignment-head h3 { margin:4px 0 5px; font-size:20px; }.table-assignment-head p { margin:0; color:var(--muted); font-size:13px; }.btn.compact { min-height:38px; padding:7px 12px; white-space:nowrap; }
.table-assignment-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.table-choices { display:grid; grid-template-columns:repeat(11,minmax(62px,1fr)); gap:7px; margin-top:15px; }
.addition-choices { grid-template-columns:repeat(10,minmax(62px,1fr)); }
.addition-factor { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }.addition-factor:first-of-type { margin-top:15px; }
.addition-factor-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.addition-factor-head strong { font-size:15px; }.addition-factor .table-selection-note { margin-bottom:0; }
.table-choice { position:relative; display:grid; place-items:center; min-height:64px; padding:7px 3px; border:1px solid var(--line); border-radius:12px; background:#faf8f3; cursor:pointer; user-select:none; }.table-choice input { position:absolute; top:6px; left:6px; width:16px; height:16px; accent-color:var(--purple); }.table-choice span { font-size:20px; font-weight:900; }.table-choice small { color:var(--muted); font-size:8px; }.table-choice:has(input:checked) { border-color:#8d81ef; background:#efedff; color:var(--purple-dark); box-shadow:inset 0 0 0 1px rgba(91,75,218,.12); }
.table-selection-note { margin:10px 0 0; color:var(--muted); font-size:12px; }
.analytics-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:14px; }
.chart-card,.focus-card,.topic-performance { background:white; border:1px solid var(--line); border-radius:18px; padding:18px; }
.chart-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }.chart-title>div>span { color:var(--purple); font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }.chart-title h3 { margin:3px 0 0; font-size:18px; }.chart-title>small { color:var(--muted); font-size:11px; }
.trend-chart { width:100%; height:170px; overflow:visible; }.trend-chart text { fill:var(--muted); font:10px system-ui,sans-serif; }.chart-grid { stroke:#e6e2da; stroke-width:1; stroke-dasharray:4 5; }.trend-line { fill:none; stroke:var(--purple); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }.trend-dot { fill:white; stroke:var(--purple); stroke-width:3; }
.time-chart { height:170px; display:flex; align-items:flex-end; justify-content:space-around; gap:10px; padding:20px 4px 0; border-bottom:1px solid #e6e2da; }
.time-column { flex:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; }.time-column span,.time-column small { color:var(--muted); font-size:10px; }.time-column i { display:block; width:min(34px,70%); min-height:12px; background:linear-gradient(180deg,#8d81ef,var(--purple)); border-radius:7px 7px 2px 2px; }
.insight-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:14px; margin-top:14px; }
.focus-card { display:flex; align-items:flex-start; gap:14px; background:#fff9ed; border-color:#ead6a2; }.focus-icon { flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:white; background:var(--amber); font-weight:900; font-size:20px; }.focus-card h3 { margin:5px 0 9px; font-size:22px; }.focus-card p { color:var(--muted); line-height:1.55; font-size:14px; }.evidence { display:flex; flex-wrap:wrap; gap:8px; }.evidence span { padding:7px 9px; border-radius:9px; background:white; color:#73520c; font-size:12px; font-weight:800; }
.topic-performance .chart-title { margin-bottom:6px; }.topic-row { display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:center; padding:11px 0; border-top:1px solid #eeeae2; }.topic-row>div:first-child strong,.topic-row>div:first-child small { display:block; }.topic-row>div:first-child small { color:var(--muted); font-size:11px; margin-top:3px; }.topic-meter { display:grid; grid-template-columns:1fr 42px; align-items:center; gap:9px; }.topic-meter>span { height:9px; background:#e5e1d9; border-radius:10px; overflow:hidden; }.topic-meter i { display:block; height:100%; border-radius:inherit; }.topic-meter i.strong { background:var(--mint); }.topic-meter i.medium { background:var(--amber); }.topic-meter i.weak { background:var(--red); }.topic-meter b { font-size:12px; text-align:right; }
.topic-row-button { width:100%; border:0; border-top:1px solid #eeeae2; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; border-radius:10px; }
.topic-row-button:hover,.topic-row-button.active { background:#f3f1ff; padding-left:9px; padding-right:9px; }
.topic-row-control { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; }.topic-reset { min-height:34px; font-size:12px; }
.pair-detail { margin-top:14px; background:white; border:1px solid var(--line); border-radius:18px; padding:18px; }
.pair-detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.pair-detail-head h3 { margin:4px 0 6px; font-size:23px; }.pair-detail-head p { margin:0; color:var(--muted); font-size:14px; }
.pair-detail-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.mastery-summary { padding:9px 12px; border-radius:11px; background:#ddf6eb; color:#166a4c; font-size:12px; white-space:nowrap; }
.mastery-summary strong { font-size:17px; }
.accuracy-scale { display:grid; grid-template-columns:auto minmax(130px,280px) auto 1fr; align-items:center; gap:8px; margin:18px 0 12px; color:var(--muted); font-size:12px; }
.accuracy-scale i { height:13px; border-radius:999px; background:linear-gradient(90deg,hsl(0 72% 72%),hsl(60 72% 76%),hsl(120 72% 72%)); border:1px solid rgba(23,36,61,.12); }
.accuracy-scale small { margin-left:8px; }
.time-scale { display:grid; grid-template-columns:auto minmax(130px,280px) auto 1fr; align-items:center; gap:8px; margin:18px 0 12px; color:var(--muted); font-size:12px; }
.time-scale i { height:13px; border-radius:999px; background:linear-gradient(90deg,hsl(120 72% 72%),hsl(60 72% 76%),hsl(0 72% 72%)); border:1px solid rgba(23,36,61,.12); }
.time-scale small { margin-left:8px; }
.pair-table-scroll { overflow:auto; border:1px solid var(--line); border-radius:13px; -webkit-overflow-scrolling:touch; }
.pair-table { border-collapse:separate; border-spacing:0; min-width:1120px; width:100%; font-size:12px; }
.pair-table th { position:sticky; z-index:2; background:#f3f0e9; color:var(--ink); font-weight:900; min-width:44px; }
.pair-table thead th { top:0; }.pair-table tbody th { left:0; z-index:1; }
.pair-table th,.pair-table td { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 6px; text-align:center; }
.pair-table tr:last-child th,.pair-table tr:last-child td { border-bottom:0; }.pair-table th:last-child,.pair-table td:last-child { border-right:0; }
.pair-cell { min-width:94px; height:82px; }.pair-cell strong,.pair-cell small { display:block; }.pair-cell strong { font-size:13px; }.pair-cell small { margin-top:4px; color:var(--muted); font-size:10px; white-space:nowrap; }
.pair-cell-main { display:flex; align-items:center; justify-content:center; gap:6px; }
.pair-pie { width:26px; height:26px; flex:0 0 26px; border-radius:50%; background:conic-gradient(var(--mint) 0 var(--correct),var(--red) var(--correct) 100%); border:2px solid rgba(255,255,255,.9); box-shadow:0 0 0 1px rgba(23,36,61,.14); }
.pair-cell.empty-pair { background:#faf8f3; color:#a49d91; }
.pair-cell.learned-pair { box-shadow:inset 0 0 0 3px rgba(40,170,120,.68); }
.pair-mastery { display:block; margin-top:5px; color:#745f25; font-size:9px; font-weight:850; white-space:nowrap; }
.pair-mastery.learned { color:#146948; }
.number-stat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:9px; }
.number-stat-card { min-height:118px; padding:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; border:1px solid rgba(23,36,61,.13); border-radius:14px; text-align:center; }
.number-stat-card>strong { font:800 27px/1 Georgia,serif; }.number-stat-card small { color:var(--muted); font-size:10px; }.number-stat-card em { color:#745f25; font-size:9px; font-style:normal; font-weight:850; }.number-stat-card em.learned { color:#146948; }
.number-stat-card.empty-pair { background:#faf8f3; color:#a49d91; }.number-stat-card.learned-pair { box-shadow:inset 0 0 0 3px rgba(40,170,120,.68); }
.sign-sections { display:grid; gap:18px; }.sign-sections h4 { margin:0 0 8px; font-size:15px; }
.sign-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.sign-card { min-height:94px; border:1px solid rgba(23,36,61,.12); border-radius:13px; padding:13px; display:flex; flex-direction:column; justify-content:center; }
.sign-card strong,.sign-card span,.sign-card small { display:block; }.sign-card strong { font:800 18px/1.2 Georgia,serif; }.sign-card span { font-size:21px; font-weight:900; margin:7px 0 3px; }.sign-card small { color:var(--muted); font-size:11px; }
.sign-card.empty-pair { background:#faf8f3; color:#a49d91; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:900px) { .login-wrap{grid-template-columns:1fr}.login-intro{padding:48px 28px;min-height:46vh}.login-panel{padding:44px 28px}.topic-grid{grid-template-columns:repeat(2,1fr)}.topic-card.mixed{grid-column:1/-1}.recent-strip,.report-grid{grid-template-columns:repeat(2,1fr)}.student-summary{grid-template-columns:1fr;gap:10px}.class-kpis{grid-template-columns:repeat(2,1fr)}.teacher-layout{grid-template-columns:1fr}.roster-panel{position:static}.roster-list{grid-template-columns:repeat(2,1fr)}.analytics-grid,.insight-grid{grid-template-columns:1fr}.student-form{grid-template-columns:repeat(2,minmax(0,1fr))}.table-choices{grid-template-columns:repeat(6,1fr)}.number-stat-grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:561px) and (max-width:900px) and (max-height:1100px) { .topbar{height:60px}.exercise-page{padding-top:18px;padding-bottom:24px}.exercise-head{margin-bottom:12px}.question-top{padding:18px 28px 14px}.question-main{margin:10px 0 4px}.counting-field,.hand-counting-field{min-height:145px;padding-top:8px;padding-bottom:8px}.count-hand{transform:scale(.72)}.count-hand.mirrored{transform:scaleX(-1) scale(.72)}.hint{min-height:20px;margin-bottom:0}.answer-area{padding:12px 24px 14px}.answer-input{min-height:48px;margin-bottom:9px;padding:8px 12px;font-size:23px}.keypad{gap:7px}.key{min-height:44px;font-size:20px}.key.enter{font-size:17px}.answer-area .error{min-height:0;margin-top:4px}.progress-row{margin-top:10px} }
@media (max-width:560px) { .topbar{height:64px;padding:0 16px}.brand>span:last-child,.user-pill{display:none}.page{width:min(100% - 24px,1180px);padding-top:30px}.hero-line,.dashboard-head,.student-profile-head,.pair-detail-head,.class-manager-title,.table-assignment-head,.student-manager-row{align-items:flex-start;flex-direction:column}.pair-detail-actions{width:100%;justify-content:space-between}.class-form{width:100%}.class-form input{width:100%;min-width:0}.class-form .btn{flex:0 0 auto}.student-manager-buttons{width:100%;flex-wrap:wrap}.student-manager-buttons .btn{flex:1}.class-rename-form{grid-template-columns:1fr;width:100%}.student-form{grid-template-columns:1fr;width:100%}.student-profile-actions{justify-items:start}.streak{width:100%}.topic-grid,.recent-strip,.report-grid,.class-kpis,.student-kpis,.roster-list{grid-template-columns:1fr}.topic-card.mixed{grid-column:auto}.key{min-height:58px}.feedback{align-items:flex-start;flex-direction:column}.progress-badge{align-self:flex-start}.topic-row{grid-template-columns:1fr;gap:8px}.teacher-detail{padding:15px}.trend-chart{height:145px}.accuracy-scale,.time-scale{grid-template-columns:auto 1fr auto}.accuracy-scale small,.time-scale small{grid-column:1/-1;margin-left:0}.sign-grid{grid-template-columns:repeat(2,1fr)}.table-choices{grid-template-columns:repeat(3,1fr)}.counting-field{width:min(100%,330px);min-height:160px;padding:16px;gap:11px}.count-shape{width:31px;height:31px}.hand-counting-field{width:min(100%,360px);min-height:170px;padding:7px 9px;gap:2px}.count-hand{flex-basis:143px;transform:scale(.82)}.count-hand.mirrored{transform:scaleX(-1) scale(.82)}.number-stat-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px) { .question-main.with-history{grid-template-columns:24px minmax(0,1fr) 24px;gap:5px}.pair-history{min-width:24px}.history-mark{height:22px;font-size:27px}.question-main.with-history .counting-field{width:100%} }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }