/* ===========================================================================
   Project V Admin -- design system
   Structure: tokens -> base -> shell (sidebar/topbar) -> components (tabs,
   cards, forms, buttons, save states, toasts, drawer) -> page-specific.
   Reference for the shell/tabs/saved-chip ideas: SF CRD (grouped sidebar, hub
   tabs, "Saved" chip). Class names used by the page scripts are kept.
   =========================================================================== */

/* ---------------- Tokens ---------------- */
:root {
  --bg: #0a0a0f;
  --surface: #131318;
  --surface-elevated: #1b1b22;
  --surface-sunken: #0e0e13;
  --sidebar-bg: #0c0c11;
  --pink: #8b5cf6;
  --pink-dim: #6d3fd6;
  --pink-bright: #a78bfa;
  --pink-subtle: rgba(139, 92, 246, 0.14);
  --accent-2: #22d3ee;
  --text: #f0eff5;
  --text-secondary: #94919f;
  --text-faint: #5c5964;
  --error: #ef6a86;
  --error-subtle: rgba(239, 106, 134, 0.14);
  --ok: #4dbb5f;
  --ok-subtle: rgba(77, 187, 95, 0.15);
  --warn: #d99425;
  --warn-subtle: rgba(217, 148, 37, 0.16);
  --border: #232329;
  --border-strong: #3a3844;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 3px rgba(139, 92, 246, 0.28);
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 60px;
}
:root[data-theme="light"] {
  --bg: #f4f4f8;
  --surface: #ffffff;
  --surface-elevated: #f0eef7;
  --surface-sunken: #f7f6fb;
  --sidebar-bg: #ffffff;
  --pink-dim: #7c5ce0;
  --pink-bright: #7c3aed;
  --pink-subtle: rgba(139, 92, 246, 0.1);
  --accent-2: #0891b2;
  --text: #17171b;
  --text-secondary: #63626b;
  --text-faint: #9b99a3;
  --error: #c22e4f;
  --error-subtle: rgba(194, 46, 79, 0.1);
  --ok: #1f8a3a;
  --ok-subtle: rgba(31, 138, 58, 0.12);
  --warn: #b26b00;
  --warn-subtle: rgba(178, 107, 0, 0.12);
  --border: #e4e3e8;
  --border-strong: #cfccd8;
  --shadow-sm: 0 1px 2px rgba(23, 23, 27, 0.05), 0 1px 1px rgba(23, 23, 27, 0.04);
  --shadow-md: 0 10px 24px rgba(23, 23, 27, 0.08);
  --shadow-lg: 0 24px 60px rgba(23, 23, 27, 0.18);
  --shadow-focus: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

/* ---------------- Base ---------------- */
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .brand-line1, .stat-value { font-family: "Sora", "Inter", sans-serif; letter-spacing: -0.01em; font-weight: 600; }
code { background: var(--surface-elevated); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
.text-secondary { color: var(--text-secondary); }
svg.icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: rgba(139, 92, 246, 0.28); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--pink-dim); }

/* ---------------- Buttons ---------------- */
button {
  background: var(--pink);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease, opacity .15s ease;
}
button:hover { background: var(--pink-dim); }
button:not(:disabled):active { transform: scale(0.97); }
button:disabled { opacity: 0.45; cursor: default; }
button.secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
button.secondary:hover { background: var(--surface-elevated); }
button.ghost { background: transparent; color: var(--text-secondary); }
button.ghost:hover { background: var(--surface-elevated); color: var(--text); }
button.danger { background: transparent; color: var(--error); border-color: var(--error-subtle); }
button.danger:hover { background: var(--error); color: #fff; }
button.small { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
button:focus-visible, .nav-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.icon-btn {
  flex: none; width: 36px; height: 36px; padding: 0; border-radius: 9px;
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
}
.icon-btn:hover { background: var(--surface-elevated); color: var(--pink); border-color: var(--pink); }
.icon-btn svg.icon { width: 17px; height: 17px; }
.icon-btn.danger:hover, .icon-btn#logoutBtn:hover { color: var(--error); border-color: var(--error); background: var(--error-subtle); }

/* ---- Save button states: idle -> (dirty) -> saving -> saved / error ----
   Every Save in the panel goes through saveWith() in shared.js, which sets
   data-state. "Saved" is green with a check and holds for ~2s; "dirty"
   (unsaved edits) lights the button and shows an "Unsaved changes" chip. */
button[data-state="saving"] { opacity: 1; background: var(--pink-dim); cursor: progress; }
button[data-state="saving"]::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin .7s linear infinite;
}
button.secondary[data-state="saving"] { background: var(--surface-elevated); color: var(--text-secondary); }
button.secondary[data-state="saving"]::before { border-color: var(--border-strong); border-top-color: var(--pink); }
button[data-state="saved"], button.secondary[data-state="saved"] { background: var(--ok); border-color: var(--ok); color: #fff; opacity: 1; }
button[data-state="saved"]::before { content: "✓"; font-weight: 800; }
button[data-state="error"], button.secondary[data-state="error"] { background: var(--error); border-color: var(--error); color: #fff; opacity: 1; }
button.is-dirty { box-shadow: 0 0 0 3px var(--pink-subtle); }
button.secondary.is-dirty { border-color: var(--pink); color: var(--pink-bright); }
@keyframes spin { to { transform: rotate(360deg); } }

.save-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.save-status { font-size: 12.5px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 6px; min-height: 20px; }
.save-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0; }
.save-status[data-state="dirty"] { color: var(--warn); }
.save-status[data-state="dirty"]::before { opacity: 1; }
.save-status[data-state="saved"] { color: var(--ok); }
.save-status[data-state="saved"]::before { opacity: 1; }
.save-status[data-state="error"] { color: var(--error); }
.save-status[data-state="error"]::before { opacity: 1; }

/* ---------------- Forms ---------------- */
input[type="text"], input[type="password"], input[type="number"], input[type="search"], input[type="email"],
input[type="datetime-local"], input[type="date"], select, textarea {
  width: 100%;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  padding: 9px 11px;
  font-size: 13.5px;
  font-family: inherit;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--pink); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--pink); width: 15px; height: 15px; margin: 0; flex-shrink: 0; }
label.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 16px 0 6px; }
.field-grid, .price-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px; }
.price-fields label, .wait-field, .field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.price-fields .wide, .field-grid .wide { grid-column: 1 / -1; }
.price-fields label.check, label.check { flex-direction: row; align-items: center; gap: 9px; color: var(--text); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.wait-field { margin-bottom: 12px; }
.price-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 16px 0 8px; }
.price-label:first-child { margin-top: 0; }
.price-hint, .panel-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.price-hint { margin-top: 4px; }

/* On/off switch: <input type="checkbox" class="switch"> */
input.switch {
  appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 999px;
  background: var(--border-strong); position: relative; cursor: pointer; flex-shrink: 0; transition: background .18s ease;
}
input.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s ease;
}
input.switch:checked { background: var(--pink); }
input.switch:checked::after { transform: translateX(16px); }

