:root {
  --ink: #253128;
  --ink-soft: #5f6d63;
  --ink-faint: #8b978e;
  --paper: #f5f4ee;
  --paper-deep: #eeede5;
  --surface: rgba(255, 255, 252, 0.78);
  --surface-solid: #fffefa;
  --surface-soft: #f0f1e9;
  --line: rgba(42, 58, 47, 0.12);
  --line-strong: rgba(42, 58, 47, 0.2);
  --moss: #496b55;
  --moss-deep: #2f5340;
  --moss-pale: #dbe5da;
  --ochre: #b78750;
  --ochre-pale: #f1e4d2;
  --berry: #9a5e65;
  --berry-pale: #f1dfe0;
  --sky: #69808b;
  --sky-pale: #dce6e8;
  --shadow-soft: 0 18px 50px rgba(47, 63, 51, 0.08);
  --shadow-float: 0 24px 70px rgba(38, 51, 41, 0.16);
  --sidebar: 236px;
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 13px;
  --sans: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Noto Serif SC", "Songti SC", serif;
  --ambient-primary: rgba(184, 203, 183, 0.34);
  --ambient-secondary: rgba(224, 208, 179, 0.22);
  --sidebar-bg: rgba(247, 247, 242, 0.86);
  --topbar-bg: rgba(245, 244, 238, .76);
}

:root[data-theme="sky"] {
  --ink:#21313a; --ink-soft:#5b6d77; --ink-faint:#87959d; --paper:#f3f6f7; --paper-deep:#e9eff1;
  --surface:rgba(252,254,255,.8); --surface-solid:#fbfdfe; --surface-soft:#eaf1f4; --line:rgba(36,69,83,.12); --line-strong:rgba(36,69,83,.2);
  --moss:#527d90; --moss-deep:#345f72; --moss-pale:#d9e8ee; --ochre:#9a7a55; --ochre-pale:#eee3d4; --berry:#8b6579; --berry-pale:#eedfe7; --sky:#527d90; --sky-pale:#d9e8ee;
  --ambient-primary:rgba(166,203,218,.38); --ambient-secondary:rgba(196,214,224,.25); --sidebar-bg:rgba(244,248,249,.88); --topbar-bg:rgba(241,246,248,.8);
}

:root[data-theme="sunrise"] {
  --ink:#382d26; --ink-soft:#78685d; --ink-faint:#9d8f85; --paper:#f8f4ed; --paper-deep:#f0e9df;
  --surface:rgba(255,253,248,.82); --surface-solid:#fffdf8; --surface-soft:#f4eadf; --line:rgba(83,56,37,.12); --line-strong:rgba(83,56,37,.2);
  --moss:#9b694c; --moss-deep:#744833; --moss-pale:#ead9cc; --ochre:#bd7b3d; --ochre-pale:#f4dfc7; --berry:#a65e59; --berry-pale:#f1dedb; --sky:#6e8184; --sky-pale:#dfe7e7;
  --ambient-primary:rgba(229,188,148,.34); --ambient-secondary:rgba(242,211,165,.28); --sidebar-bg:rgba(250,246,239,.88); --topbar-bg:rgba(248,244,237,.8);
}

:root[data-theme="plum"] {
  --ink:#312a35; --ink-soft:#6d6371; --ink-faint:#958b98; --paper:#f6f3f6; --paper-deep:#ece7ed;
  --surface:rgba(255,252,255,.8); --surface-solid:#fffafe; --surface-soft:#f0e8f0; --line:rgba(67,45,72,.12); --line-strong:rgba(67,45,72,.2);
  --moss:#785f7d; --moss-deep:#56415c; --moss-pale:#e5d8e6; --ochre:#a27c58; --ochre-pale:#f0e2d4; --berry:#9a5d78; --berry-pale:#efdae4; --sky:#657c8b; --sky-pale:#dce6eb;
  --ambient-primary:rgba(201,177,205,.36); --ambient-secondary:rgba(224,194,207,.23); --sidebar-bg:rgba(248,244,248,.88); --topbar-bg:rgba(246,242,246,.8);
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  min-width: 1180px;
  color: var(--ink);
  background:
    radial-gradient(circle at 84% 9%, var(--ambient-primary), transparent 24rem),
    radial-gradient(circle at 12% 88%, var(--ambient-secondary), transparent 26rem),
    var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(73, 107, 85, 0.2);
  outline-offset: 2px;
}

svg { width: 17px; height: 17px; stroke-width: 1.8; }

.app-shell { min-height: 100vh; }
.mobile-topbar-brand,.mobile-nav-close,.mobile-nav-backdrop { display:none; }

.sidebar {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding: 24px 16px 18px;
  background: var(--sidebar-bg);
  backdrop-filter: blur(24px);
  border-right: 1px solid var(--line);
  transition: transform .28s ease, opacity .2s ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  background: transparent;
  padding: 3px 5px 18px;
  cursor: pointer;
  text-align: left;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  color: #f6f5ed;
  background: var(--moss-deep);
  border-radius: 12px 12px 12px 4px;
  font-family: var(--serif);
  font-size: 18px;
}

.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { font-family: var(--serif); font-size: 17px; letter-spacing: .08em; }
.brand-copy small { margin-top: 2px; color: var(--ink-faint); font-size: 10px; letter-spacing: .12em; }

.role-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(45, 63, 50, 0.06);
  border-radius: 14px;
  margin-bottom: 20px;
}

