/* ══════════════════════════════════════════════════════════════════════════
   ARBSCAN — clean spread board

   One job: show where the same question is priced differently, and exactly
   what to buy where. Light, white cards, soft shadows, plain sans type —
   a normal fintech dashboard, not a hacker terminal. Colour means money
   (green up, red down) and platform identity (one pastel per venue) and
   nothing else.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:      #F2F4F8;
  --card:    #FFFFFF;
  --card-2:  #F7F8FA;
  --border:  #E7EAF0;
  --border-2:#DBE0E8;

  --text:    #101521;
  --text-2:  #5B6472;
  --text-3:  #929BA8;

  --blue:      #2F6FED;
  --blue-soft: #EAF0FE;
  --green:     #17A957;
  --green-soft:#E7F8EE;
  --red:       #E23F52;
  --red-soft:  #FCEBEE;
  --amber:     #C9820B;
  --amber-soft:#FBF1DE;

  --v-predicton:  #8B5CF6;
  --v-polymarket: #3B7CF6;
  --v-kalshi:     #0EA5A0;
  --v-limitless:  #F3770D;
  --v-manifold:   #E8408F;
  --v-sxbet:      #4338CA;
  --v-azuro:      #06B6D4;
  --v-smarkets:   #0F9D58;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 10px 28px -12px rgba(16, 24, 40, .16);
  --ease: cubic-bezier(.22, .8, .28, 1);

  --cols: minmax(220px, 1.6fr) 1fr 1fr 90px 96px 60px 34px;
}

[data-theme="dark"] {
  --bg:      #0E1116;
  --card:    #161B22;
  --card-2:  #1B212A;
  --border:  #262D38;
  --border-2:#333C4A;

  --text:    #EEF2F7;
  --text-2:  #9AA4B2;
  --text-3:  #626D7B;

  --blue:      #5B8DFF;
  --blue-soft: rgba(91,141,255,.14);
  --green:     #2FD98A;
  --green-soft:rgba(47,217,138,.13);
  --red:       #FF5D71;
  --red-soft:  rgba(255,93,113,.13);
  --amber:     #F0AC3F;
  --amber-soft:rgba(240,172,63,.13);

  --shadow: 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 16px 36px -14px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win. A class that sets `display` (e.g.
   `.gate { display: grid }`) out-specifies the browser's built-in
   `[hidden] { display: none }`, so `el.hidden = true` sets the attribute but the
   element stays on screen — which is exactly what kept the sign-in overlay
   visible after a successful login. This makes the attribute authoritative. */
[hidden] { display: none !important; }
::selection { background: var(--blue); color: #fff; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; border: 3px solid var(--bg); }

/* ─────────── topbar ─────────── */

.topbar {
  display: flex; align-items: center; gap: 16px;
  height: 68px; padding: 0 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}

.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; color: #fff;
  background: linear-gradient(145deg, var(--blue), #6D5CF8);
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-name { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }

.search {
  display: flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 14px; width: 300px;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.search:focus-within { border-color: var(--blue); background: var(--card); }
.search svg { width: 16px; height: 16px; color: var(--text-3); flex: 0 0 16px; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 13.5px; }
.search input::placeholder { color: var(--text-3); }

.tape { display: flex; align-items: center; gap: 20px; flex: 1; overflow: hidden; }
.tk { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-size: 13px; }
.tk b { font-weight: 700; color: var(--text-2); }
.tk .p { color: var(--text); font-weight: 600; }
.tk .c { font-size: 12px; font-weight: 600; }

.star-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 13px;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-2); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.star-toggle svg { width: 16px; height: 16px; }
.star-toggle em { font-style: normal; font-size: 12.5px; font-weight: 700; }
.star-toggle:hover { background: var(--card); border-color: var(--border-2); }
.star-toggle.on { color: var(--amber); background: var(--amber-soft); border-color: transparent; }
.star-toggle.on svg { fill: currentColor; }

.avatar-btn { background: none; border: 0; padding: 0; cursor: pointer; flex: 0 0 auto; }
.avatar {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700;
  background: linear-gradient(145deg, #6D5CF8, var(--blue));
}

/* ─────────── page ─────────── */

.page { max-width: 1280px; margin: 0 auto; padding: 28px 24px 60px; }

/* ─────────── hero ─────────── */

.hero { margin-bottom: 28px; }
.hero-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.hero-head h1 { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -.01em; }
.hero-head p { margin: 0; font-size: 13px; color: var(--text-3); }

.hero-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }

.hcard {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 18px; box-shadow: var(--shadow);
  cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s;
}
.hcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-2); }