/* Segmented control (replaces the old pill toggles) */
.tier-toggle, .seg {
  display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-sunken);
  border: 1px solid var(--border); border-radius: 10px; max-width: 100%; flex-wrap: wrap;
}
.tier-toggle button, .seg button {
  background: transparent; color: var(--text-secondary); border: none; padding: 7px 14px; font-size: 13px; border-radius: 7px;
}
.tier-toggle button:hover, .seg button:hover { background: var(--surface-elevated); color: var(--text); }
.tier-toggle button.active, .seg button.active { background: var(--pink); color: #fff; box-shadow: var(--shadow-sm); }

/* ---------------- Badges ---------------- */
.status-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px; padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.status-badge svg.icon { width: 12px; height: 12px; }
.status-badge.status-published { background: var(--ok-subtle); color: var(--ok); }
.status-badge.status-draft { background: rgba(153, 153, 153, 0.16); color: var(--text-secondary); }
.status-badge.status-scheduled { background: var(--warn-subtle); color: var(--warn); }
.status-badge.status-premium { background: rgba(190, 130, 255, 0.18); color: #b073f0; }
.status-badge.status-error { background: var(--error-subtle); color: var(--error); }

/* ---------------- Login ---------------- */
html.has-session #loginScreen { display: none !important; } /* a saved session is being checked: no login-box flash on refresh */
#loginScreen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(900px 500px at 50% -10%, var(--pink-subtle), transparent 70%), var(--bg); }
#loginBox { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 34px 32px; width: 320px; text-align: center; box-shadow: var(--shadow-md); }
#loginBox .login-logo { width: 58px; height: 58px; border-radius: 16px; margin: 0 auto 16px; }
#loginBox .login-logo-wide { display: block; width: 250px; max-width: 90%; height: auto; margin: 0 auto 26px; }
.logo-mark { display: block; object-fit: contain; box-shadow: 0 4px 14px rgba(139, 92, 246, .35); }
.logo-badge { background: linear-gradient(135deg, var(--pink), #6d3fd6); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 4px 14px rgba(139, 92, 246, .35); }
#loginBox .logo-badge { font-size: 27px; }
#loginBox h1 { font-size: 19px; margin: 0 0 22px; }
#loginBox h1 span { color: var(--pink-bright); }
#loginBox input { margin-bottom: 12px; }
#loginError { color: var(--error); font-size: 13px; min-height: 18px; margin-bottom: 8px; }
#loginBox button { width: 100%; padding: 11px; }

/* ---------------- Shell: sidebar ---------------- */
#app { display: flex; height: 100vh; }
.sidebar {
  width: var(--sidebar-w); background: var(--sidebar-bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0; transition: width .18s ease; overflow: hidden; position: relative; z-index: 5;
}
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--topbar-h); padding: 0 14px 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.brand-left { display: flex; align-items: center; gap: 10px; overflow: hidden; min-width: 0; }
.sidebar-top .logo-img { width: 40px; height: 34px; border-radius: 0; box-shadow: none; flex-shrink: 0; font-size: 17px; }
.sidebar-top .side-logo-wide { display: block; width: 96px; height: auto; margin-bottom: 5px; }
.brand-text { line-height: 1.1; overflow: hidden; white-space: nowrap; }
.brand-line1 { font-size: 15px; font-weight: 800; }
.brand-line2 { font-size: 11.5px; font-weight: 500; color: var(--text-secondary); }
.sidebar.collapsed .sidebar-top { flex-direction: column; justify-content: center; gap: 0; padding: 0; }
.sidebar.collapsed .brand-text, .sidebar.collapsed .brand-left { display: none; }
.collapse-btn { width: 28px; height: 28px; padding: 0; border-radius: 8px; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); flex-shrink: 0; }
.collapse-btn:hover { background: var(--surface-elevated); color: var(--pink); border-color: var(--pink); }
.collapse-btn svg.icon { width: 15px; height: 15px; }

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.nav-group-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); padding: 14px 12px 6px; white-space: nowrap; }
.nav-group-label:first-child { padding-top: 2px; }
.sidebar.collapsed .nav-group-label { height: 1px; padding: 0; margin: 10px 14px; background: var(--border); font-size: 0; overflow: hidden; }
.sidebar.collapsed .nav-group-label:first-child { display: none; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; color: var(--text-secondary);
  border-radius: 10px; padding: 9px 12px; font-size: 13.5px; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; justify-content: flex-start;
}
.nav-item:hover { background: var(--surface-elevated); color: var(--text); }
.nav-item.active { background: var(--pink); color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(139, 92, 246, 0.35); }
.nav-item .label { overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px; }
.sidebar.collapsed .nav-item .label { display: none; }

.sidebar-bottom { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
.sidebar-bottom .icon-btn { flex: 1; }
.sidebar.collapsed .sidebar-bottom { flex-direction: column; align-items: center; }
.sidebar.collapsed .sidebar-bottom .icon-btn { flex: none; width: 36px; }

/* ---------------- Shell: topbar + content ---------------- */
.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--topbar-h); padding: 0 28px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  flex-shrink: 0;
}
.topbar-title { min-width: 0; }
.crumbs { font-size: 11.5px; color: var(--text-faint); display: flex; gap: 6px; align-items: center; line-height: 1.2; }
.crumbs button { background: none; border: none; padding: 0; color: var(--text-secondary); font-size: 11.5px; font-weight: 500; }
.crumbs button:hover { color: var(--pink-bright); background: none; }
.topbar h1 { margin: 0; font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.scan-status { color: var(--text-secondary); font-size: 12.5px; align-self: center; }
.topbar { justify-content: space-between; }
main.content { padding: 24px 28px 80px; max-width: 1180px; width: 100%; margin: 0 auto; }

.page-intro { color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; margin: 0 0 20px; max-width: 720px; }
.layout-intro { color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; margin-bottom: 18px; max-width: 720px; }

/* ---------------- Tabs ---------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: none; border: 0; border-radius: 0; color: var(--text-secondary); padding: 11px 15px; font-size: 13.5px; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px; flex-shrink: 0;
}
.tab:hover { color: var(--text); background: none; }
.tab.active { color: var(--pink-bright); border-bottom-color: var(--pink); }
.tab .tab-count { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-elevated); color: var(--text-secondary); }
.tab.active .tab-count { background: var(--pink-subtle); color: var(--pink-bright); }
.tab .tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.tab-pane { animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* The Content list's status filter is a tab strip too */
.status-tabs { display: flex; gap: 2px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.status-tab { background: transparent; color: var(--text-secondary); border: none; border-radius: 0; padding: 10px 14px; font-size: 13.5px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.status-tab:hover { color: var(--text); background: transparent; }
.status-tab.active { color: var(--pink-bright); border-bottom-color: var(--pink); }
.status-tab .count { color: var(--text-faint); font-weight: 500; margin-left: 4px; }
.status-tab.active .count { color: var(--pink-bright); }

/* ---------------- Cards ---------------- */
.card, .dash-panel, .publish-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.card, .dash-panel { padding: 0; margin-bottom: 16px; overflow: hidden; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 22px 0; }
.card-title, .dash-panel h2 { margin: 0; font-size: 15.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-desc, .dash-panel p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; max-width: 640px; }
.card-body { padding: 16px 22px 20px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px; border-top: 1px solid var(--border); background: var(--surface-sunken); }
.card-head + .card-body { padding-top: 14px; }
/* The older dash-panel markup (title + paragraph + content as direct children) */
.dash-panel { padding: 20px 22px; }
.dash-panel h2 { margin-bottom: 4px; }
.dash-panel p { margin-bottom: 14px; }
/* Panels that live inside a card lose their own chrome */
.card .publish-panel, .card-body .publish-panel { background: none; border: 0; padding: 0; border-radius: 0; }
.publish-panel { padding: 16px 18px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.publish-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.publish-actions input[type="datetime-local"] { width: auto; }
.grant-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grant-form input[type="number"], .grant-form input[type="text"] { width: 120px; }
.grant-form select { flex: 1; min-width: 0; }

/* Stats */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.stat-card .stat-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--pink-subtle); color: var(--pink-bright); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-card .stat-value { font-size: 23px; font-weight: 700; line-height: 1.2; }
.stat-card .stat-label { font-size: 12.5px; color: var(--text-secondary); }
.top-content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.top-content-grid .dash-panel { margin-bottom: 0; }
.top-content-hint { font-size: 11.5px !important; margin: -2px 0 12px !important; }
.top-content-list { display: flex; flex-direction: column; }
.top-content-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.top-content-row:last-child { border-bottom: none; }
.top-content-rank { width: 22px; flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--text-faint); text-align: center; }
.top-content-info { flex: 1; min-width: 0; }
.top-content-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-content-series { font-size: 11.5px; color: var(--text-secondary); }
.top-content-metric { font-size: 13px; font-weight: 700; color: var(--pink-bright); white-space: nowrap; }
.top-content-empty { color: var(--text-faint); font-size: 12.5px; padding: 8px 2px; }

/* ---------------- Toolbar / search / pagination ---------------- */
.content-toolbar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.search-box { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; }
.search-box svg.icon { width: 16px; height: 16px; color: var(--text-faint); }
.search-box input { border: none; background: transparent; padding: 10px 0; box-shadow: none !important; }
.search-box:focus-within { box-shadow: var(--shadow-focus); border-color: var(--pink); }
.filter-select { width: auto; min-width: 160px; background: var(--surface); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
#pageInfo, #usersPageInfo { font-size: 13px; color: var(--text-secondary); }
#emptyState, #usersEmptyState, #providersEmptyState { color: var(--text-secondary); text-align: center; padding: 40px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
#loading, #usersLoading, #providersLoading, #homeBlocksLoading { color: var(--text-secondary); padding: 40px; text-align: center; }
#genreLegend { color: var(--text-faint); font-size: 12.5px; margin-bottom: 16px; }
.back-btn { margin-bottom: 14px; }

/* ---------------- Content list rows ---------------- */
.series-row {
  display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 16px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.series-row:hover { border-color: var(--pink); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.row-thumb { width: 46px; height: 64px; border-radius: 7px; object-fit: cover; background: var(--surface-elevated); flex-shrink: 0; }
.row-info { flex: 1; min-width: 0; }
.row-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.row-meta { font-size: 12.5px; color: var(--text-secondary); }
.row-genres { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; flex-shrink: 0; }
.row-chevron { color: var(--text-faint); flex-shrink: 0; }
.row-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------------- Series detail ---------------- */
.series-hero { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 18px; }
.series-hero-thumb { width: 54px; height: 74px; border-radius: 8px; object-fit: cover; background: var(--surface-elevated); flex-shrink: 0; }
.series-hero-info { flex: 1; min-width: 0; }
.series-hero h2 { margin: 0 0 3px; font-size: 19px; }
.series-hero .meta { color: var(--text-secondary); font-size: 12.5px; }
.series-hero-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.media-grid { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .media-grid { grid-template-columns: 1fr; } }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; align-items: stretch; }
/* Cards side by side are the same height, and a card's footer (Save button) always sits at the bottom edge, level with its neighbour's */
.two-col .card { margin-bottom: 0; display: flex; flex-direction: column; }
.two-col .card .card-body { flex: 1; }
/* a field with its Save button on the same line */
.inline-save { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline-save input[type="number"], .inline-save input[type="text"] { width: 160px; max-width: 100%; }
.image-slot {
  position: relative; border-radius: 11px; overflow: hidden; background: var(--surface-sunken); aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px dashed var(--border-strong); text-align: center; font-size: 12px; color: var(--text-secondary); padding: 8px; transition: border-color .15s ease, background .15s ease;
}
.image-slot:hover { border-color: var(--pink); background: var(--pink-subtle); }
.image-slot.has-image { border: 1px solid var(--border); padding: 0; }
.image-slot img { width: 100%; height: 100%; object-fit: cover; }
.image-slot input[type="file"] { display: none; }
.image-slot .label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 11px; font-weight: 600; padding: 5px 0; text-align: center; }
.banner-slot { aspect-ratio: 16 / 9; margin-top: 12px; max-width: 460px; }
.genre-chips, .lang-chips, .country-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.genre-chip { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer; user-select: none; transition: all .12s ease; }
.genre-chip:hover { border-color: var(--pink); }
.genre-chip.selected { background: var(--pink); border-color: var(--pink); color: #fff; }
.row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.episodes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; }
.episode-slot { text-align: center; }
.episode-slot .image-slot { aspect-ratio: 3 / 4; }
.episode-slot .ep-label { font-size: 12px; font-weight: 600; margin-top: 6px; }
.episode-slot .ep-langs { font-size: 10px; color: var(--text-secondary); margin-top: 2px; }
.episode-slot .ep-gold-price { width: 100%; margin-top: 5px; padding: 4px 6px; font-size: 12px; text-align: center; border-radius: 7px; }
.ep-retention-btn { width: 100%; margin-top: 5px; padding: 4px 6px; font-size: 11px; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
.ep-retention-btn:hover { border-color: var(--pink); color: var(--pink-bright); background: var(--pink-subtle); }
.retention-panel { margin-top: 18px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.retention-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.retention-bar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.retention-bar-fill { width: 100%; background: var(--pink); border-radius: 3px 3px 0 0; min-height: 2px; }
.retention-bars-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-faint); }
.country-list { max-height: 210px; overflow-y: auto; border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; margin-top: 8px; background: var(--surface-sunken); }
.country-option { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; cursor: pointer; }
.sticky-save {
  position: sticky; bottom: 0; z-index: 4; margin: 18px -28px -80px; padding: 12px 28px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
}

/* ---------------- Wait gate panel ---------------- */
.wait-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wait-presets button.active { background: var(--pink); color: #fff; border-color: transparent; }
.gate-switch-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 11px; }
.gate-switch-row .grow { flex: 1; }
.gate-switch-row strong { display: block; font-size: 14px; }
.gate-switch-row span.sub { font-size: 12.5px; color: var(--text-secondary); }
.radio-cards { display: grid; gap: 8px; }
.radio-card { display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--surface-sunken); transition: border-color .12s ease, background .12s ease; }
.radio-card:hover { border-color: var(--border-strong); }
.radio-card.selected { border-color: var(--pink); background: var(--pink-subtle); }
.radio-card strong { font-size: 13.5px; display: block; }
.radio-card span.sub { font-size: 12px; color: var(--text-secondary); }
.preview-chip { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 9px 12px; border-radius: 9px; background: var(--pink-subtle); color: var(--pink-bright); font-weight: 500; margin: 10px 0 0; }
.insight-rows { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow: auto; padding-right: 4px; }
.insight-row { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; font-size: 12px; }
.insight-bar { height: 8px; border-radius: 4px; background: var(--pink); min-width: 2px; }
.insight-reco { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); background: var(--surface-sunken); border-radius: 10px; font-size: 13px; }

/* ---------------- Home layout ---------------- */

/* ---------------- Users / providers ---------------- */
.user-card, .provider-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; transition: border-color .15s ease; }
.user-card:hover, .provider-card:hover { border-color: var(--border-strong); }
.user-card-top { display: flex; align-items: flex-start; gap: 14px; }
.user-avatar, .user-avatar-fallback { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--surface-elevated); flex-shrink: 0; }
.user-avatar-fallback { color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.user-identity { flex: 1; min-width: 0; }
.user-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-email { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.user-plan-col { text-align: right; flex-shrink: 0; }
.user-gold { font-size: 14.5px; font-weight: 700; color: var(--pink-bright); white-space: nowrap; }
.user-plan-label { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; white-space: nowrap; }
.user-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.user-tag { font-size: 11.5px; padding: 3px 10px; border-radius: 20px; background: var(--surface-elevated); color: var(--text-secondary); white-space: nowrap; }
.user-dates { font-size: 11px; color: var(--text-faint); margin-top: 10px; }
.user-support-code { font-size: 11px; font-family: "SF Mono", Consolas, monospace; color: var(--text-faint); margin-top: 2px; }
.user-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.user-card-actions button { padding: 7px 12px; font-size: 12.5px; }
.user-card-actions .danger:hover { background: var(--error); color: #fff; }
.user-card-actions .grant-form { display: flex; gap: 6px; align-items: center; background: var(--surface-elevated); border-radius: 20px; padding: 4px 4px 4px 12px; flex-wrap: nowrap; }
.user-card-actions .grant-form input[type="number"] { width: 60px; background: var(--bg); padding: 6px 8px; }
.grant-unit { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.3px; }
.user-card-actions > div { display: contents; }
.provider-card { padding: 20px 22px; }
.provider-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.provider-card-header h2 { margin: 0; }
.provider-card-stats { display: flex; gap: 22px; margin-bottom: 14px; font-size: 13.5px; color: var(--text-secondary); }
.provider-card-stats strong { color: var(--text); font-size: 16px; }
.provider-login-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.provider-series-list { display: flex; flex-direction: column; }
.provider-series-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.provider-series-row:last-child { border-bottom: none; }
.provider-series-row span:last-child { color: var(--text-secondary); white-space: nowrap; }

/* ---------------- Lists (pricing / offers) ---------------- */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.list-head h2 { margin: 0; font-size: 16px; }
.list-head p { margin: 3px 0 0; color: var(--text-secondary); font-size: 13px; max-width: 620px; }
.price-table { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.price-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 12px 16px; transition: border-color .15s ease; }
.price-row:hover { border-color: var(--border-strong); }
.price-main { flex: 1; min-width: 0; }
.price-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.empty-state { text-align: center; padding: 34px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-secondary); font-size: 13.5px; background: var(--surface); }
.empty-state strong { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 4px; }
.offer-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.offer-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.offer-stat-value { font-size: 24px; font-weight: 700; line-height: 1.3; }
.offer-stat-label { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.offer-count { font-size: 22px; font-weight: 700; min-width: 48px; text-align: right; }
.offer-results { font-size: 12.5px; margin-top: 8px; line-height: 1.6; }
.price-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.price-form-msg { font-size: 13px; color: var(--error); }
.price-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* ---------------- Side drawer (create/edit forms) ---------------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(5, 4, 10, .55); backdrop-filter: blur(3px); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.price-form {
  display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 70;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  padding: 24px 26px 32px; overflow-y: auto; transform: translateX(100%); transition: transform .22s ease;
}
.price-form.open { transform: none; }
.price-form h3 { margin: 0 0 4px; font-size: 18px; }
.price-form .drawer-sub { color: var(--text-secondary); font-size: 13px; margin: 0 0 20px; }
.price-form .price-fields { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .price-form .price-fields { grid-template-columns: 1fr; } }
.price-form .price-form-actions { position: sticky; bottom: -32px; background: var(--surface); padding: 14px 0 4px; margin-top: 22px; border-top: 1px solid var(--border); }

/* ---------------- Settings page ---------------- */
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 30px; align-items: start; }
@media (max-width: 860px) { .settings-layout { grid-template-columns: 1fr; gap: 16px; } }
.settings-nav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 104px); }
.settings-nav .sn-search { position: relative; }
.settings-nav .sn-search .icon { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.settings-nav .sn-search input { width: 100%; padding-left: 33px; }
.settings-nav .sn-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding-bottom: 8px; }
.settings-nav .sn-group { margin: 14px 0 4px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.settings-nav .sn-none { margin: 8px 12px; font-size: 12.5px; color: var(--text-secondary); }
.settings-nav .sn-list button { background: none; color: var(--text-secondary); justify-content: flex-start; gap: 10px; padding: 8px 12px; border-radius: 9px; font-weight: 500; text-align: left; }
.settings-nav .sn-list button .icon { width: 16px; height: 16px; flex: none; opacity: .8; }
.settings-nav .sn-list button:hover { background: var(--surface-elevated); color: var(--text); }
.settings-nav .sn-list button.active { background: var(--pink-subtle); color: var(--pink-bright); font-weight: 600; }
.settings-nav .sn-list button.active .icon { opacity: 1; }
@media (max-width: 860px) {
  .settings-nav { position: static; max-height: none; }
  .settings-nav .sn-list { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .settings-nav .sn-group { display: none; }
  .settings-nav .sn-list button { white-space: nowrap; border: 1px solid var(--border); }
}
/* the heading of a section page */
.sp-head { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.sp-head .sp-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--pink-subtle); color: var(--pink-bright); }
.sp-head .sp-ico .icon { width: 22px; height: 22px; }
.sp-head h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.sp-head p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-secondary); }
/* the overview */
.so-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 24px 26px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(120deg, var(--pink-subtle), transparent 70%), var(--surface); }
.so-hero h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.so-hero p { margin: 6px 0 0; color: var(--text-secondary); font-size: 14px; }
.so-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface-elevated); border: 1px solid var(--border-strong); }
.so-chip .icon { width: 14px; height: 14px; color: var(--pink-bright); }
.so-attn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; margin-bottom: 18px; border-radius: 12px; background: var(--warn-subtle); border: 1px solid var(--warn); }
.so-attn strong { display: inline-flex; align-items: center; gap: 7px; margin-right: 6px; color: var(--warn); font-size: 13px; }
.so-attn .icon { width: 15px; height: 15px; }
.so-attn button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.so-attn button span { font-weight: 700; }
.so-group { margin: 22px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.so-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.so-tile { white-space: normal; height: auto; min-width: 0; display: flex; align-items: flex-start; gap: 14px; padding: 16px; text-align: left; justify-content: flex-start; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s; }
.so-tile:hover { border-color: var(--pink); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.so-tile .so-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--pink-subtle); color: var(--pink-bright); }
.so-tile .so-ico .icon { width: 19px; height: 19px; }
.so-tile .so-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.so-tile .so-name { font-weight: 650; font-size: 14.5px; }
.so-tile .so-name em { margin-left: 8px; font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--surface-elevated); color: var(--text-secondary); }
.so-tile .so-desc { white-space: normal; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); font-weight: 400; }
.so-tile .so-status { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-secondary); min-height: 16px; }
.so-tile .so-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex: none; }
.so-tile .so-status.ok { color: var(--ok); } .so-tile .so-status.ok i { background: var(--ok); }
.so-tile .so-status.warn { color: var(--warn); } .so-tile .so-status.warn i { background: var(--warn); }
.so-tile .so-go { align-self: center; color: var(--text-faint); } .so-tile .so-go .icon { width: 16px; height: 16px; }
.so-tile:hover .so-go { color: var(--pink-bright); }
.rule-group { margin-bottom: 20px; }
.rule-group h4 { margin: 0 0 4px; font-size: 13.5px; }
.rule-group p { margin: 0 0 10px; font-size: 12.5px; color: var(--text-secondary); }
.theme-choices { display: flex; gap: 10px; }
.theme-choice { flex: 1; max-width: 190px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-sunken); color: var(--text); flex-direction: column; align-items: flex-start; gap: 4px; font-weight: 600; }
.theme-choice.active { border-color: var(--pink); background: var(--pink-subtle); }
.theme-choice span { font-weight: 400; font-size: 12px; color: var(--text-secondary); }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--text-secondary); }
.kv dd { margin: 0; }
.danger-zone { border-color: var(--error-subtle); }
.danger-zone .card-title { color: var(--error); }

/* ---------------- Modals + toasts ---------------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(5, 4, 10, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px 28px; width: 400px; max-width: 100%; box-shadow: var(--shadow-lg); }
.modal-box h2 { margin: 0 0 12px; font-size: 18px; }
.modal-box .row-end { display: flex; justify-content: flex-end; }
#confirmModalConfirmBtn:hover { filter: brightness(0.9); }
.toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 380px; padding: 11px 16px; border-radius: 11px; font-size: 13.5px; font-weight: 500;
  background: var(--surface-elevated); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); pointer-events: auto;
  animation: toast-in .22s ease; border-left: 4px solid var(--pink);
}
.toast.success { border-left-color: var(--ok); }
.toast.error { border-left-color: var(--error); }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: all .2s ease; }
.toast .t-icon { font-weight: 800; }
.toast.success .t-icon { color: var(--ok); }
.toast.error .t-icon { color: var(--error); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .topbar { padding: 0 16px; }
  main.content { padding: 18px 16px 80px; }
  .sticky-save { margin: 18px -16px -80px; padding: 12px 16px; }
  .series-row .row-genres { display: none; }
}

/* ---------------- Accounts & roles ---------------- */
.whoami { display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); margin-left: auto; margin-right: 12px; }
.who-avatar, .avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: var(--pink-subtle); color: var(--pink-bright); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.avatar-sm { width: 38px; height: 38px; font-size: 15px; }
.who-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.who-text strong { font-size: 12.5px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.who-text span { font-size: 11px; color: var(--text-secondary); }
@media (max-width: 700px) { .who-text { display: none; } .whoami { padding: 4px; } }
.acct-item { cursor: pointer; }
.acct-item:hover { border-color: var(--pink); }
.acct-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ar-quick { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; flex-wrap: wrap; }
.ar-matrix { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.ar-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); }
.ar-row:last-child { border-bottom: none; }
.ar-row.changed { background: var(--warn-subtle); }
.ar-info { flex: 1; min-width: 0; }
.ar-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-desc { font-size: 12px; color: var(--text-secondary); }
.seg.small button { padding: 5px 11px; font-size: 12px; }
.seg.small button:disabled { opacity: .4; }
.sec-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cred-box { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 11px; background: var(--surface-sunken); }
.cred-line { display: flex; gap: 12px; align-items: center; font-size: 13px; margin-bottom: 6px; }
.cred-line span { width: 78px; color: var(--text-secondary); }
.cred-line code { font-size: 13px; padding: 3px 8px; user-select: all; }

