:root {
  --bg: #050911;
  --bg-accent: #0b1424;
  --card: rgba(15, 23, 39, 0.88);
  --card-solid: #0f1727;
  --card-elevated: #162238;
  --border: rgba(255, 255, 255, 0.09);
  --border-gold: rgba(245, 158, 11, 0.35);
  --border-emerald: rgba(16, 185, 129, 0.38);
  --text: #f8fafc;
  --muted: #94a3b8;
  --emerald: #10b981;
  --emerald-bright: #34d399;
  --emerald-dim: rgba(16, 185, 129, 0.14);
  --gold: #f59e0b;
  --gold-bright: #fbbf24;
  --gold-dim: rgba(245, 158, 11, 0.15);
  --rose: #f43f5e;
  --rose-dim: rgba(244, 63, 94, 0.15);
  --blue: #38bdf8;
  --blue-dim: rgba(56, 189, 248, 0.15);
  --purple: #a855f7;
  --purple-dim: rgba(168, 85, 247, 0.15);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  background: radial-gradient(circle at 50% 0%, #10203a 0%, var(--bg) 60%);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: 108px;
}

.container {
  max-width: 780px;
  margin: 0 auto;
  padding: 12px 14px 36px;
}

/* Brand & Header */
.ulot-logo-badge {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, #f59e0b 0%, #10b981 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.5px;
  color: #04100b;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.32);
  flex-shrink: 0;
}

.copyright-footer {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 16px 10px 8px;
  letter-spacing: 0.2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 18px;
}

/* Auth Screen */
#auth-screen {
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.auth-card {
  width: 100%;
  max-width: 430px;
  background: var(--card);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 24px 20px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.65);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #070d17;
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.auth-tab {
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  border-radius: 9px;
  cursor: pointer;
  border: none;
  background: transparent;
}

.auth-tab.active {
  background: var(--card-elevated);
  color: var(--text);
}

.field {
  margin-bottom: 13px;
}

.field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
}

.field input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: #080e1a;
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.field input:focus {
  border-color: var(--emerald);
}

/* Buttons */
.btn-primary {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #03120c;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.28);
}

.btn-gold {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.5);
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #090601;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
}

.btn-blue {
  width: 100%;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #f8fafc;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.btn-outline {
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-elevated);
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  gap: 8px;
}

.hub-switch-pill {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--gold-bright);
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  background: var(--emerald-dim);
  color: var(--emerald-bright);
  border: 1px solid var(--border-emerald);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-bright);
  box-shadow: 0 0 8px var(--emerald-bright);
}

/* 3-Bot Hub Cards */
.hub-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(245, 158, 11, 0.1));
  border: 1px solid var(--border-emerald);
  border-radius: 16px;
  padding: 14px 15px;
  margin-bottom: 12px;
}

.isolation-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.42);
  color: #fde68a;
  border-radius: 13px;
  padding: 11px 13px;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 14px;
  font-weight: 600;
}

.bot-hub-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.bot-hub-card.active-bot {
  border: 1.5px solid var(--emerald);
  background: linear-gradient(165deg, rgba(16, 185, 129, 0.12) 0%, rgba(15, 23, 39, 0.95) 55%);
}

.bot-hub-card.coming-soon {
  opacity: 0.92;
  border: 1px dashed rgba(148, 163, 184, 0.28);
}