.role-option {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.role-option.is-active {
  color: var(--moss-deep);
  background: var(--surface-solid);
  box-shadow: 0 4px 15px rgba(42, 58, 47, .07);
}

.primary-nav { display: grid; gap: 5px; }
.nav-caption { padding: 4px 12px 6px; color: var(--ink-faint); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 43px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav-item:hover { color: var(--ink); background: rgba(255,255,252,.55); }
.nav-item.is-active { color: var(--moss-deep); background: var(--moss-pale); font-weight: 600; }
.nav-item.is-active::before { content:""; position:absolute; left:-16px; width:3px; height:22px; border-radius:0 4px 4px 0; background:var(--moss); }
.nav-item .nav-count { margin-left:auto; min-width:21px; height:20px; padding:0 6px; display:grid; place-items:center; border-radius:20px; background:rgba(73,107,85,.1); font-size:11px; }

.sidebar-foot { margin-top: auto; display: grid; gap: 6px; }
.quiet-button, .profile-button, .icon-button, .focus-state { border:0; background:transparent; cursor:pointer; }
.sidebar-utility { display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:0 11px; color:var(--ink-soft); border-radius:11px; text-align:left; }
.sidebar-utility:hover { background:rgba(255,255,252,.65); color:var(--ink); }
.sidebar-utility b, .sidebar-utility kbd { margin-left:auto; font-size:10px; font-weight:500; color:var(--ink-faint); }
.sidebar-utility b { display:grid; place-items:center; min-width:20px; height:20px; border-radius:20px; background:var(--ochre-pale); color:#79562f; }
.sidebar-utility kbd { border:1px solid var(--line); border-radius:5px; padding:2px 5px; background:var(--surface); }

.profile-button { display:grid; grid-template-columns:34px 1fr 16px; align-items:center; gap:9px; width:100%; margin-top:8px; padding:10px 9px; border-top:1px solid var(--line); text-align:left; }
.profile-button .avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--moss-deep); color:#fff; font-family:var(--serif); }
.profile-button strong,.profile-button small { display:block; }
.profile-button strong { font-size:12px; }
.profile-button small { margin-top:2px; color:var(--ink-faint); font-size:10px; }
.profile-button svg { color:var(--ink-faint); width:14px; }

.main-shell { margin-left: var(--sidebar); min-height:100vh; transition:margin-left .28s ease; }
.is-focus .sidebar { transform:translateX(-100%); opacity:0; pointer-events:none; }
.is-focus .main-shell { margin-left:0; }
.topbar { position:sticky; top:0; z-index:15; display:flex; justify-content:space-between; align-items:center; height:68px; padding:0 34px; background:var(--topbar-bg); backdrop-filter:blur(22px); border-bottom:1px solid var(--line); }
.context-path { display:flex; align-items:center; gap:8px; color:var(--ink-faint); font-size:12px; }
.context-path strong { color:var(--ink); font-weight:500; }
.topbar-actions { display:flex; align-items:center; gap:6px; }
.theme-control { position:relative; margin-right:5px; }
.theme-button { display:flex; align-items:center; gap:7px; height:36px; padding:0 10px; border:1px solid var(--line); border-radius:11px; color:var(--ink-soft); background:rgba(255,255,252,.55); cursor:pointer; }
.theme-button:hover,.theme-button[aria-expanded="true"] { color:var(--ink); border-color:var(--line-strong); background:var(--surface-solid); }
.theme-button svg { width:13px; transition:transform .18s ease; }
.theme-button[aria-expanded="true"] svg { transform:rotate(180deg); }
.theme-swatch { width:13px; height:13px; border-radius:50%; background:var(--moss); box-shadow:inset 0 0 0 3px rgba(255,255,255,.48); }
.theme-menu { position:absolute; z-index:50; top:44px; right:0; width:292px; padding:9px; border:1px solid var(--line); border-radius:16px; background:var(--surface-solid); box-shadow:var(--shadow-float); transform:translateY(-5px) scale(.98); transform-origin:top right; opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease; }
.theme-menu.is-open { transform:none; opacity:1; pointer-events:auto; }
.theme-menu-head { padding:8px 9px 10px; }
.theme-menu-head strong,.theme-menu-head span { display:block; }
.theme-menu-head strong { font-size:12px; }
.theme-menu-head span { margin-top:3px; color:var(--ink-faint); font-size:10px; }
.theme-option { display:grid; grid-template-columns:50px 1fr 16px; align-items:center; gap:10px; width:100%; padding:9px; border:0; border-radius:11px; background:transparent; text-align:left; cursor:pointer; }
.theme-option:hover,.theme-option.is-active { background:var(--surface-soft); }
.theme-option > span:nth-child(2) strong,.theme-option > span:nth-child(2) small { display:block; }
.theme-option > span:nth-child(2) strong { font-size:11px; }
.theme-option > span:nth-child(2) small { margin-top:2px; color:var(--ink-faint); font-size:9px; }
.theme-option > svg { width:14px; color:var(--moss); opacity:0; }
.theme-option.is-active > svg { opacity:1; }
.theme-preview { display:flex; align-items:end; gap:3px; width:50px; height:34px; padding:6px; border:1px solid rgba(0,0,0,.05); border-radius:9px; }
.theme-preview i { display:block; width:9px; border-radius:5px; }
.theme-preview i:nth-child(1){height:12px}.theme-preview i:nth-child(2){height:21px}.theme-preview i:nth-child(3){height:16px}
.theme-preview.moss{background:#edf1ea}.theme-preview.moss i{background:#496b55}.theme-preview.sky{background:#eaf2f5}.theme-preview.sky i{background:#527d90}.theme-preview.sunrise{background:#f6ece1}.theme-preview.sunrise i{background:#9b694c}.theme-preview.plum{background:#f0e8f0}.theme-preview.plum i{background:#785f7d}
.icon-button { position:relative; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; color:var(--ink-soft); }
.icon-button:hover { background:rgba(255,255,252,.75); color:var(--ink); }
.icon-button.has-dot::after { content:""; position:absolute; top:8px; right:8px; width:5px; height:5px; border-radius:50%; background:var(--berry); box-shadow:0 0 0 2px var(--paper); }
.focus-state { display:flex; align-items:center; gap:7px; margin-left:7px; padding:8px 11px; border:1px solid var(--line); border-radius:11px; color:var(--ink-soft); background:rgba(255,255,252,.55); }
.focus-state span { width:7px; height:7px; border-radius:50%; background:var(--moss); box-shadow:0 0 0 4px rgba(73,107,85,.1); }

.page-host { max-width: 1480px; margin:0 auto; padding:34px 40px 64px; }
.page-enter { animation: page-in .35s ease both; }
@keyframes page-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.eyebrow { color:var(--moss); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; }
.page-heading h1 { margin:5px 0 0; font-family:var(--serif); font-size:32px; line-height:1.28; font-weight:600; letter-spacing:.02em; }
.page-heading p { max-width:660px; margin:9px 0 0; color:var(--ink-soft); line-height:1.7; }
.heading-actions { display:flex; align-items:center; gap:9px; flex:0 0 auto; }

.primary-button, .secondary-button, .ghost-button, .text-button, .chip-button {
  border:0;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.primary-button, .secondary-button, .ghost-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 15px; border-radius:12px; }
.primary-button { color:#f9faf5; background:var(--moss-deep); box-shadow:0 8px 22px rgba(47,83,64,.18); }
.primary-button:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(47,83,64,.24); }
.secondary-button { color:var(--moss-deep); background:var(--moss-pale); }
.ghost-button { border:1px solid var(--line); background:rgba(255,255,252,.55); color:var(--ink-soft); }
.ghost-button:hover,.secondary-button:hover { transform:translateY(-1px); }
.text-button { display:inline-flex; align-items:center; gap:5px; padding:4px 0; color:var(--moss-deep); background:transparent; font-weight:600; }
.text-button svg { width:14px; }
.chip-button { display:inline-flex; align-items:center; gap:6px; min-height:29px; padding:0 10px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,252,.56); color:var(--ink-soft); font-size:12px; }
.chip-button.is-active { color:var(--moss-deep); background:var(--moss-pale); border-color:transparent; }

.surface { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); backdrop-filter:blur(16px); }
.surface-flat { background:rgba(255,255,252,.48); border:1px solid var(--line); border-radius:var(--radius-lg); }
.section-title { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; }
.section-title h2 { margin:0; font-family:var(--serif); font-size:18px; font-weight:600; }
.section-title p { margin:4px 0 0; color:var(--ink-faint); font-size:12px; }
.section-title .section-meta { color:var(--ink-faint); font-size:11px; }

.teacher-hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:18px; margin-bottom:26px; }
.next-class { position:relative; overflow:hidden; min-height:264px; padding:26px 28px; background:linear-gradient(135deg,#2e5140 0%,#496b55 58%,#71816c 100%); color:#f7f8f2; border-radius:var(--radius-xl); box-shadow:0 24px 50px rgba(48,74,57,.22); }
.next-class::after { content:""; position:absolute; width:240px; height:240px; right:-74px; top:-92px; border-radius:50%; border:1px solid rgba(255,255,255,.22); box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 72px rgba(255,255,255,.025); }
.next-class .eyebrow { color:rgba(255,255,255,.65); }
.next-class h2 { max-width:680px; margin:32px 0 8px; font-family:var(--serif); font-size:28px; font-weight:600; }
.next-class p { margin:0; color:rgba(255,255,255,.72); line-height:1.65; }
.class-meta { display:flex; gap:18px; margin-top:23px; color:rgba(255,255,255,.82); font-size:12px; }
.class-meta span { display:flex; align-items:center; gap:6px; }
.class-meta svg { width:14px; }
.hero-actions { display:flex; gap:9px; margin-top:25px; }
.hero-actions .primary-button { color:var(--moss-deep); background:#f4f5ed; box-shadow:none; }
.hero-actions .ghost-button { color:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); }

.daily-brief { padding:24px; }
.brief-head { display:flex; align-items:flex-start; gap:12px; }
.brief-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--ochre-pale); color:#7e5d34; }
.brief-head h3 { margin:0; font-family:var(--serif); font-size:17px; }
.brief-head p { margin:4px 0 0; color:var(--ink-faint); font-size:11px; }
.brief-copy { margin:24px 0 22px; color:var(--ink-soft); line-height:1.75; }
.brief-copy strong { color:var(--ink); font-weight:600; }
.brief-tags { display:flex; flex-wrap:wrap; gap:7px; }

.work-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:24px; }
.agenda-list { display:grid; gap:9px; }
.agenda-row { display:grid; grid-template-columns:64px 36px 1fr auto; align-items:center; gap:12px; min-height:68px; padding:9px 13px 9px 9px; border-radius:15px; transition:background .18s ease; }
.agenda-row:hover { background:rgba(255,255,252,.65); }
.agenda-time { color:var(--ink-faint); font-size:11px; text-align:right; }
.agenda-status { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--surface-soft); color:var(--ink-soft); }
.agenda-status.is-ready { color:var(--moss-deep); background:var(--moss-pale); }
.agenda-status.is-warn { color:#7d5b32; background:var(--ochre-pale); }
.agenda-main strong,.agenda-main span { display:block; }
.agenda-main strong { font-size:13px; }
.agenda-main span { margin-top:4px; color:var(--ink-faint); font-size:11px; }
.agenda-action { color:var(--ink-faint); font-size:11px; }

.focus-list { display:grid; gap:10px; }
.focus-card { display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:11px; padding:12px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,252,.45); cursor:pointer; }
.focus-card:hover { border-color:var(--line-strong); background:rgba(255,255,252,.78); }
.student-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:13px; background:var(--sky-pale); color:#506a76; font-family:var(--serif); }
.student-avatar.warm { background:var(--ochre-pale); color:#79582f; }
.student-avatar.berry { background:var(--berry-pale); color:#804c54; }
.focus-card strong,.focus-card span { display:block; }
.focus-card strong { font-size:12px; }
.focus-card span { margin-top:4px; color:var(--ink-faint); font-size:10px; line-height:1.45; }
.trend { display:flex; align-items:center; gap:4px; font-size:10px; color:var(--berry); }
.trend.is-up { color:var(--moss); }

.stats-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px; }
.stat-item { padding:17px 18px; border-left:1px solid var(--line); }
.stat-item:first-child { border-left:0; }
.stat-item strong { display:block; font-family:var(--serif); font-size:23px; font-weight:600; }
.stat-item span { display:block; margin-top:5px; color:var(--ink-faint); font-size:11px; }

.design-shell { display:grid; grid-template-columns:235px minmax(500px,1fr) 300px; gap:15px; align-items:start; }
.outline-panel,.ai-panel { position:sticky; top:88px; max-height:calc(100vh - 112px); overflow:auto; padding:18px; }
.outline-panel { box-shadow:none; }
.outline-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.outline-title strong { font-family:var(--serif); }
.outline-list { display:grid; gap:5px; }
.outline-item { width:100%; padding:9px 10px; border:0; border-radius:10px; background:transparent; color:var(--ink-soft); text-align:left; cursor:pointer; font-size:12px; }
.outline-item:hover,.outline-item.is-active { background:var(--moss-pale); color:var(--moss-deep); }
.outline-sub { padding-left:25px; color:var(--ink-faint); }

.canvas { padding:30px 34px 80px; min-height:calc(100vh - 150px); background:#fffefa; border:1px solid rgba(42,58,47,.1); border-radius:18px; box-shadow:var(--shadow-soft); }
.canvas-header { padding-bottom:22px; border-bottom:1px solid var(--line); }
.canvas-meta { display:flex; gap:8px; margin-bottom:14px; }
.canvas h1 { margin:0; font-family:var(--serif); font-size:28px; }
.canvas-header p { margin:8px 0 0; color:var(--ink-faint); }
.content-block { position:relative; margin-top:27px; padding-left:18px; border-left:2px solid transparent; }
.content-block:hover { border-left-color:var(--moss-pale); }
.content-block h3 { margin:0 0 10px; font-family:var(--serif); font-size:17px; }
.content-block p,.content-block li { color:#4c5a50; line-height:1.85; }
.content-block ul { padding-left:20px; }
.block-tools { position:absolute; right:0; top:-4px; display:flex; gap:5px; opacity:0; transition:opacity .18s ease; }
.content-block:hover .block-tools { opacity:1; }
.block-tools button { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:9px; background:#fffefa; color:var(--ink-faint); cursor:pointer; }
.activity-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:13px; }
.activity-step { padding:14px; border-radius:13px; background:var(--surface-soft); }
.activity-step small { color:var(--moss); font-weight:600; }
.activity-step strong { display:block; margin-top:8px; font-size:12px; }
.activity-step span { display:block; margin-top:5px; color:var(--ink-faint); font-size:10px; line-height:1.5; }

.ai-panel { box-shadow:none; }
.ai-panel-head { display:flex; gap:10px; align-items:center; padding-bottom:15px; border-bottom:1px solid var(--line); }
.ai-orb { position:relative; display:grid; place-items:center; width:34px; height:34px; border-radius:12px; color:var(--moss-deep); background:var(--moss-pale); }
.ai-orb::after { content:""; position:absolute; inset:-4px; border:1px solid rgba(73,107,85,.14); border-radius:15px; }
.ai-panel-head strong,.ai-panel-head span { display:block; }
.ai-panel-head strong { font-family:var(--serif); }
.ai-panel-head span { margin-top:3px; color:var(--ink-faint); font-size:10px; }
.context-note { margin:17px 0; padding:12px; border-radius:12px; background:var(--surface-soft); color:var(--ink-soft); font-size:11px; line-height:1.6; }
.suggestion { padding:15px 0; border-top:1px solid var(--line); }
.suggestion:first-of-type { border-top:0; }
.suggestion-tag { display:inline-flex; align-items:center; gap:5px; color:var(--moss); font-size:10px; font-weight:600; }
.suggestion h4 { margin:8px 0 5px; font-size:12px; }
.suggestion p { margin:0; color:var(--ink-soft); font-size:11px; line-height:1.65; }
.suggestion-actions { display:flex; gap:12px; margin-top:11px; }
.suggestion-actions button { padding:0; border:0; background:transparent; color:var(--moss-deep); cursor:pointer; font-size:11px; font-weight:600; }
.suggestion-actions button:last-child { color:var(--ink-faint); font-weight:400; }

.filter-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.filter-bar .spacer { flex:1; }
.search-field { display:flex; align-items:center; gap:8px; min-width:220px; padding:0 12px; height:38px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,252,.58); }
.search-field input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); }
.search-field input::placeholder { color:var(--ink-faint); }

