/* ═══════════════════════════════════════════════════════════════
   Limited Sniper — Nocturne (Claude Design system)
   Deep indigo surfaces, one blurple accent, quiet hairlines.
   Display/UI: Inter · Data: Spline Sans Mono
   Legacy token names (--brass, --bg0…) kept so every page and
   app.js inline style picks up the new skin without edits.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg0: #161826;
  --bg1: #232532;
  --bg2: #2B2D3C;
  --bg3: #343649;
  --line:  rgba(233, 233, 237, .10);
  --line2: rgba(233, 233, 237, .18);

  --text:  #E9E9ED;
  --text2: #A3A4B2;
  --text3: #6E7084;

  --brass:      #9184D9;
  --brass-hi:   #B5ABFC;
  --brass-dim:  rgba(145, 132, 217, .13);
  --brass-line: rgba(145, 132, 217, .38);
  --brass-ink:  #161826;

  --green: #43D992;
  --red:   #F17A7A;
  --blue:  #7CACF8;
  --yellow:#E8C468;

  /* aliases app.js writes as inline styles */
  --neon:  var(--green);
  --text-2: var(--text2);
  --text-3: var(--text3);

  --font-display: 'Inter', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, sans-serif;
  --font-data:    'Spline Sans Mono', ui-monospace, monospace;

  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 7px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  background: var(--bg0);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.hidden, [hidden] { display: none !important; }

::selection { background: var(--brass-line); color: var(--text); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 8px; border: 2px solid var(--bg0); }
::-webkit-scrollbar-track { background: transparent; }

#app {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 22px 60px;
}

/* ── Inputs ─────────────────────────────────────────────────── */
input, textarea, select {
  width: 100%;
  background: var(--bg0);
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13.5px;
  padding: 9px 12px;
  transition: border-color .15s;
}
input[type="number"] { font-family: var(--font-data); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brass); }
input::placeholder, textarea::placeholder { color: var(--text3); }
textarea { resize: vertical; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 15px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--brass); color: var(--brass-ink); }
.btn-primary:hover:not(:disabled) { background: var(--brass-hi); }

.btn-ghost {
  background: transparent;
  border-color: var(--line2);
  color: var(--text2);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--text3); color: var(--text); }

.btn-danger { color: var(--red); }
.btn-danger:hover:not(:disabled) { border-color: var(--red); color: var(--red); }

.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-xs { padding: 4px 8px;  font-size: 11.5px; }

.btn-icon-only { background: transparent; border-color: var(--line2); color: var(--text2); padding: 8px 9px; }
.btn-icon-only:hover { border-color: var(--text3); color: var(--text); }

.btn-run {
  background: var(--brass);
  color: var(--brass-ink);
  font-weight: 700;
  letter-spacing: .02em;
  min-width: 96px;
  justify-content: center;
}
.btn-run:hover { background: var(--brass-hi); }
.btn-run.running {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}
.btn-run.running:hover { background: rgba(241, 122, 122, .1); }

.btn-copied { border-color: var(--green); color: var(--green); }

/* ═══ Header ════════════════════════════════════════════════ */
header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 2px 13px;
  background: color-mix(in srgb, var(--bg0) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* signature: brass hairline that breathes only while the bot runs */
.armed-line {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass) 30%, var(--brass) 70%, transparent);
  opacity: 0;
  transition: opacity .5s;
}
body.running .armed-line { opacity: .8; animation: armedBreathe 3s ease-in-out infinite; }
@keyframes armedBreathe { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.logo-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--brass-line);
  border-radius: var(--r-md);
  color: var(--brass);
  background: var(--brass-dim);
}
.logo-mark svg { width: 19px; height: 19px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: .01em;
}
.brand-name b { font-weight: 700; color: var(--brass); }
.brand-tagline {
  font-family: var(--font-data);
  font-size: 9.5px;
  color: var(--text3);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* header ticker cells */
.header-center { display: flex; gap: 8px; margin-left: 8px; }
.tk {
  position: relative;
  min-width: 84px;
  padding: 6px 12px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg1);
}
.tk-lbl {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
}
.tk-lbl .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
.tk-lbl .d.muted { background: var(--text3); }
.tk-lbl .d.red   { background: var(--red); }
.tk-lbl .d.amber { background: var(--brass); }
.tk-lbl .d.tk-tick { animation: tkTick .6s ease-out; }
@keyframes tkTick { 0% { box-shadow: 0 0 0 0 var(--brass-line); } 100% { box-shadow: 0 0 0 7px transparent; } }

.tk-val {
  display: flex; align-items: baseline; gap: 3px;
  font-family: var(--font-data);
  font-size: 16.5px;
  font-weight: 600;
  margin-top: 1px;
}
.tk-val .u { font-size: 10.5px; color: var(--text3); font-weight: 500; }
.tk-trend { font-size: 10px; color: var(--green); font-weight: 500; }
.tk.alerts.has .tk-val { color: var(--red); }
.tk-spark { position: absolute; right: 10px; bottom: 7px; width: 60px; height: 14px; }
.tk-spark rect.sb-on    { fill: var(--brass); }
.tk-spark rect.sb-empty { fill: var(--bg3); }
.tk.budget { cursor: pointer; }
.tk.budget:hover { border-color: var(--line2); }
.tk.budget.empty .tk-val { color: var(--text3); }
.tk-usd { font-size: 10px; color: var(--text3); font-family: var(--font-data); }

