/* QaziHost OCR admin panel — dark, dense, one blue accent on a cool-gray
   family. Geist carries the UI; the system stack is the offline fallback. */

:root {
  --bg: #0b0e13;
  --surface: #12161d;
  --surface-2: #171c25;
  --surface-3: #1e2530;
  --border: #262e3a;
  --border-strong: #323c4b;
  --text: #e8ecf3;
  --muted: #9aa4b6;
  --faint: #6b7688;
  --accent: #4f8cff;
  --accent-strong: #74a4ff;
  --accent-dim: #1e3a68;
  --ok: #34c77b;
  --ok-dim: #123527;
  --warn: #e2a33c;
  --warn-dim: #3a2c11;
  --danger: #f05252;
  --danger-dim: #3d1616;
  --info: #56b6d6;
  --info-dim: #10303b;
  --radius: 12px;
  --radius-sm: 9px;
  /* Shadows tinted with the page's own blue-black, never plain black. */
  --shadow-1: 0 1px 2px rgba(4, 9, 18, 0.45);
  --shadow-2: 0 1px 2px rgba(4, 9, 18, 0.4), 0 16px 40px -28px rgba(4, 9, 18, 0.9);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A faint ambient glow at the top right, so the page has depth without a
   single extra element. Fixed, so scrolling content moves over it. */
body {
  background:
    radial-gradient(1100px 480px at 88% -12%, rgba(79, 140, 255, 0.07), transparent 62%),
    radial-gradient(700px 380px at -10% 108%, rgba(79, 140, 255, 0.04), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 { margin: 0 0 4px; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

code, pre, .mono { font-family: var(--mono); font-size: 0.96em; }

/* Selection and scrollbars in the panel's own palette. */
::selection { background: rgba(79, 140, 255, 0.32); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 8px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

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

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

.sidebar {
  width: 232px;
  flex: 0 0 232px;
  background: linear-gradient(180deg, var(--surface), #10141b);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100dvh;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(145deg, var(--accent-strong), #3d7bef 70%);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; letter-spacing: 0.02em; color: #fff;
  box-shadow: 0 4px 14px -4px rgba(79, 140, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.brand-name { font-weight: 650; font-size: 14px; letter-spacing: -0.01em; }
.brand-sub { font-size: 11px; color: var(--faint); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--faint); padding: 12px 10px 5px;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: var(--radius-sm);
  color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.nav a:hover {
  background: var(--surface-2); color: var(--text);
  text-decoration: none; transform: translateX(2px);
}
.nav a.active {
  background: linear-gradient(90deg, rgba(79, 140, 255, 0.18), rgba(79, 140, 255, 0.05));
  color: #dfe9ff;
  box-shadow: inset 2px 0 0 var(--accent);
  transform: none;
}
.nav .icon { width: 17px; text-align: center; opacity: 0.85; }
.nav a.active .icon { opacity: 1; color: var(--accent-strong); }

.sidebar-foot { margin-top: auto; padding: 0 8px; font-size: 11px; color: var(--faint); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Stays put while long lists scroll, translucent so content slides under it. */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 26px;
  border-bottom: 1px solid var(--border);
  background: rgba(18, 22, 29, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 40;
}
.topbar .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

.content { padding: 24px 26px 56px; max-width: 1480px; }

/* ----------------------------------------------------------------- cards - */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), rgba(23, 28, 37, 0.6));
}
.card-head h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 600; }
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.tester { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); align-items: start; }

/* ------------------------------------------------------------ stat tiles - */

.stat {
  background: linear-gradient(180deg, var(--surface), rgba(18, 22, 29, 0.7));
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--shadow-1);
  transition: border-color 160ms ease, transform 160ms ease;
}
.stat:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.stat .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--faint); font-weight: 550;
}
.stat .value {
  font-size: 27px; font-weight: 700; margin-top: 5px; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.stat .value.small { font-size: 19px; }
.stat .foot { font-size: 12px; color: var(--muted); margin-top: 3px; }
.stat.ok .value { color: var(--ok); }
.stat.warn .value { color: var(--warn); }
.stat.danger .value { color: var(--danger); }

/* ---------------------------------------------------------------- tables - */

.table-wrap { overflow-x: auto; }

/* `width: 100%` alone makes a wide table fight its container instead of
   scrolling in it: columns get squeezed until values wrap onto three lines and
   nothing lines up with its header any more. A min-width lets it overflow and
   scroll, which is what .table-wrap was for. */
table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 13px; }

thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--faint); font-weight: 600; padding: 10px 14px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}

