/* أستاذ — هوية مساحة المعلم. Loaded after the functional base styles. */
:root {
  --green: #315bea;
  --green-dark: #2445c1;
  --ink: #172343;
  --muted: #65708a;
  --line: #e6e8f0;
  --bg: #f5f6fa;
  --mint: #edf1ff;
  --radius: 24px;
  --sidebar: 264px;
  --shadow: 0 8px 32px #1c2d5b05;
  --navy: #14213f;
  --peach: #ffb99f;
  --lilac: #dfdafa;
  --focus: #315bea;
}

body { font-size: 16px; line-height: 1.75; }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.5px; }
p { color: var(--muted); }
::selection { background: #dce4ff; color: #14213f; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.btn { min-height: 46px; padding: 10px 22px; border-radius: 15px; font-size: 14px; box-shadow: 0 6px 16px #315bea19; transition: background .18s, box-shadow .18s, transform .18s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 9px 20px #315bea28; }
.btn.secondary { color: var(--ink); border-color: #dfe3ef; box-shadow: none; }
.btn.secondary:hover { background: #f1f4ff; border-color: #a8b9fa; }
.btn.soft { background: #ecf0ff; color: #315bea; box-shadow: none; }
.btn.danger { box-shadow: none; }
.btn.sm { min-height: 36px; padding: 7px 13px; font-size: 12px; border-radius: 11px; }
.icon-button { border-radius: 12px; width: 38px; height: 38px; color: #65708a; }
.icon-button:hover { background: #edf1ff; color: var(--green); border-color: #c9d4fb; }
.text-button { color: var(--green); font-size: 13px; }
.eyebrow { color: #315bea; font-size: 12px; letter-spacing: 0; }
.badge { border-radius: 8px; padding: 4px 10px; color: #3154ba; background: #edf1ff; font-size: 11px; }
.badge.amber { color: #8d551d; background: #fff0dc; }
.badge.blue { color: #2357b9; background: #e9f1ff; }
.badge.purple { color: #6648ad; background: #f0eafb; }
.badge.red { color: #b34145; background: #ffeded; }
.icon-tile { border-radius: 15px; }
.icon-tile.teal { background: #e8f0ff; color: #315bea; }
.icon-tile.blue { background: #e5f3fa; color: #1677a1; }
.icon-tile.purple { background: #ede8fb; color: #7952be; }
.icon-tile.orange { background: #fff0e7; color: #b45f2e; }
.icon-tile.pink { background: #fce9ed; color: #bb4a71; }
.icon-tile.olive { background: #edf2e5; color: #5b792b; }
.panel { padding: 26px; border-color: #e6e8f0; box-shadow: var(--shadow); }
.page-heading { margin-bottom: 28px; align-items: center; }
.page-heading h1 { font-size: 29px; letter-spacing: -.6px; }
.page-heading p { color: #65708a; font-size: 14px; line-height: 1.9; }
.empty { padding: 38px 18px; }
.empty h3 { color: var(--ink); }
.empty p { color: #65708a; }
.note { background: #f0f3fc; border-color: #e0e6fa; color: #526384; border-radius: 16px; }
.note.warning { background: #fff5e7; color: #8d5a27; border-color: #f5e5ca; }
input, select, textarea { border-color: #dde2ee; border-radius: 13px; min-height: 46px; background: #fcfcfe; }
input:focus, select:focus, textarea:focus { border-color: #7b98f1; box-shadow: 0 0 0 4px #315bea0c; }
input::placeholder, textarea::placeholder { color: #81899e; }
.field > span, .field > label { color: #4d5975; font-size: 13px; }
input[type=checkbox] { min-height: 17px; }
thead th { color: #65708a; background: #f5f6fb; font-size: 12px; font-weight: 600; padding: 15px 17px; }
td { border-color: #edf0f7; padding: 17px; }
tbody tr:hover { background: #f9faff; }
.table-wrap { border-radius: 16px; }
dialog { border-radius: 26px; border-color: #e0e5f2; box-shadow: 0 25px 100px #17234335; }
dialog::backdrop { background: #101a3b6b; backdrop-filter: blur(5px); }
#toast { background: #172343; border-radius: 16px; box-shadow: 0 12px 35px #17234326; }

/* Public pages */
body:has(.site-nav) { background: #fbfaf7; }
.site-nav { position: relative; z-index: 10; max-width: 1300px; width: calc(100% - 64px); height: 82px; margin: 22px auto 0; padding: 0 25px; gap: 24px; border: 1px solid #e8e7e2; border-radius: 24px; background: #ffffffed; box-shadow: 0 8px 35px #17234304; }
.brand { gap: 11px; }
.brand img { width: 44px; height: 44px; }
.brand strong, .site-nav .brand strong { font-size: 25px; letter-spacing: -1px; color: #172343; }
.brand small { color: #687590; font-size: 10px; letter-spacing: 0; }
.site-nav nav { gap: 27px; color: #57627a; font-size: 14px; }
.site-nav nav a { position: relative; padding: 8px 0; }
.site-nav nav a:hover { color: #315bea; }
.site-nav .row { gap: 18px; }
.site-nav .btn { min-height: 44px; padding: 9px 19px; }
.site-menu-toggle { display: none; }
.site-nav .mobile-auth-link { display: none; }
.landing-hero { max-width: 1320px; margin: 26px auto 30px; padding: 58px 48px 45px; grid-template-columns: 1.05fr 1fr; gap: 36px; min-height: 610px; isolation: isolate; }
.landing-hero::before { width: 52%; height: 97%; left: 16px; top: 1%; opacity: 1; border-radius: 100px 60px 160px 65px; background: #eeedf7; filter: none; z-index: -1; transform: rotate(-3deg); }
.landing-hero::after { content: ''; position: absolute; left: 28%; top: 22px; width: 120px; height: 120px; border: 1px solid #d9d8ea; border-radius: 50%; z-index: -1; }
.landing-copy { position: relative; z-index: 2; padding-bottom: 12px; }
.pill { color: #435073; background: #fff; border-color: #e2e5ed; padding: 7px 13px; font-size: 12px; gap: 9px; }
.live-dot { width: 7px; height: 7px; background: #315bea; border-radius: 50%; box-shadow: 0 0 0 4px #edf1ff; }
.landing-hero h1 { font-size: clamp(43px, 4.7vw, 66px); line-height: 1.5; letter-spacing: -2px; margin: 23px 0 19px; color: #14213f; }
.landing-hero h1 span { color: #315bea; white-space: nowrap; }
.landing-hero h1 span::after { content: ''; position: absolute; height: 10px; bottom: -1px; right: 0; left: 0; border-top: 3px solid #f4b69c; border-radius: 50%; transform: rotate(-3deg); }
.landing-hero p { font-size: 16px; line-height: 2.05; color: #67728a; max-width: 480px; }
.landing-actions { gap: 12px; margin-top: 29px; flex-wrap: wrap; }
.landing-actions .btn { padding: 13px 23px; font-size: 14px; border-radius: 16px; min-height: 51px; }
.hero-footnote { color: #68728a; font-size: 11px; gap: 15px; margin-top: 25px; flex-wrap: wrap; }
.hero-footnote svg { color: #315bea; }
.landing-visual { min-height: 440px; display: block; width: 100%; }
.studio-preview { position: relative; width: 100%; min-height: 440px; padding: 35px 15px 35px 13px; isolation: isolate; }
.preview-orbit { position: absolute; border: 1px solid #d4d2e7; z-index: -1; pointer-events: none; }
.orbit-one { inset: 0 7% 0 3%; border-radius: 50%; }
.orbit-two { inset: 30px 16% 15px 16%; border-radius: 45%; transform: rotate(8deg); }
.preview-window { position: relative; background: #fff; border: 1px solid #e0e3ee; border-radius: 22px; box-shadow: -12px 26px 65px #353d6b19; transform: rotate(-5deg); overflow: hidden; }
.preview-window-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 16px 18px; border-bottom: 1px solid #edf0f7; }
.preview-wordmark { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; color: #172343; }
.preview-wordmark svg { color: #315bea; width: 19px; }
.preview-caption { font-size: 9px; color: #687590; }
.window-dots { display: flex; gap: 4px; direction: ltr; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #dfe4f2; }
.window-dots i:first-child { background: #ffb99f; }
.preview-window-body { display: grid; grid-template-columns: 47px minmax(0, 1fr); min-height: 280px; }
.preview-rail { background: #182647; display: flex; flex-direction: column; align-items: center; gap: 21px; padding: 24px 0; color: #b5bfd6; }
.preview-rail span:first-child { color: #fff; background: #315bea; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; }
.preview-rail svg { width: 16px; height: 16px; }
.preview-canvas { background: #f7f8fc; padding: 22px 20px 19px; }
.preview-greeting { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #687590; }
.preview-greeting svg { color: #bc7548; width: 17px; }
.preview-canvas h3 { font-size: 23px; line-height: 1.5; margin: 11px 0 16px; }
.preview-lesson { background: #fff; border: 1px solid #e4e8f3; padding: 15px; border-radius: 15px; }
.preview-subject { color: #315bea; font-size: 10px; }
.preview-lesson .between svg { width: 14px; color: #697ba7; }
.preview-lesson h4 { margin: 8px 0 14px; font-size: 17px; }
.preview-progress { display: flex; gap: 5px; }
.preview-progress span { height: 5px; background: #e8edf9; border-radius: 10px; flex: 1; }
.preview-progress span:first-child { background: #315bea; flex: 2; }
.preview-progress span:nth-child(2) { background: #b6c5fa; }
.preview-lesson-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.preview-lesson-bottom > span:first-child { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #687590; }
.preview-lesson-bottom svg { width: 13px; color: #315bea; }
.preview-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ffe8da; color: #9b5531; font-size: 11px; }
.preview-mini-grid { display: flex; gap: 7px; margin-top: 12px; }
.preview-mini-grid > span { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; font-size: 9px; border: 1px solid #e4e8f3; background: white; padding: 8px 3px; border-radius: 9px; color: #5d6c8b; }
.preview-mini-grid svg { width: 12px; height: 12px; color: #6c5ab9; }
.preview-sticker { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 14px 17px; border-radius: 17px; border: 1px solid #e6e7ef; background: white; box-shadow: 0 14px 35px #25345b12; }
.preview-sticker > span { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; background: #edf1ff; color: #315bea; }
.preview-sticker strong { display: block; color: #172343; font-size: 12px; }
.preview-sticker small { color: #687590; font-size: 10px; }
.sticker-export { bottom: 14px; right: -15px; transform: rotate(3deg); }
.sticker-spark { top: 7px; left: -14px; transform: rotate(6deg); }
.sticker-spark > span { background: #fff0e7; color: #b26c41; }
.preview-star { position: absolute; color: #315bea; font-size: 44px; line-height: 1; }
.star-one { bottom: 12px; left: 12px; transform: rotate(13deg); }
.star-two { top: 0; right: 22px; color: #e2a27f; font-size: 30px; }
.capability-ribbon { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 25px 43px; max-width: 1220px; margin: 30px auto 70px; padding: 26px 20px; border-top: 1px solid #e7e6e1; border-bottom: 1px solid #e7e6e1; color: #53617d; font-size: 14px; }
.capability-ribbon > span { display: flex; align-items: center; gap: 9px; }
.capability-ribbon > span:first-child { color: #7c8495; font-size: 12px; }
.capability-ribbon svg { color: #315bea; width: 19px; }
.landing-section { max-width: 1240px; margin: 90px auto; padding: 0 30px; }
.section-intro { max-width: 680px; margin-bottom: 39px; }
.section-intro h2 { color: #172343; font-size: 35px; line-height: 1.5; letter-spacing: -1px; margin: 11px 0 14px; }
.section-intro p { color: #68728a; font-size: 15px; line-height: 1.9; }
.mobile-break { display: none; }
.landing-tools { gap: 20px; }
.tool-card { border-radius: 22px; border-color: #e5e8f1; box-shadow: 0 4px 20px #17234303; padding: 23px; min-height: 177px; overflow: hidden; }
.tool-card::before { content: ''; position: absolute; left: -30px; top: -50px; width: 110px; height: 110px; border: 1px solid #edf0f8; border-radius: 40px; transform: rotate(32deg); pointer-events: none; }
.tool-card:hover { border-color: #a6b8f6; box-shadow: 0 12px 28px #263e7f0d; transform: translateY(-4px); }
.tool-card h3 { color: #172343; font-size: 16px; margin: 15px 0 7px; }
.tool-card p { color: #69758b; font-size: 12px; line-height: 1.85; }
.tool-card .icon-tile { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 12px; }
.tool-card .arrow { color: #667699; width: 17px; top: 24px; left: 22px; }
.landing-tools .tool-card { padding: 28px; min-height: 215px; border-radius: 25px; }
.landing-tools .tool-card h3 { font-size: 19px; margin-top: 18px; }
.landing-tools .tool-card p { font-size: 14px; padding-left: 14px; }
.outcomes-section { position: relative; }
.teacher-outcomes { gap: 20px; }
.teacher-outcome { border: 0; border-radius: 28px; padding: 32px; background: #eef1fc; }
.teacher-outcome:nth-child(2) { background: #fbede5; border-radius: 28px 65px 28px 28px; }
.teacher-outcome:nth-child(3) { background: #eeebf8; }
.teacher-outcome .icon-tile { background: #ffffffb3; }
.teacher-outcome h3 { font-size: 26px; margin: 28px 0 12px; }
.teacher-outcome p { color: #586581; font-size: 14px; min-height: 80px; }
.teacher-outcome .text-button { color: #253d78; margin-top: 18px; }
.outcome-number { color: #8a96b4; font-size: 13px; font-family: 'Segoe UI', sans-serif; letter-spacing: 2px; }
.steps { gap: 38px; position: relative; }
.steps::before { content: ''; position: absolute; top: 28px; left: 16%; right: 16%; border-top: 1px dashed #ccd3e7; z-index: -1; }
.step-number { width: 58px; height: 58px; border: 7px solid #fbfaf7; border-radius: 50%; background: #e7edff; color: #315bea; font-size: 21px; box-sizing: content-box; margin-bottom: 18px; }
.steps h3 { font-size: 20px; }
.steps p { font-size: 14px; color: #68728a; max-width: 295px; margin: auto; }
.price-card { border-radius: 27px; padding: 32px; background: #fff; }
.price-card.featured { border: 2px solid #315bea; box-shadow: 0 18px 45px #315bea10; }
.price-card.featured::before { content: ''; position: absolute; top: -2px; right: 35%; left: 35%; height: 5px; border-radius: 0 0 10px 10px; background: #315bea; }
.price-card h3 { color: #172343; font-size: 23px; }
.price-card .badge { font-size: 9px; top: 30px; left: 20px; }
.price-card p { color: #68728a; font-size: 13px; }
.price-number { color: #172343; font-size: 46px; margin: 23px 0 27px; }
.price-number small { color: #68728a; }
.price-card li { color: #586581; font-size: 13px; margin-bottom: 17px; }
.price-card li svg { color: #315bea; }
.faq-list { max-width: 850px; }
.faq-list details { border-radius: 18px; padding: 20px 25px; border-color: #e5e7ee; margin-bottom: 13px; }
.faq-list details[open] { border-color: #bac8f4; background: #f9faff; }
.faq-list summary { color: #263658; font-size: 16px; }
.faq-list p { color: #63708b; font-size: 14px; line-height: 2; }
.cta-section { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px 90px 32px 32px; background: #172647; color: white; padding: 57px 50px; text-align: right; }
.cta-section::before { content: ''; width: 300px; height: 300px; position: absolute; left: -40px; top: -90px; border: 1px solid #ffffff18; border-radius: 50%; z-index: -1; }
.cta-section::after { content: ''; width: 250px; height: 250px; position: absolute; left: 80px; bottom: -155px; border: 1px solid #ffffff21; border-radius: 50%; z-index: -1; }
.cta-section .eyebrow { color: #bdcaff; }
.cta-section h2 { color: white; font-size: 43px; line-height: 1.45; margin: 17px 0; }
.cta-section p { color: #c2cce0; font-size: 15px; margin-bottom: 23px; }
.cta-section .btn { background: #ffb99f; color: #172343; box-shadow: none; }
.cta-section .btn:hover { background: #ffcbb8; }
.cta-flower { position: absolute; left: 10%; top: 15%; color: #b6b6ec; font-size: 190px; line-height: 1; transform: rotate(15deg); z-index: -1; }
.site-footer { max-width: 1240px; color: #6b758b; font-size: 12px; padding: 35px 30px; border-color: #e4e5eb; }
.site-footer a:hover { color: #315bea; }

/* Authentication */
.auth-page { max-width: 1220px; padding: 50px 35px 65px; gap: 65px; }
.auth-form { padding: 38px; border-radius: 28px; box-shadow: 0 20px 60px #17234306; border-color: #e2e6f0; }
.auth-form h1 { font-size: 31px; color: #172343; margin: 14px 0 10px; }
.auth-form > p { color: #68728a; font-size: 14px; }
.auth-form .field { margin-bottom: 21px; }
.auth-form button[type=submit] { margin-top: 8px; min-height: 49px; }
.auth-visual { padding: 30px; border-radius: 40px 90px 40px 40px; background: #eeedf7; }
.auth-visual .studio-preview { min-height: 360px; padding-top: 22px; }
.auth-visual h2 { font-size: 26px; color: #172343; margin-top: 28px; }
.auth-visual p { color: #66718b; font-size: 14px; }
.auth-visual .preview-sticker { padding: 10px 12px; }
.auth-visual .sticker-export { right: -18px; bottom: 0; }
.auth-visual .sticker-spark { left: -12px; top: -3px; }
.register-page { grid-template-columns: 1.25fr .85fr; gap: 40px; }
.register-page .auth-visual { padding-top: 30px; margin-top: 30px; position: sticky; top: 25px; }

/* The workspace */
.sidebar { top: 15px; bottom: 15px; right: 15px; width: calc(var(--sidebar) - 15px); padding: 25px 16px 17px; border: 0; border-radius: 26px; background: #172442; box-shadow: 0 12px 35px #17234312; color: #fff; }
.sidebar .brand { padding: 0 9px 26px; }
.sidebar .brand strong { color: white; font-size: 27px; }
.sidebar .brand small { color: #aebbd6; font-size: 10px; }
.sidebar .brand img { width: 41px; height: 41px; }
.sidebar-scroll { scrollbar-color: #4f6186 transparent; }
.nav-group { margin-bottom: 20px; }
.nav-label { color: #a6b4d1; font-size: 10px; padding: 0 14px; margin-bottom: 9px; }
.nav-link { color: #c2cce1; padding: 10px 13px; border-radius: 13px; font-size: 13px; gap: 11px; margin: 4px 0; }
.nav-link svg { color: #aabada; width: 18px; height: 18px; }
.nav-link:hover { color: white; background: #253657; }
.nav-link.active { background: #315bea; color: white; box-shadow: 0 6px 18px #071b5630; }
.nav-link.active svg { color: white; }
.nav-link.active::after { background: #c3d0ff; }
.nav-link .badge { background: #33496e; color: #dce6ff; }
.sidebar-upgrade { background: #28395a; border-color: #3b4c6b; border-radius: 19px; padding: 16px; }
.sidebar-upgrade .row { color: #fff; font-size: 12px; }
.sidebar-upgrade .row svg { color: #ffbd9e; }
.sidebar-upgrade p { color: #c1cce0; font-size: 11px; }
.sidebar-upgrade a { background: #f4b89f; color: #172343; border: 0; font-size: 11px; border-radius: 11px; box-shadow: none; }
.sidebar-upgrade a:hover { background: #ffccb6; }
.sidebar-footer { border-color: #364562; padding: 17px 4px 0; gap: 9px; }
.sidebar-footer strong { color: #fff; font-size: 12px; }
.sidebar-footer small { color: #b6c2dc; }
.sidebar-footer .icon-button { background: transparent; color: #c6d1e5; }
.avatar { background: #f4b89f; color: #483728; }
.workspace { margin-right: calc(var(--sidebar) + 13px); }
.topbar { height: 91px; background: transparent; border: 0; padding: 0 32px; gap: 20px; }
.breadcrumb { color: #737f99; font-size: 12px; }
.breadcrumb strong { color: #24365d; font-weight: 600; }
.topbar-search { width: 310px; height: 43px; border-radius: 14px; border-color: #e1e5f0; background: #fff; padding: 0 14px; }
.topbar-search input { font-size: 12px; color: #33476b; }
.topbar-search svg { color: #7485a4; }
.topbar-search kbd { border-color: #e0e5f2; color: #72809c; border-radius: 5px; }
.topbar-date { color: #667797; font-size: 12px; }
.topbar-actions > .icon-button { background: white; border: 1px solid #e1e5f0; border-radius: 13px; }
.notification-dot { background: #ed9b77; }
.content { padding: 12px 32px 24px; max-width: 1500px; }
.greeting { margin-bottom: 25px; }
.greeting h1 { font-size: 28px; color: #172343; margin-bottom: 6px; }
.greeting p { font-size: 13px; color: #687792; }
.greeting p span { color: #315bea; }
.greeting .school-tag { color: #5a6c8b; border-color: #e1e6f2; font-size: 12px; border-radius: 12px; background: white; }
.hero-workspace { border: 0; border-radius: 27px 65px 27px 27px; min-height: 236px; padding: 33px 34px; background: #e9edfc; margin-bottom: 25px; isolation: isolate; }
.hero-workspace::before { content: ''; position: absolute; width: 210px; height: 210px; border: 1px solid #c9d3f2; border-radius: 50%; left: 130px; top: -105px; z-index: -1; }
.hero-workspace::after { width: 315px; height: 315px; border: 1px solid #c9d3f2; left: -85px; top: -15px; }
.hero-copy { max-width: 65%; }
.hero-copy .eyebrow { background: #ffffffba; border-color: #d2ddfa; border-radius: 20px; padding: 4px 10px; color: #315bea; font-size: 10px; }
.hero-copy h2 { color: #172343; font-size: 29px; line-height: 1.45; }
.hero-copy p { color: #5f7095; font-size: 13px; line-height: 1.9; }
.hero-copy .btn { font-size: 12px; min-height: 39px; padding: 8px 15px; border-radius: 12px; }
.hero-copy .text-button { color: #315bea; font-size: 12px; }
.hero-art { width: 305px; height: 235px; left: 10px; bottom: -3px; pointer-events: none; }
.stat-grid { gap: 15px; margin-bottom: 29px; }
.stat-card { padding: 22px 19px; border-radius: 21px; min-width: 0; background: #fff; border-color: #e3e7f1; gap: 14px; min-height: 109px; }
.stat-card > .icon-tile { width: 44px; height: 44px; border-radius: 14px; }
.stat-label { color: #65748e; font-size: 12px; }
.stat-value { font-size: 29px; color: #1d3158; letter-spacing: -.5px; margin-top: 3px; font-weight: 700; }
.stat-detail { display: none; }
.dashboard-columns { grid-template-columns: minmax(0, 1fr) 280px; gap: 23px; }
.section-heading { margin-bottom: 19px; }
.section-heading h2 { font-size: 21px; color: #172343; }
.section-heading p { font-size: 12px; color: #687792; }
.section-heading > .text-button { font-size: 12px; }
.tools-grid { gap: 14px; }
.dashboard-aside .panel { padding: 22px; border-radius: 23px; }
.schedule-panel h3, .usage-panel h3 { font-size: 16px; color: #22365b; }
.schedule-date { font-size: 11px; color: #687792; line-height: 1.7; }
.schedule-item { border-color: #d9e1f4; padding-right: 18px; }
.schedule-item::before { background: #a9b9e0; }
.schedule-item:first-child::before { background: #315bea; }
.schedule-item > .between { color: #687792; font-size: 11px; }
.schedule-item h4 { font-size: 14px; color: #263b62; }
.schedule-item p { color: #687792; font-size: 11px; }
.schedule-item .text-button, .schedule-panel > .text-button { font-size: 11px; color: #315bea; }
.schedule-panel .empty { padding: 20px 0 10px; }
.schedule-panel .empty h3 { font-size: 14px; }
.schedule-panel .empty p { font-size: 12px; }
.usage-panel p { color: #687792; font-size: 12px; margin-top: 10px; }
.usage-count { color: #687792; font-size: 11px; gap: 7px; }
.usage-count strong { color: #315bea; }
.progress { background: #e9edf7; height: 7px; border-radius: 10px; }
.progress > span { background: #315bea; }
.usage-panel .text-button { font-size: 11px; }
.tip-card { border-color: #f0e2d4; background: #fbf0e7; border-radius: 22px; padding: 22px; }
.tip-card .row { color: #945b35; font-size: 13px; }
.tip-card p { color: #8c6d58; font-size: 12px; }
.recent-panel { padding: 0; border-radius: 23px; }
.recent-panel > .panel-header { padding: 22px; }
.recent-panel h3 { font-size: 17px; }
.recent-panel .text-button { font-size: 12px; }
.recent-panel table { font-size: 12px; }
.recent-panel thead th { font-size: 11px; padding: 13px 16px; }
.recent-panel td { padding: 16px; }
.recent-panel .doc-title { font-size: 12px; }
.workspace-bottom { color: #6f7d96; font-size: 10px; padding-top: 28px; }
.paper { border-radius: 23px; border-color: #e0e6f2; box-shadow: 0 10px 30px #17234304; }
.editor-placeholder h3 { color: #4d6595; }
.editor-placeholder p { color: #687792; }
.bar { height: 11px; border-radius: 10px; background: #edf0f8; }
.bar > span { background: #6b89ec; border-radius: 10px; }
.derive-bar { background: #edf1ff; border-color: #d8e2fe; border-radius: 20px; }
.derive-bar h4, .derive-bar a { color: #315bea; }
.dropzone { background: #f5f7ff; border-color: #b9c8ef; border-radius: 21px; }
.dropzone svg { color: #315bea; }
.game-area, .game-area:fullscreen { background: #edf0fd; }
.message.user { background: #e9efff; }
.message.assistant { background: #f3f4fa; }
.chat-history button { background: #f1f4fc; border-radius: 13px; color: #4b618b; }

/* Tool discovery */
.tools-discovery { background: white; border: 1px solid #e3e7f2; border-radius: 23px; padding: 22px; margin-bottom: 25px; }
.discovery-search { display: flex; align-items: center; gap: 11px; border: 1px solid #dfe5f4; border-radius: 14px; background: #f7f9fe; padding: 0 15px; }
.discovery-search svg { color: #667da9; }
.discovery-search input { border: 0; box-shadow: none; background: transparent; padding: 13px 0; min-width: 0; }
.tool-categories { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 17px; }
.category-chip { padding: 8px 17px; border: 1px solid #e2e7f4; border-radius: 30px; color: #586c92; background: #fff; font-size: 12px; }
.category-chip:hover { background: #f1f4ff; }
.category-chip[aria-pressed=true] { background: #315bea; border-color: #315bea; color: white; }
.discovery-count { font-size: 12px; color: #65758f; margin: 16px 0 0; }
.tool-search-empty { grid-column: 1 / -1; background: white; border: 1px dashed #d7deef; border-radius: 23px; }

/* Noor roster review */
dialog:has(.student-import) { width: min(1080px, calc(100% - 32px)); max-width: 1080px; }
.import-intro { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.import-intro p { font-size: 13px; margin: 6px 0 0; }
.import-dropzone { padding: 23px; }
.import-dropzone input { max-width: 430px; margin: 12px auto; background: white; }
.import-dropzone small { color: #687792; display: block; font-size: 11px; }
#import-progress { font-size: 13px; color: #315bea; margin: 15px 0; }
.import-settings, .import-review { padding: 23px; background: #fafbfe; border: 1px solid #e3e8f3; border-radius: 22px; margin-top: 20px; }
.import-settings .panel-header { flex-wrap: wrap; gap: 12px; }
.import-settings .form-grid { margin: 18px 0; }
.import-mapping { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.import-settings .check-row { align-items: flex-start; }
.import-class-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.import-class-option { display: flex; align-items: flex-start; gap: 9px; background: white; border: 1px solid #e0e6f2; padding: 13px; border-radius: 15px; cursor: pointer; }
.import-class-option.selected { border-color: #aabcf5; background: #f0f4ff; }
.import-class-option input { margin-top: 3px; accent-color: #315bea; }
.import-class-option strong { display: block; font-size: 12px; color: #243659; }
.import-class-option small { display: block; color: #687792; font-size: 11px; margin-top: 4px; }
.import-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin: 22px 0; }
.import-summary > div { background: white; border: 1px solid #e4e8f2; padding: 15px 9px; border-radius: 15px; text-align: center; }
.import-summary strong { display: block; font-size: 24px; color: #315bea; }
.import-summary span { display: block; font-size: 11px; color: #65748e; }
.import-problems ul, .import-warnings ul { padding-right: 20px; font-size: 12px; }
.import-warnings { padding: 14px 18px; border: 1px solid #e2e7f2; border-radius: 14px; margin-bottom: 18px; background: white; font-size: 13px; }
.import-filters { gap: 15px; align-items: flex-end; margin: 20px 0 12px; }
.import-filters .field { flex: 1; min-width: 170px; }
#import-rows { background: white; border: 1px solid #e4e8f2; border-radius: 17px; overflow: hidden; }
#import-rows table { font-size: 12px; min-width: 660px; }
#import-rows td small { display: block; margin-top: 4px; font-size: 10px; }
.import-pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px; gap: 10px; font-size: 11px; color: #65758f; }
.import-confirm { margin-top: 22px; border-top: 1px solid #e0e6f2; padding-top: 20px; }
.import-confirm p { font-size: 12px; }
.import-confirm .check-row { margin: 18px 0; }
[hidden] { display: none !important; }
.teaching-picker{gap:14px}
.teaching-picker>p{margin:0}
.teaching-subject-picker{gap:12px}
.subject-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:330px;overflow:auto;padding:3px}
.subject-choice{display:flex;gap:8px;align-items:center;margin:0;padding:10px;border:1px solid #e1e7f3;border-radius:12px;background:#fff;font-size:13px}
.subject-choice input{accent-color:#3557ed;flex:0 0 auto}
.subject-choice[hidden]{display:none}
.subject-choice:has(input:checked){border-color:#3557ed;background:#f0f3ff;color:#243d96}
@media(max-width:600px){.subject-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
.curriculum-selector{display:grid;gap:18px}
.curriculum-books{display:grid;gap:12px;margin-top:18px}
.curriculum-book{border:1px solid #e1e7f3;padding:16px;border-radius:16px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;background:#fff}
.curriculum-book small,.plan-lesson-list small{display:block;color:#8190ad}
.curriculum-book>div:first-child{min-width:0;flex:1}.curriculum-book strong{overflow-wrap:anywhere}
.curriculum-resources{margin-top:16px}.curriculum-resources summary{cursor:pointer;font-weight:700;margin-bottom:12px}
.curriculum-extract{margin:18px 0;border-top:1px solid #e1e7f3;padding-top:16px}
.curriculum-extract summary{cursor:pointer;margin-bottom:15px;font-weight:700}
.plan-lesson-list{max-height:350px;overflow:auto;display:grid;gap:10px;padding:14px;border:1px solid #e1e7f3;border-radius:14px;margin:14px 0}
.plan-lesson-list>label{margin:0;align-items:start}
.teaching-plan-card{margin-bottom:20px}
.teaching-plan-editor .table-wrap{max-height:450px;overflow:auto}
.teaching-plan-editor #plan-preview{margin:20px 0}
dialog:has(.teaching-plan-editor){width:min(1000px,calc(100% - 24px));max-width:1000px}
dialog:has(.curriculum-selector){width:min(1000px,calc(100% - 24px));max-width:1000px}
.teaching-stage{min-width:0;margin:0;padding:18px;border:1px solid var(--line,#dfe5f4);border-radius:18px;background:#fbfcff;transition:border-color .2s,background .2s}
.teaching-stage legend{padding:0 8px;font-weight:800;color:#17264b}
.teaching-stage.has-selection{border-color:#9caeff;background:#f5f7ff}
.teaching-stage .stage-toggle{margin-bottom:12px;font-weight:600}
.teaching-grade-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.teaching-grade-options .grade-choice{display:flex;gap:8px;align-items:center;margin:0;padding:10px;border:1px solid #e5eaf5;border-radius:12px;background:#fff;font-size:13px}
.teaching-grade-options input{accent-color:#3557ed;flex:0 0 auto}
@media(max-width:600px){.teaching-grade-options{grid-template-columns:repeat(2,minmax(0,1fr))}.teaching-stage{padding:14px}.teaching-grade-options .grade-choice{padding:9px;font-size:12px}}
@media (max-width:760px) {
  dialog:has(.student-import) { width: calc(100% - 18px); border-radius: 21px; }
  .import-intro { gap: 10px; }
  .import-intro strong { font-size: 14px; }
  .import-intro p { font-size: 12px; }
  .import-dropzone, .import-settings, .import-review { padding: 16px; }
  .import-dropzone strong { font-size: 13px; }
  .import-dropzone input { width: 100%; font-size: 11px; }
  .import-mapping { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .import-class-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .import-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .import-summary > div:last-child { grid-column: 1 / -1; }
  .import-pagination span { text-align: center; font-size: 10px; }
  .import-confirm .check-row { font-size: 12px; align-items: flex-start; }
}
@media (max-width:420px) { .import-mapping, .import-class-grid { grid-template-columns: minmax(0,1fr); } }

/* Administration */
.admin-hero { background: #172647; border-radius: 28px 70px 28px 28px; padding: 35px; isolation: isolate; }
.admin-hero::after { content: ''; position: absolute; width: 340px; height: 340px; border: 1px solid #ffffff15; border-radius: 50%; left: -80px; top: -95px; z-index: -1; }
.admin-hero h1 { color: #fff; font-size: 29px; }
.admin-hero .eyebrow { color: #c7d3ff; }
.admin-hero p { color: #c1cce1; font-size: 14px; }
.admin-hero .btn { background: #ffb99f; color: #172343; box-shadow: none; }
.admin-hero .btn.secondary { color: #fff; border-color: #6b7c9e; background: transparent; }
.admin-hero .btn.secondary:hover { background: #2a3c60; }
.admin-hero-icon { border-color: #617198; background: #25395a; border-radius: 28px; }
.admin-hero-icon svg { color: #c7c7fa; }
.admin-stats .stat-card { padding: 23px 19px; }
.admin-stats .stat-value { color: #1d3158; font-size: 28px; }
.admin-signal { border-radius: 20px; border-color: #e0e6f2; padding: 21px 18px; }
.admin-signal strong { color: #24395f; font-size: 13px; }
.admin-signal small { color: #687792; }
.admin-signal > svg { color: #315bea; }
.admin-signal:hover { border-color: #9bb0ef; }
.trend-column > span { background: #6b89ec; border-radius: 6px 6px 0 0; }
.status-dot { background: #315bea; }
.status-dot.disabled { background: #c18d71; }

@media (min-width: 1600px) {
  .content { padding-right: 45px; padding-left: 45px; }
  .hero-art { width: 360px; left: 38px; }
  .dashboard-columns { grid-template-columns: minmax(0, 1fr) 315px; }
}
@media (max-width: 1200px) {
  :root { --sidebar: 244px; }
  .topbar { padding: 0 25px; }
  .content { padding: 12px 25px 22px; }
  .landing-hero { padding: 45px 35px; gap: 25px; min-height: 550px; }
  .landing-hero h1 { font-size: 51px; }
  .landing-actions .btn { padding: 12px 17px; font-size: 13px; }
  .site-nav nav { gap: 19px; font-size: 13px; }
  .site-nav .row { gap: 12px; }
  .site-nav .btn { font-size: 12px; }
  .hero-copy h2 { font-size: 25px; }
  .hero-art { width: 260px; left: -12px; }
  .tool-card { padding: 19px 16px; }
  .tool-card h3 { font-size: 14px; }
  .dashboard-columns { grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; }
  .stat-card { padding: 18px 13px; gap: 9px; }
  .stat-card > .icon-tile { width: 38px; height: 38px; }
  .stat-label { font-size: 11px; }
}
@media (max-width: 1000px) {
  .site-nav { width: calc(100% - 40px); padding: 0 20px; }
  .site-nav nav { gap: 15px; font-size: 12px; }
  .site-nav .row > .text-button { display: none; }
  .landing-hero { gap: 18px; padding: 35px 29px; min-height: 530px; }
  .landing-hero h1 { font-size: 44px; }
  .landing-hero p { font-size: 14px; }
  .landing-actions { gap: 9px; }
  .landing-actions .btn { padding: 11px 14px; font-size: 12px; }
  .hero-footnote { font-size: 10px; gap: 10px; }
  .studio-preview { padding: 35px 12px; }
  .preview-canvas { padding: 19px 15px; }
  .preview-canvas h3 { font-size: 21px; }
  .preview-sticker { padding: 10px 12px; }
  .preview-sticker strong { font-size: 10px; }
  .preview-sticker small { font-size: 9px; }
  .preview-sticker > span { width: 31px; height: 31px; }
  .sticker-export { right: -4px; bottom: 25px; }
  .sticker-spark { left: -3px; }
  .dashboard-columns { grid-template-columns: minmax(0, 1fr); }
  .dashboard-aside { display: grid; grid-template-columns: 1.2fr 1fr; align-items: start; }
  .hero-copy { max-width: 68%; }
  .hero-art { width: 230px; left: -20px; }
  .auth-page { gap: 30px; padding: 40px 25px; }
  .auth-visual { padding: 20px; }
  .auth-visual .preview-caption { display: none; }
  .auth-form { padding: 28px; }
  .auth-form h1 { font-size: 27px; }
  .teacher-outcome { padding: 25px; }
  .teacher-outcome h3 { font-size: 23px; }
  .teacher-outcome p { font-size: 13px; }
  .price-card { padding: 27px; }
}
@media (max-width: 760px) {
  :root { --sidebar: 268px; }
  body { font-size: 15px; }
  .site-nav { width: calc(100% - 28px); height: 74px; margin-top: 14px; padding: 0 15px; gap: 12px; border-radius: 20px; }
  .site-nav .brand img { width: 36px; height: 36px; }
  .site-nav .brand strong { font-size: 23px; }
  .site-nav .brand small { font-size: 8px; }
  .site-nav .brand { gap: 8px; }
  .site-nav .row { gap: 9px; }
  .site-nav .btn { font-size: 11px; padding: 8px 12px; min-height: 38px; border-radius: 12px; }
  .site-menu-toggle { display: inline-flex; width: 34px; height: 34px; border-radius: 11px; }
  .site-nav nav { display: none; }
  .site-nav nav.show { position: absolute; top: 82px; right: 0; left: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: white; border: 1px solid #e0e5f2; padding: 12px; border-radius: 20px; box-shadow: 0 16px 30px #17234314; font-size: 14px; }
  .site-nav nav.show a { padding: 11px 13px; border-radius: 12px; }
  .site-nav nav.show a:hover { background: #f0f3fe; }
  .site-nav nav.show .mobile-auth-link { display: block; color: #315bea; border-top: 1px solid #e6eaf5; border-radius: 0 0 12px 12px; margin-top: 5px; }
  .landing-hero { grid-template-columns: minmax(0, 1fr); margin: 20px auto 0; padding: 30px 26px 18px; gap: 0; text-align: center; min-height: auto; overflow: clip; }
  .landing-hero::before { width: calc(100% - 40px); height: 340px; top: auto; bottom: 28px; left: 20px; border-radius: 65px 45px 100px 45px; }
  .landing-hero::after { top: auto; bottom: 285px; left: 30px; width: 70px; height: 70px; }
  .landing-copy { padding-bottom: 13px; }
  .pill { font-size: 11px; padding: 6px 12px; }
  .landing-hero h1 { font-size: 47px; line-height: 1.45; margin-top: 23px; letter-spacing: -1.3px; }
  .landing-hero p { font-size: 14px; line-height: 1.95; max-width: 390px; }
  .landing-actions { justify-content: center; gap: 10px; margin-top: 24px; }
  .landing-actions .btn { font-size: 12px; padding: 11px 17px; min-height: 45px; }
  .hero-footnote { justify-content: center; font-size: 10px; gap: 10px; margin-top: 21px; }
  .landing-visual { min-height: 380px; max-width: 440px; margin: 13px auto 0; }
  .studio-preview { min-height: 370px; padding: 28px 20px 35px; text-align: right; }
  .preview-window-body { grid-template-columns: 40px minmax(0, 1fr); min-height: 250px; }
  .preview-window-top { padding: 13px 14px; }
  .preview-canvas { padding: 17px 14px; }
  .preview-canvas h3 { font-size: 22px; }
  .preview-lesson { padding: 12px; }
  .preview-lesson h4 { font-size: 16px; margin-bottom: 12px; }
  .preview-caption { font-size: 8px; }
  .preview-sticker { padding: 11px 12px; border-radius: 14px; }
  .preview-sticker strong { font-size: 10px; }
  .sticker-export { bottom: 5px; right: 0; }
  .sticker-spark { top: 3px; left: -1px; }
  .star-one { font-size: 34px; bottom: 8px; left: 15px; }
  .star-two { font-size: 25px; top: 2px; right: 15px; }
  .capability-ribbon { margin: 10px 22px 60px; gap: 17px 25px; padding: 23px 8px; font-size: 12px; }
  .capability-ribbon > span:first-child { flex-basis: 100%; justify-content: center; font-size: 11px; }
  .capability-ribbon svg { width: 16px; }
  .landing-section { margin: 65px auto; padding: 0 22px; }
  .section-intro { margin-bottom: 29px; }
  .section-intro h2 { font-size: 29px; }
  .section-intro p { font-size: 13px; max-width: 380px; margin: auto; }
  .landing-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .landing-tools .tool-card { border-radius: 22px; padding: 22px 18px; min-height: 195px; }
  .landing-tools .tool-card h3 { font-size: 16px; }
  .landing-tools .tool-card p { font-size: 12px; padding-left: 0; }
  .teacher-outcomes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .teacher-outcome { padding: 28px; border-radius: 25px; }
  .teacher-outcome h3 { font-size: 26px; margin-top: 22px; }
  .teacher-outcome p { min-height: 0; font-size: 14px; }
  .teacher-outcome .text-button { margin-top: 10px; }
  .steps { gap: 28px; }
  .steps::before { display: none; }
  .steps p { font-size: 13px; }
  .step-number { margin-bottom: 12px; }
  .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; gap: 20px; }
  .price-card { padding: 30px; border-radius: 25px; }
  .faq-list details { padding: 18px 20px; }
  .faq-list summary { font-size: 14px; }
  .faq-list p { font-size: 13px; }
  .cta-section { border-radius: 26px 60px 26px 26px; padding: 38px 27px; }
  .cta-section h2 { font-size: 34px; }
  .cta-section p { font-size: 13px; max-width: 250px; }
  .cta-flower { font-size: 110px; left: -8px; top: 20%; opacity: .25; }
  .site-footer { flex-direction: column; padding: 25px 22px; margin-top: 45px; font-size: 11px; gap: 16px; }
  .site-footer .row { gap: 13px; }
  .auth-page { grid-template-columns: minmax(0, 1fr); padding: 30px 20px 45px; max-width: 600px; }
  .auth-visual { display: none; }
  .auth-form { border-radius: 25px; padding: 28px 25px; }
  .auth-form h1 { font-size: 28px; }
  .sidebar { top: 10px; bottom: 10px; right: 10px; width: 258px; border-radius: 24px; transform: translateX(calc(100% + 14px)); }
  .sidebar.open { transform: translateX(0); }
  .mobile-backdrop.open { backdrop-filter: blur(3px); background: #101a3b60; }
  .workspace { margin-right: 0; }
  .topbar { height: 76px; padding: 0 18px; gap: 11px; }
  .topbar-search { width: auto; height: 42px; max-width: none; flex: 1; border-radius: 13px; }
  .topbar-search input { font-size: 11px; }
  .mobile-menu { background: #fff; border: 1px solid #e0e5f2; width: 38px; height: 40px; border-radius: 12px; }
  .topbar-actions { gap: 5px; }
  .content { padding: 13px 18px 22px; }
  .greeting { margin-bottom: 22px; }
  .greeting h1 { font-size: 24px; }
  .greeting p { font-size: 12px; }
  .hero-workspace { min-height: 227px; padding: 27px 23px; border-radius: 24px 48px 24px 24px; }
  .hero-copy { max-width: 75%; }
  .hero-copy h2 { font-size: 24px; }
  .hero-copy p { font-size: 12px; max-width: 290px; }
  .hero-copy .btn { font-size: 11px; padding: 8px 12px; }
  .hero-art { width: 200px; height: 200px; left: -45px; bottom: -9px; opacity: .75; }
  .stat-grid, .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat-card { padding: 17px 13px; min-height: 105px; border-radius: 19px; gap: 10px; }
  .stat-label { font-size: 11px; line-height: 1.6; }
  .stat-value { font-size: 27px; }
  .stat-card > .icon-tile { width: 37px; height: 37px; border-radius: 12px; }
  .stat-card > .icon-tile svg { width: 19px; }
  .section-heading h2 { font-size: 19px; }
  .section-heading p { font-size: 11px; }
  .section-heading > .text-button { font-size: 11px; }
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tool-card { padding: 19px 16px; min-height: 168px; border-radius: 20px; }
  .tool-card h3 { font-size: 14px; }
  .tool-card p { font-size: 11px; line-height: 1.8; padding-left: 0; }
  .tool-card .icon-tile { width: 38px; height: 38px; border-radius: 12px; }
  .tool-card .arrow { top: 21px; left: 14px; width: 14px; }
  .dashboard-aside { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .usage-panel { margin-top: 0; }
  .dashboard-aside .panel { padding: 23px; }
  .page-heading { align-items: flex-start; gap: 12px; }
  .page-heading h1 { font-size: 25px; }
  .page-heading p { font-size: 13px; }
  .page-heading > .btn { padding: 8px 12px; font-size: 11px; }
  .panel { padding: 22px; border-radius: 22px; }
  .recent-panel { padding: 0; }
  .editor-layout { grid-template-columns: minmax(0, 1fr); }
  .analysis-grid { grid-template-columns: minmax(0, 1fr); }
  .workspace-bottom { font-size: 8px; padding-top: 25px; gap: 12px; }
  .tools-discovery { padding: 18px; border-radius: 21px; }
  .category-chip { padding: 7px 12px; font-size: 11px; }
  .tool-categories { gap: 7px; }
  .admin-hero { padding: 28px 23px; border-radius: 24px 48px 24px 24px; }
  .admin-hero h1 { font-size: 25px; }
  .admin-hero p { font-size: 13px; }
  .admin-hero .btn { padding: 9px 12px; font-size: 11px; }
  .admin-stats .stat-card { padding: 18px 13px; }
  .admin-stats .stat-value { font-size: 24px; }
  .admin-stats .stat-label { font-size: 11px; }
  .admin-signal { border-radius: 18px; }
}
@media (max-width: 420px) {
  .landing-hero { padding-right: 21px; padding-left: 21px; }
  .landing-hero h1 { font-size: 40px; }
  .landing-hero p { font-size: 13px; }
  .landing-actions .btn { font-size: 11px; padding: 11px 14px; }
  .hero-footnote { font-size: 9px; gap: 8px; }
  .studio-preview { padding-right: 11px; padding-left: 11px; }
  .preview-window-body { grid-template-columns: 34px minmax(0, 1fr); }
  .preview-canvas { padding-right: 12px; padding-left: 12px; }
  .preview-greeting { font-size: 9px; }
  .preview-canvas h3 { font-size: 20px; }
  .preview-lesson h4 { font-size: 15px; }
  .preview-mini-grid > span { font-size: 8px; }
  .landing-tools { grid-template-columns: minmax(0, 1fr); }
  .landing-tools .tool-card { min-height: 166px; padding: 23px; }
  .landing-tools .tool-card h3 { margin-top: 13px; }
  .section-intro h2 { font-size: 27px; }
  .hero-copy { max-width: 90%; }
  .hero-art { width: 170px; opacity: .3; left: -55px; }
  .hero-copy h2 { font-size: 23px; }
  .hero-copy p { max-width: 260px; }
  .hero-copy .eyebrow { font-size: 9px; }
  .stat-card { gap: 9px; padding: 16px 11px; }
  .stat-label { font-size: 10px; }
  .stat-card > .icon-tile { width: 34px; height: 34px; flex-shrink: 0; }
  .stat-value { font-size: 26px; }
  .form-grid, .generator-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-stats .stat-card { padding: 16px 11px; }
}
@media (prefers-reduced-motion: no-preference) {
  .landing-copy, .landing-visual { animation: welcome-in .65s both; }
  .landing-visual { animation-delay: .1s; }
  .content > .greeting, .content > .page-heading, .content > .admin-hero { animation: welcome-in .35s both; }
  @keyframes welcome-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}
@media print {
  body { background: white; }
  .preview-orbit, .preview-sticker { display: none; }
}
.brand .release-badge { color: #f5d64a; font: 700 12px/1.4 system-ui, sans-serif; background: #182747; border-radius: 6px; padding: 3px 6px; margin-inline-start: auto; }