.header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.toggle-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  color: var(--text3);
  padding: 8px 9px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.toggle-chip:hover { color: var(--text2); border-color: var(--text3); }
.toggle-chip.active { color: var(--brass); border-color: var(--brass-line); background: var(--brass-dim); }

.burst-chip .burst-chip-label {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.burst-chip .burst-chip-lock { display: none; }
body.is-free .burst-chip .burst-chip-lock { display: inline-flex; align-items: center; }
body.is-free .burst-chip .burst-chip-label { opacity: .6; }
.burst-chip.active { color: var(--brass); border-color: var(--brass); background: var(--brass-dim); }

.auth-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 5px 11px 5px 6px;
  cursor: pointer;
  color: var(--text);
  transition: border-color .15s;
}
.auth-chip:hover { border-color: var(--line2); }
.auth-avatar {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--brass-dim);
  color: var(--brass);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
}
.auth-chip.no-auth .auth-avatar { background: var(--bg3); color: var(--text3); }
.auth-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.auth-user { font-size: 12px; font-weight: 600; }
.auth-tag  { font-size: 10px; color: var(--text3); }
.auth-chip.no-auth .auth-user { color: var(--text2); }
.auth-chip.no-auth .auth-tag  { color: var(--brass); }

.ws-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: .1em;
  padding: 6px 10px;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--text3);
}
.ws-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); }
.ws-chip.connected .ws-dot { background: var(--green); }
.ws-chip.connected { color: var(--text2); }
.ws-chip.disconnected .ws-dot { background: var(--red); animation: wsBlink 1.1s infinite; }
@keyframes wsBlink { 50% { opacity: .3; } }

.rate-limit-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 99px;
  border: 1px solid var(--yellow);
  color: var(--yellow);
}
.rl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); animation: wsBlink 1.1s infinite; }

.plan-chip {
  border: 1px solid var(--line2);
  border-radius: 99px;
  background: transparent;
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text3);
}
.plan-chip.plan-pro { border-color: var(--brass-line); color: var(--brass); background: var(--brass-dim); }
.plan-chip.plan-free:hover { color: var(--text2); border-color: var(--text3); }

/* ═══ View nav ══════════════════════════════════════════════ */
.view-nav {
  display: flex; align-items: center; gap: 6px;
  padding: 16px 2px 0;
}
.view-tab {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--text3);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 15px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.view-tab:hover { color: var(--text2); }
.view-tab.active {
  background: var(--bg1);
  border-color: var(--line);
  color: var(--text);
}
.view-tab.active svg { color: var(--brass); }
.view-tab-count {
  font-family: var(--font-data);
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--bg3);
  color: var(--text2);
}
.view-tab.active .view-tab-count { background: var(--brass-dim); color: var(--brass); }
.view-tab-live {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-data);
  font-size: 8.5px;
  letter-spacing: .12em;
  color: var(--green);
}
.vt-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: wsBlink 1.6s infinite; }
.view-nav-meta { margin-left: auto; font-size: 12px; color: var(--text3); font-family: var(--font-data); }

/* ═══ Main layout ═══════════════════════════════════════════ */
main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 18px;
  padding-top: 16px;
  align-items: start;
}
main.view-hidden { display: none; }

.panel {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.panel-title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .01em;
}
.panel-count { font-family: var(--font-data); font-size: 11.5px; color: var(--text3); font-weight: 500; margin-left: 4px; }
.panel-title-wrap { display: flex; align-items: center; gap: 10px; }
.live-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-data);
  font-size: 8.5px;
  letter-spacing: .14em;
  color: var(--green);
  border: 1px solid rgba(67, 217, 146, .3);
  border-radius: 99px;
  padding: 3px 8px;
}
.lp-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: wsBlink 1.6s infinite; }

.btn-add {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brass);
  border: none;
  border-radius: var(--r-sm);
  color: var(--brass-ink);
  font-weight: 700;
  font-size: 12.5px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s;
}
.btn-add:hover { background: var(--brass-hi); }
.btn-add svg { width: 13px; height: 13px; }

/* ═══ Watchlist cards ═══════════════════════════════════════ */
.items-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 14px;
}