/* Top, not middle. As soon as one cell in a row wraps, middle alignment floats
   every other value in that row to its centre, and the table reads as though
   the data has slipped out of its columns. */
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 120ms ease; }
tbody tr:hover { background: rgba(79, 140, 255, 0.05); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.nowrap { white-space: nowrap; }
.empty { padding: 34px 16px; text-align: center; color: var(--faint); }

/* ---------------------------------------------------------------- badges - */

.badge {
  display: inline-block; padding: 2.5px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
  border: 1px solid transparent;
}
.badge-ok { background: var(--ok-dim); color: var(--ok); border-color: #1d5b3c; }
.badge-warn { background: var(--warn-dim); color: var(--warn); border-color: #5c4318; }
.badge-danger { background: var(--danger-dim); color: var(--danger); border-color: #6b2020; }
.badge-info { background: var(--info-dim); color: var(--info); border-color: #1c4d5e; }
.badge-muted { background: var(--surface-3); color: var(--muted); border-color: var(--border); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--muted);
}

/* ----------------------------------------------------------------- forms - */

label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }

input[type="text"], input[type="password"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; padding: 8px 10px;
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 13px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
}

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filters .field { min-width: 130px; }
.filters .field.grow { flex: 1; min-width: 200px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px;
  padding: 8px 15px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, var(--surface-3), #19202a);
  color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 160ms ease,
    color 140ms ease, transform 120ms ease;
}
.btn:hover {
  background: linear-gradient(180deg, #242c38, var(--surface-3));
  border-color: #3d4757;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -6px rgba(4, 9, 18, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.btn-primary {
  background: linear-gradient(180deg, #6199ff, var(--accent) 52%, #3f7ced);
  border-color: #3f7ced;
  color: #fff;
  box-shadow: 0 2px 10px -3px rgba(79, 140, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #74a4ff, #5793ff 52%, #4681f2);
  border-color: var(--accent);
  box-shadow: 0 6px 20px -6px rgba(79, 140, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-danger { background: var(--danger-dim); border-color: #6b2020; color: var(--danger); }
.btn-sm { min-height: 30px; padding: 5px 11px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------ definition - */

.kv { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1px; background: var(--border); }
.kv > div { background: var(--surface); padding: 9px 14px; font-size: 13px; }
.kv > div:nth-child(odd) { color: var(--muted); }
.kv .wrap { word-break: break-word; }

pre.code {
  margin: 0; padding: 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; overflow-x: auto; font-size: 12px; line-height: 1.55; color: #cbd3e1;
  max-height: 460px;
}

/* ------------------------------------------------------------- checklist - */

.checklist { display: flex; flex-direction: column; gap: 8px; }
.check {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
}
.check .mark {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; flex: 0 0 20px; margin-top: 1px;
}
.check.pass .mark { background: var(--ok-dim); color: var(--ok); }
.check.fail .mark { background: var(--danger-dim); color: var(--danger); }
.check.skip .mark { background: var(--surface-3); color: var(--faint); }
.check.warn .mark { background: var(--warn-dim); color: var(--warn); }
.check.warn { border-color: #5c431855; }
.check.pass { border-color: #1d5b3c55; }
.check.fail { border-color: #6b202055; }
.check .title { font-weight: 600; font-size: 13px; }
.check .detail { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* --------------------------------------------------------------- tester -- */

.dropzone {
  border: 2px dashed var(--border); border-radius: 12px;
  padding: 28px 18px; text-align: center; cursor: pointer;
  background: var(--surface-2); transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-dim); }
.dropzone .big { font-size: 26px; margin-bottom: 6px; opacity: 0.8; }
.dropzone .hint { color: var(--faint); font-size: 12px; margin-top: 5px; }
.dropzone input[type="file"] { display: none; }

.preview {
  margin-top: 14px; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--bg);
}
.preview img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; }
.preview .meta {
  padding: 8px 12px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 10px;
}

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field-card {
  border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px; background: var(--surface-2);
}
.field-card .k {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint);
}
.field-card .v { font-size: 15px; font-weight: 600; margin-top: 3px; word-break: break-all; }
.field-card .v.missing { color: var(--danger); font-weight: 500; }
.field-card .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.verdict {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 10px; margin-bottom: 16px; border: 1px solid var(--border);
}
.verdict.pass { background: var(--ok-dim); border-color: #1d5b3c; }
.verdict.fail { background: var(--danger-dim); border-color: #6b2020; }
.verdict.partial { background: var(--warn-dim); border-color: #5c4318; }
.verdict .icon { font-size: 20px; }
.verdict .title { font-weight: 650; font-size: 14px; }
.verdict .sub { font-size: 12.5px; color: var(--muted); }

.spinner {
  width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

/* ------------------------------------------------------------ pagination - */

.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted);
}
.pager .pages { display: flex; gap: 6px; align-items: center; }

/* ----------------------------------------------------------------- login - */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card {
  width: 100%; max-width: 360px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; padding: 28px;
}
.login-card .brand { justify-content: center; margin-bottom: 18px; }
.alert {
  padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px;
  background: var(--danger-dim); border: 1px solid #6b2020; color: #ffc9c9;
  border-left-width: 3px; border-left-color: var(--danger);
}
.alert-info {
  background: var(--info-dim); border-color: #1c4d5e; color: #c9ecf7;
  border-left-color: var(--info);
}
.alert-warn {
  background: var(--warn-dim); border-color: #5c4318; color: #f3d9a8;
  border-left-color: var(--warn);
}

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.warn { color: var(--warn); }
.small { font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }

@media (max-width: 1100px) {
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.tester { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* The sidebar becomes an off-canvas drawer; the layout stacks under the
     mobile bar. The drawer itself lives in the "Mobile navigation" section
     at the end of this file. */
  .shell { flex-direction: column; }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv > div:nth-child(odd) { padding-bottom: 0; background: var(--surface); }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .content { padding: 16px; }
}

/* ------- review queue, message editor, clients, activity log -------------
   These use the palette declared at the top of this file. An earlier version
   guessed at variable names that do not exist here, so every field fell back
   to a white background under light-coloured text and became unreadable. */
.wrap { flex-wrap: wrap; }

textarea,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"],
select {
  font: inherit;
  line-height: 1.5;
  padding: 8.5px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--border);
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(4, 9, 18, 0.35);
  transition: border-color 140ms ease, box-shadow 160ms ease, background 140ms ease;
}
textarea { width: 100%; resize: vertical; min-height: 84px; }

textarea::placeholder,
input::placeholder { color: var(--faint); }

textarea:hover,
input:hover,
select:hover { border-color: var(--border-strong); }

textarea:focus,
input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  background: #1a212c;
  box-shadow: inset 0 1px 2px rgba(4, 9, 18, 0.35), 0 0 0 3px rgba(79, 140, 255, 0.18);
}

/* The native arrow renders on the OS default, which is white here. */
select option { background: var(--surface-2); color: var(--text); }




details > summary { cursor: pointer; color: var(--muted); }
details pre { white-space: pre-wrap; word-break: break-word; margin: 6px 0 0; color: var(--muted); }

.banner-wa { margin: 16px 24px 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.banner-wa a { margin-left: auto; white-space: nowrap; }

/* ---- table column behaviour ------------------------------------------- */
/* An email or a transaction id has no spaces to break at, so it sets its own
   column width and squeezes everything else. These cap it and let it wrap. */
td.mono, td.small { max-width: 280px; overflow-wrap: anywhere; }
td .badge { vertical-align: baseline; }

/* A checkbox column should take a checkbox's width, not an equal share. */
th.pick, td.pick { width: 34px; padding-right: 0; }

/* Buttons inside a cell must not be pushed onto their own line. */
tbody td form { display: inline; }
tbody td .btn { white-space: nowrap; }

/* A block of related settings. Its own name on purpose: .field-card already
   exists with a different structure, and quietly redefining a class that is
   already in use is what scrambled the label/value pairs on every detail page. */
.setting-block { padding: 14px 0 0; margin-top: 14px; border-top: 1px solid var(--border); }
.setting-block:first-child { padding-top: 0; margin-top: 0; border-top: none; }

/* ==========================================================================
   Payments list components
   ========================================================================== */

.filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 4px 0 12px; }
.filters input[type="search"] { flex: 1 1 260px; min-width: 0; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.chip-toggle span {
  display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border);
  cursor: pointer; user-select: none;
}
.chip-toggle input:checked + span {
  color: var(--text); background: var(--accent-dim); border-color: var(--accent);
}
.chip-toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.bulkbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 0 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.bulkbar .check { padding: 6px 10px; }

/* The whole row is the link; the checkbox and real links stay clickable. */
tr.rowlink { cursor: pointer; }
tr.rowlink:hover { background: var(--surface-2); }

/* ==========================================================================
   Mobile. Last in the file on purpose: these are the rules that must win.
   ========================================================================== */

@media (max-width: 860px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }
  .topbar-actions { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; }

  /* A table cannot be made narrow enough to read on a phone, so it scrolls —
     with a hint that it does, because an off-screen column nobody knows about
     is the same as a missing one. */
  .table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--surface) 30%, transparent),
      linear-gradient(to left, var(--surface) 30%, transparent) 100% 0;
    background-size: 30px 100%, 30px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local;
  }

  /* Anything you tap needs to be big enough to tap. */
  .btn { min-height: 40px; display: inline-flex; align-items: center; }
  .btn-sm { min-height: 36px; }
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
  .filters, .bulkbar { gap: 10px; }
  .filters input[type="search"] { flex: 1 1 100%; }

  /* Forms and inputs go full width rather than sitting in half-empty rows. */
  input[type="text"], input[type="search"], input[type="number"], select, textarea { width: 100%; }
  .card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .setting-block { padding-top: 12px; margin-top: 12px; }

  /* Inside the drawer everything you tap gets a full-height row. */
  .nav a { padding: 11px 12px; font-size: 14px; }
  .sidebar-foot { padding-bottom: 14px; }
}

@media (max-width: 520px) {
  .content { padding: 12px; }
  h1 { font-size: 19px; }
  .card-body { padding: 14px; }
  .brand-sub { display: none; }
  /* Two columns of chips read better than one long ragged line. */
  .chip-toggle span { padding: 7px 10px; font-size: 12px; }
}

/* A payment that is still moving, so the list reads as live rather than stale. */
.statusline { margin-top: 3px; }
.live-dot::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--info); margin-right: 6px; vertical-align: middle;
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .live-dot::before { animation: none; } }

/* ==========================================================================
   Payments table
   --------------------------------------------------------------------------
   The list is read the way a ledger is: names and money first, everything
   else supporting them. So each cell has ONE primary value at full contrast
   and its context beneath at lower weight, instead of six equal greys.
   ========================================================================== */

table.data thead th {
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 12px 14px;
}
table.data tbody td { padding: 13px 14px; vertical-align: top; }
table.data tbody tr + tr td { border-top: 1px solid var(--border); }
table.data tbody td { border-bottom: none; }

/* The value you actually scan for. */
.strong { font-weight: 600; color: var(--text); font-size: 13.5px; }

/* Its context: the client number under a name, a channel under an invoice. */
.cell-sub {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 260px;
}
.cell-sub.warn { color: var(--warn); }

/* Money and phone numbers line up digit under digit. */
.mono-num { font-variant-numeric: tabular-nums; }

/* ---- toolbar ---- */
.toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.toolbar input[type="search"] { flex: 1 1 280px; min-width: 0; }

/* ---- bulk bar ---- */
.bulkbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.bulkbar-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* Inside a bar the checkbox is one control among several, not a boxed row. */
.check-inline { padding: 0; border: none; background: none; gap: 8px; }

/* ---- buttons ---- */
.btn { line-height: 1.2; }
/* The press: down and slightly in, like a physical key. */
.btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-1); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-danger {
  background: transparent; border-color: #5c2323; color: var(--danger);
  box-shadow: none;
}
.btn-danger:hover {
  background: var(--danger-dim); border-color: var(--danger); color: #ff8a8a;
  box-shadow: 0 4px 14px -8px rgba(240, 82, 82, 0.5);
}
/* For "cancel"-shaped actions, which should not compete with the real one. */
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--text); box-shadow: none; }

.pager { padding: 12px 16px; border-top: 1px solid var(--border); margin: 0; }

@media (max-width: 860px) {
  .toolbar { padding: 12px; }
  .toolbar input[type="search"] { flex: 1 1 100%; }
  .bulkbar { padding: 10px 12px; }
  .bulkbar-actions { margin-left: 0; width: 100%; }
  .cell-sub { max-width: none; }
}
/* The bank reference sits under the amount it belongs to: needed for matching
   a statement, but never the thing you scan the column for. */
.cell-sub.ref { font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* ==========================================================================
   Form controls
   --------------------------------------------------------------------------
   The native checkbox, radio and select arrow are drawn by the OS in its own
   light-mode palette, which on this background reads as three bright white
   chips floating on a dark card. These are drawn by hand instead so they sit
   in the same palette as everything around them.

   NOTE: these are element selectors, deliberately placed last so nothing has
   to out-specify them. The mobile sizes live in the media block below, after
   this one, for the same reason.
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  display: inline-grid;
  place-content: center;
  vertical-align: -3px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

input[type="checkbox"] { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--accent); }

input[type="checkbox"]::before,
input[type="radio"]::before {
  content: "";
  transform: scale(0);
  transition: transform 110ms ease;
}

/* A tick drawn from two borders, so there is no image to load or font to miss. */
input[type="checkbox"]::before {
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
}

input[type="radio"]::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
input[type="radio"]:checked::before { transform: scale(1); }

/* "Some but not all" on a select-all box. A dash, not a tick: the distinction
   matters, because a tick here would claim rows that are not actually ticked. */
input[type="checkbox"]:indeterminate {
  background: var(--accent-dim);
  border-color: var(--accent);
}
input[type="checkbox"]:indeterminate::before {
  width: 9px;
  height: 0;
  margin-top: 0;
  border-width: 0 0 2px 0;
  border-color: var(--text);
  transform: rotate(0deg) scale(1);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* The select keeps its native menu — replacing that is a genuine accessibility
   loss — but loses the light-mode arrow, which is the part that clashes. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 15px top 52%, right 10px top 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select:hover { background-image:
    linear-gradient(45deg, transparent 50%, var(--text) 50%),
    linear-gradient(135deg, var(--text) 50%, transparent 50%); }
select::-ms-expand { display: none; }

/* ---- checkbox dropdown ----
   A <details> rather than a widget: it opens without JavaScript, keeps real
   checkboxes inside, and submits as an ordinary form field. */
.multiselect { position: relative; display: inline-block; min-width: 260px; }
.multiselect > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.multiselect > summary::-webkit-details-marker { display: none; }
.multiselect > summary::after {
  content: "";
  margin-left: auto;
  width: 0; height: 0;
  border: 4px solid transparent;
  border-top-color: var(--muted);
  margin-top: 3px;
}
.multiselect[open] > summary { border-color: var(--accent); }
.multiselect[open] > summary::after { transform: rotate(180deg); margin-top: -3px; }
.multiselect > summary:hover { border-color: var(--accent-dim); }
.multiselect-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multiselect-label.is-empty { color: var(--faint); }

.multiselect-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 260px;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.multiselect-search { width: 100%; margin-bottom: 6px; }
.multiselect-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.multiselect-option:hover { background: var(--surface-3); }
.multiselect-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multiselect-empty { padding: 8px; color: var(--faint); font-size: 12.5px; }

@media (max-width: 860px) {
  input[type="checkbox"], input[type="radio"] { width: 19px; height: 19px; }
  input[type="checkbox"]::before { width: 5px; height: 10px; }
  .multiselect { display: block; min-width: 0; width: 100%; }
  .multiselect-menu { min-width: 0; }
}

/* The filter chips hide the real control and style their own label, so the
   drawn box above must not reappear behind them. Higher specificity than the
   element rules, so its position in the file does not matter. */
.chip-toggle input[type="checkbox"],
.chip-toggle input[type="radio"] {
  width: 0; height: 0; margin: 0; border: 0; background: none; box-shadow: none;
}

/* ---- usage meters (Gemini page) ----
   A thin bar under a number: how much of a limit is used. Colour only says
   how close, the number beside it says how much. */
.meter, .bar {
  height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden;
  margin-top: 5px; min-width: 60px;
}
.meter span, .bar span {
  display: block; height: 100%; border-radius: 2px; background: var(--accent);
  transition: width 200ms ease;
}
.meter span.is-warn { background: var(--warn); }
.meter span.is-full { background: var(--danger); }
.bar { margin-top: 0; }

/* Billing-cycle picker: a compact grid of checkboxes, two columns on desktop. */
.cycle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.cycle-grid .check-inline { align-items: center; }
@media (max-width: 520px) { .cycle-grid { grid-template-columns: 1fr; } }

/* ---- tabs (Messages page) ----
   Links, not buttons: each tab is a real URL, so a refresh and a save both
   come back to the same one, and it works with JavaScript off. */
.tabs-wrap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap; flex: 1 1 auto;
  padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 7px; color: var(--muted); text-decoration: none;
  font-size: 13px; line-height: 1.2; white-space: nowrap; position: relative;
  transition: background 120ms ease, color 120ms ease;
}
.tab:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.tab.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px var(--border); }
.tab-audience {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint);
  padding: 2px 6px; border-radius: 4px; background: var(--surface-3);
}
.tab.is-active .tab-audience { background: var(--accent-dim); color: var(--accent); }
.tab-name { font-weight: 600; }
.tab-count { font-size: 11px; color: var(--faint); font-family: var(--mono); }
.tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--info); }
.tabs-search { flex: 0 1 260px; }
.tabs-search input { width: 100%; }
.tabpanel[hidden], .tabpanel-empty[hidden], .template[hidden] { display: none; }