/* ---------------- View-only mode (a page the person can see but not change) ---------------- */
.view-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 18px; border: 1px solid var(--border-strong); border-left: 4px solid var(--warn); border-radius: 10px; background: var(--warn-subtle); font-size: 13px; font-weight: 500; }
body.view-only main.content :is(input, select, textarea):not(.search-box input):not(.filter-select):not([data-safe]) { pointer-events: none; opacity: .65; }
body.view-only main.content button:not(.tab):not(.status-tab):not(.back-btn):not(.settings-nav button):not(.pagination button):not([data-safe]) { opacity: .5; }
body.view-only .image-slot { pointer-events: none; }
body.view-only .home-block-card { cursor: default; }

/* ---------------- Series overview: artwork left, details right ---------------- */
/* Poster and banner sit SIDE BY SIDE at the same height, each shown whole
   (never cropped) in the proportions it was uploaded in. */
.overview-grid { display: grid; grid-template-columns: auto minmax(320px, 1fr); gap: 16px; align-items: start; }
.overview-grid .card { margin-bottom: 0; }
@media (max-width: 1100px) { .overview-grid { grid-template-columns: 1fr; } }
.art-stack { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.art-block { display: flex; flex-direction: column; }
.art-caption { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.art-caption span { font-weight: 400; color: var(--text-faint); margin-left: 4px; }
.art-slot { height: 300px; aspect-ratio: auto; padding: 8px; background: var(--surface-sunken); }
/* Empty slots keep a placeholder shape until something is uploaded. */
.art-poster { width: 225px; }
.art-banner { width: 300px; }
.art-slot.has-image { width: auto; height: auto; display: block; padding: 0; background: #000; }
.art-slot.has-image img { display: block; height: 300px; width: auto; max-width: 420px; object-fit: contain; }

/* ---------------- Genres ---------------- */
.field-note { font-weight: 400; color: var(--text-faint); margin-left: 4px; }
.warn-hint { color: var(--warn); margin-top: 8px; }
.warn-hint button { margin-left: 6px; }
.gen-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gen-chip { background: var(--surface-sunken); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 7px 8px 7px 14px; font-size: 13px; font-weight: 500; }
.gen-chip:hover { border-color: var(--pink); background: var(--pink-subtle); }
.gen-chip span { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-elevated); color: var(--text-secondary); }

/* Links that survive in the panel: accent colour, no browser-default blue underline */
a { color: var(--pink-bright); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 4px; }

/* ---------------- Copyable IDs ---------------- */
.copy-chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-sunken); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; font-family: "SF Mono", Consolas, monospace; cursor: pointer; vertical-align: middle; transition: border-color .12s ease, color .12s ease, background .12s ease; }
.copy-chip:hover { border-color: var(--pink); color: var(--pink-bright); background: var(--pink-subtle); }
.copy-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.copy-chip svg.icon { width: 12px; height: 12px; }
.row-meta .copy-chip, .series-hero .meta .copy-chip { margin-right: 6px; }
.user-support-code .copy-chip { margin-top: 3px; }
.ep-code { margin-top: 3px; }
.ep-code .copy-chip { font-size: 10px; padding: 0 6px; }

/* ---------------- Content: list / grid switch + grid tiles ---------------- */
.view-toggle { display: inline-flex; padding: 3px; gap: 2px; margin-left: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; flex-shrink: 0; }
.view-toggle button { width: 34px; height: 32px; padding: 0; background: transparent; color: var(--text-secondary); border: none; border-radius: 7px; }
.view-toggle button:hover { background: var(--surface-elevated); color: var(--text); }
.view-toggle button.active { background: var(--pink); color: #fff; box-shadow: var(--shadow-sm); }
.view-toggle button svg.icon { width: 17px; height: 17px; }
.series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; }
.series-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.series-tile:hover { border-color: var(--pink); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tile-poster { position: relative; aspect-ratio: 3 / 4; background: var(--surface-sunken); overflow: hidden; }
.tile-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.series-tile:hover .tile-poster img { transform: scale(1.03); }
.tile-initial { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: "Sora", sans-serif; font-size: 40px; font-weight: 700; color: var(--pink-bright); background: linear-gradient(160deg, var(--pink-subtle), var(--surface-sunken)); }
.tile-poster::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(to top, rgba(0,0,0,.65), transparent); pointer-events: none; }
.tile-status { position: absolute; top: 10px; left: 10px; z-index: 1; }
.tile-status .status-badge { backdrop-filter: blur(6px); background-color: rgba(10,10,15,.7); }
.tile-id { position: absolute; left: 10px; bottom: 10px; z-index: 1; }
.tile-id .copy-chip { background: rgba(10,10,15,.72); border-color: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(6px); }
.tile-id .copy-chip:hover { background: var(--pink); border-color: var(--pink); }
.tile-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-meta { font-size: 11px; color: var(--text-secondary); }
.tile-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.tile-badges:empty { display: none; }
.tile-badges .status-badge { font-size: 10px; padding: 2px 7px; }

/* Tighter chips on the smaller grid tiles */
.tile-status { top: 8px; left: 8px; }
.tile-id { left: 8px; bottom: 8px; }
.tile-status .status-badge { font-size: 9.5px; padding: 2px 7px; }
.tile-id .copy-chip { font-size: 10px; padding: 0 6px 0 7px; }
.tile-id .copy-chip svg.icon { width: 10px; height: 10px; }
.tile-badges .status-badge { font-size: 9.5px; padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.series-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tile-body { gap: 4px; padding: 11px 12px 12px; }
.tile-body .tile-title { font-size: 13.5px; }
.tile-lang { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text); min-width: 0; }
.tile-lang span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-lang em { flex: none; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: var(--ok-subtle); color: var(--ok); }
.tile-lang.unset { color: var(--warn); font-weight: 600; }
.tile-lang.unset::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; }
.tile-badges { flex-wrap: nowrap; overflow: hidden; margin-top: 3px; }
.tile-badges .tile-more { flex: none; }
.tile-complete { display: flex; align-items: center; gap: 8px; height: 14px; margin-top: 6px; }
.tile-complete b { flex: 1; height: 4px; border-radius: 4px; background: var(--surface-elevated); overflow: hidden; }
.tile-complete i { display: block; height: 100%; border-radius: 4px; background: var(--pink); }
.tile-complete.full i { background: var(--ok); } .tile-complete.low i { background: var(--warn); }
.tile-complete span { flex: none; font-size: 10px; font-weight: 600; color: var(--text-secondary); }

/* ---------------- Pager under the Content list ---------------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.pager-info { display: flex; flex-direction: column; font-size: 12px; color: var(--text-secondary); line-height: 1.35; min-width: 150px; }
.pager-info strong { font-size: 13px; color: var(--text); }
.pager-pages { display: flex; align-items: center; gap: 5px; }
.pg-btn { min-width: 34px; height: 34px; padding: 0 9px; background: var(--surface); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 9px; font-size: 13px; font-weight: 600; }
.pg-btn:hover:not(:disabled) { background: var(--surface-elevated); color: var(--text); border-color: var(--border-strong); }
.pg-btn.active { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: var(--shadow-sm); }
.pg-gap { color: var(--text-faint); padding: 0 3px; }
.pager-size { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.pager-size select { width: auto; padding: 6px 28px 6px 10px; font-size: 13px; }

/* ---------------- System & safety ---------------- */
.paused-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 18px; border: 1px solid var(--error); border-left: 4px solid var(--error); border-radius: 10px; background: var(--error-subtle); font-size: 13px; }
.switch-list { display: flex; flex-direction: column; }
.switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.switch-row:last-child { border-bottom: none; }
.switch-row.is-paused { background: var(--error-subtle); margin: 0 -10px; padding-left: 14px; padding-right: 14px; border-radius: 10px; border-bottom-color: transparent; }
.switch-main { flex: 1; min-width: 0; }
.switch-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.switch-desc { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; max-width: 620px; }
.switch-meta { font-size: 12px; color: var(--error); margin-top: 4px; }
.switch-msg { display: flex; gap: 8px; margin-top: 10px; max-width: 620px; }
input.danger-switch:checked { background: var(--error); }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.sys-tile { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; }
.sys-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.sys-value { font-size: 20px; font-weight: 700; font-family: "Sora", sans-serif; margin-top: 2px; }
.sys-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.sys-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sys-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.sys-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.sys-table th:nth-child(n+2), .sys-table td:nth-child(n+2) { text-align: right; }

/* Reels switch on an episode slot */
.episode-slot .ep-reel { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 11.5px; color: var(--text-secondary); cursor: pointer; }
.episode-slot.is-reel .ep-reel { color: var(--pink); font-weight: 600; }
.episode-slot.is-reel .image-slot { box-shadow: 0 0 0 2px var(--pink); }

/* ---------------- Reels page ---------------- */
.range-tabs { display: inline-flex; gap: 4px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.range-tabs button { background: transparent; border: none; color: var(--text-secondary); padding: 5px 11px; border-radius: 7px; font-size: 12.5px; cursor: pointer; }
.range-tabs button.active { background: var(--pink); color: #fff; }
.reel-series.is-paused { opacity: .6; }
.reel-boost { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.reel-boost label { font-size: 12.5px; color: var(--text-secondary); }
.reel-boost select { width: auto; min-width: 170px; }
.reel-list { display: flex; flex-direction: column; }
.reel-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); }
.reel-thumb { width: 44px; height: 58px; border-radius: 8px; background: var(--surface-sunken); overflow: hidden; flex-shrink: 0; }
.reel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-main { flex: 1; min-width: 0; }
.reel-title { font-size: 13.5px; font-weight: 600; }
.reel-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.reel-stats b { color: var(--text); font-weight: 600; }
.reel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text); padding: 7px 13px; border-radius: 50px; font-size: 13px; cursor: pointer; }
.chip-btn:hover { border-color: var(--pink); }
.reels-toolbar { margin: 4px 0 16px; }
.reel-more { margin-top: 10px; }

/* ---------------- Payouts page ---------------- */
.hist-row { padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.45; }
.hist-row:first-child { border-top: none; }
.tier-block { margin-bottom: 18px; }
.tier-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 13.5px; }
.tier-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tier-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 9px; padding: 5px 6px 5px 11px; font-size: 13px; }
.tier-chip small { color: var(--text-faint); margin-left: 3px; }
.tier-chip select { width: auto; min-width: 58px; padding: 3px 6px; font-size: 12.5px; }
#payoutsView textarea { width: 100%; resize: vertical; }
.price-list { display: flex; flex-direction: column; gap: 8px; }

/* ---------------- Payouts: earnings preview ---------------- */
.earn-provider { border: 1px solid var(--border); border-radius: 11px; padding: 12px 16px; margin-bottom: 10px; background: var(--surface); }
.earn-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.earn-name { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.earn-nums { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); }
.earn-nums b { color: var(--text); }
.earn-total b { color: var(--pink); font-size: 14px; }
.earn-warn { margin-top: 8px; font-size: 12.5px; color: var(--warn); }
.earn-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); overflow-x: auto; }
.earn-tiers { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; }

/* Volume bonus editor */
.bonus-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.bonus-row input { width: 92px; }
.earn-volume { margin-top: 8px; font-size: 12.5px; color: var(--text-secondary); }
.earn-total small { color: var(--text-secondary); font-weight: 400; font-size: 11.5px; }

