:root {
  color-scheme: light;
  --bg: #f0f4f9;
  --shell: #ffffff;
  --rail: #ffffff;
  --ink: #1a2133;
  --ink-secondary: #3d4a5c;
  --muted: #7a8799;
  --line: #e1e8f0;
  --line-soft: #edf1f7;
  --accent: #ff5a1f;
  --accent-hover: #e54a10;
  --accent-soft: rgb(255 90 31 / 10%);
  --accent-glow: 0 0 0 3px rgb(255 90 31 / 18%);
  --green: #16a34a;
  --green-bg: rgb(22 163 74 / 12%);
  --amber: #d97706;
  --amber-bg: rgb(217 119 6 / 12%);
  --red: #dc2626;
  --red-bg: rgb(220 38 38 / 12%);
  --shadow: 0 4px 24px rgb(15 25 50 / 8%), 0 1px 4px rgb(15 25 50 / 5%);
  --shadow-sm: 0 2px 8px rgb(15 25 50 / 6%);
  --shadow-lg: 0 8px 40px rgb(15 25 50 / 12%), 0 2px 8px rgb(15 25 50 / 6%);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
}

/* ── Dark theme ──
   NOTE: uses html[data-theme="dark"] (specificity 0,1,1) so it always
   beats the two :root blocks (0,1,0) regardless of where they appear
   later in the file. A plain [data-theme="dark"] selector was being
   overridden by the legacy "Reverted shell" :root block further down. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --shell: #131c2e;
  --rail: #131c2e;
  --ink: #eaf0f9;
  --ink-secondary: #b3c0d4;
  --muted: #7e8ca3;
  --line: #243248;
  --line-soft: #1c2738;
  --accent: #ff6a33;
  --accent-hover: #ff7d4d;
  --accent-soft: rgb(255 106 51 / 16%);
  --accent-glow: 0 0 0 3px rgb(255 106 51 / 25%);
  --green: #34d399;
  --green-bg: rgb(52 211 153 / 14%);
  --amber: #fbbf24;
  --amber-bg: rgb(251 191 36 / 14%);
  --red: #f87171;
  --red-bg: rgb(248 113 113 / 14%);
  --shadow: 0 4px 24px rgb(0 0 0 / 40%), 0 1px 4px rgb(0 0 0 / 30%);
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 30%);
  --shadow-lg: 0 8px 40px rgb(0 0 0 / 50%), 0 2px 8px rgb(0 0 0 / 35%);
  --soft-shadow: 0 8px 22px rgb(0 0 0 / 35%);
}

/* Dark-mode overrides for elements with intentionally semantic (non-variable) colours */
[data-theme="dark"] .field-error {
  background: var(--red-bg);
  color: var(--red);
}
[data-theme="dark"] .auth-message {
  background: var(--red-bg);
  color: var(--red);
}
[data-theme="dark"] .auth-forgot {
  color: var(--accent);
}
[data-theme="dark"] .auth-shell {
  background:
    radial-gradient(ellipse at 70% 20%, rgb(255 106 51 / 12%) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgb(99 120 255 / 10%) 0%, transparent 50%),
    linear-gradient(160deg, #0b1220 0%, #0e1626 100%);
}
[data-theme="dark"] .auth-card {
  background: rgba(19, 28, 46, 0.92);
}
[data-theme="dark"] .demo-credentials,
[data-theme="dark"] .auth-demo {
  background: var(--line-soft);
}
/* Theme-aware logo: black (navy) artwork by day, white artwork at night.
   Compound selectors so they beat the later `.brand-logo { display: block }`. */
.brand-logo.logo-night, .auth-logo.logo-night { display: none; }
html[data-theme="dark"] .brand-logo.logo-day,
html[data-theme="dark"] .auth-logo.logo-day { display: none; }
html[data-theme="dark"] .brand-logo.logo-night,
html[data-theme="dark"] .auth-logo.logo-night { display: block; }

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Native date/time pickers follow the brand accent (orange) instead of the
   browser's default blue selection highlight, to match the app theme. */
input[type="time"],
input[type="date"] {
  accent-color: var(--accent);
}

/* ── Custom date/time pickers ───────────────────────────────────────────
   Native time/date inputs are hidden (kept for value storage) and replaced
   with an app-styled trigger + popover so the selection highlight is the
   brand orange on every browser, instead of the OS-native blue. */
.picker-native-hidden { display: none !important; }

.picker-wrap { display: block; position: relative; width: 100%; }

.picker-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--shell);
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  transition: border-color 160ms, box-shadow 160ms;
}

.picker-field:hover { border-color: var(--accent); }

.picker-field:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}

.picker-field .picker-val { color: var(--ink); }
.picker-field .picker-caret { font-size: 14px; opacity: 0.7; line-height: 1; }

.picker-pop {
  position: fixed;
  z-index: 4000;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgb(15 23 42 / 22%);
  padding: 8px;
}

.picker-pop[hidden] { display: none; }

.picker-time { display: flex; gap: 6px; }

.picker-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 248px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.picker-opt {
  min-width: 56px;
  padding: 7px 14px;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.picker-opt:hover { background: var(--accent-soft); color: var(--accent); }
.picker-opt.is-sel { background: var(--accent); color: #fff; font-weight: 700; }

/* Custom <select> dropdowns — same text size as the time/date pickers
   (the shared .picker-field / .picker-opt rules supply the font size). */
.select-field .picker-val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--ink-secondary);
}
.select-field:hover .select-caret { border-top-color: var(--accent); }

.picker-select-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.picker-opt-row {
  min-width: 0;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  font-variant-numeric: normal;
  white-space: nowrap;
}
.picker-opt-row:disabled { opacity: 0.4; cursor: not-allowed; }

.picker-cal { width: 248px; }

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 8px;
}

.cal-head strong { font-size: 15px; color: var(--ink); }

.cal-nav {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 17px;
  line-height: 1;
}

.cal-nav:hover { background: var(--accent-soft); color: var(--accent); }

.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

.cal-dow span {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 2px 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-empty { aspect-ratio: 1; }

.cal-day {
  aspect-ratio: 1;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.cal-day:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.cal-day.is-sel { background: var(--accent); color: #fff; font-weight: 700; }
.cal-day:disabled { opacity: 0.3; cursor: not-allowed; }

button {
  border: 0;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 120ms ease;
}

a {
  color: var(--accent);
  text-decoration: none;
}

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

.app-shell {
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr);
  grid-template-columns: 1fr;
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

.sidebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--shell);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding-right: 20px;
  border-right: 0;
  margin-right: 8px;
  text-decoration: none;
}

.brand-logo {
  height: 28px;
  width: auto;
}

.brand-mark {
  display: none;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.brand span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

.nav {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 140ms ease, color 140ms ease;
  white-space: nowrap;
}

.nav button:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.nav button.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.nav button.active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -13px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
}

.nav-icon {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-icon::before,
.nav-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.icon-dashboard::before {
  clip-path: inset(0 49% 49% 0);
}

.icon-dashboard::after {
  inset: 9px 0 0 9px;
}

.icon-screens::before {
  inset: 2px 1px 5px;
  border-radius: 3px;
}

.icon-screens::after {
  inset: auto 5px 1px;
  height: 3px;
  border-radius: 2px;
}

.icon-media::before {
  border-radius: 4px;
}

.icon-media::after {
  inset: 5px 4px 4px 7px;
  border-width: 0 0 2px 2px;
  border-radius: 0;
  transform: rotate(-45deg);
}

.icon-playlists::before {
  inset: 2px 4px 12px 4px;
}

.icon-playlists::after {
  inset: 9px 4px 3px 4px;
}

.icon-schedules::before {
  border-radius: 50%;
}

.icon-schedules::after {
  inset: 4px 8px 8px 8px;
  border-width: 0 0 2px 2px;
  border-radius: 0;
}

.icon-reports::before {
  inset: 3px 11px 2px 2px;
}

.icon-reports::after {
  inset: 8px 6px 2px 8px;
}

.icon-player::before {
  inset: 3px 1px 5px;
}

.icon-player::after {
  inset: 7px 6px 7px 8px;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
  border-radius: 0;
}

/* Right-aligned cluster at the end of the top bar: notifications | OS | dev status. */
.sidebar-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.sidebar-sep {
  align-self: stretch;
  width: 1px;
  min-height: 30px;
  background: var(--line);
}
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-footer .pill {
  font-size: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgb(255 90 31 / 20%);
}

#syncStatus {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.global-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.main {
  min-width: 0;
  padding: 0 20px 20px;
  background: var(--bg);
  overflow: auto;
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.topbar > div:first-child {
  min-width: 0;
}

body[data-route="screens"] .topbar {
  display: none;
}

.sync-status {
  display: none;
}

.get-started {
  min-height: 36px;
  border-radius: 999px;
  padding: 0 16px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.2;
}

h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

p {
  margin-top: 0;
}

.muted {
  color: var(--muted);
  font-size: 14px;
}

.pairing-api-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 8px 0 0;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--ink);
  font-size: calc(13px + 2pt);
  font-weight: 800;
}

h1 {
  margin-bottom: 0;
  font-size: calc(32px + 2pt);
  line-height: 1.08;
}

h2 {
  font-size: calc(18px + 2pt);
  margin-bottom: 14px;
}

h3 {
  font-size: calc(16px + 2pt);
  margin-bottom: 8px;
}

.top-actions,
.actions,
.inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.top-actions {
  margin-left: auto;
  justify-content: flex-end;
  row-gap: 8px;
}

.top-actions > * {
  flex: 0 0 auto;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(280px, 22vw);
  min-width: 180px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  transition: border-color 160ms, box-shadow 160ms;
}

.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
  background: var(--shell);
}

.search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
}

.search-box input::placeholder {
  color: var(--muted);
}

.search-dot {
  width: 12px;
  height: 12px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color 160ms;
}

.search-box:focus-within .search-dot {
  border-color: var(--accent);
}

.search-dot::after {
  content: "";
  display: block;
  width: 6px;
  height: 2px;
  background: var(--muted);
  transform: translate(7px, 7px) rotate(45deg);
}

.primary,
.ghost,
.danger,
.mini-button,
.icon-button,
.profile-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 3px rgb(255 90 31 / 30%);
}

.primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 2px 8px rgb(255 90 31 / 40%);
  transform: translateY(-1px);
}

.primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgb(255 90 31 / 25%);
}

.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ghost,
.mini-button,
.icon-button,
.profile-button {
  border: 1px solid var(--line);
  background: var(--shell);
  color: var(--ink-secondary);
  box-shadow: var(--shadow-sm);
}

.ghost:hover,
.mini-button:hover,
.icon-button:hover {
  border-color: var(--line);
  background: var(--bg);
  color: var(--ink);
}

.icon-button {
  display: grid;
  width: 36px;
  min-height: 36px;
  padding: 0;
  place-items: center;
}

.profile-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  min-height: 36px;
  border-radius: 999px;
}

.profile-button:hover {
  background: var(--bg);
}

.profile-button #profileName {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.avatar {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff8a50);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  flex-shrink: 0;
}

.danger {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgb(220 38 38 / 20%);
}

.danger:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.view {
  display: grid;
  gap: 16px;
}

.opti-workspace {
  min-height: calc(100vh - 80px);
  border-radius: var(--radius);
  background: var(--shell);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.opti-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 18px 28px;
}

.opti-breadcrumb,
.opti-actions,
.opti-filter-bar,
.view-tools {
  display: flex;
  align-items: center;
}

.opti-breadcrumb {
  gap: 14px;
  color: var(--ink);
  font-size: calc(20px + 2pt);
}

.opti-actions {
  gap: 10px;
}

.opti-button,
.opti-primary {
  min-height: 43px;
  padding: 0 18px;
  border-radius: 7px;
  font-weight: 800;
}