@media (max-width: 860px) {
  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs-search { flex: 1 1 100%; }
  .tab-audience { display: none; }
}

/* ==========================================================================
   Message editor (Messages page)
   --------------------------------------------------------------------------
   Wrap buttons for WhatsApp's *bold* _italic_ ~strike~ `code`, an emoji
   palette, and a preview block that renders them the way WhatsApp will.
   ========================================================================== */

.template.is-disabled textarea,
.template.is-disabled .editor-tools { opacity: 0.55; }

.editor-tools {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  padding: 6px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
}
.editor-tools .tool {
  min-width: 30px; height: 28px; padding: 0 8px;
  display: inline-grid; place-items: center;
  border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--muted);
  font-size: 13px; line-height: 1; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.editor-tools .tool:hover { background: var(--surface-3); color: var(--text); }
.editor-tools .tool.mono { font-family: var(--mono); font-size: 11px; }
.editor-tools-hint { margin-left: auto; font-family: var(--mono); }

.emoji-picker { position: relative; display: inline-block; }
.emoji-picker > summary { list-style: none; }
.emoji-picker > summary::-webkit-details-marker { display: none; }
.emoji-menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  display: grid; grid-template-columns: repeat(8, 30px); gap: 2px;
  padding: 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.emoji-menu .emoji {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: none; border-radius: 6px; background: none; font-size: 17px; cursor: pointer;
}
.emoji-menu .emoji:hover { background: var(--surface-3); }