.item-card {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.item-card:hover { border-color: var(--line2); }

/* state edges */
.item-card.alert   { border-color: var(--green); }
.item-card.spike   { border-color: var(--blue); }
.item-card.bigdrop { border-color: var(--yellow); }
.item-card.is-hot  { border-color: var(--brass); }

.sq-media {
  position: relative;
  aspect-ratio: 1.6;
  background: var(--bg3);
  overflow: hidden;
}
.sq-img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.sq-img-ph { width: 100%; height: 100%; animation: phPulse 1.6s ease-in-out infinite; background: var(--bg3); }
@keyframes phPulse { 50% { opacity: .55; } }

/* card name lives in the body — the media baseline strip is redundant */
.sq-baseline { display: none; }

/* burst polling sweep on the media */
.poll-sweep {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(240,180,84,.14) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: pollSweep 1.4s linear infinite;
  pointer-events: none;
}
@keyframes pollSweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

.sq-overlay { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 10px; }

.sq-actions {
  position: absolute; top: 8px; right: 8px;
  display: flex; gap: 5px;
  opacity: 0;
  transition: opacity .15s;
}
.item-card:hover .sq-actions { opacity: 1; }
.btn-edit, .btn-remove {
  display: grid; place-items: center;
  width: 27px; height: 27px;
  background: color-mix(in srgb, var(--bg0) 82%, transparent);
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  color: var(--text2);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.btn-edit:hover { color: var(--brass); border-color: var(--brass-line); }
.btn-remove:hover { color: var(--red); border-color: var(--red); }

.sq-head { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sq-title {
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sq-id { font-family: var(--font-data); font-size: 10px; color: var(--text3); }

.sq-stats {
  display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}
.sq-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sq-stat-l { font-size: 11px; color: var(--text3); }
.sq-stat-v { font-family: var(--font-data); font-size: 13px; font-weight: 600; }
.sq-stat-v i { font-style: normal; font-size: 10px; color: var(--text3); font-weight: 400; }
.sq-stat-value  .sq-stat-v { color: var(--green); }
.sq-stat-rap    .sq-stat-v { color: var(--blue); }
.sq-stat-target .sq-stat-v { color: var(--brass); }

.sq-note {
  font-size: 11.5px;
  color: var(--text3);
  background: var(--bg1);
  border: 1px dashed var(--line2);
  border-radius: var(--r-sm);
  padding: 6px 9px;
}
.sq-note.no-auth { color: var(--brass); border-color: var(--brass-line); cursor: pointer; }

.sq-status { display: flex; flex-wrap: wrap; gap: 5px; }
.status-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-data);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid var(--line2);
  color: var(--text2);
}
.status-tag .tag-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-tag.waiting   { color: var(--text3); }
.status-tag.snipe     { color: var(--green);  border-color: var(--green);  animation: wsBlink 1s infinite; }
.status-tag.spike-tag { color: var(--blue);   border-color: var(--blue); }
.status-tag.drop-tag  { color: var(--yellow); border-color: var(--yellow); }
.status-tag.burst-tag { color: var(--brass);  border-color: var(--brass-line); }
.status-tag.auto-on   { color: var(--brass); }
.status-tag.limit-on  { color: var(--red); border-color: var(--red); }

.intent-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-data);
  font-size: 9px; font-weight: 600; letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 99px;
}
.intent-badge .ib-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.intent-snipe { background: var(--brass-dim); color: var(--brass); }
.intent-watch { background: var(--bg3); color: var(--text2); }

/* add-card */
.add-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 20px 16px;
  border: 1px dashed var(--line2);
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.add-card:hover { border-color: var(--brass-line); background: var(--brass-dim); }
.add-card .plus {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line2);
  color: var(--text3);
  transition: color .15s, border-color .15s;
}
.add-card:hover .plus { color: var(--brass); border-color: var(--brass-line); }
.add-card .plus svg { width: 15px; height: 15px; }
.add-card .t1 {
  font-family: var(--font-data);
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text2);
}
.add-card .t2 { font-size: 12px; color: var(--text3); max-width: 300px; }
.add-card .kbd {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text3);
  border: 1px solid var(--line2);
  border-radius: 5px;
  padding: 2px 7px;
}
.add-card.first-run { grid-column: 1 / -1; min-height: 260px; }
.add-empty-hints { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.ae-hint { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text2); }
.ae-step {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brass-dim);
  color: var(--brass);
  font-family: var(--font-data);
  font-size: 10.5px; font-weight: 600;
}

/* ═══ Activity feed ═════════════════════════════════════════ */
.panel-log {
  display: flex; flex-direction: column;
  min-height: 480px;
  max-height: calc(100vh - 210px);
  position: sticky; top: 84px;
}

.feed-actions { display: flex; align-items: center; gap: 8px; }
.log-date-select {
  width: auto;
  font-size: 11.5px;
  padding: 5px 8px;
  color: var(--text3);
  background: transparent;
}
.btn-clear {
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  color: var(--text3);
  font-size: 11.5px;
  padding: 5px 10px;
  cursor: pointer;
}
.btn-clear:hover { color: var(--red); border-color: var(--red); }

.feed-filters { display: flex; gap: 4px; margin-bottom: 10px; }
.feed-filters .f {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text3);
  padding: 4px 10px;
  border-radius: 99px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.feed-filters .f:hover { color: var(--text2); }
.feed-filters .f.active { background: var(--bg3); color: var(--text); }
.feed-filters .cnt { font-family: var(--font-data); font-size: 10px; color: var(--text3); }

.log-shell { position: relative; flex: 1; min-height: 0; display: flex; }
.log-container { flex: 1; overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 2px; }

/* filter visibility (mapping mirrors updateFeedCounts) */
.log-container[data-filter="snipes"] .log-entry:not(.snipe):not(.buy-ok):not(.buy-try):not(.spike-log):not(.drop-log):not(.drop) { display: none; }
.log-container[data-filter="info"]   .log-entry:not(.info) { display: none; }
.log-container[data-filter="errors"] .log-entry:not(.error):not(.warn) { display: none; }
.log-container:not([data-filter="all"]) .log-day-divider { display: none; }

