/* ==========================================================================
   FileHost — custom lightweight CSS
   No frameworks. Design tokens + components. Light & dark via [data-theme].
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #101623;
  --muted: #5b6472;
  --border: #e3e8ef;
  --primary: #315efb;
  --primary-ink: #ffffff;
  --primary-soft: #e8edff;
  --accent: #0eb89d;
  --accent-soft: #dcf7f1;
  --warning: #d97706;
  --warning-soft: #fef3e2;
  --danger: #dc2626;
  --success: #12805c;
  --success-soft: #d1fae5;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --danger-soft: #fdeaea;
  --shadow: 0 1px 2px rgb(16 22 35 / .05), 0 4px 16px rgb(16 22 35 / .06);
  --shadow-lg: 0 8px 40px rgb(16 22 35 / .14);
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-w: 250px;
  --topbar-h: 60px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --grad: linear-gradient(120deg, #315efb, #0eb89d);
}

[data-theme="dark"] {
  --bg: #0b0e16;
  --surface: #131826;
  --surface-2: #1a2133;
  --ink: #e8ecf4;
  --muted: #8b94a7;
  --border: #232c40;
  --primary: #5b7dff;
  --primary-soft: #1c2647;
  --accent: #2dd4b8;
  --accent-soft: #10312c;
  --warning: #f59e0b;
  --warning-soft: #33240c;
  --danger: #f87171;
  --danger-soft: #3a1414;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 4px 16px rgb(0 0 0 / .25);
  --shadow-lg: 0 8px 40px rgb(0 0 0 / .5);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  transition: background-color .2s ease, color .2s ease;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
[x-cloak] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Utility ---------- */
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: var(--mono); font-size: .85em; }
.num { font-variant-numeric: tabular-nums; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; } .mb-1 { margin-bottom: .5rem; }
.mt-2 { margin-top: 1rem; } .mb-2 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; align-items: center; gap: .75rem; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.grid { display: grid; gap: 1rem; }
/*
 * Column counts adapt to the space available rather than the screen size,
 * so a grid inside a narrow card behaves as well as one across the page.
 * Nothing per-page is needed: two cards sit side by side while they fit,
 * then drop to one.
 */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 700px)  { .grid-2, .grid-4 { grid-template-columns: 1fr; } }
.text-center { text-align: center; }
.text-right { text-align: right; }
.hide-mobile { display: initial; }
@media (max-width: 800px) { .hide-mobile { display: none !important; } }

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.05rem; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: var(--grad);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .95rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem 1.05rem; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; font-size: .9rem; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-outline:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: .35rem .7rem; font-size: .82rem; }
.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon { padding: .5rem; border-radius: var(--radius-sm); background: none; border: 0; color: var(--muted); cursor: pointer; display: inline-flex; }
.btn-icon:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-body { padding: 1.25rem; }
.card-header {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
}
.card-header h2, .card-header h3 { margin: 0; }
.card-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); }

/* ---------- Stat cards ---------- */
.stat .card-body { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; }
.stat-body { min-width: 0; flex: 1 1 auto; }
.stat-footer { margin-top: .4rem; }
.stat-footer .progress { height: 5px; }
.stat-usage {
  display: flex; justify-content: space-between; gap: .4rem;
  margin-top: .3rem; font-size: .72rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat-icon {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--primary-soft); color: var(--primary);
}
.stat-icon.accent { background: var(--accent-soft); color: var(--accent); }
.stat-icon.warning { background: var(--warning-soft); color: var(--warning); }
.stat-icon.danger { background: var(--danger-soft); color: var(--danger); }
.stat-label { font-size: .74rem; color: var(--muted); margin: 0; line-height: 1.3; }
.stat-value {
  /* Deliberately one size on every screen so the four cards read as a set. */
  font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; margin: 0;
  font-variant-numeric: tabular-nums; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .01em;
}
.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-success { background: var(--accent-soft); color: var(--accent); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-muted { background: var(--surface-2); color: var(--muted); }

/* ---------- Alerts ---------- */
.alert { padding: .8rem 1rem; border-radius: var(--radius-sm); font-size: .9rem; border: 1px solid transparent; margin-bottom: 1rem; }
.alert-success { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.alert-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.alert-info { background: var(--primary-soft); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }

/* ---------- Forms ---------- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .35rem; }
.field .hint { font-size: .78rem; color: var(--muted); margin-top: .3rem; }
.field .error { font-size: .78rem; color: var(--danger); margin-top: .3rem; }
.input, .select, .textarea {
  width: 100%; padding: .55rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .92rem;
  transition: border-color .15s ease;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.textarea { min-height: 110px; resize: vertical; }
.checkbox { display: flex; align-items: flex-start; gap: .5rem; font-size: .88rem; cursor: pointer; }
.checkbox input { width: 16px; height: 16px; margin-top: .15rem; accent-color: var(--primary); }

/* Toggle switch — full-width state bar: green when on, red when off. */
.switch-title { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .35rem; }
.switch {
  display: block; cursor: pointer; user-select: none; -webkit-user-select: none;
  width: 220px; max-width: 100%; flex: 0 0 auto;
}
.switch input { position: absolute; opacity: 0; }
.switch-bar {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 34px; border-radius: 6px; overflow: hidden;
  background: #cb1f2f; color: #ffffff; font-weight: 700; font-size: .88rem;
  transition: background-color .15s ease;
}
.switch-knob {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: 15px;
  border-radius: 4px; background: #16181d; transition: left .15s ease;
}
.switch input:checked + .switch-bar { background: #23a63c; }
.switch input:checked + .switch-bar .switch-knob { left: calc(100% - 19px); }
.switch-on { display: none; }
.switch input:checked + .switch-bar .switch-on { display: block; }
.switch input:checked + .switch-bar .switch-off { display: none; }
.switch input:focus-visible + .switch-bar { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700; padding: .7rem 1rem;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .actions { text-align: right; white-space: nowrap; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.empty-icon {
  width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: 14px;
  background: var(--surface-2); display: grid; place-items: center; font-size: 1.4rem;
}
.empty h3 { color: var(--ink); }

/* ---------- Dropdown ---------- */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: .4rem;
}
.dropdown-item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .5rem .65rem; border-radius: 6px; border: 0; background: none;
  font: inherit; font-size: .88rem; color: var(--ink); cursor: pointer; text-align: left;
}
.dropdown-item:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-divider { height: 1px; background: var(--border); margin: .35rem 0; }

/* ---------- Modal ---------- */
/*
 * The overlay scrolls, and aligns to the top rather than the centre once
 * the dialog is taller than the window. Centring a tall dialog pushes its
 * first and last rows off-screen with no way to reach them, which reads
 * as a frozen page.
 */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgb(8 11 18 / .55);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 1.5rem 1rem; backdrop-filter: blur(2px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.modal {
  width: 100%; max-width: 480px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  /* Never taller than the window: the body scrolls inside instead. */
  max-height: calc(100vh - 3rem);
  display: flex; flex-direction: column;
  margin: auto 0;
}
.modal > .card-header, .modal > .card-footer { flex: 0 0 auto; }
/*
 * The body scrolls only when it has to.
 *
 * overflow-y: auto on a box whose content lands exactly on its own height
 * draws a scrollbar on some platforms and not others — a short dialog with
 * two lines and two buttons was showing one on desktop and not on a phone.
 * Nothing here is a scrolling region until the dialog is taller than the
 * screen, which is what the max-height above is for.
 */
.modal > .card-body { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }

/* A confirmation is a sentence and two buttons: never a scrolling region. */
/*
 * A confirmation is short and must never scroll.
 *
 * The :has() version of this rule did nothing in browsers that lack it,
 * so the scrolling region underneath drew a track on a dialog holding two
 * lines of text. The class is set by the component instead, which every
 * browser understands.
 */
.modal > .card-body:has(> .confirm) { overflow-y: visible; }
.modal > .card-body-fit { overflow: visible; }


@media (max-width: 520px) {
  .modal-overlay { padding: .75rem; }
  .modal { max-height: calc(100vh - 1.5rem); }
}
.modal-lg { max-width: 680px; }

/* ---------- Panel layout (admin + user) ---------- */
.panel { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 90;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: transform .2s ease;
}
.sidebar-head { height: var(--topbar-h); display: flex; align-items: center; padding: 0 1.1rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: .9rem .7rem; scrollbar-width: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.nav-section { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: .9rem .5rem .35rem; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: .65rem;
  padding: .55rem .65rem; margin-bottom: 2px; border-radius: var(--radius-sm);
  color: var(--muted); font-size: .9rem; font-weight: 500;
}
.nav-link svg { width: 18px; height: 18px; flex: 0 0 auto; }
.nav-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav-link.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-link.active::before {
  content: ""; position: absolute; left: -0.7rem; top: 20%; bottom: 20%; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--grad);
}
.sidebar-foot { padding: .9rem 1.1rem; border-top: 1px solid var(--border); font-size: .78rem; color: var(--muted); flex: 0 0 auto; }

.topbar {
  position: sticky; top: 0; z-index: 80; height: var(--topbar-h);
  margin-left: var(--sidebar-w);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
}
.topbar-search { flex: 1 1 auto; max-width: 420px; position: relative; }
.topbar-search .input { padding-left: 2.2rem; background: var(--surface-2); border-color: transparent; }
.topbar-search .input:focus { background: var(--surface); border-color: var(--primary); }
.topbar-search svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }

.content { margin-left: var(--sidebar-w); padding: 1.5rem; max-width: 1400px; }
.sidebar-overlay { display: none; }

@media (max-width: 1000px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .topbar, .content { margin-left: 0; }
  .sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 85; background: rgb(8 11 18 / .45); }
  .content { padding: 1rem; }
}

/* ---------- Page header & breadcrumb ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); margin-bottom: .3rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { opacity: .5; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; overflow-x: auto; }
.tab {
  padding: .6rem .9rem; font-size: .88rem; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- Public site ---------- */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; height: 62px; display: flex; align-items: center; gap: 1rem; }
.site-nav { display: flex; gap: .25rem; margin-left: 1rem; }
.site-nav a { padding: .45rem .7rem; border-radius: var(--radius-sm); color: var(--muted); font-size: .9rem; font-weight: 500; }
.site-nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.site-nav a.active { color: var(--primary); }
@media (max-width: 800px) { .site-nav { display: none; } }

.hero {
  position: relative; text-align: center; padding: 5rem 1.25rem 4rem; overflow: hidden;
  background-image: radial-gradient(color-mix(in srgb, var(--muted) 22%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero::after {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: min(720px, 90%); height: 3px; background: var(--grad); border-radius: 999px; opacity: .9;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -.03em; margin-bottom: .75rem; }
.hero h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { max-width: 560px; margin: 0 auto 1.75rem; color: var(--muted); font-size: 1.05rem; }

.section { max-width: 1100px; margin: 0 auto; padding: 3rem 1.25rem; }
.section-narrow { max-width: 760px; }
.feature { padding: 1.4rem; }
.feature-icon {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); margin-bottom: .8rem; font-size: 1.1rem;
}




.site-footer a:hover { color: var(--primary); }

/* ---------- Auth & installer shells ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .brand { justify-content: center; margin-bottom: 1.5rem; }
.installer-card { max-width: 640px; }
.steps { display: flex; gap: .35rem; margin-bottom: 1.5rem; }
.step-dot { height: 5px; flex: 1; border-radius: 999px; background: var(--border); }
.step-dot.done { background: var(--grad); }

/* ---------- FAQ ---------- */
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: .6rem; }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem; background: none; border: 0; font: inherit; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: left;
}
.faq-a { padding: 0 1.1rem .9rem; color: var(--muted); font-size: .92rem; }

/* ---------- Error pages ---------- */
.error-wrap { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 1.5rem; }
.error-code { font-size: 5rem; font-weight: 800; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: .5rem; }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--border); border: 0; margin: 1.25rem 0; }
.kbd { font-family: var(--mono); font-size: .78rem; background: var(--surface-2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: .1rem .4rem; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; flex: 0 0 auto; }
.progress { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress-bar { height: 100%; border-radius: 999px; background: var(--grad); }
.upload-zone {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 3rem 1.5rem;
  text-align: center; color: var(--muted); background: var(--surface-2);
  transition: border-color .15s ease;
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--primary); }
.check-ok { color: var(--accent); font-weight: 700; }
.check-fail { color: var(--danger); font-weight: 700; }

/* Sidebar toggle button — mobile: off-canvas open, desktop: collapse. */
.menu-btn { display: inline-flex; }

/* ---------- Desktop sidebar collapse ---------- */
@media (min-width: 1001px) {
  .panel.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  .panel.sidebar-collapsed .topbar,
  .panel.sidebar-collapsed .content { margin-left: 0; }
}

/* ---------- Sidebar nav groups (drop-downs) ---------- */
.nav-group-btn {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
}
.nav-group-btn .chev { margin-left: auto; transition: transform .15s ease; }
.nav-group-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-sub { padding-left: 1.55rem; margin: 1px 0 3px; }
.nav-sub .nav-link { padding: .42rem .6rem; font-size: .86rem; }


/* ---------- Color manager ---------- */
.color-swatch {
  width: 44px; height: 36px; padding: 2px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); cursor: pointer;
}