/* Payouts: month close + payments */
.earn-adj { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adj-chip { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 50px; padding: 3px 10px; font-size: 12px; color: var(--text-secondary); }
.adj-x { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.adj-x:hover { color: var(--error); }
.pay-table td, .pay-table th { vertical-align: middle; }

/* Payouts: Every month / Setup switch */
.payout-groups { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 50px; }
.payout-groups button { background: transparent; border: none; color: var(--text-secondary); padding: 6px 16px; border-radius: 50px; font-weight: 600; cursor: pointer; }
.payout-groups button.active { background: var(--pink); color: #fff; }

.price-fields label.check-row { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; align-self: end; padding-bottom: 10px; }
.price-fields label.check-row input { width: auto; flex: none; margin: 0; }

/* Providers page revamp (analytics views are styled by /provider/pv.css) */
.prov-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.prov-h { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.prov-period { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 50px; padding: 3px; }
.prov-period button { background: transparent; border: none; color: var(--text-secondary); font-weight: 700; font-size: 12.5px; padding: 6px 13px; border-radius: 50px; box-shadow: none; }
.prov-period button.active { background: var(--pink); color: #fff; }
.prov-add { display: inline-flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.prov-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; display: grid; gap: 14px; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; outline: none; }
.prov-card:hover, .prov-card:focus-visible { transform: translateY(-3px); border-color: var(--pink); box-shadow: var(--shadow-md); }
.prov-card-head, .prov-detail-head { display: flex; align-items: center; gap: 12px; }
.prov-detail-head { margin: 8px 0 16px; flex-wrap: wrap; }
.prov-avatar { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; flex: none; }
.prov-id { min-width: 0; } .prov-name { font-weight: 700; font-size: 16px; } .prov-mail { font-size: 12.5px; color: var(--text-secondary); }
.prov-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.prov-card .prov-chips { margin: 0; }
.prov-chip { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 50px; background: var(--surface-elevated); color: var(--text-secondary); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.prov-chip.ok { background: var(--ok-subtle); color: var(--ok); } .prov-chip.warn { background: var(--warn-subtle); color: var(--warn); } .prov-chip.bad { background: var(--error-subtle); color: var(--error); }
.prov-hours { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prov-big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.prov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.prov-stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .prov-stats b { font-size: 15px; font-weight: 700; } .prov-stats small { color: var(--text-secondary); font-weight: 600; } .prov-stats span { font-size: 11.5px; color: var(--text-secondary); }
.prov-open { font-size: 13px; font-weight: 700; color: var(--pink-bright); }
.prov-back { background: transparent !important; border: none !important; color: var(--text-secondary) !important; font-weight: 600; padding: 4px 0 !important; box-shadow: none !important; cursor: pointer; }
.prov-back:hover { color: var(--text) !important; }
.prov-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.prov-tabs button { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--text-secondary); font-weight: 700; padding: 10px 16px; box-shadow: none; }
.prov-tabs button.active { color: var(--text); border-bottom-color: var(--pink); }
.prov-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 14px; } .prov-dl dt { color: var(--text-secondary); } .prov-dl dd { margin: 0; font-weight: 600; }
.prov-danger { border-color: var(--error-subtle); }
.skel-block { color: var(--text-secondary); padding: 40px; text-align: center; }
.pv .pv-actions button { cursor: pointer; }

/* Providers page: alignment fixes */
.prov-top { align-items: center; margin-bottom: 16px; }
.prov-lead { margin: 0; flex: 1; min-width: 240px; }
.prov-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.prov-toolbar .pv-search { width: 320px; max-width: 100%; flex: 0 1 320px; }
.prov-toolbar .pv-select { width: auto; flex: none; }
.prov-toolbar .prov-add-btn { margin-left: auto; flex: none; }
.pv .pv-kpis { margin-bottom: 18px; }

/* Users page revamp */
.usr-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.usr-lead { margin: 0; flex: 1; min-width: 240px; }
.usr-warn { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 50px; background: var(--warn-subtle); color: var(--warn); }
.usr-attn { display: grid; gap: 12px; }
.usr-attn > div { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.usr-attn > div:last-child { border-bottom: none; padding-bottom: 0; }
.usr-attn b { font-size: 22px; font-weight: 800; } .usr-attn span { font-size: 13.5px; color: var(--text-secondary); }
.usr-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.usr-toolbar .pv-search { width: 360px; max-width: 100%; flex: 0 1 360px; } .usr-toolbar .pv-select { width: auto; flex: none; }
.usr-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.usr-chip { background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 50px; padding: 6px 14px; font-size: 13px; font-weight: 600; box-shadow: none; }
.usr-chip span { margin-left: 6px; font-size: 12px; color: var(--text-faint); }
.usr-chip:hover { border-color: var(--pink); color: var(--text); background: var(--surface); }
.usr-chip.active { background: var(--pink); border-color: var(--pink); color: #fff; } .usr-chip.active span { color: rgba(255,255,255,.8); }
.usr-table tbody tr { cursor: pointer; } .usr-table tbody tr:hover td, .usr-table tbody tr:focus-visible td { background: var(--surface-elevated); outline: none; }
.usr-id { display: flex; align-items: center; gap: 12px; min-width: 0; } .usr-id-text { min-width: 0; }
.usr-name { font-weight: 600; font-size: 14px; } .usr-mail { font-size: 12.5px; color: var(--text-secondary); }
.usr-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-elevated); }
.usr-avatar-ph { display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--pink), #3b1f7a); }
.usr-avatar.lg { width: 52px; height: 52px; font-size: 20px; }
.usr-empty { padding: 32px; text-align: center; color: var(--text-secondary); }
.usr-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.usr-drawer { padding: 22px; }
.usr-drawer-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; } .usr-drawer-head h3 { margin: 0; font-size: 18px; }
.usr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.usr-stats div { background: var(--surface-elevated); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .usr-stats b { font-size: 16px; } .usr-stats span { font-size: 11.5px; color: var(--text-secondary); }
.usr-line { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.5; }
.usr-actions { display: grid; gap: 10px; } .usr-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.usr .prov-dl { font-size: 14px; }

/* Users: selection and offers */
.usr-check { width: 38px; padding-right: 0 !important; } .usr-check input { width: 16px; height: 16px; accent-color: var(--pink); cursor: pointer; }
.usr-selbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; background: var(--pink-subtle); border: 1px solid var(--pink); border-radius: 12px; }
.usr-drawer textarea { width: 100%; resize: vertical; }

/* Users drawer tabs */
.usr-dtabs { margin: 14px 0 16px; }
.usr-dtabs button { padding: 9px 14px; }
.usr-scroll { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.usr-gold-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface-elevated); border-radius: 12px; padding: 12px 14px; }
.usr-gold-head > div:first-child { display: flex; flex-direction: column; } .usr-gold-head b { font-size: 22px; } .usr-gold-head span { font-size: 12px; color: var(--text-secondary); }

/* Providers as a list */
.prov-list { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.prov-list-head, .prov-row { display: grid; grid-template-columns: minmax(200px, 2.2fr) minmax(170px, 1.8fr) 110px 100px 80px 90px 120px 18px; align-items: center; gap: 16px; padding: 0 18px; }
.prov-list-head { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.prov-row { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); cursor: pointer; outline: none; transition: background .12s; }
.prov-row:last-child { border-bottom: none; }
.prov-row:hover, .prov-row:focus-visible { background: var(--surface-elevated); }
.prov-row-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prov-row .prov-avatar { width: 38px; height: 38px; font-size: 16px; border-radius: 11px; }
.prov-row .prov-chips { margin: 0; }
.prov-cell { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
.prov-cell b { font-size: 14.5px; color: var(--text); font-weight: 700; } .prov-cell b small { color: var(--text-secondary); font-weight: 600; }
.prov-go { color: var(--text-faint); font-size: 22px; line-height: 1; }
.prov-toolbar .pv-viewswitch { margin-left: auto; } .prov-toolbar .pv-viewswitch + .prov-add-btn { margin-left: 0; }
@media (max-width: 1400px) {
  .prov-list-head, .prov-row { grid-template-columns: minmax(180px, 2fr) 110px 90px 100px 18px; }
  .prov-list-head span:nth-child(2), .prov-list-head span:nth-child(4), .prov-list-head span:nth-child(5), .prov-row .prov-chips, .prov-row .prov-spark, .prov-row > div:nth-of-type(5) { display: none; }
}
@media (max-width: 640px) {
  .prov-list-head, .prov-row { grid-template-columns: minmax(0, 1fr) 90px 18px; }
  .prov-list-head span:nth-child(6), .prov-list-head span:nth-child(7), .prov-row > div:nth-of-type(6), .prov-row > div:nth-of-type(7) { display: none; }
}

/* Reels summary: five compact tiles on one line */
.sys-grid.reel-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.reel-tiles .sys-tile { padding: 9px 11px; border-radius: 10px; min-width: 0; }
.reel-tiles .sys-label { font-size: 10px; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-tiles .sys-value { font-size: 17px; margin-top: 1px; line-height: 1.2; }
.reel-tiles .sys-sub { font-size: 11px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .sys-grid.reel-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sys-grid.reel-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Age rating preview (looks like the banner in the app's player) */
.rating-preview { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.rating-box { display: flex; flex-direction: column; gap: 2px; padding: 6px 14px 6px 12px; border-left: 3px solid #fff; background: rgba(0, 0, 0, .7); border-radius: 2px; color: #fff; }
.rating-box b { font-size: 18px; line-height: 1.1; font-weight: 400; letter-spacing: .02em; } .rating-box b strong { font-weight: 800; letter-spacing: .06em; } .rating-box span { font-size: 12px; opacity: .85; }

/* Home layout: list on the left, a phone preview on the right */
.layout-split { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 28px; align-items: start; }
.layout-right { position: sticky; top: 76px; }
@media (max-width: 1100px) { .layout-split { grid-template-columns: 1fr; } .layout-right { position: static; } }
.hp-caption { font-size: 13px; font-weight: 700; margin-bottom: 8px; } .hp-caption span { color: var(--text-secondary); font-weight: 500; margin-left: 6px; }
.hp-phone { position: relative; width: 340px; height: 700px; margin: 0 auto; border-radius: 40px; border: 9px solid #050507; background: #0e0e0e; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px var(--border-strong); }
.hp-screen { height: 100%; overflow-y: auto; scrollbar-width: none; color: #fff; font-family: Inter, system-ui, sans-serif; }
.hp-screen::-webkit-scrollbar { display: none; }
.hp-hero { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #1a1a1a; }
.hp-hero > img:not(.hp-logo) { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.6), transparent 28%, transparent 62%, #0e0e0e); pointer-events: none; }
.hp-hero-empty { height: 100%; display: grid; place-items: center; color: #888; font-size: 13px; }
.hp-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; gap: 5px; justify-content: center; z-index: 1; }
.hp-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); } .hp-dots i.on { width: 8px; height: 8px; background: var(--pink); }
.hp-logo { position: absolute; z-index: 2; left: 12px; top: 14px; width: 32px; height: 32px; border-radius: 9px; background: #110f20; padding: 3px; }
.hp-ico { position: absolute; z-index: 2; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.5); }
.hp-search { right: 12px; } .hp-bell { right: 52px; }
.hp-ico::before { content: ""; position: absolute; inset: 9px; border: 2px solid #fff; border-radius: 50%; }
.hp-bell::before { border-radius: 6px 6px 3px 3px; inset: 8px 10px 10px; }
.hp-block { padding: 6px 0; position: relative; transition: background .15s, outline-color .15s; outline: 2px solid transparent; outline-offset: -2px; border-radius: 6px; }
.hp-block.hp-lit { background: rgba(139, 92, 246, .12); outline-color: var(--pink); }
.hp-block h4 { margin: 10px 14px 8px; font-size: 14px; font-weight: 700; }
.hp-row { display: flex; gap: 8px; padding: 0 14px; overflow: hidden; }
.hp-poster { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; display: block; background: #222; }
.hp-ph { display: grid; place-items: center; font-weight: 800; font-size: 22px; background: linear-gradient(160deg, var(--pink), #3b1f7a); }
.hp-card { flex: 0 0 92px; position: relative; }
.hp-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 5px 4px; font-size: 8.5px; line-height: 1.2; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.85)); border-radius: 0 0 8px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-grid .hp-card { flex: none; }
.hp-card.hp-long { flex: 0 0 128px; } .hp-card.hp-long .hp-poster { aspect-ratio: 9 / 16; }
.hp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 14px; }
.hp-grid.hp-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 6px; } .hp-grid.hp-grid-4 .hp-label { display: none; }
.hp-cw { flex: 0 0 128px; font-size: 11px; } .hp-cw-img { position: relative; } .hp-cw-img .hp-poster { aspect-ratio: 3 / 4; }
.hp-cw span { display: block; margin-top: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-cw small { color: #9a9a9a; }
.hp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); border-radius: 0 0 8px 8px; overflow: hidden; } .hp-bar b { display: block; height: 100%; background: var(--pink); }
.hp-top { flex: 0 0 112px; display: flex; align-items: flex-end; } .hp-top b { font-size: 54px; font-weight: 800; line-height: .8; color: transparent; -webkit-text-stroke: 2px #6b6b6b; margin-right: -10px; z-index: 1; } .hp-top .hp-poster { width: 76px; flex: none; }
.hp-chips { display: flex; gap: 6px; padding: 0 14px 8px; overflow: hidden; } .hp-chips span { font-size: 11px; padding: 4px 10px; border-radius: 50px; background: #242424; color: #bbb; white-space: nowrap; } .hp-chips span.on { background: var(--pink); color: #fff; }
.hp-banner { display: block; width: calc(100% - 28px); margin: 6px 14px; aspect-ratio: 2048 / 960; object-fit: cover; border-radius: 10px; background: #222; }
.hp-banner-empty { display: grid; place-items: center; font-size: 12px; color: #888; border: 1px dashed #444; background: transparent; }
.hp-hidden { opacity: .45; }
.hp-note { margin: 4px 14px; font-size: 10.5px; color: #c9a227; background: rgba(217, 148, 37, .12); border-radius: 6px; padding: 3px 8px; }
.hp-nav { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 22px; align-items: center; background: rgba(36, 36, 36, .96); border-radius: 50px; padding: 8px 14px; }
.hp-nav span { width: 22px; height: 22px; border-radius: 6px; background: #444; } .hp-nav span.on { width: auto; height: auto; background: linear-gradient(90deg, #8b5cf6, #ec4899); color: #fff; font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 50px; }
.hp-foot { text-align: center; font-size: 11.5px; color: var(--text-secondary); margin: 10px 0 0; }

/* ---------------- Home Layout page (hb-*) ---------------- */
.hb-tiles { margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hb-tiles .sys-tile.hb-warn { border-color: var(--warn); background: var(--warn-subtle); }
.hb-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.hb-toolbar button svg.icon { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; }
.hb-hint { color: var(--text-secondary); font-size: 12.5px; }
.hb-list { display: flex; flex-direction: column; gap: 10px; }
.hb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .15s ease, opacity .15s ease; }
.hb-card:hover { border-color: var(--border-strong); }
.hb-card.is-open { border-color: var(--pink); box-shadow: var(--shadow-sm); }
.hb-card.is-off .hb-head { opacity: .62; }
.hb-card.is-off .hb-head .hb-quick { opacity: 1; }
.hb-card.dragging { opacity: .4; }
.hb-card.drag-over { border-color: var(--pink); background: var(--pink-subtle); }
.hb-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.hb-grip { color: var(--text-faint); display: flex; cursor: grab; padding: 4px 0; }
.hb-grip svg.icon { width: 18px; height: 18px; }
.hb-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.hb-ico svg.icon { width: 18px; height: 18px; }
.hb-ico-continue_watching, .hb-ico-top_series { background: linear-gradient(135deg, #475569, #64748b); }
.hb-ico-banner { background: linear-gradient(135deg, #f59e0b, #ec4899); }
.hb-ico-long_row { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.hb-ico-genre_row { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.hb-main { flex: 1; min-width: 0; cursor: pointer; }
.hb-name { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hb-when { font-size: 11.5px; color: var(--text-secondary); font-weight: 500; }
.hb-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; line-height: 1.45; }
.hb-problem { font-size: 12px; color: var(--warn); margin-top: 3px; }
.hb-quick { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hb-onswitch, .hb-chipswitch { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.hb-onswitch span { min-width: 20px; text-align: right; }
.hb-chev svg.icon { transition: transform .18s ease; }
.hb-chev.is-open svg.icon { transform: rotate(90deg); }
@media (max-width: 760px) { .hb-head { flex-wrap: wrap; } .hb-quick { width: 100%; justify-content: flex-end; } }
.hb-panel { border-top: 1px solid var(--border); padding: 16px 18px 14px; background: var(--surface-sunken); border-radius: 0 0 var(--radius) var(--radius); }
.hb-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 16px; }
.hb-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.hb-field em { font-weight: 400; font-style: normal; color: var(--text-faint); }
.hb-field-wide { grid-column: 1 / -1; }
.hb-banner-slot { width: 100%; max-width: 340px; aspect-ratio: 2048 / 960; }
.hb-banner-slot.is-uploading { opacity: .5; pointer-events: none; }
.hb-schedule { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.hb-sched-title { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.hb-sched-title svg.icon { width: 15px; height: 15px; color: var(--text-secondary); }
.hb-sched-title em { font-weight: 400; font-style: normal; color: var(--text-faint); margin-left: 6px; }
.hb-sched-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.hb-sched-row .hb-field { flex: 1; min-width: 190px; }
.hb-panel-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.hb-banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.hb-banner-grid .hb-card .hb-head { flex-wrap: wrap; }
.hb-note { color: var(--text-secondary); font-size: 12.5px; margin: 14px 4px 0; }
.hb-hero-pane .switch-row:first-of-type { padding-top: 4px; }
/* the "Add a block" picker */
.hb-picker { display: flex; flex-direction: column; gap: 10px; }
.hb-pick { display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; min-width: 0; white-space: normal; font-weight: 400; overflow: hidden; text-align: left; background: var(--surface-sunken); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 14px; cursor: pointer; }
.hb-pick:hover:not(:disabled) { border-color: var(--pink); background: var(--pink-subtle); }
.hb-pick:disabled { opacity: .5; cursor: not-allowed; }
.hb-pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.hb-pick-text b { font-size: 14px; color: var(--text); } .hb-pick-text b em { font-style: normal; font-weight: 500; color: var(--text-faint); font-size: 12px; }
.hb-art { flex: 0 0 78px; width: 78px; height: 56px; border-radius: 9px; background: #14121f; display: flex; gap: 4px; padding: 7px; align-items: stretch; overflow: hidden; }
.hb-art i { flex: 1; border-radius: 4px; background: linear-gradient(160deg, #8b5cf6, #ec4899); opacity: .85; }
.hb-art-banner { padding: 9px 7px; } .hb-art-banner i:nth-child(n+2) { display: none; }
.hb-art-long i { border-radius: 4px; } .hb-art-long i:nth-child(3) { opacity: .4; }
.hb-art-row { padding: 14px 7px; } .hb-art-row i:nth-child(3) { opacity: .4; }
.hb-art-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; padding: 6px; } .hb-art-grid i { opacity: .85; } .hb-art-grid i:nth-child(n+4) { display: none; }
.hb-art-grid::after { content: ""; grid-column: 1 / -1; grid-row: 2 / 4; background: repeating-linear-gradient(90deg, #8b5cf6 0 14px, transparent 14px 17px); opacity: .7; border-radius: 3px; }
/* preview extras */
.hp-caption { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; } .hp-caption > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-toggle { flex: none; margin-left: 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.hp-block { cursor: pointer; }
.hp-topbar { position: relative; height: 62px; background: #0e0e0e; }
.hp-logo-flat { background: #110f20; }

/* ---------------- Series picker (seriesPicker.js) ---------------- */
.sp { position: relative; width: 100%; }
.sp-chosen { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; }
.sp-chosen img, .sp-item img, .sp-ph { width: 36px; height: 50px; object-fit: cover; border-radius: 6px; flex: none; background: #222; }
.sp-ph { display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(160deg, var(--pink), #3b1f7a); }
.sp-chosen-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-chosen-text b, .sp-item-text b { font-size: 13.5px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-chosen-text small, .sp-item-text small { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.sp-menu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 420px; overflow-y: auto; }
.sp-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 6px 8px; background: transparent; color: var(--text); border: none; border-radius: 9px; text-align: left; font-weight: 400; }
.sp-item:hover { background: var(--pink-subtle); }
.sp-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-empty { padding: 10px; font-size: 12.5px; color: var(--text-secondary); }
.hb-field[hidden], .sp-chosen[hidden], .sp-search[hidden], .sp-menu[hidden], .hb-note[hidden] { display: none !important; }
.field-label-text { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 0 0 6px; }

/* ---------------- Series posters tab (seriesPosters.js) ---------------- */
.pst-desc { color: var(--text-secondary); font-size: 13px; margin: 12px 2px 16px; max-width: 640px; line-height: 1.5; }
.pst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pst-tile { position: relative; aspect-ratio: 680 / 960; border-radius: 12px; overflow: hidden; background: var(--surface-sunken); border: 2px solid var(--border); }
.pst-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pst-empty { display: grid; place-items: center; height: 100%; color: var(--text-faint); font-size: 12.5px; }
.pst-tile.pickable { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.pst-tile.pickable:hover { border-color: var(--pink); transform: translateY(-2px); }
.pst-tile.selected { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-subtle); }
.pst-tag { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.pst-state { position: absolute; left: 8px; right: 8px; bottom: 8px; text-align: center; background: rgba(0,0,0,.65); color: #fff; font-size: 11.5px; font-weight: 600; padding: 5px 0; border-radius: 8px; }
.pst-state.on { background: var(--pink); }
.pst-state.mix { background: rgba(0,0,0,.55); font-weight: 500; font-size: 10.5px; }
.pst-del { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; background: rgba(0,0,0,.65); border-color: transparent; color: #fff; }
.pst-add { display: grid; place-items: center; border-style: dashed; cursor: pointer; color: var(--text-secondary); text-align: center; }
.pst-add:hover { border-color: var(--pink); background: var(--pink-subtle); color: var(--text); }
.pst-add span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; }
.pst-add svg.icon { width: 24px; height: 24px; } .pst-add small { color: var(--text-faint); font-size: 11.5px; }
.pst-add input { display: none; } .pst-add.busy { opacity: .55; pointer-events: none; }
.pst-tip { color: var(--text-faint); font-size: 12.5px; margin: 16px 2px 0; }

/* ---------------- Dashboard (dashboard.js) ---------------- */
.db-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.db-hello { margin: 0; font-size: 24px; font-family: "Sora", sans-serif; }
.db-sub { margin: 4px 0 0; color: var(--text-secondary); font-size: 13.5px; }
.db-head-right { display: flex; align-items: center; gap: 10px; }
.db-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.db-action { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 8px 14px; border-radius: 50px; font-size: 13px; font-weight: 600; }
.db-action:hover { background: var(--pink-subtle); border-color: var(--pink); color: var(--text); }
.db-action svg.icon { width: 15px; height: 15px; color: var(--pink); }
.db-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 18px; }
.db-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.db-kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #8b5cf6, #ec4899); opacity: .85; }
.db-kpi.gold::before { background: linear-gradient(90deg, #ffc857, #b5791c); }
.db-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.db-kpi-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.db-kpi-value { font-size: 28px; font-weight: 800; font-family: "Sora", sans-serif; line-height: 1.1; }
.db-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-height: 30px; }
.db-kpi-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.db-spark { color: var(--pink); flex: none; }
.db-kpi.gold .db-spark { color: #ffc857; }
.db-chg { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.db-chg.good { background: var(--ok-subtle); color: var(--ok); }
.db-chg.bad { background: var(--error-subtle); color: var(--error); }
.db-chg.flat { background: var(--surface-elevated); color: var(--text-secondary); font-weight: 600; }
.db-cols { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .db-cols { grid-template-columns: 1fr; } }
.db-col { display: flex; flex-direction: column; min-width: 0; }
.db-col .card { margin-bottom: 16px; }
.db-chart { width: 100%; height: 220px; display: block; }
.db-grid-line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.db-axis { fill: var(--text-faint); font-size: 11px; }
.db-empty { padding: 26px 8px; text-align: center; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.db-list { display: flex; flex-direction: column; gap: 4px; }
.db-row { display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; color: var(--text); border: none; border-radius: 12px; padding: 8px; text-align: left; font-weight: 400; }
.db-row:hover { background: var(--surface-elevated); color: var(--text); }
.db-rank { width: 18px; text-align: center; font-weight: 800; color: var(--text-faint); font-family: "Sora", sans-serif; }
.db-poster { width: 38px; height: 54px; border-radius: 7px; object-fit: cover; flex: none; background: #222; }
.db-ph { display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(160deg, var(--pink), #3b1f7a); }
.db-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.db-row-main b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-row-main small { color: var(--text-secondary); font-size: 12px; }
.db-bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-elevated); overflow: hidden; }
.db-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.db-bar.warn i { background: linear-gradient(90deg, #f59e0b, #ec4899); }
.db-meter { display: grid; grid-template-columns: minmax(70px, 120px) 1fr auto; align-items: center; gap: 12px; padding: 6px 0; font-size: 13px; }
.db-meter b { font-weight: 700; min-width: 36px; text-align: right; }
.db-todo { display: flex; flex-direction: column; gap: 4px; }
.db-todo-item { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--border); }
.db-todo-item:last-child { border-bottom: none; }
.db-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-faint); }
.db-todo-item.high .db-dot { background: var(--error); box-shadow: 0 0 0 4px var(--error-subtle); }
.db-todo-item.medium .db-dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-subtle); }
.db-todo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db-todo-text b { font-size: 13.5px; font-weight: 600; }
.db-todo-text span { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.db-clear { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.db-clear svg.icon { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--ok-subtle); color: var(--ok); }
.db-clear div { display: flex; flex-direction: column; } .db-clear span { color: var(--text-secondary); font-size: 12.5px; }
.db-stack { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--surface-elevated); }
.db-stack i, .db-legend i { display: inline-block; }
.db-stack i { height: 100%; }
.db-stack .live, .db-legend .live { background: var(--ok); } .db-stack .sched, .db-legend .sched { background: var(--warn); } .db-stack .draft, .db-legend .draft { background: var(--text-faint); }
.db-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 14px; font-size: 12px; color: var(--text-secondary); }
.db-legend span { display: inline-flex; align-items: center; gap: 6px; } .db-legend i { width: 9px; height: 9px; border-radius: 50%; }
.db-system { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 24px; }
.db-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 50px; padding: 7px 14px; font-size: 12.5px; color: var(--text-secondary); }
.db-pill b { color: var(--text); font-weight: 600; }
.db-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-subtle); }
.db-pill.bad i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-subtle); }
.db-skeleton { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.db-skeleton div { height: 110px; border-radius: 16px; background: linear-gradient(90deg, var(--surface), var(--surface-elevated), var(--surface)); background-size: 200% 100%; animation: dbShimmer 1.3s linear infinite; }
@keyframes dbShimmer { to { background-position: -200% 0; } }

/* ===========================================================================
   2026-10-10 additions: bulk edit, release calendar, series Insights tab,
   heads-up banner, activity log, Support page, payout forecast
   =========================================================================== */
#confirmModalMessage { white-space: pre-line; }

/* ---------------- Bulk edit ---------------- */
#bulkToggle.active { background: var(--pink); border-color: var(--pink); color: #fff; }
.bulk-check { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--pink); cursor: pointer; }
.series-tile { position: relative; }
.series-tile .bulk-check { position: absolute; top: 10px; left: 10px; z-index: 3; width: 22px; height: 22px; }
.series-row.is-selected, .series-tile.is-selected { border-color: var(--pink); background: var(--pink-subtle); }
.bulk-bar {
  position: sticky; bottom: 14px; z-index: 20; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between;
  background: var(--surface-elevated); border: 1px solid var(--pink); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-lg);
}
.bulk-count, .bulk-do { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bulk-do select, .bulk-do input { width: auto; min-width: 130px; }

/* ---------------- Release calendar ---------------- */
.cal-top { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-nav { display: flex; gap: 8px; align-items: center; }
.cal-nav strong { min-width: 150px; text-align: center; font-size: 16px; }
.cal-summary { font-size: 13px; color: var(--text-secondary); }
.cal-quiet-note { display: inline-block; margin-left: 8px; color: var(--warn); }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .cal-layout { grid-template-columns: 1fr; } }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-head div { text-align: center; font-size: 12px; font-weight: 600; color: var(--text-secondary); padding-bottom: 4px; }
.cal-cell { min-height: 96px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal-pad { background: transparent; border-color: transparent; }
.cal-cell.is-past { opacity: .5; }
.cal-cell.is-today { border-color: var(--pink); box-shadow: inset 0 0 0 1px var(--pink); }
.cal-cell.is-quiet { background: var(--warn-subtle); }
.cal-cell.is-over { background: var(--pink-subtle); border-color: var(--pink); }
.cal-num { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.cal-chip { display: flex; align-items: center; gap: 6px; background: var(--pink-subtle); border: 1px solid var(--pink-dim); color: var(--text); border-radius: 7px; padding: 3px 6px; font-size: 12px; cursor: grab; min-width: 0; }
.cal-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cal-chip img { width: 18px; height: 26px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.cal-chip.is-dragging { opacity: .4; }
.cal-side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 620px; overflow-y: auto; }
.cal-side-title { font-weight: 700; font-size: 13.5px; }
.cal-draft { background: var(--surface-elevated); border-color: var(--border-strong); }

/* ---------------- Series Insights tab ---------------- */
.health-big { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.health-num { font-size: 54px; font-weight: 800; line-height: 1; min-width: 90px; }
.health-num.status-published { color: var(--ok); background: none; }
.health-num.status-scheduled { color: var(--warn); background: none; }
.health-num.status-error { color: var(--error); background: none; }
.health-parts { flex: 1; min-width: 240px; display: grid; gap: 8px; }
.health-part { display: grid; grid-template-columns: 90px 1fr 46px; gap: 10px; align-items: center; font-size: 13px; }
.health-track, .funnel-track { height: 8px; border-radius: 99px; background: var(--surface-sunken); overflow: hidden; }
.health-fill { height: 100%; background: var(--pink); border-radius: 99px; }
.qa-group { margin-bottom: 12px; }
.qa-level { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-bottom: 4px; }
.qa-item { display: flex; gap: 8px; font-size: 13.5px; padding: 3px 0; }
.qa-mark { width: 16px; flex-shrink: 0; font-weight: 700; }
.qa-item.ok .qa-mark { color: var(--ok); }
.qa-item.bad .qa-mark { color: var(--error); }
.qa-item.warn .qa-mark { color: var(--warn); }
.qa-detail { display: block; font-size: 12px; color: var(--text-secondary); }
.funnel { display: grid; gap: 6px; max-height: 360px; overflow-y: auto; }
.funnel-row { display: grid; grid-template-columns: 44px 1fr 86px; gap: 10px; align-items: center; font-size: 12.5px; }
.funnel-fill { height: 100%; background: var(--pink-bright); border-radius: 99px; }
.funnel-fill.is-drop { background: var(--error); }
.funnel-num { text-align: right; white-space: nowrap; }
.heat { display: grid; gap: 6px; }
.heat-row { display: grid; grid-template-columns: 44px minmax(120px, 1fr) minmax(120px, 190px) 64px; gap: 10px; align-items: center; font-size: 12.5px; }
.heat-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; height: 18px; }
.heat-strip span { border-radius: 3px; }
.heat-n { text-align: right; }
.heat-legend { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.heat-scale { width: 120px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, hsl(0,62%,40%), hsl(60,62%,40%), hsl(115,62%,40%)); }
@media (max-width: 700px) { .heat-row { grid-template-columns: 44px 1fr; } .heat-note, .heat-n { grid-column: 2; text-align: left; } }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.mini-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.mini-table tr.is-winner td { background: var(--ok-subtle); }
.mini-table tr.is-undone td { opacity: .55; }
.nowrap { white-space: nowrap; }
.hist-list { display: grid; gap: 8px; }
.hist-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.hist-row.is-undone { opacity: .55; }
.hist-label { font-weight: 600; font-size: 13.5px; }
.hist-meta { font-size: 12px; margin-top: 2px; }
.hist-meta code, .audit-sum code { font-size: 11.5px; word-break: break-all; }

/* ---------------- Heads-up banner, support, forecast ---------------- */
.notice-switch { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.notice-on { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.ticket { margin-bottom: 14px; }
.ticket.is-resolved { opacity: .75; }
.ticket-msg { margin: 0 0 8px; white-space: pre-wrap; font-size: 14px; }
.ticket-meta { font-size: 12px; margin: 0 0 10px; }
.ticket-reply { background: var(--pink-subtle); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; }
.ticket-actions { display: grid; gap: 8px; }
.ticket-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.fc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 14px; }
.fc-tile { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.fc-tile.fc-main { border-color: var(--pink); background: var(--pink-subtle); }
.fc-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.fc-num { font-size: 26px; font-weight: 800; }
.fc-up { color: var(--ok); }
.fc-down { color: var(--error); }
.fc-whatif { margin: 6px 0 14px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.fc-whatif input[type=range] { width: 220px; vertical-align: middle; margin: 0 8px; }

/* ---------------- Support page, round two ---------------- */
.sup-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sup-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.sup-tile .fc-num { font-size: 22px; }
.sup-tile.is-hot { border-color: var(--error); background: var(--error-subtle); }
.sup-patterns { background: var(--warn-subtle); border: 1px solid var(--warn); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; display: grid; gap: 3px; }
.support-filters { display: grid; gap: 10px; margin-bottom: 14px; }
.support-selects { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket.is-overdue { border-color: var(--error); }
.ticket .card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sup-check { margin-right: 2px; }
.sup-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.sup-tag { font-size: 11.5px; padding: 2px 8px; border-radius: 99px; background: var(--surface-elevated); border: 1px solid var(--border-strong); color: var(--text-secondary); }
.ticket-manage { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.ticket-manage summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--pink-bright); margin-bottom: 10px; }
.ticket-replyrow select { max-width: 320px; }
.ticket-buttons select { width: auto; }
.canned-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 10px; align-items: start; margin-bottom: 10px; }
@media (max-width: 760px) { .canned-row { grid-template-columns: 1fr; } }

/* ---------------- Support conversations ---------------- */
.thread { display: grid; gap: 8px; margin: 0 0 10px; }
.bubble { max-width: 86%; border-radius: 14px; padding: 8px 12px; font-size: 13.5px; }
.bubble-body { white-space: pre-wrap; }
.bubble-meta { font-size: 11px; opacity: .65; margin-top: 3px; }
.bubble.from-user { background: var(--surface-elevated); border: 1px solid var(--border-strong); justify-self: start; border-bottom-left-radius: 4px; }
.bubble.from-admin { background: var(--pink-subtle); border: 1px solid var(--pink-dim); justify-self: end; border-bottom-right-radius: 4px; }

/* ---------------- Needs-your-attention: tab badges and the bell ---------------- */
.nav-item { position: relative; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; color: #fff; }
.nav-badge.sev-urgent, .bell-count.sev-urgent { background: #e5484d; }
.nav-badge.sev-warn, .bell-count.sev-warn { background: #d99425; }
.nav-badge.sev-info { background: var(--pink); }
.sidebar.collapsed .nav-badge { position: absolute; top: 3px; right: 7px; min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; padding: 0 4px; margin: 0; }
.bell-wrap { position: relative; margin-left: auto; margin-right: 8px; }
.bell-wrap + .whoami { margin-left: 0; }
.bell-btn { position: relative; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); }
.bell-btn:hover { color: var(--text); background: var(--surface-elevated); }
.bell-btn.has-urgent { color: #e5484d; border-color: #e5484d; }
.bell-btn.has-items:not(.has-urgent) { color: var(--warn); }
.bell-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 99px; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; color: #fff; padding: 0 5px; }
.bell-pop { position: absolute; right: 0; top: 48px; width: 340px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 80; overflow: hidden; }
.bell-pop-head { padding: 12px 16px; font-weight: 700; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.bell-empty { padding: 18px 16px; color: var(--text-secondary); font-size: 13px; }
.bell-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 12px 16px; color: var(--text); justify-content: flex-start; }
.bell-item:hover { background: var(--surface-elevated); }
.bell-item strong { display: block; font-size: 13px; font-weight: 600; }
.bell-hint { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; font-weight: 400; }
.bell-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--pink); }
.bell-item.sev-urgent .bell-dot { background: #e5484d; }
.bell-item.sev-warn .bell-dot { background: #d99425; }

/* ---------------- Support: compact rows and the side panel ---------------- */
.sup-list { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.sup-head, .sup-row { display: grid; grid-template-columns: 22px 10px minmax(120px, 190px) minmax(0, 1fr) minmax(130px, auto) 54px; gap: 12px; align-items: center; padding: 0 14px; }
.sup-head { padding-top: 8px; padding-bottom: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); border-bottom: 1px solid var(--border); background: var(--surface-sunken); }
.sup-row { min-height: 52px; padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.sup-row:last-child { border-bottom: 0; }
.sup-row:hover { background: var(--surface-elevated); }
.sup-row.is-waiting .sup-who strong, .sup-row.is-waiting .sup-preview { font-weight: 700; color: var(--text); }
.sup-row.is-overdue { box-shadow: inset 3px 0 0 #e5484d; }
.sup-row.is-resolved { opacity: .65; }
.sup-pri { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.sup-pri.pri-high { background: #e5484d; }
.sup-pri.pri-normal { background: var(--pink); }
.sup-pri.pri-low { background: var(--ok); }
.sup-who { display: grid; min-width: 0; }
.sup-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sup-cat { font-size: 11.5px; color: var(--text-secondary); }
.sup-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.sup-state { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.sup-assignee { width: 22px; height: 22px; border-radius: 50%; background: var(--pink-subtle); color: var(--pink-bright); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sup-time { text-align: right; color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
@media (max-width: 820px) {
  .sup-head { display: none; }
  .sup-row { grid-template-columns: 22px 10px minmax(0, 1fr) auto; }
  .sup-preview, .sup-state { grid-column: 3 / -1; justify-content: flex-start; }
}
.sup-drawer { width: min(640px, 100vw); }
.sup-drawer .drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.sup-drawer .drawer-head h3 { margin: 0; }
.sup-drawer .drawer-head .ghost { font-size: 24px; line-height: 1; padding: 2px 10px; }
.sup-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.sup-drawer .thread { max-height: 46vh; overflow-y: auto; padding: 4px 2px; margin: 12px 0; }

.bell-item { white-space: normal; }
.bell-item > span:last-child { min-width: 0; }

/* ---------------- Support sub-tabs and settings ---------------- */
.sup-subtabs { margin-bottom: 18px; }
.sup-tabcount { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }
.sup-tabcount:empty { display: none; }
.sup-tabcount.is-hot { background: #e5484d; }
.sup-set-h { margin: 22px 0 6px; font-size: 14px; }
.sup-set-h:first-child { margin-top: 0; }
.sup-sla input { width: 110px; }

/* ---------------- Tag groups ---------------- */
.genre-group-label { flex: 0 0 100%; margin: 8px 0 2px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.genre-group-label:first-child { margin-top: 0; }
.gen-group { margin-bottom: 14px; }

/* ---------------- Collapsible tag groups, aligned chip grids ---------------- */
.tag-groups { display: grid; gap: 8px; }
.tag-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 2px; font-size: 12.5px; }
.tag-picked { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 28px; }
.picked-chip { background: var(--pink); color: #fff; border: 0; border-radius: 99px; padding: 4px 6px 4px 12px; font-size: 12.5px; font-weight: 500; }
.picked-chip i { font-style: normal; opacity: .75; margin-left: 4px; }
.picked-chip:hover { background: var(--pink-dim); }
.tag-group { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-sunken); overflow: hidden; }
.tag-group.open { border-color: var(--border-strong); }
.tag-group-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-radius: 0; padding: 11px 14px; color: var(--text); font-weight: 600; font-size: 13.5px; justify-content: flex-start; text-align: left; }
.tag-group-head:hover { background: var(--surface-elevated); }
.tag-caret { width: 7px; height: 7px; flex-shrink: 0; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: rotate(-45deg); transition: transform .15s ease; }
.tag-group.open .tag-caret { transform: rotate(45deg); }
.tag-group-name { flex: 1; min-width: 0; }
.tag-group-meta { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12px; color: var(--text-secondary); }
.tag-sel { background: var(--pink); color: #fff; border-radius: 99px; padding: 1px 9px; font-size: 11px; font-weight: 700; }
.tag-group-body { padding: 4px 14px 14px; }
.tag-chip-grid, .chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tag-chip-grid .genre-chip, .chip-grid .genre-chip, .tag-chip-grid .gen-chip, .chip-grid .gen-chip { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 10px; }
.tag-chip-grid .gen-chip, .chip-grid .gen-chip { justify-content: space-between; gap: 8px; }

.hp-scope { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 50px; font-size: 9px; font-weight: 700; letter-spacing: .3px; background: rgba(139,92,246,.35); color: #fff; vertical-align: middle; }

/* ---------------- Keyboard shortcuts (shortcuts.js) ---------------- */
.kbd { display: inline-block; min-width: 22px; padding: 2px 7px; margin: 0 1px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-elevated); color: var(--text); font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; }
.kbd-h { margin: 16px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.kbd-table td { padding: 5px 8px 5px 0; vertical-align: middle; } .kbd-table td:first-child { white-space: nowrap; width: 1%; }
.qj-overlay { align-items: flex-start; padding-top: 12vh; z-index: 120; }
.qj-box { width: 560px; padding: 0; overflow: hidden; }
.qj-input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text); font-size: 16px; padding: 16px 18px; outline: none; }
.qj-list { max-height: 340px; overflow: auto; padding: 6px; }
.qj-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.qj-item.active { background: var(--pink-subtle); }
.qj-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pink-bright); min-width: 38px; }
.qj-label { flex: 1; font-weight: 500; } .qj-sub { color: var(--text-faint); font-size: 12px; }
.qj-empty { padding: 18px; color: var(--text-secondary); text-align: center; }
.qj-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; }

/* ---------------------------------------------------------------- Help page (help.js) */
.help-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.help-side { position: sticky; top: calc(var(--topbar-h) + 12px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow: auto; padding-right: 4px; }
.help-search { width: 100%; margin-bottom: 10px; }
.help-group-label { margin: 16px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.help-topic { display: block; width: 100%; max-width: 100%; height: auto; white-space: normal; overflow-wrap: anywhere; word-break: normal; text-align: left; background: none; border: 0; border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text-secondary); font: inherit; font-size: 13.5px; line-height: 1.35; cursor: pointer; box-shadow: none; }
.help-topic:hover { background: var(--surface-elevated); color: var(--text); }
.help-topic.active { background: var(--pink-subtle); color: var(--pink-bright); font-weight: 600; }
.help-empty { color: var(--text-secondary); font-size: 13.5px; padding: 8px; }
.help-article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 30px 22px; max-width: 860px; line-height: 1.6; font-size: 14.5px; }
.help-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink-bright); margin-bottom: 6px; }
.help-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.help-title-row h2 { margin: 0; font-size: 24px; line-height: 1.25; }
.help-blurb { color: var(--text-secondary); margin: 6px 0 18px; font-size: 15px; }
.help-locked { font-size: 12.5px; color: var(--text-faint); }
.help-h { margin: 22px 0 8px; font-size: 15.5px; }
.help-article p { margin: 0 0 12px; }
.help-steps { margin: 0 0 14px; padding-left: 0; list-style: none; counter-reset: helpstep; display: grid; gap: 10px; }
.help-steps li { counter-increment: helpstep; position: relative; padding-left: 38px; min-height: 26px; }
.help-steps li::before { content: counter(helpstep); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--pink-subtle); color: var(--pink-bright); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.help-tips { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.help-box { border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 14px; font-size: 14px; border: 1px solid transparent; }
.help-note { background: var(--pink-subtle); border-color: rgba(139, 92, 246, 0.35); }
.help-warn { background: var(--error-subtle); border-color: rgba(239, 106, 134, 0.4); }
.help-defs { margin: 0 0 14px; display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.help-defs > div { display: grid; grid-template-columns: minmax(130px, 220px) 1fr; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--border); }
.help-defs > div:first-child { border-top: 0; }
.help-defs dt { font-weight: 600; }
.help-defs dd { margin: 0; color: var(--text-secondary); }
.help-defs code, .help-article code { background: var(--surface-elevated); padding: 1px 6px; border-radius: 5px; font-size: 13px; }
.help-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 900px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-side { position: static; max-height: 280px; }
  .help-article { padding: 20px 18px; }
  .help-defs > div { grid-template-columns: 1fr; gap: 2px; }
}

.help-pager button { white-space: normal; height: auto; text-align: left; max-width: 48%; line-height: 1.35; }
.help-pager button:last-child { text-align: right; }

/* bell: clear one (x) and clear all */
.bell-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bell-clear-all { background: none; border: 0; padding: 2px 6px; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 6px; }
.bell-clear-all:hover { color: var(--text); background: var(--surface-elevated); }
.bell-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.bell-row .bell-item { border-bottom: 0; flex: 1; min-width: 0; }
.bell-x { background: none; border: 0; border-radius: 0; padding: 0 14px; color: var(--text-secondary); font-size: 20px; line-height: 1; cursor: pointer; }
.bell-x:hover { color: var(--text); background: var(--surface-elevated); }

/* support tickets: number, resolution note, activity timeline */
.ticket-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--text-secondary); }
.ticket-no-btn { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; cursor: pointer; color: var(--text); }
.ticket-no-btn:hover { border-color: var(--violet, #8b5cf6); }
.ticket-resolution { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: rgba(34, 197, 94, .10); border: 1px solid rgba(34, 197, 94, .30); font-size: 13px; }
.ticket-timeline { margin: 10px 0; }
.ticket-timeline summary { cursor: pointer; font-size: 13px; }
.ticket-timeline ol { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 9px; }
.ticket-timeline li { position: relative; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.ticket-timeline li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--violet, #8b5cf6); }
.ticket-timeline .tl-meta { font-size: 11.5px; color: var(--text-secondary); }

/* payout number checks */
.chk { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--surface); }
.chk summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chk ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.chk li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.chk-dot { flex: 0 0 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--text-faint, #888); }
.chk-ok .chk-dot { background: #22c55e; } .chk-info .chk-dot { background: #60a5fa; } .chk-warn .chk-dot { background: #d99425; } .chk-bad .chk-dot { background: #e5484d; }
.chk-ok b { font-weight: 500; }
.chk-names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.chk-names span { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 1px 8px; font-size: 12px; }

/* rights register */
.rights-row { cursor: pointer; }
.rights-row:hover td { background: var(--surface-elevated); }
.rights-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rights-dates input { width: 100%; }
.rights-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.rights-docs li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* reports: explanation box, growth arrows */
.rep-help { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--surface); font-size: 13px; }
.rep-help summary { cursor: pointer; font-weight: 700; }
.rep-help-body p { margin: 10px 0 4px; } .rep-help-body ul { margin: 4px 0 4px 18px; padding: 0; } .rep-help-body li { margin: 3px 0; }
.rep-up { color: #4ade80; font-weight: 700; } .rep-down { color: #f87171; font-weight: 700; } .rep-new { color: #60a5fa; font-weight: 700; }
.rep-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 900px) { .rep-two { grid-template-columns: 1fr; } }
/* reports: titles */
.tt-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 10px; }
.tt-search { flex: 1 1 340px; min-width: 240px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-elevated); color: var(--text); font-size: 14px; }
.tt-search:focus { outline: none; border-color: var(--violet, #8b5cf6); }
.tt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-chip { background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 50px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.tt-chip span { opacity: .7; margin-left: 4px; }
.tt-chip.active { background: var(--violet, #8b5cf6); border-color: transparent; color: #fff; }
.tt-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; }
.tt-movers h4 { margin: 0 0 6px; font-size: 13px; color: var(--text-secondary); }
.tt-mover { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; color: var(--text); font-size: 13px; }
.tt-mover:hover { background: var(--surface-elevated); filter: none; }
.tt-mover span { white-space: nowrap; }
.tt-delta { font-weight: 700; font-size: 12px; }
.tt-comparebar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--violet, #8b5cf6); border-radius: 10px; background: rgba(139, 92, 246, .10); }
.tt-table td { vertical-align: middle; }
.tt-row { cursor: pointer; } .tt-row:hover td { background: var(--surface-elevated); }
.tt-pick { white-space: nowrap; }
.tt-star { background: none; border: 0; padding: 0 4px; font-size: 18px; line-height: 1; color: var(--text-secondary); }
.tt-star:hover { filter: none; color: #fbbf24; } .tt-star.on { color: #fbbf24; }
.tt-name { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.tt-poster { width: 38px; height: 54px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; background: var(--surface-elevated); }
.tt-ph { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-secondary); }
.tt-sub { font-size: 12px; margin-top: 3px; }
.tt-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 12px; }
.tt-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.tt-head .tt-poster { width: 64px; height: 92px; border-radius: 10px; }
.tt-head-main { flex: 1 1 260px; min-width: 0; }
.tt-head-main h3 { margin: 0 0 6px; font-size: 20px; }
.tt-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tt-lic { cursor: pointer; border: 0; }
.tt-ids { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-ids button { background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.tt-ids code { color: var(--text); margin-left: 4px; }
.tt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 12px; }
.tt-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-secondary); }
.tt-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 6px; font-size: 12px; color: var(--text-secondary); }
.tt-legend i, .tt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
@media (max-width: 900px) { .tt-movers { grid-template-columns: 1fr; } }

/* ---------------- Payouts > Calculator ---------------- */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 18px; margin-bottom: 14px; }
.calc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.calc-field > label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.calc-field small { font-size: 11.5px; line-height: 1.4; }
.calc-time { display: flex; align-items: center; gap: 6px; }
.calc-time input { width: 70px; } .calc-time span { color: var(--text-secondary); font-size: 12.5px; margin-right: 4px; }
.calc-out { margin-top: 6px; }
.calc-steps { width: 100%; border-collapse: collapse; }
.calc-steps td { padding: 11px 8px; border-top: 1px solid var(--border); vertical-align: top; }
.calc-steps .n { width: 30px; color: var(--pink-bright); font-weight: 700; }
.calc-steps .t { font-weight: 600; font-size: 13.5px; }
.calc-steps .s { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.calc-steps .note { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.calc-steps .v { text-align: right; white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
.calc-result { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.calc-result > div { flex: 1; min-width: 200px; padding: 14px 16px; border-radius: 12px; background: var(--pink-subtle); border: 1px solid var(--border-strong); display: flex; flex-direction: column; gap: 2px; }
.calc-result span { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.calc-result b { font-size: 24px; letter-spacing: -.01em; }
.calc-result small { font-size: 11.5px; color: var(--text-secondary); }
.calc-rules { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.calc-caps-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.calc-caps-row input { width: 84px; }
.calc-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.calc-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 6px 8px; }
.calc-table td { padding: 9px 8px; border-top: 1px solid var(--border); }
.calc-table .calc-total td { font-weight: 600; background: var(--surface-sunken); }
.calc-verdict { margin: 10px 0 0; font-size: 13.5px; }

.calc-answer { padding: 18px 20px; border-radius: 14px; background: var(--pink-subtle); border: 1px solid var(--border-strong); }
.calc-answer-sum { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.calc-answer-big { margin-top: 6px; font-size: 34px; letter-spacing: -.02em; } .calc-answer-big span { color: var(--text-faint); }
.calc-working { margin-top: 12px; } .calc-working > summary, .calc-more > summary { cursor: pointer; font-size: 13.5px; color: var(--pink-bright); font-weight: 600; }
.calc-more { margin-top: 14px; } .calc-more > summary { padding: 12px 4px; color: var(--text); } .calc-more > summary span { font-weight: 400; margin-left: 6px; }
.calc-more[open] > summary { padding-bottom: 8px; }
.calc-mix { width: 100%; border-collapse: collapse; } .calc-mix th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 6px 8px; } .calc-mix td { padding: 8px; border-top: 1px solid var(--border); vertical-align: middle; } .calc-mix input[data-k="rpm"] { width: 110px; }
.calc-time3 { display: flex; gap: 10px; flex-wrap: wrap; }
.calc-time3 label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
.calc-time3 input { width: 84px; }
.calc-readout { color: var(--text) !important; font-weight: 600; font-size: 12.5px !important; }
.calc-mix .calc-readout { display: block; margin-top: 4px; max-width: 360px; }
/* plain-words explanations: the "How this works" card and the "same working, in words" list */
.calc-lead { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); } .calc-lead b { color: var(--text); }
.calc-h { margin: 18px 0 6px; font-size: 14px; }
.calc-plain { margin: 8px 0 14px; padding-left: 22px; font-size: 13px; line-height: 1.65; color: var(--text-secondary); }
.calc-plain li { margin-bottom: 6px; padding-left: 4px; } .calc-plain li::marker { color: var(--pink-bright); font-weight: 700; } .calc-plain b { color: var(--text); }
.calc-how > .card { margin-top: 4px; }

/* guided flows: a checklist card that says what to do next and takes you there */
.fg { border: 1px solid var(--border-strong); border-radius: 14px; background: linear-gradient(120deg, var(--pink-subtle), transparent 70%), var(--surface); padding: 16px 18px; margin-bottom: 16px; }
.fg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.fg-title strong, .fg-head strong { display: block; font-size: 15px; }
.fg-sub { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.fg-progress { font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 150px; }
.fg-progress i { display: block; margin-top: 5px; height: 5px; border-radius: 5px; background: var(--surface-elevated); overflow: hidden; }
.fg-progress b { display: block; height: 100%; background: var(--pink); border-radius: 5px; }
.fg-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fg-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); }
.fg-steps li.next { border-color: var(--pink); background: var(--pink-subtle); }
.fg-steps li.done { opacity: .6; }
.fg-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-elevated); color: var(--text-secondary); }
.fg-steps li.next .fg-n { background: var(--pink); color: #fff; }
.fg-steps li.done .fg-n { background: var(--ok-subtle); color: var(--ok); }
.fg-n .icon { width: 13px; height: 13px; }
.fg-body { flex: 1; min-width: 0; }
.fg-label { font-weight: 600; font-size: 13.5px; }
.fg-label em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: var(--pink); color: #fff; margin-left: 6px; }
.fg-desc { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; line-height: 1.45; }
.fg-done { padding: 10px 14px; }
.fg-done .fg-head { align-items: center; justify-content: flex-start; flex-wrap: nowrap; }
.fg-tick { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-subtle); color: var(--ok); } .fg-tick .icon { width: 14px; height: 14px; }
.fg-done strong { font-size: 13.5px; } .fg-done .fg-sub { margin: 0; }

/* the "?" help button, top right of every page, with a label on hover */
.page-help { position: relative; flex: none; width: 34px; height: 34px; padding: 0; margin-left: auto; margin-right: 10px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; line-height: 1; background: var(--surface-elevated); color: var(--text-secondary); border: 1px solid var(--border-strong); }
.page-help:hover { color: var(--pink-bright); border-color: var(--pink); }
.page-help::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; white-space: nowrap; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--surface-elevated); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .12s, transform .12s; z-index: 30; }
.page-help:hover::after, .page-help:focus-visible::after { opacity: 1; transform: none; }
/* Content: the header, quick links and number tiles above the tabs */
.ct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.ct-head .db-actions { margin-bottom: 0; }
.ct-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.ct-tile { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 14px 16px; border-radius: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-top: 3px solid var(--border-strong); transition: border-color .15s, transform .15s, box-shadow .15s; }
.ct-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--pink); }
.ct-tile.on { background: var(--pink-subtle); border-color: var(--pink); }
.ct-tile.ok { border-top-color: var(--ok); } .ct-tile.info { border-top-color: var(--accent-2); } .ct-tile.warn { border-top-color: var(--warn); }
.ct-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.ct-num { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ct-tile { white-space: normal; }
.ct-sub { font-size: 12px; color: var(--text-secondary); font-weight: 500; line-height: 1.35; }
.ct-tabs { margin-top: 18px; margin-bottom: 14px; }
.ct-tabs .status-tab { font-size: 14px; }
.ct-tabs .status-tab .count { background: var(--surface-elevated); padding: 1px 8px; border-radius: 999px; font-size: 11.5px; }
.ct-tabs .status-tab.active .count { background: var(--pink-subtle); }
.ct-tabs .ct-attn .count { color: var(--warn); }
.ct-bar { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }

/* Settings > About: hero, cards and the version log */
.ab-hero { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 24px; margin-bottom: 16px; border: 1px solid var(--border-strong); border-radius: 16px; background: linear-gradient(120deg, var(--pink-subtle), transparent 70%), var(--surface); }
.ab-name { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.ab-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ab-chip { padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-elevated); border: 1px solid var(--border-strong); color: var(--text-secondary); font-family: inherit; }
.ab-chip.main { background: var(--pink); border-color: var(--pink); color: #fff; } .ab-chip.app { background: var(--ok-subtle); border-color: var(--ok); color: var(--ok); }
.ab-when { display: grid; grid-template-columns: auto auto; gap: 4px 14px; font-size: 12.5px; color: var(--text-secondary); } .ab-when b { color: var(--text); font-weight: 600; }
.ab-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ab-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.ab-card h3, .ab-log h3 { margin: 0 0 10px; font-size: 14.5px; }
.ab-kv { display: grid; grid-template-columns: 120px 1fr; gap: 7px 12px; margin: 0; font-size: 13px; } .ab-kv dt { color: var(--text-secondary); } .ab-kv dd { margin: 0; word-break: break-word; }
.ab-kv code, .ab-hero code { font-size: 12px; }
.ab-warn { margin: 10px 0 0; font-size: 12.5px; color: var(--warn); }
.ab-card .small { margin-top: 12px; }
.ab-log { padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 12px; }
.ab-log-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .ab-log-head p { margin: 0; font-size: 12.5px; }
.ab-search { min-width: 220px; }
.ab-rel { border-top: 1px solid var(--border); padding: 4px 0; }
.ab-rel > summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 2px; cursor: pointer; list-style: none; }
.ab-rel > summary::-webkit-details-marker { display: none; }
.ab-rel > summary::before { content: "\25B8"; color: var(--text-faint); transition: transform .12s; } .ab-rel[open] > summary::before { transform: rotate(90deg); }
.ab-ver { font-size: 14px; color: var(--pink-bright); } .ab-date { font-size: 13px; color: var(--text-secondary); } .ab-count { margin-left: auto; font-size: 12px; color: var(--text-faint); }
.ab-items { list-style: none; margin: 0 0 8px 22px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ab-items summary { cursor: pointer; padding: 5px 0; font-size: 13.5px; } .ab-items details p { margin: 2px 0 10px 14px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.ab-more { margin-top: 10px; }

/* the help icon sits with the bell and the account pill at the right edge, not floating in the middle of the bar */
.page-help { margin-left: auto; margin-right: 8px; }
.page-help + .bell-wrap { margin-left: 0; }

/* the busy screen between login, the panel and sign-out */
.busy-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.busy-overlay.on { opacity: 1; pointer-events: auto; }
.busy-box { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.busy-mark { width: 84px; height: auto; object-fit: contain; animation: busy-pulse 1.4s ease-in-out infinite; }
.busy-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--pink); animation: busy-turn .8s linear infinite; }
.busy-box p { margin: 0; font-size: 14px; color: var(--text-secondary); font-weight: 500; }
@keyframes busy-turn { to { transform: rotate(360deg); } }
@keyframes busy-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .busy-mark, .busy-spin { animation: none; } }
/* the account menu on the top-right pill */
.who-click { cursor: pointer; transition: border-color .15s; } .who-click:hover, .who-click[aria-expanded="true"] { border-color: var(--pink); }
.acct-menu { position: absolute; right: 12px; top: calc(100% + 8px); width: 290px; z-index: 60; padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.acct-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; } .acct-head strong { display: block; font-size: 14px; } .acct-head span:not(.who-avatar) { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.acct-session { margin: 0 4px 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface-sunken); font-size: 12.5px; }
.acct-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; color: var(--text-secondary); } .acct-row b { color: var(--text); font-weight: 600; } .acct-row i { font-style: normal; color: var(--text-secondary); font-weight: 400; }
.acct-session p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-faint); }
.acct-menu > button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; text-align: left; background: transparent; color: var(--text); border: none; }
.acct-menu > button:hover { background: var(--surface-elevated); } .acct-menu small { color: var(--text-faint); font-weight: 400; font-size: 11.5px; }
.acct-out { justify-content: flex-start !important; color: var(--error) !important; margin-top: 4px; border-top: 1px solid var(--border) !important; border-radius: 0 0 9px 9px !important; } .acct-out .icon { width: 16px; height: 16px; }

/* the "session ends soon" card */
.session-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1500; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between; width: min(560px, calc(100vw - 24px)); padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--warn); box-shadow: var(--shadow-lg); }
.session-bar strong { display: block; font-size: 14px; } .session-bar span { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.session-actions { display: flex; gap: 8px; }
/* Settings > Sign-in log */
.si-list { display: flex; flex-direction: column; }
.si-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) 120px minmax(150px, 1.6fr) auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--border); }
.si-row:first-child { border-top: none; }
.si-who b { display: block; font-size: 13.5px; } .si-who span { font-size: 12px; } .si-last { font-size: 12.5px; } .si-act { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.si-tools { margin-bottom: 10px; } .si-table td { font-size: 12.5px; } .si-bad td { color: var(--text-secondary); } .si-bad td:nth-child(3) { color: var(--error); font-weight: 600; }
@media (max-width: 760px) { .si-row { grid-template-columns: 1fr auto; } .si-last { grid-column: 1 / -1; } .si-act { grid-column: 1 / -1; justify-content: flex-start; } }
/* the bell stays at the right when the ? button is hidden (as on the Help page) */
.page-help[style*="display: none"] + .bell-wrap { margin-left: auto; }

/* the refresh button: reloads the page's data without a browser refresh; it carries the push to the right */
.page-refresh { margin-left: auto !important; margin-right: 10px; }
.topbar .page-help:not(.page-refresh), .topbar .bell-wrap { margin-left: 0 !important; }
.page-refresh svg { transition: transform .5s; }
.page-refresh.spinning svg { transform: rotate(360deg); }

/* Users > Audiences > See people: a left-aligned table whose ID and dates stay on one line (scrolls sideways on a narrow screen) */
.aud-scroll { overflow-x: auto; }
.sys-table.aud-table th, .sys-table.aud-table td, .sys-table.aud-table th:nth-child(n+2), .sys-table.aud-table td:nth-child(n+2) { text-align: left; white-space: nowrap; vertical-align: middle; }
.sys-table.aud-table td:nth-child(2) { white-space: normal; min-width: 170px; word-break: break-word; }
.aud-table .copy-chip { white-space: nowrap; }
/* a field that just saved itself (episode title, Gold price) */
.flash-saved { outline: 2px solid var(--success, #22c55e); outline-offset: 1px; transition: outline-color .3s; }
/* provider picker (searchable replacement for the provider drop-down) */
.pp .sp-search { position: relative; }
.pp .sp-input { width: 100%; padding-right: 34px; }
.pp-caret { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; background: transparent; color: var(--text-secondary); font-size: 14px; border-radius: 6px; }
.pp-caret:hover { background: var(--surface-elevated); color: var(--text); filter: none; }
.pp .sp-menu { max-height: 280px; overflow-y: auto; }
.pp-item { justify-content: space-between; }
.pp-item.active { background: var(--pink-subtle); }
.pp-item.chosen b { color: var(--pink-bright); }
.pp-tick { color: var(--pink-bright); font-weight: 700; }
/* offer card banners (text only): the editor and the Home preview; the app draws its own version from the same fields */
.offer-card { border-radius: 16px; padding: 16px 18px; color: #fff; display: flex; flex-direction: column; gap: 6px; min-height: 96px; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.offer-card .oc-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.offer-card .oc-text { font-size: 13.5px; opacity: .92; line-height: 1.35; }
.offer-card .oc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.offer-card .oc-coupon { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: 13px; padding: 4px 10px; border: 1.5px dashed rgba(255,255,255,.85); border-radius: 8px; letter-spacing: .06em; }
.offer-card .oc-btn { font-size: 13px; font-weight: 800; padding: 6px 14px; border-radius: 999px; background: #fff; color: #1a1030; }
.offer-card .oc-ends { font-size: 12px; font-weight: 700; margin-left: auto; opacity: .9; }
.theme-violet { background: linear-gradient(135deg, #5b21b6, #8b5cf6); }
.theme-gold { background: linear-gradient(135deg, #a16207, #f2c14e); color: #1a1200 !important; } .theme-gold .oc-coupon { border-color: rgba(26,18,0,.7); } .theme-gold .oc-btn { background: #1a1200; color: #f2c14e; }
.theme-festival { background: linear-gradient(135deg, #9f1239, #f97316); }
.theme-dark { background: linear-gradient(135deg, #111827, #374151); }
.theme-green { background: linear-gradient(135deg, #065f46, #10b981); }
.oc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.oc-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-secondary); font-weight: 600; } .oc-grid .oc-wide { grid-column: 1 / -1; }
.oc-themes { display: flex; gap: 8px; margin: 4px 0 12px; }
.oc-theme { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid transparent; } .oc-theme.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
.oc-preview { margin: 6px 0 10px; max-width: 520px; } .oc-fill select { max-width: 320px; }
@media (max-width: 600px) { .oc-grid { grid-template-columns: 1fr; } }
/* Content > Promos (the special pinned title) */
.promos-pin { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; margin: 0 0 14px; text-align: left; background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(236,72,153,.14)); border: 1px solid var(--border-strong); border-radius: 14px; color: var(--text); }
.promos-pin:hover { filter: none; border-color: var(--pink); }
.promos-pin.needs { border-color: var(--warn, #f59e0b); }
.promos-pin .pp-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-elevated); color: var(--pink-bright); flex: none; }
.promos-pin .pp-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px; } .promos-pin .pp-text small { flex-basis: 100%; font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }
.promos-pin .pp-go { color: var(--text-secondary); flex: none; }
.promos-hero-ico { display: grid; place-items: center; color: var(--pink-bright); background: var(--surface-elevated); }
.pr-help { margin: 8px 0 0; font-size: 13px; color: var(--text-secondary); max-width: 780px; line-height: 1.45; }
.pr-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.pr-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.pr-row { display: grid; grid-template-columns: 44px minmax(140px, 1.2fr) 112px minmax(260px, 2fr) 64px 130px; gap: 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); }
.pr-row:first-child { border-top: none; } .pr-head { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); background: var(--surface-elevated); padding: 8px 12px; }
.pr-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--surface-elevated); display: grid; place-items: center; color: var(--text-secondary); } .pr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pr-name { display: flex; flex-direction: column; min-width: 0; } .pr-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .pr-name small { font-size: 11.5px; }
.pr-state { justify-self: start; white-space: nowrap; }
.pr-movie { display: flex; align-items: center; gap: 8px; min-width: 0; } .pr-code { flex: 1; min-width: 0; }
.pr-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--surface-elevated); border: 1px solid var(--border); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; } .pr-chip small { color: var(--text-secondary); } .pr-chip.bad { border-color: var(--error); }
.pr-on { margin: 0; } .pr-boost { width: 100%; }
@media (max-width: 1000px) { .pr-row { grid-template-columns: 44px minmax(0, 1fr) auto; } .pr-head { display: none; } .pr-movie { grid-column: 1 / -1; } .pr-on, .pr-boost { grid-column: auto; } }
.pr-chip.general { background: rgba(124,58,237,.16); border-color: var(--border-strong); }
#promosPage .back-btn { margin-bottom: 12px; }
/* poster badge look (series Badges, Home Layout > Poster look): swatches and the preview poster */
.pk-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.pk-sw { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid transparent; } .pk-sw.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
.pk-pair { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; } .pk-cap { font-size: 12px; color: var(--text-secondary); margin: 0 0 6px; font-weight: 600; }
.pk-poster { position: relative; width: 104px; aspect-ratio: 680 / 960; border-radius: 10px; overflow: hidden; background: #3a3a46 center / cover no-repeat; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.pk-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 7px 6px; font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.pk-pill { position: absolute; left: 6px; top: 6px; max-width: 78px; padding: 3px 6px; border-radius: 6px; font-size: 9px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-tab { position: absolute; left: 0; top: 10px; max-width: 78px; padding: 3px 8px 3px 6px; border-radius: 0 6px 6px 0; font-size: 9px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-ribbon { position: absolute; top: 12px; width: 84px; box-sizing: border-box; padding: 2px 12px; text-align: center; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pk-ribbon.pk-left { left: -22px; transform: rotate(-45deg); } .pk-ribbon.pk-right { right: -22px; transform: rotate(45deg); }
.pk-star { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #ffc53d; font-size: 12px; border: 1px solid rgba(255,255,255,.18); }
.pl-look { display: flex; gap: 32px; flex-wrap: wrap; } .pl-look-form { flex: 1 1 260px; max-width: 360px; } .pl-look-preview { flex: 0 0 auto; }
.pr-movie { flex-wrap: wrap; } .pr-movie .pr-code { min-width: 150px; }

/* Premium corner ribbon on posters (premRibbon in shared.js) */
.prem-wrap { position: relative; display: block; flex: none; line-height: 0; border-radius: 8px; overflow: hidden; }
.prem-rib { position: absolute; top: 0; right: 0; z-index: 2; padding: 2px 7px; border-bottom-left-radius: 8px; font-size: 9px; font-weight: 800; letter-spacing: .05em; line-height: 1.3; color: #3a2600; background: linear-gradient(135deg, #ffd45e, #f5a623); box-shadow: 0 1px 4px rgba(0,0,0,.4); pointer-events: none; }
.prem-rib-sm { padding: 1px 4px; font-size: 6.5px; border-bottom-left-radius: 6px; }
.tile-poster .prem-rib { top: 8px; right: 0; border-radius: 6px 0 0 6px; padding: 3px 9px; font-size: 10px; }

/* Small gold Premium star for tiny spots (premStar in shared.js) */
.prem-star { color: #f5a623; font-size: 12px; line-height: 1; margin-left: 4px; flex: none; }
.cal-chip .prem-star { margin-left: 0; }

/* Saved views (savedViews.js) */
.sv { display: inline-flex; align-items: center; gap: 6px; }
.sv .sv-name { width: 170px; }

/* User timeline (Users > a person > Timeline) */
.usr-timeline { display: flex; flex-direction: column; }
.tl-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.tl-when { flex: none; width: 92px; color: var(--text-secondary); }
.tl-text { min-width: 0; }
.tl-gold .tl-text, .tl-vip .tl-text { font-weight: 600; }
.tl-support .tl-text { color: var(--pink-bright); }

/* Series health chip (healthChip in content.js) */
.health-strong { background: rgba(46,160,67,.18); color: #2ea043; }
.health-ok { background: rgba(210,153,34,.18); color: #d29922; }
.health-weak { background: rgba(248,81,73,.16); color: #f85149; }

/* Provider scorecard (providers.js, drawProviderScorecard) */
.sc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sc-grade { font-weight: 700; font-size: 14px; padding: 5px 12px; border-radius: 999px; background: var(--surface-elevated); }
.sc-strong { background: rgba(46,160,67,.18); color: #2ea043; }
.sc-steady { background: rgba(88,166,255,.16); color: #58a6ff; }
.sc-attention { background: rgba(248,81,73,.16); color: #f85149; }
.sc-new { background: var(--surface-elevated); color: var(--text-secondary); }
.sc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.sc-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.sc-kpi-label { font-size: 12px; color: var(--text-secondary); }
.sc-kpi b { font-size: 22px; font-weight: 700; }
.sc-kpi small { color: var(--text-secondary); font-size: 12px; }
.sc-tips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.sc-tip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.sc-dot { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--text-secondary); }
.sc-tip.bad .sc-dot { background: #f85149; } .sc-tip.warn .sc-dot { background: #d29922; } .sc-tip.good .sc-dot { background: #2ea043; }
.sc-top { display: flex; flex-direction: column; gap: 8px; }
.sc-top-row { display: grid; grid-template-columns: minmax(80px, 1.2fr) 2fr 70px auto; gap: 10px; align-items: center; font-size: 13px; }
.sc-bar { height: 8px; background: var(--surface-elevated); border-radius: 4px; overflow: hidden; }
.sc-bar i { display: block; height: 100%; background: var(--pink); border-radius: 4px; }
.sc-top-val { text-align: right; color: var(--text-secondary); }

/* Payouts > Profit (payoutsProfit.js) */
.pf-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.pf-summary div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.pf-summary span { font-size: 12px; color: var(--text-secondary); }
.pf-summary b { font-size: 18px; }
.pf-summary .pos b, .pf-profit.pos { color: #2ea043; }
.pf-summary .neg b, .pf-profit.neg { color: #f85149; }
.pf-table td.num, .pf-table th.num { text-align: right; white-space: nowrap; }
.pf-bar-wrap { height: 5px; margin-top: 4px; background: var(--surface-elevated); border-radius: 3px; overflow: hidden; }
.pf-bar { display: block; height: 100%; border-radius: 3px; }
.pf-bar.pos { background: #2ea043; } .pf-bar.neg { background: #f85149; }

/* ===========================================================================
   Text size (Settings > Look & shortcuts): the whole panel is zoomed a little. 100vh would then be taller than the screen,
   so the few places that use it divide by the same factor (--ui-zoom).
   =========================================================================== */
:root { --ui-zoom: 1; }
html[data-text="large"] { zoom: 1.12; --ui-zoom: 1.12; }
html[data-text="xl"] { zoom: 1.28; --ui-zoom: 1.28; }
#app { height: calc(100vh / var(--ui-zoom)); }
#loginScreen { min-height: calc(100vh / var(--ui-zoom)); }
.settings-nav { max-height: calc((100vh - 104px) / var(--ui-zoom)); }
.help-side { max-height: calc((100vh - var(--topbar-h) - 32px) / var(--ui-zoom)); }

/* ===========================================================================
   Phone layout (below 860 px): the sidebar becomes a menu that slides in over the page, opened by the button in the top bar
   (js/mobile.js). Wide grids drop to one column, tables scroll sideways instead of squeezing, and buttons get a bigger touch area.
   Wider screens are untouched: the menu button and the backdrop are hidden there.
   =========================================================================== */
.menu-btn { display: none; flex: none; width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 10px; color: var(--text); }
#sidebarBackdrop { display: none; }

@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  #collapseBtn { display: none; }
  .topbar { gap: 10px; }

  /* the menu: always the full version (never the narrow icon-only one), parked off screen until opened */
  .sidebar, .sidebar.collapsed {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(290px, 86vw); z-index: 80;
    transform: translateX(-104%); transition: transform .2s ease; box-shadow: none;
  }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .sidebar.collapsed .sidebar-top { flex-direction: row; justify-content: space-between; gap: 10px; padding: 0 14px 0 16px; }
  .sidebar.collapsed .brand-left { display: flex; }
  .sidebar.collapsed .brand-text { display: block; }
  .sidebar.collapsed .nav-group-label { height: auto; margin: 0; padding: 14px 12px 6px; background: none; font-size: 10.5px; overflow: visible; }
  .sidebar.collapsed .nav-group-label:first-child { display: block; padding-top: 2px; }
  .sidebar.collapsed .nav-item { justify-content: flex-start; padding: 12px; }
  .sidebar.collapsed .nav-item .label { display: inline; }
  .sidebar.collapsed .nav-badge { position: static; min-width: 20px; height: 20px; font-size: 11.5px; line-height: 20px; padding: 0 6px; margin-left: auto; }
  .sidebar.collapsed .sidebar-bottom { flex-direction: row; align-items: stretch; }
  .sidebar.collapsed .sidebar-bottom .icon-btn { flex: 1; width: auto; }
  .nav-item { padding: 12px; }
  #sidebarBackdrop { display: block; position: fixed; inset: 0; z-index: 75; background: rgba(5, 4, 10, .6); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  body.nav-open #sidebarBackdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  /* the top bar keeps the title and the bell; the rest is on the page itself */
  .topbar h1 { font-size: 16px; }
  .topbar .page-refresh { display: none; }

  /* pages */
  main.content { padding: 14px 12px 80px; }
  .two-col { grid-template-columns: 1fr; }
  .top-content-grid, .prov-grid, .hb-banner-grid, .ab-cards, .so-grid { grid-template-columns: 1fr; }
  .stat-grid, .db-kpis, .offer-stats, .ct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid, .price-fields, .hb-fields, .calc-grid, .fc-grid, .sys-grid { grid-template-columns: 1fr; }
  .content-toolbar { gap: 8px; }
  .content-toolbar .search-box { flex: 1 1 100%; min-width: 0; }
  .content-toolbar .filter-select { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .status-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .status-tabs .status-tab { white-space: nowrap; flex: none; }
  .db-head { align-items: flex-start; }
  .db-actions { flex-wrap: wrap; }
  .series-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .series-row { padding: 10px 12px; gap: 10px; }
  .row-badges { display: none; }
  .modal-box { width: calc(100vw - 24px); max-width: 100%; padding: 20px 18px; }
  .price-form { padding: 18px 16px 28px; }
  .prov-list-head { display: none; }
  .prov-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }

  /* tables and wide lists scroll sideways inside their card instead of pushing the page wider */
  .card-body, .table-wrap, .usr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mini-table, .pv-table, .usr-table { min-width: 560px; }

  /* easier to tap */
  input, select, textarea { font-size: 16px; } /* also stops iPhones zooming in when a box is tapped */
  button, .icon-btn { min-height: 40px; }
  .collapse-btn, .view-toggle button, .page-help { min-height: 0; }
  .status-badge, .nav-badge, .tile-status button, .tile-id button { min-height: 0; }
}

@media (max-width: 340px) {
  .stat-grid, .db-kpis, .offer-stats { grid-template-columns: 1fr; }
  .whoami { display: none; }
}

/* Home Layout block rows: on a narrower window the switches drop under the text instead of squeezing it into a thin column */
.hb-head { flex-wrap: wrap; }
.hb-main { flex: 1 1 220px; }
.hb-quick { flex-wrap: wrap; }

/* Episode reactions: the Insights card and the Dashboard "Most loved shows" card */
.rx-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rx-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; background: var(--surface-sunken); }
.rx-tile .rx-emoji { font-size: 22px; line-height: 1.2; }
.rx-tile b { font-size: 18px; }
.rx-tile small { color: var(--text-secondary); font-size: 11.5px; }
.rx-ep { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.rx-ep:last-child { border-bottom: 0; }
.rx-board { display: flex; flex-direction: column; gap: 12px; }
.rx-row { display: flex; align-items: flex-start; gap: 12px; }
.rx-row .rx-emoji { font-size: 22px; line-height: 1.3; flex: none; }
.rx-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.rx-show i { font-style: normal; color: var(--text-secondary); margin-left: 4px; }
.rx-none { color: var(--text-faint); }
@media (max-width: 560px) { .rx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Home Layout > Ranking */
.rk-switch { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-sunken); margin-bottom: 14px; cursor: pointer; }
.rk-switch input { margin-top: 4px; }
.rk-switch span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.rk-switch small { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.rk-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rk-add .rk-q { flex: 1 1 260px; min-width: 0; }
.rk-add .rk-at { width: 150px; }
.rk-suggest { flex: 1 1 100%; display: flex; flex-direction: column; background: var(--surface-sunken); border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; }
.rk-sug { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 9px 14px; border: 0; border-radius: 0; background: none; color: var(--text); text-align: left; font-weight: 500; }
.rk-sug:hover { background: var(--surface-elevated); }
.rk-sug small, .rk-main small { color: var(--text-secondary); font-size: 12px; font-weight: 400; }
.rk-none { padding: 10px 14px; color: var(--text-secondary); font-size: 13px; }
.rk-list { display: flex; flex-direction: column; gap: 8px; }
.rk-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.rk-row[draggable="true"] { cursor: grab; }
.rk-row.dragging { opacity: .4; }
.rk-row.drag-over { border-color: var(--pink); background: var(--pink-subtle); }
.rk-pos { flex: none; width: 30px; text-align: center; font-weight: 800; font-size: 16px; color: var(--pink-bright); }
.rk-thumb { flex: none; width: 36px; height: 52px; border-radius: 6px; object-fit: cover; background: var(--surface-sunken); }
.rk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rk-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rk-actions .rk-to { width: 64px; padding: 6px 8px; }
@media (max-width: 700px) { .rk-row { flex-wrap: wrap; } .rk-actions { width: 100%; justify-content: flex-start; } }

/* drag and drop in the film order lists */
.rk-grip { flex: none; width: 18px; text-align: center; color: var(--text-faint); font-size: 16px; line-height: 1; letter-spacing: -3px; cursor: grab; user-select: none; }
.rk-row:hover .rk-grip { color: var(--text-secondary); }
.rk-row.drop-above { box-shadow: 0 -3px 0 0 var(--pink); }
.rk-row.drop-below { box-shadow: 0 3px 0 0 var(--pink); }
.rk-hint { margin: 8px 2px 0; color: var(--text-faint); font-size: 12px; }

/* guided-flow checklist: fold it up to one line */
.fg:not(.fg-done) .fg-head { cursor: pointer; align-items: center; }
.fg-toggle { flex: none; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.fg-toggle .icon { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .15s ease; }
.fg-folded .fg-toggle .icon { transform: rotate(0deg); }
.fg-folded .fg-steps, .fg-folded .fg-sub { display: none; }

/* Earn Gold rewards: a number that differs from the standard amount */
input.earn-changed { border-color: var(--pink) !important; box-shadow: 0 0 0 1px var(--pink-subtle); }