.opti-button {
  border: 1px solid var(--line);
  background: var(--shell);
  color: var(--ink);
}

.opti-filter-bar {
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  padding: 0 28px 14px;
  border-bottom: 1px solid var(--line);
}

.opti-local-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(460px, 36vw);
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--line-soft);
  color: var(--muted);
}

.opti-local-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.view-tools {
  gap: 6px;
}

.view-tools .icon-button {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: var(--muted);
}

.view-tools .icon-button.active {
  background: var(--line-soft);
  color: var(--ink);
}

.opti-list {
  padding: 28px 24px 0;
}

.folder-toggle {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--shell);
  color: var(--ink);
  font-weight: 900;
}

.folder-toggle span {
  color: var(--muted);
}

.opti-row {
  display: grid;
  grid-template-columns: 28px 24px auto auto 1fr 28px;
  align-items: center;
  gap: 10px;
  min-height: 59px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.opti-row.selected {
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.opti-row.onhold {
  grid-template-columns: 28px 24px auto auto 1fr;
  margin-top: 10px;
  border-bottom: 0;
}

.check-cell {
  display: grid;
  place-items: center;
}

.check-cell input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #c8d0d9;
  border-radius: 7px;
  background: var(--shell);
}

.folder-icon {
  width: 18px;
  height: 14px;
  border: 2px solid #8d97a3;
  border-radius: 3px;
  position: relative;
}

.folder-icon::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -6px;
  width: 9px;
  height: 6px;
  border: 2px solid #8d97a3;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

.pause-dot {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #ffbc76;
  border-radius: 50%;
  color: #ff9f4d;
  font-size: calc(11px + 2pt);
}

.row-more {
  justify-self: end;
  background: transparent;
  color: var(--ink);
  font-size: calc(23px + 2pt);
}

.grid-4,
.grid-3,
.grid-1,
.grid-2,
.dashboard-grid,
.asset-strip {
  display: grid;
  gap: 16px;
}

.grid-1 {
  grid-template-columns: 1fr;
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.playlist-builder-grid {
  grid-template-columns: minmax(220px, 0.82fr) minmax(300px, 1.18fr);
}

/* ===== Playlist Builder — 3-column layout =====
   [ Playlist Folders + Playlists (stacked) ] [ Playback Order ] [ Media Library ] */
.playlist-workspace {
  display: grid;
  /* Wide left column; Playback Order (middle) and Media Library (right) share
     the remaining space equally. */
  grid-template-columns: minmax(420px, 520px) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.playlist-col-left {
  display: grid;
  gap: 16px;
  align-content: start;
}
.playlist-col-left .folder-panel {
  width: auto;
}
.playlist-list-scroll {
  max-height: 320px;
  overflow-y: auto;
}
/* LIST view → compact one-liners:
   [✓] [ title (ellipsis) … items · status ] [⋯] */
.playlist-list-panel .playlist-row.is-list-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
}
.playlist-list-panel .playlist-row.is-list-row .bulk-check { margin: 0 0 0 4px; }
.playlist-list-panel .playlist-row.is-list-row .playlist-row-select {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 8px 10px;
}
.playlist-list-panel .playlist-row.is-list-row .playlist-row-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.playlist-list-panel .playlist-row.is-list-row .playlist-row-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}
.playlist-list-panel .playlist-row.is-list-row .playlist-row-meta {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.playlist-list-panel .playlist-row.is-list-row .playlist-row-hint { display: none; }
.playlist-list-panel .playlist-row.is-list-row .playlist-row-actions { flex: 0 0 auto; }

/* CARD view keeps the default card layout (base .playlist-row grid). */

/* Bulk action bar on its own full-width row, with a clear gap from the
   New Playlist button above it. */
.playlist-bulk-row {
  margin: 12px 0 14px;
}
.playlist-bulk-row .bulk-bar {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.playback-order-panel .playlist-drop-list {
  max-height: 56vh;
  overflow-y: auto;
}
.media-library-panel .asset-tray {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.media-library-panel .asset-list {
  max-height: 60vh;
  overflow-y: auto;
}

@media (max-width: 1180px) {
  .playlist-workspace {
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
  }
  .playlist-workspace .media-library-panel {
    grid-column: 1 / -1;
  }
  .media-library-panel .asset-list { max-height: 340px; }
}
@media (max-width: 760px) {
  .playlist-workspace {
    grid-template-columns: 1fr;
  }
}

.media-workspace,
.managed-workspace {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
}

.managed-content {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

.dashboard-grid {
  grid-template-columns: minmax(320px, 1fr) minmax(210px, 0.56fr);
  align-items: start;
}

.asset-strip {
  grid-template-columns: 1fr;
}

.analytics-grid {
  display: grid;
  grid-template-columns: minmax(178px, 1fr) minmax(178px, 1fr) minmax(156px, 0.82fr);
  grid-template-areas:
    "likes donut insights"
    "activity activity chart";
  gap: 18px;
  align-items: stretch;
}

.analytics-grid > * {
  min-width: 0;
}

.like-card,
.donut-card,
.mini-insight,
.activity-panel,
.chart-panel {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--shell);
  box-shadow: var(--soft-shadow);
}

.like-card {
  grid-area: likes;
  min-height: 225px;
  padding: 24px;
  background: var(--accent);
  color: var(--shell);
  display: flex;
  flex-direction: column;
}

.like-card .card-head,
.donut-card .card-head,
.chart-panel .card-head {
  align-items: center;
}

.analytics-tools {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.analytics-menu {
  min-width: 220px;
  right: 0;
  top: calc(100% + 8px);
  z-index: 24;
}

.like-card .card-head span,
.donut-card .card-head span {
  font-size: calc(14px + 2pt);
  font-weight: 850;
}

.like-number {
  display: block;
  margin-top: 18px;
  font-size: calc(37px + 2pt);
  line-height: 1;
}

.like-splits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: auto; /* fill the card: pin the splits row to the bottom */
  padding-top: 36px;
}

.like-splits span {
  display: grid;
  gap: 4px;
  border-right: 1px solid rgb(247 246 242 / 28%);
  color: rgb(247 246 242 / 76%);
  font-size: calc(12px + 2pt);
  font-weight: 750;
}

.like-splits span:last-child {
  border-right: 0;
}

.like-splits strong {
  color: var(--shell);
  font-size: calc(18px + 2pt);
}

.donut-card {
  grid-area: donut;
  min-height: 225px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.donut-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(82px, 1fr);
  align-items: center;
  align-content: center; /* vertically centre the donut block to fill the card */
  gap: 18px;
  margin-top: 22px;
  flex: 1;
}

.donut-number {
  display: block;
  margin-bottom: 16px;
  font-size: calc(35px + 2pt);
}

.donut-layout small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-weight: 800;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--rail);
}

.dot.accent,
.bar-stack .hot,
.progress span {
  background: var(--accent);
}

.muted-dot {
  background: var(--line);
}

.donut {
  position: relative;
  display: grid;
  width: min(126px, 100%);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--rail) 0 28%, var(--accent) 28% 78%, var(--line) 78% 100%);
}

.donut::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--shell);
}

.donut span {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent);
  transform: rotate(-35deg);
}

.insight-column {
  grid-area: insights;
  display: grid;
  gap: 18px;
}

.mini-insight {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
  min-height: 104px;
  padding: 18px;
}

.mini-insight strong {
  grid-row: span 2;
  font-size: calc(25px + 2pt);
}

.mini-insight span {
  align-self: start;
  color: var(--muted);
  font-weight: 850;
}

.progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
}
/* Health-check card: status note + warn fill when screens are offline. */
.progress span.is-warn { background: var(--warn, #ef9f27); }
/* Health Check card: the "5/13" value is wider than a single stat and there's an
   extra note line. Let the number column size to its content, top-align the rows,
   and run the note full-width below the bar so it never wraps in a narrow column. */
.mini-insight.health-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  row-gap: 6px;
}
.mini-insight.health-card strong { align-self: center; }
.health-card-note {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

.activity-panel {
  grid-area: activity;
  padding: 20px 22px;
}

.tabs {
  display: flex;
  gap: 28px;
  margin-bottom: 18px;
  color: var(--muted);
  font-weight: 850;
}

.tabs strong {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 10px;
}

.dash-tab {
  background: none;
  border: 0;
  padding: 0 0 10px;
  margin: 0;
  font: inherit;
  font-weight: 850;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.dash-tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Subscription trial banner + plan-locked nav tabs */
.trial-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding: 12px 16px;
  margin: 0 0 16px;
  border-radius: 12px;
  background: rgba(56, 138, 221, 0.12);
  border: 1px solid rgba(56, 138, 221, 0.35);
  font-size: 15px;
}
.trial-banner.is-warn {
  background: rgba(239, 159, 39, 0.14);
  border-color: rgba(239, 159, 39, 0.45);
}
.trial-banner.is-expired {
  background: rgba(226, 75, 74, 0.14);
  border-color: rgba(226, 75, 74, 0.5);
}
.trial-banner strong { color: var(--ink); }
.trial-banner span { color: var(--muted); }
/* Upgrade prompt (free-plan screen cap): text on the left, CTA on the right. */
.upgrade-banner { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.upgrade-banner > div { display: flex; flex-direction: column; gap: 2px; }
.upgrade-banner .primary { white-space: nowrap; }

[data-route].plan-locked {
  opacity: 0.45;
  position: relative;
}
[data-route].plan-locked::after {
  content: "🔒";
  font-size: 11px;
  margin-left: 6px;
  opacity: 0.8;
}

/* Screen-count purchase panel (Subscription) */
.screen-count-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0 0 18px;
  background: var(--shell);
}
.screen-count-big {
  text-align: center;
  margin-bottom: 12px;
}
.screen-count-big strong {
  font-size: 57px;
  font-weight: 300;
  color: var(--accent, #2f9e7e);
  line-height: 1;
}
.screen-count-big span { font-size: 29px; color: var(--accent); margin-left: 4px; }
.screen-count-table { width: 100%; max-width: 460px; margin: 0 auto 16px; border-collapse: collapse; }
.screen-count-table th { text-align: right; padding: 10px 16px 10px 0; width: 38%; color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--line-soft); }
.screen-count-table td { padding: 10px 0; color: var(--accent); border-bottom: 1px solid var(--line-soft); }
.screen-count-control {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.screen-count-control input {
  width: 80px;
  text-align: center;
  font-size: 17px;
  padding: 8px;
}
.screen-count-control .primary { margin-left: 8px; }
.scr-note { text-align: center; margin: 12px 0 0; font-size: 14px; }

/* Plan-gated feature placeholders */
.feature-lock {
  text-align: center;
  padding: 32px 20px;
  border: 1px dashed var(--line);
  border-radius: 14px;
}
.feature-lock-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--amber-bg);
  color: var(--amber);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
}
.feature-lock p { max-width: 460px; margin: 0 auto 16px; }
.feature-locked-row { opacity: 0.55; }

.activity-list {
  display: grid;
  gap: 10px;
  /* Show ~6 rows (54px min-height + 10px gap), scroll the rest within the card. */
  max-height: 374px;
  overflow-y: auto;
  padding-right: 4px;
}

.activity-row {
  display: grid;
  grid-template-columns: 42px minmax(128px, 1fr) 92px 72px 24px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgb(228 227 223 / 38%);
}

.activity-thumb {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--accent);
  color: var(--shell);
  font-weight: 900;
}

.activity-row strong,
.activity-row small {
  display: block;
}

.activity-row small,
.activity-row > span {
  color: var(--muted);
  font-size: calc(13px + 2pt);
  font-weight: 800;
}

.row-menu {
  color: var(--ink);
  letter-spacing: 0.08em;
}