/* ---------- Toasts ---------- */
.toasts {
  position: fixed; right: 1rem; top: calc(var(--topbar-h) + 1rem); z-index: 200;
  display: flex; flex-direction: column; gap: .5rem; max-width: 340px; width: calc(100% - 2rem);
}
.toast {
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: .7rem .9rem; font-size: .88rem;
  animation: toast-in .18s ease;
}
.toast-success { border-left-color: #23a63c; }
.toast-danger  { border-left-color: #cb1f2f; }
.toast-info    { border-left-color: var(--primary); }
.toast-warning { border-left-color: #d97706; }
.toast .btn-icon { margin-left: auto; padding: .1rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }


/* ---------- Form polish ---------- */
.form-actions { display: flex; align-items: center; gap: .75rem; margin-top: .25rem; flex-wrap: wrap; }
.card + .card { margin-top: 1rem; }
.grid > .card + .card { margin-top: 0; }
.field:last-child { margin-bottom: 0; }

/* ---------- Upload manager ---------- */
.upload-row { padding: .8rem 0; border-bottom: 1px solid var(--border); }
.upload-row:last-child { border-bottom: 0; }
.upload-row .error { color: var(--danger); }

/* ---------- Storage provider pages ---------- */
.provider-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border); color: var(--primary);
}
.provider-hero {
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--border); border-radius: 10px;
  padding: 2.2rem 1rem; margin-bottom: 1.1rem;
}
.provider-logo-lg { width: 74px; height: 74px; border-radius: 14px; }

/* Action menus escape scroll containers (file manager, provider tables) */
/*
 * Held invisible until it has been placed.
 *
 * It has to be in the layout to be measured, but painting it before the
 * script has moved it shows it in the corner for one frame — the blink on
 * a first press, when there is no cached layout to reuse.
 */
.dropdown-menu-fixed {
  position: fixed; top: 0; left: 0; right: auto; z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
}
.dropdown-menu-fixed.is-placed { opacity: 1; pointer-events: auto; }

/* ---------- Upload page: tabs, staged list, remote links ---------- */
.upload-tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--border); margin-bottom: 1.1rem; }
.upload-tab {
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--muted); padding: .6rem .1rem; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: -1px;
}
.upload-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.upload-tab:disabled { opacity: .45; cursor: not-allowed; }

