/* =============================================================================
   POLPEXA — components: 3D metallic panels, buttons, inputs, plan cards,
   positions, leadership, sheets and toasts.

   The metallic look is built from four layers on every raised surface:
     1. a directional gradient (light top-left, dark bottom-right)
     2. a 1px hairline border
     3. an inset highlight on the top edge  (the bevel)
     4. an outer drop shadow                (the lift)
   Neon green is reserved for active / earning / positive states.
   ========================================================================== */

/* ------------------------------------------------------------- panel (3D) */

.panel {
  position: relative;
  padding: 15px;
  border-radius: var(--radius);
  /* brushed striation over the graphite gradient */
  background: var(--brushed), var(--surface);
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 var(--edge-top),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 1px 0 0 rgba(255,255,255,.05),
    var(--shadow);
}

/* Polished top edge — the reflection that reads as metal. */
.panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(180deg, rgba(240,247,252,.075), transparent);
  pointer-events: none;
}

/* Raking silver sheen across the face. */
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad-metal-sheen);
  opacity: .5;
  pointer-events: none;
}

/* Children must sit ABOVE the ::after sheen, which is generated last and would
   otherwise paint over the text and controls. */
.panel > * { position: relative; z-index: 1; }

.portfolio { text-align: center; display: grid; gap: 8px; }

.tile-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.tile { padding: 12px 10px; text-align: center; }
.tile .eyebrow { margin-bottom: 4px; font-size: 9.5px; letter-spacing: .1em; }
.tile .figure-md { font-size: 15px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;              /* touch target floor */
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--edge-top);
  background: var(--brushed), var(--surface-raised);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.45),
    var(--shadow-sm);
}

/* Machined highlight running across every metal control. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-metal-sheen);
  opacity: .55;
  pointer-events: none;
}

.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); }

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-primary {
  background: linear-gradient(170deg, var(--neon-green-bright) 0%, var(--neon-green) 45%, var(--neon-green-dark) 100%);
  border-color: rgba(255,255,255,.30);
  color: #08210A;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 6px rgba(0,0,0,.20),
    0 6px 18px -6px var(--neon-glow),
    var(--shadow);
}
.btn-primary:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 8px 24px -6px var(--neon-glow),
    var(--shadow);
}

.btn-ghost {
  background: rgba(255,255,255,.035);
  border-color: var(--edge);
  color: var(--text-primary);
}

/* Primary actions get extra height for one-thumb use. */
.btn-lg { min-height: 52px; font-size: 15px; }
.btn-block { display: flex; width: 100%; margin-top: 12px; }
.btn-chip { min-height: 38px; padding: 0 12px; font-size: 12.5px; font-weight: 500; }

.icon-btn {
  min-width: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--edge);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}

.link-btn {
  background: none;
  border: 0;
  padding: 6px 4px;
  min-height: 44px;              /* touch target floor */
  color: var(--neon-green);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.quick {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: var(--radius);
  background: var(--surface-raised);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-top), var(--shadow-sm);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.quick:active { transform: scale(.97); }
.quick-icon { font-size: 19px; color: var(--neon-green); }

/* ----------------------------------------------------------------- inputs */

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.16));
  color: var(--text-primary);
  font-size: 16px;                /* 16px stops iOS zooming on focus */
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
}
.input::placeholder { color: var(--text-faint); font-weight: 400; }
.input:focus {
  outline: none;
  border-color: rgba(124,255,61,.5);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45), 0 0 0 3px var(--neon-glow-soft);
}

.mono-input { font-family: var(--font-mono); font-size: 14px; font-weight: 400; }

.input-row { display: flex; gap: 8px; align-items: stretch; }
.input-row .input { flex: 1; min-width: 0; }
.input-row .btn { flex: 0 0 auto; }

.field-sep { height: 1px; background: var(--edge); margin: 16px 0; }

/* Negative states use the mark's own red — the bear side of the logo. */
.error-text {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(153,33,33,.20), rgba(153,33,33,.10));
  border: 1px solid rgba(255,94,95,.38);
  border-left: 3px solid var(--logo-red-bright);
  color: var(--logo-red-tint);
  font-size: 12.5px;
}