.chart-panel {
  grid-area: chart;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.bar-stack {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 14px;
  flex: 1;             /* bars grow to fill the card height */
  min-height: 120px;
  margin: 18px 2px;
}

.chart-footer { margin-top: auto; }

.bar-stack span {
  display: block;
  width: 12px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--line);
}

.chart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  color: var(--muted);
  font-size: calc(14px + 2pt);
  font-weight: 800;
}

.chart-footer small {
  color: var(--muted);
  font-size: calc(12px + 2pt);
}

.chart-footer strong {
  color: var(--ink);
  font-size: calc(21px + 2pt);
}

.analytics-detail-panel {
  margin-top: 18px;
}

.panel,
.stat,
.screen-card,
.media-card,
.folder-panel,
.playlist-row,
.hero-card,
.asset-tile,
.promo-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--shell);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 180ms ease;
}

.screen-card:hover,
.media-card:hover,
.asset-tile:hover {
  box-shadow: var(--shadow);
  border-color: var(--line);
  transform: translateY(-1px);
}

.panel {
  padding: 18px;
}

.hero-card {
  min-height: 232px;
  padding: 18px;
  background: var(--accent);
  color: var(--shell);
  overflow: hidden;
  position: relative;
}

.hero-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 46%;
  height: 42%;
  border-right: 2px solid rgb(247 246 242 / 22%);
  border-bottom: 2px solid rgb(247 246 242 / 22%);
  transform: skewX(-14deg);
}

.hero-card h2 {
  color: var(--shell);
  margin-bottom: 6px;
  font-size: calc(16px + 2pt);
}

.hero-number {
  display: block;
  margin: 8px 0 24px;
  font-size: calc(31px + 2pt);
  font-weight: 900;
}

.hero-chart {
  position: relative;
  height: 92px;
  margin-top: 18px;
  overflow: hidden;
  color: var(--shell);
}

.hero-chart svg {
  width: 100%;
  height: 100%;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: rgb(247 246 242 / 68%);
  font-size: calc(11px + 2pt);
  font-weight: 900;
  text-transform: uppercase;
}

.asset-tile {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  min-height: 72px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}

.asset-tile:nth-child(1) {
  background: var(--shell);
}

.asset-tile:nth-child(2) {
  background: var(--shell);
}

.asset-tile:nth-child(3) {
  background: var(--shell);
}

.asset-tile strong {
  display: block;
  grid-column: 2;
  grid-row: 1;
  font-size: calc(23px + 2pt);
}

.asset-tile small {
  grid-column: 2;
  grid-row: 2;
  color: var(--muted);
  font-weight: 800;
}

.asset-tile .tile-icon {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  margin-top: 0;
  place-items: center;
  border-radius: 8px;
  background: var(--line);
  font-weight: 900;
}

.tile-change {
  position: static;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: end;
  color: var(--accent);
  font-size: calc(13px + 2pt);
  font-weight: 900;
}

.promo-card {
  min-height: 190px;
  padding: 24px;
  background: var(--rail);
  color: var(--shell);
  position: relative;
  overflow: hidden;
}

.promo-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -26px;
  width: 190px;
  height: 130px;
  border: 1px solid rgb(251 250 245 / 28%);
  transform: rotate(-18deg);
}

.promo-card h2 {
  max-width: 270px;
  color: var(--shell);
  font-size: calc(26px + 2pt);
  line-height: 1.1;
}

.promo-card p {
  max-width: 310px;
  color: var(--line);
  font-size: calc(14px + 2pt);
}

.stat {
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}

.stat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 200ms;
}

.stat:hover::after {
  opacity: 1;
}

.stat.soft {
  background: var(--shell);
}

.stat span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stat strong {
  display: block;
  margin-top: 6px;
  font-size: 33px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1.1;
}

.health-good,
.health-warn,
.health-bad,
.health-idle,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.health-good {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid rgb(22 163 74 / 20%);
}

.health-good::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-online 2s ease-in-out infinite;
}

@keyframes pulse-online {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.health-warn {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid rgb(217 119 6 / 20%);
}

.health-warn::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

.health-bad {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgb(220 38 38 / 20%);
}

.health-bad::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.health-idle {
  background: var(--line-soft);
  color: var(--ink-secondary);
  border: 1px solid var(--line);
}

.health-idle::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint, #98a2b3);
}

.pill {
  background: var(--line-soft);
  color: var(--ink-secondary);
  border: 1px solid var(--line);
}

/* ---- Schedule edit modal ---- */
.schedule-edit-panel {
  width: min(620px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  /* Tint the native date/time pickers to the CMS accent instead of browser blue. */
  accent-color: var(--accent);
}

.schedule-edit-panel .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start; /* don't stretch a hint-less field taller than its sibling */
}

/* Align label text with the input's text (both inset ~13px from the box edge). */
.schedule-edit-panel .field > label {
  padding-left: 13px;
}

/* Normalise every text/date/time control height so labels + fields line up
   across columns (native date/time inputs otherwise render taller). Checkboxes
   are excluded so the day tick-boxes keep their natural small size. */
.schedule-edit-panel .field input:not([type="checkbox"]),
.schedule-edit-panel .field select,
.schedule-edit-panel .day-picker > summary {
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
}

.req-mark {
  color: var(--accent);
  font-weight: 800;
}

/* Playlist program slots */
.schedule-entries {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.schedule-entries-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.schedule-entries-head h3 {
  margin: 0;
  font-size: 15px;
}

.schedule-entry-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--line-soft);
}

.schedule-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.schedule-entry-index {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-secondary);
}

.entry-remove {
  border: none;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
}

.entry-remove:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.entry-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.entry-days-field {
  margin-top: 10px;
}

/* Day tick-box picker */
.day-picker {
  position: relative;
}

.day-picker > summary {
  list-style: none;
  cursor: pointer;
  min-height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--shell);
  color: var(--ink);
  font-size: 15px;
}

.day-picker[open] > summary {
  border-color: var(--accent);
}

.day-picker > summary::-webkit-details-marker {
  display: none;
}

.day-picker > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--ink-secondary);
  font-size: 12px;
}

/* In-flow tick-box list (full width) so it's never clipped by the modal's
   scroll area and shows every day in full. */
.day-checks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 10px;
  margin-top: 8px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--shell);
}

.day-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.day-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.add-entry-btn {
  width: 100%;
  justify-content: center;
  border-style: dashed;
}

.schedule-end-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.schedule-end-row input[type="date"] {
  flex: 1;
  min-width: 0;
}

.schedule-end-row .mini-button {
  min-height: 40px;
  white-space: nowrap;
}

/* Spacing between row action buttons (Edit / Publish / End / Delete). */
.table-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.schedule-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-actions-spacer {
  flex: 1;
}

.mini-button-warn {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.mini-button-warn:hover {
  background: var(--accent-soft);
}

.schedule-end-badge {
  display: inline-block;
  margin-top: 2px;
  color: var(--ink-secondary);
  font-weight: 600;
}

.schedule-end-badge.is-expired {
  color: var(--accent);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table th {
  color: var(--muted);
  font-size: calc(12px + 2pt);
  font-weight: 900;
  text-transform: uppercase;
}

.screen-card,
.media-card,
.playlist-row {
  padding: 14px;
}

.screen-card {
  position: relative;
  min-height: 114px;
  overflow: visible;
  transition: min-height 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.screen-card:hover,
.screen-card:focus-within {
  min-height: 238px;
  border-color: rgb(242 107 88 / 45%);
  box-shadow: 0 12px 26px rgb(17 18 34 / 10%);
}

.status-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.screen-tools {
  position: relative;
}

.screen-actions-menu {
  right: 0;
  top: calc(100% + 8px);
  min-width: 196px;
  z-index: 35;
}

.screen-card .meta-list {
  display: none;
}

.screen-card:hover .meta-list,
.screen-card:focus-within .meta-list {
  display: grid;
  margin-top: 12px;
}

.screen-sync-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 700;
}

.screen-sync-toggle.inline {
  display: flex;
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(13px + 2pt);
  font-weight: 700;
}

.screen-sync-toggle input[type="checkbox"] {
  inline-size: 16px;
  block-size: 16px;
  accent-color: var(--ink);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgb(10 14 30 / 45%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 20px;
  animation: modal-fade-in 160ms ease forwards;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-panel {
  width: min(760px, 94vw);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--shell);
  box-shadow: var(--shadow-lg);
  animation: modal-slide-up 200ms cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
}

@keyframes modal-slide-up {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-panel .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.modal-actions {
  justify-content: flex-end;
  margin-top: 14px;
}

.modal-narrow {
  width: min(460px, 94vw);
}

.field-error {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff0ee;
  color: #c0341d;
  font-size: calc(14px + 2pt);
  font-weight: 600;
}

.info-modal-content {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: calc(14px + 2pt);
  line-height: 1.7;
  white-space: pre-line;
  color: var(--ink);
}

/* Toast notifications */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: min(400px, calc(100vw - 48px));
  padding: 13px 18px;
  border-radius: 10px;
  font-size: calc(15px + 2pt);
  font-weight: 600;
  box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: auto;
}

.toast.toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-info {
  background: #1a2a4a;
  color: #e8edf8;
  border: 1px solid #2c4070;
}

.toast-success {
  background: #0d3d2e;
  color: #d4f5e4;
  border: 1px solid #1a6045;
}

.toast-error {
  background: #3d0d0d;
  color: #f5d4d4;
  border: 1px solid #7a1a1a;
}

.toast-warning {
  background: #3d2d00;
  color: #f5e8c0;
  border: 1px solid #7a5c00;
}

/* Publish Manifest highlights when there are staged (unpublished) changes. */
#publishBtn.has-unpublished {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  animation: unpublished-pulse 2.2s ease-in-out infinite;
}
#publishBtn.has-unpublished:hover {
  background: var(--accent-hover);
}
@keyframes unpublished-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(255 90 31 / 50%); }
  60% { box-shadow: 0 0 0 6px rgb(255 90 31 / 0%); }
}
@media (prefers-reduced-motion: reduce) {
  #publishBtn.has-unpublished { animation: none; }
}

/* ============ Bulk select (Media / Playlists / Schedules) ============ */
.bulk-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-soft);
}
.bulk-count {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  white-space: nowrap;
  padding: 0 4px;
}
.bulk-move-wrap { position: relative; }

/* Move-to menu rows have no leading glyph, so don't reserve the 18px icon
   column — let the folder name use the full width (was truncating to 1 letter). */
.bulk-move-menu .menu-item {
  grid-template-columns: minmax(0, 1fr);
}
.bulk-move-menu .menu-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bulk-check {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border: 2px solid var(--muted);
  border-radius: 6px;
  background: var(--shell);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bulk-check svg { width: 14px; height: 14px; }
.bulk-check.is-checked { background: var(--accent); border-color: var(--accent); }

.media-card .bulk-check {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  box-shadow: 0 1px 5px rgb(0 0 0 / 25%);
}
.media-card.selecting { cursor: default; }
.media-card.is-selected,
.playlist-row.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 12px;
}
.playlist-row { position: relative; }
.playlist-row.selecting { display: flex; align-items: center; gap: 8px; }
.playlist-row .bulk-check { margin: 0 2px 0 8px; align-self: center; }

.bulk-check-cell { width: 40px; text-align: center; }
tr.is-selected { background: var(--accent-soft); }