.log-day-divider { display: flex; padding: 10px 0 5px; }
.ldd {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--font-data);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text3);
}
.ldd b { color: var(--text2); font-weight: 600; }
.ldd-meta { font-size: 9px; opacity: .7; }

.log-entry {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas: "time tag" "time msg";
  column-gap: 10px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border-left: 2px solid var(--line2);
  background: var(--bg2);
  font-size: 12.5px;
}
.log-entry .time {
  grid-area: time;
  font-family: var(--font-data);
  font-size: 10.5px;
  color: var(--text3);
  padding-top: 1px;
}
.log-entry .tag {
  grid-area: tag;
  font-family: var(--font-data);
  font-size: 9px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text3);
}
.log-entry .msg { grid-area: msg; color: var(--text2); overflow-wrap: anywhere; }
.msg-name { color: var(--text); font-weight: 600; }
.msg-sep { color: var(--text3); margin: 0 5px; }
.msg-old { color: var(--text3); text-decoration: line-through; }
.msg-arrow { color: var(--text3); margin: 0 4px; }
.msg-new { color: var(--text); font-weight: 600; }

.pill {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 9.5px; font-weight: 600;
  padding: 1px 7px;
  border-radius: 99px;
  margin-left: 6px;
  vertical-align: 1px;
}
.pill-discount { background: rgba(67, 217, 146, .13); color: var(--green); }
.pill-account  { background: var(--bg3); color: var(--text2); }

.log-entry.snipe     { border-left-color: var(--green); }
.log-entry.snipe .tag { color: var(--green); }
.log-entry.buy-ok    { border-left-color: var(--green); background: rgba(67, 217, 146, .07); }
.log-entry.buy-ok .tag { color: var(--green); }
.log-entry.buy-try   { border-left-color: var(--brass); }
.log-entry.buy-try .tag { color: var(--brass); }
.log-entry.spike-log { border-left-color: var(--blue); }
.log-entry.spike-log .tag { color: var(--blue); }
.log-entry.drop-log, .log-entry.drop { border-left-color: var(--yellow); }
.log-entry.error     { border-left-color: var(--red); }
.log-entry.error .tag { color: var(--red); }
.log-entry.warn      { border-left-color: var(--yellow); }
.log-entry.warn .tag { color: var(--yellow); }

/* empty feed */
.log-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px;
  text-align: center;
  padding: 20px;
}
.le-icon { position: relative; color: var(--text3); }
.le-pulse {
  position: absolute; inset: -9px;
  border: 1px solid var(--line2);
  border-radius: 50%;
  animation: lePulse 2.4s ease-out infinite;
}
@keyframes lePulse { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
.le-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.le-sub { font-size: 12.5px; color: var(--text3); max-width: 300px; }
.le-actions { margin-top: 4px; }
.le-tips {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 14px;
  max-width: 320px;
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.le-tips-lbl {
  font-family: var(--font-data);
  font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass);
  flex: none;
}
.le-tips-text { font-size: 11.5px; color: var(--text3); transition: opacity .22s; }
.le-tips-text.le-tips-fade { opacity: 0; }

/* ═══ Deals view ════════════════════════════════════════════ */
.view-deals { padding-top: 16px; }
.deals-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.deals-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.deals-sub { font-size: 12.5px; color: var(--text3); }
.deals-sub b { color: var(--text2); }
.deals-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.deals-sort {
  display: flex; gap: 4px;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 3px;
}
.deals-sort-btn {
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text3);
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.deals-sort-btn:hover { color: var(--text2); }
.deals-sort-btn.active { background: var(--bg3); color: var(--text); }

.deals-scan {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text3);
}
.deals-scan-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: wsBlink 1.6s infinite; }

/* Deals filter bar — mirrors rolimons.com/deals controls */
.deals-filters {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg1);
  margin-bottom: 10px;
}
.df-group { display: inline-flex; align-items: center; gap: 8px; }
.df-label { font-size: 11.5px; color: var(--text3); font-weight: 600; white-space: nowrap; }
.df-select {
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  padding: 5px 8px; cursor: pointer;
}
.df-seg { padding: 2px; }
.df-seg .deals-sort-btn { padding: 5px 10px; }
.df-spacer { flex: 1; }
.df-count { font-family: var(--font-data); font-size: 11px; color: var(--text3); }

.df-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text3);
}
.df-toggle-track {
  width: 34px; height: 18px; border-radius: 9px;
  background: var(--bg3); border: 1px solid var(--line);
  position: relative; transition: background .15s, border-color .15s;
}
.df-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text3); transition: transform .15s, background .15s;
}
.df-toggle.on .df-toggle-track { background: var(--brass); border-color: var(--brass); }
.df-toggle.on .df-toggle-knob  { transform: translateX(16px); background: #fff; }
.df-toggle.on { color: var(--text); }

.deal-projected {
  display: inline-block; margin-left: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  color: var(--red);
  border: 1px solid currentColor; border-radius: 3px;
  padding: 0 4px;
}

.deals-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text3);
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg1);
  margin-bottom: 15px;
}
.dl-item { display: inline-flex; align-items: center; gap: 6px; }
.dl-swatch { width: 9px; height: 9px; border-radius: 3px; }
.dl-hot  { background: var(--brass); }
.dl-good { background: var(--green); }
.dl-mild { background: var(--blue); }
.dl-spacer { flex: 1; }
.dl-note { font-size: 10.5px; }

.deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}

.deals-loading {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 70px 0;
  color: var(--text3);
  font-size: 13px;
}
.deals-spinner {
  width: 26px; height: 26px;
  border: 2px solid var(--bg3);
  border-top-color: var(--brass);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.deal-card {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  display: flex; flex-direction: column; gap: 11px;
}
.deal-card:hover { transform: translateY(-2px); }
.deal-card.tier-hot:hover  { border-color: var(--brass); }
.deal-card.tier-good:hover { border-color: var(--green); }
.deal-card.tier-mild:hover { border-color: var(--blue); }

.deal-badge {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-data);
  font-size: 11.5px; font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
}
.deal-badge.tier-hot  { background: var(--brass); color: var(--brass-ink); }
.deal-badge.tier-good { background: rgba(67, 217, 146, .16); color: var(--green); }
.deal-badge.tier-mild { background: rgba(124, 172, 248, .14); color: var(--blue); }

.deal-top { display: flex; gap: 11px; align-items: center; min-width: 0; }
.deal-thumb, .deal-thumb-placeholder {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--r-sm);
  background: var(--bg3);
  object-fit: contain;
}
.deal-thumb-placeholder { animation: phPulse 1.6s ease-in-out infinite; }
.deal-name-block { min-width: 0; padding-right: 48px; }
.deal-name {
  font-weight: 600; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deal-id { font-family: var(--font-data); font-size: 10px; color: var(--text3); }

.deal-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.deal-price-cell {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 7px 10px;
}
.dpc-lbl { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; }
.dpc-val { font-family: var(--font-data); font-size: 14.5px; font-weight: 600; }
.dpc-val.price { color: var(--brass); }
.dpc-val .u { font-size: 10px; color: var(--text3); margin-left: 3px; font-weight: 400; }

.deal-bar { height: 4px; border-radius: 99px; background: var(--bg3); overflow: hidden; }
.deal-bar i { display: block; height: 100%; border-radius: 99px; }
.deal-bar.tier-hot  i { background: var(--brass); }
.deal-bar.tier-good i { background: var(--green); }
.deal-bar.tier-mild i { background: var(--blue); }

.deal-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; }
.deal-flip { font-family: var(--font-data); font-size: 10.5px; }
.deal-flip.pos { color: var(--green); }
.deal-flip.neg { color: var(--text3); }
.deal-snipe { color: var(--brass); font-weight: 600; opacity: 0; transition: opacity .15s; }
.deal-card:hover .deal-snipe { opacity: 1; }

/* ═══ Status bar ════════════════════════════════════════════ */
.statusbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex; align-items: center; gap: 20px;
  padding: 6px 22px;
  background: color-mix(in srgb, var(--bg0) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  font-family: var(--font-data);
  font-size: 10.5px;
  color: var(--text3);
}
.sb-item { display: inline-flex; align-items: center; gap: 6px; }
.sb-item b { color: var(--text2); font-weight: 600; }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); }
.sb-dot.online { background: var(--green); animation: wsBlink 1.6s infinite; }
.sb-right { margin-left: auto; display: inline-flex; gap: 16px; }

/* ═══ Burst aura ════════════════════════════════════════════ */
.burst-aura {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  transition: opacity .6s;
  box-shadow: inset 0 0 90px -30px var(--brass);
}
body.burst-active .burst-aura { opacity: 1; animation: burstAura 2.6s ease-in-out infinite; }
@keyframes burstAura { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ═══ Modals ════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 15, .72);
  backdrop-filter: blur(4px);
  padding: 24px;
  animation: fadeIn .18s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } }

.modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  padding: 22px;
  animation: modalIn .2s ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px); } }
.modal-wide { max-width: 640px; }
.modal-tall { max-width: 760px; }
.modal-sm   { max-width: 380px; }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.modal-header h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.modal-sub { font-size: 11.5px; color: var(--text3); font-weight: 400; font-family: var(--font-ui); margin-left: 6px; }
.modal-close {
  background: transparent; border: none;
  color: var(--text3);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.modal-close:hover { color: var(--text); background: var(--bg3); }

.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 18px;
}

.modal-tabs {
  display: flex; gap: 3px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.modal-tab {
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--text3);
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600;
  padding: 8px 13px;
  cursor: pointer;
  margin-bottom: -1px;
}
.modal-tab:hover { color: var(--text2); }
.modal-tab.active { color: var(--brass); border-bottom-color: var(--brass); }

/* forms */
.form-group { margin-bottom: 15px; }
.form-group label {
  display: block;
  font-size: 12.5px; font-weight: 600;
  margin-bottom: 6px;
}
.label-hint { color: var(--text3); font-weight: 400; font-size: 11.5px; }
.field-note { font-size: 11.5px; color: var(--text3); margin-top: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; }

.input-prefix { position: relative; }
.input-prefix .prefix-icon {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text3);
  pointer-events: none;
}
.input-prefix input { padding-left: 38px; }