.hcard-top { display: flex; align-items: center; justify-content: space-between; }
.hcard-venues { display: flex; align-items: center; gap: 8px; }
.vbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.vbadge i { width: 8px; height: 8px; border-radius: 50%; }
.hcard-arrow { color: var(--text-3); font-size: 13px; }

.hcard-pct { font-size: 22px; font-weight: 750; letter-spacing: -.02em; margin-top: 10px; }
.hcard-pct.pos { color: var(--green); }
.hcard-q { font-size: 13px; color: var(--text); margin-top: 6px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hcard-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--text-3); }
.hcard-meta .pill { padding: 2px 7px; border-radius: 999px; font-weight: 700; font-size: 10.5px; }

/* ─────────── board ─────────── */

.board {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
}

.board-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.board-tabs { display: flex; gap: 4px; background: var(--card-2); padding: 3px; border-radius: 10px; border: 1px solid var(--border); }
.btab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px;
  background: none; border: 0; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer; transition: background .15s, color .15s;
}
.btab:hover { color: var(--text); }
.btab.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.btab em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-3); }
.btab.on em { color: var(--blue); }
.btab[data-f="arb"].on em { color: var(--green); }

.board-status { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.board-status.busy .dot { background: var(--amber); animation: pulse 1.1s ease-in-out infinite; }
.board-status.dead .dot { background: var(--red); }
@keyframes pulse { 50% { opacity: .3 } }

/* table */

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

.thead {
  display: grid; grid-template-columns: var(--cols); gap: 16px;
  padding: 10px 18px;
  background: var(--card-2);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3);
  min-width: 880px;
}
.thead .r { text-align: right; }

/* Sortable column headers. */
.thead .sortable { cursor: pointer; user-select: none; transition: color .12s; display: inline-flex; align-items: center; gap: 4px; }
.thead .sortable.r { justify-content: flex-end; }
.thead .sortable:hover { color: var(--text-2); }
.thead .sortable.active { color: var(--blue); }
.thead .sort-caret { font-style: normal; font-size: 11px; line-height: 1; }

.tbody { min-width: 880px; }

.trow {
  display: grid; grid-template-columns: var(--cols); gap: 16px; align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.trow:last-child { border-bottom: 0; }
.trow:hover { background: var(--card-2); }

.t-q { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.t-q b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-q span {
  align-self: flex-start; max-width: 100%;
  font-size: 11px; color: var(--text-2); background: var(--card-2); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.trade-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 9px; min-width: 0;
}
.trade-chip.buy { background: var(--green-soft); }
.trade-chip.sell { background: var(--red-soft); }
.trade-chip .tag {
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 4px; color: #fff; flex: 0 0 auto;
}
.trade-chip.buy .tag { background: var(--green); }
.trade-chip.sell .tag { background: var(--red); }
.trade-chip .who { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trade-chip .px { font-size: 12.5px; font-weight: 700; color: var(--text); margin-left: auto; padding-left: 6px; flex: 0 0 auto; }

.t-spread { text-align: right; font-size: 13.5px; font-weight: 650; color: var(--text-2); }
.t-edge { text-align: right; }
.edge-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: 750;
  padding: 3px 9px; border-radius: 999px;
}
.edge-pill.pos { color: var(--green); background: var(--green-soft); }
.edge-pill.neg { color: var(--text-3); background: var(--card-2); }

.t-ends { text-align: right; font-size: 12.5px; color: var(--text-2); }

.t-star { display: flex; justify-content: flex-end; }
.star-btn {
  width: 26px; height: 26px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--border-2);
  opacity: 0; transition: opacity .15s, color .15s;
}
.trow:hover .star-btn { opacity: 1; }
.star-btn.on { opacity: 1; color: var(--amber); }
.star-btn svg { width: 15px; height: 15px; }

.exec-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 5px;
  color: var(--blue); background: var(--blue-soft);
}

.empty {
  display: grid; place-items: center; gap: 10px;
  padding: 70px 24px; text-align: center;
}
.empty svg { width: 36px; height: 36px; color: var(--text-3); opacity: .6; }
.empty b { font-size: 14px; }
.empty span { font-size: 12.5px; color: var(--text-3); max-width: 380px; }

.board-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; font-size: 12px; color: var(--text-3);
}
.more-btn {
  height: 32px; padding: 0 14px;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.more-btn:hover { background: var(--border); color: var(--text); }

/* ─────────── drawers ─────────── */

.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 20, 28, .38);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.scrim.on { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(460px, 94vw);
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transform: translateX(100%);
  transition: transform .26s var(--ease);
  overflow-y: auto;
}
.drawer.on { transform: none; }
.drawer > div { padding: 22px 22px 36px; }