.bot-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.bot-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.bot-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.badge-active {
  background: var(--emerald-dim);
  color: var(--emerald-bright);
  border: 1px solid var(--border-emerald);
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.badge-soon {
  background: var(--gold-dim);
  color: var(--gold-bright);
  border: 1px solid var(--border-gold);
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.hub-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 11px 0 13px;
}

.hub-metric-box {
  background: rgba(7, 12, 22, 0.72);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 8px 10px;
}

.hub-metric-label {
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 3px;
}

.hub-metric-val {
  font-size: 13.5px;
  font-weight: 800;
}

/* Dashboard Cards & Grids */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 17px;
  padding: 15px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.hero-card {
  background: linear-gradient(150deg, #10253e 0%, #0b1526 65%, #091b18 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.section-title {
  font-size: 13.5px;
  font-weight: 800;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

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

.stat-box {
  background: rgba(8, 13, 24, 0.75);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 11px;
}

.stat-label {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-val {
  font-size: 15px;
  font-weight: 800;
}

/* Allocation & Progress Bars */
.alloc-bar {
  height: 11px;
  border-radius: 999px;
  background: #080e1a;
  overflow: hidden;
  display: flex;
  margin: 8px 0;
  border: 1px solid var(--border);
}

.alloc-seg-active { background: var(--emerald); }
.alloc-seg-reserve { background: var(--gold); }
.alloc-seg-open { background: var(--blue); }

.progress-track {
  width: 100%;
  height: 9px;
  background: #080e1a;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin: 7px 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--emerald), var(--gold));
  border-radius: 999px;
}

/* Step Cards for Activate Bot & Telegram */
.step-card {
  background: rgba(12, 20, 35, 0.92);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 11px;
}

.step-card.highlight-gold {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(160deg, rgba(245, 158, 11, 0.1) 0%, rgba(12, 20, 35, 0.95) 60%);
}

.step-card.highlight-emerald {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(160deg, rgba(16, 185, 129, 0.11) 0%, rgba(12, 20, 35, 0.95) 60%);
}

.step-card.highlight-blue {
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(160deg, rgba(56, 189, 248, 0.11) 0%, rgba(12, 20, 35, 0.95) 60%);
}

.step-num-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  margin-bottom: 6px;
}

.authorized-banner {
  background: rgba(16, 185, 129, 0.16);
  border: 1.5px solid var(--emerald);
  color: #a7f3d0;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}

/* Bet Cards */
.bet-card {
  background: rgba(9, 15, 27, 0.85);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 9px;
}

.bet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}

.pill {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.pill-OPEN { background: var(--blue-dim); color: var(--blue); }
.pill-WON { background: var(--emerald-dim); color: var(--emerald-bright); }
.pill-LOST { background: var(--rose-dim); color: var(--rose); }

.leg-item {
  font-size: 12px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  margin-bottom: 5px;
  border-left: 3px solid var(--emerald);
}

/* Bottom Navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(8, 13, 23, 0.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  max-width: 780px;
  margin: 0 auto;
  z-index: 90;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  gap: 2px;
}

.nav-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 4px;
  min-height: 58px;
  cursor: pointer;
  border-radius: 10px;
}

.nav-btn.active {
  color: var(--emerald-bright);
  background: rgba(16, 185, 129, 0.1);
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 200;
}

.modal-card {
  width: 100%;
  max-width: 420px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
}

.chart-wrap {
  position: relative;
  height: 175px;
  width: 100%;
}

/* Bybit Multi-Chain Deposit Drawer & Anti-Flash Verifier */
.chain-pills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.chain-pill-btn {
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #080e1a;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.chain-pill-btn.active {
  background: rgba(16, 185, 129, 0.16);
  border-color: var(--emerald);
  color: #ecfdf5;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.22);
}

.chain-pill-btn.bybit-pill.active {
  background: rgba(245, 158, 11, 0.18);
  border-color: var(--gold);
  color: #fef3c7;
}

.qr-address-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #070d18;
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 14px;
  padding: 11px;
  margin-bottom: 10px;
}

.qr-svg-holder {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-svg-holder svg {
  width: 100%;
  height: 100%;
}

.addr-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #f8fafc;
  word-break: break-all;
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin: 4px 0 6px;
}

.anti-flash-shield {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.13), rgba(56, 189, 248, 0.1));
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 11px;
  padding: 9px 11px;
  font-size: 11px;
  color: #d1fae5;
  line-height: 1.4;
  margin-bottom: 10px;
}

.bybit-uid-strip {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.ulot-logo-badge {
  padding: 0 !important;
  overflow: hidden !important;
  background: #050911 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.55) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25), 0 0 0 1px rgba(16, 185, 129, 0.2) !important;
}
.ulot-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* t187u live bets */
.pill-VOID { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.pill-REJECTED { background: rgba(148,163,184,0.18); color: #94a3b8; }
.live-tag { display:inline-block; background: rgba(239,68,68,0.18); color:#f87171; font-size:9.5px; font-weight:900; padding:1px 6px; border-radius:6px; margin-right:5px; letter-spacing:.5px; }
.lb-row { padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:12px; }
.lb-sub { font-size:10.5px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.6px; margin:10px 0 2px; }
.lb-st { font-size:10px; font-weight:900; padding:1px 6px; border-radius:6px; }
.lb-st-cand { background: var(--emerald-dim); color: var(--emerald-bright); }
.lb-st-alert { background: rgba(250,204,21,0.15); color: #facc15; }
.lb-st-skip { background: rgba(148,163,184,0.18); color: #94a3b8; }

/* ===================================================================
   t214u — PlayStation-style console UI layer (visual only)
   Tiles: glass console panels, glow borders, lift + focus ring.
   Options: console menu tiles, press-down + spring, neon accent.
   =================================================================== */
:root {
  --ps-cyan: #22d3ee;
  --ps-cyan-glow: rgba(34, 211, 238, 0.55);
  --ps-accent: var(--emerald-bright);
  --ps-ring: 0 0 0 2px rgba(255,255,255,0.92), 0 0 0 5px rgba(34,211,238,0.55), 0 0 26px rgba(34,211,238,0.45);
  --ps-ease: cubic-bezier(.2,.9,.25,1.25);
  --ps-ease-out: cubic-bezier(.16,1,.3,1);
  --ps-panel: linear-gradient(160deg, rgba(30,44,72,0.72) 0%, rgba(12,19,34,0.86) 48%, rgba(7,11,21,0.94) 100%);
  --ps-panel-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 -1px 0 rgba(0,0,0,0.5) inset, 0 12px 30px -8px rgba(0,0,0,0.75), 0 2px 6px rgba(0,0,0,0.45);
}

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(34,211,238,0.10), transparent 60%),
    radial-gradient(900px 500px at 110% 30%, rgba(168,85,247,0.07), transparent 60%),
    radial-gradient(circle at 50% 0%, #10203a 0%, var(--bg) 62%);
  background-attachment: fixed;
}
/* faint vignette (non-interactive, below content) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 100%);
}
#auth-screen, #hub-screen, #app-screen, .container { position: relative; z-index: 1; }

/* ---------- Console panels (cards / tiles) ---------- */
.card, .bot-hub-card, .step-card, .bet-card, .auth-card, .modal-card, .hub-banner {
  background: var(--ps-panel);
  border: 1px solid rgba(148,197,255,0.10);
  box-shadow: var(--ps-panel-shadow);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  position: relative;
  isolation: isolate;
}
/* top sheen line */
.card::after, .bot-hub-card::after, .step-card::after, .bet-card::after, .hub-banner::after {
  content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  opacity: .7;
}
.hero-card { background: linear-gradient(150deg, rgba(16,52,82,0.85) 0%, rgba(11,21,38,0.92) 60%, rgba(6,32,28,0.92) 100%); border-color: rgba(52,211,153,0.32); }
.bot-hub-card.active-bot { border: 1px solid rgba(52,211,153,0.55); box-shadow: var(--ps-panel-shadow), 0 0 0 1px rgba(52,211,153,0.15), 0 0 32px -6px rgba(16,185,129,0.45); }
.step-card.highlight-gold { border-color: rgba(251,191,36,0.45); }
.step-card.highlight-emerald { border-color: rgba(52,211,153,0.45); }
.step-card.highlight-blue { border-color: rgba(56,189,248,0.45); }

/* Interactive tiles: cursor spotlight + lift */
.ps-tile {
  transition: transform .32s var(--ps-ease-out), box-shadow .32s var(--ps-ease-out), border-color .25s ease;
  will-change: transform;
}
.ps-tile::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(34,211,238,0.13), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
}
.ps-tile.ps-hot::before, .ps-tile:focus-within::before { opacity: 1; }
@media (hover: hover) {
  .ps-tile:hover { transform: translateY(-3px) scale(1.012); border-color: rgba(34,211,238,0.38);
    box-shadow: var(--ps-panel-shadow), 0 18px 40px -12px rgba(0,0,0,0.85), 0 0 24px -4px rgba(34,211,238,0.28); }
}
.ps-tile.ps-pressed { transform: scale(0.985); transition-duration: .12s; }

/* Bet cards: status rail + console row feel */
.bet-card { border-radius: 16px; padding: 13px 13px 11px 16px; overflow: hidden; }
.bet-card .bet-header > :first-child span:first-child { letter-spacing: .25px; }
.bet-card:has(.pill-OPEN) { box-shadow: var(--ps-panel-shadow), inset 3px 0 0 var(--blue), -4px 0 18px -6px rgba(56,189,248,0.6); }
.bet-card:has(.pill-WON)  { box-shadow: var(--ps-panel-shadow), inset 3px 0 0 var(--emerald-bright), -4px 0 18px -6px rgba(52,211,153,0.6); }
.bet-card:has(.pill-LOST) { box-shadow: var(--ps-panel-shadow), inset 3px 0 0 var(--rose), -4px 0 18px -6px rgba(244,63,94,0.55); }
.leg-item { background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); border-left: 2px solid var(--ps-cyan); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.pill { letter-spacing: .8px; text-transform: uppercase; border: 1px solid currentColor; box-shadow: 0 0 10px -2px currentColor; }
.pill-OPEN { animation: ps-breathe 2.6s ease-in-out infinite; }
@keyframes ps-breathe { 50% { box-shadow: 0 0 16px 0 currentColor; } }

/* stat / metric boxes: inset console wells */
.stat-box, .hub-metric-box {
  background: linear-gradient(180deg, rgba(3,7,14,0.85), rgba(10,17,30,0.7));
  border: 1px solid rgba(148,197,255,0.08);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.04);
}
.stat-label, .hub-metric-label, .lb-sub { text-transform: uppercase; letter-spacing: 1.1px; font-size: 9.5px; font-weight: 800; }
.stat-val, .hub-metric-val { font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(255,255,255,0.12); text-shadow: 0 0 12px color-mix(in srgb, currentColor 40%, transparent); }
.section-title { letter-spacing: 1.4px; text-transform: uppercase; font-size: 12px; }
.section-title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: linear-gradient(var(--ps-cyan), var(--emerald)); box-shadow: 0 0 10px var(--ps-cyan-glow); margin-right: 8px; flex: none; }
.section-title { justify-content: flex-start; }
.section-title > :last-child:not(:first-child) { margin-left: auto; }
.lb-row { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(148,197,255,0.16), transparent) 1; }
.topbar { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(34,211,238,0.35), transparent) 1; }

/* ---------- Console option buttons ---------- */
.btn-primary, .btn-gold, .btn-blue, .btn-outline, .hub-switch-pill, .chain-pill-btn, .auth-tab, .nav-btn {
  position: relative; overflow: hidden; isolation: isolate;
  letter-spacing: .6px;
  min-height: 40px;
  transition: transform .38s var(--ps-ease), box-shadow .25s ease, filter .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
.btn-primary, .btn-gold, .btn-blue { text-transform: uppercase; font-size: 12.5px; font-weight: 900; border-radius: 14px; }
.btn-primary {
  background: linear-gradient(180deg, #3ee6ad 0%, #10b981 45%, #058a62 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(0,0,0,0.25), 0 8px 22px -6px rgba(16,185,129,0.7), 0 0 0 1px rgba(52,211,153,0.5);
}
.btn-gold {
  background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 45%, #c27106 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(0,0,0,0.25), 0 8px 22px -6px rgba(245,158,11,0.7), 0 0 0 1px rgba(251,191,36,0.55);
}
.btn-blue {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #075985 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.25), 0 8px 22px -6px rgba(56,189,248,0.65), 0 0 0 1px rgba(56,189,248,0.5);
}
.btn-outline {
  background: linear-gradient(180deg, rgba(40,56,88,0.75), rgba(16,24,42,0.9));
  border: 1px solid rgba(148,197,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px -4px rgba(0,0,0,0.7);
  border-radius: 12px;
}
/* moving sheen sweep */
.btn-primary::after, .btn-gold::after, .btn-blue::after, .btn-outline::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg); opacity: 0;
}
@media (hover: hover) {
  .btn-primary:hover, .btn-gold:hover, .btn-blue:hover, .btn-outline:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.08); }
  .btn-primary:hover::after, .btn-gold:hover::after, .btn-blue:hover::after, .btn-outline:hover::after { animation: ps-sheen .75s ease forwards; }
  .btn-outline:hover { border-color: rgba(34,211,238,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 18px -4px rgba(34,211,238,0.5); }
}
@keyframes ps-sheen { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 100% { left: 120%; opacity: 0; } }

/* haptic-like press: snap down, spring back on release */
.btn-primary:active, .btn-gold:active, .btn-blue:active, .btn-outline:active, .hub-switch-pill:active,
.chain-pill-btn:active, .auth-tab:active, .nav-btn:active, .ps-press {
  transform: scale(0.94) !important; transition-duration: .08s !important; filter: brightness(1.15);
}

/* PS selection focus ring (keyboard / d-pad) */
:is(.btn-primary, .btn-gold, .btn-blue, .btn-outline, .hub-switch-pill, .chain-pill-btn, .auth-tab, .nav-btn, .ps-tile):focus-visible {
  outline: none; box-shadow: var(--ps-ring) !important;
}

/* ripple spawned by psui.js */
.ps-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 2;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(34,211,238,0.25) 45%, transparent 70%);
  animation: ps-ripple .55s var(--ps-ease-out) forwards;
}
@keyframes ps-ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(22); opacity: 0; } }

