/* ============================================================
   HOODWIN — interface components

   Everything the shell and the auth/settings surfaces are built
   from: form controls, the ETH mark, live bet feeds, the settings
   panel and the sign-in page. Depends on theme.css + base.css.
   ============================================================ */

/* ============================================================
   1. CURRENCY MARKS
   ============================================================ */

/* The circular Ethereum token badge used everywhere a balance is
   shown. The diamond itself is an inline SVG in the markup so it
   stays crisp; this only styles the disc around it. */
.eth-mark {
  display: inline-grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  background: linear-gradient(155deg, #6f7bd4 0%, #4c5fc4 45%, #313d8f 100%);
  box-shadow:
    0 2px 8px rgba(76, 95, 196, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 2px rgba(0, 0, 0, 0.3);
  flex: 0 0 auto;
}
.eth-mark svg {
  width: 58%;
  height: 58%;
  display: block;
}
.eth-mark--lg { width: 2.1em; height: 2.1em; }
.eth-mark--sm { width: 1.2em; height: 1.2em; }

/* Flat variant for dense tables, where the disc is too heavy */
.eth-mark--bare {
  background: none;
  box-shadow: none;
  color: var(--eth-tint);
}

/* ============================================================
   2. FORM CONTROLS
   ============================================================ */

.input,
.select,
input[type="text"].input,
input[type="password"].input,
input[type="email"].input {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-hi);
  background: var(--bg-inset);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) linear;
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder { color: var(--text-faint); }

.input:hover,
.select:hover { border-color: rgba(255, 255, 255, 0.16); }

.input:focus,
.select:focus {
  border-color: var(--accent-400);
  background: var(--bg-base);
  box-shadow: 0 0 0 3px rgba(0, 217, 95, 0.14);
}

.input.is-invalid {
  border-color: var(--loss);
  box-shadow: 0 0 0 3px rgba(239, 74, 92, 0.14);
}

.select {
  padding-right: 2.3rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8adb5' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem;
}
.select option { background: var(--bg-panel); color: var(--text-hi); }

/* ---------- Field wrapper ---------- */

.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.95rem; }

.field > label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-low);
}

.field__error {
  font-size: 0.74rem;
  color: var(--loss);
  min-height: 1em;
}

.field__hint { font-size: 0.74rem; color: var(--text-low); }

/* Input with a trailing action (show password, max, paste) */
.field--addon { position: relative; }
.field--addon .input { padding-right: 4.2rem; }
.field__addon {
  position: absolute;
  right: 0.4rem;
  bottom: 0.35rem;
  display: flex;
  gap: 0.25rem;
}

/* ---------- Switch ---------- */

.switch {
  position: relative;
  width: 42px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-pill);
  background: var(--bg-inset);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--t-med) var(--ease-out),
    border-color var(--t-med) var(--ease-out);
}
.switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-low);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform var(--t-med) var(--ease-spring),
    background var(--t-med) var(--ease-out);
}
.switch.is-on {
  background: var(--accent-gradient-soft);
  border-color: transparent;
}
.switch.is-on .switch__knob {
  transform: translateX(18px);
  background: #fff;
}
.switch:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 2px; }

/* ---------- Range ---------- */

.range { display: flex; align-items: center; gap: 0.75rem; min-width: 170px; }

.range input[type="range"] {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-inset);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
}
.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent-400);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55), var(--glow-accent);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring);
}
.range input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }
.range input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border: 0; border-radius: 50%;
  background: var(--accent-400); cursor: pointer;
}
.range__out {
  font-family: var(--font-num);
  font-size: 0.78rem;
  color: var(--text-mid);
  min-width: 3ch;
  text-align: right;
}

/* ---------- Segmented control ---------- */

.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--bg-inset);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
}
.segmented button {
  padding: 0.45rem 0.95rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-low);
  background: transparent;
  border: 0;
  border-radius: calc(var(--r-md) - 3px);
  cursor: pointer;
  transition: color var(--t-fast) linear, background var(--t-fast) var(--ease-out);
}
.segmented button:hover { color: var(--text-mid); }
.segmented button.is-active {
  color: var(--text-hi);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}

.btn--xs {
  padding: 0.3rem 0.6rem;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

/* ============================================================
   3. SETTINGS PANEL
   ============================================================ */

.settings {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0;
  min-height: 440px;
  max-height: min(74vh, 620px);
}

.settings__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-right: 1px solid var(--line-soft);
  overflow-y: auto;
}

.settings__tab {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.8rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-low);
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: color var(--t-fast) linear, background var(--t-fast) var(--ease-out);
}
.settings__tab:hover { color: var(--text-mid); background: rgba(255, 255, 255, 0.03); }
.settings__tab.is-active {
  color: var(--text-hi);
  background: linear-gradient(90deg, rgba(0, 217, 95, 0.14), transparent);
  box-shadow: inset 2px 0 0 var(--accent-400);
}
.settings__tab-ico { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; }
.settings__tab-ico svg { width: 100%; height: 100%; }
.settings__tab.is-active .settings__tab-ico { color: var(--accent-400); }

.settings__body {
  padding: 0.4rem 0.2rem 0.4rem 1.4rem;
  overflow-y: auto;
}

.settings__section-head { margin-bottom: 1.1rem; }
.settings__section-title { font-size: 1.02rem; font-weight: 600; }
.settings__section-blurb {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-low);
  max-width: 46ch;
}

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.setting:last-child { border-bottom: 0; }

