/* MyCinemix Admin — design system.
   Scoped to body.admin-mode / .adm so the public site is untouched. Built on the
   shared tokens (tokens.css): same amber accent, same type, neutral surfaces,
   subtle borders, no decorative effects. Control height, radius and spacing are
   fixed here so every module looks the same. */

:root {
  --adm-sidebar-w: 236px;
  --adm-topbar-h: 56px;
  --adm-control-h: 40px;
  --adm-control-h-sm: 32px;
  --adm-radius: 8px;
  --adm-radius-lg: 12px;
  --adm-gap: 1rem;
  --adm-content-max: 1240px;
  --adm-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --adm-surface: var(--bg-elev);
  --adm-surface-2: var(--bg-elev-2);
  --adm-canvas: var(--bg);
}

/* ------------------------------------------------------------------ shell */
body.admin-mode .site-header,
body.admin-mode .site-footer,
body.admin-mode .mobile-nav { display: none; }
body.admin-mode #app { min-height: 100vh; }

.adm { display: grid; grid-template-columns: var(--adm-sidebar-w) minmax(0, 1fr); min-height: 100vh; background: var(--adm-canvas); color: var(--fg); }
.adm-sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--adm-surface); border-right: 1px solid var(--line); z-index: 70;
}
.adm-brand { display: flex; align-items: center; gap: 0.6rem; height: var(--adm-topbar-h); padding: 0 1rem; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--fg); }
.adm-brand .logo-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; }
.adm-brand .logo-mark svg { width: 17px; height: 17px; }
.adm-brand small { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); color: var(--fg-muted); margin-left: auto; text-transform: uppercase; letter-spacing: 0.1em; }
.adm-nav { padding: 0.75rem; display: grid; gap: 2px; align-content: start; flex: 1; overflow-y: auto; }
.adm-nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); padding: 0.75rem 0.65rem 0.35rem; }
.adm-nav a {
  display: flex; align-items: center; gap: 0.65rem; height: 38px; padding: 0 0.65rem;
  border-radius: var(--adm-radius); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 500;
}
.adm-nav a svg { width: 18px; height: 18px; flex: none; }
.adm-nav a:hover { background: var(--adm-surface-2); color: var(--fg); }
.adm-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.adm-nav a .adm-nav-count { margin-left: auto; font-size: 11px; color: var(--fg-faint); }
.adm-sidebar-foot { border-top: 1px solid var(--line); padding: 0.75rem; display: grid; gap: 2px; }
.adm-sidebar-foot a { display: flex; align-items: center; gap: 0.65rem; height: 38px; padding: 0 0.65rem; border-radius: var(--adm-radius); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 500; }
.adm-sidebar-foot a:hover { background: var(--adm-surface-2); color: var(--fg); }
.adm-sidebar-foot a svg { width: 18px; height: 18px; flex: none; }
.adm-sidebar-foot .adm-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; font-size: var(--fs-sm); }
.adm-sidebar-foot .adm-user strong { display: block; font-size: var(--fs-sm); line-height: 1.2; }
.adm-sidebar-foot .adm-user span { color: var(--fg-muted); font-size: var(--fs-xs); }
.adm-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; object-fit: cover; flex: none; }
.adm-avatar.sm { width: 28px; height: 28px; font-size: 0.65rem; }

.adm-main { display: flex; flex-direction: column; min-width: 0; }
.adm-topbar {
  position: sticky; top: 0; z-index: 60; height: var(--adm-topbar-h); display: flex; align-items: center; gap: 0.75rem;
  padding: 0 clamp(1rem, 2.5vw, 2rem); background: color-mix(in srgb, var(--adm-canvas) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.adm-menu-btn { display: none; }
.adm-crumbs { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); color: var(--fg-muted); min-width: 0; flex: 1; }
.adm-crumbs a { color: var(--fg-muted); }
.adm-crumbs a:hover { color: var(--fg); }
.adm-crumbs .sep { color: var(--fg-faint); }
.adm-crumbs .cur { color: var(--fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-topbar-actions { display: flex; align-items: center; gap: 0.5rem; }
.adm-topbar .select select { height: var(--adm-control-h-sm); }
/* A single definite column (not the implicit `auto` track): grid items can then never widen the page
   with their min-content size (tables, segmented controls, long words) — they wrap or scroll instead. */
.adm-content { padding: clamp(1rem, 2.5vw, 2rem); max-width: var(--adm-content-max); width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-content: start; }
.adm-content > * { min-width: 0; }
/* Long tokens (ids, URLs, hashes) wrap only when a line cannot hold them; prose keeps breaking at word boundaries. */
.adm-content { overflow-wrap: break-word; }
.adm-content.has-savebar { padding-bottom: 6rem; }
.adm-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 65; display: none; }

@media (max-width: 1023px) {
  .adm-page-actions .adm-sep { display: none; }
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm-sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow); }
  .adm.nav-open .adm-sidebar { transform: none; }
  .adm.nav-open .adm-overlay { display: block; }
  .adm-menu-btn { display: inline-grid; }
}

