:root {
  color-scheme: dark;
  --ink: #f1f3ff;
  --ink-soft: #b0bad0;
  --ink-faint: #828da8;
  --navy: #090d1b;
  --navy-raised: #121a31;
  --canvas: #080b16;
  --paper: rgba(17, 23, 42, .92);
  --line: rgba(179, 192, 226, .14);
  --line-strong: rgba(186, 198, 230, .25);
  --lime: #b4a5ff;
  --lime-deep: #9080ed;
  --violet: #a99aff;
  --violet-soft: rgba(151, 129, 255, .13);
  --cyan-soft: rgba(92, 204, 224, .12);
  --coral: #ff9b91;
  --amber-soft: rgba(255, 207, 117, .13);
  --shadow: 0 18px 44px rgba(0, 0, 0, .22);
  --shadow-dialog: 0 30px 100px rgba(0, 0, 0, .58);
}

html { background: #080b16; }
body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 83% 8%, rgba(93, 79, 186, .22), transparent 34rem),
    radial-gradient(ellipse at 52% 70%, rgba(24, 114, 160, .09), transparent 36rem),
    linear-gradient(145deg, #0a0d1a, #0b1020 54%, #080b15);
  background-attachment: fixed;
}

button, input, select, textarea { color-scheme: dark; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(115, 215, 245, .8);
  outline-offset: 3px;
}
::selection { color: #101020; background: rgba(169, 154, 255, .72); }

.app-background-layer { background: #080b16; }
.app-background-layer > div { background: linear-gradient(135deg, rgba(5, 8, 18, .64), rgba(8, 12, 27, .38)); }
.app-shell { min-height: 100vh; }
.sidebar {
  width: 252px;
  padding: 25px 16px 20px;
  border-right: 1px solid rgba(179, 192, 226, .1);
  background: rgba(8, 12, 25, .93);
  box-shadow: 14px 0 40px rgba(0, 0, 0, .12);
}
.brand { gap: 11px; padding: 0 8px; }
.brand-mark {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(212, 203, 255, .38);
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #8271e8, #4d67c9 70%, #55b9cc);
  box-shadow: 0 8px 24px rgba(105, 91, 220, .26);
}
.brand-copy strong { color: #f4f5ff; font-size: 17px; letter-spacing: -.045em; }
.brand-copy small { color: #8f9bb9; }
.nav-caption { margin: 38px 11px 12px; color: #74819e; }
.nav-list { gap: 5px; }
.nav-item {
  position: relative;
  min-height: 46px;
  gap: 12px;
  padding: 0 12px;
  border-radius: 10px;
  color: #aab4cc;
  font-size: 12px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-item:hover { color: #f7f8ff; background: rgba(151, 132, 255, .1); }
.nav-item.is-active {
  border-color: rgba(169, 154, 255, .2);
  color: #ded7ff;
  background: linear-gradient(100deg, rgba(137, 116, 238, .2), rgba(94, 147, 206, .07));
  box-shadow: inset 2px 0 #aa9bff;
}
.nav-icon { width: 20px; height: 20px; }
.nav-icon svg, .topbar-settings svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.sidebar-bottom { padding: 0 2px; }
.sidebar-note { border-color: rgba(179, 192, 226, .1); color: #aeb8cd; background: rgba(255, 255, 255, .035); }
.sidebar-note strong { color: #e8eaff; }
.note-dot { background: #75d4e7; box-shadow: 0 0 0 4px rgba(117, 212, 231, .1); }
.sidebar-meta { color: #7d89a5; }
.sidebar-meta span { color: #a5b0c8; }

.main-column { margin-left: 252px; }
.topbar {
  height: 68px;
  border-color: rgba(182, 194, 227, .11);
  background: rgba(10, 14, 29, .78);
  backdrop-filter: blur(16px);
}
.breadcrumb { color: #8d99b4; font-size: 10px; letter-spacing: .13em; }
.breadcrumb strong { color: #e4e8f8; font-size: 12px; }
.breadcrumb-slash { color: #4b5671; }
.topbar-actions { gap: 12px; }
.local-pill {
  gap: 7px;
  padding: 7px 10px;
  border-color: rgba(97, 203, 180, .2);
  color: #a7e4d5;
  background: rgba(39, 133, 117, .1);
  font-size: 9px;
  letter-spacing: .09em;
}
.local-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #6ed8b7; box-shadow: 0 0 10px rgba(110, 216, 183, .48); }
.topbar-settings {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(177, 188, 223, .19);
  border-radius: 10px;
  color: #dce1f3;
  background: rgba(255, 255, 255, .045);
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.topbar-settings:hover { transform: translateY(-1px); border-color: rgba(169, 154, 255, .4); background: rgba(151, 132, 255, .12); }
.topbar-settings svg { width: 16px; height: 16px; color: #b9adff; }
#main-content { padding-top: 34px; }
#view-root { animation: view-arrive .22s ease both; }
@keyframes view-arrive { from { opacity: .55; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.view-heading { align-items: center; margin: 2px 0 23px; }
.eyebrow { color: #b8aaff; font-size: 10px; letter-spacing: .15em; }
h1 { color: #f3f4ff; font-size: clamp(29px, 3.2vw, 39px); letter-spacing: -.055em; }
h2 { color: #edf0ff; font-size: 18px; letter-spacing: -.035em; }
h3 { color: #e8ebfb; }
.view-subtitle { max-width: 620px; color: #a8b2ca; font-size: 13px; }
.date-stamp { color: #a9b4cf; font-size: 11px; }

.button {
  min-height: 42px;
  border-radius: 10px;
  font-size: 12px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.button-primary {
  border-color: rgba(208, 199, 255, .35);
  color: #fff;
  background: linear-gradient(115deg, #7c69de, #605fcd 62%, #4d9db4);
  box-shadow: 0 8px 22px rgba(90, 82, 196, .24);
}
.button-primary:hover { background: linear-gradient(115deg, #907cf0, #716fe0 62%, #57abc4); box-shadow: 0 10px 26px rgba(90, 82, 196, .31); }
.button-secondary {
  border-color: rgba(185, 197, 231, .22);
  color: #dfe4f5;
  background: rgba(255, 255, 255, .055);
}
.button-secondary:hover { border-color: rgba(169, 154, 255, .42); background: rgba(151, 132, 255, .1); }
.button-quiet { color: #b5bfd6; background: transparent; }
.button-quiet:hover { color: #f1f3ff; background: rgba(255, 255, 255, .07); }
.button-small { min-height: 36px; font-size: 11px; }
.icon-button { width: 40px; height: 40px; border-color: var(--line); color: #ced5ea; background: rgba(255, 255, 255, .06); }
.icon-button:hover { color: #fff; background: rgba(151, 132, 255, .16); }

.dashboard-grid { grid-template-columns: minmax(0, 1.42fr) minmax(280px, .78fr); gap: 17px; margin-top: 17px; }
.dashboard-main, .dashboard-side { gap: 16px; }
.card {
  padding: 21px;
  border-color: rgba(181, 194, 228, .13);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(22, 29, 51, .94), rgba(14, 20, 37, .91));
  box-shadow: 0 16px 38px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(8px);
}
body.has-custom-background .card,
body.has-custom-background .metric-card,
body.has-custom-background .session-row,
body.has-custom-background .planner-item,
body.has-custom-background .filter-bar,
body.has-custom-background .exam-card,
body.has-custom-background .exam-management-card,
body.has-custom-background .week-day,
body.has-custom-background .backup-panel,
body.has-custom-background .study-tip,
body.has-custom-background .quick-action,
body.has-custom-background .empty-state {
  background-color: rgba(12, 17, 32, .9);
  backdrop-filter: none;
}
body.has-custom-background .sidebar { background: rgba(8, 12, 25, .9); }
body.has-custom-background .topbar { background: rgba(10, 14, 29, .8); }
.card-header { margin-bottom: 17px; }
.card-kicker { color: #8f9bb7; font-size: 9px; letter-spacing: .15em; }
.text-link { color: #b7a9ff; font-size: 11px; }
.text-link:hover { color: #d8d0ff; }

.hero-card {
  min-height: 225px;
  padding: 28px 30px;
  border: 1px solid rgba(196, 187, 255, .17);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 79% 12%, rgba(111, 96, 215, .35), transparent 32%),
    radial-gradient(ellipse at 96% 83%, rgba(48, 159, 186, .2), transparent 34%),
    linear-gradient(125deg, #191c37, #11182b 65%, #101b2d);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .24);
}
.hero-card::before, .hero-card::after { border-color: rgba(205, 209, 255, .11); }
.hero-card::before { top: -108px; right: 42px; width: 285px; height: 285px; }
.hero-card::after { top: -62px; right: -4px; width: 240px; height: 240px; }
.hero-content { max-width: 590px; }
.hero-card .eyebrow { color: #b8a9ff; }
.hero-card h1, .hero-card h2 { max-width: 540px; font-size: clamp(28px, 3.3vw, 39px); }
.hero-card p { color: #c0c7db; font-size: 13px; }
.hero-card .button-secondary { border-color: rgba(224, 228, 255, .2); color: #edf0ff; background: rgba(255, 255, 255, .06); }
.hero-card .button-secondary:hover { background: rgba(255, 255, 255, .11); }

.metric-grid { gap: 11px; margin-top: 15px; }
.metric-card {
  min-height: 105px;
  padding: 16px;
  border-color: rgba(181, 194, 228, .13);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(24, 31, 54, .94), rgba(15, 21, 39, .92));
}
.metric-label { color: #aeb8d0; font-size: 10px; letter-spacing: .035em; }
.metric-icon { color: #c0b4ff; background: rgba(145, 126, 255, .14); }
.metric-number { color: #f3f4ff; font-size: 29px; }
.metric-foot { color: #929eb9; font-size: 11px; }
.progress-track { height: 8px; background: rgba(201, 211, 242, .12); }
.progress-fill { background: linear-gradient(90deg, #806ce1, #aa9aff 55%, #6fcee1); }
.progress-row { color: #b0bad0; font-size: 11px; }
.progress-row strong { color: #eef0ff; }
.activity-chart { display: grid; height: 101px; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 9px; margin-top: 18px; }
.activity-day { display: grid; height: 100%; grid-template-rows: 1fr auto auto; justify-items: center; gap: 3px; }
.activity-bar-track { display: flex; width: 100%; height: 100%; align-items: end; justify-content: center; overflow: hidden; border-radius: 6px; background: rgba(188, 198, 229, .08); }
.activity-bar-fill { width: min(18px, 74%); height: 2px; border-radius: 5px 5px 2px 2px; background: rgba(169, 154, 255, .23); }
.activity-bar-fill.has-minutes { height: max(8%, var(--bar-height)); background: linear-gradient(180deg, #75d1e2, #927ce8 72%, #7867d7); box-shadow: 0 0 18px rgba(126, 115, 225, .2); }
.activity-day-label { color: #8995b1; font-size: 10px; font-weight: 650; text-transform: uppercase; }
.activity-day-value { min-height: 12px; color: #b2bdd6; font-size: 9px; font-variant-numeric: tabular-nums; }
.activity-caption { margin: 8px 0 0; color: #8995b1; font-size: 10px; }

.session-list, .exam-list, .task-list { gap: 9px; }
.session-row {
  gap: 12px;
  padding: 12px;
  border-color: rgba(185, 198, 231, .12);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
}
.session-row:hover { border-color: rgba(169, 154, 255, .37); background: rgba(151, 132, 255, .06); }
.session-row.is-complete { background: rgba(112, 180, 148, .07); }
.session-time { color: #a8b3cb; font-size: 11px; }
.session-accent { background: linear-gradient(180deg, #a99aff, #617fd8); }
.session-accent.priority-high { background: #ff998e; }
.session-accent.priority-low { background: #68cbb7; }
.session-info strong { color: #e9edff; font-size: 12px; }
.session-info span { color: #9ca8c2; font-size: 11px; }
.session-state { min-height: 34px; padding: 6px 10px; color: #d2caff; background: rgba(147, 127, 255, .15); font-size: 10px; }
.session-state:hover { background: rgba(147, 127, 255, .25); }
.is-complete .session-state { color: #b4ead9; background: rgba(85, 173, 137, .15); }

.exam-card, .exam-management-card {
  border-color: rgba(166, 151, 255, .22);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(80, 66, 153, .24), rgba(25, 32, 56, .93) 64%);
}
.exam-card::after { border-color: rgba(169, 154, 255, .18); }
.exam-date-chip { color: #d6ceff; background: rgba(145, 126, 255, .16); font-size: 10px; }
.exam-countdown, .exam-big-count { color: #e4ddff; }
.exam-countdown { font-size: 35px; }
.exam-countdown span, .exam-subject, .exam-management-sub, .exam-note, .exam-related { color: #a9b4ce; }
.exam-title, .exam-management-title { color: #eef0ff; font-size: 13px; }
.exam-related { border-color: rgba(188, 199, 231, .14); }
.count-pill { color: #bbc4da; background: rgba(195, 205, 235, .1); font-size: 10px; }

.empty-state {
  padding: 24px 16px;
  border-color: rgba(175, 188, 224, .22);
  border-radius: 12px;
  color: #a8b3cb;
  background: rgba(255, 255, 255, .025);
}
.empty-icon { color: #d2caff; background: rgba(145, 126, 255, .14); }
.empty-state strong { color: #e8ebfc; font-size: 13px; }
.empty-state p { font-size: 11px; }
.quick-action { border-color: rgba(185, 198, 231, .12); color: #e6e9fa; background: rgba(255, 255, 255, .035); }
.quick-action:hover { border-color: rgba(169, 154, 255, .35); background: rgba(151, 132, 255, .08); }
.quick-action-icon { color: #d1c8ff; background: rgba(145, 126, 255, .15); }
.quick-action strong { font-size: 11px; }
.quick-action small { color: #9ca8c2; font-size: 10px; }

.filter-bar, .week-toolbar {
  border-color: rgba(181, 194, 228, .13);
  border-radius: 12px;
  background: rgba(17, 23, 42, .9);
}
.filter-control span { color: #aab5ce; }
.filter-control select, .filter-control input,
.appearance-control select,
.field input, .field select, .field textarea {
  border-color: rgba(185, 198, 231, .2);
  color: #eef0ff;
  background: #11182b;
}
.field, .appearance-control { color: #c0c8dc; }
.field-optional, .field input::placeholder, .field textarea::placeholder { color: #8591ad; }
.planner-item { border-color: rgba(181, 194, 228, .13); background: rgba(255, 255, 255, .035); }
.planner-item.completed { background: rgba(97, 153, 122, .08); }
.planner-item.completed .planner-title { color: #b7e4ce; }
.planner-title { color: #e9edff; }
.planner-meta, .subject-row, .subject-count { color: #a3afc8; }
.planner-subject { color: #c1b5ff; }
.priority-mark.medium { background: #a394ff; box-shadow: 0 0 0 4px rgba(163, 148, 255, .13); }
.row-action { min-height: 34px; color: #aeb9d2; font-size: 10px; }
.row-action:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.row-action.danger:hover { color: #ffc0b8; background: rgba(212, 92, 78, .14); }
.study-tip { border: 1px solid rgba(115, 211, 193, .17); border-radius: 13px; color: #c0e9df; background: rgba(50, 128, 116, .13); }
.study-tip .eyebrow { color: #83d8c7; }
.study-tip p, .study-tip strong { color: #c5e8df; }

.week-toolbar { padding: 14px 16px; }
.week-label { color: #edf0ff; font-size: 13px; }
.week-day {
  border-color: rgba(181, 194, 228, .14);
  border-radius: 11px;
  background: rgba(17, 23, 42, .88);
}
.week-day.is-today { border-color: rgba(169, 154, 255, .53); background: rgba(71, 58, 132, .22); box-shadow: inset 0 2px #a99aff; }
.week-day.is-outside { background: rgba(10, 15, 29, .82); }
.week-day-name { color: #a6b1ca; font-size: 10px; }
.week-day-number { color: #e2e6f7; }
.week-day.is-today .week-day-number { background: #7869d4; }
.week-session { border-left-color: #a99aff; color: #e5e9fa; background: rgba(137, 117, 236, .14); }
.week-session.priority-high { border-left-color: #ff998e; background: rgba(201, 105, 97, .13); }
.week-session.priority-low { border-left-color: #70d1be; background: rgba(79, 166, 148, .13); }
.week-session time, .week-empty { color: #a3aec6; }
.week-session strong { color: #e7ebfc; }

.settings-copy, .appearance-footnote { color: #a8b3cb; }
.appearance-live-preview { border-color: rgba(169, 154, 255, .18); border-radius: 11px; color: #c5cbe0; background: linear-gradient(115deg, rgba(108, 87, 195, .19), rgba(54, 119, 151, .12)); }
.preview-live-pill { color: #d5ccff; }
.appearance-control output { color: #c4b8ff; }
.appearance-control select { color: #eef0ff; background: #11182b; }
.appearance-control input[type="range"] { accent-color: #a99aff; }
.appearance-status { color: #abb6cf; }
.appearance-status[data-kind="warning"] { color: #ffd37e; }
.appearance-status[data-kind="success"] { color: #9be0c5; }
.backup-panel { border-color: rgba(181, 194, 228, .13); background: linear-gradient(145deg, rgba(25, 32, 55, .97), rgba(14, 20, 37, .96)); }
.notice-box { border-color: rgba(241, 196, 105, .22); color: #ecd8a8; background: rgba(125, 91, 34, .16); }
.notice-box strong { color: #f2e4c3; }
.notice-box-icon { color: #f1cf82; background: rgba(223, 175, 81, .16); }
.settings-list li { color: #a8b3cb; font-size: 11px; }
.check-mark { color: #9de0c1; background: rgba(82, 173, 134, .16); }

.storage-notice { border-color: rgba(241, 196, 105, .24); color: #f1dda9; background: rgba(125, 91, 34, .18); }
.toast { border-color: rgba(180, 190, 225, .2); color: #eef0ff; background: rgba(19, 27, 48, .97); }
.toast[data-kind="warning"] { border-color: rgba(241, 196, 105, .35); color: #f4e1b2; background: rgba(77, 59, 25, .97); }
.form-dialog { border-color: rgba(190, 200, 232, .18); border-radius: 15px; color: #eef0ff; background: #11182b; }
.form-dialog::backdrop { background: rgba(4, 7, 16, .74); }
.form-dialog[open] { animation: dialog-arrive .18s ease both; }
@keyframes dialog-arrive { from { opacity: .65; } to { opacity: 1; } }
.dialog-heading h2 { color: #f1f3ff; }
.dialog-copy { color: #aab5ce; }
.form-error { color: #ffaaa0; }
dialog.form-dialog[data-fallback-modal="true"] { background: #11182b; }

@media (max-width: 1100px) {
  .sidebar { width: 224px; }
  .main-column { margin-left: 224px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); }
}

@media (max-width: 900px) {
  .sidebar { inset: auto 0 0; width: 100%; height: calc(70px + env(safe-area-inset-bottom)); flex-direction: row; justify-content: center; padding: 5px 10px calc(5px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(179, 192, 226, .14); border-right: 0; background: rgba(8, 12, 25, .96); box-shadow: 0 -12px 30px rgba(0, 0, 0, .2); }
  .brand, .nav-caption, .sidebar-bottom { display: none; }
  .nav-list { display: grid; width: min(560px, 100%); grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 3px; }
  .nav-item { min-width: 0; min-height: 56px; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 2px; border-radius: 9px; font-size: 10px; }
  .nav-item.is-active { box-shadow: inset 0 2px #aa9bff; }
  .nav-icon { height: 20px; }
  .nav-icon svg { width: 18px; height: 18px; }
  .main-column { margin-left: 0; }
  .topbar { height: 62px; }
  #main-content { padding: 25px clamp(17px, 4vw, 36px) calc(94px + env(safe-area-inset-bottom)); }
  .dashboard-grid { grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr); }
  .planner-layout { grid-template-columns: minmax(0, 1fr) 245px; }
  .week-grid { grid-template-columns: repeat(7, minmax(126px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
}

@media (max-width: 680px) {
  .dashboard-grid, .planner-layout { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dashboard-side > .card:first-child { grid-column: 1 / -1; }
  .side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week-grid { grid-template-columns: repeat(7, minmax(124px, 1fr)); }
}

@media (max-width: 560px) {
  .topbar { height: 58px; padding: 0 13px; }
  .breadcrumb { gap: 7px; font-size: 9px; }
  .topbar-actions { gap: 7px; }
  .local-pill { gap: 0; padding: 7px; }
  .local-pill-label { display: none; }
  .local-pill-dot { width: 7px; height: 7px; }
  .topbar-settings { min-width: 40px; min-height: 40px; padding: 0 9px; }
  .topbar-settings svg { width: 18px; height: 18px; }
  #main-content { padding: 21px 14px calc(91px + env(safe-area-inset-bottom)); }
  .view-heading { align-items: start; gap: 11px; margin-bottom: 18px; }
  h1 { font-size: clamp(28px, 8vw, 34px); }
  .view-subtitle { font-size: 12px; }
  .date-stamp { align-self: start; }
  .hero-card { min-height: auto; padding: 22px 19px; }
  .hero-card::before { right: -80px; }
  .hero-card::after { right: -118px; }
  .hero-card p { font-size: 12px; }
  .hero-actions { gap: 8px; }
  .hero-actions .button { flex: 1 1 140px; }
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .metric-card { min-height: 96px; padding: 12px 9px; }
  .metric-label { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px; min-height: 30px; font-size: 9px; line-height: 1.25; }
  .metric-icon { width: 22px; height: 22px; }
  .metric-number { margin-top: 7px; font-size: 24px; }
  .metric-foot { font-size: 9px; }
  .dashboard-side { grid-template-columns: 1fr; }
  .dashboard-side > .card:first-child { grid-column: auto; }
  .side-stack { grid-template-columns: 1fr; }
  .card { padding: 17px; }
  .card-header { gap: 10px; }
  .session-row { grid-template-columns: 47px 3px minmax(0, 1fr); gap: 8px; padding: 11px 9px; }
  .session-state { grid-column: 3; justify-self: start; min-height: 38px; }
  .planner-item { grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 12px 10px; }
  .planner-actions { grid-column: 2; justify-content: start; }
  .row-action { min-height: 40px; padding: 0 10px; }
  .exam-grid { grid-template-columns: 1fr; }
  .week-toolbar { align-items: start; flex-direction: column; }
  .week-nav { width: 100%; justify-content: space-between; }
  .week-nav .button { min-height: 40px; }
  .settings-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; gap: 11px; }
  .field-wide { grid-column: auto; }
  .appearance-controls { grid-template-columns: 1fr; gap: 11px; }
  .appearance-live-preview { align-items: start; flex-direction: column; }
  .background-actions { display: grid; grid-template-columns: 1fr; }
  .background-actions .button, .background-upload { width: 100%; min-height: 46px; }
  .appearance-control input[type="range"] { min-height: 44px; }
  .appearance-control select { min-height: 44px; }
  .filter-control { flex: 1 1 125px; min-width: 110px; }
  .filter-bar > .button { flex: 1 1 100%; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .button { width: 100%; min-height: 46px; }
  .toast { right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); }
  .field { font-size: 12px; }
  .field input, .field select, .field textarea { font-size: 16px; }
}

@media (max-width: 360px) {
  .nav-list { gap: 1px; }
  .nav-item { font-size: 9px; }
  .topbar-settings span { display: none; }
  .topbar-settings { width: 40px; padding: 0; }
  .metric-label { font-size: 8px; }
  .metric-card { padding-right: 7px; padding-left: 7px; }
}

@media (prefers-reduced-motion: no-preference) {
  .card, .metric-card, .exam-card, .exam-management-card, .quick-action { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
  .card:hover, .metric-card:hover { border-color: rgba(169, 154, 255, .23); }
  .quick-action:hover { transform: translateY(-1px); }
}

.public-resource-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 36px;
  padding: 18px 0 max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(179, 192, 226, .12);
  color: #98a3bd;
  font-size: 11px;
}
.public-resource-footer nav { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.public-resource-footer a { color: #c8c0ff; text-underline-offset: 3px; }
.public-resource-footer a:hover { color: #fff; }
@media (max-width: 720px) {
  .public-resource-footer { align-items: flex-start; flex-direction: column; }
}