:root {
  --accent: #5b5ce2;
  --accent-rgb: 91, 92, 226;
  --accent-strong: #4647c9;
  --accent-soft: #eeeeff;
  --ink: #202233;
  --muted: #74778b;
  --line: #e5e6ee;
  --surface: #ffffff;
  --canvas: #f7f7fa;
  --sidebar-bg: #ffffff;
  --nav-text: #626577;
  --nav-hover: #f6f6fa;
  --input-bg: #ffffff;
  --soft-surface: #f5f5f8;
  --kiosk-canvas: #fbfbfd;
  --preview-overlay: rgba(255, 255, 255, .38);
  --kiosk-background-opacity: .24;
  --success: #16855b;
  --success-soft: #e5f6ef;
  --danger: #c73f4f;
  --danger-soft: #fdebed;
  --warning: #a56a0a;
  --warning-soft: #fff3d9;
  --radius: 18px;
  --radius-small: 11px;
  --font: "Leelawadee UI", "Tahoma", system-ui, sans-serif;
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--accent-rgb);
  --bs-body-font-family: var(--font);
  --bs-body-color: var(--ink);
  --bs-border-radius: 0.75rem;
}

.display-theme-ocean {
  --accent: #147dad;
  --accent-rgb: 20, 125, 173;
  --accent-strong: #0b638c;
  --accent-soft: #e2f4fb;
  --ink: #173247;
  --muted: #687f8e;
  --line: #d5e5ec;
  --surface: #ffffff;
  --canvas: #f2f8fb;
  --sidebar-bg: #fafdff;
  --nav-text: #587385;
  --nav-hover: #eaf5f9;
  --input-bg: #ffffff;
  --soft-surface: #edf5f8;
  --kiosk-canvas: #f3f9fb;
}

.display-theme-forest {
  --accent: #28744f;
  --accent-rgb: 40, 116, 79;
  --accent-strong: #1d5b3d;
  --accent-soft: #e3f3e9;
  --ink: #20332a;
  --muted: #687b71;
  --line: #d7e5dc;
  --surface: #ffffff;
  --canvas: #f3f8f5;
  --sidebar-bg: #fbfdfb;
  --nav-text: #5d7568;
  --nav-hover: #eaf4ee;
  --input-bg: #ffffff;
  --soft-surface: #edf5f0;
  --kiosk-canvas: #f4f9f6;
}

.display-theme-sunrise {
  --accent: #c45b20;
  --accent-rgb: 196, 91, 32;
  --accent-strong: #9f4312;
  --accent-soft: #ffede1;
  --ink: #3b2c24;
  --muted: #806e64;
  --line: #eadbd2;
  --surface: #fffefd;
  --canvas: #fbf6f2;
  --sidebar-bg: #fffdfa;
  --nav-text: #77645a;
  --nav-hover: #fff0e6;
  --input-bg: #fffefd;
  --soft-surface: #f8eee8;
  --kiosk-canvas: #fcf7f3;
}

.display-theme-midnight {
  color-scheme: dark;
  --accent: #9293ff;
  --accent-rgb: 146, 147, 255;
  --accent-strong: #adaeff;
  --accent-soft: #30325d;
  --ink: #f2f3fb;
  --muted: #aeb1c5;
  --line: #3c3f53;
  --surface: #222431;
  --canvas: #171923;
  --sidebar-bg: #1d1f2b;
  --nav-text: #bdc0d1;
  --nav-hover: #2a2d3d;
  --input-bg: #292c3a;
  --soft-surface: #2a2d3a;
  --kiosk-canvas: #171923;
  --preview-overlay: rgba(13, 15, 24, .34);
  --kiosk-background-opacity: .32;
  --success: #64d4a4;
  --success-soft: #18392e;
  --danger: #ff8c99;
  --danger-soft: #46262d;
  --warning: #f2c66d;
  --warning-soft: #44351c;
  --bs-body-bg: var(--canvas);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-tertiary-bg: var(--canvas);
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
}

button, input, select, textarea { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.22; }
h1 { letter-spacing: -0.035em; }
hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

.muted { color: var(--muted); }
.eyebrow {
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-mark {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}
.brand-mark-large { width: 60px; height: 60px; border-radius: 18px; font-size: 30px; }

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  padding: 10px 17px;
  font-weight: 750;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.button:disabled { cursor: wait; opacity: .62; }
.button-primary { background: var(--accent); color: #fff; }
.button-primary:hover { background: var(--accent-strong); }
.button-secondary { border-color: var(--line); background: var(--surface); }
.button-secondary:hover { border-color: var(--accent); background: var(--soft-surface); }
.button-danger { border-color: #f2c9ce; background: var(--danger-soft); color: var(--danger); }
.button-large { min-height: 54px; padding: 14px 22px; font-size: 17px; }
.button-link { border: 0; background: none; padding: 0; font: inherit; }
.text-link { color: var(--accent); font-weight: 750; }
.centered { align-self: center; }
.icon-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--muted);
  font-size: 19px;
}
.icon-button:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-strong);
  --bs-btn-hover-border-color: var(--accent-strong);
  --bs-btn-active-bg: var(--accent-strong);
  --bs-btn-active-border-color: var(--accent-strong);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}