.content-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.content-card { position:relative; overflow:hidden; min-height:190px; padding:20px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,252,.62); cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border .2s ease; }
.content-card:hover { transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow-soft); }
.content-card .card-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--moss-pale); color:var(--moss-deep); }
.content-card h3 { margin:20px 0 7px; font-family:var(--serif); font-size:17px; }
.content-card p { margin:0; color:var(--ink-faint); font-size:11px; line-height:1.6; }
.content-card .card-foot { position:absolute; left:20px; right:20px; bottom:18px; display:flex; justify-content:space-between; align-items:center; color:var(--ink-faint); font-size:10px; }
.status-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:14px; background:var(--moss-pale); color:var(--moss-deep); }
.status-pill.warn { background:var(--ochre-pale); color:#79562f; }
.status-pill.berry { background:var(--berry-pale); color:#7b4c52; }

.classroom-hero { display:grid; grid-template-columns:1fr 330px; gap:20px; }
.classroom-board { min-height:420px; padding:28px; background:linear-gradient(155deg,#2b4235,#374f40 60%,#455f4c); color:#fff; border-radius:24px; box-shadow:0 25px 55px rgba(45,66,53,.2); }
.classroom-board h2 { margin:24px 0 7px; font-family:var(--serif); font-size:26px; }
.classroom-board p { color:rgba(255,255,255,.68); }
.board-status { display:flex; align-items:center; gap:8px; font-size:11px; color:rgba(255,255,255,.72); }
.board-status span { width:7px; height:7px; border-radius:50%; background:#a9d49f; box-shadow:0 0 0 5px rgba(169,212,159,.1); }
.question-card { margin-top:30px; padding:22px; border:1px solid rgba(255,255,255,.13); border-radius:17px; background:rgba(255,255,255,.08); }
.question-card small { color:rgba(255,255,255,.55); }
.question-card strong { display:block; margin:10px 0 18px; font-family:var(--serif); font-size:18px; line-height:1.55; }
.answer-progress { height:6px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden; }
.answer-progress span { display:block; height:100%; width:72%; background:#bed7b7; border-radius:6px; }
.board-actions { display:flex; gap:8px; margin-top:21px; }
.board-actions button { border:0; border-radius:11px; padding:10px 13px; cursor:pointer; }
.board-actions .light { color:var(--moss-deep); background:#f5f4eb; }
.board-actions .dark { color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); }
.live-panel { padding:21px; }
.live-students { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:17px; }
.live-student { display:grid; place-items:center; aspect-ratio:1; border-radius:12px; background:var(--surface-soft); color:var(--ink-soft); font-family:var(--serif); font-size:12px; }
.live-student.done { color:var(--moss-deep); background:var(--moss-pale); }
.live-student.help { color:#7d5730; background:var(--ochre-pale); }
.live-summary { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.live-summary h4 { margin:0 0 7px; }
.live-summary p { margin:0; color:var(--ink-soft); font-size:11px; line-height:1.65; }

.feedback-layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; }
.assignment-list { padding:16px; }
.assignment-item { width:100%; padding:14px; border:0; border-radius:13px; background:transparent; text-align:left; cursor:pointer; }
.assignment-item:hover,.assignment-item.is-active { background:var(--moss-pale); }
.assignment-item strong,.assignment-item span { display:block; }
.assignment-item strong { font-size:12px; }
.assignment-item span { margin-top:5px; color:var(--ink-faint); font-size:10px; }
.feedback-main { padding:22px; }
.submission-row { display:grid; grid-template-columns:40px 1fr 90px 100px; align-items:center; gap:12px; padding:12px 5px; border-top:1px solid var(--line); }
.submission-row:first-of-type { border-top:0; }
.submission-row strong,.submission-row span { display:block; }
.submission-row strong { font-size:12px; }
.submission-row span { margin-top:3px; color:var(--ink-faint); font-size:10px; }
.score { font-family:var(--serif); font-size:19px; }

.student-page { display:grid; grid-template-columns:270px minmax(0,1fr); gap:18px; }
.student-roster { padding:15px; }
.roster-item { display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:10px; width:100%; padding:10px; border:0; border-radius:12px; background:transparent; text-align:left; cursor:pointer; }
.roster-item:hover,.roster-item.is-active { background:var(--moss-pale); }
.roster-item .student-avatar { width:34px; height:34px; border-radius:11px; font-size:12px; }
.roster-item strong,.roster-item span { display:block; }
.roster-item strong { font-size:11px; }
.roster-item span { margin-top:3px; color:var(--ink-faint); font-size:9px; }
.roster-item em { width:7px; height:7px; border-radius:50%; background:var(--moss); }
.roster-item em.warn { background:var(--ochre); }
.student-detail { padding:25px; }
.student-profile { display:flex; align-items:center; gap:15px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.student-profile .student-avatar { width:54px; height:54px; border-radius:18px; font-size:18px; }
.student-profile h2 { margin:0; font-family:var(--serif); font-size:22px; }
.student-profile p { margin:5px 0 0; color:var(--ink-faint); font-size:11px; }
.profile-tags { margin-left:auto; display:flex; gap:6px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0; }
.metric { padding:15px; border-radius:13px; background:var(--surface-soft); }
.metric strong { display:block; font-family:var(--serif); font-size:20px; }
.metric span { color:var(--ink-faint); font-size:10px; }
.trend-chart { position:relative; height:150px; margin-top:13px; border-bottom:1px solid var(--line); background:repeating-linear-gradient(to bottom,transparent 0,transparent 36px,rgba(42,58,47,.05) 37px); }
.trend-chart svg { width:100%; height:100%; overflow:visible; }
.trend-chart polyline { fill:none; stroke:var(--moss); stroke-width:2.4; vector-effect:non-scaling-stroke; }
.trend-chart circle { fill:#fffefa; stroke:var(--moss); stroke-width:2; }

.library-grid { display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; }
.resource-tree { padding:16px; }
.tree-item { display:flex; align-items:center; gap:8px; width:100%; padding:9px 10px; border:0; border-radius:10px; background:transparent; color:var(--ink-soft); text-align:left; cursor:pointer; }
.tree-item.is-active,.tree-item:hover { color:var(--moss-deep); background:var(--moss-pale); }
.resource-main { min-width:0; }
.resource-list { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.resource-item { min-width:0; padding:15px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,252,.6); cursor:pointer; }
.file-preview { display:grid; place-items:center; height:94px; margin-bottom:13px; border-radius:12px; background:var(--surface-soft); color:var(--moss); }
.file-preview svg { width:27px; height:27px; }
.resource-item strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.resource-item span { display:block; margin-top:5px; color:var(--ink-faint); font-size:9px; }

.leader-hero { display:grid; grid-template-columns:minmax(0,1.4fr) 320px; gap:18px; margin-bottom:23px; }
.signal-overview { padding:25px 27px; }
.signal-overview h2 { margin:7px 0 8px; font-family:var(--serif); font-size:25px; }
.signal-overview > p { color:var(--ink-soft); line-height:1.7; }
.signal-score { display:flex; gap:22px; margin-top:24px; }
.signal-score > div { padding-right:22px; border-right:1px solid var(--line); }
.signal-score > div:last-child { border-right:0; }
.signal-score strong,.signal-score span { display:block; }
.signal-score strong { font-family:var(--serif); font-size:22px; }
.signal-score span { margin-top:4px; color:var(--ink-faint); font-size:10px; }
.week-summary { padding:23px; background:linear-gradient(155deg,rgba(223,229,218,.8),rgba(255,255,252,.72)); }
.week-summary h3 { margin:12px 0 8px; font-family:var(--serif); font-size:17px; }
.week-summary p { color:var(--ink-soft); font-size:11px; line-height:1.7; }

.signal-list { display:grid; gap:10px; }
.signal-row { display:grid; grid-template-columns:42px 1fr 120px 30px; align-items:center; gap:13px; padding:14px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,252,.5); cursor:pointer; transition:background .18s ease, transform .18s ease; }
.signal-row:hover { transform:translateX(2px); background:rgba(255,255,252,.82); }
.signal-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#7c5831; background:var(--ochre-pale); }
.signal-icon.berry { color:#7c4e55; background:var(--berry-pale); }
.signal-icon.sky { color:#506973; background:var(--sky-pale); }
.signal-main strong,.signal-main span { display:block; }
.signal-main strong { font-size:12px; }
.signal-main span { margin-top:5px; color:var(--ink-faint); font-size:10px; }
.signal-evidence { color:var(--ink-soft); font-size:10px; text-align:right; }
.signal-row > svg { color:var(--ink-faint); width:14px; }

.action-list { display:grid; gap:9px; }
.action-row { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:11px; padding:11px 0; border-top:1px solid var(--line); }
.action-row:first-child { border-top:0; }
.action-progress { position:relative; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:conic-gradient(var(--moss) var(--progress),var(--paper-deep) 0); }
.action-progress::after { content:""; width:22px; height:22px; border-radius:50%; background:var(--surface-solid); }
.action-row strong,.action-row span { display:block; }
.action-row strong { font-size:11px; }
.action-row span { margin-top:4px; color:var(--ink-faint); font-size:9px; }
.action-owner { display:flex; align-items:center; gap:7px; color:var(--ink-faint); font-size:9px; }
.mini-avatar { display:grid; place-items:center; width:23px; height:23px; border-radius:8px; background:var(--sky-pale); color:#4f6973; }

.dashboard-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.dashboard-card { padding:20px; min-height:210px; }
.span-8 { grid-column:span 8; }
.span-7 { grid-column:span 7; }
.span-6 { grid-column:span 6; }
.span-5 { grid-column:span 5; }
.span-4 { grid-column:span 4; }
.dashboard-card h3 { margin:0; font-family:var(--serif); font-size:16px; }
.dashboard-card > p { margin:5px 0 0; color:var(--ink-faint); font-size:10px; }
.bar-chart { display:flex; align-items:flex-end; gap:13px; height:135px; margin-top:18px; padding-top:10px; border-bottom:1px solid var(--line); }
.bar-group { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; height:100%; position:relative; }
.bar { width:11px; border-radius:5px 5px 0 0; background:var(--moss-pale); }
.bar.is-main { background:var(--moss); }
.bar-group small { position:absolute; bottom:-19px; color:var(--ink-faint); font-size:8px; white-space:nowrap; }
.donut-wrap { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:22px; }
.donut { position:relative; width:108px; height:108px; border-radius:50%; background:conic-gradient(var(--moss) 0 64%,var(--ochre) 64% 81%,var(--berry) 81% 90%,var(--paper-deep) 90%); }
.donut::after { content:""; position:absolute; inset:18px; border-radius:50%; background:var(--surface-solid); }
.donut strong { position:absolute; z-index:1; inset:0; display:grid; place-items:center; font-family:var(--serif); font-size:19px; }
.chart-legend { display:grid; gap:8px; color:var(--ink-soft); font-size:10px; }
.chart-legend span { display:flex; align-items:center; gap:7px; }
.chart-legend i { width:7px; height:7px; border-radius:2px; background:var(--moss); }
.chart-legend span:nth-child(2) i { background:var(--ochre); }
.chart-legend span:nth-child(3) i { background:var(--berry); }

.quality-table { width:100%; margin-top:16px; border-collapse:collapse; }
.quality-table th,.quality-table td { padding:11px 8px; border-top:1px solid var(--line); text-align:left; font-size:10px; }
.quality-table th { color:var(--ink-faint); font-weight:500; }
.quality-table td strong { font-size:11px; }
.quality-table .delta-down { color:var(--berry); }
.quality-table .delta-up { color:var(--moss); }

.drawer-layer,.modal-layer,.command-layer { position:fixed; z-index:40; inset:0; pointer-events:none; opacity:0; transition:opacity .2s ease; }
.drawer-layer.is-open,.modal-layer.is-open,.command-layer.is-open { pointer-events:auto; opacity:1; }
.drawer-layer::before,.modal-layer::before,.command-layer::before { content:""; position:absolute; inset:0; background:rgba(27,36,30,.28); backdrop-filter:blur(3px); }
.drawer { position:absolute; right:0; top:0; bottom:0; width:480px; padding:26px; background:#fbfaf4; box-shadow:-20px 0 60px rgba(32,45,36,.18); overflow:auto; transform:translateX(100%); transition:transform .26s ease; }
.drawer-layer.is-open .drawer { transform:none; }
.drawer-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid var(--line); }
.drawer-head h2 { margin:5px 0 0; font-family:var(--serif); font-size:22px; }
.drawer-head p { margin:7px 0 0; color:var(--ink-faint); font-size:11px; line-height:1.6; }
.drawer-close { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:11px; background:transparent; cursor:pointer; }
.evidence-block { margin-top:23px; }
.evidence-block h3 { margin:0 0 12px; font-family:var(--serif); font-size:16px; }
.evidence-item { display:grid; grid-template-columns:95px 1fr; gap:11px; padding:11px 0; border-top:1px solid var(--line); }
.evidence-item span { color:var(--ink-faint); font-size:10px; }
.evidence-item strong { font-size:11px; font-weight:500; }
.explanation { padding:15px; border-radius:14px; background:var(--surface-soft); color:var(--ink-soft); font-size:11px; line-height:1.7; }
.drawer-actions { display:flex; gap:9px; margin-top:25px; }

.modal { position:absolute; top:50%; left:50%; width:540px; max-height:80vh; overflow:auto; transform:translate(-50%,-46%) scale(.98); padding:25px; border-radius:22px; background:#fbfaf4; box-shadow:var(--shadow-float); transition:transform .22s ease; }
.modal-layer.is-open .modal,.command-layer.is-open .command-palette { transform:translate(-50%,-50%) scale(1); }
.modal-head { display:flex; justify-content:space-between; gap:15px; margin-bottom:20px; }
.modal-head h2 { margin:0; font-family:var(--serif); font-size:21px; }
.modal-head p { margin:6px 0 0; color:var(--ink-faint); font-size:11px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field { display:grid; gap:6px; }
.form-field.is-wide { grid-column:1/-1; }
.form-field label { color:var(--ink-soft); font-size:11px; }
.form-field input,.form-field textarea,.form-field select { width:100%; border:1px solid var(--line); border-radius:11px; background:#fffefa; color:var(--ink); padding:10px 11px; outline:0; }
.form-field textarea { min-height:84px; resize:vertical; }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }

.command-palette { position:absolute; top:42%; left:50%; width:650px; transform:translate(-50%,-46%) scale(.98); border-radius:20px; overflow:hidden; background:#fbfaf4; box-shadow:var(--shadow-float); transition:transform .22s ease; }
.command-input { display:flex; align-items:center; gap:10px; padding:17px 19px; border-bottom:1px solid var(--line); }
.command-input input { width:100%; border:0; outline:0; background:transparent; font-size:15px; }
.command-input kbd { color:var(--ink-faint); font-size:10px; }
.command-results { padding:10px; }
.command-section { padding:7px 10px; color:var(--ink-faint); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.command-item { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; width:100%; padding:10px; border:0; border-radius:11px; background:transparent; text-align:left; cursor:pointer; }
.command-item:hover { background:var(--moss-pale); }
.command-item .command-icon { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; background:var(--surface-soft); color:var(--moss); }
.command-item strong,.command-item span { display:block; }
.command-item strong { font-size:11px; }
.command-item span { margin-top:3px; color:var(--ink-faint); font-size:9px; }
.command-item kbd { color:var(--ink-faint); font-size:9px; }

.task-panel { display:grid; gap:10px; margin-top:20px; }
.task-item { padding:14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,252,.5); }
.task-row { display:flex; justify-content:space-between; gap:10px; }
.task-row strong { font-size:11px; }
.task-row span { color:var(--ink-faint); font-size:9px; }
.task-progress { height:5px; margin-top:11px; border-radius:5px; background:var(--paper-deep); overflow:hidden; }
.task-progress span { display:block; height:100%; border-radius:5px; background:var(--moss); }

.toast-region { position:fixed; z-index:60; right:25px; bottom:25px; display:grid; gap:8px; }
.toast { display:flex; align-items:center; gap:10px; min-width:260px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:#fbfaf4; box-shadow:var(--shadow-float); animation:toast-in .25s ease both; }
.toast svg { color:var(--moss); }
.toast strong,.toast span { display:block; }
.toast strong { font-size:11px; }
.toast span { margin-top:2px; color:var(--ink-faint); font-size:9px; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

[data-tooltip] { position:relative; }
[data-tooltip]::after { content:attr(data-tooltip); position:absolute; z-index:70; top:calc(100% + 7px); left:50%; transform:translateX(-50%); padding:6px 8px; border-radius:7px; color:#fff; background:#28352c; font-size:9px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s ease; }
[data-tooltip]:hover::after { opacity:1; }

.correction-workbench { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; }
.essay-paper { padding:32px 42px; min-height:680px; background:#fffefa; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-soft); }
.essay-paper h2 { margin:0 0 8px; text-align:center; font-family:var(--serif); font-size:23px; }
.essay-paper .essay-meta { text-align:center; color:var(--ink-faint); font-size:10px; }
.essay-body { margin-top:28px; font-family:var(--serif); font-size:15px; line-height:2.2; text-indent:2em; }
.marked-text { position:relative; text-decoration:underline wavy var(--ochre); text-decoration-thickness:1.3px; text-underline-offset:4px; cursor:pointer; }
.marked-text.berry { text-decoration-color:var(--berry); }
.marked-text:hover::after { content:attr(data-note); position:absolute; z-index:4; left:0; bottom:calc(100% + 7px); width:210px; padding:10px; border-radius:10px; background:#29372d; color:#fff; font-family:var(--sans); font-size:10px; line-height:1.5; text-indent:0; box-shadow:var(--shadow-float); }
.rubric-panel { padding:19px; }
.rubric-score { display:flex; align-items:end; gap:7px; margin:18px 0; }
.rubric-score strong { font-family:var(--serif); font-size:40px; }
.rubric-score span { padding-bottom:6px; color:var(--ink-faint); }
.rubric-item { padding:11px 0; border-top:1px solid var(--line); }
.rubric-item-head { display:flex; justify-content:space-between; font-size:11px; }
.rubric-bar { height:4px; margin-top:8px; border-radius:4px; background:var(--paper-deep); overflow:hidden; }
.rubric-bar span { display:block; height:100%; border-radius:4px; background:var(--moss); }
.teacher-comment { margin-top:16px; padding:13px; border-radius:13px; background:var(--moss-pale); color:var(--moss-deep); font-size:11px; line-height:1.65; }

@media (max-width: 1280px) {
  :root { --sidebar: 218px; }
  .page-host { padding-left:28px; padding-right:28px; }
  .design-shell { grid-template-columns:205px minmax(500px,1fr) 270px; }
  .content-grid { grid-template-columns:repeat(2,1fr); }
  .resource-list { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 760px) {
  :root { --sidebar:286px; --radius-xl:22px; }
  html,body { overflow-x:hidden; }
  body { min-width:0; max-width:100vw; }
  body.mobile-nav-open { overflow:hidden; }
  .app-shell,.main-shell,.topbar,.page-host { max-width:100vw; }

  .sidebar { z-index:45; width:min(86vw,310px); padding:20px 16px; transform:translateX(-104%); opacity:0; box-shadow:24px 0 70px rgba(30,42,34,.2); }
  .mobile-nav-open .sidebar { transform:none; opacity:1; }
  .mobile-nav-close { position:absolute; top:18px; right:15px; z-index:2; place-items:center; width:36px; height:36px; border:0; border-radius:11px; background:var(--surface-soft); color:var(--ink-soft); }
  .mobile-nav-open .mobile-nav-close { display:grid; }
  .sidebar .brand { padding-right:42px; }
  .sidebar-foot { margin-top:30px; }
  .mobile-nav-backdrop { position:fixed; z-index:44; inset:0; border:0; background:rgba(25,34,28,.3); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .mobile-nav-open .mobile-nav-backdrop { display:block; opacity:1; pointer-events:auto; }

  .main-shell,.is-focus .main-shell { margin-left:0; width:100%; }
  .topbar { height:62px; padding:0 15px; }
  .mobile-topbar-brand { display:flex; align-items:center; gap:6px; }
  .mobile-menu-button { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:11px; background:transparent; color:var(--ink-soft); }
  .mobile-brand { display:flex; align-items:center; gap:8px; padding:0 4px; border:0; background:transparent; }
  .mobile-brand > span { display:grid; place-items:center; width:28px; height:28px; border-radius:9px 9px 9px 3px; color:#fff; background:var(--moss-deep); font-family:var(--serif); font-size:12px; }
  .mobile-brand strong { font-family:var(--serif); font-size:16px; letter-spacing:.08em; }
  .context-path { display:none; }
  .topbar-actions { margin-left:auto; }
  .topbar-actions > .icon-button.has-dot,.focus-state { display:none; }
  .topbar-actions > .icon-button { overflow:hidden; }
  .theme-button { height:35px; padding:0 9px; }
  .theme-button svg { display:none; }
  .theme-menu { position:fixed; top:68px; left:12px; right:12px; width:auto; transform-origin:top center; }

  .page-host { max-width:none; padding:24px 16px 48px; overflow:hidden; }
  .page-heading { display:block; margin-bottom:22px; }
  .page-heading h1 { font-size:28px; }
  .page-heading p { font-size:12px; }
  .heading-actions { display:flex; flex-wrap:wrap; margin-top:16px; }
  .heading-actions > * { flex:1 1 auto; min-width:0; }
  .section-title { align-items:flex-start; }

  .teacher-hero,.work-grid,.leader-hero,.classroom-hero,.feedback-layout,.student-page,.library-grid,.correction-workbench { grid-template-columns:1fr; gap:16px; }
  .next-class { min-height:0; padding:24px 21px; }
  .next-class::after { width:180px; height:180px; right:-72px; top:-65px; }
  .next-class > * { position:relative; z-index:1; }
  .next-class h2 { margin-top:26px; font-size:24px; line-height:1.42; }
  .class-meta { flex-wrap:wrap; gap:10px 15px; }
  .daily-brief { padding:21px; }
  .stats-strip { grid-template-columns:repeat(2,1fr); gap:0; }
  .stat-item { border-bottom:1px solid var(--line); }
  .stat-item:nth-child(odd) { border-left:0; }
  .stat-item:nth-last-child(-n+2) { border-bottom:0; }
  .agenda-row { grid-template-columns:46px 34px minmax(0,1fr); gap:9px; padding-inline:3px; }
  .agenda-time { text-align:left; }
  .agenda-action { display:none; }

  .design-shell { display:flex; flex-direction:column; gap:14px; }
  .outline-panel,.ai-panel { position:static; width:100%; max-height:none; }
  .outline-list { grid-template-columns:1fr 1fr; }
  .canvas { width:100%; min-height:0; padding:25px 20px 42px; }
  .canvas h1 { font-size:24px; }
  .canvas-meta { flex-wrap:wrap; }
  .content-block { padding-left:12px; }
  .block-tools { opacity:1; }
  .activity-flow { grid-template-columns:1fr; }

  .classroom-board { min-height:0; padding:23px 20px; }
  .classroom-board h2 { font-size:23px; }
  .question-card { padding:18px; }
  .board-actions { flex-wrap:wrap; }
  .live-students { grid-template-columns:repeat(4,1fr); }

  .assignment-list,.feedback-main,.student-roster,.student-detail,.resource-tree { padding:16px; }
  .submission-row { grid-template-columns:38px minmax(0,1fr) 34px; gap:9px; }
  .submission-row .status-pill { grid-column:2/4; justify-self:start; }
  .student-roster { max-height:330px; overflow:auto; }
  .student-profile { flex-wrap:wrap; align-items:flex-start; }
  .profile-tags { width:100%; margin-left:0; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .resource-list,.content-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .filter-bar .search-field { order:-1; width:100%; min-width:0; }
  .filter-bar .spacer { display:none; }

  .signal-overview,.week-summary { padding:21px; }
  .signal-score { gap:12px; }
  .signal-score > div { flex:1; padding-right:10px; }
  .signal-row { grid-template-columns:38px minmax(0,1fr) 16px; gap:10px; }
  .signal-evidence { grid-column:2; text-align:left; }
  .signal-row > svg { grid-column:3; grid-row:1/3; }
  .dashboard-grid { grid-template-columns:1fr; }
  .dashboard-grid > [class*="span-"] { grid-column:auto; }
  .dashboard-card { min-height:0; overflow:hidden; }
  .quality-table { display:block; overflow-x:auto; white-space:nowrap; }
  .action-row { grid-template-columns:32px minmax(0,1fr); }
  .action-owner { grid-column:2; }

  .essay-paper { min-height:0; padding:28px 21px; }
  .essay-body { font-size:14px; line-height:2; }
  .marked-text:hover::after { display:none; }

  .drawer { width:calc(100% - 18px); padding:22px 18px; }
  .modal { width:calc(100% - 24px); max-height:86vh; padding:22px 18px; }
  .form-grid { grid-template-columns:1fr; }
  .form-field.is-wide { grid-column:auto; }
  .command-palette { width:calc(100% - 24px); }
  .command-input { padding:15px; }
  .command-input kbd,.command-item kbd { display:none; }
  .toast-region { left:12px; right:12px; bottom:14px; }
  .toast { width:100%; min-width:0; }
}

@media (max-width: 390px) {
  .page-host { padding-left:12px; padding-right:12px; }
  .resource-list,.content-grid { grid-template-columns:1fr; }
  .signal-score strong { font-size:19px; }
  .theme-menu { left:8px; right:8px; }
}