.section-label {
  font-family: var(--font-data);
  font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 12px;
}

/* toggle switch */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg2);
  padding: 12px 14px;
  margin-bottom: 15px;
}
.toggle-info { display: flex; flex-direction: column; gap: 2px; }
.toggle-label { font-size: 13px; font-weight: 600; }
.toggle-sub { font-size: 11.5px; color: var(--text3); }

.toggle { position: relative; display: inline-block; flex: none; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  display: block;
  position: relative;
  width: 38px; height: 21px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 99px;
  transition: background .18s, border-color .18s;
}
.toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--text3);
  transition: transform .18s, background .18s;
}
.toggle input:checked + .toggle-track { background: var(--brass-dim); border-color: var(--brass); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(17px); background: var(--brass); }
.toggle-sm .toggle-track { width: 32px; height: 18px; }
.toggle-sm .toggle-thumb { width: 12px; height: 12px; }
.toggle-sm input:checked + .toggle-track .toggle-thumb { transform: translateX(14px); }

/* Pro gating tag */
body.is-free .toggle-row[data-pro] { opacity: .8; }
body.is-free .toggle-row[data-pro] .toggle-label::after,
body.is-free .form-group[data-pro] label::after {
  content: 'PRO';
  font-family: var(--font-data);
  font-size: 8.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--brass);
  background: var(--brass-dim);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 7px;
  vertical-align: 1px;
}

.auth-badge {
  font-size: 12px;
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text2);
}
.auth-badge.ok  { border-color: rgba(67, 217, 146, .4); color: var(--green); }
.auth-badge.err { border-color: rgba(241, 122, 122, .4); color: var(--red); }

/* ═══ Wizard ════════════════════════════════════════════════ */
.wiz-header { align-items: center; }
.wiz-stepper { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 10px; }
.wiz-dot {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text3);
  font-size: 11px;
}
.wiz-dot b {
  display: grid; place-items: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  font-family: var(--font-data);
  font-size: 10px; font-weight: 600;
}
.wiz-dot.active { color: var(--text); }
.wiz-dot.active b { border-color: var(--brass); color: var(--brass); }
.wiz-dot.done b { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); }
.wiz-line { width: 22px; height: 1px; background: var(--line2); }
.wiz-line.on { background: var(--brass); }

.wiz-step { display: none; }
.wiz-step.active { display: block; animation: fadeIn .18s ease-out; }
.wiz-question { font-size: 13.5px; color: var(--text2); margin-bottom: 14px; }
.wiz-or {
  display: flex; align-items: center; gap: 12px;
  color: var(--text3); font-size: 11.5px;
  margin: 16px 0;
}
.wiz-or::before, .wiz-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.wiz-preview {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 13px;
  margin-bottom: 12px;
}
.wp-thumb-wrap { flex: none; }
.wp-thumb, .wp-thumb-placeholder {
  width: 46px; height: 46px;
  display: block;
  border-radius: var(--r-sm);
  background: var(--bg3);
  object-fit: contain;
}
.wp-thumb-placeholder { animation: phPulse 1.6s ease-in-out infinite; }
.wp-info { min-width: 0; flex: 1; }
.wp-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-meta { font-family: var(--font-data); font-size: 10.5px; color: var(--text3); }
.wp-meta-sep { margin-left: 4px; }
.wp-swap {
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  color: var(--text3);
  font-size: 11.5px;
  padding: 5px 10px;
  cursor: pointer;
}
.wp-swap:hover { color: var(--text); border-color: var(--text3); }

.wiz-context {
  display: grid; grid-template-columns: 1fr 1fr 1.3fr;
  gap: 8px;
  margin-bottom: 15px;
}
.wc-cell {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 11px;
}
.wc-lbl { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; }
.wc-val {
  font-family: var(--font-data);
  font-size: 13px; font-weight: 600;
  margin-top: 2px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.wc-suggest { border-color: var(--brass-line); }
.wc-muted { color: var(--text3); font-weight: 400; font-size: 11.5px; }
.wc-val-neon { color: var(--green); }
.wc-rap-blue { color: var(--blue); }
.wc-tag { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; font-weight: 400; }
.wc-reasoning { font-size: 9.5px; color: var(--text3); font-weight: 400; }
.wc-use-btn {
  background: var(--brass);
  border: none;
  border-radius: 5px;
  color: var(--brass-ink);
  font-size: 10.5px; font-weight: 700;
  padding: 2px 9px;
  cursor: pointer;
}
.wc-use-btn:hover { background: var(--brass-hi); }

.wiz-actions { justify-content: flex-end; }
#wiz-back-btn { margin-right: auto; }

/* search results */
.search-results {
  margin-top: 8px;
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  background: var(--bg0);
  max-height: 264px;
  overflow-y: auto;
}
.search-result-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--bg2); }
.sr-thumb, .sr-thumb-placeholder {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-sm);
  background: var(--bg3);
  object-fit: contain;
}
.sr-thumb-placeholder { animation: phPulse 1.6s ease-in-out infinite; }
.sr-info { min-width: 0; flex: 1; }
.sr-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-meta { font-family: var(--font-data); font-size: 10.5px; color: var(--text3); }
.sr-pick { color: var(--text3); }
.search-result-item:hover .sr-pick { color: var(--brass); }
.search-noresult { padding: 14px; text-align: center; color: var(--text3); font-size: 12.5px; }
.search-loading { animation: phPulse 1.4s ease-in-out infinite; }

