:root {
  --ink: #10233d;
  --ink-soft: #526275;
  --mint: #4cc9a6;
  --mint-dark: #188c78;
  --apricot: #ffb86b;
  --lavender: #8f92ee;
  --paper: #f4f7f6;
  --card: #ffffff;
  --line: #e4ebe9;
  --shadow: 0 18px 55px rgba(16, 35, 61, .08);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; }
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 258px; padding: 26px 18px; background: var(--ink); color: white; display: flex; flex-direction: column; }
.brand { display: flex; gap: 12px; align-items: center; margin: 0 12px 42px; }
.brand-mark { width: 38px; height: 38px; border-radius: 13px 13px 13px 4px; background: var(--mint); color: var(--ink); display: grid; place-items: center; font: 700 17px 'Space Grotesk'; box-shadow: 8px 8px 0 rgba(255,184,107,.9); }
.brand-mark { position: relative; color: transparent; }
.brand-mark::before { content: ''; width: 20px; height: 23px; background: var(--ink); clip-path: polygon(0 0,100% 0,100% 58%,50% 100%,0 58%); }
.brand-mark::after { content: '✓'; position: absolute; color: white; font: 700 15px/1 'Space Grotesk'; transform: translateY(-1px); }
.brand b { font: 700 20px 'Space Grotesk'; letter-spacing: -.04em; }
.brand small { display: block; color: #8fa0b6; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
.nav-label { color: #70829b; margin: 0 13px 10px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.nav { display: grid; gap: 7px; }
.nav button { color: #aebbd0; background: transparent; text-align: left; border-radius: 12px; padding: 12px 13px; display: flex; gap: 12px; align-items: center; font-weight: 600; }
.nav button:hover, .nav button.active { color: white; background: rgba(76,201,166,.16); }
.nav button.active { box-shadow: inset 3px 0 var(--mint); }
.nav-icon { width: 20px; text-align: center; font-size: 18px; }
.sidebar-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding: 17px 10px 0; display: flex; align-items: center; gap: 10px; color: #aebbd0; font-size: 13px; }
.avatar { border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink); background: var(--apricot); font-weight: 700; }
.avatar.mint { background: #b3f1dc; }
.workspace { flex: 1; min-width: 0; }
.topbar { min-height: 82px; padding: 20px clamp(22px, 4vw, 54px); display: flex; justify-content: space-between; align-items: center; background: rgba(244,247,246,.92); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 4; backdrop-filter: blur(14px); }
.eyebrow { color: var(--mint-dark); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.page-title { margin: 3px 0 0; font: 700 clamp(21px, 2.2vw, 28px) 'Space Grotesk'; letter-spacing: -.04em; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.logout-button { padding: 10px 13px; font-size: 12px; white-space: nowrap; }
.icon-button { width: 40px; height: 40px; border-radius: 12px; color: var(--ink); background: var(--card); border: 1px solid var(--line); }
.content { padding: clamp(24px, 4vw, 54px); max-width: 1340px; }
.grid { display: grid; gap: 20px; }
.home-grid { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 21px; box-shadow: var(--shadow); }
.hero { padding: clamp(25px, 4vw, 42px); background: var(--ink); color: white; min-height: 280px; position: relative; overflow: hidden; }
.hero:after { content: ''; position: absolute; width: 310px; height: 310px; right: -96px; top: -110px; border: 1px solid rgba(76,201,166,.35); border-radius: 50%; box-shadow: 0 0 0 25px rgba(76,201,166,.06), 0 0 0 54px rgba(76,201,166,.04); }
.hero h2 { font: 700 clamp(29px, 4vw, 46px) 'Space Grotesk'; letter-spacing: -.07em; margin: 10px 0 13px; max-width: 510px; line-height: .98; }
.hero p { color: #aebbd0; max-width: 460px; margin: 0 0 25px; line-height: 1.6; }
.pill { display: inline-flex; padding: 7px 10px; border-radius: 100px; color: var(--mint); background: rgba(76,201,166,.13); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.button { border-radius: 11px; padding: 12px 16px; font-weight: 700; transition: transform .15s, box-shadow .15s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,35,61,.13); }
.button.primary { color: var(--ink); background: var(--mint); }
.button.secondary { color: var(--ink); background: white; border: 1px solid var(--line); }
.button.ghost { color: var(--mint); background: transparent; border: 1px solid rgba(76,201,166,.4); }
.auth-screen { min-height:100vh; display:grid; grid-template-columns:minmax(400px, .92fr) minmax(420px, 1.08fr); background:#f6f8f6; }
.auth-showcase { position:relative; overflow:hidden; color:white; background:var(--ink); }
.auth-showcase:before, .auth-showcase:after { content:''; position:absolute; border:1px solid rgba(76,201,166,.2); border-radius:50%; pointer-events:none; }
.auth-showcase:before { width:620px; height:620px; right:-315px; top:14%; box-shadow:0 0 0 32px rgba(76,201,166,.035), 0 0 0 80px rgba(76,201,166,.025); }
.auth-showcase:after { width:320px; height:320px; left:-220px; bottom:-170px; border-color:rgba(255,184,107,.2); }
.auth-showcase-inner { position:relative; z-index:1; min-height:100vh; padding:clamp(30px,5vw,68px); display:flex; flex-direction:column; }
.auth-brand-lockup, .auth-mobile-brand { display:flex; gap:12px; align-items:center; }
.auth-brand-lockup .brand-mark, .auth-mobile-brand .brand-mark { flex:0 0 auto; }
.auth-showcase-copy { margin-top:auto; max-width:430px; }
.auth-kicker { display:inline-block; color:var(--mint-dark); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.auth-showcase .auth-kicker { color:var(--mint); }
.auth-showcase-copy h2 { margin:12px 0 18px; font:600 clamp(39px,5vw,67px)/.93 'Space Grotesk'; letter-spacing:-.075em; }
.auth-showcase-copy p { max-width:365px; margin:0; color:#aebbd0; font-size:15px; line-height:1.65; }
.auth-proof { display:flex; align-items:center; gap:10px; margin-top:52px; color:#aebbd0; font-size:11px; letter-spacing:.04em; }
.auth-proof span:first-child { display:grid; place-items:center; width:25px; height:25px; color:var(--ink); background:var(--apricot); border-radius:8px; font-size:13px; }
.auth-proof em { color:#647893; font-style:normal; }
.auth-lesson-art { position:absolute; top:21%; right:12%; width:260px; height:210px; transform:rotate(-6deg); }
.lesson-orbit { position:absolute; border:1px solid rgba(76,201,166,.34); border-radius:50%; }
.lesson-orbit:after { content:''; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 7px rgba(76,201,166,.11); }
.orbit-one { inset:8px 0 24px 42px; transform:rotate(28deg); }.orbit-one:after { right:21px; top:8px; }
.orbit-two { inset:28px 18px 0 8px; transform:rotate(-32deg); border-color:rgba(255,184,107,.35); }.orbit-two:after { left:18px; bottom:17px; background:var(--apricot); }
.lesson-spark { position:absolute; top:5px; right:5px; color:var(--apricot); font-size:23px; }
.lesson-card { position:absolute; padding:16px 17px; border-radius:16px; box-shadow:0 18px 45px rgba(0,0,0,.22); }
.lesson-card span { display:block; margin-bottom:8px; color:#71859f; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.lesson-card strong { display:block; font:600 22px/1.05 'Space Grotesk'; letter-spacing:-.06em; }
.lesson-card-back { top:9px; left:7px; width:150px; color:var(--ink); background:#fff7e9; transform:rotate(8deg); }.lesson-card-back strong { color:#a8641c; }
.lesson-card-front { right:4px; bottom:8px; width:174px; color:white; background:#23405d; border:1px solid rgba(255,255,255,.13); transform:rotate(-4deg); }.lesson-card-front strong { color:var(--mint); }.lesson-card-front i { position:absolute; right:15px; bottom:13px; color:var(--apricot); font-size:23px; font-style:normal; }
.auth-panel { display:grid; place-items:center; padding:40px 28px; background:#f6f8f6; }
.auth-panel-inner { width:min(100%,430px); }
.auth-mobile-brand { display:none; margin-bottom:46px; }.auth-mobile-brand .brand-mark { width:35px; height:35px; border-radius:11px 11px 11px 4px; font-size:15px; box-shadow:6px 6px 0 rgba(255,184,107,.9); }.auth-mobile-brand b { font:700 18px 'Space Grotesk'; }.auth-mobile-brand small { display:block; color:var(--ink-soft); font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.auth-panel h1 { margin:14px 0 10px; font:600 clamp(32px,4vw,46px)/1.02 'Space Grotesk'; letter-spacing:-.07em; }.auth-intro { margin:0 0 34px; color:var(--ink-soft); font-size:14px; line-height:1.6; }
.auth-field { margin-top:18px; }.auth-field label { display:block; margin-bottom:8px; color:var(--ink); font-size:12px; font-weight:800; }.auth-label-row { display:flex; justify-content:space-between; align-items:center; }.auth-label-row span { color:#8b98a7; font-size:10px; font-weight:600; }
.auth-input-wrap { display:flex; align-items:center; gap:10px; padding:0 14px; border:1px solid #dce5e1; border-radius:12px; background:white; transition:border-color .2s, box-shadow .2s; }.auth-input-wrap:focus-within { border-color:var(--mint); box-shadow:0 0 0 4px rgba(76,201,166,.13); }.auth-input-wrap > span { width:16px; color:#91a0ad; font-size:14px; text-align:center; }.auth-input-wrap input { width:100%; min-width:0; padding:14px 0; border:0; outline:0; color:var(--ink); background:transparent; font-size:14px; }.auth-input-wrap input::placeholder { color:#aab5bf; }
.auth-submit { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:26px; padding:15px 17px; border-radius:12px; color:var(--ink); background:var(--mint); font-weight:800; box-shadow:0 10px 22px rgba(76,201,166,.2); transition:transform .2s, box-shadow .2s; }.auth-submit:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(76,201,166,.27); }.auth-submit b { font-size:20px; font-weight:500; }
.auth-or { display:flex; align-items:center; gap:10px; margin:18px 0 12px; color:#93a0aa; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.auth-or:before, .auth-or:after { content:''; height:1px; flex:1; background:#dfe7e4; }
.auth-google { display:flex; align-items:center; justify-content:space-between; width:100%; padding:13px 16px; border:1px solid #dce5e1; border-radius:12px; color:var(--ink); background:white; font-size:13px; font-weight:800; transition:border-color .2s, box-shadow .2s, transform .2s; }.auth-google:hover { border-color:#b9ccc5; box-shadow:0 8px 18px rgba(16,35,61,.07); transform:translateY(-1px); }.auth-google:disabled { cursor:wait; opacity:.7; transform:none; }.auth-google b { color:#8b98a7; font-size:16px; font-weight:500; }.google-mark { display:grid; place-items:center; width:22px; height:22px; margin-right:auto; border-radius:50%; color:#4285f4; font:800 15px Arial; }.auth-google > span:nth-child(2) { margin-right:auto; }
.auth-error { min-height:18px; margin:12px 0 0; color:#b44c40; font-size:12px; line-height:1.45; }.auth-divider { display:flex; align-items:center; gap:10px; margin:29px 0 15px; color:#93a0aa; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.auth-divider:before, .auth-divider:after { content:''; height:1px; flex:1; background:#dfe7e4; }
.auth-back-link { display:block; margin:0 0 24px; padding:0; color:var(--mint-dark); background:transparent; font-size:12px; font-weight:800; }
.auth-privacy { display:flex; gap:9px; align-items:flex-start; margin:0; color:var(--ink-soft); font-size:11px; line-height:1.55; }.auth-privacy span { display:grid; place-items:center; flex:0 0 18px; width:18px; height:18px; color:var(--mint-dark); background:#def6ed; border-radius:50%; font-size:11px; font-weight:800; }
.auth-switch { display:block; width:100%; margin-top:27px; padding:3px; color:var(--ink-soft); background:transparent; font-size:12px; text-align:center; }.auth-switch strong { color:var(--mint-dark); }
.section-head { display:flex; align-items: center; justify-content: space-between; margin: 32px 0 14px; }
.section-head h3 { margin: 0; font: 700 18px 'Space Grotesk'; letter-spacing: -.03em; }
.section-head button { color: var(--mint-dark); background: transparent; font-weight: 700; font-size: 13px; }
.stat-card { padding: 22px; position: relative; min-height: 178px; }
.stat-card h4 { margin: 0; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.stat-number { font: 700 40px 'Space Grotesk'; letter-spacing: -.07em; margin-top: 13px; padding-right: 28px; }
.stat-note { color: var(--mint-dark); font-size: 12px; font-weight: 700; margin-top: 8px; }
.orbit { position: absolute; right: 14px; bottom: 13px; width: 62px; height: 62px; opacity: .62; border: 7px solid #e4f5ef; border-top-color: var(--mint); border-right-color: var(--mint); border-radius: 50%; transform: rotate(-25deg); }
.orbit span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--apricot); top: -5px; left: 10px; }
.activity { padding: 20px; }
.activity-item { display: flex; gap: 13px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.activity-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #e5f7f1; color: var(--mint-dark); }
.activity-icon.orange { background: #fff0de; color: #c77b24; }
.activity-copy { flex: 1; min-width: 0; }
.activity-copy b { display: block; font-size: 14px; }
.activity-copy span { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 3px; }
.score { font-weight: 700; color: var(--mint-dark); }
.feature-row { grid-template-columns: repeat(4, 1fr); }
.feature { padding: 21px; cursor: pointer; transition: transform .2s; }
.feature:hover { transform: translateY(-3px); }
.feature-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 21px; background: #e5f7f1; margin-bottom: 18px; }
.feature:nth-child(2) .feature-icon { background: #fff0de; } .feature:nth-child(3) .feature-icon { background: #eeeefe; }
.feature b { display: block; font-family: 'Space Grotesk'; font-size: 16px; }
.feature p { color: var(--ink-soft); font-size: 12px; line-height: 1.5; margin: 7px 0 0; }
.list-card { padding: 10px 22px; }
.task-row { display: flex; align-items: center; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.task-row:last-child { border: 0; }
.assignment-page { display:grid; gap:18px; }
.assignment-page-head { margin-top:0; align-items:flex-end; }
.assignment-page-head h3 { margin:3px 0 0; font-size:28px; }
.assignment-filters { display:grid; grid-template-columns:minmax(230px,2fr) repeat(3,minmax(125px,1fr)); gap:12px; align-items:end; padding:16px 18px; }
.assignment-filters .form-label { margin-top:0; }
.filter-search { display:grid; grid-template-columns:1fr auto; gap:8px; }
.filter-search .form-label { grid-column:1/-1; }
.assignment-table-card { padding:0; overflow:hidden; }
.table-heading { display:flex; justify-content:space-between; align-items:center; padding:20px 22px 14px; }
.table-heading h3 { margin:0 0 4px; }
.table-heading span { color:var(--ink-soft); font-size:12px; }
.table-hint { color:#91a3ba !important; }
.table-scroll { overflow-x:auto; }
.assignment-table { width:100%; border-collapse:collapse; min-width:720px; }
.assignment-table th { padding:11px 22px; background:#f7f9f8; color:#91a3ba; text-align:left; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.assignment-table td { padding:15px 22px; border-top:1px solid var(--line); vertical-align:middle; font-size:12px; }
.assignment-table tbody tr { cursor:pointer; transition:background .18s ease; }
.assignment-table tbody tr:hover { background:#fbfdfc; }
.assignment-date { color:var(--ink-soft); white-space:nowrap; }
.assignment-type { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.assignment-type-icon { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:10px; background:#e5f7f1; color:#12795f; font-weight:800; }
.assignment-type-icon.spelling { background:#fff1df; color:#b16b1c; }
.assignment-type-icon.quiz { background:#eeeefe; color:#6266c5; }
.assignment-type-icon.worksheet { background:#eaf1fb; color:#3a6695; }
.assignment-title { display:block; padding:0; color:var(--ink); font:700 13px 'Space Grotesk'; text-align:left; background:transparent; }
.assignment-summary { display:block; max-width:300px; margin-top:4px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compact-button { padding:8px 11px; font-size:11px; }
.assignment-empty { margin:18px; }
.assignment-result-page { max-width:760px; }
.back-link { padding:0; color:var(--ink-soft); background:transparent; font-size:12px; font-weight:700; }
.assignment-result-card { margin-top:16px; padding:30px; }
.result-kicker { display:flex; align-items:center; gap:10px; }
.assignment-result-card h2 { margin:18px 0 8px; font:700 30px 'Space Grotesk'; }
.result-summary { margin:0; color:var(--ink-soft); font-size:15px; line-height:1.55; }
.result-meta { display:flex; flex-wrap:wrap; gap:8px 16px; padding:18px 0; margin:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#91a3ba; font-size:11px; }
.result-body h3 { margin:0 0 8px; font-size:16px; }
.result-body p { color:var(--ink-soft); font-size:13px; line-height:1.6; }
.assignment-prompt { margin-top:18px; padding:15px; border-radius:14px; background:#f7f9f8; }
.assignment-prompt p { margin:6px 0 0; white-space:pre-wrap; }
.result-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:25px; }
.assignment-type-picker { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:0; border:0; }
.assignment-type-picker legend { margin-bottom:9px; color:var(--ink-soft); font-size:12px; font-weight:700; }
.assignment-type-card { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:.18s ease; }
.assignment-type-card input { position:absolute; opacity:0; pointer-events:none; }
.assignment-type-card.selected, .assignment-type-card:has(input:checked) { border-color:var(--mint); background:#f0fbf7; box-shadow:0 0 0 2px #dbf6ed; }
.assignment-type-card b, .assignment-type-card small { display:block; }
.assignment-type-card b { font-size:12px; }
.assignment-type-card small { margin-top:3px; color:var(--ink-soft); font-size:10px; line-height:1.35; }
.optional-label { color:#91a3ba; font-weight:400; }
.assignment-progress-modal { max-width:450px; text-align:center; padding:34px; }
.progress-orbit { display:grid; place-items:center; width:60px; height:60px; margin:0 auto 18px; border:1px solid #bfc2fb; border-radius:20px; background:#eeeefe; color:#6266c5; font-size:25px; animation:assignment-pulse 1.5s ease-in-out infinite; }
.assignment-progress-modal h2 { margin:5px 0 8px; }
.assignment-progress-modal p { color:var(--ink-soft); font-size:13px; }
.assignment-progress-track { height:9px; margin-top:25px; overflow:hidden; border-radius:20px; background:#e9eeee; }
.assignment-progress-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--mint),#8f92ee); transition:width .25s ease; }
.progress-label { display:flex; justify-content:space-between; margin-top:9px; color:#91a3ba; font-size:11px; }
@keyframes assignment-pulse { 50% { transform:translateY(-3px) rotate(4deg); } }
.task-dot { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #e5f7f1; font-size: 20px; }
.task-dot.orange { background: #fff0de; } .task-dot.purple { background: #eeeefe; }
.task-info { flex: 1; min-width: 0; } .task-info b { display: block; font-size: 14px; } .task-info span { color: var(--ink-soft); font-size: 12px; }
.tag { display: inline-block; padding: 5px 8px; border-radius: 7px; color: var(--ink-soft); background: #f0f3f3; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tag.green { color: var(--mint-dark); background: #e5f7f1; } .tag.orange { color: #a8641c; background: #fff0de; }
.children-grid { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.child-card { padding: 24px; } .child-head { display:flex; justify-content:space-between; align-items:center; }
.profile-actions { display:flex; gap:7px; align-items:center; } .profile-actions .icon-button { width:34px; height:34px; border-radius:10px; }
.profile-avatar { overflow:hidden; background-size:cover; background-position:center; }
.profile-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; } .profile-form-grid .full { grid-column:1/-1; }
.upload-avatar { display:flex; align-items:center; gap:12px; padding:12px; border:1px dashed var(--line); border-radius:14px; margin-bottom:4px; } .upload-avatar input { max-width:190px; font-size:12px; color:var(--ink-soft); }
.image-picker { display:grid; gap:9px; margin-top:10px; }.image-picker-empty { color:var(--ink-soft); font-size:11px; }.image-picker-item { padding:8px; border:1px solid var(--line); border-radius:12px; background:#f8fbfa; }.image-picker-item img { display:block; width:100%; max-height:150px; object-fit:contain; border-radius:8px; background:#eaf1ef; }.image-picker-actions { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }.image-picker-actions button { padding:5px 7px; border-radius:7px; color:var(--ink-soft); background:white; border:1px solid var(--line); font-size:10px; font-weight:700; }.image-picker-actions button:disabled { opacity:.4; cursor:not-allowed; }.image-picker-editor { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:8px; color:var(--ink-soft); font-size:11px; }.image-picker-editor label { display:flex; align-items:center; gap:5px; }.image-picker-editor select { border:1px solid var(--line); border-radius:6px; padding:4px; font-size:11px; }
.answer-check-card { margin-top:18px; }.answer-results { display:grid; gap:10px; margin:14px 0; }.answer-result-row { display:grid; grid-template-columns:58px 1fr; gap:12px; align-items:start; padding:12px; border:1px solid var(--line); border-radius:12px; background:#f8fbfa; }.answer-result-score { color:var(--mint-dark); font-weight:800; font-size:18px; }.answer-result-row p { margin:5px 0; color:var(--ink-soft); font-size:13px; line-height:1.45; }.answer-result-row small { color:#a35d2b; font-size:11px; }
.admin-submenu { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:6px; border:1px solid var(--line); border-radius:14px; background:#fff; }.admin-submenu button { padding:10px 13px; border-radius:10px; color:var(--ink-soft); background:transparent; font-size:12px; font-weight:700; }.admin-submenu button.active { color:var(--ink); background:#e7f7f1; box-shadow:0 2px 8px rgba(16,35,61,.06); }
.login-option { margin-top:18px; padding:15px; border-radius:14px; background:#f5f8f8; border:1px solid var(--line); } .login-option label { display:flex; gap:10px; align-items:center; font-weight:700; font-size:13px; } .login-option p { margin:7px 0 0 27px; color:var(--ink-soft); font-size:11px; line-height:1.45; }
.child-head .avatar { width: 56px; height: 56px; font-size: 19px; background: #dceafa; color: #3974b6; }
.child-card h3 { margin: 20px 0 4px; font: 700 20px 'Space Grotesk'; } .child-card p { color: var(--ink-soft); font-size: 12px; margin:0; }
.progress-line { height: 8px; background: #edf1f1; border-radius: 10px; overflow: hidden; margin: 19px 0 8px; } .progress-line i { display:block; height:100%; border-radius:inherit; background: var(--mint); }
.progress-meta { display:flex; justify-content:space-between; color: var(--ink-soft); font-size: 11px; }
.dictionary { max-width: 760px; margin: 0 auto; } .search-box { display:flex; gap:10px; padding: 8px; margin-bottom: 20px; } .search-box input { flex:1; border:0; outline:0; padding: 12px; font-size: 16px; min-width:0; } .search-box input:focus { box-shadow: 0 0 0 3px #dbf6ed; border-radius: 8px; }
.definition { padding: 30px; } .definition h2 { margin: 0; font: 700 40px 'Space Grotesk'; letter-spacing: -.06em; } .pronounce { color: var(--mint-dark); margin: 5px 0 22px; font-size: 14px; } .definition h4 { margin: 21px 0 6px; color: var(--ink-soft); font-size: 11px; letter-spacing: .1em; text-transform:uppercase; } .definition p { line-height: 1.7; margin: 0; }
.progress-wrap { grid-template-columns: 1.15fr .85fr; } .progress-card { padding: 25px; } .big-score { display:flex; align-items:center; gap:22px; } .ring { width: 135px; height:135px; border-radius: 50%; display:grid; place-items:center; background: conic-gradient(var(--mint) 0 78%, #e6efec 78%); position:relative; } .ring:after { content:''; position:absolute; width: 105px; height:105px; background:white; border-radius:50%; } .ring strong { position:relative; z-index:1; font:700 28px 'Space Grotesk'; } .bar-row { margin-top: 20px; } .bar-row header { display:flex; justify-content:space-between; font-size:13px; margin-bottom:7px; } .bar-row header span { color:var(--ink-soft); }
.game-layout { grid-template-columns: minmax(0, 1.45fr) minmax(260px, .7fr); } .game-card { padding: clamp(22px, 4vw, 38px); background: var(--ink); color: white; min-height: 445px; } .game-card h2 { font: 700 clamp(30px, 4vw, 48px) 'Space Grotesk'; letter-spacing: -.07em; margin: 12px 0 8px; } .game-card p { color: #aebbd0; line-height: 1.55; max-width: 490px; } .game-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin: 22px 0; } .game-toolbar button { color:#aebbd0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:9px; padding:8px 11px; font-size:12px; font-weight:700; } .game-toolbar button.active { color:var(--ink); background:var(--mint); border-color:var(--mint); } .table-picker { display:flex; flex-wrap:wrap; gap:7px; margin: 12px 0 24px; } .table-picker button { width:36px; height:34px; border-radius:9px; color:var(--ink); background:#e7eef0; font-weight:700; } .table-picker button.active { background:var(--apricot); } .question-box { display:flex; align-items:center; justify-content:center; gap:13px; min-height:104px; margin-top:18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:18px; font:700 clamp(30px, 5vw, 46px) 'Space Grotesk'; } .answer-input { width:100px; border:0; border-bottom:3px solid var(--mint); outline:0; color:white; background:transparent; text-align:center; font:700 inherit; } .answer-input::placeholder { color:#7487a1; } .game-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; } .game-stat { padding:11px; border-radius:11px; background:rgba(255,255,255,.07); } .game-stat b { display:block; font:700 22px 'Space Grotesk'; } .game-stat span { color:#91a3ba; font-size:10px; text-transform:uppercase; letter-spacing:.08em; } .game-side { padding:24px; } .game-side h3 { margin:0 0 14px; font:700 18px 'Space Grotesk'; } .game-side li { color:var(--ink-soft); font-size:13px; line-height:1.55; margin:13px 0; } .game-side li::marker { color:var(--mint-dark); } .feedback { min-height:22px; color:var(--mint); font-size:13px; font-weight:700; margin-top:12px; } .feedback.wrong { color:#ffb86b; } .worksheet-row { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:12px 0; font-weight:600; } 
.modal-backdrop { position:fixed; inset:0; background:rgba(16,35,61,.45); display:grid; place-items:center; padding:20px; z-index:10; } .modal { width:min(560px,100%); max-height:90vh; overflow:auto; padding:28px; background:white; border-radius:24px; box-shadow:0 28px 80px rgba(16,35,61,.25); } .modal header { display:flex; justify-content:space-between; align-items:start; margin-bottom:20px; } .modal h2 { margin:0; font:700 24px 'Space Grotesk'; } .close { background:#f1f4f4; width:34px; height:34px; border-radius:10px; } .form-label { display:block; color:var(--ink-soft); font-size:12px; font-weight:700; margin:15px 0 7px; } .field { width:100%; border:1px solid var(--line); border-radius:11px; padding:12px; outline:0; } .field:focus { border-color:var(--mint); box-shadow:0 0 0 3px #dbf6ed; } .modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%, 120px); background:var(--ink); color:white; border-radius:12px; padding:13px 18px; font-size:13px; opacity:0; transition:.25s; z-index:20; box-shadow:var(--shadow); } .toast.show { opacity:1; transform:translate(-50%, 0); }
.update-status { position:fixed; top:12px; left:50%; width:min(310px, calc(100vw - 32px)); padding:10px 12px 9px; transform:translate(-50%, -140%); opacity:0; pointer-events:none; color:white; background:var(--ink); border:1px solid rgba(255,255,255,.12); border-radius:12px; box-shadow:0 12px 35px rgba(16,35,61,.22); font-size:12px; text-align:center; transition:transform .25s, opacity .25s; z-index:30; } .update-status.visible { transform:translate(-50%, 0); opacity:1; } .update-status i { display:block; height:3px; margin-top:7px; border-radius:5px; background:linear-gradient(90deg,var(--mint),var(--apricot)); transform-origin:left; transform:scaleX(0); transition:transform .35s ease; } .update-status i.complete { transform:scaleX(1); }
.chat-layout { max-width: 980px; margin: 0 auto; } .chat-card { overflow:hidden; } .chat-head { display:flex; justify-content:space-between; gap:15px; align-items:center; padding:20px 23px; border-bottom:1px solid var(--line); } .chat-identity { display:flex; align-items:center; gap:12px; } .bot-avatar { width:44px; height:44px; border-radius:15px 15px 15px 4px; display:grid; place-items:center; color:var(--ink); background:var(--mint); font-size:21px; box-shadow:5px 5px 0 var(--apricot); } .online-dot { display:inline-block; width:7px; height:7px; background:var(--mint); border-radius:50%; margin-right:5px; } .chat-head h2 { margin:0; font:700 18px 'Space Grotesk'; } .chat-head p { margin:4px 0 0; color:var(--ink-soft); font-size:11px; } .chat-viewer { border:1px solid var(--line); background:#f5f8f8; color:var(--ink-soft); padding:8px 10px; border-radius:9px; font-size:11px; font-weight:700; } .chat-history { min-height:450px; max-height:58vh; overflow:auto; padding:25px clamp(18px,5vw,62px); background:linear-gradient(180deg,#fbfcfc,#f5f8f7); } .chat-message { display:flex; gap:10px; margin:0 0 20px; max-width:78%; } .chat-message.user { margin-left:auto; flex-direction:row-reverse; } .chat-bubble { padding:13px 15px; border-radius:15px 15px 15px 4px; background:white; border:1px solid var(--line); line-height:1.6; font-size:14px; box-shadow:0 5px 18px rgba(16,35,61,.04); } .chat-message.user .chat-bubble { border-radius:15px 15px 4px 15px; background:var(--ink); color:white; border-color:var(--ink); } .chat-meta { color:var(--ink-soft); font-size:10px; margin-top:5px; } .chat-message.user .chat-meta { text-align:right; } .chat-mini-avatar { flex:0 0 30px; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; color:var(--ink); background:#d9f7ed; font-size:12px; font-weight:700; } .chat-message.user .chat-mini-avatar { background:var(--apricot); } .chat-composer { padding:16px 20px 20px; border-top:1px solid var(--line); background:white; } .chat-suggestions { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; } .chat-suggestions button { padding:7px 10px; border-radius:100px; color:var(--mint-dark); background:#e8f8f2; font-size:11px; font-weight:700; } .chat-input-row { display:flex; align-items:end; gap:9px; } .chat-input { flex:1; resize:none; min-height:46px; max-height:130px; border:1px solid var(--line); border-radius:13px; padding:12px 14px; outline:0; } .chat-input:focus { border-color:var(--mint); box-shadow:0 0 0 3px #dbf6ed; } .chat-send { width:46px; height:46px; border-radius:13px; color:var(--ink); background:var(--mint); font-weight:700; } .shared-note { margin:14px auto 0; max-width:980px; padding:12px 15px; border:1px solid #d9eee8; border-radius:13px; color:var(--mint-dark); background:#effaf6; font-size:12px; line-height:1.45; }
.chat-safety-note { padding:10px 23px; color:var(--mint-dark); background:#effaf6; border-bottom:1px solid #d9eee8; font-size:11px; font-weight:700; } .chat-resources { display:grid; gap:7px; margin-top:9px; } .chat-resource { display:grid; grid-template-columns:24px 1fr; gap:0 8px; align-items:center; padding:9px 11px; color:var(--ink); background:#fffaf0; border:1px solid #f2e1b8; border-radius:10px; text-decoration:none; } .chat-resource span { grid-row:span 2; color:#a36a00; } .chat-resource b { font-size:11px; } .chat-resource small { color:var(--ink-soft); font-size:10px; } .chat-followups { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .chat-followups button { padding:6px 9px; border:1px solid #d9eee8; border-radius:100px; color:var(--mint-dark); background:#effaf6; font-size:10px; font-weight:700; }
.chat-message-body { min-width:0; } .chat-markdown p { margin:0 0 10px; } .chat-markdown p:last-child { margin-bottom:0; } .chat-markdown h1, .chat-markdown h2, .chat-markdown h3 { margin:0 0 9px; color:var(--ink); font:700 16px/1.25 'Space Grotesk'; letter-spacing:-.02em; } .chat-markdown h1 { font-size:19px; } .chat-markdown ul, .chat-markdown ol { margin:7px 0 11px; padding-left:21px; } .chat-markdown li { margin:5px 0; padding-left:2px; } .chat-markdown code { padding:2px 5px; border-radius:5px; color:var(--mint-dark); background:#eaf7f2; font:600 .92em/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; } .chat-markdown pre { overflow:auto; margin:10px 0 0; padding:10px 12px; border-radius:9px; color:#eaf7f2; background:var(--ink); font-size:12px; } .chat-markdown pre code { padding:0; color:inherit; background:none; } .chat-markdown strong { font-weight:700; color:var(--ink); } .chat-message.user .chat-markdown strong { color:white; }
.landing-page { min-height:100vh; overflow:hidden; color:var(--ink); background:#f7faf8; }
.landing-nav { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:25px 0; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.landing-brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; }
.landing-brand .brand-mark { width:42px; height:42px; font-size:18px; }
.landing-brand b { display:block; font:700 19px 'Space Grotesk'; letter-spacing:-.04em; }
.landing-brand small { display:block; margin-top:2px; color:var(--ink-soft); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.landing-nav-actions { display:flex; align-items:center; gap:20px; }
.landing-nav-actions a { color:var(--ink-soft); font-size:13px; font-weight:700; text-decoration:none; }
.landing-nav-actions .button { padding:10px 14px; font-size:12px; }
.landing-hero { width:min(1180px,calc(100% - 48px)); min-height:600px; margin:0 auto; display:grid; grid-template-columns:minmax(0,.95fr) minmax(400px,1.05fr); align-items:center; gap:30px; }
.landing-hero-copy { position:relative; z-index:1; padding:50px 0 72px; }
.landing-kicker { display:inline-flex; align-items:center; gap:8px; color:var(--mint-dark); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.landing-tagline { display:block; margin-top:10px; color:var(--ink-soft); font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:none; }
.landing-kicker i { width:8px; height:8px; border-radius:50%; background:var(--apricot); box-shadow:0 0 0 5px #fff0de; }
.landing-hero h1 { max-width:650px; margin:22px 0 20px; font:600 clamp(53px,7vw,91px)/.91 'Space Grotesk'; letter-spacing:-.085em; }
.landing-hero h1 em { color:var(--mint-dark); font-style:normal; }
.landing-lede { max-width:520px; margin:0; color:var(--ink-soft); font-size:18px; line-height:1.6; }
.landing-hero-actions { display:flex; align-items:center; gap:20px; margin-top:30px; flex-wrap:wrap; }
.landing-cta { padding:15px 18px; font-size:14px; box-shadow:0 12px 22px rgba(76,201,166,.2); }
.landing-text-link { color:var(--ink-soft); background:transparent; font-size:13px; font-weight:700; }
.landing-text-link u { color:var(--mint-dark); text-underline-offset:3px; }
.landing-trust { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:38px; color:#7f8e9c; font-size:11px; }
.landing-trust span:first-child { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; color:var(--mint-dark); background:#dcf6ed; font-weight:800; }
.landing-hero-art { min-height:480px; position:relative; }
.landing-sun { position:absolute; right:9%; top:13%; width:320px; height:320px; border-radius:50%; background:#fff1de; }
.landing-orbit { position:absolute; border:1px solid rgba(76,201,166,.45); border-radius:50%; }
.landing-orbit-one { width:470px; height:240px; right:-3%; top:30%; transform:rotate(-24deg); }
.landing-orbit-two { width:380px; height:190px; right:10%; top:38%; border-color:rgba(143,146,238,.4); transform:rotate(29deg); }
.landing-orbit:after { content:''; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 8px rgba(76,201,166,.12); }
.landing-orbit-one:after { right:52px; top:16px; }.landing-orbit-two:after { left:44px; bottom:12px; background:var(--apricot); box-shadow:0 0 0 8px rgba(255,184,107,.13); }
.landing-note { position:absolute; z-index:2; display:flex; gap:12px; align-items:center; padding:18px; border-radius:17px; box-shadow:0 20px 45px rgba(16,35,61,.15); }
.landing-note small { display:block; margin-bottom:7px; color:#7b8996; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.landing-note strong { display:block; font:600 22px/1 'Space Grotesk'; letter-spacing:-.06em; }.landing-note span { display:block; margin-top:7px; color:var(--mint-dark); font-size:11px; font-weight:700; }
.note-one { left:8%; top:25%; width:190px; background:#fffaf1; transform:rotate(-7deg); }.note-one strong { color:#a8641c; }
.note-two { right:7%; bottom:19%; width:245px; color:white; background:#18324e; transform:rotate(5deg); }.note-two small { color:#9bacbf; }.note-two strong { color:var(--mint); font-size:19px; }.note-icon { display:grid !important; place-items:center; width:35px; height:35px; margin:0 !important; color:var(--ink) !important; background:var(--mint); border-radius:11px; font-size:18px !important; }
.landing-star { position:absolute; color:var(--apricot); font-size:28px; }.star-one { top:17%; right:13%; }.star-two { bottom:18%; left:14%; color:var(--lavender); font-size:18px; }
.landing-strip { display:grid; grid-template-columns:repeat(3,1fr); width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:22px 0 27px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.landing-strip div { display:grid; gap:5px; padding:0 26px; border-right:1px solid var(--line); }.landing-strip div:first-child { padding-left:0; }.landing-strip div:last-child { border-right:0; }.landing-strip strong { font:700 14px 'Space Grotesk'; }.landing-strip span { color:var(--ink-soft); font-size:12px; line-height:1.45; }
.landing-section { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:112px 0 118px; }.landing-section-intro { display:grid; grid-template-columns:1.05fr .95fr; column-gap:70px; align-items:end; }.landing-section-intro h2 { grid-row:span 2; margin:16px 0 0; font:600 clamp(35px,4.5vw,58px)/.98 'Space Grotesk'; letter-spacing:-.075em; }.landing-section-intro p { max-width:390px; margin:0 0 4px; color:var(--ink-soft); font-size:15px; line-height:1.6; }
.landing-features { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:58px; }.landing-features article { position:relative; min-height:270px; padding:25px; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:var(--shadow); }.feature-number { position:absolute; top:25px; right:25px; color:#a5b1b6; font-size:11px; font-weight:800; letter-spacing:.1em; }.landing-feature-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:34px; border-radius:15px; color:var(--ink); font-size:22px; }.landing-feature-icon.mint { background:#dff7ef; }.landing-feature-icon.apricot { background:#fff0df; }.landing-feature-icon.lavender { background:#ebebff; }.landing-features h3 { margin:0 0 9px; font:700 19px 'Space Grotesk'; letter-spacing:-.03em; }.landing-features p { max-width:270px; margin:0; color:var(--ink-soft); font-size:13px; line-height:1.6; }
.landing-safety { width:min(1180px,calc(100% - 48px)); margin:0 auto 112px; padding:33px 38px; display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; border-radius:22px; color:white; background:var(--ink); }.safety-mark { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:var(--ink); background:var(--mint); font-size:23px; font-weight:800; }.landing-safety .landing-kicker { color:var(--mint); }.landing-safety h2 { margin:7px 0 7px; font:600 26px 'Space Grotesk'; letter-spacing:-.05em; }.landing-safety p { max-width:650px; margin:0; color:#afbdd0; font-size:13px; line-height:1.6; }.landing-safety .button { white-space:nowrap; }
.landing-bottom-cta { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:80px 0 90px; text-align:center; border-top:1px solid var(--line); }.landing-bottom-cta h2 { margin:16px 0 25px; font:600 clamp(38px,5vw,64px)/.95 'Space Grotesk'; letter-spacing:-.08em; }.landing-bottom-cta .landing-kicker { justify-content:center; }
.landing-footer { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:22px 0 30px; display:flex; justify-content:space-between; gap:15px; color:#81909b; border-top:1px solid var(--line); font-size:11px; }.landing-footer button { color:var(--mint-dark); background:transparent; font-size:11px; font-weight:800; }
.chat-error .chat-bubble { color:#8c651f; background:#fffaf0; border-color:#f2e1b8; } .chat-retry { margin-top:8px; padding:6px 10px; border:1px solid #e4c77e; border-radius:8px; color:#8c651f; background:#fffdf7; font-size:11px; font-weight:700; }
.ai-provider-card { grid-column: 1 / -1; } .settings-help, .settings-warning, .ai-provider-status { color:var(--ink-soft); font-size:12px; line-height:1.5; } .settings-warning { padding:10px 12px; border-radius:10px; background:#fffaf0; color:#8c651f; } .ai-provider-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:15px; } .ai-provider-status { margin:10px 0 0; } .admin-choice-list { display:grid; gap:8px; margin:12px 0 16px; } .admin-choice { display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; transition:border-color .18s, background .18s, box-shadow .18s; } .admin-choice:has(input:checked) { border-color:var(--mint); background:#f3fbf8; box-shadow:0 0 0 2px rgba(70,199,166,.12); } .admin-choice input { margin-top:3px; accent-color:var(--mint-dark); } .admin-choice span { display:grid; gap:3px; } .admin-choice small { color:var(--ink-soft); font-size:11px; line-height:1.35; } .admin-llm-card, .admin-ocr-card { grid-column:1 / -1; }
.view-context { display:flex; align-items:center; gap:8px; margin-top:8px; color:var(--mint-dark); font-size:11px; font-weight:700; } .view-context select { border:1px solid var(--line); border-radius:8px; padding:5px 8px; color:var(--ink); background:white; font-size:11px; } .admin-grid { grid-template-columns:1.15fr .85fr; } .admin-user-list { max-height:420px; overflow:auto; } .admin-user-row { gap:10px; } .admin-user-row .avatar { flex:0 0 34px; width:34px; height:34px; font-size:11px; } .admin-invite { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); } .admin-invite h4 { margin:0 0 4px; } .admin-invite-row { display:flex; gap:8px; align-items:center; } .admin-invite-row .field { flex:1; }
.mobile-nav { display:none; } .mobile-nav:has(button[data-page="admin"]) { grid-template-columns:repeat(7,1fr); } .empty { text-align:center; color:var(--ink-soft); padding:55px 20px; } .empty strong { display:block; color:var(--ink); font:700 18px 'Space Grotesk'; margin-bottom:7px; }
@media (max-width: 1100px) { .feature-row { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 900px) { .sidebar { width:220px; } .home-grid, .progress-wrap, .game-layout, .admin-grid { grid-template-columns:1fr; } }
@media (max-width: 680px) { .shell { display:block; padding-bottom:75px; } .sidebar { display:none; } .topbar { padding:16px 18px; min-height:70px; } .top-actions .icon-button { display:none; } .content { padding:22px 16px 35px; } .hero { min-height:300px; padding:25px; } .hero h2 { font-size:35px; } .mobile-nav { position:fixed; bottom:0; left:0; right:0; z-index:5; height:72px; padding:8px 4px; background:rgba(255,255,255,.95); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(6,1fr); backdrop-filter:blur(15px); } .mobile-nav button { background:transparent; color:var(--ink-soft); font-size:9px; display:grid; place-items:center; gap:4px; } .mobile-nav button.active { color:var(--mint-dark); font-weight:700; } .mobile-nav span:first-child { font-size:18px; } .task-row { gap:10px; } .task-row .tag { display:none; } .definition { padding:23px; } .big-score { gap:15px; } .ring { width:105px; height:105px; } .ring:after { width:82px; height:82px; } .feature-row { grid-template-columns:1fr; } .game-card { min-height: auto; } .game-stats { grid-template-columns:repeat(3,1fr); } .profile-form-grid { grid-template-columns:1fr; } .profile-form-grid .full { grid-column:auto; } .upload-avatar { align-items:flex-start; flex-direction:column; } .chat-message { max-width:92%; } .chat-history { min-height:420px; padding:20px 14px; } .chat-head { padding:16px; } .chat-composer { padding:14px; } .admin-invite-row { align-items:stretch; flex-direction:column; } .view-context { flex-wrap:wrap; } .assignment-page-head { align-items:stretch; flex-direction:column; gap:14px; } .assignment-page-head .button { width:100%; } .assignment-filters { grid-template-columns:1fr; padding:15px; } .filter-search { grid-template-columns:1fr; } .filter-search .button { width:100%; } .assignment-table { min-width:0; } .assignment-table thead { display:none; } .assignment-table, .assignment-table tbody, .assignment-table tr, .assignment-table td { display:block; width:100%; } .assignment-table tr { padding:16px; border-top:1px solid var(--line); } .assignment-table tr:first-child { border-top:0; } .assignment-table td { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; border:0; } .assignment-table td:nth-child(3) { display:block; padding:9px 0; } .assignment-table td:nth-child(4) { justify-content:flex-start; } .assignment-table td:last-child { justify-content:flex-end; } .assignment-summary { max-width:100%; } .assignment-result-card { padding:22px; } .assignment-type-picker { grid-template-columns:1fr; } .assignment-modal-backdrop { padding:0; } .assignment-composer-modal { width:100%; max-width:none; height:100%; max-height:none; border-radius:0; padding:22px 18px 30px; } .assignment-progress-modal { width:100%; max-width:none; height:auto; border-radius:20px; } }

.chat-message.streaming .chat-bubble, .chat-markdown:empty { min-width:86px; }
.chat-markdown { line-height:1.72; letter-spacing:-.005em; word-break:normal; overflow-wrap:break-word; }
.chat-markdown.stream-text-settle { animation:chat-text-settle .24s ease-out both; }
.chat-thinking-label { display:inline-flex; align-items:center; color:var(--ink-soft); font-size:12px; font-weight:700; letter-spacing:.01em; }
.chat-thinking-dots { display:inline-flex; align-items:center; gap:3px; width:19px; margin-left:3px; }
.chat-thinking-dots i { width:3px; height:3px; border-radius:50%; background:var(--mint-dark); opacity:.28; animation:chat-ellipsis-dot 1.8s ease-in-out infinite; }
.chat-thinking-dots i:nth-child(2) { animation-delay:.2s; }
.chat-thinking-dots i:nth-child(3) { animation-delay:.4s; }
.chat-markdown:empty:after { content:' '; display:inline-block; width:7px; height:7px; margin-left:4px; vertical-align:middle; border-radius:50%; background:var(--mint); box-shadow:12px 0 0 var(--mint),24px 0 0 var(--mint); animation:chat-thinking 1.1s infinite ease-in-out; }
@keyframes chat-thinking { 0%,60%,100% { opacity:.28; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
@keyframes chat-ellipsis-dot { 0%,55%,100% { opacity:.28; transform:translateY(0); } 25% { opacity:1; transform:translateY(-2px); } }
@keyframes chat-text-settle { from { opacity:.72; transform:translateY(1px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .chat-markdown.stream-text-settle, .chat-thinking-dots i { animation:none; opacity:.7; } }
.auth-loading-screen { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#f7fbf9,#eef5f4); color:var(--ink); }
.auth-loading-card { width:min(420px,100%); padding:34px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:0 20px 55px rgba(16,35,61,.10); }
.auth-loading-card .brand-mark { margin:0 auto 18px; }
.auth-loading-card h1 { margin:7px 0 10px; font:700 25px 'Space Grotesk'; }
.auth-loading-card p { margin:0; color:var(--ink-soft); font-size:13px; line-height:1.55; }
.auth-loading-card > span { display:block; margin-top:10px; color:#91a3ba; font-size:11px; }
.auth-loading-track { height:8px; margin-top:24px; overflow:hidden; border-radius:20px; background:#e8efed; }
.auth-loading-track i { display:block; width:45%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--mint),#8f92ee); animation:auth-loading-slide 1.2s ease-in-out infinite; }
@keyframes auth-loading-slide { 0% { transform:translateX(-100%); } 100% { transform:translateX(230%); } }
@media (max-width: 760px) {
  .auth-screen { display:block; min-height:100svh; background:#f6f8f6; }
  .auth-showcase { display:none; }
  .auth-panel { display:block; min-height:100svh; padding:25px 22px 32px; }
  .auth-panel-inner { width:min(100%, 430px); margin:0 auto; padding-top:8px; }
  .auth-mobile-brand { display:flex; }
  .auth-panel h1 { font-size:37px; }
  .auth-intro { margin-bottom:28px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-submit, .button { transition:none; }
}
@media (max-width: 820px) {
  .landing-nav { width:calc(100% - 34px); padding:18px 0; }.landing-nav-actions { gap:10px; }.landing-nav-actions a { display:none; }.landing-nav-actions .button { padding:9px 10px; font-size:11px; }
  .landing-hero { width:calc(100% - 34px); min-height:auto; display:block; }.landing-hero-copy { padding:62px 0 25px; }.landing-hero h1 { font-size:clamp(48px,13vw,75px); }.landing-lede { font-size:16px; }.landing-hero-art { min-height:350px; margin-top:15px; transform:scale(.92); transform-origin:center top; }.landing-sun { width:260px; height:260px; right:8%; top:10%; }.landing-orbit-one { width:410px; height:210px; right:-8%; top:28%; }.landing-orbit-two { width:340px; height:170px; right:5%; top:37%; }.note-one { left:3%; top:20%; }.note-two { right:1%; bottom:14%; }
  .landing-strip { width:calc(100% - 34px); grid-template-columns:1fr; gap:18px; padding:22px 0; }.landing-strip div, .landing-strip div:first-child { padding:0; border-right:0; }.landing-section { width:calc(100% - 34px); padding:76px 0; }.landing-section-intro { display:block; }.landing-section-intro h2 { margin:15px 0 20px; }.landing-features { grid-template-columns:1fr; margin-top:34px; }.landing-features article { min-height:220px; }.landing-safety { width:calc(100% - 34px); margin-bottom:76px; padding:27px; grid-template-columns:auto 1fr; }.landing-safety .button { grid-column:2; justify-self:start; }.landing-bottom-cta { width:calc(100% - 34px); padding:65px 0 70px; }.landing-footer { width:calc(100% - 34px); flex-wrap:wrap; }
}
@media (max-width: 480px) { .landing-brand b { font-size:17px; }.landing-brand .brand-mark { width:38px; height:38px; }.landing-nav-actions .button.secondary { display:none; }.landing-hero-actions { align-items:stretch; flex-direction:column; gap:14px; }.landing-hero-actions .landing-cta, .landing-text-link { width:100%; text-align:center; }.landing-trust { line-height:1.7; }.landing-hero-art { min-height:315px; transform:scale(.78); width:128%; margin-left:-14%; }.landing-safety { display:block; }.landing-safety .safety-mark { margin-bottom:19px; }.landing-safety .button { margin-top:22px; }.landing-footer span:nth-child(2) { width:100%; order:3; } }
.admin-log-list { max-height:360px; overflow:auto; display:grid; gap:8px; }
.log-row { display:grid; gap:3px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12px; }
.log-row:last-child { border-bottom:0; }
.log-row b { color:var(--ink); }
.log-row span { color:var(--ink-soft); line-height:1.4; overflow-wrap:anywhere; }
.log-row small { color:#91a3ba; font-size:10px; }
.feedback-list { display:grid; gap:14px; margin-top:16px; }
.feedback-thread header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.feedback-thread header h3, .feedback-thread header h4 { margin:8px 0 0; }
.feedback-message { margin-top:12px; padding:11px 13px; background:#f5f8f8; border-radius:12px; }
.feedback-message.admin { background:#e8f8f2; }
.feedback-message p { margin:5px 0; white-space:pre-wrap; line-height:1.5; font-size:13px; }
.feedback-message small, .feedback-thread header small { color:#91a3ba; font-size:10px; }
.feedback-reply-row { display:flex; gap:8px; margin-top:14px; }
.feedback-reply-row .field { flex:1; }
.invite-banner { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 18px; background:#fff4df; border-bottom:1px solid #f1ce99; color:var(--ink); font-size:13px; }
.invite-banner strong { color:#9a5a12; }
.invite-banner span { flex:1; min-width:220px; }
.child-account-card { margin-top:16px; }