.setting.is-disabled { opacity: 0.4; pointer-events: none; }

/* Per-setting glyph. A recessed tile keeps a long column of rows
   scannable by shape rather than by reading every label. */
.setting__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  color: var(--text-low);
  transition: color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}
.setting__ico svg { width: 17px; height: 17px; display: block; }
.setting:hover .setting__ico {
  color: var(--accent-300);
  border-color: var(--line-strong);
  background: rgba(0, 217, 95, 0.07);
}
.setting__ico--danger { color: rgba(239, 74, 92, 0.75); }
.setting:hover .setting__ico--danger {
  color: var(--loss);
  border-color: rgba(239, 74, 92, 0.5);
  background: rgba(239, 74, 92, 0.08);
}

.setting__label { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; flex: 1 1 auto; }
.setting__name { font-size: 0.86rem; font-weight: 500; color: var(--text-hi); }
.setting__help {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-low);
  max-width: 40ch;
}

.setting__control { flex: 0 0 auto; display: flex; align-items: center; }
.setting__control .input,
.setting__control .select { width: 168px; }

/* A note row: read-only, no name/control split, no bottom border of
   its own since it usually trails right under the field it explains. */
.setting--note {
  padding: 0.35rem 0 0.85rem;
  border-bottom: 1px solid var(--line-soft);
}
.setting__note-text {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-num);
  font-size: 0.76rem;
  color: var(--text-low);
}
.setting__note-text::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-400);
  flex: 0 0 auto;
}


/* Cooldown banner for guarded limits */
.settings__pending {
  margin-bottom: 1.1rem;
  padding: 0.8rem 1rem;
  background: rgba(245, 176, 38, 0.08);
  border: 1px solid rgba(245, 176, 38, 0.28);
  border-radius: var(--r-md);
}
.settings__pending-title {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #f5b026;
  margin-bottom: 0.5rem;
}
.settings__pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.78rem;
  color: var(--text-mid);
  padding: 0.25rem 0;
}

/* ============================================================
   4. LIVE BETS FEED
   ============================================================ */

.livebets { display: flex; flex-direction: column; min-height: 0; }

.livebets__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}
.livebets__title {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-mid);
}
.livebets__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-400);
  box-shadow: 0 0 0 0 var(--win-glow);
  animation: pulse-dot 2.4s var(--ease-out) infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 var(--win-glow); }
  70%  { box-shadow: 0 0 0 7px rgba(0, 217, 95, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 217, 95, 0); }
}

.livebets__table { overflow-y: auto; flex: 1; min-height: 0; }

.livebet {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.76rem;
  border-bottom: 1px solid var(--line-soft);
  animation: livebet-in 320ms var(--ease-out);
}
@keyframes livebet-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.livebet__who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-mid);
  min-width: 0;
}
.livebet__avatar {
  width: 20px; height: 20px; border-radius: 50%;
  overflow: hidden; flex: 0 0 auto; background: var(--bg-inset);
}
.livebet__avatar svg { width: 100%; height: 100%; display: block; }
.livebet__name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.livebet__mult {
  font-family: var(--font-num);
  font-size: 0.72rem;
  padding: 0.12rem 0.4rem;
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  color: var(--text-low);
}
.livebet__amount { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.livebet--win  .livebet__amount { color: var(--win); }
.livebet--loss .livebet__amount { color: var(--loss); }
.livebet--win  .livebet__mult { color: var(--win); background: rgba(0, 217, 95, 0.12); }

/* ============================================================
   5. MULTIPLIER HISTORY STRIP  (crash / limbo)
   ============================================================ */

.multstrip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.multstrip::-webkit-scrollbar { display: none; }

.multstrip__chip {
  flex: 0 0 auto;
  padding: 0.3rem 0.62rem;
  font-family: var(--font-num);
  font-size: 0.76rem;
  font-weight: 500;
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  border: 1px solid transparent;
  animation: chip-in 300ms var(--ease-spring);
}
@keyframes chip-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
/* Banded by how far the round ran, so the shape of a session reads
   at a glance without needing to parse every number. */
.multstrip__chip--low  { color: var(--text-low); }
.multstrip__chip--mid  { color: var(--accent-300); border-color: rgba(0, 217, 95, 0.2); }
.multstrip__chip--high { color: var(--accent-200); border-color: rgba(0, 217, 95, 0.42); background: rgba(0, 217, 95, 0.1); }
.multstrip__chip--huge {
  color: #fff;
  background: var(--accent-gradient-soft);
  border-color: transparent;
  box-shadow: var(--glow-accent);
}

/* ============================================================
   6. AUTH PAGE
   ============================================================ */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--bg-void);
}

.auth__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.6rem;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(0, 217, 95, 0.16), transparent 58%),
    radial-gradient(90% 70% at 90% 100%, rgba(0, 217, 95, 0.08), transparent 60%),
    linear-gradient(165deg, var(--bg-base), var(--bg-void));
  border-right: 1px solid var(--line-soft);
}

/* Slow drifting orb — the only motion on the page, and it stops
   entirely when animations are turned down. */
.auth__orb {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  background: var(--accent-gradient-soft);
  animation: orb-drift 22s var(--ease-in-out) infinite alternate;
  pointer-events: none;
}
@keyframes orb-drift {
  from { transform: translate(-14%, -8%) scale(1); }
  to   { transform: translate(18%, 14%) scale(1.22); }
}