/* The preview imitates a WhatsApp bubble closely enough to trust. */
.wa-preview {
  margin-top: 8px; padding: 10px 12px; max-width: 480px;
  border-radius: 10px 10px 10px 2px;
  background: #144d37; color: #e7f5ec;
  font-size: 13px; line-height: 1.55;
  overflow-wrap: break-word;
}
.wa-preview code {
  font-family: var(--mono); font-size: 12px;
  background: rgba(0, 0, 0, 0.25); padding: 1px 4px; border-radius: 4px;
}
.wa-preview .ph { color: #9ad8b8; font-family: var(--mono); font-size: 12px; }

@media (max-width: 520px) {
  .editor-tools-hint { display: none; }
  .emoji-menu { grid-template-columns: repeat(6, 30px); }
}

/* ==========================================================================
   Gemini key manager
   --------------------------------------------------------------------------
   The add form is a proper boxed section rather than a strip of loose inputs,
   and each panel key opens an inline editor row under itself. The secret
   fields fight the browser's autofill on purpose: a password manager pasting
   a saved login into an API-key field is worse than no autofill at all.
   ========================================================================== */

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

/* --- shared field shape: label above input, no <br> hacks --- */
.key-add-form .field,
.key-editor .field { min-width: 0; }
.key-add-form .field label,
.key-editor .field label { margin-bottom: 6px; }
.key-add-form .field.grow,
.key-editor .field.grow { flex: 1 1 320px; }

/* --- input with a trailing button (show/hide the secret) --- */
.input-affix { position: relative; }
.input-affix input { width: 100%; padding-right: 42px; }
.affix-btn {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 38px; display: grid; place-items: center;
  background: none; border: none; border-left: 1px solid var(--border);
  border-radius: 0 8px 8px 0;
  color: var(--faint); cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.affix-btn:hover { color: var(--text); background: var(--surface-2); }
.affix-btn.is-on { color: var(--accent); }
.affix-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* --- the add-key box --- */
.key-add {
  margin: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(420px 140px at 0% 0%, rgba(79, 140, 255, 0.08), transparent 70%),
    var(--surface-2);
  overflow: hidden;
}
.key-add-head {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px 0;
}
.key-add-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center;
  color: #dce8ff;
  background: linear-gradient(135deg, var(--accent-dim), #2c2a5e);
  border: 1px solid rgba(79, 140, 255, 0.35);
}
.key-add-side { margin-left: auto; }
.key-add-form {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 14px 16px 16px;
}
.key-add-form .field { flex: 0 1 200px; }
.key-add-form > .btn { flex: 0 0 auto; }

/* --- the inline editor row --- */
.key-editor-row td {
  padding: 0 14px 14px;
  background: var(--surface-2);
  box-shadow: inset 0 3px 6px -4px rgba(0, 0, 0, 0.5);
}
tbody tr.key-editor-row:hover { background: transparent; }
.key-editor {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  background: var(--surface);
}
.key-editor .field { flex: 0 1 220px; }
.key-editor-actions { display: flex; gap: 8px; }

@media (max-width: 860px) {
  .key-actions { flex-wrap: wrap; }
  .key-add { margin: 12px; }
  .key-add-head { flex-wrap: wrap; }
  .key-add-side { margin-left: 0; width: 100%; }
  .key-add-form .field,
  .key-editor .field { flex: 1 1 100%; }
  .key-add-form > .btn,
  .key-editor-actions { width: 100%; }
  .key-editor-actions .btn { flex: 1; }
}

/* ==========================================================================
   Danger zone (Settings)
   --------------------------------------------------------------------------
   Red-edged on purpose: the eye must register "different rules apply here"
   before reading a word.
   ========================================================================== */

.danger-zone { border-color: #5c2323; }
.danger-zone .card-head {
  background: linear-gradient(180deg, rgba(240, 82, 82, 0.08), rgba(23, 28, 37, 0.6));
  border-bottom-color: #5c2323;
}
.danger-row {
  display: flex; gap: 18px; align-items: flex-start; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.danger-row:first-child { padding-top: 0; }
.danger-zone .danger-row + .small.faint { padding-top: 12px; }
.danger-text { flex: 1 1 380px; min-width: 0; }
.danger-form {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.danger-form input { max-width: 150px; }
.danger-form .btn-danger { white-space: nowrap; }

@media (max-width: 860px) {
  .danger-row { flex-direction: column; gap: 10px; }
  .danger-form { width: 100%; }
  .danger-form input { max-width: none; flex: 1 1 140px; }
}

/* ==========================================================================
   Mobile navigation
   --------------------------------------------------------------------------
   Under 860px the sidebar becomes an off-canvas drawer opened by the burger
   in the mobile bar. Driven by a checkbox so it works with JavaScript off;
   panel.js only adds "close on navigate" and Escape. Placed last so these
   rules win over the desktop sidebar without extra specificity.
   ========================================================================== */

.nav-check { position: absolute; opacity: 0; pointer-events: none; }
.mobile-bar { display: none; }
.nav-scrim { display: none; }

@media (max-width: 860px) {
  .mobile-bar {
    display: flex; align-items: center; gap: 6px;
    position: sticky; top: 0; z-index: 80;
    padding: 8px 12px;
    background: rgba(13, 17, 24, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }
  .mobile-bar .brand { padding: 0; }
  .mobile-bar .brand-mark { width: 28px; height: 28px; font-size: 12px; }
  .mobile-bar .brand-name { font-size: 13.5px; }

  /* Three lines that fold into a cross while the drawer is open. */
  .nav-burger {
    width: 42px; height: 42px; flex: 0 0 42px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border-radius: 10px; cursor: pointer;
    transition: background 140ms ease;
  }
  .nav-burger:hover { background: var(--surface-2); }
  .nav-burger span {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--text);
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0.25, 1), opacity 160ms ease;
  }
  .nav-check:checked ~ .mobile-bar .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-check:checked ~ .mobile-bar .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-check:checked ~ .mobile-bar .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(280px, 84vw); height: 100dvh;
    z-index: 90;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-105%);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0.25, 1);
    box-shadow: 24px 0 60px rgba(3, 6, 12, 0.55);
    border-right: 1px solid var(--border);
  }
  .nav-check:checked ~ .sidebar { transform: translateX(0); }

  /* Tapping anywhere outside the drawer closes it. */
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 85;
    background: rgba(4, 7, 13, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity 240ms ease;
  }
  .nav-check:checked ~ .nav-scrim { opacity: 1; pointer-events: auto; }

  /* The page behind the open drawer must not scroll under the thumb. */
  body:has(.nav-check:checked) { overflow: hidden; }

  /* One sticky bar is enough on a phone; the page header scrolls with it. */
  .topbar { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
}

/* ==========================================================================
   Login
   ========================================================================== */

.login-card {
  border-radius: 16px;
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(79, 140, 255, 0.06);
  background:
    radial-gradient(360px 160px at 50% -20%, rgba(79, 140, 255, 0.1), transparent 70%),
    var(--surface);
}
.login-card .btn { width: 100%; }