/* ==========================================================================
   Timetable - design system
   Tailwind (CDN) supplies layout utilities; this file owns the visual language.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg:          #F4F6FA;
  --bg-tint-a:   #E7EAFE;
  --bg-tint-b:   #E2F5F1;

  --surface:     #FFFFFF;
  --surface-2:   #F5F7FB;
  --surface-3:   #EDF0F6;

  --border:      #E4E8F0;
  --border-2:    #D3D9E6;

  --ink:         #0C1222;
  --ink-2:       #3F4863;
  --ink-3:       #6B7490;
  --ink-4:       #99A1B8;

  --accent:      #4F46E5;
  --accent-2:    #6D5DF6;
  --accent-ink:  #FFFFFF;
  --accent-soft: #EDECFE;
  --accent-line: #C9C4FB;

  --teal:        #0D9488;
  --teal-soft:   #DCF5F1;
  --rose:        #E11D48;
  --rose-soft:   #FDE7EC;
  --amber:       #B45309;

  --shadow-xs:   0 1px 2px rgba(12, 18, 34, .05);
  --shadow-sm:   0 1px 3px rgba(12, 18, 34, .06), 0 1px 2px rgba(12, 18, 34, .04);
  --shadow-md:   0 6px 18px -6px rgba(12, 18, 34, .14), 0 2px 6px rgba(12, 18, 34, .05);
  --shadow-lg:   0 24px 60px -12px rgba(12, 18, 34, .26), 0 8px 20px -8px rgba(12, 18, 34, .12);
  --ring:        0 0 0 4px var(--accent-soft);

  --r-xl:  20px;
  --r-lg:  16px;
  --r-md:  12px;
  --r-sm:  9px;

  /* Subject tones: soft fill / line / text */
  --tone-1: #EDECFE; --tone-1-edge: #CFCAFB; --tone-1-ink: #4338CA;
  --tone-2: #DCF5F1; --tone-2-edge: #A9E3DA; --tone-2-ink: #0F766E;
  --tone-3: #FDE7EC; --tone-3-edge: #F7C2CE; --tone-3-ink: #BE123C;
  --tone-4: #F3E9FE; --tone-4-edge: #DCC6F8; --tone-4-ink: #7E22CE;
  --tone-5: #FDF0DC; --tone-5-edge: #F3D6A4; --tone-5-ink: #B45309;
  --tone-6: #E0F2FE; --tone-6-edge: #B3DEF8; --tone-6-ink: #0369A1;
  --tone-7: #FCE7F3; --tone-7-edge: #F6C2DF; --tone-7-ink: #BE1D6C;
  --tone-8: #EAEEF5; --tone-8-edge: #CDD5E3; --tone-8-ink: #465170;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #080A11;
  --bg-tint-a:   #18184A;
  --bg-tint-b:   #0C2E31;

  --surface:     #12151F;
  --surface-2:   #171B27;
  --surface-3:   #1D2231;

  --border:      #242A3A;
  --border-2:    #333B50;

  --ink:         #F2F4FA;
  --ink-2:       #C4CAD9;
  --ink-3:       #8C95AC;
  --ink-4:       #646D84;

  --accent:      #8B85FF;
  --accent-2:    #A99BFF;
  --accent-ink:  #0B0A22;
  --accent-soft: #211E45;
  --accent-line: #3B3676;

  --teal:        #2DD4BF;
  --teal-soft:   #10312F;
  --rose:        #FB7185;
  --rose-soft:   #3A1622;
  --amber:       #FBBF24;

  --shadow-xs:   0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, .55);
  --shadow-md:   0 8px 24px -8px rgba(0, 0, 0, .7);
  --shadow-lg:   0 28px 70px -16px rgba(0, 0, 0, .85);
  --ring:        0 0 0 4px var(--accent-soft);

  --tone-1: #1E1B4B; --tone-1-edge: #35307A; --tone-1-ink: #B7B2FF;
  --tone-2: #0B2F2C; --tone-2-edge: #17514B; --tone-2-ink: #6EE7D5;
  --tone-3: #3B1220; --tone-3-edge: #5E1F34; --tone-3-ink: #FDA4B8;
  --tone-4: #2A1240; --tone-4-edge: #451F66; --tone-4-ink: #D8B4FE;
  --tone-5: #33230C; --tone-5-edge: #543B15; --tone-5-ink: #FCD34D;
  --tone-6: #0C2637; --tone-6-edge: #164056; --tone-6-ink: #7DD3FC;
  --tone-7: #351029; --tone-7-edge: #571B43; --tone-7-ink: #F9A8D4;
  --tone-8: #1B2030; --tone-8-edge: #2E3648; --tone-8-ink: #AEB8CE;
}

* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  letter-spacing: -.005em;
  transition: background-color .3s ease, color .3s ease;
}

/* Ambient colour behind the app */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 8% -12%, var(--bg-tint-a), transparent 60%),
    radial-gradient(760px 460px at 104% -6%, var(--bg-tint-b), transparent 58%);
  opacity: .75;
}
[data-theme="dark"] body::before { opacity: .5; }

#app { position: relative; z-index: 1; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- Scrollbars ---------- */
.scroll-thin { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.scroll-thin::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
.scroll-thin::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--ink-4); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Type ---------- */
.font-display { font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; letter-spacing: -.022em; }
.font-mono, .tnum {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.t-ink { color: var(--ink); }
.t-ink-2 { color: var(--ink-2); }
.t-ink-3 { color: var(--ink-3); }
.t-ink-4 { color: var(--ink-4); }
.t-accent { color: var(--accent); }
.t-teal { color: var(--teal); }

/* ---------- Surfaces ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.sunk {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.divide-rule > * + * { border-top: 1px solid var(--border); }

.app-bar {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.monogram {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.02em;
  box-shadow: 0 6px 16px -6px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.monogram-sm { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; box-shadow: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  height: 36px;
  padding: 0 .85rem;
  border-radius: 11px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 550;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: transform .12s ease, background-color .16s ease, color .16s ease,
              border-color .16s ease, box-shadow .16s ease;
}
.btn:hover { color: var(--ink); border-color: var(--ink-4); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }

.btn-icon { width: 36px; padding: 0; }

.btn-accent {
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: 0 6px 16px -8px var(--accent);
}
.btn-accent:hover { color: var(--accent-ink); border-color: transparent; filter: brightness(1.06); }

.btn-ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
  font-weight: 600;
}
.btn-ink:hover { color: var(--surface); border-color: var(--ink); filter: brightness(1.15); }

.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; box-shadow: none; }

.btn-danger { color: var(--rose); border-color: var(--border-2); background: transparent; box-shadow: none; }
.btn-danger:hover { background: var(--rose-soft); border-color: var(--rose); color: var(--rose); }

.btn-sm { height: 30px; font-size: 12px; padding: 0 .6rem; border-radius: 9px; }
.btn-sm.btn-icon { width: 30px; padding: 0; }

/* ---------- Segmented ---------- */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 13px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.segmented button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 30px;
  padding: 0 .8rem;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.segmented button:hover { color: var(--ink); }
.segmented button.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .2rem .5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.4;
  white-space: nowrap;
}
.chip-accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.chip-teal   { background: var(--teal-soft); border-color: transparent; color: var(--teal); }
.chip-solid  { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  flex: none;
  background: var(--tone-edge, var(--ink-4));
}
.school-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }

/* ---------- Day picker ---------- */
.day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 62px;
  padding: .55rem .4rem .5rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  transition: all .18s ease;
}
.day-pill:hover { border-color: var(--border-2); color: var(--ink); transform: translateY(-1px); }
.day-pill .d-name { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; }
.day-pill .d-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}
.day-pill .d-meta { font-size: 10px; color: var(--ink-4); font-weight: 500; }

.day-pill.is-selected {
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 10px 22px -12px var(--accent);
}
.day-pill.is-selected .d-name { opacity: .8; }
.day-pill.is-selected .d-num,
.day-pill.is-selected .d-meta { color: var(--accent-ink); }
.day-pill.is-selected .d-meta { opacity: .75; }

.day-pill.is-today:not(.is-selected) { border-color: var(--accent-line); background: var(--accent-soft); }
.day-pill.is-today:not(.is-selected) .d-num { color: var(--accent); }