.auth__aside-inner { position: relative; z-index: 1; }

.auth__headline {
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  max-width: 15ch;
}
.auth__sub {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 42ch;
}

.auth__points { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 2rem; }
.auth__point { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.84rem; color: var(--text-mid); }
.auth__point svg { width: 17px; height: 17px; color: var(--accent-400); flex: 0 0 auto; margin-top: 1px; }

.auth__stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.auth__stat-num {
  display: block;
  font-family: var(--font-num);
  font-size: 1.3rem;
  color: var(--accent-300);
}
.auth__stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-low);
}

.auth__main {
  display: grid;
  place-items: center;
  padding: 2.4rem 1.6rem;
  overflow-y: auto;
}

.auth__card { width: 100%; max-width: 400px; }

.auth__brand { display: block; margin-bottom: 2rem; }
.auth__brand.brandmark { --logo-h: 46px; }

/* ============================================================
   BRAND LOCKUP — HOODWIN

   The mark itself is the supplied PNG. Everything around it is the
   "effect": a pulsing emerald pool of light behind it, an alpha-safe
   glow that hugs the logo's real silhouette (drop-shadow reads the
   PNG's transparency, so the halo follows the artwork, not a box),
   and a specular band that sweeps across the logo — masked by the
   logo's own shape so the light only travels the artwork, never the
   surrounding rectangle.

   One variable, --logo-h, sizes the whole thing wherever it's used.
   ============================================================ */

.brandmark {
  --logo-h: 34px;
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  isolation: isolate;               /* contain the shine's blend mode */
  transition: transform var(--t-fast) var(--ease-out);
}
.brandmark:hover { transform: translateY(-1px) scale(1.015); }
.brandmark:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 5px; border-radius: 6px; }

/* the artwork, with an alpha-aware glow that breathes */
.brandmark__img {
  position: relative;
  z-index: 1;
  height: var(--logo-h);
  width: auto;
  display: block;
  animation: brandGlow 3.4s var(--ease-in-out) infinite;
}
/* The artwork already glows on its own, so the added glow is kept
   light — just enough of a pulse to feel alive, not a second halo
   fighting the first. Only the depth shadow is constant. */
@keyframes brandGlow {
  0%, 100% { filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)) drop-shadow(0 0 4px rgba(0,217,95,.10)); }
  50%      { filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)) drop-shadow(0 0 11px rgba(0,217,95,.38)); }
}
.brandmark:hover .brandmark__img { animation-duration: 1.4s; }

/* a whisper of ambient light behind the logo — deliberately faint
   and slightly warm-neutral so it never casts green over the gold */
.brandmark__glow {
  position: absolute;
  z-index: 0;
  left: 50%; top: 50%;
  width: 108%; height: 130%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(120,230,150,.16), transparent 70%);
  filter: blur(9px);
  pointer-events: none;
  animation: brandPool 3.4s var(--ease-in-out) infinite;
}
@keyframes brandPool {
  0%, 100% { opacity: .18; transform: translate(-50%, -50%) scale(.92); }
  50%      { opacity: .42; transform: translate(-50%, -50%) scale(1.05); }
}

/* the travelling highlight, masked to the logo's own alpha so the
   band only ever lights the artwork */
.brandmark__shine {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.6) 50%, transparent 58%);
  background-size: 240% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  -webkit-mask: url(../assets/hoodwin-logo.png) center / contain no-repeat;
          mask: url(../assets/hoodwin-logo.png) center / contain no-repeat;
  animation: brandShine 5s var(--ease-in-out) infinite;
}
@keyframes brandShine {
  0%         { background-position: 190% 0; }
  45%, 100%  { background-position: -90% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brandmark__img, .brandmark__glow, .brandmark__shine { animation: none; }
}
:root[data-motion="off"] .brandmark__img,
:root[data-motion="off"] .brandmark__glow,
:root[data-motion="off"] .brandmark__shine { animation: none; }

.auth__title { font-size: 1.5rem; font-weight: 650; margin-bottom: 0.35rem; }
.auth__note { font-size: 0.85rem; color: var(--text-low); margin: 0 0 1.6rem; line-height: 1.55; }

.auth__tabs { display: flex; gap: 0.4rem; margin-bottom: 1.7rem; }
.auth__tab {
  flex: 1;
  padding: 0.62rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-low);
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.auth__tab:hover { color: var(--text-mid); }
.auth__tab.is-active {
  color: var(--text-hi);
  background: var(--bg-elevated);
  border-color: var(--line-strong);
}

.auth__divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.5rem 0;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -0.2rem 0 1.2rem;
}

.checkline {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: var(--text-mid);
  cursor: pointer;
  user-select: none;
}
.checkline input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkline__box {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid var(--line-hair);
  border-radius: 5px;
  background: var(--bg-inset);
  flex: 0 0 auto;
  transition: all var(--t-fast) var(--ease-out);
}
.checkline__box svg { width: 11px; height: 11px; opacity: 0; transform: scale(0.6); transition: all var(--t-fast) var(--ease-spring); }
.checkline input:checked + .checkline__box {
  background: var(--accent-gradient-soft);
  border-color: transparent;
  color: var(--text-on-accent);
}
.checkline input:checked + .checkline__box svg { opacity: 1; transform: scale(1); }
.checkline input:focus-visible + .checkline__box { outline: 2px solid var(--accent-400); outline-offset: 2px; }