/* ============ Drag-to-delete bin ============ */
.delete-bin {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 160%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 14px;
  border: 2px dashed var(--red);
  background: var(--shell);
  color: var(--red);
  font-weight: 700;
  font-size: 15px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s cubic-bezier(0.34, 1.1, 0.64, 1), opacity 0.2s ease,
    background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.delete-bin svg {
  width: 22px;
  height: 22px;
}
body.dragging-asset .delete-bin {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.delete-bin.drag-over {
  background: var(--red);
  color: #fff;
  border-style: solid;
  transform: translate(-50%, -6px) scale(1.05);
}

/* ============ Playlist Options modal (px-*) ============ */
.px-modal {
  width: min(720px, 96vw);
  max-height: 92vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.px-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.px-head h2 { margin: 0; font-size: 1.36rem; font-weight: 800; letter-spacing: -0.01em; }
.px-sub { margin: 4px 0 0; color: var(--muted); font-size: 0.91rem; }
.px-close {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.px-close svg { width: 18px; height: 18px; }
.px-close:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.px-body { display: grid; gap: 20px; padding: 20px 22px; overflow-y: auto; }
.px-section { display: grid; gap: 10px; }
.px-section h3 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.px-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ---- Live preview ---- */
.px-preview-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}
.tx-preview {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: 10px;
  overflow: hidden;
  background: #0b1220;
  --prev-ms: 500ms;
  --prev-d: 60%;
  --prev-zin: 0.88;
  --prev-zout: 1.12;
  --prev-blur: 12px;
  --prev-flip: 22deg;
}
.tx-prev-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.26rem;
  font-weight: 800;
  color: #fff;
  backface-visibility: hidden;
}
.tx-prev-slide.s-a { background: linear-gradient(135deg, #ff7a45, #e0490f); z-index: 1; }
.tx-prev-slide.s-b { background: linear-gradient(135deg, #2b6fff, #143a99); z-index: 1; }
.tx-prev-slide.is-in { animation: txp-fade var(--prev-ms) cubic-bezier(0.4, 0, 0.2, 1) both; z-index: 2; }

.px-modal[data-fx="cut"] .tx-prev-slide.is-in { animation-name: txp-cut; }
.px-modal[data-fx="fade"] .tx-prev-slide.is-in { animation-name: txp-fade; }
.px-modal[data-fx="slide-left"] .tx-prev-slide.is-in { animation-name: txp-slide-left; }
.px-modal[data-fx="slide-right"] .tx-prev-slide.is-in { animation-name: txp-slide-right; }
.px-modal[data-fx="slide-up"] .tx-prev-slide.is-in { animation-name: txp-slide-up; }
.px-modal[data-fx="slide-down"] .tx-prev-slide.is-in { animation-name: txp-slide-down; }
.px-modal[data-fx="zoom-in"] .tx-prev-slide.is-in { animation-name: txp-zoom-in; }
.px-modal[data-fx="zoom-out"] .tx-prev-slide.is-in { animation-name: txp-zoom-out; }
.px-modal[data-fx="flip"] .tx-prev-slide.is-in { animation-name: txp-flip; }
.px-modal[data-fx="blur"] .tx-prev-slide.is-in { animation-name: txp-blur; }

.px-modal[data-speed="slow"] .tx-preview { --prev-ms: 900ms; }
.px-modal[data-speed="medium"] .tx-preview { --prev-ms: 500ms; }
.px-modal[data-speed="fast"] .tx-preview { --prev-ms: 260ms; }
.px-modal[data-intensity="subtle"] .tx-preview { --prev-d: 26%; --prev-zin: 0.95; --prev-zout: 1.05; --prev-blur: 6px; --prev-flip: 12deg; }
.px-modal[data-intensity="medium"] .tx-preview { --prev-d: 60%; --prev-zin: 0.88; --prev-zout: 1.12; --prev-blur: 12px; --prev-flip: 22deg; }
.px-modal[data-intensity="strong"] .tx-preview { --prev-d: 100%; --prev-zin: 0.8; --prev-zout: 1.2; --prev-blur: 20px; --prev-flip: 35deg; }

@keyframes txp-cut { from { opacity: 0; } 1% { opacity: 1; } to { opacity: 1; } }
@keyframes txp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes txp-slide-left { from { opacity: 0; transform: translateX(var(--prev-d)); } to { opacity: 1; transform: none; } }
@keyframes txp-slide-right { from { opacity: 0; transform: translateX(calc(-1 * var(--prev-d))); } to { opacity: 1; transform: none; } }
@keyframes txp-slide-up { from { opacity: 0; transform: translateY(var(--prev-d)); } to { opacity: 1; transform: none; } }
@keyframes txp-slide-down { from { opacity: 0; transform: translateY(calc(-1 * var(--prev-d))); } to { opacity: 1; transform: none; } }
@keyframes txp-zoom-in { from { opacity: 0; transform: scale(var(--prev-zin)); } to { opacity: 1; transform: none; } }
@keyframes txp-zoom-out { from { opacity: 0; transform: scale(var(--prev-zout)); } to { opacity: 1; transform: none; } }
@keyframes txp-flip { from { opacity: 0; transform: perspective(900px) rotateY(var(--prev-flip)); } to { opacity: 1; transform: perspective(900px) rotateY(0); } }
@keyframes txp-blur { from { opacity: 0; filter: blur(var(--prev-blur)); transform: scale(1.04); } to { opacity: 1; filter: blur(0); transform: none; } }

.px-preview-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.px-fx-name { font-size: 1.06rem; font-weight: 800; }
.px-fx-sub { font-size: 0.86rem; }

/* ---- Transition effect chips ---- */
.px-chip-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.px-chip {
  display: grid; gap: 6px; justify-items: center;
  padding: 12px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.px-chip:hover { border-color: var(--accent); color: var(--ink); }
.px-chip.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.px-chip-icon { width: 26px; height: 26px; }
.px-chip-icon svg { width: 100%; height: 100%; display: block; }
.px-chip-label { font-size: 0.76rem; font-weight: 600; }

/* ---- Segmented controls ---- */
.px-seg { display: inline-flex; width: 100%; padding: 3px; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.px-seg-opt {
  flex: 1;
  padding: 9px 10px;
  border: 0; border-radius: 8px;
  background: transparent;
  font-family: inherit; font-weight: 600; font-size: 0.91rem;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.px-seg-opt:hover { color: var(--ink); }
.px-seg-opt.is-active { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }

/* ---- Scale rows ---- */
.px-scale-grid { display: grid; gap: 8px; }
.px-scale-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 12px; }
.px-scale-label { font-weight: 600; font-size: 0.96rem; color: var(--ink); }

/* ---- Shuffle switch ---- */
.px-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.px-row h3 { margin: 0; }
.px-row-sub { margin: 3px 0 0; font-size: 0.88rem; }
.px-switch {
  flex: none;
  width: 52px; height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--line-soft);
  padding: 3px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.px-switch span {
  display: block; width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--shell);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease;
}
.px-switch.on { background: var(--accent); border-color: var(--accent); }
.px-switch.on span { transform: translateX(22px); }

/* ---- Footer ---- */
.px-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); background: var(--bg); }
.px-btn { padding: 10px 18px; border-radius: 10px; font-family: inherit; font-weight: 600; font-size: 0.96rem; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.px-btn.ghost { background: transparent; border-color: var(--line); color: var(--ink-secondary); }
.px-btn.ghost:hover { background: var(--bg); color: var(--ink); }
.px-btn.primary { background: var(--accent); color: #fff; }
.px-btn.primary:hover { background: var(--accent-hover); }

@media (max-width: 560px) {
  .px-chip-grid { grid-template-columns: repeat(3, 1fr); }
  .px-two { grid-template-columns: 1fr; }
  .px-scale-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .tx-prev-slide.is-in { animation-duration: 1ms !important; }
}

.folder-panel {
  align-self: start;
  padding: 18px;
}

.folder-panel .card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
}

.folder-panel .card-head h2 {
  margin: 0;
  line-height: 1.1;
}

.panel-head-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 0;
  gap: 6px;
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
}

.embedded-tools {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line-soft);
}

.embedded-tools .icon-square {
  border: 0;
  background: var(--line-soft);
  color: var(--ink);
  border-radius: 9px;
}

.embedded-tools .icon-square.active {
  background: var(--line-soft);
  color: var(--ink);
}

.plus-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--line-soft);
  color: var(--ink);
  font-size: calc(20px + 2pt);
  font-weight: 900;
  line-height: 1;
}

.plus-button:hover,
.embedded-tools .icon-square:hover {
  background: var(--line);
  color: var(--ink);
}

.panel-head-tools .pill {
  min-height: 26px;
  padding: 0 7px;
  flex-shrink: 0;
}

.folder-panel .panel-head-tools .icon-square {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 8px;
}

.folder-panel .panel-head-tools .plus-button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  font-size: calc(18px + 2pt);
}

.folder-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.folder-row {
  --folder-depth: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 6px 0 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--shell);
  color: var(--ink);
  font-weight: 850;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.folder-select {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  width: 100%;
  padding: 0 12px 0 calc(12px + (var(--folder-depth) * 14px));
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  font-weight: inherit;
  text-align: left;
}

.folder-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.folder-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-collapse {
  display: grid;
  width: 16px;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--line-soft);
  color: var(--ink);
  font-size: calc(13px + 2pt);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.folder-collapse::before {
  content: "-";
}

.folder-collapse.collapsed::before {
  content: "+";
}

.folder-collapse.spacer {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}

.folder-row:not(.is-child) .folder-name {
  font-weight: 850;
}

.folder-row.is-child .folder-name::before {
  content: "└ ";
  color: var(--muted);
}

.folder-select strong {
  display: grid;
  min-width: 28px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--line);
  font-size: calc(13px + 2pt);
}

.folder-row.active,
.folder-row:hover {
  border-color: var(--accent);
  background: rgb(242 107 88 / 12%);
}

.folder-tools {
  position: relative;
}

.icon-dot {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.icon-dot::before {
  content: "...";
  font-weight: 900;
  letter-spacing: 1px;
  transform: translateY(-2px);
}

/* ── Finder-style folder navigation (Media / Playlists / Schedules) ──
   The folder tree side-panel is replaced by an in-pane toolbar (Back / Up /
   Home + breadcrumb) and a grid of folder tiles you drill into. */
.media-workspace.is-finder,
.managed-workspace.is-finder {
  grid-template-columns: minmax(0, 1fr);
}

.finder-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.finder-nav-btns { display: inline-flex; gap: 4px; }
.finder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--shell);
  color: var(--ink-secondary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: border-color 140ms ease, color 140ms ease;
}
.finder-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.finder-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.finder-add { margin-left: auto; font-size: 14px; white-space: nowrap; }

.finder-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  font-size: 14px;
}
.finder-crumb {
  max-width: 220px;
  padding: 4px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-secondary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finder-crumb:hover { background: var(--accent-soft); color: var(--accent); }
.finder-crumb.active { color: var(--ink); font-weight: 800; cursor: default; }
.finder-crumb-sep { color: var(--muted); }

.folder-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.folder-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--shell);
  cursor: pointer;
  user-select: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.folder-tile:hover { border-color: var(--accent); }
.folder-tile.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.folder-tile:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--accent-glow); }
.folder-tile-icon {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 23px;
  margin-top: 4px;
  border-radius: 5px;
  background: var(--accent);
  opacity: 0.92;
}
.folder-tile-icon::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 3px;
  width: 13px;
  height: 5px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}
.folder-tile-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.folder-tile-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.folder-tile-count { font-size: 13px; color: var(--muted); }
.folder-tile-tools { position: relative; flex: 0 0 auto; }

.tab-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tools-stack {
  position: relative;
}

.icon-square {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--line-soft);
  border-color: var(--line);
}

.icon-square.active {
  background: var(--line-soft);
  border-color: var(--line);
}

.glyph {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}

.sort-glyph::before,
.sort-glyph::after {
  content: "";
  position: absolute;
  left: 7px;
  width: 2px;
  background: var(--ink-secondary);
}

.sort-glyph::before {
  top: 1px;
  height: 8px;
}

.sort-glyph::after {
  bottom: 1px;
  height: 8px;
}