/* ═══ Accounts ══════════════════════════════════════════════ */
.accounts-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.accounts-empty-msg { color: var(--text3); font-size: 12.5px; margin-bottom: 18px; }
.account-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 13px;
}
.account-info { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.account-name { font-weight: 600; font-size: 13px; }
.account-username { font-family: var(--font-data); font-size: 11px; color: var(--text3); }
.account-actions { display: flex; align-items: center; gap: 10px; }
.accounts-add-form { border-top: 1px solid var(--line); padding-top: 16px; }

/* ═══ Balance detail ════════════════════════════════════════ */
.balance-detail-list { display: flex; flex-direction: column; gap: 8px; }
.balance-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 13px;
}
.balance-account { display: flex; flex-direction: column; }
.balance-account-name { font-weight: 600; font-size: 13px; }
.balance-account-tag { font-size: 11px; color: var(--text3); }
.balance-account-val { font-family: var(--font-data); font-weight: 600; color: var(--brass); }

/* ═══ Purchases ═════════════════════════════════════════════ */
.purchases-summary { margin-bottom: 16px; }

.stats-hero {
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  background: var(--bg2);
  padding: 15px 16px;
}
.sh-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.sh-brand { display: flex; align-items: center; gap: 8px; }
.sh-mark {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--brass-dim);
  color: var(--brass);
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
}
.sh-brand-name { font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.sh-since { font-family: var(--font-data); font-size: 10px; color: var(--text3); }
.sh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.sh-tile {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  display: flex; flex-direction: column; gap: 1px;
}
.sh-tile.sh-hero { border-color: var(--brass-line); }
.sh-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; }
.sh-val { font-family: var(--font-data); font-size: 17px; font-weight: 600; }
.sh-val em { font-style: normal; font-size: 10.5px; color: var(--text3); font-weight: 400; }
.sh-glow { color: var(--brass); }
.sh-pos { color: var(--green); }
.sh-neg { color: var(--red); }
.sh-sub { font-size: 10px; color: var(--text3); }
.sh-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
  font-size: 10.5px;
  color: var(--text3);
}
.sh-foot b { color: var(--text2); }
.sh-foot-brand { font-family: var(--font-data); letter-spacing: .05em; }

.purchases-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.purchases-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.purchases-table th {
  text-align: left;
  font-family: var(--font-data);
  font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text3);
  background: var(--bg2);
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.purchases-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.purchases-table tr:last-child td { border-bottom: none; }
.purchases-table tbody tr:hover td { background: var(--bg2); }
.purchase-date { font-family: var(--font-data); font-size: 11px; color: var(--text3); white-space: nowrap; }
.purchase-name a { color: var(--text); text-decoration: none; font-weight: 600; }
.purchase-name a:hover { color: var(--brass); }
.purchase-num { font-family: var(--font-data); white-space: nowrap; }
.purchase-account { color: var(--text3); font-size: 11.5px; }
.purchases-empty { text-align: center; color: var(--text3); padding: 34px 0; }

/* ═══ Upgrade modal ═════════════════════════════════════════ */
.modal-upgrade { max-width: 440px; text-align: center; }
.upgrade-badge {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 10px; font-weight: 700; letter-spacing: .18em;
  color: var(--brass);
  background: var(--brass-dim);
  border: 1px solid var(--brass-line);
  border-radius: 99px;
  padding: 4px 14px;
  margin-bottom: 12px;
}
.upgrade-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.upgrade-brand { color: var(--brass); }
.upgrade-sub { font-size: 13px; color: var(--text2); margin-bottom: 16px; }

.upgrade-context {
  text-align: left;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  padding: 11px 13px;
  margin-bottom: 15px;
}
.ucx-head { font-size: 10.5px; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
.ucx-body { display: flex; align-items: center; gap: 11px; }
.ucx-thumb {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-sm);
  background: var(--bg3);
  object-fit: contain;
}
.ucx-info { min-width: 0; }
.ucx-name { font-weight: 600; font-size: 13px; }
.ucx-id, .ucx-meta { font-family: var(--font-data); font-size: 10.5px; color: var(--text3); }

.upgrade-features {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  text-align: left;
  font-size: 12.5px;
  color: var(--text2);
  margin-bottom: 18px;
}
.upgrade-feature { display: flex; align-items: baseline; gap: 8px; }
.upgrade-feature strong { color: var(--text); }
.upgrade-check { color: var(--brass); font-weight: 700; }

.upgrade-price-block { margin-bottom: 4px; }
.upgrade-price { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--font-display); }
.price-currency-up { font-size: 17px; color: var(--text2); }
.price-num { font-size: 34px; font-weight: 700; }
.price-suffix { font-size: 12px; color: var(--text3); }
.upgrade-price-label { font-size: 11.5px; color: var(--text3); }

.modal-upgrade .modal-actions { justify-content: center; }
.btn-upgrade { padding: 9px 20px; }

