:root {
  --canvas: var(--theme-canvas, #f2f9fc);
  --canvas-outer: var(--theme-canvas-outer, #dfeef3);
  --surface: var(--theme-surface, #fff);
  --surface-elevated: var(--theme-surface-elevated, #fff);
  --surface-soft: var(--theme-surface-soft, #e7f5fa);
  --text-primary: var(--theme-text, #102c3a);
  --text-secondary: var(--theme-text-secondary, #446578);
  --text-muted: var(--theme-muted, #8499a8);
  --border: var(--theme-border, #d2e6ee);
  --accent: var(--theme-accent, #08a7c7);
  --accent-strong: var(--theme-accent-strong, #08a7c7);
  --accent-soft: var(--theme-accent-soft, #08a7c724);
  --glass: var(--theme-glass, rgba(245,252,255,.76));
  --focus-ring: var(--theme-focus, #08a7c770);
  --positive: var(--theme-positive, #28ad7d);
  --warning: var(--theme-warning, #d98124);
  --danger: var(--theme-danger, #dd5f62);
  --present: var(--theme-present, #28ad7d);
  --absent: var(--theme-absent, #dd6970);
  --unknown: var(--theme-unknown, #9babb4);

  /* Compatibility aliases while the existing screens move to semantic tokens. */
  --ice-canvas: var(--canvas);
  --ice-soft: var(--surface-soft);
  --ice-line: var(--border);
  --cyan: var(--accent);
  --cyan-deep: var(--accent-strong);
  --cyan-pale: var(--accent-soft);
  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --muted: var(--text-muted);
  --white: var(--surface);
  --shadow: 0 10px 26px var(--theme-shadow, rgba(31,81,101,.10));
  --radius-card: var(--theme-card-radius, 24px);
  --ui-density: 1;
  --ui-font-scale: 1;
  --background-opacity: .11;
}

:root[data-text-scale="small"] { --ui-font-scale: .94; }
:root[data-text-scale="large"] { --ui-font-scale: 1.08; }
:root[data-density="compact"] { --ui-density: .88; }
:root[data-density="spacious"] { --ui-density: 1.1; }
:root[data-background-intensity="normal"] { --background-opacity: .19; }

html { background: var(--canvas-outer) !important; font-size: calc(16px * var(--ui-font-scale)); }
body { background: var(--canvas-outer) !important; color: var(--text-primary) !important; }
.app-shell { isolation: isolate; background: var(--canvas) !important; }
.app-shell::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  width: min(100%, 430px);
  margin-inline: auto;
  pointer-events: none;
  opacity: var(--background-opacity);
  background-repeat: repeat;
  background-position: 50% 0;
}
:root[data-background="clean"] .app-shell::before { opacity: 0; }
:root[data-background="pattern"] .app-shell::before {
  background-image:
    radial-gradient(circle at 12px 12px, var(--accent) 1.2px, transparent 1.4px),
    radial-gradient(circle at 38px 38px, var(--accent) .8px, transparent 1px);
  background-size: 50px 50px;
}
:root[data-background="thematic"] .app-shell::before {
  background-image:
    linear-gradient(135deg, transparent 46%, var(--accent) 47%, var(--accent) 49%, transparent 50%),
    radial-gradient(ellipse at center, transparent 57%, var(--accent) 58%, var(--accent) 60%, transparent 61%);
  background-size: 72px 72px, 90px 58px;
}
:root[data-theme="campus-mint"][data-background="thematic"] .app-shell::before {
  background-image: radial-gradient(ellipse at 35% 55%, transparent 52%, var(--accent) 54%, var(--accent) 57%, transparent 59%);
  background-size: 62px 42px;
  transform: rotate(-8deg) scale(1.08);
}
:root[data-theme="lavender-focus"][data-background="thematic"] .app-shell::before {
  background-image: linear-gradient(30deg, transparent 42%, var(--accent) 43%, var(--accent) 45%, transparent 46%), linear-gradient(-30deg, transparent 42%, var(--accent) 43%, var(--accent) 45%, transparent 46%);
  background-size: 58px 58px;
}
:root[data-theme="warm-study"][data-background="thematic"] .app-shell::before {
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, var(--accent) 28px 29px), linear-gradient(90deg, transparent 0 35px, var(--accent) 36px 37px, transparent 38px);
  background-size: 100% 29px, 100% 100%;
}

.schedule-header,
.profile-header,
.modules-header,
.grades-header { background-color: transparent !important; }
.profile-card,
.profile-menu,
.profile-person,
.lesson-card,
.grade-card,
.modules-card,
.notification-card { background-color: var(--surface) !important; border-color: var(--border) !important; }
button:focus-visible, [tabindex]:focus-visible { outline-color: var(--focus-ring) !important; }

:root[data-interface-effects-resolved="economy"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; }
:root[data-interface-effects-resolved="economy"] .bottom-nav__surface { background: color-mix(in srgb, var(--surface) 94%, transparent) !important; }
:root[data-animations="reduced"] *,
:root[data-animations="reduced"] *::before,
:root[data-animations="reduced"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .08s !important; scroll-behavior: auto !important; }

@media (prefers-reduced-motion: reduce) {
  :root[data-animations="system"] *,
  :root[data-animations="system"] *::before,
  :root[data-animations="system"] *::after { animation-duration: .001ms !important; transition-duration: .08s !important; }
}

.theme-reveal-layer {
  position: absolute;
  z-index: 2147483647;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  contain: strict;
  transform: translateZ(0);
}
.theme-reveal-mask {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
  will-change: left, top, width, height;
}
.theme-reveal-layer__shell {
  position: absolute !important;
  max-width: none !important;
  margin: 0 !important;
  pointer-events: none !important;
  transform: translateZ(0);
}
.theme-reveal-layer__shell--base { z-index: 0; }
.theme-reveal-layer__shell--clipped { z-index: 1; will-change: left, top; }
.theme-reveal-layer .route-transition-portal,
.theme-reveal-layer dialog,
.theme-reveal-layer .toast { display: none !important; }
:root[data-animations="reduced"] .theme-reveal-layer { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root[data-animations="system"] .theme-reveal-layer { display: none !important; }
}

:root[data-show-location="false"] .lesson-card__location { display: none !important; }
:root[data-show-teacher="false"] .lesson-card__teacher { display: none !important; }
:root[data-compact-breaks="true"] .break-row { min-height: 34px !important; padding-block: 4px !important; }