.sort-glyph {
  background:
    linear-gradient(45deg, transparent 45%, var(--ink-secondary) 45%, var(--ink-secondary) 55%, transparent 55%) 2px 2px / 5px 5px no-repeat,
    linear-gradient(45deg, transparent 45%, var(--ink-secondary) 45%, var(--ink-secondary) 55%, transparent 55%) 9px 9px / 5px 5px no-repeat;
}

.grid-glyph {
  background:
    linear-gradient(var(--ink-secondary) 0 0) 0 0 / 6px 6px no-repeat,
    linear-gradient(var(--ink-secondary) 0 0) 10px 0 / 6px 6px no-repeat,
    linear-gradient(var(--ink-secondary) 0 0) 0 10px / 6px 6px no-repeat,
    linear-gradient(var(--ink-secondary) 0 0) 10px 10px / 6px 6px no-repeat;
}

.list-glyph {
  background:
    linear-gradient(var(--ink-secondary) 0 0) 0 1px / 3px 3px no-repeat,
    linear-gradient(var(--ink-secondary) 0 0) 0 7px / 3px 3px no-repeat,
    linear-gradient(var(--ink-secondary) 0 0) 0 13px / 3px 3px no-repeat,
    linear-gradient(var(--ink-secondary) 0 0) 6px 1px / 10px 2px no-repeat,
    linear-gradient(var(--ink-secondary) 0 0) 6px 7px / 10px 2px no-repeat,
    linear-gradient(var(--ink-secondary) 0 0) 6px 13px / 10px 2px no-repeat;
}

/* Open menus are re-homed to <body> and positioned in viewport space (see
   floatOpenMenus in app.js) so the card grid's scroll/transform containers
   can't clip or mis-stack them. */
.panel-menu.floating-menu {
  position: fixed;
  right: auto;
  top: auto;
  margin: 0;
  z-index: 1000;
  /* The popover lives in <body>, outside the app-shell's 0.75 zoom, so it would
     render larger than the rest of the CMS. Keep it compact to match. */
  min-width: 200px;
  padding: 4px;
  border-radius: 10px;
}

.panel-menu.floating-menu .menu-item {
  min-height: 30px;
  font-size: 13px;
  padding: 0 8px;
  gap: 8px;
}

.panel-menu.floating-menu .menu-separator {
  margin: 4px 6px;
}

.media-asset-menu.floating-menu {
  min-width: 240px;
}

.media-asset-menu.floating-menu .menu-label {
  white-space: nowrap;
}

.panel-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 15;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--shell);
  box-shadow: var(--shadow-lg);
  animation: modal-slide-up 140ms cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
}

.sort-menu {
  min-width: 200px;
}

.folder-tools-menu {
  min-width: 252px;
}

.menu-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-secondary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background 120ms, color 120ms;
}

.menu-item:hover,
.menu-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.menu-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.menu-item.danger {
  color: var(--red);
}

.menu-item.danger:hover {
  background: var(--red-bg);
  color: var(--red);
}

.menu-separator {
  height: 1px;
  margin: 5px 6px;
  background: var(--line);
}

.menu-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-glyph {
  position: relative;
  width: 18px;
  height: 18px;
  display: block;
}

.menu-glyph.move::before {
  content: ">";
  font-weight: 900;
}

.menu-glyph.subfolder::before {
  content: "+";
  font-weight: 900;
}

.menu-glyph.rename::before {
  content: "/";
  font-weight: 900;
}

.menu-glyph.thumbnail::before {
  content: "[]";
  font-size: calc(12px + 2pt);
  font-weight: 900;
}

.menu-glyph.tags::before {
  content: "#";
  font-weight: 900;
}

.menu-glyph.description::before {
  content: "T";
  font-weight: 900;
}

.menu-glyph.info::before {
  content: "i";
  font-weight: 900;
}

.menu-glyph.clock::before {
  content: "o";
  font-size: calc(15px + 2pt);
  font-weight: 900;
}

.menu-glyph.push::before {
  content: "^";
  font-size: calc(15px + 2pt);
  font-weight: 900;
}

.menu-glyph.addplaylist::before {
  content: "≡+";
  font-size: calc(13px + 2pt);
  font-weight: 900;
}

.menu-glyph.duplicate::before {
  content: "[]";
  font-size: calc(13px + 2pt);
  font-weight: 900;
}

.menu-glyph.showplaylists::before {
  content: ">";
  font-size: calc(14px + 2pt);
  font-weight: 900;
}

.menu-glyph.download::before {
  content: "v";
  font-size: calc(17px + 2pt);
  font-weight: 900;
}

.menu-glyph.link::before {
  content: "=";
  font-size: calc(14px + 2pt);
  font-weight: 900;
}

.menu-glyph.copyid::before {
  content: "ID";
  font-size: calc(11px + 2pt);
  font-weight: 900;
}

.menu-glyph.replaceasset::before {
  content: "R";
  font-size: calc(15px + 2pt);
  font-weight: 900;
}

.menu-glyph.opreport::before {
  content: "R";
  font-size: calc(14px + 2pt);
  font-weight: 900;
}

.menu-glyph.usedin::before {
  content: "U";
  font-size: calc(14px + 2pt);
  font-weight: 900;
}

.menu-glyph.delete::before {
  content: "x";
  font-weight: 900;
}

.folder-row.drag-over {
  border-color: var(--accent);
  background: rgb(242 107 88 / 18%);
  transform: translateX(2px);
}

.folder-create {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.folder-create input {
  min-height: 40px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--shell);
  color: var(--ink);
  padding: 0 10px;
}

.file-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.file-picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.media-upload-surface {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding: 22px;
  border: 1px dashed #ccd4e1;
  border-radius: 14px;
  background: var(--bg);
  transition: border-color 160ms ease, background 160ms ease;
  cursor: pointer;
}

.media-upload-surface:hover {
  border-color: var(--line);
  background: var(--bg);
}

.media-upload-title {
  margin: 0;
  color: var(--ink);
  font-size: calc(19px + 2pt);
  line-height: 1.3;
  text-align: center;
}

.media-upload-link {
  color: #2f75d0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.media-upload-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
}

.media-import-option {
  display: grid;
  gap: 8px;
  place-items: center;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--shell);
  color: var(--ink-secondary);
  font-size: calc(16px + 2pt);
  font-weight: 700;
}

.media-import-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 12px;
  border: 1px solid #dbe2ef;
  background: var(--bg);
  font-size: calc(23px + 2pt);
  line-height: 1;
}

.media-upload-footnote {
  margin: 0;
  color: var(--muted);
  font-size: calc(15px + 2pt);
  text-align: center;
}

.media-upload-progress {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--shell);
}

.media-upload-progress-head,
.media-upload-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.upload-progress-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.upload-cancel-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--shell);
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
  flex-shrink: 0;
}

.upload-cancel-btn:hover {
  background: var(--red-bg);
  color: var(--red);
  border-color: rgb(220 38 38 / 25%);
}

.media-upload-progress-head strong {
  color: var(--ink);
  font-size: calc(14px + 2pt);
}

.media-upload-progress-head span,
.media-upload-progress-meta span {
  color: var(--muted);
  font-size: calc(13px + 2pt);
}

.progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #ff9060);
  transition: width 120ms linear;
}

.media-grid {
  margin-top: 18px;
}

.media-grid.grid-4 {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-items: stretch;
}

.media-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 332px;
  max-width: 100%;
  overflow: visible;
  position: relative;
  padding: 12px;
  gap: 6px;
}

.media-card h3 {
  margin: 0;
  line-height: 1.24;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.media-card .thumbnail {
  height: 108px;
  margin-bottom: 6px;
}

.media-card-head {
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 0;
}

.media-card-head .icon-dot {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 8px;
}

.media-tools {
  position: relative;
}

.media-asset-menu {
  top: calc(100% + 6px);
  min-width: 308px;
  max-height: min(72vh, 560px);
  overflow: auto;
  z-index: 30;
}

.media-asset-menu .menu-item {
  min-height: 36px;
}

.media-asset-menu .menu-label {
  white-space: normal;
}

.media-card .meta-list {
  min-height: auto;
  margin-top: 6px;
  gap: 4px;
  font-size: calc(12px + 2pt);
}

/* Media card titles sit a few font steps below the rest of the CMS (per request). */
.media-card h3,
.media-card-head h3 {
  font-size: calc(13px + 2pt);
}

.media-card .meta-list span {
  overflow-wrap: anywhere;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.meta-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: var(--muted);
  font-size: calc(14px + 2pt);
}

.thumbnail,
.player-canvas {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--line);
}

.thumbnail {
  display: grid;
  height: 132px;
  margin-bottom: 12px;
  place-items: center;
  color: var(--shell);
  font-weight: 850;
}

.thumbnail.has-preview {
  background: #0b0d16;
}

.thumbnail.preview-error {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--line), #8f96a6);
}

.thumbnail.preview-error::after {
  content: attr(data-preview-label);
  color: var(--shell);
  font-size: calc(14px + 2pt);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.thumbnail img,
.thumbnail video,
.thumbnail iframe,
.player-media-preview img,
.player-media-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumbnail iframe {
  border: 0;
  background: var(--bg);
}

.media-type-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 999px;
  background: rgb(17 18 34 / 78%);
  color: #ffffff;
  font-size: calc(12px + 2pt);
  font-weight: 900;
  padding: 4px 8px;
}

.player-media-preview {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.player-canvas > div:not(.player-media-preview) {
  position: relative;
  z-index: 1;
}

.player-canvas:has(.player-media-preview)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgb(17 18 34 / 72%), rgb(17 18 34 / 24%));
}

.thumb-menu {
  background: linear-gradient(135deg, var(--accent), var(--line));
}

.thumb-promo {
  background: linear-gradient(135deg, var(--ink), var(--accent));
}

.thumb-alert {
  background: linear-gradient(135deg, var(--rail), var(--muted));
}

.thumb-weather {
  background: linear-gradient(135deg, var(--accent), var(--bg));
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.field {
  display: grid;
  gap: 5px;
}

.field label {
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  min-height: 40px;
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--shell);
  color: var(--ink);
  padding: 0 12px;
  font-size: 15px;
  transition: border-color 160ms, box-shadow 160ms;
  outline: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}

.field input::placeholder {
  color: var(--muted);
}

/* Plan-locked field (e.g. Sync Group on the free plan). */
.field input.is-locked,
.field input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: var(--bg);
  border-style: dashed;
}

.playlist-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  padding: 16px;
}

.playlist-row-select {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 10px 12px;
}

.playlist-row-select.active {
  outline: 1px solid rgb(242 107 88 / 42%);
  background: rgb(242 107 88 / 10%);
}

.playlist-row-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.playlist-row-title {
  margin: 0;
  font-size: calc(14px + 2pt);
  line-height: 1.22;
  overflow-wrap: anywhere;
  white-space: normal;
}

.playlist-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  color: var(--muted);
  font-size: calc(12px + 2pt);
  line-height: 1.35;
}

.playlist-row-meta > * {
  white-space: normal;
}

.playlist-row-meta .health-good,
.playlist-row-meta .health-warn,
.playlist-row-meta .health-bad {
  min-height: 32px;
  padding: 4px 14px;
  font-size: calc(11px + 2pt);
  line-height: 1;
  white-space: nowrap;
}

.playlist-row-hint {
  color: var(--muted);
}

.playlist-row-main .pill {
  align-self: center;
}

.playlist-row-select.one-line .playlist-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.playlist-row-select.one-line .playlist-row-title {
  margin: 0;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.playlist-row-select.one-line .playlist-row-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: 4px;
}

.playlist-row-select.one-line .playlist-row-hint {
  display: inline;
}

.playlist-row-actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0 0 8px;
  min-width: 42px;
}

/* Title shrinks (and wraps) in its own column so the action buttons stay pinned
   top-right and never misalign when the folder/playlist name gets long. */
.playlist-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
}