.auth__foot {
  margin-top: 1.6rem;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-faint);
  text-align: center;
}
.auth__foot a { color: var(--text-low); text-decoration: underline; text-underline-offset: 2px; }

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent-300);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--accent-200); }

/* Password strength meter */
.pwmeter { display: flex; gap: 3px; margin-top: 0.4rem; }
.pwmeter__seg {
  flex: 1;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  transition: background var(--t-med) var(--ease-out);
}
.pwmeter__seg.is-on-weak   { background: var(--loss); }
.pwmeter__seg.is-on-ok     { background: #f5b026; }
.pwmeter__seg.is-on-strong { background: var(--accent-400); }

/* ============================================================
   7. WALLET PICKER
   ============================================================ */

.wallet-opt {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-hi);
  text-align: left;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.wallet-opt:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--bg-elevated);
  transform: translateY(-1px);
}
.wallet-opt:disabled { opacity: 0.4; cursor: not-allowed; }
.wallet-opt__ico {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.wallet-opt__ico img { width: 100%; height: 100%; object-fit: contain; }
.wallet-opt__sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-low);
}
.wallet-opt__badge {
  margin-left: auto;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-300);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.5rem;
  flex: 0 0 auto;
}

/* Connected wallet summary card */
.wallet-card {
  padding: 1rem;
  background: linear-gradient(150deg, var(--bg-panel), var(--bg-raised));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.wallet-card__top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}
.wallet-card__addr {
  font-family: var(--font-num);
  font-size: 0.86rem;
  color: var(--text-hi);
}
.wallet-card__chain {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--text-mid);
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-pill);
}
.wallet-card__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.wallet-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.4rem 0;
  font-size: 0.8rem;
  color: var(--text-low);
}
.wallet-card__val {
  font-family: var(--font-num);
  font-size: 0.95rem;
  color: var(--text-hi);
}

/* ============================================================
   8. MISC
   ============================================================ */

.toast--bad { border-color: rgba(239, 74, 92, 0.5); color: #ffd9dd; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  color: var(--text-mid);
  border: 1px solid var(--line-hair);
}
.badge--accent { color: var(--accent-200); border-color: var(--line-strong); background: rgba(0, 217, 95, 0.1); }
.badge--warn { color: #f5b026; border-color: rgba(245, 176, 38, 0.35); background: rgba(245, 176, 38, 0.1); }
.badge--danger { color: #ff8a97; border-color: rgba(239, 74, 92, 0.45); background: rgba(239, 74, 92, 0.14); }

/* ---------- Real-money warning ---------- */

.real-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(239, 74, 92, 0.4);
  background: rgba(239, 74, 92, 0.08);
}
.real-warning svg {
  width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px;
  color: #ff8a97;
}
.real-warning__body { flex: 1; min-width: 0; }
.real-warning__title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #ffd9dd;
  margin-bottom: 0.25rem;
}
.real-warning__text {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-mid);
}
.real-warning .checkline {
  margin-top: 0.65rem;
  color: #ffd9dd;
}

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 640ms linear infinite;
  flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  padding: 2.4rem 1rem;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.82rem;
}

/* ---------- Profile › Wallet page ---------- */

.wallet-hero {
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(120% 120% at 12% -10%, rgba(0,217,95,0.12), transparent 45%),
    linear-gradient(160deg, var(--bg-raised), var(--bg-panel));
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.wallet-hero__label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-low);
}
.wallet-hero__value {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem;
  font-family: var(--font-num); font-weight: 700; color: var(--text-hi);
}
.wallet-hero__value .eth-mark { width: 1.9em; height: 1.9em; color: var(--accent-300); }
.wallet-hero__num { font-size: 2.1rem; line-height: 1; }
.wallet-hero__unit { font-size: 1rem; color: var(--text-mid); font-weight: 600; align-self: flex-end; margin-bottom: 0.2rem; }
.wallet-hero__fiat { margin-top: 0.35rem; font-family: var(--font-num); font-size: 0.85rem; color: var(--text-low); }
.wallet-hero__actions { display: flex; gap: 0.7rem; margin-top: 1rem; }
.wallet-hero__actions .btn { flex: 1; height: 46px; justify-content: center; gap: 0.5rem; font-size: 0.92rem; }

