/* ==========================================================================
   LWBMedia. — design system
   "LWBMedia Redesign Concept" (approved) — a clean, light SaaS look
   replacing the earlier dark green + gold theme. Wordmark still uses
   self-hosted Switzer (Semibold / Semibold Italic) — see the @font-face
   block below; until the real .woff2 files are dropped into
   assets/fonts/, the system-font fallback stack renders instead, so
   nothing is broken without them.
   ========================================================================== */

@font-face {
  font-family: 'Switzer';
  src: url('/billing/assets/fonts/Switzer-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/billing/assets/fonts/Switzer-SemiboldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Semantic tokens — components use these, never a raw color literal,
     so re-theming stays centralized here. */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --border: #e3e8ee;
  --border-soft: #eef1f5;
  --border-strong: #c1c9d2;
  --ink: #1a1f36;
  --ink-deep: #1a1f36;
  --ink-soft: #697386;
  --ink-faint: #8792a2;

  /* Brand/UI accent — blue, per the site-wide green-to-blue swap. Genuine
     success/paid indicators (pill-paid, "resolved" checkmarks, positive
     analytics deltas, etc.) intentionally do NOT use this — they use the
     separate --ok green below instead, so "this went well" still reads
     as green even though the general brand color no longer is. */
  --accent: #3859a8;
  --accent-wash: #e9edf7;
  --panel: #1a1f36;        /* dark surface used sparingly (bell badge, etc.) */
  --panel-deep: #11142a;

  /* Kept as aliases so any not-yet-swept literal `var(--gold...)` still
     resolves to something sane in the new palette rather than breaking —
     new code should reach for --accent instead. */
  --gold: var(--accent);
  --gold-deep: #2e4a86;
  --gold-wash: var(--accent-wash);
  --amber-line: var(--warn-border);

  --danger: #c0392b;
  --danger-wash: #fbeae8;
  --danger-line: #e3a89e;
  --warn: #9a6b12;
  --warn-wash: #fbf1de;
  --warn-border: #e8c777;
  /* Success/paid green — deliberately independent of --accent now that
     the general brand color is blue (see note above). This is the
     original brand green, kept alive here for exactly these meanings. */
  --ok: #499256;
  --ok-wash: #e8f2ea;
  --shadow-color: 227 35% 16%;

  --font-body: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-wordmark: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(26,31,54,0.04), 0 10px 24px -14px rgba(26,31,54,0.14);
  --shadow-sm: 0 1px 2px rgba(26,31,54,0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink-soft); }

h1, h2, h3 { text-wrap: balance; color: var(--ink-deep); margin: 0; }

.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark em { font-style: italic; }

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: 40px 32px 90px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}

/* .sidebar (admin only) is fixed-position and taken out of flow, so
   .app-shell's app-main no longer has a flex sibling to push it over —
   this margin does that job instead, matching the sidebar's own width.
   Scoped to .app-shell specifically: every non-admin page (home, channel,
   invoice, forgot/reset-password, pub-invoice, 404, etc.) renders a plain
   <main class="app-main"> with no sidebar and no .app-shell wrapper, so an
   unscoped margin-left here was shoving all of those off-center to the
   right on desktop — most visible on the narrow, centered "card" pages
   (forgot password, reset password, verify email) where the card sat well
   left of center with a large empty gap on the right. */
.app-shell .app-main {
  margin-left: 220px;
}

/* ---- Sidebar (admin) — light, per the redesign ---- */
/* Fixed to the viewport (not an in-flow flex child) so it never scrolls
   with a long page — every nav item and channel stays reachable without
   scrolling the sidebar itself out of view. It scrolls internally only if
   its own content (a long channel list) is taller than the screen. */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 220px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 24px 14px;
  gap: 2px;
  overflow-y: auto;
  z-index: 10;
}
.sidebar .wordmark { color: var(--ink); font-size: 17px; margin-bottom: 22px; display: block; padding: 0 10px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar nav a,
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13px;
}
.sidebar nav a:hover,
.nav-link:hover { background: var(--border-soft); color: var(--ink); }
.sidebar nav a.active,
.nav-link.active { background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.sidebar .channels-list { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.sidebar .channels-list .label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); padding: 0 12px 8px; }
.sidebar .channel-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-radius: var(--radius-sm); font-size: 12.5px; color: var(--ink-soft); text-decoration: none; }
.sidebar .channel-row:hover { background: var(--border-soft); color: var(--ink); }
.sidebar .channel-tag { font-size: 10px; font-weight: 700; color: var(--accent); background: var(--accent-wash); padding: 2px 6px; border-radius: 5px; }
.sidebar .footer { font-size: 12px; color: var(--ink-faint); padding: 12px; margin-top: auto; border-top: 1px solid var(--border); }