.playlist-list-head h2 {
  margin-bottom: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.playlist-list-head .actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
}

.playlist-list-head .primary {
  margin-left: auto;
  min-width: 152px;
}

.playlist-tools {
  position: relative;
}

.playlist-actions-menu {
  min-width: 300px;
  right: 0;
  top: calc(100% + 6px);
  z-index: 32;
}

.playlist-head-main {
  display: grid;
  gap: 8px;
}

.playlist-rename-inline {
  display: block;
}

.playlist-rename-inline input {
  width: min(360px, 100%);
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--shell);
  color: var(--ink);
  padding: 0 12px;
  font: inherit;
  font-size: calc(18px + 2pt);
  font-weight: 800;
}

.playlist-head-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.playlist-head-main > .health-good,
.playlist-head-main > .health-warn,
.playlist-head-main > .health-bad {
  align-self: flex-start;
  min-height: 34px;
  padding: 5px 16px;
  line-height: 1;
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 20px 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--shell);
}

.playlist-duration-field {
  display: grid;
  gap: 4px;
  align-content: center;
}

.playlist-duration-field span {
  color: var(--muted);
  font-size: calc(12px + 2pt);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.playlist-duration-field input {
  min-height: 34px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--shell);
  color: var(--ink);
  padding: 0 8px;
  font: inherit;
  font-weight: 700;
}

.timeline-item > span:not(.pill):not(.drag-grip) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.drop-zone {
  display: grid;
  gap: 12px;
  min-height: 210px;
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed rgb(242 107 88 / 42%);
  border-radius: 18px;
  background: rgb(228 227 223 / 34%);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.drop-zone.drag-over,
.playlist-item.drag-over,
.file-drop-zone.drag-over {
  border-color: var(--accent);
  background: rgb(242 107 88 / 12%);
}

.drop-zone.drag-over,
.file-drop-zone.drag-over {
  transform: translateY(-1px);
}

.file-drop-zone {
  border-style: dashed;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.drop-zone-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: calc(14px + 2pt);
}

.drop-zone-label strong {
  color: var(--ink);
  font-size: calc(16px + 2pt);
}

.playlist-drop-list {
  align-content: start;
}

.playlist-item {
  cursor: grab;
}

.playlist-item:active {
  cursor: grabbing;
}

.drag-grip {
  color: var(--muted);
  font-weight: 900;
  letter-spacing: -0.18em;
  cursor: grab;
}

.draggable-card,
.draggable-chip,
.draggable-table-row {
  user-select: none;
}

.draggable-card {
  cursor: grab;
}

.draggable-card:active,
.draggable-chip:active,
.draggable-table-row:active {
  cursor: grabbing;
}

.draggable-table-row {
  cursor: grab;
}

.is-dragging {
  opacity: 0.48;
  transform: scale(0.98);
}

.drag-hint {
  color: var(--accent);
  font-weight: 850;
}

.asset-tray {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.asset-tray-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.asset-address-bar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.asset-address-bar span {
  color: var(--muted);
  font-size: calc(13px + 2pt);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.asset-address-bar select {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  min-height: 24px;
  width: 100%;
}

.asset-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.asset-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 6px 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--shell);
}

.asset-list-title {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.asset-list-title:hover {
  color: var(--accent);
}

.asset-list-meta {
  color: var(--muted);
  font-size: calc(13px + 2pt);
}

.empty-state.compact {
  padding: 14px;
  text-align: left;
}

.priority-bar {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--line), var(--muted), var(--ink));
}

.player-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  gap: 18px;
}

.device-frame {
  padding: 18px;
  border-radius: 8px;
  background: var(--rail);
  box-shadow: 0 24px 55px rgb(23 24 20 / 25%);
}

.player-canvas {
  display: grid;
  min-height: 390px;
  place-items: center;
  color: var(--shell);
  text-align: center;
}

.player-canvas h2 {
  max-width: 620px;
  margin: 0 auto 8px;
  color: var(--shell);
  font-size: calc(39px + 2pt);
}

.player-canvas p {
  margin: 0;
  color: rgb(251 250 245 / 82%);
}

.player-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  color: var(--line);
  font-size: calc(14px + 2pt);
}

pre {
  max-height: 430px;
  overflow: auto;
  margin: 0;
  padding: 14px;
  border-radius: 8px;
  background: var(--rail);
  color: var(--line);
  font-size: calc(13px + 2pt);
  line-height: 1.5;
}

.empty-state {
  display: grid;
  gap: 6px;
  padding: 48px 24px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--shell);
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}

.empty-state strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
    width: 100vw;
    margin: 0;
  }

  .sidebar {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
  }

  .brand {
    padding-bottom: 0;
  }

  .nav {
    display: flex;
    margin-top: 0;
  }

  .sidebar-footer {
    margin-left: auto;
    margin-top: 0;
  }

  .dashboard-grid,
  .analytics-grid,
  .media-workspace,
  .managed-workspace,
  .grid-4,
  .grid-3,
  .grid-2,
  .player-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .analytics-grid {
    grid-template-areas:
      "likes"
      "donut"
      "insights"
      "activity"
      "chart";
  }

  .asset-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .media-upload-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .playlist-builder-grid,
  .media-workspace,
  .managed-workspace {
    grid-template-columns: 1fr;
  }

  .playlist-builder-grid .playlist-row {
    grid-template-columns: 1fr auto;
  }

  .media-asset-menu {
    left: 0;
    right: auto;
    min-width: min(320px, 82vw);
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .main {
    padding: 18px;
  }

  .media-upload-options {
    grid-template-columns: 1fr;
  }

  .topbar,
  .card-head,
  .playlist-row,
  .timeline-item,
  .activity-row {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .top-actions {
    align-items: stretch;
  }

  .search-box {
    width: 100%;
  }

  .profile-button span:last-child {
    display: none;
  }

  .asset-strip {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: calc(27px + 2pt);
  }

  .player-canvas h2 {
    font-size: calc(29px + 2pt);
  }
}

/* Reverted shell: full-width dark-sidebar CMS layout */
:root {
  --bg: #dcdee2;
  --shell: #f7f6f2;
  --rail: #041b4d;
  --ink: #171821;
  --muted: rgb(23 24 33 / 58%);
  --line: #e4e3df;
  --accent: #ff5a1f;
  --shadow: 0 22px 54px rgb(17 18 34 / 12%);
  --soft-shadow: 0 12px 28px rgb(17 18 34 / 8%);
}

.app-shell {
  grid-template-columns: 1fr;
  grid-template-rows: 74px minmax(0, 1fr);
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--shell);
  box-shadow: none;
}

.sidebar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  background: var(--rail);
  color: var(--shell);
  border-bottom: 1px solid rgb(247 246 242 / 14%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 0;
  flex: 0 0 auto;
  margin-right: 16px;
}

.brand-mark {
  display: none;
}

.brand-logo {
  display: block;
  width: 158px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.brand-copy {
  display: none;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  color: var(--shell);
  font-size: calc(16px + 2pt);
}

.brand span {
  display: block;
  margin-top: 2px;
  color: rgb(247 246 242 / 58%);
  font-size: calc(13px + 2pt);
}

.nav {
  display: flex;
  align-self: center;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  color: rgb(247 246 242 / 68%);
  font-size: calc(13px + 2pt);
  font-weight: 800;
  text-align: left;
}

.nav button span:last-child {
  position: static;
  width: auto;
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.nav button:hover {
  background: rgb(255 90 31 / 26%);
  color: #fff;
}

.nav button.active {
  background: var(--accent);
  color: #fff;
}

.nav button.active::after {
  content: none;
}

.nav-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

/* The hidden attribute must win over the display:flex/grid below (author CSS
   beats the UA [hidden] rule) so the dev status, OS avatar and notification
   button truly hide when their hidden attribute is set. */
.sidebar-footer[hidden],
.sidebar-os[hidden],
.notif-btn[hidden],
.notif-badge[hidden] { display: none !important; }
.sidebar-footer {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: rgb(247 246 242 / 64%);
  font-size: calc(12px + 2pt);
  text-align: right;
}

/* OrbiSignage brand avatar — shown to every signed-in account. */
.sidebar-os {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 3px solid rgb(247 246 242 / 82%);
  border-radius: 10px;
  background: var(--accent);
  color: var(--shell);
  font-weight: 900;
  flex: 0 0 auto;
}

/* ── Notification center ── */
.notif-wrap { position: relative; display: flex; }
.notif-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgb(247 246 242 / 22%);
  background: rgb(247 246 242 / 6%);
  color: rgb(247 246 242 / 86%);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.notif-btn:hover { background: rgb(247 246 242 / 14%); }
.notif-btn.has-unread { border-color: var(--accent); }
/* Bell glyph drawn in CSS so we don't depend on an icon font. */
.notif-bell {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  position: relative;
}
.notif-bell::before {
  content: ""; position: absolute; left: -3px; right: -3px; bottom: -2px;
  height: 2px; background: currentColor; border-radius: 2px;
}
.notif-bell::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  width: 5px; height: 3px; background: currentColor; border-radius: 0 0 3px 3px;
}
.notif-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  border-radius: 999px; border: 2px solid var(--bg, #0d1426);
}
.notif-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 320px; max-width: 86vw; z-index: 1200;
  background: var(--shell); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden;
}
.notif-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 800; }
.notif-clear { border: 0; background: transparent; color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.notif-clear:hover { background: var(--bg-alt, rgba(0,0,0,0.04)); }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 10px; width: 100%; text-align: left;
  padding: 11px 14px; border: 0; border-bottom: 1px solid var(--line-soft, var(--line));
  background: transparent; cursor: pointer; color: inherit;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--bg-alt, rgba(0,0,0,0.04)); }