/* ------------------------------------------------------------- page head */
.adm-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem; }
.adm-page-head > * { min-width: 0; max-width: 100%; }
.adm-page-head h1 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); letter-spacing: -0.02em; line-height: 1.15; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-width: 0; overflow-wrap: break-word; }
.adm-page-head p { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 0.3rem; max-width: 60ch; }
.adm-page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.adm-page-actions .adm-sep { width: 1px; height: 24px; background: var(--line-strong); margin: 0 0.25rem; }

/* ----------------------------------------------------------------- cards */
.adm-card { background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--adm-radius-lg); min-width: 0; }
.adm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.adm-card-head > * { min-width: 0; }
.adm-card-head h2 { font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.adm-card-head p { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 0.15rem; }
.adm-card-body { padding: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.adm-card-body > * { min-width: 0; }
.adm-card-body > .adm-row:first-child { margin-top: 0; }
.adm-card-foot { padding: 0.9rem 1.25rem; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.adm-card.flush .adm-card-body { padding: 0; }
.adm-card.flush .adm-skeleton, .adm-card.flush .adm-empty { margin: 1rem; }
.adm-card.is-danger { border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.adm-card.is-danger .adm-card-head h2 { color: var(--bad); }
.adm-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.adm-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.adm-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
/* Main column + sidebar. The sidebar keeps a readable width (320–360px); when the content area cannot hold a
   ~520px editor next to it, the sidebar moves below the main column instead of being squeezed. The admin
   shell sidebar is 236px wide from 1024px up, so two columns need roughly 1180px of viewport. */
.adm-grid-side { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); align-items: start; }
.adm-grid-side > * { min-width: 0; }
.adm-grid-side.has-nav { grid-template-columns: 200px minmax(0, 1fr); }
@media (max-width: 1179px) { .adm-grid-side:not(.has-nav) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .adm-grid-side.has-nav { grid-template-columns: minmax(0, 1fr); } }
.adm-stats { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.adm-stat { background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--adm-radius-lg); padding: 0.9rem 1.1rem; display: grid; gap: 0.2rem; }
.adm-stat span { font-size: var(--fs-xs); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.adm-stat strong { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; }

/* ----------------------------------------------------------------- forms */
.adm-field { display: grid; gap: 0.35rem; font-size: var(--fs-sm); min-width: 0; }
.adm-field > span, .adm-label { color: var(--fg-muted); font-weight: 500; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.adm-field > span .req { color: var(--bad); }
.adm-field input, .adm-field select, .adm-field textarea, .adm-input {
  width: 100%; min-width: 0; height: var(--adm-control-h); padding: 0 0.8rem; font: inherit; font-size: var(--fs-sm); color: var(--fg);
  background: var(--adm-canvas); border: 1px solid var(--line-strong); border-radius: var(--adm-radius); outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.adm-field textarea { height: auto; min-height: 120px; padding: 0.6rem 0.8rem; line-height: 1.5; resize: vertical; }
.adm-field textarea.tall { min-height: 180px; }
.adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus, .adm-input:focus { border-color: var(--accent); box-shadow: var(--adm-focus); }
.adm-field input:disabled, .adm-field select:disabled, .adm-field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.adm-field input[aria-invalid="true"], .adm-field textarea[aria-invalid="true"], .adm-field select[aria-invalid="true"] { border-color: var(--bad); }
.adm-field .hint { color: var(--fg-faint); font-size: var(--fs-xs); }
.adm-field .err { color: var(--bad); font-size: var(--fs-xs); }
.adm-field.is-mono input { font-family: var(--font-mono); font-size: 0.8rem; }
.adm-field select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.adm-input-group { display: flex; align-items: stretch; }
.adm-input-group .adm-input { border-radius: var(--adm-radius) 0 0 var(--adm-radius); }
.adm-input-group .btn { border-radius: 0 var(--adm-radius) var(--adm-radius) 0; height: var(--adm-control-h); margin-left: -1px; }
.adm-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.adm-row .spacer { flex: 1; }
.adm-form-error { color: var(--bad); font-size: var(--fs-sm); display: flex; align-items: flex-start; gap: 0.4rem; min-width: 0; }
.adm-form-error svg { width: 16px; height: 16px; flex: none; margin-top: 0.15em; }
.adm-form-error[hidden] { display: none; }
.adm-help { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.5; }
.adm-help a { color: var(--accent); }

/* switches */
.adm-switch { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; font-size: var(--fs-sm); padding: 0.35rem 0; }
.adm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.adm-switch .track { flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--adm-surface-2); border: 1px solid var(--line-strong); position: relative; transition: background 0.15s, border-color 0.15s; margin-top: 1px; }
.adm-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--fg-muted); transition: transform 0.15s, background 0.15s; }
.adm-switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.adm-switch input:checked + .track::after { transform: translateX(18px); background: var(--accent-fg); }
.adm-switch input:focus-visible + .track { box-shadow: var(--adm-focus); }
.adm-switch input:disabled + .track { opacity: 0.5; }
.adm-switch .text { display: grid; gap: 0.1rem; min-width: 0; }
.adm-switch .text strong { font-weight: 500; color: var(--fg); }
.adm-switch .text small { color: var(--fg-muted); font-size: var(--fs-xs); line-height: 1.45; }
.adm-switch-group { display: grid; gap: 0.25rem; padding-left: 1rem; border-left: 2px solid var(--line); }
.adm-check-row { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.35rem 0; cursor: pointer; }
.adm-check-row input { margin-top: 0.3rem; accent-color: var(--accent); }
.adm-check-row input:disabled + span { opacity: 0.6; }
.adm-check-row > span { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

/* buttons (extend .btn) */
.adm .btn { height: var(--adm-control-h); padding: 0 1rem; font-size: var(--fs-sm); border-radius: var(--adm-radius); gap: 0.45rem; }
.adm .btn-sm { height: var(--adm-control-h-sm); padding: 0 0.75rem; font-size: var(--fs-xs); }
/* flex: none — otherwise the icon is a shrinkable flex item and the button under-reports its min-content width (table columns, wrapped rows). */
.adm .btn svg { width: 16px; height: 16px; flex: none; }
.adm .btn:focus-visible { outline: none; box-shadow: var(--adm-focus); }
.adm .btn:disabled, .adm .btn.is-busy { opacity: 0.55; cursor: not-allowed; }
.adm .btn.is-busy { cursor: progress; position: relative; }
.adm .btn.is-busy::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: adm-spin 0.7s linear infinite; }
.adm .btn-icon { width: var(--adm-control-h); padding: 0; justify-content: center; }
.adm .btn-icon.btn-sm { width: var(--adm-control-h-sm); }
.adm .btn-danger { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.adm .btn-danger:hover { background: color-mix(in srgb, var(--bad) 24%, transparent); }
.adm .btn-danger.btn-solid { background: var(--bad); color: #fff; border-color: var(--bad); }
.adm .btn-link { height: auto; padding: 0; color: var(--accent); background: none; border: 0; }
@keyframes adm-spin { to { transform: rotate(360deg); } }

/* badges */
.adm-badge { display: inline-flex; align-items: center; gap: 0.3rem; height: 22px; padding: 0 0.55rem; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; background: var(--adm-surface-2); color: var(--fg-muted); white-space: nowrap; }
.adm-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.adm-badge.no-dot::before { display: none; }
.adm-badge.good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.adm-badge.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.adm-badge.warn { background: var(--accent-soft); color: var(--accent); }
.adm-badge.info { background: color-mix(in srgb, #5b9cff 18%, transparent); color: #5b9cff; }
.adm-badge.outline { background: none; border: 1px solid var(--line-strong); }

/* tabs */
.adm-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs button, .adm-tabs a {
  height: 42px; padding: 0 0.9rem; border: 0; background: none; color: var(--fg-muted); font: inherit; font-size: var(--fs-sm); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
}
.adm-tabs button:hover, .adm-tabs a:hover { color: var(--fg); }
.adm-tabs button[aria-selected="true"], .adm-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.adm-tabs button:focus-visible { outline: none; box-shadow: var(--adm-focus); border-radius: 6px; }
.adm-tabs .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--bad); }
.adm-tabpanel[hidden] { display: none; }
.adm-subtabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--adm-surface-2); border-radius: var(--adm-radius); }
.adm-subtabs button { height: 30px; padding: 0 0.8rem; border: 0; border-radius: 6px; background: none; color: var(--fg-muted); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; }
.adm-subtabs button[aria-selected="true"] { background: var(--adm-surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.adm-subtabs button:focus-visible { outline: none; box-shadow: var(--adm-focus); }

/* tables */
.adm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.adm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.adm-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); font-weight: 600; padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--adm-surface); }
.adm-table td { padding: 0.7rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover td { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.adm-table td.num, .adm-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-table td.actions { text-align: right; white-space: nowrap; width: 1%; }
.adm-table td.actions > * + * { margin-left: 0.35rem; }
.adm-table .cell-main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.adm-table .cell-main .txt { min-width: 0; display: grid; gap: 0.1rem; }
/* The primary column is the one that flexes; it never collapses below 8rem (the wrapper scrolls instead). */
.adm-table td.cell-primary { min-width: 8rem; }
.adm-table .cell-main strong { overflow-wrap: break-word; max-width: 32ch; display: block; }
.adm-table .cell-main a strong { color: var(--fg); }
.adm-table .cell-main a:hover strong { color: var(--accent); }
.adm-table .sub { color: var(--fg-muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 36ch; }
.adm-thumb { width: 40px; height: 60px; border-radius: 5px; object-fit: cover; background: var(--adm-surface-2); flex: none; display: grid; place-items: center; color: var(--fg-faint); font-size: 11px; }
.adm-thumb.wide { width: 72px; height: 40px; }
.adm-thumb.round { width: 36px; height: 36px; border-radius: 999px; }
/* Card rows while the shell sidebar is a drawer: below 1024px the content area is too narrow for 5–6 columns. */
@media (max-width: 1023px) {
  .adm-table.responsive thead { display: none; }
  .adm-table.responsive tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); }
  .adm-table.responsive tbody tr:hover td { background: none; }
  .adm-table.responsive td { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0; border: 0; grid-column: 1 / -1; }
  .adm-table.responsive td[data-label]::before { content: attr(data-label); flex: 0 0 6.5rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); }
  .adm-table.responsive td.cell-primary { grid-column: 1; grid-row: 1; }
  .adm-table.responsive td.actions { grid-column: 2; grid-row: 1; width: auto; text-align: right; justify-content: flex-end; white-space: nowrap; }
  .adm-table.responsive td.num { text-align: left; }
  .adm-table.responsive td > .adm-row { margin-top: 0; }
  .adm-table.responsive td.cell-primary { width: auto; min-width: 0; }
  .adm-table .cell-main strong { max-width: 100%; }
}
/* Wide tables (7+ columns, e.g. source reports) switch to card rows below 1180px. */
@media (max-width: 1179px) {
  .adm-table.responsive.until-xl thead { display: none; }
  .adm-table.responsive.until-xl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); }
  .adm-table.responsive.until-xl tbody tr:hover td { background: none; }
  .adm-table.responsive.until-xl td { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0; border: 0; grid-column: 1 / -1; }
  .adm-table.responsive.until-xl td[data-label]::before { content: attr(data-label); flex: 0 0 6.5rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); }
  .adm-table.responsive.until-xl td.cell-primary { grid-column: 1; grid-row: 1; }
  .adm-table.responsive.until-xl td.actions { grid-column: 2; grid-row: 1; width: auto; text-align: right; justify-content: flex-end; white-space: nowrap; }
  .adm-table.responsive.until-xl td.num { text-align: left; }
  .adm-table.responsive.until-xl td > .adm-row { margin-top: 0; }
  .adm-table.responsive.until-xl td.cell-primary { width: auto; min-width: 0; }
  .adm-table.until-xl .cell-main strong { max-width: 100%; }
  /* card layout: title + status on the first line, details stacked, actions as a footer row */
  .adm-table.responsive.until-xl td.cell-side { grid-column: 2; grid-row: 1; justify-content: flex-end; align-items: flex-start; }
  .adm-table.responsive.until-xl td.cell-side::before { display: none; }
  .adm-table.responsive.until-xl td.actions { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; white-space: normal; margin-top: 0.3rem; padding-top: 0.5rem; border-top: 1px dashed var(--line); }
  .adm-table.responsive.until-xl td.actions .btn { flex: none; }
}