/* ---- Top bar (client-facing) ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.topbar .wordmark { color: var(--ink); font-size: 16px; flex-shrink: 0; }
.topbar nav { display: flex; align-items: center; gap: 22px; font-size: 13px; color: var(--ink-soft); min-width: 0; }
.topbar nav a { text-decoration: none; flex-shrink: 0; }
.topbar nav a:hover { color: var(--ink); }
.topbar nav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---- Buttons ---- */
.btn {
  appearance: none;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  padding: 10px 18px;
  transition: filter .15s ease, background .15s ease, transform .08s ease, border-color .15s ease;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary,
.btn-gold {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(73,146,86,0.32), 0 1px 1px rgba(26,31,54,0.06);
}
.btn-primary:hover,
.btn-gold:hover { filter: brightness(1.06); }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--border-strong); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--border-soft); }
.btn-text { background: none; border: none; color: var(--ink-faint); font-weight: 600; padding: 6px 4px; }
.btn-text:hover { color: var(--ink); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger-line); }
.btn-danger:hover { background: var(--danger-wash); }
.btn-danger-solid { background: var(--danger); color: #fff; box-shadow: 0 1px 2px rgba(192,57,43,0.32), 0 1px 1px rgba(26,31,54,0.06); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }

/* ---- Cards & tables ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.card + .card { margin-top: 18px; }
.card-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.card-head h2 { font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em; }
.card-head-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.show-expired-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.btn .btn-label { white-space: nowrap; }
.card-head .meta { font-size: 12px; color: var(--ink-faint); }
.card-body { padding: 20px 22px; }
.card-foot { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.table-wrap, .table-scroll { overflow-x: auto; position: relative; }
/* min-width keeps the browser from crushing columns to fit a narrow phone
   screen — instead the table overflows .table-wrap and scrolls
   horizontally (the fade hint below is built for exactly this). Without
   it, a long video title or invoice row got squeezed into a near-zero-
   width column and wrapped one character per line. */
table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13px; }
thead th, table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 11px 22px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td, table td { padding: 14px 22px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td, table tr:last-child td { border-bottom: none; }
.price { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---- Pills / status ---- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: var(--radius-pill); letter-spacing: 0.02em; }
.pill-pending { background: #eef1f5; color: var(--ink-soft); }
.pill-invited { background: var(--warn-wash); color: var(--warn); }
.pill-paid { background: var(--ok-wash); color: var(--ok); cursor: pointer; border: 1px dashed transparent; }
.pill-paid:hover { border-color: var(--ok); }
.pill-overdue { background: var(--danger-wash); color: var(--danger); }
.pill-overdue-soft { background: var(--warn-wash); color: var(--warn); }
.pill-void { background: var(--danger-wash); color: var(--danger); }
.pill-locked { background: var(--border-soft); color: var(--ink-faint); }

/* ---- Avatars & channel chips (Home, Admin Members, Admin Dashboard) ---- */
.avatar, .avatar-ring {
  width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: linear-gradient(135deg, #5b7bc4, #2e4a86);
}
.avatar-sm {
  width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: linear-gradient(135deg, #9bb6d6, #4f6f9e);
}
.channel-link { display: flex; align-items: center; gap: 10px; color: inherit; cursor: pointer; }
.channel-link:hover { color: var(--accent); }
.channel-link:hover .avatar-ring { box-shadow: 0 0 0 2px var(--accent-wash); }
.chan-chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); background: var(--border-soft); padding: 4px 10px; border-radius: var(--radius-pill); }
.row-actions { display: flex; align-items: center; gap: 6px; }

/* ---- Search input (Admin Members etc.) ---- */
.search-input { position: relative; width: 260px; max-width: 100%; }
.search-input svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-faint); }
.search-input input { padding-left: 34px; }