.notif-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--muted); }
.notif-dot.is-warn { background: var(--warn, #ef9f27); }
.notif-dot.is-bad { background: var(--bad, #e24b4a); }
.notif-dot.is-good { background: var(--green, #16a34a); }
.notif-item-body strong { display: block; font-size: 14px; font-weight: 700; }
.notif-item-body span { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.notif-empty { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 14px; }

.main {
  min-width: 0;
  min-height: 0;
  padding: 18px 24px 24px;
  background: var(--shell);
  overflow-y: auto;
}

body[data-route="screens"] .topbar,
.topbar {
  display: flex;
}

.eyebrow {
  color: var(--accent);
}

.search-box {
  width: min(320px, 34vw);
  min-height: 40px;
  border-radius: 8px;
  background: var(--shell);
}

.primary {
  background: var(--rail);
  color: var(--shell);
  box-shadow: 0 10px 24px rgb(17 18 34 / 16%);
}

.primary:hover {
  background: var(--accent);
}

/* In dark mode --rail and --shell are both #131c2e, so the default .primary
   button (e.g. Publish Manifest) renders navy-on-navy and disappears. Give it
   a visibly lighter navy surface with white text and a subtle border. */
html[data-theme="dark"] .primary {
  background: #1d2b45;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 14%);
}

html[data-theme="dark"] .primary:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.avatar {
  border-radius: 8px;
  background: var(--line);
  color: var(--ink);
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 74px minmax(0, 1fr);
  }

  .sidebar {
    overflow-x: auto;
  }

  .brand { min-height: 74px; }
}

body.auth-locked .sidebar {
  display: none;
}

body.auth-locked .app-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

body.auth-locked .main {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  padding: 0;
}

body.auth-locked .topbar {
  display: none;
}

body.auth-locked .view {
  min-height: 100vh;
}

/* The login screen must not inherit the desktop 0.75 "zoom-out" transform
   (it scales the app-shell to 133vh, which leaves the 100vh auth background
   short and exposes a gap). Render the auth screen at natural 1:1 scale. */
body.auth-locked .app-shell {
  transform: none;
  width: 100vw;
  height: auto;
  min-height: 100vh;
}

.role-badge {
  min-height: 32px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-weight: 800;
}

.auth-shell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 28px;
  background: radial-gradient(ellipse at 70% 20%, rgb(255 90 31 / 8%) 0%, transparent 55%),
              radial-gradient(ellipse at 20% 80%, rgb(99 120 255 / 6%) 0%, transparent 50%),
              linear-gradient(160deg, #f4f7ff 0%, #eef2fb 100%);
}

.auth-card {
  width: min(420px, 100%);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 16px;
}

.auth-theme-switch {
  position: absolute;
  top: 22px;
  right: 22px;
  margin-bottom: 0;
  z-index: 2;
  background: var(--shell);
  box-shadow: var(--shadow-sm);
}

.auth-theme-switch .theme-opt {
  flex: 0 0 auto;
  width: 38px;
  height: 32px;
}

.auth-brand {
  display: flex;
  justify-content: center;
  padding-bottom: 4px;
}

.auth-logo {
  height: 44px;
  width: auto;
}

.auth-head {
  display: grid;
  gap: 6px;
  text-align: center;
}

.auth-foot {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  text-align: center;
}

.auth-foot p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-secondary);
}

.auth-foot a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.auth-foot a:hover {
  text-decoration: underline;
}

.auth-foot span {
  font-size: 12px;
  color: var(--muted);
}

.auth-card h2 {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}

.auth-card .muted {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.auth-form {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.auth-form .field {
  display: grid;
  gap: 8px;
}

.auth-form .field span {
  font-size: calc(13px + 2pt);
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auth-form input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--shell);
  color: var(--ink);
  outline: 0;
}

.auth-form input:focus {
  border-color: var(--line);
  box-shadow: 0 0 0 3px rgb(71 104 180 / 14%);
}

.auth-submit {
  margin-top: 6px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px rgb(255 90 31 / 28%);
}

.auth-submit:hover {
  background: var(--accent-hover);
  color: #fff;
}

.auth-forgot {
  justify-self: start;
  margin-top: -2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f3f86;
  font-size: calc(14px + 2pt);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-forgot:hover {
  color: var(--accent);
}

.auth-message {
  margin: 2px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff2ee;
  color: #b6492f;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .topbar {
    align-items: flex-start;
  }

  .top-actions {
    max-width: 100%;
  }

  .top-actions .search-box {
    width: min(320px, 48vw);
    min-width: 180px;
  }
}

@media (min-width: 1100px) {
  html,
  body {
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
  }

  body {
    zoom: 1;
  }

  .app-shell {
    width: 133.3333vw;
    min-height: 133.3333vh;
    transform: scale(0.75);
    transform-origin: top left;
  }
}

/* ── Inline rename (screens) ── */
.screen-card-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.inline-rename-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.inline-rename-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--shell);
  color: var(--ink);
  font: inherit;
  font-size: calc(16px + 2pt);
  font-weight: 700;
}

.inline-rename-input:focus {
  outline: none;
}

/* ── Pair Screen modal ── */
.pair-modal-panel {
  width: min(480px, 94vw);
  position: relative;
  overflow: hidden;
}

.pair-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.pair-step {
  display: flex;
  flex-direction: column;
}

/* Step 1 – code entry */
.pair-step-code {
  align-items: center;
  padding: 36px 28px 28px;
  text-align: center;
  gap: 0;
}

.pair-tv-icon {
  width: 72px;
  height: auto;
  color: var(--accent);
  margin-bottom: 16px;
}

.pair-code-heading {
  margin: 0 0 6px;
  font-size: calc(27px + 2pt);
  font-weight: 900;
}

.pair-code-sub {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: calc(15px + 2pt);
}

.pair-code-input-wrap {
  width: 100%;
  margin-bottom: 12px;
}

.pair-code-input {
  width: 100%;
  padding: 18px 16px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: calc(29px + 2pt);
  font-weight: 900;
  letter-spacing: 0.25em;
  text-align: center;
  text-transform: uppercase;
  transition: border-color 140ms;
}

.pair-code-input:focus {
  outline: none;
  border-color: var(--accent);
}

.pair-code-btn {
  width: 100%;
  height: 52px;
  font-size: calc(17px + 2pt);
  margin-bottom: 14px;
  border-radius: 12px;
}

.pair-code-hint {
  margin: 0;
  color: var(--muted);
  font-size: calc(13px + 2pt);
  line-height: 1.5;
}

/* Step 2 – details */
.pair-step-details {
  padding: 22px 22px 18px;
  gap: 0;
}

.pair-details-head {
  margin-bottom: 6px;
}

.pair-details-head .eyebrow {
  margin-bottom: 2px;
}

/* Advanced options collapsible */
.pair-advanced {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.pair-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: calc(14px + 2pt);
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--bg);
}

.pair-advanced-toggle::-webkit-details-marker { display: none; }

.pair-advanced-toggle::before {
  content: "›";
  display: inline-block;
  font-size: 19px;
  transition: transform 200ms;
}

.pair-advanced[open] .pair-advanced-toggle::before {
  transform: rotate(90deg);
}

.pair-advanced-grid {
  padding: 14px;
  border-top: 1px solid var(--line);
}

/* ── Upload modal ── */
.upload-modal-panel {
  width: min(560px, 94vw);
}

.upload-modal-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  margin-top: 14px;
  border: 2px dashed var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}

.upload-modal-dropzone:hover {
  border-color: var(--accent);
  background: rgb(255 90 31 / 4%);
  color: var(--ink);
}

.upload-modal-dropzone-title {
  margin: 0;
  font-size: calc(16px + 2pt);
  font-weight: 600;
  color: var(--ink);
}

.upload-modal-sources-label {
  margin: 18px 0 10px;
  font-size: calc(13px + 2pt);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.upload-modal-sources {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.upload-source-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 80px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--shell);
  color: var(--ink);
  font-size: calc(13px + 2pt);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}

.upload-source-btn:hover {
  border-color: var(--accent);
  background: var(--bg);
}

/* "Coming soon" import sources (OneDrive, Google Drive) */
.upload-source-btn.is-soon {
  position: relative;
  opacity: 0.62;
}
.upload-source-btn.is-soon:hover {
  border-color: var(--line);
  background: var(--shell);
}
.source-soon {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--amber-bg);
  color: var(--amber);
}

/* ── Camera capture overlay (getUserMedia) ── */
.camera-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-stage {
  position: relative;
  width: min(92vw, 720px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.camera-stage video {
  width: 100%;
  max-height: 72vh;
  border-radius: 14px;
  background: #000;
  object-fit: contain;
}
.camera-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 20px;
}
.camera-shutter {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.85);
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4);
  transition: transform 100ms;
}
.camera-shutter:active { transform: scale(0.92); }
.camera-ctl {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.camera-ctl:hover { background: rgba(255, 255, 255, 0.22); }

/* ── Media panel drag hint overlay ── */
.media-panel-main {
  position: relative;
}

/* Media tab: pin the workspace to the viewport height so the folders list and the
   media grid each scroll internally instead of growing the whole page. The panel
   headers (folder tools, Upload button) stay fixed; lists scroll beneath them.
   Two-column desktop only — below 860px the layout stacks and scrolls normally. */
@media (min-width: 861px) {
  body[data-route="media"] .app-shell { height: 100vh; }
  body[data-route="media"] .main { display: flex; flex-direction: column; overflow: hidden; }
  body[data-route="media"] .view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  body[data-route="media"] .media-workspace { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  body[data-route="media"] .folder-panel,
  body[data-route="media"] .media-panel-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }
  body[data-route="media"] .folder-panel > .card-head,
  body[data-route="media"] .media-panel-main > .card-head,
  body[data-route="media"] .media-panel-main > .finder-bar,
  body[data-route="media"] .media-panel-main > .media-drag-hint { flex: 0 0 auto; }
  body[data-route="media"] .folder-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
  }
  body[data-route="media"] .media-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    padding-right: 4px;
  }
}

/* Schedules tab: same viewport-pinned, internal-scroll layout as Media. The
   folders list scrolls on its own; the schedule table scrolls beneath the fixed
   header panel (with a sticky table head). Two-column desktop only. */
@media (min-width: 861px) {
  body[data-route="schedules"] .app-shell { height: 100vh; }
  body[data-route="schedules"] .main { display: flex; flex-direction: column; overflow: hidden; }
  body[data-route="schedules"] .view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  body[data-route="schedules"] .managed-workspace { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  body[data-route="schedules"] .folder-panel {
    display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow: hidden;
  }
  body[data-route="schedules"] .folder-panel > .card-head { flex: 0 0 auto; }
  body[data-route="schedules"] .folder-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
  body[data-route="schedules"] .managed-content { display: flex; flex-direction: column; gap: 16px; min-height: 0; max-height: 100%; }
  body[data-route="schedules"] .managed-content > .panel:first-child { flex: 0 0 auto; }
  body[data-route="schedules"] .managed-content > .panel:last-child { flex: 1 1 auto; min-height: 0; overflow: auto; }
  body[data-route="schedules"] .managed-content > .panel:last-child thead th {
    position: sticky; top: 0; background: var(--shell); z-index: 1;
  }
}

/* Playlists tab (full 3-column desktop): pin the workspace to the viewport. The
   left column splits into equal-height Folders and Playlists-list sections, each
   scrolling internally; the Playback Order list and Media Library list scroll
   beneath their fixed headers. */
@media (min-width: 861px) {
  /* Cap each scroll region to a fixed slice of the viewport so the tab stays
     close to one screen and each list scrolls internally. The Folders list and
     the Playlists list get matching heights, as requested; the Playback Order
     and Media Library lists were already capped (kept here for consistency). */
  body[data-route="playlists"] .folder-list { max-height: 38vh; overflow-y: auto; }
  body[data-route="playlists"] .playlist-list-scroll { max-height: 38vh; overflow-y: auto; }
  body[data-route="playlists"] .playback-order-panel .playlist-drop-list { max-height: 72vh; overflow-y: auto; }
  body[data-route="playlists"] .media-library-panel .asset-list { max-height: 72vh; overflow-y: auto; }
}

.media-drag-hint {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: inherit;
  background: rgb(255 90 31 / 8%);
  border: 3px dashed var(--accent);
  color: var(--accent);
  font-size: calc(17px + 2pt);
  font-weight: 800;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.media-drag-hint.is-active {
  opacity: 1;
}

/* ── Sync group badge ── */
.sync-group-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(54 199 148 / 12%);
  border: 1px solid rgb(54 199 148 / 30%);
  color: #1a7a5a;
  font-size: calc(12px + 2pt);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Sync group field hint ── */
.field-hint {
  font-size: calc(12px + 2pt);
  font-weight: 400;
  color: var(--muted);
  margin-left: 4px;
}

.field-full {
  grid-column: 1 / -1;
}

/* ──────────────────────  Profile dropdown menu  ────────────────────── */
.profile-wrap {
  position: relative;
}

.profile-caret {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
}

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 280px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--shell);
  box-shadow: var(--shadow-lg);
  animation: modal-slide-up 140ms cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
}

.profile-menu-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 4px 12px;
}