/* ---------- Now panel ---------- */
.now-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.now-card.is-live {
  border-color: var(--accent-line);
  background:
    radial-gradient(420px 200px at 100% 0%, var(--accent-soft), transparent 70%),
    var(--surface);
}
.now-card .now-body { position: relative; z-index: 1; }

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: .55; }
}

.ring-label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  fill: var(--ink);
}
.ring-sub { fill: var(--ink-4); font-weight: 600; }

/* ---------- Timeline ---------- */
.tl-row { display: grid; grid-template-columns: 52px 1fr; gap: .7rem; }
@media (min-width: 640px) { .tl-row { grid-template-columns: 62px 1fr; gap: .9rem; } }

.tl-time {
  padding-top: .95rem;
  text-align: right;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}
.tl-time .t-end { display: block; font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }

.tl-rail { position: relative; padding-bottom: .55rem; }
.tl-rail::before {
  content: "";
  position: absolute;
  left: -.46rem;
  top: .2rem;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--border), var(--border));
}
@media (min-width: 640px) { .tl-rail::before { left: -.52rem; } }
.tl-row:last-child .tl-rail::before { bottom: auto; height: 1.6rem; }

.tl-row-break .tl-time { padding-top: .1rem; }
.tl-row-break .tl-rail { padding-bottom: .55rem; }

/* Break: a slim divider, not a block */
.break-line {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .1rem 0;
}
.break-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-2) 0 5px, transparent 5px 10px);
}
.break-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .55rem;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 550;
}
.break-pill.is-now { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* Lesson / free cards */
.slot {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: .85rem .95rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease, opacity .2s ease;
}
.slot::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85rem;
  bottom: .85rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tone-edge, transparent);
}
.slot:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-2); }

.slot-free {
  background: transparent;
  border: 1px dashed var(--border-2);
  box-shadow: none;
}
.slot-free::before { display: none; }
.slot-free:hover { border-color: var(--accent); background: var(--surface); }

.slot-now {
  border-color: var(--accent) !important;
  box-shadow: var(--ring), var(--shadow-md);
}
.slot-past { opacity: .52; }
.slot-dim { opacity: .3; filter: saturate(.4); }

.slot-static { cursor: default; }
.slot-static:hover { transform: none; box-shadow: var(--shadow-xs); border-color: var(--border); }
.slot-static.slot-now:hover { border-color: var(--accent) !important; box-shadow: var(--ring), var(--shadow-md); }
.slot-free.slot-static:hover { border-color: var(--border-2); background: transparent; }

.now-dot {
  position: absolute;
  left: -.63rem;
  top: 1.35rem;
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent-soft);
  animation: pulse 2.4s ease-in-out infinite;
  z-index: 2;
}
@media (min-width: 640px) { .now-dot { left: -.69rem; } }

.subject-badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--tone-bg, var(--surface-2));
  color: var(--tone-ink, var(--ink-2));
  border: 1px solid var(--tone-edge, var(--border));
  font-size: 11.5px;
  font-weight: 700;
  flex: none;
}

.progress {
  height: 4px;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .9s linear;
}

/* ---------- Week grid ---------- */
.wk {
  display: grid;
  min-width: 720px;
  gap: 6px;
  padding: 6px;
}
.wk-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: .5rem .6rem;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.wk-head.is-today {
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: var(--accent-ink);
}
.wk-head.is-today .t-ink,
.wk-head.is-today .eyebrow,
.wk-head.is-today .t-ink-3 { color: var(--accent-ink); }
.wk-head.is-today .eyebrow,
.wk-head.is-today .t-ink-3 { opacity: .78; }

.wk-corner { position: sticky; left: 0; z-index: 4; }

.wk-time {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .5rem .55rem;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-3);
}
.wk-time.is-break { padding: .3rem .55rem; background: transparent; border-color: transparent; }

.wk-cell { min-height: 74px; display: flex; }
.wk-cell.is-today-col { background: var(--accent-soft); border-radius: var(--r-md); }
[data-theme="dark"] .wk-cell.is-today-col { background: var(--surface-2); }