/* merged transaction feed */
.waltx {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft);
}
.waltx:last-child { border-bottom: 0; }
.waltx__ico {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
}
.waltx__ico svg { width: 16px; height: 16px; }
.waltx__ico--deposit { background: rgba(0,217,95,0.14); color: var(--accent-200); }
.waltx__ico--withdraw { background: rgba(245,176,38,0.14); color: #f5b026; }
.waltx__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.waltx__title { font-size: 0.88rem; font-weight: 600; color: var(--text-hi); }
.waltx__sub { font-size: 0.72rem; color: var(--text-low); font-family: var(--font-num); }
.waltx__amt { font-family: var(--font-num); font-weight: 600; font-size: 0.9rem; flex: 0 0 auto; }
.waltx__amt--deposit { color: var(--win); }
.waltx__amt--withdraw { color: #f5b026; }

/* ============================================================
   8b. CASHIER — deposit & withdraw
   A shared, professional layout for both flows: a segmented
   switch, a large amount hero, quick-fill chips, wallet/network
   cards and a fee summary. Deposit and withdraw share every
   class so the two pages read as one cashier.
   ============================================================ */

.cashier-head {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.cashier-head__icon {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--accent-200);
  background: linear-gradient(150deg, rgba(0,217,95,0.22), rgba(0,217,95,0.06));
  border: 1px solid rgba(0,217,95,0.28);
}
.cashier-head__icon svg { width: 21px; height: 21px; }
.cashier-head__titles { flex: 1; min-width: 0; }
.cashier-head__title { font-size: 1.12rem; font-weight: 700; color: var(--text-hi); line-height: 1.1; }
.cashier-head__sub { font-size: 0.78rem; color: var(--text-low); margin-top: 2px; }

/* segmented deposit / withdraw switch */
.cashier-switch {
  display: flex; gap: 4px;
  background: var(--bg-inset);
  border: 1px solid var(--line-hair);
  padding: 4px; border-radius: var(--r-md);
  margin-bottom: 1.1rem;
}
.cashier-switch a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0.55rem; border-radius: calc(var(--r-md) - 3px);
  font-size: 0.85rem; font-weight: 700;
  color: var(--text-mid); text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.cashier-switch a svg { width: 15px; height: 15px; }
.cashier-switch a:hover { color: var(--text-hi); }
.cashier-switch a.is-active {
  background: var(--accent-400); color: var(--text-on-accent);
  box-shadow: 0 1px 6px rgba(0,217,95,0.3);
}

/* the amount hero */
.cashier-amount {
  position: relative;
  padding: 0.95rem 1.05rem;
  margin-bottom: 0.85rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-hair);
  background: linear-gradient(160deg, rgba(0,217,95,0.06), transparent 62%), var(--bg-inset);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cashier-amount:focus-within {
  border-color: rgba(0,217,95,0.5);
  box-shadow: 0 0 0 3px rgba(0,217,95,0.1);
}
.cashier-amount__top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-low); margin-bottom: 0.55rem;
}
.cashier-amount__avail { color: var(--text-mid); }
.cashier-amount__min {
  margin-left: 0.4rem; padding: 0.05rem 0.4rem;
  border-radius: var(--r-pill); background: var(--bg-panel);
  border: 1px solid var(--line-hair);
  font-size: 0.62rem; color: var(--text-low); letter-spacing: 0.02em;
}
.cashier-amount__row { display: flex; align-items: center; gap: 0.7rem; }
.cashier-amount__glyph { width: 30px; height: 30px; flex: 0 0 auto; color: var(--accent-400); }
.cashier-amount__input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none; padding: 0;
  font-family: var(--font-num); font-size: 2rem; font-weight: 600;
  color: var(--text-hi); line-height: 1.1;
}
.cashier-amount__input::placeholder { color: var(--text-faint); }
.cashier-amount__unit { font-family: var(--font-num); font-size: 1.05rem; font-weight: 600; color: var(--text-mid); }
.cashier-amount__max {
  flex: 0 0 auto; padding: 0.32rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--bg-panel);
  color: var(--accent-200); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.cashier-amount__max:hover { background: var(--accent-400); color: var(--text-on-accent); }
.cashier-amount__fiat {
  margin-top: 0.45rem; font-size: 0.8rem; color: var(--text-low); font-family: var(--font-num);
}
.cashier-error { color: var(--loss); font-size: 0.8rem; min-height: 1.1em; margin: 0 0 0.6rem 2px; }

/* quick-fill chips */
.cashier-chips { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.cashier-chips button {
  flex: 1; min-width: 0; padding: 0.55rem 0.4rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-hair); background: var(--bg-panel);
  color: var(--text-mid); font-family: var(--font-num); font-weight: 600; font-size: 0.85rem;
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cashier-chips button:hover { border-color: var(--line-strong); color: var(--text-hi); background: var(--bg-hover); }

/* wallet + network cards */
.cashier-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; margin-bottom: 1rem; }
.cashier-card {
  padding: 0.7rem 0.8rem;
  background: var(--bg-inset); border: 1px solid var(--line-hair);
  border-radius: var(--r-md); min-width: 0;
}
.cashier-card__k {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-low); margin-bottom: 0.5rem;
}
.cashier-card__k svg { width: 13px; height: 13px; }
.cashier-card__v {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-num); font-size: 0.9rem; color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* fee / receive summary */
.cashier-summary {
  padding: 0 0.9rem; margin-bottom: 1rem;
  background: var(--bg-inset); border: 1px solid var(--line-hair); border-radius: var(--r-md);
}
.cashier-summary__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem 0; font-size: 0.84rem; color: var(--text-low);
  border-bottom: 1px solid var(--line-soft);
}
.cashier-summary__row:last-child { border-bottom: 0; }
.cashier-summary__row .num { font-family: var(--font-num); color: var(--text-hi); }
.cashier-summary__row--total { color: var(--text-hi); font-weight: 600; }
.cashier-summary__row--total .num { font-size: 1rem; color: var(--accent-200); }

.cashier-submit { width: 100%; justify-content: center; height: 46px; font-size: 0.96rem; }