/* ---- Inline price editing (Admin) ---- */
.price-input-row { display: flex; align-items: center; gap: 6px; max-width: 190px; }
.price-input-wrap { position: relative; flex: 1; }
.price-input-wrap .cur { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--ink-faint); pointer-events: none; }
.price-input { width: 100%; padding: 7px 8px 7px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 12.5px; font-family: inherit; background: #fff; color: var(--ink); }
.price-guide { width: 34px; flex-shrink: 0; padding: 7px 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 11px; font-family: inherit; background: #fff; color: var(--ink-faint); text-align: center; }

/* ---- Leave a tip (invoice pay card) ---- */
.tip-inline-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px;
  background: var(--surface-raised);
}
.tip-inline-toggle .left { display: flex; align-items: center; gap: 10px; }
.tip-inline-toggle .icon { width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--accent-wash); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tip-inline-toggle .icon svg { width: 18px; height: 18px; color: var(--accent); }
.tip-inline-toggle .title { font-size: 13.5px; font-weight: 600; color: var(--ink-deep); }
.tip-inline-toggle .desc { font-size: 12px; color: var(--ink-faint); margin-top: 1px; }

.switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .track { position: absolute; inset: 0; background: var(--border-strong); border-radius: var(--radius-pill); transition: .15s; cursor: pointer; }
.switch .track:before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track:before { transform: translateX(18px); }

.expand-panel { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
.expand-panel.open { max-height: 260px; }
.expand-panel-inner { padding-top: 14px; }

.tip-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.tip-chip {
  border: 1px solid var(--border); background: var(--surface-raised); border-radius: var(--radius-md);
  padding: 12px 6px; text-align: center; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  transition: border-color .12s, background .12s;
}
.tip-chip .pct { display: block; font-size: 15px; font-weight: 700; color: var(--ink-deep); }
.tip-chip .amt { display: block; font-size: 11px; font-weight: 500; color: var(--ink-faint); margin-top: 2px; }
.tip-chip:hover { border-color: var(--accent); }
.tip-chip.selected { border-color: var(--accent); background: var(--accent-wash); }
.tip-chip.selected .pct, .tip-chip.selected .amt { color: var(--accent); }

.tip-custom {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 14px; background: var(--surface-raised); margin-bottom: 14px;
}
.tip-custom input[type="text"] {
  border: none; outline: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-deep);
  background: transparent; width: 100%; padding: 0;
}
.tip-custom .currency-prefix { font-weight: 600; color: var(--ink-faint); }

.tip-total-line { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--ink-soft); }
.tip-total-line.grand { font-size: 15px; font-weight: 700; color: var(--ink-deep); }

/* ---- Forms ---- */
label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
input, select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
textarea { resize: vertical; min-height: 76px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field { margin-bottom: 14px; }

/* ---- Sign-in / create-account tabs (login.php) ---- */
.auth-tabs { display: flex; background: #f0f0f2; border-radius: 999px; padding: 4px; gap: 2px; margin-bottom: 28px; }
.auth-tab { flex: 1; text-align: center; padding: 8px 0; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); cursor: pointer; border: none; background: none; font-family: inherit; }
.auth-tab.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.link-accent { color: var(--accent); font-weight: 600; }

/* ---- Manage-channels modal rows (Admin → Members) ---- */
.chan-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; }
.chan-row .info { flex: 1; min-width: 0; }
.chan-row .name { font-weight: 600; font-size: 13px; }
.chan-row .sub { font-size: 11px; color: var(--ink-faint); }
.chan-row select { padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 11.5px; font-family: inherit; background: #fff; color: var(--ink); flex-shrink: 0; }
.chan-row.inactive { opacity: 0.6; }
.toggle { width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; flex-shrink: 0; cursor: pointer; border: none; padding: 0; appearance: none; }
.toggle.on { background: var(--accent); }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.toggle.on .knob { left: 18px; }
.note { font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; margin: 2px 0 0; }

/* ---- Modals ---- */
.modal-layer {
  position: fixed;
  inset: 0;
  background: rgba(26, 31, 54, 0.45);
  backdrop-filter: blur(2px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px 40px;
  z-index: 50;
}
.modal-layer.open { display: flex; }
.modal {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 30px 60px -20px hsl(var(--shadow-color) / 0.35);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.modal-head { padding: 22px 26px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-head h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.modal-head p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.modal-close { appearance: none; border: none; background: var(--border-soft); color: var(--ink-soft); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.modal-body { padding: 20px 26px; overflow-y: auto; }
.modal-foot { padding: 16px 26px 22px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---- Notices ---- */
.notice, .notice-box, .fee-note, .ref-highlight { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); font-size: 12px; line-height: 1.5; }
.notice svg, .notice-box svg, .fee-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.notice-amber, .notice-box, .fee-note, .ref-highlight { background: var(--warn-wash); border: 1px solid var(--warn-border); color: #7a5610; }
.notice-amber strong, .notice-box strong { color: var(--ink); }
.notice-neutral { background: var(--border-soft); color: var(--ink-soft); }
.notice-neutral strong { color: var(--ink); }
.notice-box .k, .ref-highlight .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--warn); font-weight: 700; margin-bottom: 4px; }
.ref-highlight { flex-direction: column; align-items: stretch; }
.ref-highlight .top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ref-highlight .top-row .btn { padding: 4px 10px; font-size: 11px; }
.ref-highlight .v { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-deep); margin-top: 2px; }
.ref-highlight .instr { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--warn-border); }
.copy-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; font-size: 11px; font-weight: 600; color: var(--ink-soft); cursor: pointer; flex-shrink: 0; }
.copy-btn svg { width: 12px; height: 12px; }
.copy-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.copy-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: none; background: none; color: var(--ink-faint); cursor: pointer; flex-shrink: 0; }
.copy-icon:hover { background: var(--border-soft); color: var(--ink-soft); }