.d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.d-title { font-size: 16px; font-weight: 700; line-height: 1.35; }
.d-kicker { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-3); margin-bottom: 6px; }
.d-close {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-2); cursor: pointer;
}
.d-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.d-tag { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--card-2); color: var(--text-2); }

.recipe { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.recipe-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: var(--card-2); border-bottom: 1px solid var(--border); }
.recipe-head span { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--text-3); }
.recipe-head b { font-size: 15px; }
.recipe-line { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; padding: 13px 14px; }
.recipe-line + .recipe-line { border-top: 1px solid var(--border); }
.rl-tag { display: grid; place-items: center; height: 24px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.rl-tag.buy { color: var(--green); background: var(--green-soft); }
.rl-tag.sell { color: var(--red); background: var(--red-soft); }
.rl-venue { font-size: 13.5px; font-weight: 700; }
.rl-link { font-size: 11.5px; color: var(--blue); }
.rl-px { font-size: 17px; font-weight: 700; }
.recipe-sum { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-top: 1px dashed var(--border-2); background: var(--card-2); }
.recipe-sum .big { font-size: 20px; font-weight: 750; }

.qtable { width: 100%; border-collapse: collapse; margin-top: 4px; }
.qtable th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--text-3); padding: 0 8px 7px 0; border-bottom: 1px solid var(--border); }
.qtable td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.qtable tr:last-child td { border-bottom: 0; }
.qtable .r { text-align: right; }