/* wallet scan + route picker (deposit) */
.dep-scan {
  margin-bottom: 0.9rem; padding: 0.8rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-hair); background: var(--bg-inset);
}
.dep-scan__head {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-mid); margin-bottom: 0.6rem;
}
.dep-scan__head > svg { width: 15px; height: 15px; color: var(--accent-300); }
.dep-scan__rescan {
  margin-left: auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--r-sm);
  border: 1px solid var(--line-hair); background: var(--bg-panel);
  color: var(--text-mid); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast);
}
.dep-scan__rescan:hover { color: var(--accent-300); border-color: var(--line-strong); }
.dep-scan__rescan svg { width: 14px; height: 14px; }
.dep-scan__body { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dep-scan__loading { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-low); font-size: 0.82rem; }
.dep-hold {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.6rem; border-radius: var(--r-pill);
  background: var(--bg-panel); border: 1px solid var(--line-hair);
  font-family: var(--font-num); font-size: 0.78rem; color: var(--text-hi);
}
.dep-hold .eth-mark { width: 0.9em; height: 0.9em; color: var(--accent-300); }
.dep-hold--native { border-color: rgba(0,217,95,0.3); }
.dep-hold--empty { color: var(--text-low); font-family: inherit; }
.dep-hold__net {
  margin-left: 0.35rem; padding-left: 0.4rem;
  border-left: 1px solid var(--line-hair);
  font-family: inherit; font-size: 0.68rem; color: var(--accent-200); letter-spacing: 0.02em;
}
.dep-scan__rec {
  margin-top: 0.65rem; padding-top: 0.6rem; border-top: 1px solid var(--line-soft);
  font-size: 0.8rem; line-height: 1.45; color: var(--text-mid);
}

.dep-routes { margin-bottom: 1rem; }
.dep-routes__label {
  display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-low); margin-bottom: 0.55rem;
}
.dep-routes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.dep-route {
  position: relative; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 0.8rem; text-align: left;
  border-radius: var(--r-md); border: 1px solid var(--line-hair);
  background: var(--bg-inset); color: var(--text-hi);
  cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.dep-route:hover { border-color: var(--line-strong); }
.dep-route.is-active {
  border-color: var(--accent-500);
  background: linear-gradient(160deg, rgba(0,217,95,0.1), transparent 65%), var(--bg-inset);
  box-shadow: 0 0 0 1px rgba(0,217,95,0.35), 0 0 16px rgba(0,217,95,0.12);
}
.dep-route__ico {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(0,217,95,0.12); color: var(--accent-200);
}
.dep-route__ico svg { width: 17px; height: 17px; }
.dep-route__ico.eth-mark { color: var(--accent-200); }
.dep-route__ico--rh { background: rgba(255,255,255,0.06); color: var(--text-hi); }
.dep-route__body { display: flex; flex-direction: column; min-width: 0; }
.dep-route__name { font-size: 0.86rem; font-weight: 700; }
.dep-route__addr { font-family: var(--font-num); font-size: 0.7rem; color: var(--text-low); }
.dep-route__bal { font-family: var(--font-num); font-size: 0.72rem; color: var(--accent-200); }
.dep-route__bal--switch { color: var(--text-low); font-family: inherit; font-size: 0.68rem; }
.dep-route__rec {
  position: absolute; top: -8px; right: 8px;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-on-accent); background: var(--accent-400);
  padding: 0.15rem 0.5rem; border-radius: var(--r-pill);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.dep-route.is-recommended { border-color: rgba(0,217,95,0.4); }
.dep-route.is-disabled { opacity: 0.4; cursor: not-allowed; }
.dep-route.is-disabled:hover { border-color: var(--line-hair); }

/* destination picker (withdraw) */
.cashier-dest { margin-bottom: 1rem; }
.cashier-dest__label {
  display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-low); margin-bottom: 0.55rem;
}
.cashier-dest__types {
  display: flex; gap: 4px;
  background: var(--bg-inset); border: 1px solid var(--line-hair);
  padding: 4px; border-radius: var(--r-md); margin-bottom: 0.7rem;
}
.cashier-dest__types button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0.5rem; border: 0; background: none; cursor: pointer;
  border-radius: calc(var(--r-md) - 3px);
  font: inherit; font-size: 0.83rem; font-weight: 700; color: var(--text-mid);
  transition: background var(--t-fast), color var(--t-fast);
}
.cashier-dest__types button svg { width: 15px; height: 15px; }
.cashier-dest__types button .eth-mark { width: 15px; height: 15px; }
.cashier-dest__types button:hover { color: var(--text-hi); }
.cashier-dest__types button.is-active {
  background: var(--accent-400); color: var(--text-on-accent);
  box-shadow: 0 1px 6px rgba(0, 217, 95, 0.3);
}
.cashier-dest__field { position: relative; display: flex; align-items: center; }
.cashier-dest__field .input {
  flex: 1; font-family: var(--font-num); font-size: 0.84rem; padding-right: 6.6rem;
}
.cashier-dest__use {
  position: absolute; right: 6px;
  padding: 0.34rem 0.7rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--bg-panel);
  color: var(--accent-200); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.cashier-dest__use[hidden] { display: none; }
.cashier-dest__use:hover { background: var(--accent-400); color: var(--text-on-accent); }

