/* ============================================================================ EduSpring UI — Design System v6 ("Mission Control") Single source of truth for the rebuilt site. Theme-aware: light default, dark via . Namespaced .ui-* so it can coexist with the legacy theme.css during migration. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); /* ---------- Tokens — LIGHT (default) ---------- */ :root { --ui-font: 'Inter', system-ui, -apple-system, sans-serif; --ui-display: 'Space Grotesk', 'Inter', sans-serif; /* brand */ --ui-blue:#16a34a; --ui-blue-l:#34d399; --ui-blue-d:#15803d; --ui-cyan:#0d9488; --ui-violet:#9333ea; --ui-amber:#d97706; --ui-rose:#e11d63; --ui-green:#059669; /* surfaces (light) */ --ui-bg:#eef2f7; --ui-bg-grad-1:rgba(67,97,238,0.10); --ui-bg-grad-2:rgba(76,201,240,0.10); --ui-tile:#ffffff; --ui-tile-2:#f7f9fc; --ui-line:#dde4ec; --ui-line-2:#c8d3e0; --ui-inset:#f1f5f9; /* ink (light) — all WCAG AA on tile */ --ui-ink:#1f2733; --ui-ink-2:#4b5563; --ui-ink-3:#5b6776; /* subjects */ --ui-maths:#b8860b; --ui-sci:#059669; --ui-eng:#4361ee; --ui-lit:#9333ea; --ui-hist:#e11d63; --ui-geo:#0891b2; /* shadows (light) */ --ui-sh-sm:0 1px 2px rgba(15,23,42,0.06),0 2px 4px rgba(15,23,42,0.08); --ui-sh-md:0 2px 4px rgba(15,23,42,0.06),0 8px 16px rgba(15,23,42,0.10); --ui-sh-lg:0 4px 8px rgba(15,23,42,0.07),0 16px 32px rgba(15,23,42,0.13); --ui-glow-blue:0 12px 30px -10px rgba(22,163,74,0.45); --ui-r:22px; --ui-r-sm:14px; --ui-r-lg:26px; /* on-dark-surface ink: hero/mission tiles are dark in BOTH themes */ --ui-on-accent:#ffffff; --ui-on-accent-2:rgba(255,255,255,0.72); --ui-on-accent-3:rgba(255,255,255,0.55); --ui-z-nav:90; --ui-z-modal:10000; --ui-z-toast:10010; } /* ---------- Tokens — DARK ---------- */ [data-theme="dark"] { --ui-bg:#0a0e1a; --ui-bg-grad-1:rgba(67,97,238,0.22); --ui-bg-grad-2:rgba(76,201,240,0.14); --ui-tile:#141b2e; --ui-tile-2:#171f35; --ui-line:rgba(255,255,255,0.08); --ui-line-2:rgba(255,255,255,0.16); --ui-inset:rgba(255,255,255,0.05); --ui-ink:#f4f7ff; --ui-ink-2:#aeb9d4; --ui-ink-3:#6b7798; /* brighter accents read better on dark */ --ui-cyan:#2dd4bf; --ui-violet:#a855f7; --ui-amber:#fbbf24; --ui-rose:#fb5d7a; --ui-green:#34d399; --ui-maths:#fbbf24; --ui-sci:#34d399; --ui-eng:#6d86ff; --ui-lit:#a855f7; --ui-hist:#fb5d7a; --ui-geo:#22d3ee; --ui-sh-sm:0 2px 8px rgba(0,0,0,0.35); --ui-sh-md:0 4px 16px rgba(0,0,0,0.45); --ui-sh-lg:0 16px 40px rgba(0,0,0,0.5); --ui-glow-blue:0 12px 30px -10px rgba(52,211,153,0.55); } /* ============================================================================ LEGACY BRIDGE — make theme.css content adopt the v6 look on ui-scope pages. We remap theme.css's design tokens to the es-ui values (and they stay theme-aware because the es-ui values themselves flip with [data-theme]). This loads after theme.css, so on .ui-scope pages every es-card / es-btn / text-foreground-* / surface component renders in the v6 language with no render-module rewrites. Legacy (non-ui-scope) pages are untouched. ============================================================================ */ .ui-scope{ --bg-page:var(--ui-bg); --bg-primary:var(--ui-bg); --bg-secondary:var(--ui-bg); --bg-card:var(--ui-tile); --bg-tertiary:var(--ui-tile); --surface-container-lowest:var(--ui-tile); --bg-card-hover:var(--ui-tile-2); --surface-container-low:var(--ui-inset); --surface-container:color-mix(in srgb,var(--ui-ink) 8%,transparent); --surface-container-high:color-mix(in srgb,var(--ui-ink) 14%,transparent); --border-card:var(--ui-line); --border-card-hover:var(--ui-line-2); --border-default:var(--ui-line); --border-light:var(--ui-line); --border-medium:var(--ui-line-2); --text-primary:var(--ui-ink); --text-secondary:var(--ui-ink-2); --text-tertiary:var(--ui-ink-3); --color-primary:var(--ui-blue); --color-primary-dark:var(--ui-blue-d); --color-primary-light:var(--ui-blue-l); --color-secondary:var(--ui-cyan); --color-accent:var(--ui-cyan); --color-success:var(--ui-green); --color-warning:var(--ui-amber); --color-error:var(--ui-rose); --shadow-xs:var(--ui-sh-sm); --shadow-sm:var(--ui-sh-sm); --shadow-md:var(--ui-sh-md); --shadow-lg:var(--ui-sh-lg); --shadow-xl:var(--ui-sh-lg); --radius-card:var(--ui-r); --radius-lg:var(--ui-r-lg); } /* Card / button polish to match the dashboard tiles exactly */ .ui-scope .es-card{border:1px solid var(--ui-line);border-radius:var(--ui-r);box-shadow:var(--ui-sh-sm);background:var(--ui-tile);} .ui-scope .es-card--interactive:hover,.ui-scope .es-card:hover{border-color:var(--ui-line-2);box-shadow:var(--ui-sh-md);} .ui-scope .es-btn--primary{background:linear-gradient(135deg,var(--ui-blue),var(--ui-blue-l));box-shadow:var(--ui-glow-blue);} .ui-scope .es-btn{min-height:44px;border-radius:13px;} /* dashboard-grade hero gradient for any legacy hero */ .ui-scope .es-card--hero,.ui-scope .edu-page-header{background:linear-gradient(135deg,var(--hero-from) 0%,var(--hero-to) 100%);} /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box;} .ui-scope{ margin:0; font-family:var(--ui-font); background:var(--ui-bg); color:var(--ui-ink); -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden; } .ui-display{font-family:var(--ui-display);} .ui-scope .material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;} .ui-scope .fill{font-variation-settings:'FILL' 1,'wght' 500;} /* ---------- Ambient aurora (vivid dark, whisper-soft light) ---------- */ .ui-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;} .ui-aurora b{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.55;} .ui-aurora .a1{width:560px;height:560px;background:radial-gradient(circle,var(--ui-bg-grad-1),transparent 70%);top:-200px;left:-120px;animation:ui-drift1 24s ease-in-out infinite;} .ui-aurora .a2{width:500px;height:500px;background:radial-gradient(circle,var(--ui-bg-grad-2),transparent 70%);top:-160px;right:-100px;animation:ui-drift2 28s ease-in-out infinite;} @keyframes ui-drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(50px,40px) scale(1.1);}} @keyframes ui-drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-40px,30px) scale(1.06);}} .ui-wrap{position:relative;z-index:1;max-width:1340px;margin:0 auto;padding:22px 28px 70px;} /* ---------- Top bar / nav ---------- */ .ui-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 auto 26px;max-width:1340px;animation:ui-fade-down .6s ease both;} /* When #nav is a direct page child (converted pages without a ui-wrap), pad the bar */ body.ui-scope > #nav{display:block;padding:22px 28px 0;} @media(max-width:560px){ body.ui-scope > #nav{padding:16px 16px 0;} } .ui-brand{display:flex;align-items:center;gap:12px;} .ui-brand__logo{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--ui-blue),var(--ui-cyan));display:flex;align-items:center;justify-content:center;box-shadow:var(--ui-glow-blue);animation:ui-logo 4s ease-in-out infinite;} .ui-brand__logo .material-symbols-outlined{color:#fff;font-size:24px;} @keyframes ui-logo{0%,100%{box-shadow:var(--ui-glow-blue);}50%{box-shadow:0 12px 38px -6px rgba(76,201,240,0.75);}} .ui-brand__name{font-weight:800;font-size:1.12rem;letter-spacing:-0.02em;color:var(--ui-ink);} .ui-brand__name small{display:block;font-size:0.56rem;letter-spacing:0.22em;color:var(--ui-ink-3);font-weight:600;} .ui-nav{display:flex;gap:5px;background:var(--ui-tile);border:1px solid var(--ui-line);padding:5px;border-radius:14px;box-shadow:var(--ui-sh-sm);} .ui-nav a{padding:9px 14px;border-radius:10px;font-size:0.82rem;font-weight:600;color:var(--ui-ink-2);text-decoration:none;display:flex;align-items:center;gap:7px;transition:.15s;} .ui-nav a .material-symbols-outlined{font-size:18px;} .ui-nav a:hover{color:var(--ui-ink);background:var(--ui-inset);} .ui-nav a.on{background:linear-gradient(135deg,var(--ui-blue),var(--ui-blue-l));color:#fff;box-shadow:0 6px 16px -6px rgba(22,163,74,0.7);} .ui-top__right{display:flex;align-items:center;gap:12px;} .ui-chip{display:flex;align-items:center;gap:7px;background:var(--ui-tile);border:1px solid var(--ui-line);border-radius:11px;padding:8px 13px;font-weight:700;font-size:0.85rem;color:var(--ui-ink);box-shadow:var(--ui-sh-sm);} .ui-chip .material-symbols-outlined{font-size:17px;} .ui-avatar{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--ui-violet),var(--ui-blue));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;border:1px solid var(--ui-line-2);} .ui-theme-toggle{width:42px;height:42px;border-radius:13px;background:var(--ui-tile);border:1px solid var(--ui-line);display:flex;align-items:center;justify-content:center;color:var(--ui-ink-2);cursor:pointer;box-shadow:var(--ui-sh-sm);transition:.15s;} .ui-theme-toggle:hover{color:var(--ui-ink);border-color:var(--ui-line-2);} /* ---------- Mobile bottom nav (hidden on desktop) ---------- */ .ui-bottomnav{display:none;} @media(max-width:1080px){ .ui-bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:var(--ui-z-nav); background:var(--ui-tile);border-top:1px solid var(--ui-line);padding:6px 4px; justify-content:space-around;box-shadow:0 -4px 20px rgba(15,23,42,0.10);} .ui-bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px; text-decoration:none;color:var(--ui-ink-3);font-size:0.6rem;font-weight:700;letter-spacing:0.02em;min-height:44px;justify-content:center;} .ui-bottomnav a .material-symbols-outlined{font-size:22px;} .ui-bottomnav a.on{color:var(--ui-blue);} .ui-wrap{padding-bottom:84px;} } /* ---------- Greeting ---------- */ .ui-greet{margin-bottom:22px;animation:ui-fade-up .6s .05s ease both;} .ui-greet h1{font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-0.035em;line-height:1.05;color:var(--ui-ink);} .ui-greet h1 .g{background:linear-gradient(120deg,var(--ui-cyan),var(--ui-blue-l),var(--ui-violet));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ui-shimmer 6s linear infinite;} @keyframes ui-shimmer{to{background-position:200% center;}} .ui-greet p{color:var(--ui-ink-2);margin-top:8px;font-size:0.96rem;} /* ---------- Bento ---------- */ .ui-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(92px,auto);gap:16px;} .ui-tile{background:var(--ui-tile);border:1px solid var(--ui-line);border-radius:var(--ui-r);padding:22px;position:relative;overflow:hidden;box-shadow:var(--ui-sh-sm);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;animation:ui-fade-up .6s ease both;} .ui-tile:hover{border-color:var(--ui-line-2);box-shadow:var(--ui-sh-md);} .ui-tile--flat{box-shadow:none;background:transparent;border:none;padding:0;} .ui-lbl{font-size:0.66rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--ui-ink-3);display:flex;align-items:center;gap:7px;margin-bottom:14px;} /* span helpers */ .ui-c7{grid-column:span 7;}.ui-c5{grid-column:span 5;}.ui-c4{grid-column:span 4;}.ui-c12{grid-column:span 12;} .ui-r4{grid-row:span 4;}.ui-r3{grid-row:span 3;}.ui-r2{grid-row:span 2;} /* ---------- Accent tiles (dark in both themes) ---------- */ .ui-tile--accent{background:linear-gradient(150deg,#16203a,#101729);border-color:rgba(255,255,255,0.08);color:var(--ui-on-accent);} .ui-tile--accent .ui-lbl{color:var(--ui-on-accent-3);} .ui-glow{position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(76,201,240,0.2),transparent 65%);top:-120px;right:-60px;pointer-events:none;} /* ---------- Orbit ---------- */ .ui-orbit-card{display:flex;flex-direction:column;background:linear-gradient(160deg,var(--ui-tile),var(--ui-tile-2));} .ui-orbit-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:360px;} .ui-orbit{position:relative;width:380px;height:380px;} .ui-ring-o{position:absolute;border:1px dashed var(--ui-line-2);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.6;} .ui-ro1{width:170px;height:170px;}.ui-ro2{width:270px;height:270px;}.ui-ro3{width:370px;height:370px;} .ui-spin{position:absolute;top:50%;left:50%;width:0;height:0;} .ui-spin1{animation:ui-spin 48s linear infinite;}.ui-spin2{animation:ui-spin 72s linear infinite reverse;}.ui-spin3{animation:ui-spin 96s linear infinite;} @keyframes ui-spin{to{transform:rotate(360deg);}} .ui-planet{position:absolute;transform:translate(-50%,-50%);} .ui-pnode{display:flex;flex-direction:column;align-items:center;gap:5px;} .ui-pdot{width:var(--s);height:var(--s);border-radius:16px;background:color-mix(in srgb,var(--c) 20%,var(--ui-tile));border:1.5px solid var(--c);display:flex;align-items:center;justify-content:center;font-size:calc(var(--s)*0.5);box-shadow:0 0 22px -6px var(--c);transition:transform .2s;cursor:pointer;} .ui-planet:hover .ui-pdot{transform:scale(1.14);} .ui-pmeta{font-size:0.62rem;font-weight:700;color:var(--ui-ink-2);background:var(--ui-tile);border:1px solid var(--ui-line);padding:2px 7px;border-radius:6px;white-space:nowrap;} .ui-pmeta b{color:var(--c);} .ui-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:128px;height:128px;border-radius:50%;background:conic-gradient(var(--ui-cyan) calc(var(--p,0)*1%),var(--ui-inset) 0);display:flex;align-items:center;justify-content:center;box-shadow:0 0 60px -16px var(--ui-cyan);} .ui-core__in{width:104px;height:104px;border-radius:50%;background:var(--ui-tile);border:1px solid var(--ui-line);display:flex;flex-direction:column;align-items:center;justify-content:center;} .ui-core__pct{font-size:1.95rem;font-weight:700;letter-spacing:-0.04em;color:var(--ui-ink);font-family:var(--ui-display);} .ui-core__cap{font-size:0.55rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--ui-ink-3);} /* ---------- Mission ---------- */ .ui-mission{display:flex;flex-direction:column;justify-content:space-between;} .ui-mission__sub{color:var(--ui-on-accent-2);font-size:0.85rem;font-weight:600;margin-bottom:2px;} .ui-mission__title{font-family:var(--ui-display);font-size:2rem;font-weight:700;letter-spacing:-0.03em;line-height:1.02;margin-bottom:8px;color:var(--ui-on-accent);} .ui-mission__meta{display:flex;gap:16px;color:var(--ui-on-accent-2);font-size:0.82rem;font-weight:600;margin-bottom:20px;flex-wrap:wrap;} .ui-mission__meta b{color:var(--ui-on-accent);} /* ---------- Buttons ---------- */ .ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:13px;font-weight:800;font-size:0.9rem;text-decoration:none;border:none;cursor:pointer;min-height:44px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;} .ui-btn .material-symbols-outlined{font-size:19px;} .ui-btn--light{background:#fff;color:#0a0e1a;box-shadow:0 12px 30px -10px rgba(76,201,240,0.5);} .ui-btn--light:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(76,201,240,0.7);} .ui-btn--primary{background:linear-gradient(135deg,var(--ui-blue),var(--ui-blue-l));color:#fff;box-shadow:var(--ui-glow-blue);} .ui-btn--primary:hover{transform:translateY(-2px);} .ui-btn--recover{background:linear-gradient(135deg,var(--ui-rose),var(--ui-violet));color:#fff;box-shadow:0 12px 30px -10px rgba(225,29,99,0.6);width:100%;} .ui-btn--recover:hover{transform:translateY(-2px);} .ui-btn--ghost{background:var(--ui-inset);color:var(--ui-ink);border:1px solid var(--ui-line);} .ui-btn--ghost:hover{border-color:var(--ui-line-2);} /* ---------- Mistake recovery ---------- */ .ui-recover{display:flex;flex-direction:column;justify-content:space-between;border-color:rgba(225,29,99,0.35); background:linear-gradient(150deg, color-mix(in srgb,var(--ui-rose) 14%,var(--ui-tile)), color-mix(in srgb,var(--ui-violet) 8%,var(--ui-tile)));} .ui-recover .ui-glow{background:radial-gradient(circle,rgba(225,29,99,0.25),transparent 65%);bottom:-110px;left:-40px;top:auto;right:auto;} .ui-recover .ui-lbl{color:var(--ui-rose);} .ui-beacon{position:absolute;top:20px;right:20px;width:13px;height:13px;border-radius:50%;background:var(--ui-rose);animation:ui-beacon 2s infinite;} @keyframes ui-beacon{0%{box-shadow:0 0 0 0 rgba(225,29,99,0.5);}70%{box-shadow:0 0 0 15px rgba(225,29,99,0);}100%{box-shadow:0 0 0 0 rgba(225,29,99,0);}} .ui-recover__row{display:flex;align-items:flex-end;gap:13px;position:relative;z-index:2;} .ui-recover__n{font-family:var(--ui-display);font-size:3.8rem;font-weight:700;line-height:0.85;letter-spacing:-0.04em;color:var(--ui-ink);} .ui-recover__txt{color:var(--ui-ink-2);font-size:0.83rem;font-weight:600;padding-bottom:7px;} /* ---------- Streak + heatmap ---------- */ .ui-flame{display:flex;align-items:center;gap:11px;} .ui-flame .material-symbols-outlined{font-size:34px;color:var(--ui-amber);filter:drop-shadow(0 0 12px color-mix(in srgb,var(--ui-amber) 60%,transparent));animation:ui-flicker 3s ease-in-out infinite;} @keyframes ui-flicker{0%,100%{transform:scale(1);}50%{transform:scale(1.1) rotate(-3deg);}} .ui-flame .ui-display{font-size:2.1rem;font-weight:700;line-height:1;color:var(--ui-ink);} .ui-flame small{display:block;font-size:0.66rem;color:var(--ui-ink-3);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;} .ui-heat{display:grid;grid-template-columns:repeat(14,1fr);gap:6px;} .ui-heat i{aspect-ratio:1;border-radius:6px;background:var(--ui-inset);} .ui-heat i.l1{background:color-mix(in srgb,var(--ui-cyan) 30%,transparent);} .ui-heat i.l2{background:color-mix(in srgb,var(--ui-cyan) 60%,transparent);} .ui-heat i.l3{background:var(--ui-cyan);box-shadow:0 0 10px -1px var(--ui-cyan);} /* ---------- Level bar ---------- */ .ui-level__top{display:flex;justify-content:space-between;align-items:baseline;} .ui-level__bar{height:10px;border-radius:999px;background:var(--ui-inset);overflow:hidden;margin:14px 0 8px;} .ui-level__bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ui-blue),var(--ui-cyan));box-shadow:0 0 16px -2px var(--ui-cyan);width:0;transition:width 1.4s cubic-bezier(.2,1,.3,1);} /* ---------- Subject cards ---------- */ .ui-subrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .ui-sub{background:var(--ui-tile);border:1px solid var(--ui-line);border-top:3px solid var(--c);border-radius:18px;padding:16px;box-shadow:var(--ui-sh-sm);transition:.18s;cursor:pointer;text-decoration:none;display:block;} .ui-sub:hover{transform:translateY(-3px);border-color:var(--ui-line-2);box-shadow:var(--ui-sh-md);} .ui-sub__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;} .ui-sub__ic{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--c) 16%,transparent);display:flex;align-items:center;justify-content:center;font-size:21px;} .ui-sub__pct{font-family:var(--ui-display);font-weight:700;font-size:1.05rem;color:var(--c);} .ui-sub__name{font-weight:800;font-size:0.95rem;color:var(--ui-ink);} .ui-sub__t{font-size:0.71rem;color:var(--ui-ink-3);font-weight:600;margin-bottom:11px;} .ui-sbar{height:6px;border-radius:999px;background:var(--ui-inset);overflow:hidden;} .ui-sbar i{display:block;height:100%;border-radius:999px;background:var(--c);} .ui-sectlabel{font-size:0.68rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ui-ink-3);margin:28px 0 14px;display:flex;align-items:center;gap:8px;} /* ============================================================================ PRO / ADULT variant components (parent · teacher · admin) Calmer, denser, data-first — same tokens, no gamification flourish. ============================================================================ */ /* big stat */ .ui-stat__n{font-family:var(--ui-display);font-size:2.2rem;font-weight:700;letter-spacing:-0.03em;color:var(--ui-ink);line-height:1;} .ui-stat__d{font-size:0.78rem;color:var(--ui-ink-3);font-weight:600;margin-top:6px;} .ui-stat__ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;background:color-mix(in srgb,var(--c,var(--ui-blue)) 14%,transparent);color:var(--c,var(--ui-blue));margin-bottom:14px;} /* trend chip */ .ui-trend{display:inline-flex;align-items:center;gap:4px;font-size:0.74rem;font-weight:700;padding:3px 8px;border-radius:999px;} .ui-trend--up{color:var(--ui-green);background:color-mix(in srgb,var(--ui-green) 14%,transparent);} .ui-trend--down{color:var(--ui-rose);background:color-mix(in srgb,var(--ui-rose) 14%,transparent);} .ui-trend .material-symbols-outlined{font-size:15px;} /* data row (child / student / list item) */ .ui-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--ui-line);} .ui-row:last-child{border-bottom:none;} .ui-row__av{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--ui-violet),var(--ui-blue));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex-shrink:0;} .ui-row__main{flex:1;min-width:0;} .ui-row__name{font-weight:700;font-size:0.92rem;color:var(--ui-ink);} .ui-row__meta{font-size:0.76rem;color:var(--ui-ink-3);font-weight:600;} .ui-row__bars{display:flex;gap:14px;align-items:center;} .ui-mini{min-width:74px;} .ui-mini__l{font-size:0.62rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ui-ink-3);margin-bottom:4px;} .ui-mini__b{height:6px;border-radius:999px;background:var(--ui-inset);overflow:hidden;} .ui-mini__b i{display:block;height:100%;border-radius:999px;background:var(--c,var(--ui-blue));} /* alert row */ .ui-alert{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;background:color-mix(in srgb,var(--ui-amber) 12%,var(--ui-tile));border:1px solid color-mix(in srgb,var(--ui-amber) 28%,transparent);margin-bottom:10px;} .ui-alert--info{background:color-mix(in srgb,var(--ui-blue) 10%,var(--ui-tile));border-color:color-mix(in srgb,var(--ui-blue) 24%,transparent);} .ui-alert .material-symbols-outlined{font-size:20px;flex-shrink:0;} .ui-alert__t{font-size:0.84rem;font-weight:600;color:var(--ui-ink);} .ui-alert__t b{font-weight:800;} /* ============================================================================ Signature + data-viz primitives (parent constellation, admin command centre) ============================================================================ */ /* mini progress ring (echoes the orbit core) */ .ui-miniring{--p:0;--rc:var(--ui-cyan);width:var(--rs,72px);height:var(--rs,72px);border-radius:50%;flex-shrink:0; background:conic-gradient(var(--rc) calc(var(--p)*1%),var(--ui-inset) 0);display:flex;align-items:center;justify-content:center;} .ui-miniring__in{width:calc(var(--rs,72px) - 16px);height:calc(var(--rs,72px) - 16px);border-radius:50%;background:var(--ui-tile);border:1px solid var(--ui-line);display:flex;flex-direction:column;align-items:center;justify-content:center;} .ui-miniring__n{font-family:var(--ui-display);font-weight:700;font-size:1rem;color:var(--ui-ink);line-height:1;} .ui-miniring__c{font-size:0.5rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ui-ink-3);} /* subject pips */ .ui-pips{display:flex;gap:6px;flex-wrap:wrap;} .ui-pip{display:inline-flex;align-items:center;gap:4px;font-size:0.68rem;font-weight:700;color:var(--ui-ink-2);background:var(--ui-inset);border-radius:999px;padding:3px 8px;} .ui-pip i{width:8px;height:8px;border-radius:50%;background:var(--c);display:inline-block;} /* sparkline (CSS bars) */ .ui-spark{display:flex;align-items:flex-end;gap:3px;height:34px;} .ui-spark i{flex:1;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--ui-blue) 55%,transparent);min-height:3px;} .ui-spark i.hi{background:var(--ui-blue);} /* child constellation card */ .ui-child{background:var(--ui-tile);border:1px solid var(--ui-line);border-radius:20px;padding:20px;box-shadow:var(--ui-sh-sm);transition:.18s;} .ui-child:hover{transform:translateY(-3px);box-shadow:var(--ui-sh-md);border-color:var(--ui-line-2);} .ui-child__head{display:flex;align-items:center;gap:16px;margin-bottom:16px;} .ui-child__name{font-weight:800;font-size:1.05rem;color:var(--ui-ink);} .ui-child__meta{font-size:0.76rem;color:var(--ui-ink-3);font-weight:600;margin-top:2px;} /* status dot (admin ops) */ .ui-dot{width:9px;height:9px;border-radius:50%;display:inline-block;} .ui-dot--ok{background:var(--ui-green);box-shadow:0 0 8px -1px var(--ui-green);} .ui-dot--warn{background:var(--ui-amber);box-shadow:0 0 8px -1px var(--ui-amber);} .ui-dot--bad{background:var(--ui-rose);box-shadow:0 0 8px -1px var(--ui-rose);} .ui-statusline{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--ui-line);} .ui-statusline:last-child{border-bottom:none;} .ui-statusline__l{display:flex;align-items:center;gap:10px;font-size:0.86rem;font-weight:600;color:var(--ui-ink);} .ui-statusline__v{font-size:0.82rem;font-weight:700;color:var(--ui-ink-2);} /* funnel / coverage bar */ .ui-fbar{display:flex;flex-direction:column;gap:11px;} .ui-fbar__row .ui-fbar__top{display:flex;justify-content:space-between;font-size:0.78rem;font-weight:600;color:var(--ui-ink-2);margin-bottom:5px;} .ui-fbar__top b{color:var(--ui-ink);font-family:var(--ui-display);} .ui-fbar__t{height:8px;border-radius:999px;background:var(--ui-inset);overflow:hidden;} .ui-fbar__t i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--c,var(--ui-blue)),color-mix(in srgb,var(--c,var(--ui-blue)) 55%,var(--ui-cyan)));} /* ---------- Animations ---------- */ @keyframes ui-fade-up{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}} @keyframes ui-fade-down{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}} /* ---------- Responsive ---------- */ @media(max-width:1080px){ .ui-c7,.ui-c5,.ui-c4{grid-column:span 12;} .ui-nav{display:none;} .ui-subrow{grid-template-columns:repeat(2,1fr);} } @media(max-width:560px){ .ui-subrow{grid-template-columns:1fr;} .ui-wrap{padding:16px 16px 60px;} } /* ============================================================================ BENTO CONTENT PRIMITIVES — shared vocabulary for rebuilt page bodies. Theme-aware (all via es-ui tokens), used across the wave rebuilds so every page reaches dashboard depth with one consistent component set. ============================================================================ */ .ui-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px;} .ui-statcard{display:flex;align-items:center;gap:14px;background:var(--ui-tile);border:1px solid var(--ui-line);border-radius:var(--ui-r);padding:16px 18px;box-shadow:var(--ui-sh-sm);animation:ui-fade-up .5s ease both;} .ui-statcard__ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:color-mix(in srgb,var(--c,var(--ui-blue)) 16%,transparent);color:var(--c,var(--ui-blue));} .ui-statcard__ic .material-symbols-outlined{font-size:22px;} .ui-statcard__n{font-family:var(--ui-display);font-size:24px;font-weight:700;letter-spacing:-0.02em;color:var(--ui-ink);line-height:1.1;} .ui-statcard__l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--ui-ink-3);} .ui-sectionbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;} .ui-sectionbar__t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--ui-ink-3);} .ui-listcard{background:var(--ui-tile);border:1px solid var(--ui-line);border-radius:var(--ui-r);padding:22px 24px;box-shadow:var(--ui-sh-sm);transition:border-color .15s,box-shadow .15s,transform .15s;animation:ui-fade-up .5s ease both;} .ui-listcard:hover{border-color:var(--ui-line-2);box-shadow:var(--ui-sh-md);} .ui-listcard--accent{border-color:color-mix(in srgb,var(--ui-blue) 45%,var(--ui-line));box-shadow:var(--ui-glow-blue);} .ui-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;background:color-mix(in srgb,var(--c,var(--ui-ink-3)) 16%,transparent);color:var(--c,var(--ui-ink-2));} .ui-ab{display:grid;gap:12px;} @media(min-width:640px){.ui-ab{grid-template-columns:1fr 1fr;}} .ui-ab__cell{border-radius:14px;padding:14px 16px;position:relative;} .ui-ab__cell--wrong{background:color-mix(in srgb,var(--ui-rose) 12%,transparent);} .ui-ab__cell--right{background:color-mix(in srgb,var(--ui-green) 14%,transparent);border:1px solid color-mix(in srgb,var(--ui-green) 30%,transparent);} .ui-ab__lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;display:block;margin-bottom:4px;} .ui-progress{height:6px;border-radius:999px;background:var(--ui-inset);overflow:hidden;} .ui-progress__bar{height:100%;border-radius:999px;transition:width .5s;} .ui-empty{text-align:center;padding:52px 24px;background:var(--ui-tile);border:1px solid var(--ui-line);border-radius:var(--ui-r);box-shadow:var(--ui-sh-sm);} .ui-empty__ic{font-size:48px;color:var(--ui-ink-3);margin-bottom:10px;} .ui-btn-grad{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--ui-blue),var(--ui-blue-l));color:#fff;padding:10px 18px;border-radius:13px;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:0.06em;box-shadow:var(--ui-glow-blue);border:none;cursor:pointer;transition:transform .12s;} .ui-btn-grad:active{transform:scale(.96);} .ui-btn-soft{display:inline-flex;align-items:center;gap:6px;background:var(--ui-inset);color:var(--ui-ink-2);padding:10px 18px;border-radius:13px;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:0.06em;border:none;cursor:pointer;transition:background .12s;} .ui-btn-soft:hover{background:color-mix(in srgb,var(--ui-ink) 12%,transparent);} /* Row lists (assignments, completed, message lists, etc.) */ .ui-rowlist{background:var(--ui-tile);border:1px solid var(--ui-line);border-radius:var(--ui-r);overflow:hidden;box-shadow:var(--ui-sh-sm);animation:ui-fade-up .5s ease both;} .ui-rowlist__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--ui-line);} .ui-rowlist__head-t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--ui-ink-3);} .ui-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--ui-line);transition:background .12s;} .ui-row:last-child{border-bottom:none;} .ui-row:hover{background:color-mix(in srgb,var(--ui-ink) 5%,transparent);} .ui-row__ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:color-mix(in srgb,var(--c,var(--ui-blue)) 16%,transparent);color:var(--c,var(--ui-blue));} .ui-row__ic .material-symbols-outlined{font-size:20px;} .ui-row__t{font-size:14px;font-weight:700;color:var(--ui-ink);} .ui-row__s{font-size:12px;color:var(--ui-ink-3);margin-top:2px;} .ui-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;white-space:nowrap;background:color-mix(in srgb,var(--c,var(--ui-ink-3)) 16%,transparent);color:var(--c,var(--ui-ink-2));} /* Revision Buddy card (shared component — was referencing undefined classes, so it rendered unstyled/invisible). Tokenised, theme-aware, with a dark variant. */ .revision-buddy-card{background:var(--ui-tile);border:1px solid var(--ui-line);border-radius:var(--ui-r);padding:22px 24px;box-shadow:var(--ui-sh-sm);color:var(--ui-ink);animation:ui-fade-up .5s ease both;} .revision-buddy-card--dark{background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 60%,#1e3a8a 100%);border:1px solid rgba(255,255,255,0.08);color:#fff;} .revision-buddy-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;} .revision-buddy-card__header h2{color:var(--ui-ink);} .revision-buddy-card--dark .revision-buddy-card__header h2{color:#fff;} .revision-buddy-steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;} .revision-buddy-step{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--ui-ink-2);} .revision-buddy-card--dark .revision-buddy-step{color:rgba(255,255,255,0.82);} .revision-buddy-step__index{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--ui-blue) 22%,transparent);color:var(--ui-blue);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;} .revision-buddy-card--dark .revision-buddy-step__index{background:rgba(255,255,255,0.18);color:#fff;} .revision-buddy-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;} .revision-buddy-chip{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--ui-ink) 8%,transparent);color:var(--ui-ink-3);} .revision-buddy-card--dark .revision-buddy-chip{background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.85);} .revision-buddy-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;} .revision-buddy-action{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:12px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;text-decoration:none;background:var(--ui-inset);color:var(--ui-ink-2);transition:filter .12s;} .revision-buddy-action:hover{filter:brightness(1.08);} .revision-buddy-action--primary{background:linear-gradient(135deg,var(--ui-blue),var(--ui-blue-l));color:#fff;} .revision-buddy-card--dark .revision-buddy-action{background:rgba(255,255,255,0.14);color:#fff;} .revision-buddy-card--dark .revision-buddy-action--primary{background:#fff;color:#0f172a;} /* Filter buttons (bookmarks, games, flashcards, etc.) */ .ui-fbtn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:12px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;background:var(--ui-inset);color:var(--ui-ink-2);border:none;cursor:pointer;transition:.15s;} .ui-fbtn:hover{background:color-mix(in srgb,var(--ui-ink) 10%,transparent);} .ui-fbtn.on{background:linear-gradient(135deg,var(--ui-blue),var(--ui-blue-l));color:#fff;box-shadow:var(--ui-glow-blue);} /* ---------- Animations ---------- */ @keyframes ui-fade-up{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}} @keyframes ui-fade-down{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}} /* ---------- Responsive ---------- */ @media(max-width:1080px){ .ui-c7,.ui-c5,.ui-c4{grid-column:span 12;} .ui-nav{display:none;} .ui-subrow{grid-template-columns:repeat(2,1fr);} } @media(max-width:560px){ .ui-subrow{grid-template-columns:1fr;} .ui-wrap{padding:16px 16px 60px;} } /* ---------- Reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ .ui-scope *{animation:none!important;transition:none!important;} }