/* Calm, warm palettes. Dark is the initial theme; the choice is local to this browser. */
:root {
  color-scheme: dark;
  --bg: #191d23;
  --surface: #242a32;
  --surface-raised: #2b323c;
  --sidebar: #20252c;
  --input: #1e242c;
  --hover: #303944;
  --ink: #ecece6;
  --secondary: #c3c9cc;
  --muted: #a2adb5;
  --line: #39424c;
  --green: #b0d4be;
  --green-dark: #c4e1cf;
  --primary: #b0d4be;
  --on-primary: #203b32;
  --sage: #303f3b;
  --sage-text: #bad7c3;
  --yellow: #443d31;
  --amber-text: #e9c795;
  --red: #f0aea5;
  --red-bg: #473434;
  --blue-bg: #333d50;
  --blue-text: #bacbed;
  --lavender: #c6bee3;
  --hero: #303b3c;
  --hero-line: #627d73;
  --focus: #c5dcca;
  --radius: 20px;
  --shadow: 0 14px 35px #0c11152e;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scrollbar-color: #65717b var(--surface);
  accent-color: var(--primary);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f2ed;
  --surface: #fffcf8;
  --surface-raised: #f5f1eb;
  --sidebar: #f0ede6;
  --input: #fffdf9;
  --hover: #e9e8df;
  --ink: #34403d;
  --secondary: #58675f;
  --muted: #68766f;
  --line: #dedfd5;
  --green: #426c59;
  --green-dark: #335946;
  --primary: #426c59;
  --on-primary: #fffdf7;
  --sage: #e4ece0;
  --sage-text: #456345;
  --yellow: #f3e7ce;
  --amber-text: #806236;
  --red: #9b5148;
  --red-bg: #f7e5df;
  --blue-bg: #e6e9f2;
  --blue-text: #526389;
  --lavender: #7e6b9c;
  --hero: #e6eadc;
  --hero-line: #b5bfa0;
  --focus: #7b9c7e;
  --shadow: 0 14px 35px #4249360c;
  scrollbar-color: #b3bbae var(--surface);
}
body { background: var(--bg); color: var(--ink); }
::selection { background: var(--green); color: var(--on-primary); }
button:focus-visible, a:focus-visible { outline-color: var(--focus); }
.brand-mark, .button, .nav button.active, .check-task.done, .calendar-day.today .day-number {
  background: var(--primary); color: var(--on-primary);
}
.brand-mark { border-radius: 16px; font-weight: 600; }
.brand strong { font-weight: 600; letter-spacing: -.3px; }
.brand small, .nav-label, .eyebrow {
  text-transform: none; letter-spacing: .3px; font-size: 11px; font-weight: 500; color: var(--muted);
}
.sidebar { background: var(--sidebar); }
.nav button { color: var(--secondary); border-radius: 12px; font-weight: 400; }
.nav button:hover { background: var(--hover); color: var(--ink); }
.nav button.active:hover { background: var(--primary); color: var(--on-primary); }
.nav .count { background: #00000017; color: inherit; border-radius: 8px; }
.workspace-note, .avatar { background: var(--sage); color: var(--sage-text); }
.workspace-note strong { color: var(--sage-text); }
.topbar { background: transparent; border-bottom-color: var(--line); }
.breadcrumb, .date-label, .search-box { color: var(--muted); }
.breadcrumb strong { color: var(--secondary); }
.search-box { background: var(--surface); border: 1px solid var(--line); padding: 0 12px; border-radius: 14px; }
.search-box input::placeholder, input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.search-box:focus-within { border-color: var(--focus); }
.topbar-right { gap: 12px; }
h1 { font-weight: 500; letter-spacing: -.8px; line-height: 1.25; }
h2, h3 { font-weight: 550; letter-spacing: -.2px; }
.page-heading .subtitle { font-size: 13px; }
.button { border-radius: 12px; font-weight: 600; }
.button:hover { background: var(--green-dark); }
.button.secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line); }
.button.secondary:hover { background: var(--hover); }
.button.ghost { background: transparent; color: var(--green); }
.button.ghost:hover { color: var(--green-dark); }
.button.danger { background: var(--red-bg); color: var(--red); border-color: var(--line); }
.button.danger:hover { background: var(--red-bg); border-color: var(--red); }
.icon-button { border-radius: 12px; color: var(--muted); }
.icon-button:hover { background: var(--hover); color: var(--ink); }
.theme-toggle { width: 42px; height: 42px; flex: none; border: 1px solid var(--line); color: var(--amber-text); }
.theme-toggle .theme-moon { display: none; }
:root[data-theme="light"] .theme-toggle .theme-sun { display: none; }
:root[data-theme="light"] .theme-toggle .theme-moon { display: block; }
.login-theme { position: absolute; right: 26px; top: 22px; z-index: 2; }
.stat, .panel, .entity-card { background: var(--surface); }
.stat { border-color: transparent; }
.stat-top, .stat-desc { color: var(--muted); }
.stat-number { font-weight: 450; letter-spacing: -1px; }
.stat:first-child .stat-number { color: var(--green); }
.stat:nth-child(3) .stat-number { color: var(--lavender); }
.stat:nth-child(4) .stat-number { color: var(--blue-text); }
.stat.warning { background: var(--yellow); border-color: transparent; }
.stat.warning .stat-number, .stat.warning .stat-top { color: var(--amber-text); }
.task-row { border-color: var(--line); }
.check-task { background: var(--input); border-color: var(--muted); border-radius: 7px; }
.task-title, .data-table strong { color: var(--ink); font-weight: 500; }
.task-meta, .task-deadline, .task-row.completed .task-title, .card-footer, .data-table small { color: var(--muted); }
.task-deadline.overdue { color: var(--red); }
.badge { border-radius: 7px; background: var(--sage); color: var(--sage-text); }
.badge.sage { background: var(--sage); color: var(--sage-text); }
.badge.amber { background: var(--yellow); color: var(--amber-text); }
.badge.red { background: var(--red-bg); color: var(--red); }
.badge.blue { background: var(--blue-bg); color: var(--blue-text); }
.badge.gray { background: var(--surface-raised); color: var(--muted); }
.empty-icon { background: var(--sage); color: var(--sage-text); border-radius: 19px; }
.welcome { background: var(--hero); border-color: transparent; border-radius: 24px; }
.welcome h2 { font-weight: 500; font-size: 23px; }
.welcome p { color: var(--secondary); font-size: 12px; }
.welcome-art, .welcome-art:before, .welcome-art:after { border-color: var(--hero-line); }
.date-tile, .teacher-avatar { background: var(--sage); color: var(--sage-text); border-radius: 13px; }
.upcoming-row p, .activity, .activity li, .activity small, .activity .dot { color: var(--muted); }
.search-field input, .filter { background: var(--input); color: var(--ink); border-color: var(--line); border-radius: 12px; }
.entity-card:hover { border-color: var(--hero-line); box-shadow: var(--shadow); }
.data-table th, .weekday { background: var(--surface-raised); color: var(--muted); }
.data-table tbody tr:hover { background: var(--hover); }
.notice { background: var(--yellow); border-color: transparent; color: var(--amber-text); border-radius: 14px; }
.notice.neutral { background: var(--sage); border-color: transparent; color: var(--sage-text); }
.calendar-day.outside { background: var(--bg); color: var(--muted); }
.calendar-event { background: var(--sage); color: var(--sage-text); border-radius: 6px; }
.calendar-event.overdue { background: var(--red-bg); color: var(--red); }
.field>span, .field>label, .checkbox-field { color: var(--secondary); }
.field input, .field textarea, .field select {
  background: var(--input); color: var(--ink); border-color: var(--line); border-radius: 12px;
  font-size: 13px; padding: 12px 13px;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 15%, transparent); }