/* soft "not yet live" state for withdraw */
.cashier-soon {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.8rem 0.9rem; margin-bottom: 1rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(245, 176, 38, 0.32);
  background: rgba(245, 176, 38, 0.08);
}
.cashier-soon svg { width: 19px; height: 19px; flex: 0 0 auto; color: #f5b026; margin-top: 1px; }
.cashier-soon__title { font-size: 0.85rem; font-weight: 700; color: #ffe6b0; margin-bottom: 0.2rem; }
.cashier-soon__text { font-size: 0.78rem; line-height: 1.5; color: var(--text-mid); }

@media (max-width: 560px) {
  .cashier-cards { grid-template-columns: 1fr; }
  .cashier-amount__input { font-size: 1.7rem; }
}

/* ============================================================
   9. RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
  .settings { grid-template-columns: 1fr; max-height: none; }
  .settings__nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 0 0 0.5rem;
  }
  .settings__tab { white-space: nowrap; }
  .settings__tab.is-active { box-shadow: inset 0 -2px 0 var(--accent-400); }
  .settings__body { padding: 1rem 0 0; }
  /* Wrap rather than stack: the glyph stays beside its label on the
     first line and the control drops to a full-width second line,
     instead of the icon stranding on a row of its own. */
  .setting { flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; }
  .setting__label { flex: 1 1 60%; }
  .setting__control { flex: 1 0 100%; width: 100%; }
  .setting__control .input,
  .setting__control .select { width: 100%; }
}

/* ============================================================
   10. AUTO-BET STRATEGY PANEL
   ============================================================ */

.strat { display: flex; flex-direction: column; gap: 0.7rem; }

.strat__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
}
.strat__label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-low);
}
.strat__seg button { padding: 0.4rem 0.6rem; font-size: 0.68rem; }

.strat__pct {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: opacity var(--t-fast) linear;
}
.strat__pct .input { width: 72px; padding: 0.45rem 0.5rem; text-align: right; font-family: var(--font-num); }
.strat__pct span { font-size: 0.75rem; color: var(--text-low); }
/* dimmed rather than hidden, so the row never changes height */
.strat__pct.is-off { opacity: 0.32; pointer-events: none; }

.strat__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.8rem;
  margin-top: 0.2rem;
}
.strat__grid .field { margin-bottom: 0; }
.strat__grid .input { font-family: var(--font-num); }

.autorun {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  margin-top: 0.7rem;
  border-radius: var(--r-md);
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  font-size: 0.74rem;
}
.autorun__stat { display: flex; flex-direction: column; line-height: 1.2; }
.autorun__k { font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.autorun__v { font-family: var(--font-num); color: var(--text-hi); }
.autorun__v.is-up { color: var(--win); }
.autorun__v.is-down { color: var(--loss); }

/* ============================================================
   11. STATS DASHBOARD
   ============================================================ */

.statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}
.stattile {
  padding: 0.8rem 0.9rem;
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
}
.stattile__k {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.3rem;
}
.stattile__v { font-family: var(--font-num); font-size: 1.1rem; color: var(--text-hi); }
.stattile__v.is-up { color: var(--win); }
.stattile__v.is-down { color: var(--loss); }

.curve-wrap {
  position: relative;
  height: 180px;
  margin-bottom: 1.2rem;
  border-radius: var(--r-md);
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.curve-wrap canvas { width: 100%; height: 100%; display: block; }

.bethistory { max-height: 320px; overflow-y: auto; }
.bethistory table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.bethistory th {
  position: sticky; top: 0;
  background: var(--bg-panel);
  text-align: left;
  padding: 0.5rem 0.6rem;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
}
.bethistory td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-num);
  color: var(--text-mid);
}
.bethistory td.game { font-family: var(--font-ui); color: var(--text-hi); }
.bethistory tr:hover td { background: rgba(255,255,255,0.02); }
.bethistory .win { color: var(--win); }
.bethistory .loss { color: var(--loss); }
.bethistory .verify-btn {
  font-size: 0.62rem; padding: 0.2rem 0.5rem;
  cursor: pointer; background: none; border: 1px solid var(--line-hair);
  border-radius: var(--r-sm); color: var(--text-low); font-family: var(--font-ui);
}
.bethistory .verify-btn:hover { color: var(--accent-300); border-color: var(--line-strong); }

/* ============================================================
   12. VIP / REWARDS
   ============================================================ */

.vip-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--bg-panel), var(--bg-raised));
  border: 1px solid var(--line-soft);
  margin-bottom: 1rem;
}
.vip-badge {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.2rem;
  color: #0d0e10;
  flex: 0 0 auto;
  box-shadow: 0 2px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.vip-head__body { flex: 1; min-width: 0; }
.vip-head__tier { font-size: 1.05rem; font-weight: 700; }
.vip-head__sub { font-size: 0.74rem; color: var(--text-low); margin-top: 2px; }
.vip-bar {
  height: 7px; margin-top: 0.55rem;
  border-radius: var(--r-pill);
  background: var(--bg-inset);
  overflow: hidden;
}
.vip-bar__fill {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width .6s var(--ease-out);
}

.reward-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
}
.reward-card__body { flex: 1; min-width: 0; }
.reward-card__title { font-weight: 600; font-size: 0.9rem; }
.reward-card__sub { font-size: 0.74rem; color: var(--text-low); margin-top: 2px; line-height: 1.45; }
.reward-card__amount { font-family: var(--font-num); color: var(--accent-300); font-size: 0.95rem; }

/* ============================================================
   13. PROVABLY FAIR
   ============================================================ */