/* toolbar / filters */
.adm-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.adm-toolbar .adm-search { flex: 1 1 240px; display: flex; align-items: center; gap: 0.5rem; height: var(--adm-control-h); padding: 0 0.8rem; background: var(--adm-canvas); border: 1px solid var(--line-strong); border-radius: var(--adm-radius); min-width: 0; }
.adm-toolbar .adm-search:focus-within { border-color: var(--accent); box-shadow: var(--adm-focus); }
.adm-toolbar .adm-search svg { width: 16px; height: 16px; color: var(--fg-muted); flex: none; }
.adm-toolbar .adm-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg); font: inherit; font-size: var(--fs-sm); outline: none; }
.adm-toolbar .adm-field { width: auto; }
.adm-toolbar .adm-field select { width: auto; min-width: 140px; }
.adm-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--adm-surface-2); border-radius: var(--adm-radius); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.adm-seg::-webkit-scrollbar { display: none; }
.adm-seg button { height: 32px; padding: 0 0.75rem; border: 0; border-radius: 6px; background: none; color: var(--fg-muted); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; flex: none; }
.adm-seg button[aria-pressed="true"] { background: var(--adm-surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.adm-seg button:focus-visible { outline: none; box-shadow: var(--adm-focus); }

/* dropdown menu */
.adm-menu { position: relative; display: inline-block; }
/* Positioned by AdminUI.menu() from the button's viewport rectangle (fixed), so
   no scrolling ancestor can clip it or grow a scrollbar because of it. */
.adm-menu-list { position: fixed; left: 0; top: 0; min-width: 200px; max-width: calc(100vw - 16px); overflow-y: auto; background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--adm-radius); box-shadow: var(--shadow); padding: 0.3rem; z-index: 90; display: grid; }
.adm-menu-list[hidden] { display: none; }
.adm-menu-list svg { width: 16px; height: 16px; flex: none; color: var(--fg-muted); }
.adm-menu-list button.danger svg { color: inherit; }
.adm-menu-list button, .adm-menu-list a { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; padding: 0.5rem 0.65rem; border: 0; background: none; color: var(--fg); font: inherit; font-size: var(--fs-sm); border-radius: 6px; cursor: pointer; }
.adm-menu-list button:hover, .adm-menu-list a:hover, .adm-menu-list button:focus-visible { background: var(--adm-surface-2); outline: none; }
.adm-menu-list button.danger { color: var(--bad); }
.adm-menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 0.3rem 0; }