/* ------------------------------------------------------------------- kv */

.kv-list { margin-top: 12px; display: grid; gap: 1px; }

.kv {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 13.5px;
}
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--text-secondary); flex: 1 1 auto; min-width: 0; }
.kv .v { font-weight: 600; text-align: right; flex: 0 1 auto; min-width: 0; }

.kv-total { border-top: 1px solid var(--edge); margin-top: 4px; padding-top: 12px; }
.kv-total .k, .kv-total .v { font-size: 14.5px; color: var(--text-primary); font-weight: 700; }

/* ----------------------------------------------------------------- tags */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--edge);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag.ok   { background: rgba(124,255,61,.14); border-color: rgba(124,255,61,.36); color: var(--neon-green-bright); }
.tag.live { background: rgba(124,255,61,.10); border-color: rgba(124,255,61,.26); color: var(--neon-green); }
/* caution, not failure: matured position, cooldown active */
.tag.warn { background: rgba(233,194,90,.13); border-color: rgba(233,194,90,.34); color: var(--gold-light); }
/* genuine failure — the bear side of the mark */
.tag.bad  { background: rgba(153,33,33,.22); border-color: rgba(255,94,95,.40); color: var(--logo-red-tint); }

/* --------------------------------------------------------------- notices */

.notice {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--edge);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.notice-info { border-left: 2px solid var(--logo-green); }

/* Protocol-level problems: wrong contract, wrong network, paused, RPC down. */
.notice-warn {
  background: linear-gradient(180deg, rgba(153,33,33,.16), rgba(153,33,33,.07));
  border-color: rgba(255,94,95,.32);
  border-left: 3px solid var(--logo-red-bright);
  color: var(--logo-red-tint);
}
.notice-warn strong { color: #FFC9C9; }
.banner-list { margin: 8px 0 0; font-size: 12px; line-height: 1.7; }

/* ------------------------------------------------------------- progress */

.bar {
  position: relative;
  height: 26px;
  margin: 12px 0 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.28));
  border: 1px solid var(--edge);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-green-dark), var(--neon-green) 55%, var(--neon-green-bright));
  box-shadow: 0 0 14px var(--neon-glow), inset 0 1px 0 rgba(255,255,255,.35);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.bar-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  letter-spacing: .02em;
}

.bar-sm { height: 8px; margin: 6px 0 0; }
.bar-sm .bar-value { display: none; }

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

.plan-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.plan-chip {
  padding: 12px 6px;
  display: grid;
  gap: 2px;
  justify-items: center;
  min-height: 78px;
  border-radius: var(--radius);
  background: var(--surface-raised);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-top), var(--shadow-sm);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.plan-chip:active { transform: scale(.97); }
.plan-chip-rate { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--neon-green); }
.plan-chip-name { font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.plan-chip-sub  { font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .1em; }

.plan-cards { display: grid; gap: 12px; }

.plan-card {
  position: relative;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--brushed), var(--surface-raised);
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 var(--edge-top),
    inset 0 -1px 0 rgba(0,0,0,.5),
    var(--shadow);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}

.plan-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  pointer-events: none;
}

.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.plan-card.is-selected {
  border-color: rgba(124,255,61,.55);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(124,255,61,.28),
    0 0 26px var(--neon-glow-soft),
    var(--shadow-lg);
}

/* Light sweep across the selected card. */
.plan-card.is-selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  animation: sweep 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sweep {
  0%   { left: -60%; }
  55%  { left: 125%; }
  100% { left: 125%; }
}

.plan-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--neon-green-bright), var(--neon-green-dark));
  color: #08210A;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 2;
}

.plan-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--metal-silver);
}

.plan-rate {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin-top: 4px;
  letter-spacing: -.02em;
  background: var(--grad-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(124,255,61,.22));
}