/* ---- Utility ---- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 20px; }
.stat-card .label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.stat-card .value { font-size: 23px; font-weight: 600; color: var(--ink-deep); font-variant-numeric: tabular-nums; }
.stat-card .value-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 23px; font-weight: 600; }
.stat-card .value-row + .value-row { margin-top: 2px; font-size: 16px; color: var(--ink-soft); }

.bell-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--panel); color: #fff; }
.bell-badge svg { width: 16px; height: 16px; }
.bell-count { position: absolute; top: -5px; right: -5px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--ink-faint); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; }
}

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    position: static; /* back in normal flow — a horizontal top strip, not a fixed side rail */
    width: 100%;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar nav { flex-direction: row; }
  .sidebar .channels-list { display: none; }
  .sidebar .footer { display: none; }
  .app-main { margin-left: 0; }
}

@media (max-width: 600px) {
  .topbar { padding: 14px 16px; gap: 10px; }
  .topbar .wordmark { font-size: 14px; }
  .topbar nav { gap: 12px; font-size: 12px; }
  .topbar nav span { max-width: 46vw; }

  .app-main { padding: 20px 14px 70px; }
  .card-head, .card-body, .card-foot { padding-left: 14px; padding-right: 14px; }
  .modal-head, .modal-body, .modal-foot { padding-left: 14px; padding-right: 14px; }

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

  .card-head { flex-direction: column; align-items: flex-start; }
  .card-head-controls { width: 100%; justify-content: flex-start; }

  .table-wrap::after, .table-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--surface));
  }
}

/* ---- Bigger, easier-to-hit selection checkboxes (videos-ready lists) ---- */
.video-check-box {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.video-check-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px; /* enlarges the actual clickable hit area beyond the box itself */
  cursor: pointer;
}

/* ---- Discreet "think we made a mistake" trigger — plain, small, not a
   heavy call-to-action; the real content lives in the modal it opens. ---- */
.discreet-trigger {
  background: none;
  border: none;
  padding: 0;
  font-size: 11.5px;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.discreet-trigger:hover { color: var(--ink-soft); }

/* ---- Notifications dropdown (top bar) ---- */
.notif-wrap { position: relative; }
.notif-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  z-index: 40;
}
.notif-panel.open { display: block; }
.notif-panel .notif-head { padding: 12px 16px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--border); }
.notif-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); text-decoration: none; color: inherit; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--border-soft); }
.notif-item .notif-title { font-size: 12.5px; font-weight: 600; color: var(--ink-deep); }
.notif-item .notif-meta { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.notif-empty { padding: 24px 16px; text-align: center; font-size: 12.5px; color: var(--ink-faint); }

/* ---- Score badge (video performance, YouTube-style X/10) ---- */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--accent-wash);
  color: var(--accent);
}
.score-badge.score-low { background: var(--danger-wash); color: var(--danger); }
.score-badge.score-high { background: #e6f4ea; color: #1e7e34; }

/* ---- Back link ---- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 14px;
}
.back-link:hover { color: var(--ink-deep); }

.tab-btn.active { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }

/* ---- "Pay now" method selector (single button opens this 3-option modal) ----
   Redesigned from a vertical list of rows to a top segmented control (same
   pill-tab pattern as .auth-tabs/.auth-tab on the sign-in page) with the
   chosen method's details/action shown below — see lwb_render_pay_card()
   in includes/tips.php. */
.pay-method-tabs { display: flex; background: #f0f0f2; border-radius: 999px; padding: 4px; gap: 2px; margin-bottom: 18px; }
.pay-method-tab { flex: 1; text-align: center; padding: 8px 0; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); cursor: pointer; border: none; background: none; font-family: inherit; }
.pay-method-tab.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

.pay-amount-line { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 2px 18px; }
.pay-amount-line .label { font-size: 12px; color: var(--ink-faint); }
.pay-amount-line .price { font-size: 20px; font-weight: 700; color: var(--ink-deep); }

.pay-method-panel { display: none; }
.pay-method-panel.active { display: block; }

.pay-method-intro { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; margin-bottom: 16px; }
.pay-method-intro .icon { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--accent-wash); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pay-method-intro .title { font-size: 13.5px; font-weight: 600; color: var(--ink-deep); margin-bottom: 2px; }
.pay-method-intro .desc { font-size: 11.5px; color: var(--ink-faint); }