/* dialogs */
dialog.adm-dialog { width: min(520px, calc(100vw - 2rem)); max-width: 100%; max-height: calc(100vh - 2rem); border: 1px solid var(--line); border-radius: var(--adm-radius-lg); background: var(--adm-surface); color: var(--fg); padding: 0; box-shadow: var(--shadow); overflow: auto; }
dialog.adm-dialog.wide { width: min(760px, calc(100vw - 2rem)); }
dialog.adm-dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }
.adm-dialog-head { padding: 1.1rem 1.25rem 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.adm-dialog-head h2 { font-size: var(--fs-lg); }
.adm-dialog-head p { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 0.3rem; }
.adm-dialog-body { padding: 1rem 1.25rem; display: grid; gap: 0.9rem; }
.adm-dialog-foot { padding: 0 1.25rem 1.1rem; display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.adm-dialog .adm-dialog-foot .btn { min-width: 96px; }

/* genre / multi select */
.adm-multiselect { display: grid; gap: 0.6rem; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 32px; }
.adm-chip { display: inline-flex; align-items: center; gap: 0.35rem; height: 30px; padding: 0 0.4rem 0 0.75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 600; }
.adm-chip button { width: 20px; height: 20px; border-radius: 999px; border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; font: inherit; }
.adm-chip button:hover, .adm-chip button:focus-visible { background: color-mix(in srgb, var(--accent) 25%, transparent); outline: none; }
.adm-chip button svg { width: 12px; height: 12px; }
.adm-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.3rem; max-height: 220px; overflow: auto; padding: 0.4rem; border: 1px solid var(--line); border-radius: var(--adm-radius); background: var(--adm-canvas); }
.adm-options label { display: flex; align-items: center; gap: 0.5rem; height: 34px; padding: 0 0.6rem; border-radius: 6px; font-size: var(--fs-sm); cursor: pointer; }
.adm-options label:hover { background: var(--adm-surface-2); }
.adm-options label:has(input:focus-visible) { box-shadow: var(--adm-focus); }
.adm-options label.hide { display: none; }
.adm-options input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.adm-options .none { grid-column: 1 / -1; color: var(--fg-faint); font-size: var(--fs-sm); padding: 0.5rem; }

/* media previews */
.adm-media { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.adm-media-item { display: grid; gap: 0.6rem; grid-template-rows: 1fr auto auto; align-items: end; }
.adm-preview { position: relative; border-radius: var(--adm-radius); overflow: hidden; background: var(--adm-surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--fg-faint); font-size: var(--fs-xs); }
.adm-preview.poster { aspect-ratio: 2 / 3; max-width: 200px; }
.adm-preview.backdrop { aspect-ratio: 16 / 9; }
.adm-preview.still { aspect-ratio: 16 / 9; width: 96px; }
.adm-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-preview.is-broken img { display: none; }
.adm-preview .ph { display: grid; place-items: center; gap: 0.3rem; text-align: center; padding: 1rem; }
.adm-preview .ph svg { width: 24px; height: 24px; }
.adm-thumb .ph, .adm-title-head .adm-preview .ph, .adm-preview.still .ph { padding: 0; }
.adm-thumb .ph span, .adm-title-head .adm-preview .ph span, .adm-preview.still .ph span { display: none; }
.adm-thumb .ph svg, .adm-preview.still .ph svg { width: 16px; height: 16px; }
.adm-help svg { width: 14px; height: 14px; vertical-align: -2px; }

/* seasons & episodes */
.adm-season { background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--adm-radius-lg); overflow: hidden; }
.adm-season-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; }
.adm-season-head:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.adm-season-head .chev { width: 18px; height: 18px; color: var(--fg-muted); transition: transform 0.15s; flex: none; }
.adm-season[open] .adm-season-head .chev, .adm-season.is-open .adm-season-head .chev { transform: rotate(90deg); }
.adm-season-head h3 { font-size: var(--fs-md); font-weight: 600; }
.adm-season-head .meta { color: var(--fg-muted); font-size: var(--fs-xs); }
.adm-season-head .acts { margin-left: auto; display: flex; gap: 0.35rem; }
.adm-season-body { border-top: 1px solid var(--line); display: grid; gap: 1rem; padding: 1rem; }
.adm-season-body[hidden] { display: none; }
.adm-episodes { display: grid; gap: 0.5rem; }
.adm-episode { border: 1px solid var(--line); border-radius: var(--adm-radius); background: var(--adm-canvas); }
.adm-episode-row { display: grid; grid-template-columns: auto 96px minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.6rem 0.75rem; }
.adm-episode-row .num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-muted); width: 2.5ch; text-align: right; }
.adm-episode-row .txt { min-width: 0; display: grid; gap: 0.15rem; }
.adm-episode-row .txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-episode-row .txt .sub { color: var(--fg-muted); font-size: var(--fs-xs); }
.adm-episode-row .acts { display: flex; gap: 0.25rem; }
.adm-episode-edit { border-top: 1px solid var(--line); padding: 1rem 0.75rem; display: grid; gap: 1rem; }
.adm-episode-edit[hidden] { display: none; }
@media (max-width: 640px) {
  .adm-episode-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .adm-episode-row .adm-preview.still { display: none; }
}