.wk-lesson {
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--tone-edge, var(--border));
  background: var(--tone-bg, var(--surface-2));
  color: var(--tone-ink, var(--ink));
  padding: .5rem .6rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .18s ease;
}
.wk-lesson:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.wk-lesson-static { cursor: default; }
.wk-lesson-static:hover { transform: none; box-shadow: none; }

.wk-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 68px;
  border-radius: var(--r-md);
  border: 1px dashed var(--border-2);
  color: var(--ink-4);
  cursor: pointer;
  transition: all .16s ease;
}
.wk-empty:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }
.wk-empty-static { border: 1px solid var(--border); cursor: default; }
.wk-empty-static:hover { border-color: var(--border); color: var(--ink-4); background: transparent; }

.wk-now { box-shadow: 0 0 0 2px var(--accent), var(--shadow-sm); }

.wk-break-band {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .6rem;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px dashed var(--border-2);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 550;
}

/* Below lg the sidebar dissolves into the page flow so the timeline
   sits right under the "now" card instead of below every summary. */
@media (max-width: 1023.98px) {
  .side-stack { display: contents; }
}

/* ---------- Stats ---------- */
.stat {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .8rem;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.stat-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-3);
  flex: none;
}
.stat.is-accent .stat-icon { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.stat .s-val {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

/* ---------- Forms ---------- */
.field-label {
  display: block;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .35rem;
}
.input, .select, .textarea {
  width: 100%;
  padding: .55rem .7rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.input-sm { padding: .35rem .5rem; font-size: 12.5px; border-radius: var(--r-sm); }

.select {
  appearance: none;
  cursor: pointer;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7490' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 15px;
}
.select.input-sm { padding-right: 1.7rem; background-size: 13px; }

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .16s ease;
}
.swatch:hover { transform: scale(1.1); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(8, 10, 17, .55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 640px) { .modal-backdrop { align-items: center; padding: 1.5rem; } }

.modal {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) { .modal { border-radius: var(--r-xl); max-height: 88vh; } }
.modal-wide { max-width: 860px; }

.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.modal-body { padding: 1.15rem; }
.modal-foot {
  position: sticky;
  bottom: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  padding: .85rem 1.15rem;
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* ---------- Popover ---------- */
.popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  width: 288px;
  max-height: 62vh;
  overflow-y: auto;
  padding: .4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 420px) { .popover { width: min(288px, calc(100vw - 2rem)); } }

.pop-group + .pop-group { border-top: 1px solid var(--border); margin-top: .4rem; padding-top: .4rem; }

.pop-teacher {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .55rem;
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
}
.pop-teacher:hover, .pop-teacher.is-active { background: var(--surface-2); }

.pop-school {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .4rem .55rem .4rem 2.4rem;
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.pop-school:hover { background: var(--surface-2); color: var(--ink); }
.pop-school.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.pop-action {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  margin-top: .4rem;
  padding: .55rem;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
}
.pop-action:hover { color: var(--ink); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.1rem;
  border-radius: 99px;
  background: var(--ink);
  color: var(--surface);
  font-size: 13px;
  font-weight: 550;
  box-shadow: var(--shadow-lg);
}

/* ---------- Motion ---------- */
.fade-enter-active, .fade-leave-active { transition: opacity .18s ease; }
.fade-enter, .fade-leave-to { opacity: 0; }

.pop-enter-active { transition: transform .24s cubic-bezier(.2, .9, .3, 1), opacity .24s ease; }
.pop-leave-active { transition: transform .16s ease, opacity .16s ease; }
.pop-enter, .pop-leave-to { transform: translateY(12px) scale(.985); opacity: 0; }

.rise { animation: rise .35s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.icon { width: 16px; height: 16px; flex: none; }
.icon-sm { width: 13px; height: 13px; }

/* ---------- Print ---------- */
@media print {
  @page { size: landscape; margin: 12mm; }
  body { background: #fff; }
  body::before { display: none; }
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  .wk { min-width: 0; }
  .print-flat { overflow: visible !important; max-height: none !important; }
  .card, .now-card { box-shadow: none; }
}
.print-only { display: none; }