.field small, .form-help { color: var(--muted); font-size: 11px; }
.field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--input) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
.form-error { background: var(--red-bg); color: var(--red); }
.modal-overlay { background: #090d136e; }
.drawer { background: var(--surface); box-shadow: -15px 0 80px #080c1530; }
.drawer-head h2 { font-weight: 500; }
.drawer-head .eyebrow { font-size: 11px; }
.drawer-foot { background: var(--sidebar); }
.detail-record { background: var(--surface-raised); border-color: var(--line); color: var(--ink); border-radius: 12px; }
.detail-record small, .history-entry summary { color: var(--muted); }
.detail-text, .history-entry pre { color: var(--secondary); }
.detail-text { font-size: 13px; }
.history-entry { border-radius: 12px; }
.login-form-wrap { position: relative; }
.login-story { background: var(--hero); color: var(--ink); }
.login-story .brand, .login-story .brand-mark { color: var(--ink); }
.login-story .brand-mark { background: var(--sage); }
.login-story .brand small, .login-story p, .login-story footer, .login-footnote { color: var(--secondary); }
.login-story h1 { font-weight: 450; letter-spacing: -1.4px; }
.login-orbit, .login-orbit:after { border-color: var(--hero-line); }
#toast { background: var(--primary); color: var(--on-primary); border-radius: 14px; }
.settings-ai, .inline-create, .criteria-box, .ai-toolbar { background: var(--surface-raised); border-color: var(--line); color: var(--secondary); border-radius: 14px; }
input[readonly], textarea[readonly], #field-createdPassword { background: var(--surface-raised); color: var(--muted); }
.schedule-preview>span { background: var(--sage); color: var(--sage-text); border-radius: 10px; }
.schedule-preview strong { color: var(--green); }
.course-summary { background: var(--sage); color: var(--sage-text); border-radius: 14px; padding: 14px 16px; font-size: 13px; line-height: 1.7; }
[data-reusable] input[hidden] { display: none; }
@media(max-width:700px) {
  .topbar .breadcrumb { min-width: 0; }
  .breadcrumb strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-menu, .topbar-right { flex-shrink: 0; }
  .topbar-right { gap: 7px; }
  .search-box { padding: 0 8px; }
  .search-box input { width: 90px; }
  .theme-toggle { width: 38px; height: 38px; }
  .login-form-wrap { padding-top: 65px; }
  .login-theme { top: 14px; right: 25px; }
}