/* save bar */
.adm-savebar { position: fixed; left: var(--adm-sidebar-w); right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem clamp(1rem, 2.5vw, 2rem); background: color-mix(in srgb, var(--adm-surface) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.adm-savebar .state { font-size: var(--fs-sm); color: var(--fg-muted); display: flex; align-items: center; gap: 0.45rem; }
.adm-savebar .state .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--fg-faint); }
.adm-savebar.is-dirty .state .dot { background: var(--accent); }
.adm-savebar .spacer { flex: 1; }
@media (max-width: 1023px) { .adm-savebar { left: 0; } }

/* misc */
.adm-empty { padding: 3rem 1rem; text-align: center; color: var(--fg-muted); display: grid; gap: 0.5rem; justify-items: center; }
.adm-empty svg { width: 36px; height: 36px; color: var(--fg-faint); }
.adm-empty h3 { color: var(--fg); font-size: var(--fs-md); }
.adm-empty p { font-size: var(--fs-sm); max-width: 44ch; }
.adm-skeleton { border-radius: var(--adm-radius); background: linear-gradient(90deg, var(--adm-surface-2) 25%, color-mix(in srgb, var(--adm-surface-2) 60%, var(--adm-surface)) 50%, var(--adm-surface-2) 75%); background-size: 200% 100%; animation: adm-shimmer 1.2s infinite; min-height: 48px; }
@keyframes adm-shimmer { to { background-position: -200% 0; } }
/* Key/value rows. The label column takes its natural width but never more than 40% of the row; the value column
   gets the rest. UA margins on <dd> (40px) are reset — they used to eat the value column. Values wrap at word
   boundaries; only a token longer than the whole column (an id, a URL) may break mid-word. */