.plan-name {
  background: var(--grad-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.plan-rate-sub {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-faint);
  margin-top: 2px;
}

.plan-specs {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.plan-specs div { min-width: 0; }
.plan-specs dt { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }
.plan-specs dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; }

/* Metallic accent per plan. The green family spans the mark's deeper emerald
   (GREEN, the steady plan) through to full neon (NEON, the fastest). */
.accent-green  { --card-accent: var(--logo-green); }
.accent-silver { --card-accent: var(--metal-silver); }
.accent-neon   { --card-accent: var(--neon-green-bright); }
.accent-bronze { --card-accent: var(--bronze); }
.accent-gold   { --card-accent: var(--gold); }

.accent-green .plan-rate,
.accent-green .plan-chip-rate {
  background: linear-gradient(150deg, var(--logo-green-light), var(--logo-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.accent-silver .plan-rate,
.accent-silver .plan-chip-rate {
  background: linear-gradient(150deg, var(--metal-light), var(--metal-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.summary-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid var(--edge);
  border-left: 3px solid var(--card-accent, var(--neon-green));
}
.summary-plan-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .06em; }
.summary-plan-rate {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--neon-green);
  text-align: right;
  line-height: 1.1;
}
.summary-plan-rate span {
  display: block;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}

/* ----------------------------------------------------------------- tabs */

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 5px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.2));
  border: 1px solid var(--edge);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5);
}

.tab-btn {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .16s ease;
}

.tab-btn.is-active {
  background: linear-gradient(180deg, rgba(124,255,61,.20), rgba(124,255,61,.06));
  border-color: rgba(124,255,61,.38);
  color: var(--neon-green-bright);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 12px var(--neon-glow-soft);
}

/* ------------------------------------------------------------ positions */

.position { border-left: 3px solid var(--card-accent, var(--metal-silver)); }

.position-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.position-time { margin-bottom: 4px; }

/* ----------------------------------------------------------- leadership */

.rank-card { display: grid; gap: 10px; }
.rank-card-lg { padding: 18px 16px; }

.rank-head { display: flex; align-items: center; gap: 12px; }
.rank-head-body { flex: 1; min-width: 0; }

.rank-medal {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 20px;
  background: var(--surface-raised);
  border: 1px solid var(--edge-top);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--shadow-sm);
}

.rank-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: .04em; }

.rank-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.rank-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  border: 1px solid var(--edge);
  border-left: 3px solid var(--card-accent, var(--metal-silver));
}

.rank-medal-lg {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 28px;
  background: var(--surface-raised);
  border: 1px solid var(--edge-top);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 18px -4px var(--card-accent, transparent),
    var(--shadow-sm);
}

.rank-name-lg { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: .02em; }

.rank-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--edge);
}
.rank-next-name { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }

.qual-figures { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.qual-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- five-level view ---- */

.level-vol { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.level-vol:last-child { border-bottom: 0; }

.level-vol-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.level-vol-amount { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }

.level-badge {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  background: var(--surface-raised);
  border: 1px solid var(--edge-top);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--edge);
}
.level-rate { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--neon-green); }
.level-count { margin-left: auto; text-align: right; }