/* Segmented selectors (auth tabs, chain pills) as console option tiles */
.auth-tabs { background: rgba(3,7,14,0.8); box-shadow: inset 0 2px 8px rgba(0,0,0,0.6); border-color: rgba(148,197,255,0.1); }
.auth-tab { text-transform: uppercase; font-size: 11.5px; letter-spacing: 1px; }
.auth-tab.active {
  background: linear-gradient(180deg, rgba(56,80,122,0.9), rgba(22,34,56,0.95));
  color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 0 0 1px rgba(34,211,238,0.45), 0 0 18px -4px rgba(34,211,238,0.55);
}
.chain-pill-btn {
  background: linear-gradient(180deg, rgba(20,30,50,0.9), rgba(8,13,24,0.95));
  border: 1px solid rgba(148,197,255,0.12); letter-spacing: .8px; text-transform: uppercase; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.chain-pill-btn.active {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 0 0 4px rgba(16,185,129,0.6), 0 0 22px rgba(16,185,129,0.5);
}
.chain-pill-btn.bybit-pill.active { box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 0 0 4px rgba(245,158,11,0.6), 0 0 22px rgba(245,158,11,0.5); }
.hub-switch-pill { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 14px -4px rgba(245,158,11,0.6); letter-spacing: .8px; text-transform: uppercase; font-size: 10.5px; }
.live-dot { animation: ps-pulse 1.6s ease-in-out infinite; }
@keyframes ps-pulse { 50% { transform: scale(1.5); opacity: .55; } }
.badge-active, .badge-soon, .live-pill { letter-spacing: .9px; text-transform: uppercase; }

/* Inputs: console text field */
.field input { background: rgba(3,7,14,0.85); border-color: rgba(148,197,255,0.12); box-shadow: inset 0 2px 6px rgba(0,0,0,0.55); transition: border-color .2s, box-shadow .2s; min-height: 44px; }
.field input:focus { border-color: var(--ps-cyan); box-shadow: inset 0 2px 6px rgba(0,0,0,0.55), 0 0 0 3px rgba(34,211,238,0.22), 0 0 18px -4px rgba(34,211,238,0.5); }
.field label { text-transform: uppercase; letter-spacing: 1px; font-size: 10px; font-weight: 800; }

/* ---------- Bottom nav: console XMB-style dock (t217u: 5 bigger tabs fill bar) ---------- */
.bottom-nav {
  background: linear-gradient(180deg, rgba(14,22,40,0.82), rgba(4,8,16,0.96));
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(34,211,238,0.45), rgba(168,85,247,0.35), transparent) 1;
  box-shadow: 0 -12px 30px rgba(0,0,0,0.55);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  display: flex; flex-wrap: nowrap; align-items: stretch;
  gap: 3px; padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.nav-btn {
  flex: 1 1 0; min-width: 0;
  border-radius: 14px; min-height: 60px; justify-content: center;
  text-transform: uppercase; font-size: 11px; letter-spacing: .6px; font-weight: 800;
  padding: 8px 4px; gap: 5px;
}
.nav-btn > span:first-child { font-size: 24px; line-height: 1; filter: grayscale(.55) brightness(.85); transition: transform .4s var(--ps-ease), filter .25s ease; }
.nav-btn > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav-btn.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(34,211,238,0.16), rgba(16,185,129,0.08));
  box-shadow: inset 0 0 0 1px rgba(34,211,238,0.5), 0 0 22px -6px rgba(34,211,238,0.75);
}
.nav-btn.active > span:first-child { filter: none drop-shadow(0 0 8px rgba(34,211,238,0.8)); transform: translateY(-2px) scale(1.18); }
.nav-btn.active::before {
  content: ""; position: absolute; left: 28%; right: 28%; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--ps-cyan); box-shadow: 0 0 10px var(--ps-cyan);
}
@media (hover: hover) { .nav-btn:hover:not(.active) { color: #e2e8f0; background: rgba(255,255,255,0.04); } }

/* View switch: console menu slide-in */
.ps-enter { animation: ps-enter .42s var(--ps-ease-out) both; }
@keyframes ps-enter { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.ps-stagger > * { animation: ps-enter .45s var(--ps-ease-out) both; }
.ps-stagger > *:nth-child(2) { animation-delay: .04s; } .ps-stagger > *:nth-child(3) { animation-delay: .08s; }
.ps-stagger > *:nth-child(4) { animation-delay: .12s; } .ps-stagger > *:nth-child(5) { animation-delay: .16s; }
.ps-stagger > *:nth-child(n+6) { animation-delay: .2s; }

/* Modal: console dialog */
.modal-backdrop { background: radial-gradient(circle at 50% 40%, rgba(4,10,22,0.7), rgba(0,0,0,0.88)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-card { box-shadow: var(--ps-panel-shadow), 0 0 0 1px rgba(34,211,238,0.25), 0 30px 80px rgba(0,0,0,0.8), 0 0 40px -10px rgba(34,211,238,0.35); animation: ps-enter .35s var(--ps-ease-out) both; }

/* Progress / alloc bars: neon fill */
.progress-fill { box-shadow: 0 0 12px rgba(52,211,153,0.6); }
.progress-track, .alloc-bar { box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .ps-tile:hover, .btn-primary:hover, .btn-gold:hover, .btn-blue:hover, .btn-outline:hover { transform: none !important; }
}


/* ---------- t229u: 4-tab dock fills the bar evenly (Live Bets tab removed) ---------- */
.bottom-nav.nav-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 9px 8px calc(9px + env(safe-area-inset-bottom)); }
.bottom-nav.nav-4 .nav-btn { width: 100%; min-height: 68px; font-size: 12px; letter-spacing: .7px; padding: 9px 4px; gap: 6px; }
.bottom-nav.nav-4 .nav-btn > span:first-child { font-size: 27px; }
@media (min-width: 520px) { .bottom-nav.nav-4 .nav-btn { min-height: 72px; font-size: 13px; } .bottom-nav.nav-4 .nav-btn > span:first-child { font-size: 29px; } }

/* t229u: referral share UI */
.ref-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ref-code-row .ref-code { flex: 1 1 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; font-weight: 900; letter-spacing: 2px;
  padding: 9px 12px; border-radius: 11px; color: #a5f3fc; background: rgba(34,211,238,0.08); border: 1px dashed rgba(34,211,238,0.5); text-align: center; }
.ref-code-row button { padding: 9px 12px; font-size: 12px; width: auto; }
.ref-strip { margin-bottom: 14px; }
#modal-referral select { width: 100%; }

/* t248u: four Activate gates checklist */
.gates-card{margin:10px 0 12px;padding:12px 13px;border-radius:12px;background:rgba(15,23,42,0.75);border:1px solid rgba(148,163,184,0.35);}
.gates-head{font-size:12.5px;font-weight:900;margin-bottom:7px;}
.gates-head.gate-done{color:var(--emerald-bright,#34d399);} .gates-head.gate-pending{color:var(--gold-bright,#fbbf24);}
.gates-list{list-style:none;margin:0;padding:0;}
.gate-row{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-top:1px solid rgba(148,163,184,0.15);font-size:12px;line-height:1.35;}
.gate-row:first-child{border-top:none;}
.gate-mark{flex:0 0 auto;}
.gate-state{font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:6px;margin-left:4px;}
.gate-done .gate-state{background:rgba(16,185,129,0.18);color:#6ee7b7;} .gate-pending .gate-state{background:rgba(245,158,11,0.18);color:#fcd34d;}
.gate-detail{color:#94a3b8;font-size:11px;}
.gates-note{margin-top:7px;font-size:11px;color:#fde68a;font-weight:700;}

/* t270u: show/hide password + forgot password */
.pw-wrap{position:relative;display:block;}
.pw-wrap input{width:100%;padding-right:78px !important;box-sizing:border-box;}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:1px solid rgba(148,163,184,0.35);color:var(--muted,#94a3b8);font-size:11.5px;font-weight:700;padding:5px 8px;border-radius:8px;cursor:pointer;line-height:1;}
.pw-toggle:hover,.pw-toggle[aria-pressed="true"]{color:var(--gold-bright,#fbbf24);border-color:var(--gold-bright,#fbbf24);}
.forgot-row{text-align:right;margin:-4px 0 12px;font-size:12px;}
.forgot-row a{color:var(--gold-bright,#fbbf24);text-decoration:none;font-weight:700;}
.forgot-row a:hover{text-decoration:underline;}
.auth-sub-title{font-size:15px;font-weight:800;color:#f8fafc;margin:2px 0 6px;}
.auth-sub-note{font-size:11.5px;color:var(--muted,#94a3b8);margin-bottom:12px;line-height:1.45;}
.auth-ok{background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.4);color:#d1fae5;padding:9px 12px;border-radius:10px;font-size:12px;margin-bottom:12px;line-height:1.45;}

/* ===== t274u: Install / Add to Home Screen card ===== */
.a2hs-card{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:99999;width:min(420px,calc(100vw - 24px));
  transform:translate(-50%,140%);opacity:0;transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .3s ease;
  background:linear-gradient(160deg,rgba(22,34,56,.97) 0%,rgba(12,19,34,.98) 60%,rgba(7,11,21,.99) 100%);
  border:1px solid var(--border-emerald,rgba(16,185,129,.38));border-radius:18px;padding:16px 16px 14px;color:var(--text,#f8fafc);
  box-shadow:0 18px 44px -10px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04) inset,0 0 28px -8px rgba(16,185,129,.45);
  font-family:inherit;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.a2hs-card.a2hs-in{transform:translate(-50%,0);opacity:1}
.a2hs-row{display:flex;gap:12px;align-items:center;padding-right:22px}
.a2hs-logo{width:48px;height:48px;border-radius:12px;flex:0 0 48px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.a2hs-title{font-weight:800;font-size:15px;letter-spacing:.2px;color:var(--emerald-bright,#34d399)}
.a2hs-sub{font-size:12.5px;line-height:1.45;color:var(--muted,#94a3b8);margin-top:3px}
.a2hs-sub b,.a2hs-steps b{color:var(--text,#f8fafc)}
.a2hs-steps{margin:12px 0 2px;padding-left:20px;font-size:12.5px;line-height:1.6;color:#cbd5e1}
.a2hs-steps li{margin:3px 0}
.a2hs-ico{display:inline-flex;vertical-align:-3px;color:var(--blue,#38bdf8)}
.a2hs-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;margin-top:14px}
.a2hs-btn{border-radius:12px;padding:11px 12px;font-weight:800;font-size:13.5px;cursor:pointer;font-family:inherit;border:1px solid transparent}
.a2hs-primary{background:linear-gradient(135deg,var(--emerald,#10b981),#059669);color:#04120c;box-shadow:0 6px 18px -6px rgba(16,185,129,.7)}
.a2hs-primary:active{transform:scale(.98)}
.a2hs-ghost{background:transparent;color:var(--muted,#94a3b8);border-color:var(--border,rgba(255,255,255,.09))}
.a2hs-x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--muted,#94a3b8);font-size:22px;line-height:1;cursor:pointer;padding:4px 6px}
@media (min-width:900px){.a2hs-card{left:auto;right:20px;bottom:20px;transform:translateY(140%)}.a2hs-card.a2hs-in{transform:translateY(0)}}


/* t284u mobile-first footer */
.ulot-foot{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:12px;line-height:1.45;padding:18px 12px calc(14px + env(safe-area-inset-bottom));max-width:100%;overflow-wrap:anywhere}
.ulot-foot .foot-links{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;max-width:320px;margin:0 auto}
.ulot-foot .foot-link{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);color:#e5edf7;font-size:14px;font-weight:700;text-decoration:none;-webkit-tap-highlight-color:transparent}
.ulot-foot .foot-link:active,.ulot-foot .foot-link:hover{border-color:var(--gold-bright,#fbbf24);color:var(--gold-bright,#fbbf24)}
.ulot-foot .foot-badges{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:nowrap;color:#b6c3d6;font-weight:700}
.ulot-foot .foot-badge{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:24px;padding:0 8px;border-radius:999px;border:1px solid rgba(251,191,36,0.55);color:#fde68a;font-size:11.5px;font-weight:800}
.ulot-foot .foot-copy{color:#a8b6ca;font-weight:600}
.ulot-foot .foot-design{color:var(--muted);font-size:11px;font-weight:600;opacity:.85}
@media (min-width:640px){.ulot-foot .foot-links{flex-direction:row;justify-content:center;max-width:none;width:auto}.ulot-foot .foot-link{min-width:150px}}

/* ---------- t287u: 5-tab dock (Support added) — tighter tiles so all 5 fit on small phones ---------- */
.bottom-nav.nav-4.nav-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 8px 5px calc(8px + env(safe-area-inset-bottom)); }
.bottom-nav.nav-4.nav-5 .nav-btn { min-height: 62px; font-size: 10px; letter-spacing: .3px; padding: 8px 2px; gap: 5px; border-radius: 13px; }
.bottom-nav.nav-4.nav-5 .nav-btn > span:first-child { font-size: 23px; }
@media (max-width: 360px) { .bottom-nav.nav-4.nav-5 .nav-btn { font-size: 9px; letter-spacing: 0; min-height: 58px; } .bottom-nav.nav-4.nav-5 .nav-btn > span:first-child { font-size: 21px; } }
@media (min-width: 520px) { .bottom-nav.nav-4.nav-5 .nav-btn { min-height: 70px; font-size: 12px; letter-spacing: .6px; } .bottom-nav.nav-4.nav-5 .nav-btn > span:first-child { font-size: 27px; } }

/* ---------- t287u: Ulot Support screen ---------- */
.sup-card { padding: 14px 12px 12px; display: flex; flex-direction: column; }
.sup-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sup-head-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; flex: none;
  background: linear-gradient(160deg, rgba(34,211,238,0.22), rgba(16,185,129,0.12)); box-shadow: inset 0 0 0 1px rgba(34,211,238,0.45), 0 0 18px -6px rgba(34,211,238,0.8); }
.sup-title { font-size: 16px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.sup-sub { font-size: 11px; color: var(--emerald-bright); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.sup-new { padding: 7px 10px !important; font-size: 11px !important; width: auto !important; flex: none; min-height: 36px; }
.sup-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.sup-chip { min-height: 46px; padding: 9px 10px; border-radius: 13px; text-align: left; font-size: 12px; font-weight: 800; color: #e2e8f0; cursor: pointer;
  background: var(--ps-panel, rgba(15,23,39,0.9)); border: 1px solid rgba(148,197,255,0.14); box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; line-height: 1.25; overflow-wrap: anywhere; }
.sup-chip:active { transform: scale(.97); border-color: rgba(34,211,238,0.6); box-shadow: 0 0 0 2px rgba(34,211,238,0.25); }
@media (min-width: 520px) { .sup-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sup-chat { min-height: 220px; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 10px 6px; border-radius: 14px;
  background: rgba(3,7,14,0.6); box-shadow: inset 0 2px 8px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 9px; }
.sup-msg { display: flex; gap: 7px; align-items: flex-end; max-width: 100%; }
.sup-me { justify-content: flex-end; }
.sup-av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #04121a;
  background: linear-gradient(160deg, #22d3ee, #34d399); }
.sup-bub { max-width: 86%; padding: 9px 11px; border-radius: 14px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.sup-them .sup-bub { background: rgba(30,44,72,0.85); border: 1px solid rgba(148,197,255,0.12); border-bottom-left-radius: 4px; color: #e2e8f0; }
.sup-me .sup-bub { background: linear-gradient(160deg, rgba(34,211,238,0.28), rgba(16,185,129,0.22)); border: 1px solid rgba(34,211,238,0.45); border-bottom-right-radius: 4px; color: #fff; }
.sup-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sup-act { flex: 1 1 140px; min-height: 40px; padding: 8px 10px; border-radius: 11px; font-size: 11.5px; font-weight: 800; cursor: pointer; color: #a5f3fc;
  background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.4); }
.sup-act-care { color: #fde68a; background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.5); }
.sup-ask { display: flex; gap: 7px; margin-top: 10px; }
.sup-ask input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 12px; border-radius: 13px; font-size: 16px; color: var(--text);
  background: rgba(3,7,14,0.85); border: 1px solid rgba(148,197,255,0.16); outline: none; }
.sup-ask input:focus { border-color: var(--ps-cyan, #22d3ee); box-shadow: 0 0 0 3px rgba(34,211,238,0.22); }
.sup-ask button { width: 52px !important; min-height: 46px; padding: 0 !important; font-size: 18px; flex: none; border-radius: 13px; }
.sup-care-cta { width: 100%; min-height: 54px; font-size: 14.5px; font-weight: 900; letter-spacing: .4px; margin: 12px 0 8px; border-radius: 15px; }
.sup-foot-note { font-size: 11px; color: var(--muted); line-height: 1.5; text-align: center; padding: 0 6px; }
.sup-auth-help { text-align: center; margin-top: 14px; }
.sup-auth-help a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 800;
  color: #a5f3fc; text-decoration: none; background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.35); }
.sup-modal { width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; padding: 16px; }
.sup-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.sup-modal-head h3 { margin: 0; font-size: 16px; font-weight: 900; }
.sup-modal textarea { width: 100%; min-height: 120px; resize: vertical; padding: 10px 12px; border-radius: 12px; font: inherit; font-size: 16px; color: var(--text);
  background: rgba(3,7,14,0.85); border: 1px solid rgba(148,197,255,0.12); box-shadow: inset 0 2px 6px rgba(0,0,0,0.55); outline: none; }
.sup-modal textarea:focus { border-color: var(--ps-cyan, #22d3ee); }
.sup-modal .field input { font-size: 16px; }
.sup-modal button[type=submit] { width: 100%; min-height: 50px; }
.sup-who { font-size: 11.5px; color: var(--emerald-bright); font-weight: 700; margin-bottom: 8px; }
.sup-err { margin: 6px 0 10px; padding: 9px 11px; border-radius: 10px; font-size: 12px; font-weight: 700; color: #fecaca; background: rgba(244,63,94,0.12); border: 1px solid rgba(244,63,94,0.45); }
@media (max-width: 480px) {
  #modal-support { align-items: flex-end; padding: 0; }
  .sup-modal { max-width: 100%; border-radius: 20px 20px 0 0; max-height: 94vh; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) { .bottom-nav.nav-4.nav-5 .nav-btn { font-size: 9.5px; letter-spacing: 0; padding: 8px 1px; } .bottom-nav.nav-4.nav-5 .nav-btn > span:last-child { text-overflow: clip; } }