.btn { min-height: 42px; border-radius: 11px; font-weight: 750; }
.form-control, .form-select { border-color: var(--line); border-radius: 10px; background-color: var(--input-bg); color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--accent); background-color: var(--input-bg); color: var(--ink); box-shadow: 0 0 0 .22rem rgba(var(--accent-rgb), .14); }
.form-control::placeholder { color: var(--muted); opacity: .72; }
.button-secondary.btn-light { border-color: var(--line); background: var(--surface); color: var(--ink); }
.button-secondary.btn-light:hover { border-color: var(--accent); background: var(--soft-surface); color: var(--ink); }
.dashboard-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.stack-form { display: flex; flex-direction: column; gap: 17px; }
.stack-form > label:not(.toggle-row, .file-drop),
.two-fields label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-weight: 700;
}
label small { color: var(--muted); font-weight: 500; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: var(--input-bg);
  color: var(--ink);
  padding: 9px 12px;
}
input, select { min-height: 44px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.password-field { position: relative; display: block; width: 100%; }
.password-field input { padding-right: 94px !important; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 9px;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: var(--soft-surface);
  padding: 6px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.password-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.password-toggle:focus-visible { outline: 3px solid rgba(91, 92, 226, .2); }
.password-eye {
  position: relative;
  display: inline-block;
  width: 17px;
  height: 12px;
  transform: rotate(45deg);
  border: 2px solid currentColor;
  border-radius: 75% 0;
}
.password-eye::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.password-toggle.is-visible .password-eye::before {
  position: absolute;
  top: 4px;
  left: -4px;
  width: 22px;
  height: 2px;
  transform: rotate(-90deg);
  background: currentColor;
  content: "";
}
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-error {
  margin: 0;
  border-radius: 9px;
  background: var(--danger-soft);
  color: var(--danger);
  padding: 10px 12px;
  font-weight: 700;
}
.inline-form { display: flex; align-items: flex-end; gap: 8px; }
.inline-form input, .inline-form select { min-width: 170px; }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.toggle-row > span { display: flex; flex-direction: column; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row i {
  position: relative;
  width: 48px;
  height: 27px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #d5d6de;
  transition: background .15s;
}
.toggle-row i::after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform .15s;
}
.toggle-row input:checked + i { background: var(--accent); }
.toggle-row input:checked + i::after { transform: translateX(21px); }
.toggle-row input:focus-visible + i { outline: 3px solid var(--accent-soft); }

.badge {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.badge-neutral { background: var(--soft-surface); color: var(--muted); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }

/* Login */
.login-page { min-height: 100vh; background: #efeffb; }
.login-shell {
  display: grid;
  width: min(1080px, calc(100% - 36px));
  min-height: 650px;
  grid-template-columns: 1.08fr .92fr;
  margin: max(4vh, 28px) auto;
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
}
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: #292a58;
  color: #fff;
  padding: clamp(42px, 7vw, 90px);
}
.login-brand .eyebrow { margin-top: 30px; color: #b9baff; }
.login-brand h1 { margin-bottom: 24px; font-size: clamp(42px, 5vw, 64px); }
.login-brand > p:not(.eyebrow) { max-width: 420px; color: #d6d6e7; font-size: 17px; }
.login-note { display: flex; align-items: center; gap: 9px; margin-top: 40px; color: #d6d6e7; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #53d69b; }
.login-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 6vw, 76px);
}
.login-card h2 { margin-bottom: 8px; font-size: 32px; }
.login-card > .muted { margin-bottom: 30px; }
.login-help { margin: 30px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 36px; font-weight: 800; }

/* Dashboard shell */
.dashboard-page { min-height: 100vh; overflow-x: hidden; background: var(--canvas) !important; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  display: flex;
  width: 242px;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--sidebar-bg);
  box-shadow: 8px 0 30px rgba(46, 48, 84, .035);
  padding: 24px 14px 16px;
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; margin: 0 8px 30px; font-size: 18px; font-weight: 850; }
.sidebar-nav {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: var(--line) transparent;
  scrollbar-width: thin;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line); }
.nav-item {
  display: flex;
  width: 100%;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--nav-text);
  padding: 11px 13px;
  text-align: left;
  font-weight: 700;
}
.nav-item span { width: 20px; color: #858899; font-size: 18px; text-align: center; }
.nav-item:hover { background: var(--nav-hover); color: var(--ink); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
.nav-item.active span { color: var(--accent); }
.nav-item-kiosk { color: var(--accent-strong); }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 16px 5px 0; }
.user-chip { display: flex; min-width: 0; align-items: center; gap: 9px; }
.user-chip > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.user-chip strong { max-width: 115px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.user-chip small { color: var(--muted); font-size: 11px; }
.avatar { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-weight: 850; }
.dashboard-main {
  width: calc(100% - 242px);
  max-width: calc(100vw - 242px);
  min-width: 0;
  min-height: 100vh;
  margin-left: 242px;
  overflow-x: hidden;
  padding: 28px clamp(22px, 4vw, 58px) 60px;
}
.dashboard-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 38px; }
.dashboard-header h1 { margin-bottom: 0; font-size: 28px; }
.dashboard-header .eyebrow { margin-bottom: 4px; }
.impersonation-banner { margin-bottom: 22px; border: 1px solid #f0cf85; border-radius: var(--radius-small); background: var(--warning-soft); color: #654306; }
.impersonation-banner > div { display: flex; flex-direction: column; }
.impersonation-banner span { font-size: 13px; color: #896321; }
.school-heading { display: flex; min-width: 0; align-items: center; gap: 14px; }
.school-heading > div { min-width: 0; }
.school-heading h1 { overflow-wrap: anywhere; }
.school-heading-logo { width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); object-fit: contain; padding: 3px; }
.overview-banner { display: block; width: 100%; max-height: 210px; margin-bottom: 22px; border-radius: var(--radius); object-fit: cover; }
.school-profile-summary { display: grid; grid-template-columns: 1.35fr .65fr; gap: 24px; margin-bottom: 22px; }
.school-profile-summary h3 { margin-bottom: 8px; }
.school-profile-summary p:last-child { margin-bottom: 0; color: var(--muted); }
.school-contact-list { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 13px; }
.panel { display: none; min-width: 0; max-width: 100%; }
.panel.active { display: block; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-heading h2 { margin-bottom: 0; font-size: 27px; }
.section-heading p:last-child { margin-bottom: 4px; }
.surface {
  border: 1px solid rgba(225, 226, 235, .88);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px;
  box-shadow: 0 10px 30px rgba(38, 40, 75, .045);
}
.surface > h3 { margin-bottom: 8px; }
.surface > .muted { margin-bottom: 22px; }
.content-grid { display: grid; min-width: 0; grid-template-columns: 1fr 1fr; gap: 18px; }
.content-grid > *, .item-layout > * { min-width: 0; }
.form-layout { grid-template-columns: minmax(280px, .72fr) minmax(440px, 1.28fr); align-items: start; }
.item-layout { display: flex; flex-direction: column; gap: 18px; }
.item-form-card { width: min(720px, 100%); }
.item-table-card { width: 100%; overflow: hidden; }
.wide-card { min-width: 0; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.card-heading h3 { margin-bottom: 0; }
.card-heading .eyebrow { margin-bottom: 3px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.metric-card { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 18px; }
.metric-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 13px; font-size: 20px; }
.metric-icon.accent { background: var(--accent-soft); color: var(--accent); }
.metric-icon.blue { background: #eaf4ff; color: #357cc6; }
.metric-icon.green { background: var(--success-soft); color: var(--success); }
.metric-icon.red { background: var(--danger-soft); color: var(--danger); }
.metric-icon.gray { background: #f1f1f4; color: #737687; }
.metric-card div { display: flex; flex-direction: column; }
.metric-card strong { font-size: 24px; line-height: 1.1; }
.metric-card span:last-child { margin-top: 4px; color: var(--muted); font-size: 12px; }
.kiosk-summary { display: flex; align-items: center; gap: 16px; min-height: 116px; }
.kiosk-summary p { margin: 3px 0 0; }
.large-status { display: grid; width: 60px; height: 60px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 27px; }
.large-status.neutral { background: #f1f1f4; color: #858899; }
.large-status.online { background: var(--success-soft); color: var(--success); }
.large-status.offline { background: var(--danger-soft); color: var(--danger); }

.kiosk-status-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.kiosk-status-filters { display: flex; width: min(600px, 100%); gap: 10px; }
.kiosk-status-filters label:first-child { flex: 1; }
.kiosk-status-filters label:last-child { width: 150px; }
.kiosk-status-list { margin-top: 4px; }
.kiosk-status-row { min-height: 92px; }
.kiosk-status-identity { align-items: center; }
.kiosk-status-identity .large-status { width: 44px; height: 44px; font-size: 19px; }
.kiosk-status-logo { width: 44px; height: 44px; flex-basis: 44px; }
.kiosk-status-identity .row-copy { gap: 3px; }
.kiosk-status-identity .row-copy strong { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.kiosk-status-identity .row-copy small { white-space: normal; }
.kiosk-status-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.kiosk-status-badges .badge { display: inline-flex; align-items: center; gap: 6px; }
.kiosk-device-status-list {
  display: grid;
  grid-column: 1 / -1;
  gap: 7px;
  border-top: 1px dashed var(--line);
  margin-top: 2px;
  padding: 12px 0 0 56px;
}
.kiosk-device-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  border-radius: 10px;
  background: var(--soft-surface);
  padding: 8px 10px;
}
.kiosk-device-status-name { display: flex; min-width: 0; flex-direction: column; }
.kiosk-device-status-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiosk-device-status-name small, .kiosk-device-status-empty { color: var(--muted); }
.kiosk-device-status-empty { padding: 5px 0; font-size: 13px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.file-drop {
  position: relative;
  display: flex;
  min-height: 145px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1.5px dashed var(--line);
  border-radius: 13px;
  background: var(--soft-surface);
  cursor: pointer;
  text-align: center;
}
.file-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 7px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 21px; }
.file-drop small { margin-top: 3px; }

.data-list { display: flex; flex-direction: column; }
.data-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 14px 2px;
}
.data-row:first-child { border-top: 0; padding-top: 4px; }
.data-row:last-child { padding-bottom: 2px; }
.data-primary { display: flex; min-width: 0; align-items: center; gap: 12px; }
.row-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-weight: 850; }
.row-school-logo { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 11px; object-fit: contain; padding: 2px; }
.row-copy { display: flex; min-width: 0; flex-direction: column; }
.row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-copy small { color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.row-action {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 700;
}
.row-action:hover { background: var(--soft-surface); color: var(--ink); }
.row-action.danger:hover { background: var(--danger-soft); color: var(--danger); }
.row-action.is-playing { background: var(--danger-soft); color: var(--danger); }
.row-action.installed { color: var(--success); }
.row-action:disabled { cursor: not-allowed; opacity: .58; }
.schedule-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.schedule-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.schedule-table th,
.schedule-table td {
  border-bottom: 1px solid var(--line);
  padding: 13px 14px;
  text-align: left;
  vertical-align: middle;
}
.schedule-table th {
  background: var(--soft-surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .025em;
  white-space: nowrap;
}
.schedule-table tbody tr { background: var(--surface); transition: background-color .16s ease, box-shadow .16s ease; }
.schedule-table tbody tr:nth-child(even) { background: rgba(var(--accent-rgb), .055); }
.schedule-table tbody tr:hover { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.schedule-table tbody tr:last-child td { border-bottom: 0; }
.schedule-time {
  display: inline-flex;
  min-width: 62px;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 7px 9px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}
.schedule-audio-name { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-actions-heading { text-align: right !important; }
.schedule-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.sample-audio-card { grid-column: 1 / -1; }
.sample-audio-heading { align-items: flex-start; }
.sample-audio-heading h3 { margin-bottom: 0; }
.sample-audio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.sample-audio-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--soft-surface);
  padding: 13px;
}
.sample-audio-item.installed { border-color: var(--success); }
.sample-audio-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-size: 20px; }
.sample-audio-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.sample-audio-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-audio-copy small { color: var(--muted); line-height: 1.45; }
.sample-audio-actions { display: flex; align-items: center; gap: 3px; }
.school-form-card { position: sticky; top: 22px; align-self: start; }
.school-form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.school-form-heading h3 { margin-bottom: 0; }
.school-card-grid { display: grid; gap: 14px; }
.school-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.school-card-head { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px; }
.school-card-identity { display: flex; min-width: 0; align-items: center; gap: 14px; }
.school-card-logo { width: 54px; height: 54px; flex: 0 0 54px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); object-fit: contain; padding: 3px; }
.school-card-placeholder { display: grid; place-items: center; border: 0; background: var(--accent-soft); color: var(--accent); font-size: 21px; font-weight: 850; }
.school-card-copy { min-width: 0; }
.school-card-copy h4 { overflow-wrap: anywhere; margin: 0 0 7px; font-size: 18px; line-height: 1.3; }
.school-card-meta { display: flex; flex-wrap: wrap; gap: 5px 13px; color: var(--muted); font-size: 12px; }
.school-code { border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); padding: 1px 7px; font-weight: 850; letter-spacing: .06em; }
.school-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line); background: var(--soft-surface); padding: 12px 18px 16px; }
.school-action { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); padding: 8px 10px; font-size: 12px; font-weight: 750; text-align: center; }
.school-action:hover { border-color: var(--accent); background: var(--nav-hover); color: var(--ink); }
.school-action.primary { grid-column: 1 / -1; justify-content: space-between; border-color: var(--accent); background: var(--accent); color: #fff; padding-inline: 14px; font-size: 13px; }
.school-action.primary:hover { border-color: var(--accent-strong); background: var(--accent-strong); color: #fff; }
.school-action.danger { border-color: #f1c7cd; color: var(--danger); }
.school-action.danger:hover { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.empty-state { color: var(--muted); padding: 28px 8px; text-align: center; }
.mini-list .data-row { grid-template-columns: 64px 1fr auto; }
.time-chip { color: var(--accent); font-size: 17px; font-weight: 850; }

.days-field { min-width: 0; margin: 0; border: 0; padding: 0; }
.days-field legend { margin-bottom: 8px; padding: 0; font-weight: 700; }
.days-field > small { display: block; margin-top: 8px; color: var(--muted); }
.day-buttons { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day-buttons input { position: absolute; opacity: 0; pointer-events: none; }
.day-buttons span { display: grid; min-height: 41px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--input-bg); font-size: 13px; font-weight: 800; cursor: pointer; }
.day-buttons input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.day-buttons input:focus-visible + span { outline: 3px solid var(--accent-soft); }

.panel-school-picker { display: flex; min-width: min(340px, 100%); flex-direction: column; gap: 5px; font-weight: 700; }
.branding-title { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.branding-title h3 { margin-bottom: 0; }
.school-logo-placeholder { display: grid; width: 55px; height: 55px; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 23px; font-weight: 850; }
.school-logo-placeholder img { width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.branding-help { display: flex; align-items: flex-start; gap: 11px; border: 1px solid #91dff1; border-radius: 14px; background: #dcf8ff; padding: 12px 15px; color: #0c5f70; }
.branding-help-icon { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 50%; background: #159ab7; color: #fff; font-family: serif; font-weight: 900; }
.branding-help strong { display: block; margin-bottom: 2px; color: #074d5c; }
.branding-help p { margin: 0; font-size: 13px; line-height: 1.55; }
.branding-upload-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.branding-upload { display: flex; min-width: 0; flex-direction: column; gap: 11px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 15px; }
.branding-upload-heading { display: flex; min-height: 48px; align-items: flex-start; justify-content: space-between; gap: 8px; }
.branding-upload-heading strong { display: block; color: var(--ink); font-size: 16px; }
.branding-upload-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.4; }
.upload-status { flex: 0 0 auto; border-radius: 999px; background: #f1f2f7; padding: 5px 8px; color: #686b80; font-size: 10px; font-weight: 800; white-space: nowrap; }
.upload-status.available { background: #e2f7ef; color: #087a57; }
.upload-status.pending { background: #e9e8ff; color: #4e49d8; }
.upload-status.missing { background: #fff0f1; color: #bd3345; }
.image-preview { display: grid; width: 100%; min-height: 205px; place-items: center; overflow: hidden; border: 1px dashed var(--line); border-radius: 14px; background: linear-gradient(145deg, var(--surface), var(--soft-surface)); color: var(--muted); font-size: 12px; }
.image-preview.landscape { min-height: 205px; }
.image-preview img { width: 100%; height: 100%; min-height: 205px; object-fit: cover; }
.image-preview[data-preview="logo"] img { background: #fff; object-fit: contain; }
.image-preview-state { display: flex; max-width: 230px; flex-direction: column; align-items: center; gap: 5px; padding: 18px; text-align: center; }
.image-preview-state-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: #ededff; color: var(--accent); font-size: 21px; font-weight: 900; }
.image-preview-state strong { color: var(--ink); font-size: 13px; }
.image-preview-state small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.5; }
.image-preview-state.missing .image-preview-state-icon { background: #fff0f1; color: #c83d50; }
.image-preview-state.missing strong { color: #a72b3b; }
.branding-file-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--soft-surface); }
.branding-file-button { margin: 0; border-right: 1px solid var(--line); background: var(--accent-soft); padding: 10px 12px; color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 800; white-space: nowrap; }
.branding-file-button:hover { filter: brightness(.97); }
.branding-file-picker > span { overflow: hidden; padding: 0 10px; color: var(--muted); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.branding-file-detail { min-height: 38px; border-radius: 10px; background: var(--soft-surface); padding: 8px 10px; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.45; }
.branding-image-guidance { display: grid; gap: 4px; margin: 0; padding: 0; color: var(--muted); font-size: 11px; font-weight: 550; list-style: none; }
.branding-image-guidance li::before { content: "✓"; margin-right: 6px; color: #139b70; font-weight: 900; }
.remove-check { display: flex; align-items: center; gap: 7px; margin-top: auto; border-top: 1px solid #ececf2; padding-top: 10px; color: var(--danger); font-size: 11px; font-weight: 650; }
.remove-check input { width: 16px; min-height: 16px; }
.single-end { display: flex; justify-content: flex-end; }
.single-end .button { min-width: 240px; }

.toast-region { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: flex; width: min(370px, calc(100% - 40px)); flex-direction: column; gap: 9px; }
.toast { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 11px; background: var(--surface); padding: 12px 14px; color: var(--ink); font-weight: 700; }
.toast.error { border-left-color: var(--danger); }
.swal2-popup { border-radius: 22px !important; font-family: var(--font) !important; padding: 1.6rem !important; }
.swal2-title { color: var(--ink) !important; font-size: 1.45rem !important; }
.swal2-html-container { color: var(--muted) !important; }
.swal2-confirm { border-radius: 11px !important; background: var(--accent) !important; font-weight: 750 !important; }
.swal2-cancel { border-radius: 11px !important; font-weight: 750 !important; }
.display-theme-midnight .swal2-popup { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.swal2-toast { border-radius: 14px !important; box-shadow: 0 12px 38px rgba(38, 40, 75, .16) !important; }

/* Copyright */
.system-copyright {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px 14px;
  margin-top: 44px;
  border-top: 1px solid var(--line);
  padding: 20px 12px 4px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.system-copyright p { margin: 0; }
.system-copyright .developer-contact { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.system-copyright strong { color: var(--ink); }
.system-copyright a { color: var(--accent); font-weight: 750; }
.system-copyright a:hover { text-decoration: underline; }
.login-card .system-copyright { margin-top: 28px; padding: 18px 0 0; }

/* Clock theme and Kiosk staff */
.theme-layout { align-items: stretch; }
.display-theme-field { min-width: 0; margin: 0; border: 0; padding: 0; }
.display-theme-field legend { margin-bottom: 9px; font-size: 14px; font-weight: 800; }
.display-theme-options { display: grid; gap: 9px; }
.display-theme-option { position: relative; display: block; cursor: pointer; }
.display-theme-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.display-theme-card {
  display: grid;
  min-height: 72px;
  grid-template-columns: 54px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 10px 12px;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.display-theme-option:hover .display-theme-card { border-color: var(--accent); transform: translateY(-1px); }
.display-theme-option > input:checked + .display-theme-card {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .12);
}
.display-theme-option > input:focus-visible + .display-theme-card { outline: 3px solid rgba(var(--accent-rgb), .24); outline-offset: 2px; }
.theme-swatch {
  --swatch-accent: #5b5ce2;
  --swatch-soft: #eeeeff;
  --swatch-surface: #fff;
  display: grid;
  width: 54px;
  height: 46px;
  grid-template-columns: 14px 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  overflow: hidden;
  border: 1px solid rgba(80, 82, 105, .16);
  border-radius: 10px;
  background: var(--swatch-soft);
  padding: 6px;
}
.theme-swatch::before { grid-row: 1 / -1; border-radius: 4px; background: var(--swatch-accent); content: ""; }
.theme-swatch i { border-radius: 3px; background: var(--swatch-surface); }
.theme-swatch-ocean { --swatch-accent: #147dad; --swatch-soft: #e2f4fb; }
.theme-swatch-forest { --swatch-accent: #28744f; --swatch-soft: #e3f3e9; }
.theme-swatch-sunrise { --swatch-accent: #c45b20; --swatch-soft: #ffede1; --swatch-surface: #fffefd; }
.theme-swatch-midnight { --swatch-accent: #9293ff; --swatch-soft: #171923; --swatch-surface: #303342; }
.display-theme-copy { display: flex; min-width: 0; flex-direction: column; }
.display-theme-copy strong { font-size: 14px; }
.display-theme-copy small { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; font-weight: 500; }
.theme-check {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  transform: scale(.75);
  transition: opacity .16s ease, transform .16s ease;
}
.display-theme-option > input:checked + .display-theme-card .theme-check { opacity: 1; transform: scale(1); }
.theme-clock-heading { margin: 0 0 4px; font-size: 18px; }
.color-field { gap: 9px !important; }
.color-input-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 12px;
}
.color-input-row input[type="color"] {
  width: 76px;
  height: 52px;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--input-bg);
  padding: 5px;
}
.color-input-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-input-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.color-input-row output {
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft-surface);
  padding: 13px 15px;
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 800;
  letter-spacing: .04em;
}
.outline-width-field { gap: 10px !important; }
.range-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.range-field-heading output {
  min-width: 58px;
  border-radius: 999px;
  background: var(--accent-soft);
  padding: 4px 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
.outline-width-field input[type="range"] {
  width: 100%;
  min-height: 24px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}
.range-scale { display: flex; justify-content: space-between; color: var(--muted); }
.range-scale small { font-size: 11px; }
.theme-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 13px;
  background: var(--accent-soft);
  padding: 13px 15px;
  color: var(--accent);
}
.theme-note span { color: var(--muted); font-size: 13px; font-weight: 500; }
.clock-theme-preview {
  position: relative;
  display: grid;
  min-height: 300px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), .18), transparent 38%),
    linear-gradient(145deg, var(--surface), var(--soft-surface));
}
.clock-theme-preview::after {
  position: absolute;
  inset: 0;
  background: var(--preview-overlay);
  content: "";
}
.clock-theme-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
}
.clock-theme-preview canvas { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.preview-help { margin: 14px 2px 0; }
.staff-access-note {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
  border: 1px solid #ccebdd;
  border-radius: 15px;
  background: #f0fbf6;
  padding: 14px 17px;
  color: #176c4e;
}
.staff-access-note > span:last-child { display: flex; flex-direction: column; }
.staff-access-note small { color: #5d786d; }
.staff-access-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-weight: 900;
}
.device-intro {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  border: 1px solid #dcdcff;
  border-radius: 17px;
  background: #f7f7ff;
  padding: 17px 19px;
}
.device-intro-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 21px;
  font-weight: 900;
}
.device-intro p { margin: 2px 0 0; color: var(--muted); }
.device-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 18px; }
.device-help-grid > div { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); padding: 14px 16px; }
.device-help-grid p { margin: 5px 0 0; color: var(--muted); }
.device-help-grid kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--soft-surface); color: var(--ink); padding: 1px 6px; font: inherit; font-size: 12px; font-weight: 800; }
.device-server-url {
  display: block;
  min-height: 46px;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f7f8fb;
  padding: 11px 13px;
  color: #53566b;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
}
.install-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.install-steps li { display: flex; align-items: flex-start; gap: 11px; }
.install-steps li > span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}
.install-steps p { display: flex; flex-direction: column; margin: 0; }
.install-steps small { color: var(--muted); }
.device-row .device-icon { background: #edf1ff; color: var(--accent); }
.device-row .row-copy small { max-width: 560px; }
.kiosk-maintenance-downloads { display: grid; gap: 8px; margin-top: 10px; }
.kiosk-maintenance-downloads .button { width: 100%; justify-content: center; }

/* Kiosk */
.kiosk-page {
  position: relative;
  min-height: 100vh;
  background: var(--kiosk-canvas);
  padding-bottom: 96px;
}
.kiosk-background-image { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--kiosk-background-opacity); pointer-events: none; }
.kiosk-background-image[hidden], .kiosk-logo[hidden], .kiosk-banner[hidden] { display: none !important; }
.kiosk-shell { position: relative; z-index: 1; width: min(1120px, calc(100% - 56px)); margin: 0 auto; padding: 34px 0 50px; }
.kiosk-logo { width: 64px; height: 64px; border-radius: 50%; }
.kiosk-banner { display: block; width: 100%; max-height: 190px; margin-top: 24px; border-radius: 20px; object-fit: cover; }
.kiosk-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.kiosk-header h1 { margin-bottom: 5px; font-size: clamp(22px, 3vw, 34px); }
.kiosk-header p:last-child { margin-bottom: 0; }
.kiosk-actions { display: flex; align-items: center; gap: 11px; }
.kiosk-stop-audio {
  border: 1px solid var(--danger);
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger);
  padding: 10px 15px;
  font-weight: 850;
  white-space: nowrap;
}
.kiosk-stop-audio:hover { border-color: var(--danger); background: var(--danger); color: #fff; }
.kiosk-stop-audio[hidden] { display: none !important; }
.kiosk-role-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 7px 12px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}
.bell-orb { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 29px; }
.bell-orb-large { width: 82px; height: 82px; font-size: 40px; }
.kiosk-fullscreen, .kiosk-logout { border-radius: 50%; }
.clock-section { padding: clamp(36px, 6vh, 72px) 0 28px; text-align: center; }
.clock-section .eyebrow { margin-bottom: 10px; }
.kiosk-clock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(14px, 2vw, 32px);
  color: var(--kiosk-clock-color, #20213a);
  font-size: clamp(76px, 13vw, 164px);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: .96;
}
.kiosk-clock span, .kiosk-clock small {
  -webkit-text-stroke: var(--kiosk-clock-outline-width, 4px) var(--kiosk-clock-outline-color, #fff);
  paint-order: stroke fill;
}
.kiosk-clock > span { letter-spacing: -.035em; }
.kiosk-clock small { color: inherit; font-size: .46em; letter-spacing: -.015em; opacity: .52; }
.next-card {
  display: grid;
  min-height: 122px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--accent-soft);
  padding: 24px 28px;
}
.next-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 27px; }
.next-copy p { margin-bottom: 3px; color: var(--accent); font-weight: 750; }
.next-copy h2 { margin-bottom: 0; font-size: clamp(21px, 3vw, 31px); }
.next-card time { color: var(--accent); font-size: clamp(27px, 4vw, 44px); font-variant-numeric: tabular-nums; font-weight: 850; }
.next-card.done { border-color: var(--line); background: var(--soft-surface); }
.next-card.done .next-icon { background: #888b9d; }
.next-card.done .next-copy p, .next-card.done time { color: #777a8b; }
.timeline-section { padding-top: 46px; }
.kiosk-section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.kiosk-section-heading h2 { margin-bottom: 0; font-size: 27px; }
.kiosk-timeline { position: relative; }
.timeline-row { position: relative; display: grid; min-height: 86px; grid-template-columns: 100px 48px 1fr auto; align-items: start; gap: 6px; }
.timeline-row::before { position: absolute; z-index: 0; top: 30px; bottom: -8px; left: 123px; width: 2px; background: var(--line); content: ""; }
.timeline-row:last-child::before { display: none; }
.timeline-time { padding-top: 8px; font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 800; }
.timeline-dot { position: relative; z-index: 1; display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); color: transparent; font-size: 15px; }
.timeline-copy { padding-top: 4px; }
.timeline-copy strong { display: block; font-size: 18px; }
.timeline-copy small { color: var(--muted); }
.timeline-state { margin-top: 4px; }
.timeline-row.played .timeline-dot { border-color: var(--success); background: var(--success); color: #fff; }
.timeline-row.played .timeline-time, .timeline-row.played .timeline-copy { color: #7c7f90; }
.timeline-row.failed .timeline-dot { border-color: var(--danger); background: var(--danger); color: #fff; }
.timeline-row.failed .timeline-time, .timeline-row.failed .timeline-copy strong { color: var(--danger); }
.timeline-row.missed .timeline-dot { border-color: var(--warning); background: var(--warning-soft); color: var(--warning); }
.timeline-row.missed .timeline-time, .timeline-row.missed .timeline-copy { color: var(--muted); }
.timeline-row.next .timeline-dot { border-color: var(--accent); color: var(--accent); }
.timeline-row.next .timeline-time, .timeline-row.next .timeline-copy strong { color: var(--accent); }
.connection-bar {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: 86px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-top: 1px solid transparent;
  padding: 8px 12px 6px;
  font-weight: 750;
}
.connection-status-line { display: flex; align-items: center; justify-content: center; gap: 10px; }
.connection-bar .system-copyright {
  width: auto;
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.connection-bar .system-copyright strong { color: var(--ink); }
.connection-bar .system-copyright a { color: var(--accent); }
.connection-bar.online { border-color: #bfe8d7; background: var(--success-soft); color: var(--success); }
.connection-bar.offline { border-color: #f5c5cb; background: var(--danger-soft); color: var(--danger); }
.connection-bar.pending { border-color: var(--line); background: var(--soft-surface); color: var(--muted); }
.wifi-icon { font-size: 23px; }
.start-overlay { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; background: rgba(32, 33, 58, .74); padding: 24px; }
.start-overlay.hidden { display: none; }
.start-card { width: min(480px, 100%); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); padding: 38px; color: var(--ink); text-align: center; }
.start-card .bell-orb { margin: 0 auto 22px; }
.start-card h2 { margin-bottom: 10px; font-size: 32px; }
.start-card p:not(.eyebrow) { margin-bottom: 25px; color: var(--muted); }
.start-card .button { width: 100%; }
.start-card > small { display: block; margin-top: 16px; color: var(--muted); }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .form-layout { grid-template-columns: 1fr; }
  .school-form-card { position: static; }
  .school-profile-summary { grid-template-columns: 1fr; }
  .branding-upload-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .login-shell { display: block; width: 100%; min-height: 100vh; margin: 0; border-radius: 0; }
  .login-brand { display: none; }
  .login-card { min-height: 100vh; padding: 32px 24px; }
  .mobile-brand { display: flex; }
  .sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 9px 12px;
  }
  .sidebar-brand { display: none; }
  .sidebar-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-right: 0; }
  .nav-item { width: auto; flex: 0 0 auto; padding: 9px 11px; }
  .nav-item span { display: none; }
  .sidebar-footer { display: none; }
  .dashboard-main { width: 100%; max-width: 100%; margin-left: 0; padding: 22px 16px 50px; }
  .dashboard-header { margin-bottom: 27px; }
  .dashboard-header h1 { font-size: 22px; }
  .dashboard-header .button { padding: 9px 11px; font-size: 12px; }
  .dashboard-header-actions { flex-wrap: wrap; }
  .button-manage-kiosk { order: -1; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .panel-school-picker { width: 100%; }
  .inline-form { width: 100%; flex-wrap: wrap; }
  .inline-form label, .inline-form input, .inline-form select { min-width: 0; flex: 1; }
  .kiosk-status-toolbar { align-items: stretch; flex-direction: column; }
  .content-grid { grid-template-columns: 1fr; }
  .device-help-grid { grid-template-columns: 1fr; }
  .sample-audio-grid { grid-template-columns: 1fr; }
  .kiosk-shell { width: min(100% - 28px, 1120px); padding-top: 22px; }
  .kiosk-header .eyebrow { display: none; }
  .kiosk-actions { flex-wrap: wrap; justify-content: flex-end; }
  .kiosk-stop-audio { order: 5; }
  .bell-orb { width: 49px; height: 49px; }
  .clock-section { padding-top: 42px; }
  .next-card { grid-template-columns: auto 1fr; gap: 14px; padding: 19px; }
  .next-icon { width: 48px; height: 48px; }
  .next-card time { grid-column: 2; }
  .timeline-row { grid-template-columns: 64px 39px 1fr; }
  .timeline-row::before { left: 82px; }
  .timeline-state { display: none; }
}

@media (max-width: 520px) {
  .metric-grid { grid-template-columns: 1fr; }
  .surface { padding: 17px; }
  .two-fields, .form-actions { grid-template-columns: 1fr; }
  .school-card-head { align-items: flex-start; padding: 14px; }
  .school-card-identity { align-items: flex-start; gap: 10px; }
  .school-card-logo { width: 45px; height: 45px; flex-basis: 45px; border-radius: 11px; }
  .school-card-actions { grid-template-columns: 1fr; padding: 10px 14px 14px; }
  .school-action.primary { grid-column: auto; }
  .data-row { align-items: flex-start; }
  .row-actions { flex-direction: column; align-items: stretch; }
  .sample-audio-heading .button { width: 100%; }
  .sample-audio-item { grid-template-columns: auto minmax(0, 1fr); }
  .sample-audio-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .kiosk-status-filters { flex-direction: column; }
  .kiosk-status-filters label:last-child { width: auto; }
  .kiosk-status-row { grid-template-columns: 1fr; }
  .kiosk-status-identity { align-items: flex-start; }
  .kiosk-status-logo { display: none; }
  .kiosk-status-badges { justify-content: flex-start; padding-left: 56px; }
  .kiosk-device-status-list { padding-left: 0; }
  .kiosk-device-status-row { grid-template-columns: minmax(0, 1fr) auto; }
  .kiosk-device-status-row .row-action { grid-column: 1 / -1; }
  .day-buttons { gap: 3px; }
  .branding-upload-grid { grid-template-columns: 1fr; }
  .day-buttons span { min-height: 38px; font-size: 11px; }
  .kiosk-clock { font-size: 23vw; }
  .kiosk-page { padding-bottom: 118px; }
  .connection-bar { min-height: 108px; padding-inline: 8px; }
  .connection-bar .system-copyright { max-width: 100%; line-height: 1.35; }
  .connection-bar .copyright-separator { display: none; }
  .timeline-row { grid-template-columns: 58px 35px 1fr; gap: 3px; }
  .timeline-row::before { left: 73px; }
  .timeline-dot { width: 29px; height: 29px; }
  .timeline-copy strong { font-size: 16px; }
  .start-card { padding: 29px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}