.adm-kv { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 0.45rem 1.25rem; align-items: baseline; font-size: var(--fs-sm); margin: 0; }
.adm-kv dt { color: var(--fg-muted); margin: 0; min-width: 0; overflow-wrap: break-word; }
.adm-kv dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.adm-kv dd > .adm-badge { vertical-align: middle; }
.adm-ext { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; color: var(--accent); }
.adm-ext svg { width: 12px; height: 12px; flex: none; }
.adm-code { font-family: var(--font-mono); font-size: 0.78rem; background: var(--adm-canvas); border: 1px solid var(--line); border-radius: 6px; padding: 0.6rem 0.75rem; overflow: auto; max-height: 240px; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 1rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--fg-muted); }
.adm-pager .pages { display: flex; gap: 0.25rem; }
.adm-pager a, .adm-pager span.cur { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 0.5rem; border-radius: 6px; color: var(--fg-muted); }
.adm-pager a:hover { background: var(--adm-surface-2); color: var(--fg); }
.adm-pager span.cur { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.adm-result { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0.9rem; padding: 0.9rem; background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--adm-radius-lg); }
.adm-result .adm-preview.poster { max-width: 96px; }
.adm-result .txt { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.adm-result .txt p { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.adm-results { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.adm-settings-nav { position: sticky; top: calc(var(--adm-topbar-h) + 1rem); display: grid; gap: 2px; }
@media (max-width: 900px) {
  .adm-settings-nav { position: static; display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; border-bottom: 1px solid var(--line); }
  .adm-settings-nav::-webkit-scrollbar { display: none; }
  .adm-settings-nav a { white-space: nowrap; flex: none; }
}
.adm-settings-nav a { padding: 0.5rem 0.65rem; border-radius: var(--adm-radius); color: var(--fg-muted); font-size: var(--fs-sm); }
.adm-settings-nav a:hover { background: var(--adm-surface-2); color: var(--fg); }
.adm-settings-nav a.is-active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
/* Compact rows: tag + field name + value + action. The value asks for at least 8rem; when the row cannot give it
   that, it wraps onto its own line (flex-wrap) instead of being squeezed into a one-character-wide column. */
.adm-inline-list { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.adm-inline-list li { display: flex; align-items: center; gap: 0.35rem 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--adm-radius); font-size: var(--fs-sm); min-width: 0; }
.adm-inline-list li > * { min-width: 0; }
.adm-inline-list li > strong { white-space: nowrap; }
.adm-inline-list li .val { flex: 1 1 8rem; overflow-wrap: break-word; }
.adm-inline-list li .btn { margin-left: auto; }
.adm-inline-list code { font-family: var(--font-mono); font-size: 0.75rem; background: var(--adm-surface-2); padding: 0.1rem 0.4rem; border-radius: 4px; }
.adm-sticky-head { position: sticky; top: var(--adm-topbar-h); z-index: 40; background: var(--adm-canvas); padding-bottom: 0.5rem; }
.adm-title-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; min-width: 0; }
.adm-title-head > * { min-width: 0; }
.adm-title-head .adm-preview.poster { width: 56px; max-width: 56px; }
.adm-title-head .meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 0.3rem; }
.adm-title-head .meta code { font-family: var(--font-mono); font-size: 0.75rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* playback sources (editor tab + episode panel) */
.adm-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.adm-source { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-radius: var(--adm-radius); background: var(--adm-canvas); min-width: 0; }
.adm-source.is-off { opacity: 0.6; }
.adm-source-main { flex: 1 1 18rem; min-width: 0; display: grid; gap: 0.3rem; }
.adm-source-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: var(--fs-sm); }
.adm-source-head .adm-help { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--fs-xs); }
.adm-source-url { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.adm-source-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-left: auto; }
.adm-sources.is-compact .adm-source { padding: 0.5rem 0.75rem; }
.adm-episode-sources { display: grid; gap: 0.6rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
@media (max-width: 640px) { .adm-source-acts { margin-left: 0; width: 100%; } }

/* ---------------- Legal & Pages, support inbox, takedowns ---------------- */
.adm-dl { display: grid; gap: 0.5rem; margin: 0; }
.adm-dl > div { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 0.25rem 0.9rem; align-items: baseline; }
.adm-dl dt { font-size: var(--fs-xs); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.adm-dl dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.adm-dl dd.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.adm-list { list-style: none; margin: 0; padding: 0; display: grid; }
.adm-list-item { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; padding: 0.7rem 1rem; border-top: 1px solid var(--line); }
.adm-list-item:first-child { border-top: 0; }
.adm-timeline { list-style: none; margin: 0.5rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--line); display: grid; gap: 0.75rem; }
.adm-timeline li { position: relative; display: grid; gap: 0.15rem; font-size: var(--fs-sm); }
.adm-timeline li::before { content: ""; position: absolute; left: -1.35rem; top: 0.4rem; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.adm-note, .adm-note-box p { white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-note { margin: 0.2rem 0 0; padding: 0.5rem 0.75rem; background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--adm-radius); color: var(--fg); }
.adm-note-box { padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--adm-radius-lg); background: var(--adm-surface); display: grid; gap: 0.4rem; }
.adm-note-box p { margin: 0; color: var(--fg-muted); line-height: 1.6; }
.adm-url-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.adm-url-list a { overflow-wrap: anywhere; }
.adm-search { flex: 1 1 200px; min-width: 160px; }
.adm-search input { width: 100%; height: 36px; padding: 0 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--adm-radius); background: var(--bg); color: var(--fg); font: inherit; }
.adm-search input:focus { border-color: var(--accent); box-shadow: var(--adm-focus); outline: none; }
.adm-field textarea.mono, .adm-field .mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.adm-preview-article { padding: 0.25rem 0; }
.adm-preview-article h1 { font-size: var(--fs-xl); margin-bottom: 0.75rem; letter-spacing: -0.02em; }
.adm-preview-article .legal-body { font-size: var(--fs-sm); }
@media (max-width: 1023px) { .adm-dl > div { grid-template-columns: 1fr; gap: 0.1rem; } }