.seedbox {
  font-family: var(--font-num);
  font-size: 0.72rem;
  word-break: break-all;
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  color: var(--text-mid);
  line-height: 1.5;
}
.seedbox--ok { border-color: rgba(0,217,95,.4); color: var(--accent-200); }
.seedbox--bad { border-color: rgba(239,74,92,.5); color: #ffd9dd; }

.fair-steps { counter-reset: fs; margin: 0 0 1rem; padding: 0; list-style: none; }
.fair-steps li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.55rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-mid);
}
.fair-steps li::before {
  counter-increment: fs;
  content: counter(fs);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  color: var(--accent-300);
  font-size: 0.66rem;
  font-family: var(--font-num);
}

@media (max-width: 620px) {
  .strat__row { grid-template-columns: 1fr; align-items: stretch; }
  .strat__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   14. WALLET PICKER
   ============================================================ */

.wpick { display: flex; flex-direction: column; gap: 0.4rem; }

.wpick__group {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-faint);
  margin: 0.7rem 0 0.15rem;
}
.wpick__group:first-child { margin-top: 0; }

.wopt {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--bg-raised);
  color: var(--text-hi);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}
.wopt:hover:not(:disabled) {
  background: var(--bg-elevated);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.wopt:active:not(:disabled) { transform: translateY(0) scale(0.995); }
.wopt:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 2px; }
.wopt:disabled { opacity: 0.55; cursor: wait; }

.wopt__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.wopt__icon svg,
.wopt__icon img { width: 100%; height: 100%; display: block; }

.wopt__name { flex: 1; min-width: 0; }

.wopt__badge {
  flex: 0 0 auto;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-pill);
  color: var(--accent-300);
  border: 1px solid var(--line-strong);
  background: rgba(0, 217, 95, 0.08);
}
.wopt__install {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wopt:hover .wopt__install { color: var(--text-mid); }

/* undetected wallets read as suggestions, not actions */
.wopt--install { background: transparent; }
.wopt--install .wopt__icon { opacity: 0.55; }
.wopt--install .wopt__name { color: var(--text-mid); font-weight: 500; }
.wopt--install:hover .wopt__icon { opacity: 1; }

.wopt__spinner {
  width: 15px; height: 15px; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,0.18);
  border-top-color: var(--accent-400);
  border-radius: 50%;
  animation: spin 640ms linear infinite;
}

/* ---------- Connected summary ---------- */

.wconn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(140deg, rgba(0,217,95,.08), transparent 70%), var(--bg-raised);
  margin-bottom: 1rem;
}
.wconn__icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--r-sm); overflow: hidden; }
.wconn__icon svg, .wconn__icon img { width: 100%; height: 100%; display: block; }
.wconn__body { flex: 1; min-width: 0; }
.wconn__name { font-weight: 700; font-size: 0.94rem; }
.wconn__addr {
  font-family: var(--font-num);
  font-size: 0.76rem;
  color: var(--accent-300);
  margin-top: 2px;
}
.wconn__check { color: var(--win); flex: 0 0 auto; }
.wconn__check svg { width: 22px; height: 22px; }

/* ---------- Chat lock ---------- */

.chat__lock {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  margin: 0.75rem;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-hair);
  background: var(--bg-inset);
  font-size: 0.78rem;
  color: var(--text-low);
  line-height: 1.4;
}
.chat__lock svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--text-faint); }
.chat__lock a { color: var(--accent-300); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   15. PROFILE
   ============================================================ */

.prof-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: linear-gradient(140deg, var(--bg-panel), var(--bg-raised));
}

.prof-head__avatar {
  position: relative;
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-hair);
  background: var(--bg-inset);
  padding: 0;
}
.prof-head__avatar-img { display: block; width: 100%; height: 100%; }
.prof-head__avatar svg,
.prof-head__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* editable variant: a camera badge that lifts on hover, and the
   whole tile is the click target for picking a new picture */
.prof-head__avatar--edit { cursor: pointer; }
.prof-head__avatar--edit:hover { border-color: var(--line-strong); box-shadow: var(--glow-accent); }
.prof-head__avatar--edit:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 2px; }
.prof-head__avatar-cam {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 5px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 55%);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}
.prof-head__avatar--edit:hover .prof-head__avatar-cam,
.prof-head__avatar--edit:focus-visible .prof-head__avatar-cam { opacity: 1; }
.prof-head__avatar-cam svg { width: 18px; height: 18px; }

.prof-head__pfp-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; }

.prof-head__body { flex: 1; min-width: 0; }
.prof-head__name {
  font-size: 1.1rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prof-head__addr {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2px;
  font-family: var(--font-num);
  font-size: 0.76rem;
  color: var(--accent-300);
}
.prof-head__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }

/* ---------- Balance card ---------- */

.prof-bal {
  padding: 0.95rem 1rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: var(--bg-raised);
}
.prof-bal__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.prof-bal__k {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.prof-bal__v {
  font-family: var(--font-num);
  font-size: 1.35rem;
  color: var(--text-hi);
}
.prof-bal__empty {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-low);
}
.prof-bal .btn { margin-top: 0.8rem; width: 100%; }

/* an empty balance is the one thing worth drawing the eye to */
.prof-bal.is-empty {
  border-color: rgba(245, 176, 38, 0.35);
  background: linear-gradient(150deg, rgba(245, 176, 38, 0.07), transparent 70%), var(--bg-raised);
}
.prof-bal.is-empty .prof-bal__v { color: var(--text-faint); }

.statgrid--tight { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.5rem; margin-bottom: 0.9rem; }
.statgrid--tight .stattile { padding: 0.6rem 0.7rem; }
.statgrid--tight .stattile__v { font-size: 0.92rem; }