.profile-menu-head strong {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.profile-menu-head span {
  font-size: 13px;
  color: var(--muted);
}

.theme-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.theme-opt {
  display: grid;
  place-items: center;
  flex: 1;
  height: 34px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}

.theme-opt svg {
  width: 17px;
  height: 17px;
}

.theme-opt:hover {
  color: var(--ink);
  background: var(--line-soft);
}

.theme-opt.is-active {
  background: var(--shell);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.profile-menu-links {
  display: flex;
  flex-direction: column;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.profile-menu-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.profile-menu-item.danger {
  color: var(--red);
}

.profile-menu-item.danger:hover {
  background: var(--red-bg);
}

.profile-menu-item .pm-glyph {
  width: 18px;
  text-align: center;
  font-size: 15px;
}

.profile-menu-divider {
  height: 1px;
  margin: 8px 4px;
  background: var(--line);
}

/* ──────────────────────────  Settings page  ────────────────────────── */
.settings-workspace {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--shell);
  box-shadow: var(--shadow-sm);
}

.settings-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-nav-label {
  margin: 0 0 4px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-nav-item {
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.settings-nav-item:hover {
  background: var(--line-soft);
  color: var(--ink);
}

.settings-nav-item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.settings-content {
  min-width: 0;
}

.settings-panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--shell);
  box-shadow: var(--shadow-sm);
}

.settings-head {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.settings-head h2 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.settings-subhead {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.settings-grid-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.phone-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
}

.phone-cc {
  text-align: center;
}

.settings-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
}

.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.pref-toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}

.pref-row span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pref-row strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.pref-row small {
  font-size: 13px;
  color: var(--muted);
}

.switch-input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.time-input {
  max-width: 130px;
}

.members-table .member-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-cell div {
  display: flex;
  flex-direction: column;
}

.member-cell strong {
  font-size: 14px;
}

.member-cell .muted {
  font-size: 13px;
}

.avatar.sm {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.settings-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.settings-cta-card strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 40px 28px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  text-align: left;
}

.coming-soon-badge {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

@media (max-width: 860px) {
  .settings-workspace {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────  Sort menu  ───────────────────── */
.tools-stack.sort-stack {
  position: relative;
}

.sort-menu {
  right: 0;
  left: auto;
  min-width: 210px;
}

.sort-menu-label {
  margin: 2px 4px 6px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.sort-menu .menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sort-menu .menu-item.active {
  color: var(--accent);
  font-weight: 700;
}

.sort-menu .menu-check {
  color: var(--accent);
  font-weight: 800;
}

/* ─────────────────────  Media LIST view (rows, not cards)  ───────────────────── */
.media-grid.grid-1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.media-grid.grid-1 .media-card {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 3px;
  align-items: center;
  padding: 10px 14px;
  min-height: 0;
}

.media-grid.grid-1 .media-card .thumbnail {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 60px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  font-size: 10px;
}

.media-grid.grid-1 .media-card .thumbnail img,
.media-grid.grid-1 .media-card .thumbnail video,
.media-grid.grid-1 .media-card .thumbnail iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-grid.grid-1 .media-card-head {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  align-self: end;
}

.media-grid.grid-1 .media-card-head h3 {
  font-size: 12px;
}

.media-grid.grid-1 .media-card .meta-list {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  align-self: start;
  font-size: 13px;
}

.media-grid.grid-1 .media-card .drag-hint {
  display: none;
}

.media-grid.grid-1 .media-card .media-type-badge {
  display: none;
}

/* ─────────────────────  Playlist LIST view (one-line rows)  ───────────────────── */
.playlist-row-select.one-line .playlist-row-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.playlist-row-select.one-line .playlist-row-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.playlist-row-select.one-line .playlist-row-hint {
  display: none;
}

/* ─────────────────────  Billing & Orders (demo)  ───────────────────── */
.demo-badge {
  display: inline-block;
  margin: -6px 0 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid rgb(217 119 6 / 25%);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Current plan + usage */
.current-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 18px;
}

.current-plan-info span { font-size: 13px; }
.current-plan-info strong { display: block; font-size: 18px; font-weight: 800; margin-top: 2px; }
.current-plan-cost { text-align: right; }
.current-plan-cost span { font-size: 13px; }
.current-plan-cost strong { display: block; font-size: 21px; font-weight: 800; color: var(--accent); }
.current-plan-cost strong small { font-size: 13px; font-weight: 600; color: var(--muted); }
.price-was { text-decoration: line-through; color: var(--muted); font-weight: 600; font-size: 0.84em; margin-right: 4px; }
.discount-badge { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #0f7a3d; background: rgba(16, 122, 61, 0.12); border-radius: 999px; padding: 2px 8px; }

/* Pricing bar: cycle toggle + currency */
.pricing-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.cycle-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
}

.cycle-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms, color 140ms;
}

.cycle-opt.is-active { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.cycle-save {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgb(255 255 255 / 22%);
}
.cycle-opt:not(.is-active) .cycle-save { background: var(--accent-soft); color: var(--accent); }

.currency-pill {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--shell);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* Plan grid */
.plan-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--shell);
  box-shadow: var(--shadow-sm);
}

.plan-card.is-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), var(--shadow);
  padding-top: 30px;
}
.plan-card.is-current { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }

.plan-tag {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 7px;
  border-radius: 16px 16px 0 0;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.02em;
}

.plan-card-head { min-height: 56px; }
.plan-card h4 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.plan-tagline { font-size: 14px; color: var(--muted); margin: 2px 0 0; }

.plan-price {
  font-size: 41px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.plan-price-cur { font-size: 27px; vertical-align: 6px; }
.plan-price-pence { font-size: 21px; }
.plan-price-unit { font-size: 14px; color: var(--muted); margin: 2px 0 0; }
.plan-price-unit small { font-size: 12px; }

.plan-cta {
  width: 100%;
  min-height: 46px;
  margin: 8px 0;
  border-radius: 10px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 140ms, transform 120ms;
}
.plan-cta:hover { filter: brightness(0.94); transform: translateY(-1px); }
.plan-cta.is-dark { background: var(--accent-hover); }
.plan-cta.is-current-cta { background: var(--accent-soft); color: var(--accent); cursor: default; }
.plan-cta.is-current-cta:hover { transform: none; filter: none; }

.plan-features-heading { font-size: 14px; font-weight: 800; color: var(--ink); margin: 4px 0 2px; }
.plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.plan-features li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink-secondary); line-height: 1.35; }
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.plan-support {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--bg);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.plan-support strong { color: var(--ink); font-size: 14px; }
.plan-card.is-featured .plan-support { background: var(--accent-soft); }

/* Free plan callout */
.free-plan-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--shell);
  box-shadow: var(--shadow-sm);
}
.free-plan-callout h3 { font-size: 23px; font-weight: 800; margin-bottom: 6px; }
.free-plan-callout .muted { max-width: 70ch; }
.free-plan-btn { white-space: nowrap; border-color: var(--accent); color: var(--accent); font-weight: 700; }
.free-plan-btn:hover { background: var(--accent-soft); }

/* Payment cards */
.pay-cards { display: flex; flex-direction: column; gap: 10px; }
.pay-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.pay-card.is-default { border-color: var(--accent); }
.pay-card-brand { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pay-card-num { font-size: 18px; font-weight: 700; letter-spacing: 0.1em; margin: 4px 0 8px; }
.pay-card-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; flex-wrap: wrap; }

.next-charge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.next-charge strong { display: block; font-size: 17px; font-weight: 800; }

/* Order devices */
.order-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.device-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.device-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--shell);
}
.device-glyph { font-size: 35px; line-height: 1; color: var(--accent); }
.device-card h4 { font-size: 15px; font-weight: 800; }
.device-blurb { font-size: 13px; color: var(--muted); flex: 1; }
.device-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.device-price { font-size: 19px; font-weight: 800; }

.cart-panel {
  position: sticky;
  top: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.cart-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cart-line { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; font-size: 14px; }
.cart-line-name { font-weight: 600; }
.cart-qty { display: inline-flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--shell);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}
.qty-btn:hover { border-color: var(--accent); color: var(--accent); }
.cart-line-price { font-weight: 700; }
.cart-total { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); margin-bottom: 12px; }
.cart-total strong { font-size: 19px; font-weight: 800; }

@media (max-width: 1100px) {
  .plan-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-layout { grid-template-columns: 1fr; }
  .free-plan-callout { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .plan-grid-4, .device-grid { grid-template-columns: 1fr; }
  .current-plan { flex-direction: column; align-items: flex-start; }
  .current-plan-cost { text-align: left; }
  .pricing-bar { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────  Super Admin console  ───────────────────── */
.perm-matrix th:not(:first-child),
.perm-matrix td:not(:first-child) {
  text-align: center;
  width: 110px;
}
.perm-matrix .switch-input {
  margin: 0 auto;
}

.settings-panel select[data-action^="sa-"] {
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--shell);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.request-screens-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.request-screens-card strong { font-size: 16px; }
.request-screens-card .muted { margin: 4px 0 0; max-width: 60ch; }
.request-screens-form {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.request-screens-form input {
  width: 80px;
  min-height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--shell);
  color: var(--ink);
  font: inherit;
  text-align: center;
}

/* ── Company detail (Super Admin) ── */
.company-name-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}
.company-name-link:hover { text-decoration: underline; }

.company-detail-panel {
  width: min(720px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
}

.co-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 18px;
}
.co-stat {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.co-stat span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.co-stat strong { display: block; margin-top: 4px; font-size: 17px; font-weight: 800; }

@media (max-width: 640px) {
  .co-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Super Admin per-company manage panel (discount + feature overrides) ---- */
.sa-manage-row > td { background: var(--bg); padding: 0; }
.sa-manage-panel { padding: 16px 16px 18px; }
.sa-manage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 22px;
}
.sa-manage-title { margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.sa-discount-row { display: flex; align-items: center; gap: 10px; }
.sa-discount-row input {
  width: 92px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--shell);
  font-weight: 700;
  font-size: 16px;
}
.sa-bill-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.sa-bill-summary .co-stat { padding: 10px 12px; }
.sa-feature-table th, .sa-feature-table td { padding: 7px 10px; }
.sa-feature-table .pill { font-size: 12px; }
@media (max-width: 760px) {
  .sa-manage-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Super Admin: TV player OTA update card ---- */
.sa-apk-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 14px 16px;
}
.sa-apk-current { margin-bottom: 10px; font-size: 15px; }
.sa-apk-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
}
.sa-apk-field { display: flex; flex-direction: column; gap: 4px; }
.sa-apk-field > span { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sa-apk-field input { min-height: 38px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--shell); color: var(--ink); padding: 0 10px; font-size: 15px; }
.sa-apk-field input[type="number"] { width: 120px; }
.sa-apk-field input[type="text"] { width: 180px; }
.sa-apk-grow { flex: 1 1 220px; }
.sa-apk-grow input { width: 100%; }
.sa-apk-check { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding-bottom: 9px; }

/* ---- Super Admin: device catalogue editor ---- */
.sa-device-table td { vertical-align: middle; }
.sa-dev-in {
  width: 100%;
  min-height: 34px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--shell);
  color: var(--ink);
  padding: 0 8px;
  font-size: 14px;
}
.sa-dev-in:focus { border-color: var(--accent); outline: none; box-shadow: var(--accent-glow); }
.sa-dev-glyph { width: 44px; text-align: center; }
.sa-dev-price { width: 92px; }
.sa-device-table select { min-height: 34px; }

/* ---- Reports proof-of-play tree ---- */
.report-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.report-tree .actions select { min-width: 160px; }
.tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  transition: background 120ms;
}
.tree-row:hover { background: var(--line-soft); }
.tree-site > .tree-row { font-weight: 700; font-size: 16px; }
.tree-screen { margin-left: 28px; }
.tree-day { margin-left: 28px; }
.tree-screen > .tree-row { font-weight: 600; }
.tree-day > .tree-row { color: var(--ink-secondary); font-size: 15px; }
.tree-toggle {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--shell);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tree-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tree-icon { color: var(--accent); font-size: 16px; }
.tree-label { flex: 1; min-width: 0; }
.tree-count {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 1px 11px;
  font-size: 13px;
  font-weight: 700;
  min-width: 26px;
  text-align: center;
}
.tree-events {
  width: auto;
  margin: 6px 0 10px 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.tree-events th, .tree-events td { padding: 7px 12px; font-size: 14px; }
.tree-events thead th { background: var(--line-soft); }