.staged-list { padding-top: .25rem; }
.staged-actions { display: flex; justify-content: center; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.staged-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.staged-item:last-of-type { border-bottom: 0; }

.remote-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; }
.remote-input {
  flex: 1 1 auto; min-width: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .65rem 1.1rem; color: var(--ink); font: inherit;
}
.remote-input:focus { outline: none; border-color: var(--primary); }
.remote-remove {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.remote-remove:hover { color: var(--danger); border-color: var(--danger); }

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover:not(:disabled) { filter: brightness(1.06); }
.btn-pill { border-radius: 999px; padding: .7rem 2rem; }

/* ---------- Mobile responsiveness ---------- */
@media (max-width: 700px) {
  .upload-zone { padding: 2rem 1rem; }
  .upload-zone .form-actions { flex-direction: column; align-items: stretch; }
  .upload-zone .form-actions .btn { width: 100%; text-align: center; justify-content: center; }
  .upload-tabs { gap: .9rem; }
  .upload-tab { font-size: .88rem; }
  .remote-row { flex-wrap: wrap; }
  .remote-input { flex-basis: 100%; }
  .remote-remove { margin-left: auto; }
  .staged-item { flex-wrap: wrap; }
  .staged-item .btn-icon { margin-left: auto; }
  .staged-actions { flex-direction: column; align-items: stretch; }
  .staged-actions .btn { width: 100%; justify-content: center; }
  .upload-row .flex-between { align-items: flex-start; }
  .card-header.flex-between { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .card-header.flex-between .btn { width: 100%; }
}

/* ---------- File manager bulk selection ---------- */
.bulk-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .7rem 1rem; margin-bottom: .9rem;
}
.bulk-bar-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hidden-form { display: none; }
.check-col { width: 38px; text-align: center; }
.check-col input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.row-selected { background: var(--surface-2); }

@media (max-width: 700px) {
  .bulk-bar { flex-direction: column; align-items: stretch; }
  .bulk-bar-actions { justify-content: stretch; }
  .bulk-bar-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Remote upload queue ---------- */
.remote-item { padding: .8rem 0; border-bottom: 1px solid var(--border); }
.remote-item:last-child { border-bottom: 0; }
.remote-stage-active { color: var(--primary); font-weight: 600; }
.remote-stage-done   { color: var(--accent);  font-weight: 600; }
.remote-stage-failed { color: var(--danger);  font-weight: 600; }

/* Indeterminate bar: no percentage, just motion */
.remote-track {
  position: relative; height: 4px; margin-top: .6rem; overflow: hidden;
  background: var(--surface-2); border-radius: 999px;
}
.remote-track-bar {
  position: absolute; top: 0; left: 0; height: 100%; width: 35%;
  border-radius: 999px; background: var(--primary);
  animation: remote-slide 1.2s ease-in-out infinite;
}
@keyframes remote-slide {
  0%   { left: -35%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .remote-track-bar { animation: none; width: 100%; opacity: .5; }
}

/* Queue card header: title left, action right; stacks cleanly on mobile */
.card-header.flex-between h3 { margin: 0; }
.card-header.flex-between .btn { white-space: nowrap; }

@media (max-width: 700px) {
  .remote-item .flex-between { align-items: flex-start; }
  .remote-item .btn-icon { margin-left: auto; }
  .upload-tab:disabled { opacity: .4; }
}

/* ---------- Admin settings ----------
   Cards flow into two columns and pack tightly: a short card no longer
   leaves a gap waiting for the tallest card in its row. */
.settings-grid {
  column-count: 2;
  column-gap: 1rem;
}
.settings-card {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.settings-card-head {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.settings-card-head h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.settings-card-body { padding: 1.1rem; }
.settings-card-body .field:last-of-type { margin-bottom: 0; }

/* Page name in the top bar */
.topbar-title {
  font-size: 1.02rem; font-weight: 700; margin: 0 0 0 .35rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw;
}

/* Searchable timezone picker */
.tz-list {
  position: absolute; z-index: 40; margin-top: .25rem;
  width: 100%; max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.tz-option {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; font: inherit; color: var(--ink);
  padding: .45rem .8rem;
}
.tz-option:hover { background: var(--surface-2); color: var(--primary); }
.field { position: relative; }

@media (max-width: 1100px) {
  .settings-grid { column-count: 1; }
}
@media (max-width: 700px) {
  .topbar-title { font-size: .95rem; max-width: 40vw; }
  .settings-grid { gap: .75rem; }
}

/* Branding image previews */
.brand-preview {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem .75rem; margin-bottom: .6rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
}
.brand-preview img {
  max-height: 44px; max-width: 160px; object-fit: contain;
  background: #fff; border-radius: 6px; padding: 3px;
}
.brand-preview .grow { min-width: 0; }
.brand-preview .mono { word-break: break-all; }

/* Share dialog: link field with an attached copy button */
.share-row { display: flex; gap: .5rem; align-items: stretch; }
.share-row .input { flex: 1 1 auto; min-width: 0; }
.share-row .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .share-row { flex-direction: column; }
  .share-row .btn { width: 100%; justify-content: center; }
}

/* Action buttons that used to sit in the page header. The page name now
   lives in the top bar, so only the buttons remain. */
.page-actions {
  display: flex; justify-content: flex-end; align-items: center;
  gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.page-actions:empty { display: none; }

/* Card header with no title: keep the actions right-aligned without an
   empty heading taking up space. */
.card-header h3:empty { display: none; }

/* Bulk bar sits inside the card, directly above the table */
.settings-card .bulk-bar,
.card-body > .bulk-bar { margin: 0 0 .9rem; }

@media (max-width: 700px) {
  /* The sidebar already shows where you are, so the name is redundant
     on a narrow screen and crowds the controls. */
  .topbar-title { display: none; }
  .page-actions { justify-content: stretch; }
  .page-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Uploaded site logo, used in place of the letter mark */
.brand-logo { height: 30px; width: auto; max-width: 150px; object-fit: contain; display: block; }

/* Uploaded favicon / logo thumbnail with a delete control on the image */
.brand-thumb {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
  min-width: 64px; min-height: 56px;
}
.brand-thumb img { max-height: 40px; max-width: 60px; object-fit: contain; display: block; }
.brand-thumb-wide { min-width: 120px; }
.brand-thumb-wide img { max-width: 150px; }
.brand-thumb-remove {
  position: absolute; top: -8px; right: -8px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--danger);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.brand-thumb-remove:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ---------- CPM Manager ---------- */
.flag-col { width: 56px; }

/* Flag glyphs are taller than the text around them; a cramped line-height
   clips the top and bottom, so give them room and an emoji-capable font. */
.flag-emoji {
  font-size: 1.45rem;
  line-height: 1.6;
  display: inline-block;
  vertical-align: middle;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Twemoji Mozilla", "EmojiOne Color", sans-serif;
  font-variant-emoji: emoji;
}
.flag-img {
  /* contain, never cover: cover crops the sides off a flag to fill the box */
  height: 22px; width: 34px; object-fit: contain; object-position: center;
  border-radius: 3px; display: inline-block; vertical-align: middle;
  background: transparent;
}
.tz-option .flag-emoji { margin-right: .45rem; font-size: 1.2rem; line-height: 1.4; }

/* ---------- Members ---------- */
.filter-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.filter-bar .topbar-search { min-width: 200px; }
.user-cell { display: flex; align-items: center; gap: .65rem; }
.user-cell .avatar { flex: 0 0 auto; }

@media (max-width: 700px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .input, .filter-bar .btn { width: 100%; max-width: none !important; }
}

/* Member edit: identity column beside the account itself */
.member-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; align-items: start; }
.member-aside { position: sticky; top: 1rem; }
.member-main { min-width: 0; }

.member-avatar { display: flex; justify-content: center; margin-bottom: 1rem; }
.avatar-xl {
  width: 88px; height: 88px; font-size: 2rem; border-radius: 50%;
  display: grid; place-items: center;
}

.member-facts { margin: 0; display: grid; gap: .55rem; }
.member-facts > div { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.member-facts dt { color: var(--muted); font-size: .84rem; margin: 0; }
.member-facts dd { margin: 0; font-weight: 600; font-size: .88rem; text-align: right; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }

/* Section list: one panel, hairline dividers, no gaps between rows */
.member-nav {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.member-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .9rem;
  font-weight: 600; font-size: .88rem;
  line-height: 1.35;
  border-bottom: 1px solid var(--border);
}
.member-nav-item:last-child { border-bottom: 0; }
.member-nav-item.active { background: var(--primary); color: #fff; }
.member-nav-item.disabled { color: var(--muted); cursor: default; }

/* Entries that actually go somewhere */
a.member-nav-item { color: var(--ink); text-decoration: none; }
a.member-nav-item:hover { background: var(--surface-2); color: var(--primary); }

/* Status strip pills */
.status-pill {
  padding: .7rem 1rem; border-radius: var(--radius);
  text-align: center; font-weight: 700; color: #fff;
}
.status-pill.is-on  { background: var(--success, #12805c); }
.status-pill.is-off { background: var(--danger, #b3261e); }

@media (max-width: 900px) {
  .member-layout { grid-template-columns: 1fr; }
  .member-aside { position: static; }
  .member-nav { flex-direction: row; flex-wrap: wrap; }
  .member-nav-item { flex: 1 1 auto; justify-content: center; }
}

/* Member edit: switch strip and delete control */
.switch-row form { display: flex; flex-direction: column; }
.switch-row .status-pill { width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.switch-row .status-pill:hover { filter: brightness(1.08); }
.switch-row .hint { margin-top: .4rem; }

.btn-danger-soft {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.btn-danger-soft:hover { background: var(--danger); color: #fff; }
.btn-block { width: 100%; justify-content: center; }

@media (max-width: 700px) {
  /* Switches stay side by side; see the two-up rules above. */
  .member-facts dd { max-width: 60vw; }
  .table-wrap { overflow-x: auto; }
}

/* Input with a unit inside the field */
.input-suffix { position: relative; display: block; }
.input-suffix .input { width: 100%; padding-right: 4.2rem; }
.input-suffix-unit {
  position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .85rem; font-weight: 600;
  pointer-events: none; white-space: nowrap;
}

/* Storage usage panel */
.usage-panel {
  /* Sits in a grid cell beside a field, so it lines up with the input
     rather than the label above it. */
  margin-top: 1.55rem; padding: .75rem .9rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-self: start;
}
.usage-panel-label {
  display: block; font-size: .8rem; color: var(--muted);
  margin-bottom: .5rem;
}
.usage-panel-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; margin-top: .45rem; flex-wrap: wrap;
}
.usage-panel-breakdown { font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 700px) {
  .usage-panel { margin-top: .25rem; }
}

@media (max-width: 700px) {
  .usage-panel-head { flex-direction: column; gap: .2rem; }
  .input-suffix .input { padding-right: 3.6rem; }
}

/* ==========================================================================
   Pagination — styled once, used by every {{ $items->links() }}
   ========================================================================== */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-top: 1rem;
}
.pagination-summary { font-size: .82rem; color: var(--muted); }
.pagination-pages { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.page-link {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 .5rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font-size: .85rem; font-weight: 600; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.page-link:hover { background: var(--surface-2); color: var(--primary); }
.page-link.is-current { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-link.is-disabled { opacity: .4; pointer-events: none; }
.page-link.is-gap { border: 0; background: none; min-width: 20px; }

/* ==========================================================================
   Stop awkward wrapping — labels, buttons and badges break mid-word
   ========================================================================== */
.btn, .badge, .page-link, .status-pill { white-space: nowrap; }
.table th, .table td.actions, .table td.num { white-space: nowrap; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stat-label, .usage-panel-label, .member-facts dt { white-space: nowrap; }

/*
 * Table cells never break mid-word. The wrapper scrolls sideways instead,
 * which is the only readable option on a narrow screen — a column squeezed
 * to 40px turns "Redirect Download" into a vertical stack of letters.
 */
.table th, .table td { white-space: nowrap; overflow-wrap: normal; word-break: normal; }

/* Opt in where wrapping genuinely helps, e.g. a long description column. */
.table th.wrap, .table td.wrap { white-space: normal; overflow-wrap: break-word; }

/* Long unbroken strings outside tables: break at the boundary, not mid-word. */
.mono, .member-facts dd { overflow-wrap: break-word; }

/* ==========================================================================
   Mobile — admin and user panels
   ========================================================================== */
/* Two-line cells: each line stays on its own line, neither breaks apart. */
.user-cell .grow > * { white-space: nowrap; }
.table td .small.muted { white-space: nowrap; }

@media (max-width: 780px) {
  .card-header { flex-wrap: wrap; gap: .5rem; }
  .card-header .btn { flex: 1 1 auto; justify-content: center; }

  .pagination { justify-content: center; }
  .pagination-summary { width: 100%; text-align: center; }
  .pagination-pages { justify-content: center; width: 100%; }

  /* Comfortable tap targets throughout */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .page-link { min-width: 38px; height: 38px; }
  .dropdown-item { padding-top: .6rem; padding-bottom: .6rem; }

  /* Cells keep their natural width and the wrapper scrolls. */
  .table-wrap { margin-inline: calc(-1 * var(--card-pad, 1rem)); padding-inline: var(--card-pad, 1rem); }

  .filter-bar > * { width: 100%; }
  .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .form-actions .btn { width: 100%; justify-content: center; }

  /*
   * Two across on a phone rather than one. auto-fit would drop to a single
   * column at this width, so the count is pinned instead — the minmax(0,…)
   * lets each column shrink below its content rather than overflowing.
   */
  .grid-2, .grid-3, .grid-4,
  .settings-card-body .grid-2,
  .settings-card-body .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }

  /* The three account switches stay on one line. */
  .switch-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .switch-row .status-pill { padding: .6rem .3rem; font-size: .78rem; }
  .switch-row .small.muted { font-size: .7rem; }
  .switch-row .hint { display: none; }
}

@media (max-width: 520px) {
  /* Same arrangement as on a desktop: icon centred at the left, with the
     label above the value beside it. Only the spacing tightens. */
  .stat .card-body { gap: .55rem; padding: .7rem .7rem; }
  .stat-icon { width: 32px; height: 32px; border-radius: 9px; }
  .stat-icon svg { width: 16px; height: 16px; }
  .stat-label { font-size: .72rem; }
  .stat-usage { font-size: .66rem; gap: .25rem; }
  .avatar-xl { width: 68px; height: 68px; font-size: 1.6rem; }

  .switch-row .status-pill { font-size: .7rem; padding: .55rem .2rem; }
  .field label { font-size: .78rem; }
  .input-suffix .input { padding-right: 2.9rem; font-size: .85rem; }
  .input-suffix-unit { right: .55rem; font-size: .72rem; }
}

/* A single footer token sits left rather than being pushed apart */
.stat-usage-single { justify-content: flex-start; }

/* ---------- Admin file list ---------- */
.check-col { width: 38px; }
.file-cell { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.file-badge {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--primary-soft); color: var(--primary);
  font-size: .62rem; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; overflow: hidden; padding: 0 2px;
}
.file-name { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 780px) {
  .file-name { max-width: 150px; }
  .file-badge { width: 32px; height: 32px; font-size: .56rem; }
}

/* ==========================================================================
   File statistics
   ========================================================================== */
.file-stat-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.file-stat-name {
  font-size: 1.05rem; font-weight: 800; margin: 0 0 .15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-badge-lg { width: 44px; height: 44px; font-size: .7rem; border-radius: 10px; }

.month-picker { display: flex; align-items: center; gap: .45rem; }
.month-picker .input { width: auto; min-width: 140px; }
.month-picker svg { color: var(--muted); flex: 0 0 auto; }

/* Month totals: two solid panels, deliberately louder than the table */
.metric-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.25rem; border-radius: var(--radius); color: #fff;
}
.metric-downloads { background: #131b6b; }
.metric-earnings  { background: #06a417; }
.metric-icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(255, 255, 255, .16);
}
.metric-label {
  margin: 0 0 .15rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; opacity: .92;
}
.metric-value { margin: 0; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Striped, centred table for the daily rows */
.table-striped tbody tr:nth-child(odd) { background: var(--surface-2); }
.table-centered th, .table-centered td { text-align: center; }
.table-centered th:first-child, .table-centered td:first-child { text-align: left; }
.table tfoot th { border-top: 2px solid var(--border); font-weight: 800; }

@media (max-width: 780px) {
  .file-stat-head { gap: .75rem; }
  .month-picker { width: 100%; }
  .month-picker .input { flex: 1 1 auto; width: 100%; }
  .metric-card { padding: .9rem 1rem; gap: .75rem; }
  .metric-icon { width: 40px; height: 40px; }
  .metric-value { font-size: 1.25rem; }
  .metric-label { font-size: .7rem; }
}

/* Banner shown while a list is narrowed to one subject */
.filter-note {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  padding: .6rem .9rem;
  background: var(--primary-soft); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .88rem;
}

@media (max-width: 640px) {
  .filter-note { align-items: stretch; }
  .filter-note .btn { width: 100%; justify-content: center; }
}

/* Referral rows sit visually under the earning that produced them */
.table tr.is-referral td { background: var(--surface-2); }
.table tr.is-referral td:first-child { box-shadow: inset 3px 0 0 var(--primary); }

/* ---------- Earnings statistics: redirect beside direct ---------- */
.stats-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
}
.stats-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
  padding: .7rem .9rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.stats-section-head h4 { font-size: .95rem; font-weight: 800; }
.stats-section .pad { padding: 1rem .9rem; }
.stats-section .table { margin: 0; }

@media (max-width: 780px) {
  .stats-section-head { padding: .6rem .7rem; }
}

/* ==========================================================================
   Public download pages
   ========================================================================== */
.dl-body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg);
}
.dl-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.dl-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--ink); text-decoration: none; }
/* A column rather than a centred grid: advertisement blocks and the card
   each take their own row at the same width, and an empty block collapses
   without dragging the rest out of place. */
.dl-main {
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0; padding: 2rem 1rem;
}
.dl-footer { padding: 1rem; text-align: center; border-top: 1px solid var(--border); }

.dl-card {
  width: 100%; max-width: 470px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
}
.dl-file { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.dl-file-name {
  font-size: 1.05rem; font-weight: 800; margin: 0 0 .15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dl-steps { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; }
.dl-step {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 800;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border);
}
.dl-step.is-current { background: var(--primary); border-color: var(--primary); color: #fff; }
.dl-step.is-done { background: var(--success, #12805c); border-color: var(--success, #12805c); color: #fff; }

.dl-timer {
  font-size: 3rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--primary);
}
.dl-turnstile { display: flex; justify-content: center; min-height: 70px; }
.dl-player {
  display: grid; place-items: center; gap: .4rem;
  padding: 2rem 1rem; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--muted);
}
.dl-blocked-icon {
  display: inline-grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--danger-soft); color: var(--danger);
}
.btn-lg { padding: .85rem 1.2rem; font-size: 1rem; }
.text-center { text-align: center; }

@media (max-width: 520px) {
  .dl-card { padding: 1.15rem; }
  .dl-timer { font-size: 2.4rem; }
}

/* Two settings cards across, each keeping its own height */
/*
 * Two cards side by side, but only where there is room.
 *
 * The shared grid rule can leave two tracks competing for a narrow
 * viewport, so the columns are stated explicitly at each size rather
 * than left to auto-fit.
 */
.settings-pair {
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .settings-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stacked, the reference card is more useful first */
@media (max-width: 899px) {
  .settings-pair > .pair-primary { order: 2; }
  .settings-pair > .pair-secondary { order: 1; }
}
.settings-pair > .settings-card { margin: 0; display: block; }

/* Toast on the public download pages, top right to match the panel */
/* An explicit display beats the browser's rule for [hidden], so the
   hidden state has to be stated here or the notice is always on screen. */
.dl-toast[hidden] { display: none !important; }

.dl-toast {
  position: fixed; top: 1rem; right: 1rem;
  z-index: 60; display: flex; align-items: center; gap: .5rem;
  max-width: min(92vw, 380px);
  padding: .7rem 1rem; border-radius: var(--radius);
  background: var(--danger); color: #fff;
  font-size: .9rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

/* Full width on a narrow screen so the text never gets squeezed */
@media (max-width: 520px) {
  .dl-toast { top: .65rem; right: .65rem; left: .65rem; max-width: none; }
}

/* Earnings statistics: redirect and direct on one line */
.stats-table thead tr:first-child th { border-bottom: 0; }
.stats-group { text-align: center !important; font-weight: 800; }
.stats-group-alt { background: var(--surface-2); }
.stats-split { border-left: 2px solid var(--border); }
.stats-date { text-align: left !important; white-space: nowrap; }


/* ==========================================================================
   Member CPM plans — one card, plans as tabs
   ========================================================================== */
.plan-tabs {
  display: flex; gap: .35rem; flex-wrap: wrap;
  padding-bottom: .85rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.plan-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); font-size: .86rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.plan-tab:hover { color: var(--primary); border-color: var(--primary); }
.plan-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.plan-tab-name { overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.plan-tab-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success, #12805c); flex: 0 0 auto;
}
.plan-tab.is-active .plan-tab-dot { background: #fff; }

.plan-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.plan-panel-model {
  font-size: .95rem; font-weight: 700; color: var(--ink);
}
.plan-panel-action { margin-left: auto; }
.plan-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .45rem .8rem; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
  font-size: .82rem; font-weight: 800; white-space: nowrap;
}

/* Every country is listed; the list scrolls inside the card. */
/*
 * The card grows with its rows.
 *
 * It used to be capped and scrolled inside itself, which put a second
 * scrollbar on the page and hid most of the table behind it — a list of
 * country rates is meant to be read down, and a box 460px tall showed
 * about eight of them.
 *
 * overflow-x stays: a wide table on a narrow phone still needs to slide
 * sideways, and that is a different thing from being boxed in vertically.
 */
.plan-rates {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.plan-rate-table { margin: 0; font-size: .88rem; }
.plan-rate-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.plan-rate-table td, .plan-rate-table th { padding: .7rem .9rem; }

/* Flag and name read as one label */
.rate-country { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.rate-country-name { overflow: hidden; text-overflow: ellipsis; }
.rate-amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* contain, not cover: cover crops the sides off a flag that is not
   exactly this aspect ratio, which is most uploaded images. */
.plan-rate-table .flag-img {
  width: 26px; height: 20px; object-fit: contain; object-position: center;
  border-radius: 2px; flex: 0 0 auto; background: transparent;
}
.plan-rate-table .flag-emoji {
  width: 26px; text-align: center;
  font-size: 1.2rem; line-height: 1; flex: 0 0 auto;
}

@media (max-width: 640px) {
  .plan-panel-head { gap: .6rem; }
  .plan-panel-action { margin-left: 0; width: 100%; }
  .plan-panel-action .btn, .plan-panel-action .plan-chip { justify-content: center; }
  .plan-tab-name { max-width: 8rem; }
  /* No cap on a phone either — the page scrolls, the card does not. */
  .plan-rate-table td, .plan-rate-table th { padding: .6rem .65rem; }
}

/* ---------- Confirmation dialog ---------- */
/*
 * The dialog is rendered inside the row's actions cell, which keeps its
 * contents on one line so the buttons never wrap. That nowrap is inherited
 * here, and no amount of overflow-wrap can break a line the browser has
 * been told not to break — which is why a long filename pushed the dialog
 * sideways and drew a scrollbar under it.
 */
.confirm {
  white-space: normal;
  min-width: 0;
  text-align: center;
  padding: .25rem 0 0;
}
.confirm-title { margin: .25rem 0 .4rem; font-size: 1.05rem; font-weight: 800; }
/*
 * A filename has no spaces to break at, so a long one pushed the dialog
 * sideways and produced a scrollbar under it. Breaking anywhere keeps the
 * whole name readable inside the box rather than half of it out of view.
 */
.confirm-text { margin: 0 auto; max-width: 34ch; font-size: .88rem; color: var(--muted); line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.confirm-actions {
  display: flex; justify-content: center; gap: .6rem;
  margin-top: 1.35rem; padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.confirm-actions .btn { min-width: 120px; justify-content: center; }

/*
 * Side by side on a phone too.
 *
 * They used to stack below 420px, which put "Yes, delete" under "No" — two
 * full-width buttons in a column, where the destructive one is the easier
 * to hit by accident and the pair reads as a list rather than a choice.
 *
 * They share the row instead: each takes half the width, the minimum is
 * dropped so neither overflows, and long labels wrap inside their own
 * button rather than pushing the other one out.
 */
@media (max-width: 420px) {
  .confirm-actions { gap: .5rem; }

  .confirm-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: .6rem;
    font-size: .86rem;
    white-space: normal;
    line-height: 1.25;
  }
}

/* ==========================================================================
   Member settings — tabs, notices, traffic sources
   ========================================================================== */
.settings-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.settings-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: .88rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.settings-tab:hover { color: var(--primary); border-color: var(--primary); }
.settings-tab.is-active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

/* Banner above and below the sources list */
.notice {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .8rem 1rem; border-radius: var(--radius);
  font-size: .88rem; line-height: 1.5;
}
.notice svg { flex: 0 0 auto; margin-top: .1rem; }
.notice-warning { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.notice-info { background: var(--surface); border: 1px solid #fde68a; color: var(--ink); }
.text-danger { color: var(--danger); }

/* One declared source per row */
.traffic-row { display: flex; gap: .6rem; margin-bottom: .75rem; align-items: stretch; }
.traffic-type { flex: 0 0 200px; }
.traffic-url { position: relative; flex: 1 1 auto; min-width: 0; }
.traffic-url .input { width: 100%; padding-right: 2.6rem; }
.traffic-remove {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 0; border-radius: 6px; background: var(--surface-2);
  color: var(--muted); cursor: pointer;
}
.traffic-remove:hover { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 640px) {
  .settings-tab { flex: 1 1 auto; justify-content: center; padding: .55rem .6rem; font-size: .8rem; }
  .traffic-row { flex-direction: column; gap: .5rem; }
  .traffic-type { flex: 1 1 auto; }
}

/* A field nobody can edit should read that way at a glance */
.input:disabled,
.input[readonly] {
  background: var(--surface-2);
  color: var(--muted);
  border-style: dashed;
  cursor: not-allowed;
  opacity: 1;                 /* browsers grey this out unevenly */
}
.field-locked label { display: flex; align-items: center; gap: .35rem; }
.field-locked label svg { color: var(--muted); }

.back-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; font-weight: 600; }

/* Renaming: the whole name visible, wrapped rather than scrolled */
.rename-box {
  width: 100%; min-height: 5rem; resize: vertical;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .85rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ==========================================================================
   Advertisement slots
   ========================================================================== */
.ad-badge {
  display: inline-block; margin-right: .5rem; padding: .1rem .3rem;
  border-radius: 3px; background: var(--ink); color: #fff;
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  vertical-align: middle;
}
.ad-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.ad-title { margin: 0 0 .15rem; font-size: 1.05rem; font-weight: 800; }
.ad-switch { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; cursor: pointer; }

/* A dark editor, because pasted markup is easier to read against it */
.ad-editor {
  width: 100%; min-height: 22rem; resize: vertical;
  padding: .9rem 1rem; border-radius: var(--radius);
  background: #0f172a; color: #e2e8f0; border: 1px solid #1e293b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem; line-height: 1.6;
  white-space: pre; overflow: auto; tab-size: 2;
}
.ad-editor:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.ad-editor::placeholder { color: #64748b; }

@media (max-width: 640px) {
  .ad-head { gap: .6rem; }
  .ad-switch { width: 100%; justify-content: space-between; }
  .ad-editor { min-height: 16rem; font-size: .8rem; padding: .7rem .8rem; }
}

/* Advertisement containers on the download pages */
.dl-ad { width: 100%; max-width: 470px; margin: 0 auto 1rem; text-align: center; }
.dl-ad:empty { display: none; }
.dl-ad-center { margin: 0 0 1.1rem; max-width: none; }
.dl-ad-bottom { margin: 1rem auto 0; }
.dl-ad img, .dl-ad iframe { max-width: 100%; height: auto; }

@media (max-width: 520px) {
  .dl-ad { margin-bottom: .75rem; }
}

/* ==========================================================================
   Withdrawal methods
   ========================================================================== */
.wm-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

.wm-list { list-style: none; margin: 0; padding: 0; }
.wm-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem .25rem; border-bottom: 1px solid var(--border);
}
.wm-item:last-child { border-bottom: 0; }
.wm-item.is-dragging { opacity: .4; }
.wm-grip { color: var(--muted); cursor: grab; flex: 0 0 auto; }
.wm-grip:active { cursor: grabbing; }
.wm-logo {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-2); overflow: hidden;
  font-size: .75rem; font-weight: 800; color: var(--muted);
}
.wm-logo img { width: 100%; height: 100%; object-fit: contain; }
.wm-name { flex: 1 1 auto; min-width: 0; }
.wm-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

.btn-square {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 8px; cursor: pointer; color: #fff;
}
.btn-square-primary { background: var(--primary); }
.btn-square-danger  { background: var(--danger); }

/* Upload area in the dialog */
.wm-drop {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.25rem; border: 1px dashed var(--border); border-radius: var(--radius);
  cursor: pointer; text-align: center;
}
.wm-drop-current { width: 44px; height: 44px; object-fit: contain; }
.wm-status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; cursor: pointer; padding: .6rem 0; }
.wm-note { min-height: 6rem; resize: vertical; }

/* Member-facing list of methods and minimums */
.pm-list { list-style: none; margin: 0; padding: 0; }
.pm-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .25rem; border-bottom: 1px solid var(--border);
}
.pm-row:last-child { border-bottom: 0; }
.pm-logo {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); overflow: hidden;
  font-size: .65rem; font-weight: 800; color: var(--muted);
}
.pm-logo img { width: 100%; height: 100%; object-fit: contain; }
.pm-name { flex: 1 1 auto; min-width: 0; }
.pm-min { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 640px) {
  .wm-head .btn { width: 100%; justify-content: center; }
  .wm-item { flex-wrap: wrap; gap: .6rem; }
  .wm-name { flex: 1 1 100%; order: 3; }
  .wm-actions { margin-left: auto; }
}

.pm-name-cell { display: inline-flex; align-items: center; gap: .6rem; }

/* Method picker that can show a logo per option */
.pm-select { position: relative; }
.pm-select-button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font-size: .92rem;
  cursor: pointer; text-align: left;
}
.pm-select-button:hover { border-color: var(--primary); }
.pm-select-button svg:last-child { margin-left: auto; color: var(--muted); flex: 0 0 auto; }
.pm-select-value { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }

.pm-select-menu {
  position: absolute; z-index: 30; top: calc(100% + .3rem); left: 0; right: 0;
  max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .25rem;
}
.pm-select-option {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .55rem .6rem; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font-size: .92rem;
  cursor: pointer; text-align: left;
}
.pm-select-option:hover { background: var(--surface-2); color: var(--primary); }

/* Logo upload area */
.wm-drop-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 10px; background: var(--surface-2); color: var(--muted);
}
.wm-drop-name:empty { display: none; }
.wm-drop-name { color: var(--primary); font-weight: 600; }
.wm-drop:hover { border-color: var(--primary); }

/* The dialog's own rows breathe a little more */
.modal .wm-drop { margin-bottom: .25rem; }

/*
 * Grids inside a dialog keep their columns.
 *
 * The dialog is narrower than the auto-fit minimum, so the usual rule
 * collapses a two-column row into one. minmax(0, 1fr) lets each column
 * shrink to fit instead of dropping out.
 */
.modal .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The switch sits level with the input beside it */
.modal .grid-2 .switch { width: 100%; }
.modal .grid-2 .switch-bar { width: 100%; }

@media (max-width: 480px) {
  .modal .grid-2, .modal .grid-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Payouts
   ========================================================================== */
.detail-table th {
  width: 38%; text-align: left; font-weight: 700;
  color: var(--ink); background: transparent; white-space: nowrap;
}
.detail-table td { color: var(--muted); }
.detail-table .amount-strong { color: var(--success); font-weight: 800; }
.wrap-anywhere { overflow-wrap: anywhere; }

.btn-block { width: 100%; justify-content: center; }
.btn-success {
  background: var(--success, #12805c); color: #fff; border: 0;
  padding: .8rem 1rem; font-weight: 700;
}
.btn-success:hover { filter: brightness(.94); }

@media (max-width: 640px) {
  .detail-table th { width: 42%; font-size: .85rem; }
  .detail-table td { font-size: .85rem; }
}

/* ==========================================================================
   Member payment page
   ========================================================================== */
/* Two across everywhere, including on a phone */
.pay-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 900px) { .pay-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pay-label { margin: 0 0 .2rem; font-size: .78rem; color: var(--muted); }
.pay-method { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.1rem; font-size: 1.05rem; font-weight: 700; }
.pay-amount { margin: 0 0 .4rem; font-size: 1.35rem; font-weight: 800; }
.pay-account { margin: 0 0 1.5rem; font-size: 1rem; overflow-wrap: anywhere; }
.pay-warn { margin: 0; font-size: .82rem; color: var(--danger); }
.pay-button { padding: .85rem 1rem; font-size: .95rem; }
.pay-button:disabled { opacity: .55; cursor: not-allowed; }

/* On a narrow screen the two halves stack, with the button last */
@media (max-width: 700px) {
  .pay-withdraw { grid-template-columns: 1fr; gap: 0; }
  .pay-account { margin-bottom: 1rem; }
}

/*
 * The payment page reads as figures rather than headlines, so nothing on
 * it is bold. Scoped to this page so the weight elsewhere is untouched.
 */
.pay-page .stat-value,
.pay-page .pay-method,
.pay-page .pay-amount,
.pay-page .pay-account,
.pay-page .table strong,
.pay-page .table th,
.pay-page .card-title { font-weight: 500; }

.pay-page .stat-label,
.pay-page .pay-label { font-weight: 400; }

/* A smaller badge for the history rows */
.pm-logo-sm { width: 22px; height: 22px; font-size: .55rem; }

/* A card whose heading carries the accent colour */
.card-headed > .card-header {
  background: var(--primary, #4338ca); color: #fff;
  border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
}
.card-headed > .card-header .card-title,
.card-headed > .card-header h3 { color: #fff; }

/* Detail rows read as label / value pairs */
.detail-table { margin: 0; }
.detail-table tr > th,
.detail-table tr > td { padding: .85rem 1rem; vertical-align: middle; }
.detail-table tr:not(:last-child) > th,
.detail-table tr:not(:last-child) > td { border-bottom: 1px solid var(--border); }
.detail-table tr > th { border-right: 1px solid var(--border); }
/*
 * Only a card whose whole body is a table loses its padding. Applying
 * that to every headed card pushed ordinary form controls against the
 * edges, which is why this is opt-in.
 */
.card-flush > .card-body { padding: 0; }
.card-flush .table-wrap { margin: 0; }

/* Everything else keeps room to breathe */
.card-headed > .card-body { padding: 1.25rem; }
.card-headed > .card-body > .field:first-child { margin-top: 0; }
.mt-2 { margin-top: 1rem; }

/* ==========================================================================
   Member dashboard
   ========================================================================== */
.dash-heading { margin: 0 0 .75rem; font-size: .95rem; font-weight: 700; color: var(--muted); }
.dash-heading:not(:first-child) { margin-top: .5rem; }

/* Two across on a phone, four on a wide screen */
.dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 900px) { .dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dash-table tfoot th { background: var(--surface-2); font-weight: 700; }

@media (max-width: 560px) {
  .dash-table { font-size: .82rem; }
  .dash-table th, .dash-table td { padding: .55rem .5rem; }
}

/* The column the table is ordered by stands out */
.dash-table td.is-sorted { color: var(--primary); font-weight: 700; }

/* A slim fill under the storage figure */
.topbar-bar { display: block; height: 3px; margin-top: .18rem; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.topbar-bar > span { display: block; height: 100%; background: var(--primary); }

/* Narrow screens: the label and the bar go, the figure stays */
@media (max-width: 900px) {
  .topbar-chip { padding: .35rem .5rem; gap: .35rem; }
  .topbar-chip-label, .topbar-bar { display: none; }
}
@media (max-width: 560px) {
  .topbar-title { display: none; }
  .topbar-chip-value { font-size: .75rem; }
}

/* ==========================================================================
   Sidebar storage (where the version used to be)
   ========================================================================== */
.sb-storage {
  display: block; padding: .6rem .7rem; border-radius: 10px;
  background: var(--surface-2); color: var(--ink); text-decoration: none;
}
.sb-storage:hover { color: var(--primary); }
.sb-storage-head { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; }
.sb-storage-head svg { flex: 0 0 auto; color: var(--muted); }
.sb-storage-pct { margin-left: auto; color: var(--muted); font-weight: 600; }
.sb-storage-bar {
  display: block; height: 5px; margin: .4rem 0 .3rem;
  border-radius: 3px; background: var(--border); overflow: hidden;
}
.sb-storage-bar > span { display: block; height: 100%; background: var(--primary); }
.sb-storage-figures { display: block; font-size: .72rem; font-variant-numeric: tabular-nums; }

/*
 * The menu button on a phone.
 *
 * It inherited the small icon-button size, which is fine for a mouse but
 * under the 44px that a thumb needs.
 */
@media (max-width: 900px) {
  .menu-btn { width: 44px; height: 44px; }
  .menu-btn svg { width: 24px; height: 24px; }
}

/* ==========================================================================
   Mobile safety net
   ========================================================================== */
/*
 * Two- and three-column grids collapse below 900px.
 *
 * The shared auto-fit rule can keep several tracks alive in a viewport
 * that cannot hold them, which is what made paired cards overlap. Stating
 * one column here fixes every page that uses these classes at once.
 */
@media (max-width: 899px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .settings-pair > .pair-primary { order: 2; }
  .settings-pair > .pair-secondary { order: 1; }
}

/* Nothing may push the page wider than the screen */
@media (max-width: 899px) {
  .panel-main, .panel-content { max-width: 100%; overflow-x: hidden; }
  pre, code, .mono { overflow-wrap: anywhere; white-space: pre-wrap; word-break: break-word; }
  .input, textarea, select { max-width: 100%; }
  .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/*
 * A dropdown must escape the box it sits in.
 *
 * The action menus live inside a scrolling table wrapper, which clipped
 * them on small screens — the button worked but the menu was invisible.
 */
.dropdown { position: relative; }
.dropdown-menu { z-index: 60; }

@media (max-width: 899px) {
  /*
   * A plain floating menu inside a horizontally scrolling table is clipped
   * by that scroll box, so on a phone it flows inside its cell instead and
   * the row grows to fit it.
   *
   * A menu that positions itself against the viewport is exempt: it has
   * already escaped the scroll box, and forcing it back inline was the
   * more specific rule quietly undoing work the component had done —
   * which is why the file manager's Manage menu opened inside the table
   * on a phone and floated over it everywhere else.
   */
  .table-wrap .dropdown-menu:not(.dropdown-menu-fixed) {
    position: static; right: auto; top: auto;
    min-width: 0; width: 100%; margin-top: .4rem;
    box-shadow: none; border: 1px solid var(--border);
  }
  .table-wrap td.actions { white-space: normal; min-width: 150px; }
  .table-wrap .dropdown-item { padding: .6rem .7rem; }
}

/*
 * A row of five figures.
 *
 * Two across on a phone, all five in a line once there is room. Declared
 * separately because the shared grid classes collapse to one column on
 * small screens, which is right for cards but not for figures.
 */
.stat-row-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

@media (min-width: 700px)  { .stat-row-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stat-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* The safety net must not flatten these */
@media (max-width: 899px) {
  .stat-row-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   Referral page
   ========================================================================== */
.stat-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 900px) { .stat-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .stat-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/*
 * The link and its button, sized to the link.
 *
 * Stretching the field across the card made a short URL look like an
 * empty form, so the field is sized from its own content with a fixed
 * gap before the button.
 */
.ref-link {
  display: flex; align-items: center;
  gap: 15px; flex-wrap: wrap;
}
.ref-link .ref-link-input {
  flex: 0 1 auto; width: auto; max-width: 100%;
  min-width: 0; font-size: .82rem;
}
.ref-link .btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 560px) {
  .ref-link { flex-direction: column; }
  .ref-link .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Topbar earning — a reading, not a control
   ========================================================================== */
.topbar-earning {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .05rem; line-height: 1.15; white-space: nowrap;
  padding: 0 .35rem;
}
.topbar-earning-label {
  font-size: .62rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.topbar-earning-value {
  font-size: 1rem; font-weight: 700;
  color: var(--success, #12805c);
  font-variant-numeric: tabular-nums;
}

/* Same treatment on a phone, only tighter */
@media (max-width: 560px) {
  .topbar-earning { padding: 0 .2rem; }
  .topbar-earning-label { font-size: .56rem; }
  .topbar-earning-value { font-size: .9rem; }
}

/* ==========================================================================
   Rounded buttons, and the mobile fixes that go with them
   ========================================================================== */
.btn-round { border-radius: 999px; }

/* --- Referral link ---------------------------------------------------- */
/* A pill beside the field rather than a slab beneath it */
@media (max-width: 560px) {
  /* Room is tight here, so the field takes what is left of the row */
  .ref-link { gap: .45rem; }
  .ref-link .ref-link-input { flex: 1 1 auto; font-size: .72rem; padding: .5rem .55rem; }
  .ref-link .btn {
    width: auto !important; padding: .55rem 1rem; font-size: .8rem;
    flex: 0 0 auto; justify-content: center;
  }
}

/* --- CPM plan tabs ---------------------------------------------------- */
@media (max-width: 700px) {
  /* Centred, wrapping to as many rows as it needs */
  .plan-tabs { justify-content: center; flex-wrap: wrap; gap: .4rem; }
  .plan-tab { padding: .45rem .8rem; font-size: .8rem; }

  /* The model name and its action share one line */
  .plan-panel-head {
    display: flex; flex-direction: row; align-items: center;
    justify-content: space-between; gap: .6rem; flex-wrap: nowrap;
  }
  .plan-panel-model { font-size: .9rem; min-width: 0; overflow-wrap: anywhere; }
  .plan-panel-action { flex: 0 0 auto; width: auto; }
  /* An earlier rule stretched these to the full row, which pushed the
     model name out of the layout. Stated explicitly so it cannot win. */
  .plan-panel-action .btn,
  .plan-panel-action .plan-chip {
    width: auto !important;
    padding: .4rem .9rem; font-size: .78rem; white-space: nowrap;
  }
  .plan-chip { padding: .3rem .6rem; font-size: .7rem; white-space: nowrap; }
}

/* --- Upload: remote links --------------------------------------------- */
/* The remove control belongs beside its field, never under it */
.remote-row { flex-wrap: nowrap !important; }
.remote-actions { display: flex; justify-content: flex-end; margin-top: .25rem; }

@media (max-width: 640px) {
  .remote-row { gap: .4rem; }
  .remote-input { font-size: .82rem; padding: .55rem .6rem; }
  .remote-remove { width: 34px; height: 34px; flex: 0 0 auto; }
  .remote-actions .btn { padding: .45rem 1rem; font-size: .8rem; }
}

/* --- Upload: choose files -------------------------------------------- */
@media (max-width: 640px) {
  .upload-drop .btn, .form-actions .btn-round { width: auto; padding: .6rem 1.4rem; font-size: .88rem; }
}

/* Storage figure with quick adjustments either side */
.storage-adjust { display: flex; align-items: stretch; gap: .4rem; }
.storage-adjust .btn { flex: 0 0 auto; white-space: nowrap; padding: .5rem .7rem; }
.storage-adjust .input-suffix-wrap { flex: 1 1 auto; min-width: 0; position: relative; }
.storage-adjust .input { width: 100%; padding-right: 3rem; }
.input-suffix-text {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  font-size: .78rem; color: var(--muted); pointer-events: none;
}
.link-button {
  border: 0; background: none; padding: 0; margin-left: .35rem;
  color: var(--primary); font: inherit; font-size: .78rem;
  text-decoration: underline; cursor: pointer;
}

@media (max-width: 560px) {
  .storage-adjust { flex-wrap: wrap; }
  .storage-adjust .input-suffix-wrap { flex: 1 1 100%; order: -1; }
}

/*
 * A row of four figures.
 *
 * Two across on a phone rather than one: these are short readings, so
 * stacking them wastes a screen. Opted out of the mobile safety net,
 * which is meant for cards holding forms.
 */
.stat-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 1000px) { .stat-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 999px)  { .stat-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ==========================================================================
   Register page
   ========================================================================== */
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--muted); font-size: .78rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--border); }
.checkline { display: flex; align-items: flex-start; gap: .5rem; margin: .75rem 0; font-size: .85rem; cursor: pointer; }
.checkline input { margin-top: .15rem; flex: 0 0 auto; }
.turnstile-wrap { margin: .9rem 0; display: flex; justify-content: center; }
.turnstile-wrap > div { max-width: 100%; }

/* ==========================================================================
   Sign in and sign up, inside the site layout
   ========================================================================== */
.auth-page { display: flex; justify-content: center; padding: 2.5rem 1rem 3.5rem; }
.auth-box {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem;
}
.auth-title { margin: 0 0 .25rem; font-size: 1.35rem; font-weight: 800; }
.auth-sub { margin: 0 0 1.25rem; font-size: .88rem; color: var(--muted); }
.auth-foot { margin: 1.1rem 0 0; text-align: center; font-size: .85rem; color: var(--muted); }

/* Compact fields, closer together than the panel defaults */
.auth-form .field { margin-bottom: .8rem; }
.auth-form .input { padding: .55rem .7rem; font-size: .9rem; }
.auth-form label { display: block; margin-bottom: .25rem; font-size: .8rem; font-weight: 600; }
.auth-form .hint { margin: .25rem 0 0; font-size: .72rem; }
.auth-form .error { margin: .25rem 0 0; font-size: .75rem; }
.auth-form .btn-block { margin-top: .25rem; padding: .7rem 1rem; }
.auth-form .checkline { margin: .6rem 0 .8rem; font-size: .8rem; }

/* The eye sits inside the field, and each one is its own control */
.pw-wrap { position: relative; }
.pw-wrap .input { width: 100%; padding-right: 2.6rem; }
.pw-eye {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 0; border-radius: 6px; background: none;
  color: var(--muted); cursor: pointer;
}
.pw-eye:hover { color: var(--primary); background: var(--surface-2); }

@media (max-width: 480px) {
  .auth-page { padding: 1.5rem .85rem 2.5rem; }
  .auth-box { padding: 1.25rem; }
}

/* An avatar shows the member's picture when they have one */
.avatar { overflow: hidden; display: inline-grid; place-items: center; flex: 0 0 auto; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-cell { display: inline-flex; align-items: center; gap: .5rem; }

/* The Google button, matching the site's outline style */
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); font-weight: 600;
}
.btn-google:hover { border-color: var(--primary); background: var(--surface-2); }
.btn-google svg { flex: 0 0 auto; }

/* Flash messages on public pages */
.site-flash { max-width: 420px; margin: 1.5rem auto -0.5rem; padding: 0 1rem; }
.notice-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.notice-danger { background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; }

/* ==========================================================================
   Public copyright complaint form
   ========================================================================== */
.dmca-page { max-width: 720px; margin: 0 auto; padding: 2.5rem 1rem 3.5rem; }
.dmca-intro { margin-bottom: 1.5rem; }
.dmca-title { margin: 0 0 .5rem; font-size: 1.6rem; font-weight: 800; }
.dmca-lead { margin: 0 0 .6rem; font-size: .92rem; line-height: 1.6; color: var(--muted); }

.dmca-form .field { margin-bottom: .9rem; }
.dmca-form textarea.input { resize: vertical; min-height: 8rem; }
.dmca-declaration { align-items: flex-start; font-size: .88rem; line-height: 1.55; }
.dmca-form button[disabled] { opacity: .55; cursor: not-allowed; }

/* One URL per row, with its own remove control */
.url-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.url-row .input { flex: 1 1 auto; min-width: 0; }
.url-remove {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.url-remove:hover { border-color: var(--danger); color: var(--danger); }

/* The confirmation */
.dmca-thanks { max-width: 520px; }
.thanks-box {
  text-align: center; padding: 2rem 1.5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.thanks-mark {
  display: inline-grid; place-items: center; width: 58px; height: 58px;
  margin-bottom: 1rem; border-radius: 50%;
  background: var(--success-soft, #d1fae5); color: var(--success, #12805c);
}
.case-box {
  display: flex; flex-direction: column; gap: .3rem; align-items: center;
  margin: 1.25rem 0; padding: 1rem;
  background: var(--surface-2); border-radius: var(--radius);
}
.case-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.case-id { font-size: 1.15rem; font-weight: 800; letter-spacing: .04em; font-family: var(--mono, monospace); }

@media (max-width: 560px) {
  .dmca-page { padding: 1.5rem .85rem 2.5rem; }
  .dmca-title { font-size: 1.3rem; }
  .case-id { font-size: 1rem; }
}

/* DMCA case review */
.dmca-search { display: flex; gap: .5rem; }
.dmca-search .input { flex: 1 1 auto; min-width: 0; }
.dmca-search .btn { flex: 0 0 auto; }
.url-line {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .25rem 0; font-size: .82rem; overflow-wrap: anywhere;
}
.url-line:not(:last-child) { border-bottom: 1px solid var(--border); }
.mt-2 { margin-top: 1rem; }

@media (max-width: 560px) {
  .dmca-search { flex-direction: column; }
  .dmca-search .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   File manager search
   ========================================================================== */
.fm-search { display: flex; align-items: center; gap: .5rem; }
.fm-search-field { position: relative; flex: 1 1 260px; min-width: 0; }
.fm-search-field > svg:first-child {
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.fm-search-field .input { width: 100%; padding-left: 2.1rem; padding-right: 2.1rem; }
.fm-search-clear {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 5px; color: var(--muted);
}
.fm-search-clear:hover { background: var(--surface-2); color: var(--danger); }

/* Suggestions from names already loaded, so typing costs no request */
.fm-suggest {
  position: absolute; z-index: 40; top: calc(100% + .3rem); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .25rem; max-height: 240px; overflow-y: auto;
}
.fm-suggest-item {
  display: block; width: 100%; padding: .5rem .6rem;
  border: 0; border-radius: 7px; background: none;
  color: var(--ink); font-size: .84rem; text-align: left;
  cursor: pointer; overflow-wrap: anywhere;
}
.fm-suggest-item:hover { background: var(--surface-2); color: var(--primary); }

@media (max-width: 640px) {
  .fm-search { flex: 1 1 100%; margin-top: .5rem; }
  .fm-search-field { flex: 1 1 auto; }
}

/* Character counter, bottom right under its field */
.char-count { margin: .3rem 0 0; text-align: right; font-size: .72rem; color: var(--muted); }
.char-count.is-low { color: var(--danger); font-weight: 600; }

/* A URL box that was rejected */
.url-row .input.has-error { border-color: var(--danger); background: #fef2f2; }
.url-row .input.has-error:focus { outline-color: var(--danger); }

/* Mail settings */
.mail-uses { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .85rem; color: var(--muted); line-height: 1.8; }

/* ==========================================================================
   Mail templates and SMTP
   ========================================================================== */
/*
 * TinyMCE brings its own styling, so only the fallback textarea needs
 * rules here — that is what shows if the editor script cannot load.
 */
.editor-code {
  display: block; width: 100%; min-height: 20rem; padding: .9rem;
  font-family: var(--mono, monospace); font-size: .8rem; line-height: 1.6;
  resize: vertical; white-space: pre-wrap;
}

/* The editor fills the card, whatever the screen */
.tox-tinymce {
  border-radius: var(--radius) !important;
  border-color: var(--border) !important;
  max-width: 100% !important;
}

/* Its toolbar wraps rather than forcing the page sideways */
@media (max-width: 700px) {
  .tox .tox-toolbar__primary { flex-wrap: wrap !important; }
  .tox .tox-tbtn { margin: 1px !important; }
  .editor-code { min-height: 14rem; font-size: .76rem; }
}

/* Short codes, each one a copy button */
.codes { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.code-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .6rem; text-align: left;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); cursor: pointer;
}
.code-row:hover { border-color: var(--primary); background: var(--surface-2); }
.code-row code {
  flex: 0 0 auto; font-size: .78rem; font-weight: 600;
  color: var(--primary); background: none; padding: 0;
}
.code-meaning { flex: 1 1 auto; font-size: .76rem; color: var(--muted); }
.code-copied { flex: 0 0 auto; font-size: .7rem; font-weight: 700; color: var(--success, #12805c); }

/* --- The three mail pages on a phone ---------------------------------- */
@media (max-width: 700px) {
  /* Short codes stack, so a long description never squeezes the code */
  .code-row { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .code-row code { font-size: .8rem; }
  .code-meaning { font-size: .74rem; }

  /* Template list: the description would otherwise force a wide table */
  .tpl-table td:first-child { min-width: 190px; }
  .tpl-table .small.muted { white-space: normal; }

  /* Buttons in a card footer take the width rather than crowding */
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; justify-content: center; }
}

/* Long subjects and addresses wrap instead of widening the table */
.tpl-table td { overflow-wrap: anywhere; }

/* ==========================================================================
   Waiting for a verification email
   ========================================================================== */
.verify-box { text-align: center; max-width: 460px; }

.verify-mark {
  display: inline-grid; place-items: center; width: 58px; height: 58px;
  margin-bottom: 1rem; border-radius: 50%;
  background: var(--surface-2); color: var(--primary);
}

.verify-lead {
  margin: 0 0 .8rem; font-size: .92rem; line-height: 1.6;
  color: var(--muted); overflow-wrap: anywhere;
}
.verify-lead strong { color: var(--ink); }

/* The two places to look, set apart from the prose */
.verify-check {
  margin: 1.1rem 0; padding: .9rem 1rem; text-align: left;
  background: var(--surface-2); border-radius: var(--radius);
}
.verify-check-title { margin: 0 0 .4rem; font-size: .82rem; font-weight: 600; }
.verify-check ul { margin: 0; padding-left: 1.15rem; font-size: .85rem; color: var(--muted); line-height: 1.7; }

@media (max-width: 480px) {
  .verify-box { padding: 1.4rem 1.1rem; }
  .verify-mark { width: 50px; height: 50px; margin-bottom: .75rem; }
  .verify-lead { font-size: .86rem; }
  .verify-check { padding: .75rem .85rem; }
}

/* A button that is working */
.spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: .45rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -2px;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.auth-form button[disabled] { opacity: .6; cursor: not-allowed; }

/* Public payout rates — the member CPM layout, on a public page */
.rates-page { max-width: 760px; margin: 0 auto; padding: 2.5rem 1rem 3.5rem; }
.rates-title { margin: 0 0 .4rem; font-size: 1.6rem; font-weight: 800; }
.rates-foot { margin: 1.25rem 0 0; text-align: center; font-size: .88rem; color: var(--muted); }

@media (max-width: 560px) {
  .rates-page { padding: 1.5rem .85rem 2.5rem; }
  .rates-title { font-size: 1.3rem; }
}

/* ==========================================================================
   Rate tables — the CPM column reads centred
   ========================================================================== */
/*
 * Applies to both the member CPM page and the public rates page, which
 * share this table. The country column stays left aligned; only the
 * figure and its heading move, so nothing else on either page shifts.
 */
.plan-rate-table thead th:last-child,
.plan-rate-table tbody td:last-child,
.plan-rate-table .rate-amount {
  text-align: center;
}

/* The figures line up under a centred heading rather than drifting apart
   on a wide screen */
.plan-rate-table thead th:last-child,
.plan-rate-table tbody td:last-child { width: 12rem; }

@media (max-width: 560px) {
  .plan-rate-table thead th:last-child,
  .plan-rate-table tbody td:last-child { width: auto; min-width: 7.5rem; }
}

/* ==========================================================================
   Public payment proof
   ========================================================================== */
.proof-page { max-width: 860px; margin: 0 auto; padding: 2.5rem 1rem 3.5rem; }
.proof-title { margin: 0 0 .4rem; font-size: 1.6rem; font-weight: 800; }

/*
 * Two figures, side by side at every width.
 *
 * They are short readings rather than cards holding a form, so stacking
 * them only wastes a screen — the mobile safety net that collapses other
 * grids is deliberately opted out of here.
 */
.proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem; }

.proof-stat {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1.25rem; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.proof-stat-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.proof-stat-value {
  font-size: 1.5rem; font-weight: 800;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.proof-stat-note { font-size: .7rem; color: var(--muted); }

/*
 * The table, matching the rest of the site.
 *
 * Alignment is set by column position rather than by a class on each cell:
 * the base rule `.table th` is more specific than a lone class, so a class
 * on the header lost to it while the matching cell won — leaving headings
 * and values pulling in opposite directions.
 *
 * Addressing header and cell together in one selector means the two can
 * never disagree, whatever else is added later.
 */
.proof-table { width: 100%; table-layout: fixed; }
.proof-table th, .proof-table td { vertical-align: middle; }

.proof-table th:nth-child(1), .proof-table td:nth-child(1) { text-align: left; width: 40%; }
.proof-table th:nth-child(2), .proof-table td:nth-child(2) { text-align: center; width: 30%; }
.proof-table th:nth-child(3), .proof-table td:nth-child(3) { text-align: right; width: 30%; }

.proof-user { font-weight: 600; overflow-wrap: anywhere; }
.proof-amount {
  font-weight: 700; color: var(--success, #12805c);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.proof-method { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .proof-page { padding: 1.5rem .85rem 2.5rem; }
  .proof-title { font-size: 1.3rem; }
  /* Kept two across; only the spacing and type tighten */
  .proof-stats { gap: .6rem; }
  .proof-stat { padding: .85rem .6rem; }
  .proof-stat-label { font-size: .62rem; letter-spacing: .04em; }
  .proof-stat-value { font-size: 1.05rem; }
  .proof-stat-note { font-size: .62rem; }
  .proof-table { font-size: .82rem; }
  .proof-table th, .proof-table td { padding: .6rem .4rem; }

  /* Names get less room on a narrow screen; the figure keeps its own */
  .proof-table th:nth-child(1), .proof-table td:nth-child(1) { width: 36%; }
  .proof-table th:nth-child(2), .proof-table td:nth-child(2) { width: 32%; }
  .proof-table th:nth-child(3), .proof-table td:nth-child(3) { width: 32%; }
}

/* ==========================================================================
   Site footer
   ========================================================================== */
/*
 * A sticky footer without position: fixed.
 *
 * The page is a column that fills at least the viewport; the main region
 * takes any slack, which pushes the footer down on a short page and lets
 * it sit after the content on a long one. Nothing overlaps, and the footer
 * never covers anything.
 */
html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Newer units account for a phone's collapsing address bar */
  min-height: 100svh;
}

/*
 * Whatever the page puts directly under body takes up the slack. The two
 * layouts differ — the public one uses <main>, the panel wraps everything
 * in .panel — so both are named.
 */
body > main { flex: 1 0 auto; }
body > .panel { flex: 1 0 auto; min-height: 0; }

.site-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: 1.35rem 1rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Desktop: copyright left, links right, both vertically centred */
.site-footer-inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: nowrap;
}

.site-footer-copy {
  margin: 0; flex: 0 1 auto;
  font-size: .82rem; color: var(--muted);
}

.site-footer-nav {
  display: flex; align-items: center; gap: 1.35rem;
  flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end;
}
.site-footer-nav a {
  font-size: .82rem; color: var(--muted); text-decoration: none;
  white-space: nowrap;
}
.site-footer-nav a:hover { color: var(--primary); text-decoration: underline; }

/* Mobile: links first and centred, copyright beneath */
@media (max-width: 768px) {
  .site-footer { padding: 1.5rem 1rem 1.75rem; }

  .site-footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    text-align: center;
  }

  /* Order is set here rather than in the markup, so a screen reader still
     meets the site name first. */
  .site-footer-nav { order: 1; }
  .site-footer-copy { order: 2; }

  .site-footer-nav {
    flex-direction: column;
    /* Close together, so the links read as one list rather than four
       separate items. The padding below still gives each a tappable
       height without opening the spacing back up. */
    gap: .1rem;
    justify-content: center;
    width: 100%;
  }
  .site-footer-nav a {
    display: block;
    padding: .22rem .5rem;
    font-size: .88rem;
    line-height: 1.4;
  }

  .site-footer-copy { font-size: .78rem; }
}

/* ==========================================================================
   Support
   ========================================================================== */
/* Full width of the panel — a cap here left the page looking half empty */
.support-page { width: 100%; }

/*
 * Two cards side by side at every width, including a phone.
 *
 * Equal columns rather than auto-fit, so the pair can never break onto
 * separate rows and the two always match in width.
 */
.support-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

/*
 * The icon sits beside the text, not above it. That single change is what
 * keeps the card to roughly a third of its former height.
 */
.support-card {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1.1rem 1.15rem;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgb(15 23 42 / 12%);
  color: #fff;
}

.support-card-telegram { background: linear-gradient(115deg, #2f97e8 0%, #1668d6 100%); }
.support-card-email    { background: linear-gradient(115deg, #f59331 0%, #e8620f 100%); }

.support-icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgb(255 255 255 / 22%); color: #fff;
}

.support-body { min-width: 0; flex: 1 1 auto; }

.support-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.support-name { margin: 0; font-size: 1.02rem; font-weight: 700; color: #fff; }

.support-badge {
  padding: .1rem .4rem; border-radius: 5px;
  background: rgb(255 255 255 / 24%); color: #fff;
  font-size: .58rem; font-weight: 800; letter-spacing: .07em;
}

.support-text {
  margin: .3rem 0 .75rem;
  font-size: .84rem; line-height: 1.45;
  color: rgb(255 255 255 / 92%);
}

/* A small white pill, sized to its label rather than the card */
.support-btn {
  display: inline-block;
  padding: .42rem .95rem;
  border-radius: 8px;
  background: #fff; color: #1f2937;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 1px 3px rgb(15 23 42 / 18%);
}
.support-btn:hover { background: #f8fafc; color: #111827; }
.support-btn.is-disabled { opacity: .7; cursor: not-allowed; }

/* --- The questions ---------------------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: .5rem; }

.faq-item { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.faq-item[open] { border-color: var(--primary); }

.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .85rem 1rem; cursor: pointer;
  font-size: .88rem; font-weight: 600;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--primary); }
.faq-question svg { flex: 0 0 auto; transition: transform .18s ease; color: var(--muted); }
.faq-item[open] .faq-question svg { transform: rotate(180deg); }

.faq-answer {
  padding: 0 1rem 1rem;
  font-size: .85rem; line-height: 1.65; color: var(--muted);
}

@media (max-width: 640px) {
  /*
   * Still two across, only tighter. The icon stays beside the title on a
   * phone as well — dropping the title below it wasted a row and made the
   * two cards read as four stacked pieces.
   */
  .support-cards { gap: .6rem; }
  .support-card { gap: .55rem; padding: .8rem .7rem; border-radius: 12px; }
  .support-icon { width: 30px; height: 30px; border-radius: 8px; }
  .support-name { font-size: .85rem; }
  .support-head { gap: .3rem; row-gap: .15rem; }
  .support-badge { padding: .08rem .3rem; font-size: .52rem; letter-spacing: .05em; }
  .support-text { font-size: .76rem; margin: .25rem 0 .7rem; }
  /*
   * Sized to its own text, then centred.
   *
   * fit-content is what stops a block-level button stretching, and auto
   * margins are what centre it once it has stopped — inline-block would
   * size correctly but could not be centred without affecting the text
   * above it.
   */
  .support-btn {
    display: block;
    width: fit-content;
    margin-inline: auto;
    /* Generous either side, tight top and bottom: ~36px tall */
    padding: .6rem 1.4rem;
    font-size: .84rem;
    line-height: 1.25;
    text-align: center;
  }
  .faq-question { padding: .75rem .8rem; font-size: .84rem; }
  .faq-answer { padding: 0 .8rem .85rem; font-size: .82rem; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-page { max-width: 640px; margin: 0 auto; padding: 2.5rem 1rem 3.5rem; }
.contact-title { margin: 0 0 .4rem; font-size: 1.6rem; font-weight: 800; }

.contact-form .field { margin-bottom: .9rem; }
.contact-form textarea.input { resize: vertical; min-height: 8rem; }
.contact-form .btn-block { margin-top: .35rem; padding: .7rem 1rem; }

@media (max-width: 640px) {
  .contact-page { padding: 1.5rem .85rem 2.5rem; }
  .contact-title { font-size: 1.3rem; }
  /* The name and email pair stack rather than squeezing */
  .contact-form .grid-2 { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Page builder
   ========================================================================== */
.pb-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.pb-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }

/* The address field, with the domain shown but not editable */
.pb-slug { display: flex; align-items: center; gap: .35rem; }
.pb-slug-prefix { flex: 0 0 auto; font-size: .76rem; color: var(--muted); white-space: nowrap; }
.pb-slug .input { flex: 1 1 auto; min-width: 0; }

/* A published page, in the site's own reading style */
/*
 * Full width, matching the footer's container.
 *
 * The narrower cap suited a form, where a short line is easier to fill in.
 * A written page is the site's own content and reads better using the
 * width the rest of the site uses.
 */
.custom-page { max-width: 1120px; margin: 0 auto; padding: 2.5rem 1.25rem 3.5rem; }
.custom-page-title { margin: 0 0 1.25rem; font-size: 1.7rem; font-weight: 800; }
/*
 * The text fills the page.
 *
 * A reading-measure cap was leaving a wide empty strip down the right,
 * which reads as a broken layout rather than a considered one. The page
 * container already limits the line length.
 */
.custom-page-body { font-size: .95rem; line-height: 1.75; }
.custom-page-body table, .custom-page-body img { max-width: 100%; }
.custom-page-body h2 { margin: 1.75rem 0 .6rem; font-size: 1.2rem; }
.custom-page-body h3 { margin: 1.4rem 0 .5rem; font-size: 1.05rem; }
.custom-page-body p { margin: 0 0 1rem; }
.custom-page-body ul, .custom-page-body ol { margin: 0 0 1rem; padding-left: 1.35rem; }
.custom-page-body li { margin-bottom: .35rem; }
.custom-page-body a { color: var(--primary); text-decoration: underline; }
.custom-page-body img { max-width: 100%; height: auto; border-radius: 8px; }
.custom-page-body table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.custom-page-body td, .custom-page-body th { padding: .5rem .7rem; border: 1px solid var(--border); }

@media (max-width: 700px) {
  .pb-toolbar { flex-direction: column; align-items: stretch; }
  .pb-toolbar .btn { width: 100%; justify-content: center; }
  .pb-actions { justify-content: flex-start; }
  .pb-actions .btn { flex: 1 1 auto; justify-content: center; min-width: 4.5rem; }
  .pb-table td:first-child { min-width: 160px; }
  .pb-slug-prefix { display: none; }
  .custom-page { padding: 1.5rem .85rem 2.5rem; }
  .custom-page-title { font-size: 1.35rem; }
}

/* Navigation manager — the drag handle and its row */
.nav-order-col { width: 5.5rem; white-space: nowrap; }
.nav-grip { display: inline-grid; place-items: center; color: var(--muted); cursor: grab; vertical-align: -3px; }
.nav-grip:active { cursor: grabbing; }
.nav-position { margin-left: .4rem; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-table tr.is-dragging { opacity: .45; background: var(--surface-2); }
.nav-table tr[draggable="true"] { cursor: default; }

@media (max-width: 700px) {
  .nav-order-col { width: 3.5rem; }
  .nav-position { display: none; }
  .nav-table td:nth-child(2) { min-width: 110px; }
}

/* ==========================================================================
   Mobile navigation
   ========================================================================== */
.header-actions { display: flex; align-items: center; gap: .5rem; }

/* The drawer control belongs to a phone; desktop already shows the menu */
.nav-toggle { display: none; }

.nav-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgb(15 23 42 / 45%);
  display: none;
}

.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(20rem, 84vw);
  display: none; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-radius: 14px 0 0 14px;
  box-shadow: -12px 0 32px rgb(15 23 42 / 18%);
}

/* Slides in from the edge rather than appearing */
.nav-slide-enter, .nav-slide-leave { transition: transform .24s ease, opacity .24s ease; }
.nav-slide-start { transform: translateX(100%); opacity: 0; }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--border);
}
.nav-drawer-title { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/*
 * The links take only the room they need.
 *
 * Letting this region grow was what pushed the buttons to the foot and
 * opened the gap; the drawer body scrolls instead when there are many
 * items, so a long menu still fits.
 */
.nav-drawer-body { overflow-y: auto; flex: 1 1 auto; padding: .75rem; }

.nav-drawer-links { display: flex; flex-direction: column; gap: .15rem; }
.nav-drawer-links a {
  display: block; padding: .8rem .85rem;
  border-radius: 10px;
  font-size: .92rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
}
.nav-drawer-links a:hover { background: var(--surface-2); }

/* Where you are now, said plainly */
.nav-drawer-links a.is-active {
  background: var(--surface-2);
  color: var(--primary); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}

/*
 * Directly beneath the last link, separated by a margin rather than
 * anchored to the bottom of the drawer.
 */
.nav-drawer-foot {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
/* Sized by their own text and centred, rather than stretched */
.nav-pill {
  display: inline-block; width: auto;
  padding: .55rem 1.9rem;
  font-size: .88rem;
}
.nav-drawer-foot form { display: contents; }

/* Nothing behind the drawer moves while it is open */
body.nav-locked { overflow: hidden; }

@media (max-width: 860px) {
  /* The desktop menu gives way to the drawer */
  .site-nav { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .nav-overlay { display: block; }
  .nav-drawer { display: flex; }

  /* One action in the header, so it stays uncluttered */
  .hide-on-mobile { display: none; }
  .header-actions .btn { padding: .45rem .95rem; font-size: .82rem; white-space: nowrap; }
}

/* The player's own styling lives in player.css, loaded only on the watch
   page. Only the frame around it belongs here. */
.vp-card { padding: 0; overflow: hidden; }
.vp-name { margin: 0; padding: .75rem .9rem; font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; }

/* Nothing to play */
.vp-error-card { text-align: center; padding: 2rem 1.25rem; }
.vp-error-mark {
  display: inline-grid; place-items: center; width: 56px; height: 56px;
  margin-bottom: 1rem; border-radius: 50%;
  background: #fef2f2; color: #b91c1c;
}
.vp-error-title { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 700; }
.vp-error-text { margin: 0 0 1rem; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.vp-error-file { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .vp-bar button { width: 30px; height: 30px; }
  .vp-time { font-size: .7rem; }
  .vp-volume-slider { display: none; }
  .vp-big-play { width: 56px; height: 56px; }
  .vp-error-card { padding: 1.5rem 1rem; }
}


/* The download offered when a format cannot play in a browser */
.vp-error-btn {
  display: inline-block; margin-top: 1rem;
  padding: .65rem 1.75rem;
  font-size: .9rem;
}

@media (max-width: 480px) {
  .vp-error-btn { width: 100%; text-align: center; padding: .7rem 1rem; }
}

/* The volume slider, kept out of the bar until it is wanted */
.vp-vol {
  position: absolute; bottom: calc(100% + .5rem); left: 50%;
  transform: translateX(-50%);
  display: none; padding: .7rem .5rem;
  background: rgb(17 24 39 / 96%); border-radius: 8px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 35%);
  z-index: 6;
}
.vp-vol.is-open { display: block; }

/* Upright, so the popup stays narrow enough for a phone */
.vp-vol input[type="range"] {
  width: 90px; height: 4px; accent-color: #fff;
  writing-mode: vertical-lr; direction: rtl;
}

/* The double-tap marks */
.vp-skip {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4; padding: .55rem .9rem; border-radius: 999px;
  background: rgb(0 0 0 / 62%); color: #fff;
  font-size: .85rem; font-weight: 600;
  animation: vp-skip-in .7s ease forwards; pointer-events: none;
}
.vp-skip.is-back { left: 8%; }
.vp-skip.is-fwd { right: 8%; }

@keyframes vp-skip-in {
  0%   { opacity: 0; transform: translateY(-50%) scale(.85); }
  25%  { opacity: 1; transform: translateY(-50%) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Fullscreen fills the screen rather than keeping the page's corners */
.vp-shell:fullscreen, .vp-shell:-webkit-full-screen { border-radius: 0; }
.vp-shell:fullscreen video { height: 100%; object-fit: contain; }


/* The smaller print under a confirmation's main warning */
.confirm-note {
  margin: .5rem auto 0;
  max-width: 34ch;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
  opacity: .85;
}

/* Spinner inside a button that is waiting for something */
.btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: .45rem;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn.is-loading { cursor: progress; opacity: .8; }

/* Keeps the icon beside the label rather than above it */
.btn-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  line-height: 1;
}

/* ==========================================================================
   Ad blocker notice
   ========================================================================== */
/*
 * Only ever shown when several independent checks agree, so it is allowed to
 * be firm: there is nothing behind it to read past.
 */
.adblock-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: 1rem;
  background: rgb(8 11 18 / 82%);
  backdrop-filter: blur(3px);
}
.adblock-overlay.is-open { display: grid; }

.adblock-card {
  width: min(430px, 94vw);
  padding: 1.9rem 1.5rem 1.6rem;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgb(8 11 18 / 45%);
  text-align: center;
}

.adblock-icon {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: rgb(239 68 68 / 12%);
  color: var(--danger);
}

.adblock-title {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}

.adblock-text {
  margin: 0 auto 1.2rem;
  max-width: 34ch;
  font-size: .89rem;
  line-height: 1.6;
  color: var(--muted);
}

.adblock-steps {
  margin: 0 0 1.2rem;
  padding: .85rem 1rem;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--muted);
  text-align: left;
}
.adblock-steps ol { margin: 0; padding-left: 1.15rem; }

@media (max-width: 480px) {
  .adblock-card { padding: 1.5rem 1.1rem 1.3rem; }
  .adblock-title { font-size: 1.05rem; }
  .adblock-text { font-size: .85rem; }
}