.note { padding: 11px 13px; border-radius: var(--r-sm); font-size: 12px; line-height: 1.55; margin-top: 14px; }
.note b { display: block; margin-bottom: 3px; font-size: 11px; }
.note-warn { color: #8A5A0A; background: var(--amber-soft); }
[data-theme="dark"] .note-warn { color: var(--amber); }
.note-info { color: var(--text-2); background: var(--card-2); border: 1px solid var(--border); }

/* account drawer */
.asec { margin-bottom: 22px; }
.asec h4 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-3); }
.abox { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.arow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; }
.arow + .arow { border-top: 1px solid var(--border); }
.arow .k { font-size: 12.5px; color: var(--text-2); }
.arow .k span { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
/* A real fault reads red; a venue that withdrew its price feed reads amber,
   because no amount of retrying on our side will bring it back. Both carry the
   venue's own wording in a title attribute. */
.arow .k span.v-failed { color: var(--red); cursor: help; }
.arow .k span.v-retired { color: var(--amber); cursor: help; }
.arow .v { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.who { display: flex; align-items: center; gap: 13px; padding: 4px 0 18px; }
.who-av { width: 50px; height: 50px; flex: 0 0 50px; display: grid; place-items: center; border-radius: 14px; color: #fff; font-size: 16px; font-weight: 700; background: linear-gradient(145deg, #6D5CF8, var(--blue)); }
.who-n { font-size: 14.5px; font-weight: 700; }
.who-s { font-size: 12px; color: var(--text-3); margin-top: 2px; }

.field-inp { height: 32px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: 7px; background: var(--card); font-size: 12.5px; outline: none; }
.field-inp:focus { border-color: var(--blue); }
.field-inp.num { width: 74px; text-align: right; }
.field-sel { height: 32px; padding: 0 8px; border: 1px solid var(--border-2); border-radius: 7px; background: var(--card); font-size: 12.5px; outline: none; }

.sw { position: relative; width: 34px; height: 20px; flex: 0 0 34px; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; background: var(--border-2); border-radius: 999px; transition: background .15s; }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); transition: transform .15s; }
.sw input:checked + i { background: var(--green); }
.sw input:checked + i::after { transform: translateX(14px); }

.chip-btn {
  height: 30px; padding: 0 12px; border-radius: 8px;
  background: var(--card-2); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.chip-btn:hover { background: var(--border); color: var(--text); }
.chip-btn.danger { color: var(--red); background: var(--red-soft); border-color: transparent; }

.pill-ok  { color: var(--green); background: var(--green-soft); font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 5px; }
.pill-err { color: var(--red); background: var(--red-soft); font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 5px; }

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: 13px; font-weight: 500;
  animation: tIn .22s var(--ease);
}
@keyframes tIn { from { opacity: 0; transform: translateY(8px) } }

/* ─────────── responsive ─────────── */

@media (max-width: 1080px) {
  .tape { display: none; }
}
@media (max-width: 760px) {
  .search { width: 160px; }
  .hero-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ─────────── sign-in gate ─────────── */

.gate {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 24px;
  /* A branded backdrop instead of flat grey — the first thing anyone sees. Two
     soft brand-tinted washes over the base bg, theme-aware via the tokens. */
  background:
    radial-gradient(1150px 640px at 12% -10%, color-mix(in srgb, var(--blue) 15%, transparent), transparent 58%),
    radial-gradient(950px 600px at 110% 114%, color-mix(in srgb, #6D5CF8 14%, transparent), transparent 55%),
    var(--bg);
}
/* A diffuse focal glow sitting behind the card, so it reads as lifted. */
.gate::before {
  content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 20%, transparent), transparent 70%);
  filter: blur(26px); opacity: .55; pointer-events: none;
}
.gate-card {
  position: relative;
  width: 100%; max-width: 392px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 30px 64px -30px rgba(16,24,40,.36);
  padding: 34px 32px 30px;
  display: flex; flex-direction: column;
  animation: gate-rise .5s var(--ease) both;
}
[data-theme="dark"] .gate-card { border-color: var(--border-2); box-shadow: 0 30px 72px -30px rgba(0,0,0,.82); }
@keyframes gate-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.gate-mark {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 14px; color: #fff; margin-bottom: 20px;
  background: linear-gradient(145deg, var(--blue), #6D5CF8);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--blue) 75%, transparent);
}
.gate-mark svg { width: 26px; height: 26px; }
.gate-card h1 { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.015em; }
.gate-card p { margin: 6px 0 22px; font-size: 13px; color: var(--text-3); line-height: 1.5; }

.gate-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.gate-field span { font-size: 12px; font-weight: 600; color: var(--text-2); }
.gate-field input {
  height: 42px; padding: 0 13px;
  background: var(--card-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  font-size: 14px; outline: none;
  transition: border-color .15s, background .15s;
}
.gate-field input:focus { border-color: var(--blue); background: var(--card); }

.gate-err {
  font-size: 12.5px; color: var(--red);
  background: var(--red-soft);
  border-radius: 8px; padding: 9px 12px; margin-bottom: 14px;
}

.gate-btn {
  height: 44px; border: 0; border-radius: 10px;
  background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 650; cursor: pointer;
  transition: filter .15s, transform .08s;
}
.gate-btn:hover { filter: brightness(1.06); }
.gate-btn:active { transform: translateY(1px); }
.gate-btn:disabled { opacity: .6; cursor: default; }

/* ─────────── account cabinet ─────────── */

.cabinet { max-width: 720px; margin: 0 auto; padding: 4px 4px 72px; }
.cab-head { margin-bottom: 20px; }
.cab-head h1 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.cab-head p { margin: 4px 0 0; font-size: 13px; color: var(--text-3); }

/* Status reads at a glance: the colour is the entitlement, not decoration. */
.cab-status {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 20px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--card);
  box-shadow: var(--shadow);
}
.cab-badge { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.cab-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.cab-status-r { text-align: right; flex: 0 0 auto; }
.cab-status-r b { display: block; font-size: 26px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cab-status-r span { font-size: 11px; color: var(--text-3); }
.cab-status.s-active  { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.cab-status.s-active  .cab-badge, .cab-status.s-active .cab-status-r b { color: var(--green); }
.cab-status.s-trial   { border-color: color-mix(in srgb, var(--blue) 40%, var(--border)); }
.cab-status.s-trial   .cab-badge, .cab-status.s-trial .cab-status-r b { color: var(--blue); }
.cab-status.s-expired { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.cab-status.s-expired .cab-badge { color: var(--red); }

.cab-trial {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; margin-bottom: 22px;
  border-radius: 14px; border: 1px solid transparent;
  background: linear-gradient(135deg, var(--blue-soft), color-mix(in srgb, #6D5CF8 10%, transparent));
}
.cab-trial b { display: block; font-size: 15px; font-weight: 700; }
.cab-trial span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.cab-trial-btn { flex: 0 0 auto; height: 40px; padding: 0 20px; font-size: 13.5px; border-radius: 10px; }

.cab-sec { margin-bottom: 22px; }
.cab-sec > h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }

.cab-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cab-plan {
  border: 1px solid var(--border); border-radius: 14px; padding: 18px;
  background: var(--card); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 4px;
}
.cab-plan-top { display: flex; align-items: center; gap: 8px; }
.cab-plan-top b { font-size: 14.5px; font-weight: 700; }
.cab-plan-note {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--green); background: var(--green-soft); padding: 2px 6px; border-radius: 5px;
}
.cab-plan-price { margin-top: 6px; }
.cab-plan-price b { font-size: 28px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cab-plan-price span { font-size: 13px; color: var(--text-3); font-weight: 600; }
.cab-plan-days { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
.cab-plan .btn { height: 38px; border-radius: 10px; font-size: 13.5px; margin-top: auto; }

.cab-note {
  margin-top: 12px; font-size: 12px; line-height: 1.55;
  color: var(--text-2); background: var(--card-2);
  border-radius: 9px; padding: 11px 13px;
}
.cab-note code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; background: var(--card); padding: 1px 5px; border-radius: 4px; }

.cab-invs { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cab-inv { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cab-inv + .cab-inv { border-top: 1px solid var(--border); }
.cab-inv-l { flex: 1 1 auto; min-width: 0; }
.cab-inv-l b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cab-inv-l span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.cab-inv-st {
  flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--card-2); color: var(--text-3);
}
.cab-inv-st.st-paid { color: var(--green); background: var(--green-soft); }
.cab-inv-st.st-pending { color: var(--amber); background: var(--amber-soft); }

.cab-pay-lead { margin: 0 0 14px; font-size: 13px; color: var(--text-2); line-height: 1.55; }
.cab-pay-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.cab-pay-row:last-of-type { border-bottom: 0; }
.cab-pay-row span { font-size: 12.5px; color: var(--text-3); flex: 0 0 auto; }
.cab-pay-row b { font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; }
.cab-copy { cursor: pointer; border-bottom: 1px dashed var(--border-2); }
.cab-copy:hover { color: var(--blue); border-bottom-color: var(--blue); }
.cab-addr { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; word-break: break-all; }

/* ─────────── bot panel ─────────── */

.bot-state {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-radius: var(--r);
  background: var(--card-2); border: 1px solid var(--border);
  margin-bottom: 12px;
}
.bot-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); flex: 0 0 9px; }
.bot-state.live .bot-dot { background: var(--green); }
.bot-state.dry .bot-dot { background: var(--amber); }
.bot-state b { font-size: 13px; }
.bot-state span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.bot-warn {
  font-size: 12px; line-height: 1.55;
  color: #8A5A0A; background: var(--amber-soft);
  border-radius: 8px; padding: 11px 13px; margin-top: 12px;
}
[data-theme="dark"] .bot-warn { color: var(--amber); }
.bot-warn b { display: block; margin-bottom: 3px; }

/* A one-sided fill is the only state that stops the bot outright, so it reads
   as an alarm rather than as another note. */
.bot-halt {
  font-size: 12px; line-height: 1.55;
  color: #8E1F1F; background: var(--red-soft);
  border-radius: 8px; padding: 12px 13px; margin-bottom: 12px;
}
[data-theme="dark"] .bot-halt { color: var(--red); }
.bot-halt b { display: block; margin-bottom: 3px; font-size: 12.5px; }
.bot-halt span { display: block; margin-bottom: 9px; }

.btn {
  height: 30px; padding: 0 12px; border-radius: 8px;
  background: var(--card-2); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--border); color: var(--text); }
.btn.sm { height: 26px; padding: 0 10px; font-size: 11.5px; }
.btn.primary { background: var(--blue); border-color: transparent; color: #fff; }
.btn.primary:hover { filter: brightness(1.06); background: var(--blue); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; pointer-events: none; }

/* ─── top navigation ─── */
.nav { display: flex; gap: 3px; margin-left: 6px; flex: 0 0 auto; }
.nav-pill {
  height: 32px; padding: 0 15px; border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 650; color: var(--text-3); cursor: pointer;
  transition: background .14s, color .14s;
}
.nav-pill:hover { color: var(--text); background: var(--card-2); }
.nav-pill.on { color: var(--blue); background: var(--blue-soft); }
@media (max-width: 720px) { .nav-pill { padding: 0 11px; } }

/* "Soon" tab: visible but inert, with a small badge. */
.nav-pill.soon { color: var(--text-3); cursor: not-allowed; display: inline-flex; align-items: center; gap: 6px; }
.nav-pill.soon:hover { background: transparent; color: var(--text-3); }
.nav-pill.soon em {
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--amber); background: var(--amber-soft); padding: 2px 5px; border-radius: 5px; line-height: 1;
}

.install-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  height: 32px; padding: 0 13px; margin-left: 6px; border: 0; border-radius: 9px;
  background: var(--blue); color: #fff; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: filter .14s;
}
.install-btn:hover { filter: brightness(1.07); }
.install-btn svg { display: block; }
@media (max-width: 720px) { .install-btn span { display: none; } .install-btn { padding: 0 10px; } }

/* ─── sniper tab shell ─── */
.sniper, .wiz { max-width: 720px; margin: 0 auto; padding: 4px 4px 72px; }
.sniper-loading { text-align: center; color: var(--text-3); padding: 60px 0; font-size: 14px; }

.sniper-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sniper-head h1 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.sniper-head p { margin: 4px 0 0; font-size: 13px; color: var(--text-3); }

/* ─── wizard ─── */
.wiz-head { margin-bottom: 22px; }
.wiz-head h1 { margin: 0; font-size: 25px; font-weight: 750; letter-spacing: -.02em; }
.wiz-head p { margin: 6px 0 0; font-size: 13.5px; color: var(--text-3); }

.wiz-steps { display: flex; align-items: center; gap: 0; margin-bottom: 22px; }
.wiz-dot { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; position: relative; }
.wiz-dot::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--border); margin: 0 8px; border-radius: 2px; }
.wiz-dot:last-child::after { display: none; }
.wiz-dot em {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 12px; font-weight: 700; background: var(--card-2); color: var(--text-3);
  border: 1px solid var(--border);
}
.wiz-dot span { font-size: 12px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.wiz-dot.on em { background: var(--blue); color: #fff; border-color: transparent; }
.wiz-dot.on span { color: var(--text); }
.wiz-dot.done em { background: var(--green-soft); color: var(--green); border-color: transparent; }
.wiz-dot.done::after { background: var(--green); }
@media (max-width: 560px) { .wiz-dot span { display: none; } }

.wiz-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px; box-shadow: 0 1px 2px rgba(16,21,33,.04), 0 12px 30px -22px rgba(16,21,33,.3);
}
.wiz-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 14px; }
.wiz-lead { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 16px; max-width: 60ch; }

.choices { display: grid; gap: 12px; }
.choice { border: 1.5px solid var(--border); border-radius: 12px; padding: 15px 16px; cursor: pointer; transition: border-color .14s, background .14s; }
.choice:hover { border-color: var(--border-2); }
.choice.on { border-color: var(--blue); background: var(--blue-soft); }
.choice-top { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.choice-top b { font-size: 14.5px; }
.choice-tag { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--green); background: var(--green-soft); padding: 2px 7px; border-radius: 5px; }
.choice p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

.wiz-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.wiz-list li { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.wiz-list code, .wiz-note code, .choice code { font-family: ui-monospace, Menlo, monospace; font-size: .86em; background: var(--card-2); padding: 1px 6px; border-radius: 5px; }

.wiz-fields { display: flex; flex-direction: column; gap: 2px; }
.wiz-field { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.wiz-field:last-child { border-bottom: 0; }
.wiz-fk b { font-size: 13.5px; font-weight: 650; display: block; }
.wiz-fk span { font-size: 11.5px; color: var(--text-3); }
.wiz-fv { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.wiz-fv .suffix { font-size: 12px; color: var(--text-3); width: 12px; }

.wiz-note { margin-top: 16px; font-size: 12px; color: var(--text-3); line-height: 1.55; background: var(--card-2); border-radius: 9px; padding: 11px 13px; }
.wiz-warn { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: #8A5A0A; background: var(--amber-soft); border-radius: 9px; padding: 12px 14px; }
[data-theme="dark"] .wiz-warn { color: var(--amber); }
.wiz-warn b { display: block; margin-bottom: 3px; }

.wiz-summary { display: flex; flex-direction: column; gap: 0; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.sumrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 13px; }
.sumrow + .sumrow { border-top: 1px solid var(--border); }
.sumrow span { color: var(--text-3); }
.sumrow b { font-weight: 650; font-variant-numeric: tabular-nums; }

.wiz-rails h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-3); }
.rail { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.rail i { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; color: var(--green); background: var(--green-soft); margin-top: 1px; }

.wiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.wiz-nav .btn { height: 40px; padding: 0 22px; font-size: 13.5px; border-radius: 10px; }

/* wizard: "nothing to install" step */
.wiz-ok { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 11px; background: var(--green-soft); margin-bottom: 14px; }
.wiz-ok i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; color: #fff; background: var(--green); }
.wiz-ok b { font-size: 13.5px; display: block; }
.wiz-ok span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
[data-theme="dark"] .wiz-ok b { color: var(--text); }

.wiz-fold { border: 1px solid var(--border); border-radius: 10px; padding: 4px 14px; }
.wiz-fold-sum { cursor: pointer; font-size: 12.5px; font-weight: 650; color: var(--text-2); padding: 9px 0; list-style: none; }
.wiz-fold-sum::-webkit-details-marker { display: none; }
.wiz-fold-sum::before { content: "▸ "; color: var(--text-3); }
.wiz-fold[open] .wiz-fold-sum::before { content: "▾ "; }
.wiz-fold-body { padding: 4px 0 12px; }
.wiz-fold-body p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 12px; }

/* live paper sniper (in-panel, zero install) */
.live-sniper { border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow: hidden; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(16,21,33,.04), 0 12px 30px -22px rgba(16,21,33,.3); }
.live-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--card-2); }
.live-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.live-dot.on { background: var(--amber); box-shadow: 0 0 0 0 rgba(201,130,11,.5); animation: livepulse 1s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(201,130,11,.45); } 70% { box-shadow: 0 0 0 8px rgba(201,130,11,0); } 100% { box-shadow: 0 0 0 0 rgba(201,130,11,0); } }
.live-h { flex: 1 1 auto; min-width: 0; }
.live-h b { font-size: 13.5px; display: block; }
.live-h span { font-size: 11.5px; color: var(--text-3); }
.live-stats { display: flex; gap: 18px; flex: 0 0 auto; }
.lst { text-align: right; }
.lst b { font-family: ui-monospace, Menlo, monospace; font-size: 15px; font-variant-numeric: tabular-nums; display: block; letter-spacing: -.01em; }
.lst.good b { color: var(--green); }
.lst span { font-size: 10px; color: var(--text-3); }
@media (max-width: 560px) { .live-stats { display: none; } }

.live-feed { max-height: 260px; overflow-y: auto; padding: 6px 0; }
.live-row { padding: 9px 18px; font-size: 12.5px; }
.live-row + .live-row { border-top: 1px solid var(--card-2); }
.live-row.muted { color: var(--text-3); }
.lr-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.lr-head b { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.lr-mkt { color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-leg { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--text-2); line-height: 1.7; }
.lr-leg.ok { color: var(--green); }
.lr-leg.kill { color: var(--red); }

/* connections hub */
.dash-sec { margin-bottom: 18px; }
.dash-sec > h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-3); }
.conns { display: flex; flex-direction: column; gap: 8px; }
.conn { border: 1px solid var(--border); border-radius: 11px; background: var(--card); overflow: hidden; transition: border-color .14s; }
.conn.open { border-color: var(--border-2); }
.conn.done { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.conn-top { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.conn-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.conn-name { flex: 1 1 auto; min-width: 0; }
.conn-name b { font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; }
.conn-name span { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.conn-badge { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); background: var(--blue-soft); padding: 1px 6px; border-radius: 4px; }
.conn-pill { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--text-3); padding: 3px 9px; border-radius: 999px; background: var(--card-2); }
.conn-pill.ok { color: var(--green); background: var(--green-soft); }
.conn-pill.muted { color: var(--text-3); }
.conn.blocked { opacity: .72; }
.conn.blocked .conn-name span { line-height: 1.4; }
.conn-body { padding: 14px; border-top: 1px solid var(--border); background: var(--card-2); }

.conn-panel { display: flex; flex-direction: column; gap: 10px; }
.conn-open { align-self: flex-start; height: 34px; padding: 0 14px; font-size: 12.5px; }
.conn-hint { margin: 0; font-size: 12px; color: var(--text-2); line-height: 1.5; max-width: 60ch; }
.conn-field { display: flex; flex-direction: column; gap: 4px; }
.conn-field span { font-size: 11.5px; font-weight: 600; color: var(--text-2); }

.field-inp.paste {
  min-height: 78px; padding: 10px 12px; font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; line-height: 1.5; resize: vertical; text-align: left;
}

.conn-status { min-height: 18px; font-size: 12px; color: var(--text-3); }
.conn-status.busy { color: var(--text-2); }
.conn-status.good { color: var(--green); font-weight: 650; }
.conn-status.partial { color: var(--amber); font-weight: 600; }
.conn-status.bad { color: var(--red); }

.btn.autoimport {
  align-self: stretch; height: 40px; padding: 0 16px; font-size: 13.5px; font-weight: 650;
  background: var(--green); color: #fff; border: 0; border-radius: 10px; cursor: pointer;
}
.btn.autoimport:hover:not(:disabled) { filter: brightness(1.06); }
.btn.autoimport:disabled { opacity: 0.55; cursor: default; }
.conn-or { text-align: center; margin: 4px 0 -2px; }
.conn-or span { font-size: 11px; color: var(--text-3); background: var(--card-2); padding: 0 8px; }

.vcheck { font-size: 11px; color: var(--text-3); margin-right: 8px; max-width: 180px; text-align: right; line-height: 1.3; }
.vcheck.good { color: var(--green); }
.vcheck.bad { color: var(--red); }

/* An RSA private key is ~1700 characters of base64 — it needs a box, not a line. */
.field-inp.pem {
  width: 190px; height: 58px; padding: 7px 9px; text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; line-height: 1.35; resize: vertical;
}

.asec h4 .tagline {
  margin-left: 7px; font-weight: 600; color: var(--text-3);
  letter-spacing: 0; text-transform: none;
}
.bot-log-row .act.rejected { color: var(--text-3); }

.bot-log { max-height: 210px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r); }
.bot-log-row {
  display: flex; align-items: baseline; gap: 9px;
  padding: 8px 12px; font-size: 11.5px;
  border-bottom: 1px solid var(--border);
}
.bot-log-row:last-child { border-bottom: 0; }
.bot-log-row time { color: var(--text-3); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.bot-log-row .act { font-weight: 700; flex: 0 0 auto; }
.bot-log-row .act.dry { color: var(--amber); }
.bot-log-row .act.placed { color: var(--green); }
.bot-log-row .act.partial, .bot-log-row .act.halted { color: var(--red); }
.bot-log-row .what { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.blockers { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.blocker { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-3); }
.blocker b { color: var(--text-2); font-variant-numeric: tabular-nums; }

.gate-switch {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 18px; font-size: 12.5px; color: var(--text-3);
}
.gate-switch button {
  background: none; border: 0; padding: 0;
  color: var(--blue); font-size: 12.5px; font-weight: 650;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.gate-switch button:hover { filter: brightness(1.15); }

/* deposit addresses in the payment sheet */
.cab-dep { border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; margin-bottom: 10px; background: var(--card-2); }
.cab-dep-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.cab-dep-top b { font-size: 13px; font-weight: 650; }
.cab-dep-top span { font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--green); background: var(--green-soft); padding: 2px 7px; border-radius: 5px; }
.cab-dep .cab-addr { display: block; text-align: left; padding: 8px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.cab-err { color: var(--red); font-size: 12px; font-weight: 600; }

/* ─────────── admin panel ─────────── */

.adm-mark { background: linear-gradient(145deg, #101521, #39415a) !important; }
.adm-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); background: var(--card-2); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 5px; margin-left: 8px;
}

.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.adm-stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--shadow);
}
.adm-stat b { display: block; font-size: 26px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.adm-stat span { font-size: 11.5px; color: var(--text-3); }
.adm-stat.good b { color: var(--green); }
.adm-stat.bad b { color: var(--red); }

.adm-sec { margin-bottom: 28px; }
.adm-sec > h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }

.adm-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); }
.adm-tr { display: grid; grid-template-columns: 1.6fr .8fr .9fr .5fr 1.5fr; gap: 12px; align-items: center; padding: 11px 14px; }
.adm-tr4 { grid-template-columns: 1.4fr .7fr .7fr 1.4fr; }
.adm-tr + .adm-tr { border-top: 1px solid var(--border); }
.adm-th { background: var(--card-2); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.adm-tr b { font-size: 13.5px; }
.adm-sub { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.adm-mono { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-2); }
.adm-actions { display: flex; align-items: center; gap: 6px; }
.adm-sel { height: 28px; padding: 0 8px; font-size: 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--card); color: var(--text); }

.adm-badge { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--card-2); color: var(--text-3); }
.adm-badge.b-active { color: var(--green); background: var(--green-soft); }
.adm-badge.b-trial { color: var(--blue); background: var(--blue-soft); }
.adm-badge.b-expired { color: var(--red); background: var(--red-soft); }

.adm-pool { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.adm-poolcard { border: 1px solid var(--border); border-radius: 12px; padding: 15px 16px; background: var(--card); }
.adm-poolcard.low { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
.adm-poolcard > b { font-size: 13px; }
.adm-poolnum { margin: 6px 0 2px; font-size: 12px; color: var(--text-3); }
.adm-poolnum span { font-size: 24px; font-weight: 750; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-right: 5px; }
.adm-warn { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--red); }

.adm-denied { max-width: 520px; margin: 60px auto; text-align: center; }
.adm-denied h2 { margin: 0 0 8px; font-size: 20px; font-weight: 750; }
.adm-denied p { margin: 0 0 18px; font-size: 13px; color: var(--text-3); line-height: 1.6; }

@media (max-width: 760px) {
  .adm-tr, .adm-tr4 { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .adm-th { display: none; }
}