.l1 { border-left: 2px solid #A78BFA; }
.l2 { border-left: 2px solid #60A5FA; }
.l3 { border-left: 2px solid #67E8F9; }
.l4 { border-left: 2px solid #F0ABFC; }
.l5 { border-left: 2px solid #FDA4AF; }

/* ---- rank tiers ---- */

.tier {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-left: 3px solid var(--card-accent, var(--metal-mid));
  opacity: .72;
}
.tier.is-qualified { opacity: 1; }

.tier-medal { font-size: 22px; flex: 0 0 auto; }
.tier-body { flex: 1; min-width: 0; }
.tier-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.tier-right { text-align: right; flex: 0 0 auto; display: grid; gap: 5px; justify-items: end; }
.tier-reward { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }

/* ---- reward-available card ---- */

.claim-card {
  text-align: center;
  display: grid;
  gap: 8px;
  border-color: rgba(124,255,61,.42);
  background: linear-gradient(160deg, rgba(124,255,61,.13), rgba(20,26,20,.9) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 30px -8px var(--neon-glow),
    var(--shadow-lg);
}

.claim-badge {
  justify-self: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(124,255,61,.18);
  border: 1px solid rgba(124,255,61,.4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neon-green-bright);
}

.claim-title { font-size: 13.5px; color: var(--text-secondary); }

.claim-figure {
  font-family: var(--font-display);
  font-size: clamp(30px, 9vw, 38px);
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--neon-green-bright), var(--neon-green-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------- account */

.addr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,.28);
  border: 1px solid var(--edge);
}
.addr { font-size: 13px; }

.asset { display: flex; align-items: center; gap: 12px; }
.asset-icon {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--surface-raised);
  border: 1px solid var(--edge-top);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--neon-green);
}
.asset-name { font-weight: 600; font-size: 14px; }

/* ------------------------------------------------------- sheets & toasts */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4,6,9,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in .18s ease-out;
}

.sheet {
  width: 100%;
  max-width: min(520px, calc(100vw - 16px));
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 8px 8px;
  padding: 10px 16px calc(18px + var(--safe-bottom));
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius) var(--radius);
  animation: sheet-up .24s cubic-bezier(.2, .8, .2, 1);
}

.sheet-grip {
  width: 40px;
  height: 4px;
  margin: 2px auto 12px;
  border-radius: 999px;
  background: var(--metal-mid);
  opacity: .6;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 15px;
}

@keyframes sheet-up {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.wallet-list { display: grid; gap: 8px; margin: 12px 0; }

.wallet-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-top);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.wallet-option:active { transform: scale(.99); }
.wallet-icon { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; }
.wallet-icon img { border-radius: 6px; }
.wallet-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- transaction toast ---- */

.toast-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 10px);
  z-index: 80;
  display: flex;
  justify-content: center;
  padding: 0 10px;
  pointer-events: none;
}

.toast {
  width: 100%;
  max-width: min(460px, calc(100vw - 20px));
  pointer-events: auto;
  display: grid;
  gap: 8px;
  animation: sheet-up .22s cubic-bezier(.2, .8, .2, 1);
  box-shadow: var(--shadow-lg);
}

.toast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.toast-title { display: flex; align-items: center; gap: 9px; font-size: 14.5px; min-width: 0; }
.toast-msg { overflow-wrap: anywhere; }

.spinner {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: var(--neon-green);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------- icons & capital */

/* Font Awesome glyphs inherit size from their context; these only set colour
   and spacing so the icon set reads as one system rather than as decoration. */
.tab-icon { font-size: 16px; line-height: 1; }
.quick-icon { font-size: 19px; color: var(--neon-green); }
.wallet-btn-icon { font-size: 12px; color: var(--metal-silver); }

.plan-chip-icon { font-size: 15px; color: var(--card-accent, var(--neon-green)); }

.plan-name-icon {
  margin-right: 7px;
  color: var(--card-accent, var(--metal-silver));
}

.plan-badge i { margin-right: 3px; }

/* Rank medals take the tier's metal colour — bronze, silver, gold. */
.rank-medal i, .rank-medal-lg i, .tier-medal i { color: var(--card-accent, var(--metal-silver)); }
.rank-medal-lg i { font-size: 26px; }
.tier-medal i { font-size: 20px; }
.rank-next-name i { margin-right: 5px; color: var(--card-accent, var(--metal-silver)); }

.accent-bronze { --card-accent: var(--bronze); }
.accent-gold   { --card-accent: var(--gold); }

/* ---- capital: re-stake beside withdraw ---- */

/* Re-stake is the wider, primary action because it keeps the POL working and
   never leaves the contract; withdrawing is the quieter alternative. */
.capital-actions {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.capital-actions .btn { width: 100%; min-width: 0; padding: 0 10px; font-size: 13px; }
.capital-hint { margin-top: 8px; }

.capital-done {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: rgba(124,255,61,.09);
  border: 1px solid rgba(124,255,61,.26);
  color: var(--neon-green-bright);
  font-size: 12.5px;
  font-weight: 600;
}

/* Very narrow phones: stack rather than squeeze two labels side by side. */
@media (max-width: 359px) {
  .capital-actions { grid-template-columns: 1fr; }
}