/* ---------------- blog editor ---------------- */
.md-toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.35rem; margin-bottom: 0.35rem; border: 1px solid var(--line); border-radius: var(--adm-radius); background: var(--adm-canvas); }
.md-toolbar .btn { font-family: var(--font-mono); font-size: var(--fs-xs); min-width: 34px; }
.md-toolbar .btn svg { width: 14px; height: 14px; }
.adm-cover-preview { display: block; width: 100%; height: auto; max-height: 240px; object-fit: cover; border-radius: var(--adm-radius); border: 1px solid var(--line); }
.adm-inline-input { display: block; width: 100%; margin-top: 0.35rem; height: 30px; padding: 0 0.5rem; font-size: var(--fs-xs); border: 1px solid var(--line); border-radius: var(--adm-radius); background: var(--adm-canvas); color: var(--fg); }
.adm-inline-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--adm-focus); }
.adm-options .adm-option-btn { display: flex; justify-content: space-between; gap: 0.5rem; width: 100%; text-align: left; padding: 0.5rem 0.65rem; border-radius: var(--adm-radius); font-size: var(--fs-sm); color: var(--fg); }
.adm-options .adm-option-btn:hover, .adm-options .adm-option-btn:focus-visible { background: var(--adm-canvas); outline: none; }
.adm-preview-article .blog-body { color: var(--fg-muted); }
.adm-preview-article h1 { font-size: var(--fs-xl); margin-bottom: 0.75rem; }
.btn.btn-icon { width: 30px; padding: 0; justify-content: center; }
.adm-list-rows .list-row { background: var(--adm-canvas); }
.adm-list-rows .list-note { background: var(--adm-surface); }