.license-activate-section { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.license-toggle-link {
  background: transparent; border: none;
  color: var(--text3);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.license-toggle-link:hover { color: var(--text2); }
.license-input-wrap { margin-top: 12px; }
.license-input-row { display: flex; gap: 8px; }
.license-key-input { font-family: var(--font-data); letter-spacing: .04em; }

.license-status { font-size: 12px; margin-top: 8px; color: var(--text2); }
.license-status-success { color: var(--green); }
.license-status-error   { color: var(--red); }

.license-status-card { text-align: left; }
.license-active-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--brass-line);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.license-active-info { display: flex; flex-direction: column; flex: 1; }
.license-active-label { font-weight: 600; font-size: 13px; }
.license-active-sub { font-family: var(--font-data); font-size: 11px; color: var(--text3); }
.license-inactive-card {
  background: var(--bg2);
  border: 1px dashed var(--line2);
  border-radius: var(--r-md);
  padding: 13px 14px;
  color: var(--text3);
  font-size: 12.5px;
}

/* ═══ Toasts ════════════════════════════════════════════════ */
.toast-stack {
  position: fixed;
  right: 20px; bottom: 44px;
  z-index: 200;
  display: flex; flex-direction: column; gap: 9px;
  width: 320px;
}
.toast {
  position: relative;
  display: flex; gap: 11px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  padding: 12px 13px;
  overflow: hidden;
  animation: toastIn .22s ease-out;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .6);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } }
.toast.leaving { opacity: 0; transform: translateX(16px); transition: opacity .26s, transform .26s; }
.toast-snipe    { border-color: var(--brass-line); }
.toast-purchase { border-color: rgba(67, 217, 146, .45); }
.toast-icon {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
}
.toast-snipe .toast-icon    { background: var(--brass-dim); color: var(--brass); }
.toast-purchase .toast-icon { background: rgba(67, 217, 146, .12); color: var(--green); }
.toast-body { min-width: 0; flex: 1; }
.toast-head { display: flex; align-items: center; gap: 7px; }
.toast-title {
  font-family: var(--font-data);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--text3);
}
.toast-snipe .toast-title { color: var(--brass); }
.toast-purchase .toast-title { color: var(--green); }
.toast-acct {
  font-family: var(--font-data);
  font-size: 9px;
  background: var(--bg3);
  color: var(--text2);
  border-radius: 99px;
  padding: 1px 7px;
}
.toast-name { font-weight: 600; font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-row { display: flex; align-items: baseline; gap: 8px; margin-top: 1px; }
.toast-price { font-family: var(--font-data); font-size: 12.5px; font-weight: 600; }
.toast-sub { font-size: 10.5px; color: var(--text3); }
.toast-close {
  position: absolute; top: 7px; right: 8px;
  background: transparent; border: none;
  color: var(--text3);
  font-size: 11px;
  cursor: pointer;
}
.toast-close:hover { color: var(--text); }
.toast-progress {
  position: absolute; left: 0; bottom: 0;
  height: 2px;
  background: var(--brass);
  width: 100%;
  transform-origin: left;
  animation: toastProgress linear forwards;
}
.toast-purchase .toast-progress { background: var(--green); }
@keyframes toastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ═══ Dialogs (confirm / alert) ═════════════════════════════ */
.dlg-overlay {
  position: fixed; inset: 0;
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 15, .72);
  backdrop-filter: blur(4px);
  padding: 24px;
  animation: fadeIn .16s ease-out;
}
.dlg-overlay.leaving { opacity: 0; transition: opacity .18s; }
.dlg {
  width: 100%;
  max-width: 380px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  padding: 22px;
  text-align: center;
  animation: modalIn .18s ease-out;
}
.dlg-icon {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  margin-bottom: 12px;
  background: var(--bg3);
  color: var(--text2);
}
.dlg-danger .dlg-icon, .dlg-warn .dlg-icon { background: rgba(241, 122, 122, .12); color: var(--red); }
.dlg-success .dlg-icon { background: rgba(67, 217, 146, .12); color: var(--green); }
.dlg-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.dlg-body { font-size: 13px; color: var(--text2); white-space: pre-line; }
.dlg-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }

/* ═══ Responsive ════════════════════════════════════════════ */
@media (max-width: 1360px) {
  .header-center .tk-usd { display: none; }
  .auth-meta { display: none; }
  .auth-chip { padding: 5px 6px; }
  .brand-tagline { display: none; }
  header { gap: 12px; }
  .ws-chip #ws-label, .ws-chip span:last-child { display: none; }
  .ws-chip { padding: 6px 7px; }
}

@media (max-width: 1080px) {
  main { grid-template-columns: 1fr; }
  .panel-log { position: static; max-height: 480px; }
  .header-center { display: none; }
}

@media (max-width: 700px) {
  #app { padding: 0 12px 60px; }
  header { flex-wrap: wrap; gap: 10px; }
  .header-right { flex-wrap: wrap; }
  .brand-tagline { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .wiz-context { grid-template-columns: 1fr; }
  .sh-grid { grid-template-columns: 1fr 1fr; }
  .upgrade-features { grid-template-columns: 1fr; }
  .toast-stack { width: calc(100vw - 32px); right: 16px; }
  .view-nav-meta { display: none; }
}

/* ═══ Reduced motion ════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}