/* ===========================================================
   PLATYPUS — $PLTY  design tokens
   bg #0B0E0C · surface #121810 · surface-2 #182019
   toxic (buy) #7CFF6B · venom (sell) #FF3D6E · bill #FFC94D
=========================================================== */

:root{
  --bg: #0b0e0c;
  --surface: #10140f;
  --surface-2: #171d16;
  --surface-3: #1e261c;
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);
  --text: #eaf2ec;
  --text-dim: #8fa396;
  --text-faint: #5a6b60;
  --toxic: #7cff6b;
  --toxic-dim: rgba(124,255,107,0.14);
  --venom: #ff3d6e;
  --venom-dim: rgba(255,61,110,0.14);
  --bill: #ffc94d;
  --bill-dim: rgba(255,201,77,0.14);
  --font-display: "Space Grotesk", "JetBrains Mono", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-xl: 30px;
  --shadow-lift: 0 12px 40px rgba(0,0,0,0.45);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
.hidden{ display:none !important; }
button{ font-family: inherit; cursor:pointer; }
input{ font-family: inherit; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; }

/* ---------- ambient bg ---------- */
.bg-noise{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-glow{
  position:fixed; inset:-20%; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 15% 10%, rgba(124,255,107,0.10), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(255,61,110,0.09), transparent 45%);
  filter:blur(10px);
}

/* ===========================================================
   AUTH GATE
=========================================================== */
.auth-gate{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  padding-top:calc(24px + var(--safe-top));
  padding-bottom:calc(24px + var(--safe-bottom));
  background:
    radial-gradient(circle at 50% 0%, rgba(124,255,107,0.08), transparent 55%),
    var(--bg);
  overflow-y:auto;
}
.auth-card{
  width:100%; max-width:420px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border-strong);
  border-radius:var(--radius-xl);
  padding:36px 30px 30px;
  box-shadow:var(--shadow-lift);
  text-align:center;
  animation: rise .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes rise{ from{ opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
.auth-logo{
  width:56px; height:56px; border-radius:16px;
  box-shadow:0 0 0 1px var(--border-strong), 0 0 30px rgba(124,255,107,0.25);
  margin-bottom:14px;
  animation: coinFloat 1.8s ease-in-out infinite;
}
.auth-title{
  font-family:var(--font-display); font-weight:700; font-size:32px;
  margin:0 0 8px; letter-spacing:0.5px;
  background:linear-gradient(90deg, var(--toxic), #d9ffb0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.auth-sub{
  color:var(--text-dim); font-size:13px; line-height:1.6;
  margin:0 0 26px;
}
.auth-loading{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--text-dim); font-size:13px; padding:20px 0;
}
.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--border-strong); border-top-color:var(--toxic);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

.onboard-form{ text-align:left; display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); }
.field-optional{ color:var(--text-faint); text-transform:none; letter-spacing:0; }
.field input{
  background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
  border-radius:var(--radius-s); padding:12px 14px; font-size:14px; outline:none;
  transition:border-color .15s;
}
.field input:focus{ border-color:var(--toxic); }

.onboard-preview{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-m); padding:10px 12px;
}
.onboard-preview img{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--surface-3); }
.onboard-preview-text{ display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.onboard-preview-name{ font-size:13px; font-weight:600; }
.onboard-preview-balance{ font-size:11px; color:var(--text-dim); }

.auth-error{ color:var(--venom); font-size:12px; min-height:14px; margin:2px 0 0; }

.auth-tabs{ display:flex; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px; margin-bottom:20px; }
.auth-tab{ flex:1; background:transparent; border:none; color:var(--text-dim); border-radius:999px; padding:9px 6px; font-size:12.5px; font-weight:600; }
.auth-tab.active{ background:var(--surface-3); color:var(--text); }

/* ===========================================================
   BUTTONS
=========================================================== */
.btn{
  border:none; border-radius:999px; padding:13px 20px; font-size:14px; font-weight:600;
  transition:transform .12s ease, filter .12s ease, opacity .12s ease;
}
.btn:active{ transform:scale(0.97); }
.btn-block{ width:100%; }
.btn-primary{ background:var(--toxic); color:#08130a; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-buy{ background:linear-gradient(180deg, var(--toxic), #55d942); color:#07160a; flex:1.3; }
.btn-sell{ background:var(--surface-3); color:var(--venom); border:1px solid rgba(255,61,110,0.35); flex:1; }
.btn-ghost{ background:transparent; border:1px solid var(--border-strong); color:var(--text-dim); }
.btn-ghost:hover{ color:var(--text); border-color:var(--text-dim); }

/* ===========================================================
   APP SHELL
=========================================================== */
.app{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 22px;
  padding-top:calc(14px + var(--safe-top));
  border-bottom:1px solid var(--border);
  background:rgba(11,14,12,0.85); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:10;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{
  width:32px; height:32px; border-radius:9px;
  box-shadow:0 0 16px rgba(124,255,107,0.3);
  animation: coinFloat 1.8s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes coinFloat {
  0%   { transform: translateY(0px) rotate(-4deg) scale(1);
         box-shadow: 0 0 16px rgba(124,255,107,0.3), 0 8px 20px rgba(0,0,0,0.4); }
  25%  { transform: translateY(-10px) rotate(2deg) scale(1.08);
         box-shadow: 0 0 28px rgba(124,255,107,0.6), 0 18px 30px rgba(0,0,0,0.25); }
  50%  { transform: translateY(-18px) rotate(-1deg) scale(1.12);
         box-shadow: 0 0 36px rgba(124,255,107,0.8), 0 24px 40px rgba(0,0,0,0.15); }
  75%  { transform: translateY(-10px) rotate(3deg) scale(1.06);
         box-shadow: 0 0 28px rgba(124,255,107,0.5), 0 18px 28px rgba(0,0,0,0.2); }
  100% { transform: translateY(0px) rotate(-4deg) scale(1);
         box-shadow: 0 0 16px rgba(124,255,107,0.3), 0 8px 20px rgba(0,0,0,0.4); }
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:15px; }
.brand-ticker{ font-size:11px; color:var(--toxic); letter-spacing:0.05em; }

.topbar-stats{ display:flex; gap:20px; }
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat-label{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.08em; }
.stat-value{ font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }

.profile-chip{
  display:flex; align-items:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:999px; padding:5px 12px 5px 5px; color:var(--text);
  flex-shrink:0;
}
.profile-chip img{ width:26px; height:26px; border-radius:50%; object-fit:cover; background:var(--surface-3); }
.profile-chip span{ font-size:12px; font-weight:600; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- grid ---------- */
.main-grid{
  flex:1; display:grid; grid-template-columns:1fr 320px; gap:18px;
  padding:20px 22px 100px; max-width:1400px; width:100%; margin:0 auto;
}

/* ---------- chart column ---------- */
.chart-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }

.chart-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.price-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.price-main{ font-family:var(--font-display); font-size:clamp(24px,4vw,42px); font-weight:700; font-variant-numeric:tabular-nums; }
.price-delta{ font-size:14px; font-weight:600; padding:3px 9px; border-radius:999px; }
.price-delta.up{ color:var(--toxic); background:var(--toxic-dim); }
.price-delta.down{ color:var(--venom); background:var(--venom-dim); }
.price-sub{ display:block; margin-top:4px; font-size:11px; color:var(--text-dim); }

.venom-vial{
  position:relative; width:34px; height:66px;
  border:1.5px solid var(--border-strong); border-radius:16px;
  background:var(--surface-2); overflow:hidden; flex-shrink:0;
}
.venom-vial-fill{
  position:absolute; left:0; right:0; bottom:0; height:20%;
  background:linear-gradient(180deg, var(--bill), var(--venom));
  transition:height .6s cubic-bezier(.2,.8,.2,1), background .6s;
  animation:vialpulse 2.4s ease-in-out infinite;
}
@keyframes vialpulse{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.25);} }
.venom-vial-cap{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:14px; height:6px; background:var(--border-strong); border-radius:0 0 4px 4px; }
.venom-label{ position:absolute; bottom:3px; left:0; right:0; text-align:center; font-size:8px; letter-spacing:0.1em; color:rgba(0,0,0,0.55); font-weight:700; }

.timeframes{ display:flex; gap:6px; flex-wrap:wrap; }
.chart-controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.chart-type-toggle{ display:flex; gap:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px; flex-shrink:0; }
.ct-btn{
  display:flex; align-items:center; gap:6px;
  background:transparent; border:none; color:var(--text-dim);
  border-radius:999px; padding:6px 12px; font-size:11.5px; font-weight:600;
  transition:all .15s;
}
.ct-btn:hover{ color:var(--text); }
.ct-btn.active{ background:var(--surface-3); color:var(--toxic); }
.ct-btn svg{ flex-shrink:0; }
.tf-btn{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
  border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600;
  transition:all .15s;
}
.tf-btn:hover{ color:var(--text); }
.tf-btn.active{ background:var(--toxic-dim); border-color:var(--toxic); color:var(--toxic); }

.chart-wrap{
  position:relative; flex:1; min-height:320px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l);
  overflow:hidden;
}
#chartCanvas{ width:100%; height:100%; display:block; cursor:crosshair; touch-action:none; user-select:none; -webkit-user-select:none; }
.chart-tooltip{
  position:absolute; pointer-events:none; z-index:5;
  background:rgba(16,20,15,0.95); border:1px solid var(--border-strong);
  border-radius:var(--radius-s); padding:8px 10px; font-size:11px; line-height:1.5;
  box-shadow:var(--shadow-lift); white-space:nowrap;
}
.chart-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); font-size:13px;
}

.trade-actions{ display:flex; gap:10px; }

/* ---------- side column ---------- */
.side-col{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.panel-tabs{ display:flex; gap:6px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:4px; }
.panel-tab{
  flex:1; background:transparent; border:none; color:var(--text-dim);
  border-radius:999px; padding:8px 6px; font-size:11.5px; font-weight:600;
}
.panel-tab.active{ background:var(--surface-3); color:var(--text); }

.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l);
  flex:1; min-height:420px; max-height:640px; overflow-y:auto; padding:10px;
}
.panel::-webkit-scrollbar{ width:6px; }
.panel::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:3px; }

/* feed */
.feed-item{
  display:flex; align-items:flex-start; gap:10px; padding:9px 8px; border-radius:var(--radius-m);
  animation:feedIn .35s ease; cursor:pointer;
}
.feed-item:hover{ background:var(--surface-2); }
@keyframes feedIn{ from{ opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
.feed-item img{ width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--surface-3); flex-shrink:0; }
.feed-main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.feed-line1{ font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed-line1 .verb-buy{ color:var(--toxic); }
.feed-line1 .verb-sell{ color:var(--venom); }
.feed-line2{ font-size:10.5px; color:var(--text-faint); }
.feed-calling{ font-size:11.5px; color:var(--text-dim); font-style:italic; margin-top:2px; }
.feed-badge{ font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; flex-shrink:0; margin-top:2px; }
.feed-badge.buy{ color:var(--toxic); background:var(--toxic-dim); }
.feed-badge.sell{ color:var(--venom); background:var(--venom-dim); }
.feed-empty, .trader-empty{ color:var(--text-faint); font-size:12px; text-align:center; padding:30px 10px; }

/* leaderboard */
.lb-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 4px 10px; gap:8px; flex-wrap:wrap;
}
.lb-sort-tabs{ display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px; }
.lb-sort{
  background:transparent; border:none; color:var(--text-dim);
  border-radius:999px; padding:5px 11px; font-size:11px; font-weight:600;
  transition:all .15s; white-space:nowrap;
}
.lb-sort.active{ background:var(--surface-3); color:var(--text); }
.lb-reset-note{ font-size:10px; color:var(--text-faint); white-space:nowrap; }
.lb-list{}
.lb-item{
  display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:var(--radius-m);
  cursor:pointer; transition:background .12s;
}
.lb-item:hover{ background:var(--surface-2); }
.lb-rank{
  font-size:12px; font-weight:700; color:var(--text-faint); width:22px; text-align:center; flex-shrink:0;
}
.lb-rank.gold{ color:var(--bill); }
.lb-rank.silver{ color:#b8c4c0; }
.lb-rank.bronze{ color:#c8906a; }
.lb-item img{ width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--surface-3); flex-shrink:0; }
.lb-main{ flex:1; min-width:0; }
.lb-name{ font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-sub{ font-size:10.5px; color:var(--text-faint); }
.lb-value{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.lb-value.up{ color:var(--toxic); }
.lb-value.down{ color:var(--venom); }
.lb-title-label{ font-size:11px; color:var(--text-faint); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.lb-item-rich{ align-items:flex-start; }
.lb-item-rich img{ margin-top:2px; }
.lb-detail-rows{ display:flex; flex-direction:column; gap:2px; margin-top:3px; }
.lb-detail-row{ display:flex; justify-content:space-between; gap:8px; }
.lb-detail-label{ font-size:10.5px; color:var(--text-faint); }
.lb-detail-val{ font-size:10.5px; font-variant-numeric:tabular-nums; color:var(--text-dim); }
.lb-overall .lb-detail-label{ color:var(--text); font-weight:700; font-size:11px; }
.lb-overall .lb-detail-val{ color:var(--toxic); font-weight:700; font-size:11px; }

/* edit profile */
.edit-profile-preview{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.edit-profile-preview img{ width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--surface-3); }
.edit-profile-preview span{ font-size:14px; font-weight:700; }
.edit-profile-label{ font-size:11px; color:var(--text-faint); margin-bottom:3px; display:block; }
.edit-profile-editor{ display:flex; flex-direction:column; margin-top:10px; }
.edit-profile-status{ font-size:11.5px; margin-top:8px; min-height:16px; }

/* wallet */
.wallet-card{
  display:flex; flex-direction:column; gap:4px; padding:16px;
  background:linear-gradient(160deg, var(--surface-3), var(--surface-2));
  border:1px solid var(--border-strong); border-radius:var(--radius-m); margin-bottom:10px;
}
.wallet-label{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.06em; }
.wallet-value{ font-family:var(--font-display); font-size:26px; font-weight:700; }
.wallet-pnl{ font-size:12px; font-weight:600; }
.wallet-pnl.up{ color:var(--toxic); }
.wallet-pnl.down{ color:var(--venom); }
.wallet-rows{ display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.wallet-row{ display:flex; justify-content:space-between; font-size:12.5px; padding:9px 4px; border-bottom:1px solid var(--border); color:var(--text-dim); }
.wallet-row span:last-child{ color:var(--text); font-weight:600; }
.wallet-pnl-row span:last-child{ font-weight:700; }
.wallet-pnl-row .up{ color:var(--toxic); }
.wallet-pnl-row .down{ color:var(--venom); }

/* quick trade buttons (sheet) */
.quick-btns{
  display:flex; gap:6px; margin:0 0 10px;
  min-height:0; /* collapses when empty */
}
.quick-btn{
  flex:1; padding:9px 4px; border-radius:999px; border:1px solid var(--border);
  font-size:12px; font-weight:700; cursor:pointer; transition:all .15s;
  background:var(--surface-3); color:var(--text);
}
.quick-btn.qb{ border-color:rgba(124,255,107,.35); color:var(--toxic); }
.quick-btn.qb:hover{ background:var(--toxic-dim); border-color:var(--toxic); }
.quick-btn.qs{ border-color:rgba(255,61,110,.35); color:var(--venom); }
.quick-btn.qs:hover{ background:var(--venom-dim); border-color:var(--venom); }
.quick-btn.flash-confirm{ animation:quickBtnFlash .5s ease; }
@keyframes quickBtnFlash{
  0%{ background:var(--venom); color:#fff; border-color:var(--venom); transform:scale(1.06); }
  100%{ background:var(--surface-3); transform:scale(1); }
}

/* quick trade config (wallet panel) */
.triggers-title-row{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
}
.triggers-title-row .triggers-title{ margin-bottom:0; }
.trigger-edit-btn{
  font-size:11px; font-weight:600; color:var(--text-dim); background:none;
  border:1px solid var(--border); border-radius:6px; padding:3px 10px; cursor:pointer;
}
.trigger-edit-btn:hover{ color:var(--text); border-color:var(--text-dim); }
.quick-preview{
  display:flex; flex-wrap:wrap; gap:5px; min-height:0;
}
.quick-preview-chip{
  font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid var(--border);
  color:var(--text-dim);
}
.quick-preview-chip.buy{ border-color:rgba(124,255,107,.4); color:var(--toxic); }
.quick-preview-chip.sell{ border-color:rgba(255,61,110,.4); color:var(--venom); }
.quick-editor{ margin-top:10px; }
.quick-editor-cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quick-editor-col{ display:flex; flex-direction:column; gap:6px; }
.quick-editor-head{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin-bottom:2px; }
.quick-cfg-input{ width:100%; box-sizing:border-box; }
.quick-editor-actions{ display:flex; gap:8px; margin-top:10px; }
.quick-editor-actions .btn{ margin-top:0; }

.opacity-row{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.opacity-label{ font-size:11px; font-weight:600; width:34px; flex:none; }
.opacity-label.buy{ color:var(--toxic); }
.opacity-label.sell{ color:var(--venom); }
.opacity-value{ font-size:11px; color:var(--text-dim); width:36px; flex:none; text-align:right; font-variant-numeric:tabular-nums; }
.opacity-slider{
  flex:1; appearance:none; -webkit-appearance:none; height:4px; border-radius:2px;
  background:var(--surface-3); outline:none; cursor:pointer;
}
.opacity-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--text); cursor:pointer; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border-strong);
}
.opacity-slider::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--text); cursor:pointer;
  border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border-strong);
}
.opacity-slider.buy::-webkit-slider-thumb{ background:var(--toxic); }
.opacity-slider.sell::-webkit-slider-thumb{ background:var(--venom); }
.opacity-slider.buy::-moz-range-thumb{ background:var(--toxic); }
.opacity-slider.sell::-moz-range-thumb{ background:var(--venom); }

/* sparkline */
.sparkline-wrap{
  margin-bottom:14px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:10px 12px;
}
.sparkline-label{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; }
#sparkCanvas{ width:100%; display:block; }

/* triggers */
.triggers-section{
  margin-bottom:14px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:12px;
}
.triggers-title, .referral-title, .alerts-title{
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); margin-bottom:10px;
}
.trigger-row{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.trigger-label{ font-size:11px; color:var(--text-faint); white-space:nowrap; flex-shrink:0; min-width:80px; }
.trigger-input-wrap{
  display:flex; align-items:center; gap:4px;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-s); padding:6px 8px; flex:1;
}
.trigger-input-wrap.flex1{ flex:1; }
.trigger-prefix{ font-size:11px; color:var(--text-dim); white-space:nowrap; }
.trigger-input{
  background:transparent; border:none; color:var(--text); font-size:12px; outline:none;
  width:100%; min-width:0; font-family:var(--font-mono);
}
.trigger-btn{
  background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text);
  border-radius:var(--radius-s); padding:6px 12px; font-size:11px; font-weight:600;
  flex-shrink:0; white-space:nowrap;
}
.trigger-btn:hover{ border-color:var(--toxic); color:var(--toxic); }
.trigger-btn.active{ border-color:var(--toxic); color:var(--toxic); background:var(--toxic-dim); }
.trigger-status{ font-size:11px; color:var(--text-dim); margin-top:4px; min-height:14px; }

/* referral */
.referral-section{
  margin-bottom:14px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:12px;
}
.referral-sub{ font-size:11.5px; color:var(--text-dim); margin:0 0 10px; line-height:1.5; }

/* alerts */
.alerts-section{
  margin-bottom:14px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:12px;
}
.alert-row{ margin-bottom:8px; }
.alert-dir{ font-size:11px; color:var(--text-dim); }
.alert-inputs{ display:flex; gap:8px; margin-bottom:10px; }
.alert-status{ font-size:11px; color:var(--text-dim); margin-top:6px; min-height:14px; }

/* ===========================================================
   TRADE SHEET (apple-pay style)
=========================================================== */
.sheet-backdrop{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.sheet{
  width:100%; max-width:440px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border-strong); border-bottom:none;
  border-radius:28px 28px 0 0;
  padding:12px 22px calc(26px + var(--safe-bottom));
  box-shadow:0 -20px 60px rgba(0,0,0,0.5);
  animation:slideUp .32s cubic-bezier(.2,.9,.25,1);
}
@keyframes slideUp{ from{ transform:translateY(100%);} to{transform:translateY(0);} }
.sheet-handle{ width:36px; height:4px; background:var(--border-strong); border-radius:3px; margin:0 auto 14px; }
.sheet-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.sheet-title{ font-family:var(--font-display); font-size:16px; font-weight:700; }
.sheet-close{ background:var(--surface-3); border:none; color:var(--text-dim); width:28px; height:28px; border-radius:50%; font-size:16px; line-height:1; }

.sheet-amount{ display:flex; align-items:center; justify-content:center; gap:2px; margin:14px 0 2px; }
.sheet-currency{ font-family:var(--font-display); font-size:30px; color:var(--text-dim); }
.sheet-amount-value{ font-family:var(--font-display); font-size:52px; font-weight:700; font-variant-numeric:tabular-nums; }
.sheet-convert{ display:block; text-align:center; font-size:12px; color:var(--text-dim); margin-bottom:10px; }

/* calling it */
.calling-it-wrap{ margin-bottom:12px; }
.calling-it-input{
  width:100%; background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
  border-radius:var(--radius-s); padding:10px 12px; font-size:13px; outline:none;
  transition:border-color .15s;
}
.calling-it-input:focus{ border-color:var(--bill); }
.calling-it-input::placeholder{ color:var(--text-faint); }

.sheet-presets{ display:flex; gap:8px; margin-bottom:14px; }
.chip{ flex:1; background:var(--surface-3); border:1px solid var(--border); color:var(--text); border-radius:999px; padding:9px 0; font-size:12px; font-weight:600; }
.chip:hover{ border-color:var(--toxic); }

.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.keypad button{
  background:var(--surface-3); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius-m); padding:14px 0; font-size:18px; font-weight:600;
}
.keypad button:active{ background:var(--surface); }

.slide-confirm{ user-select:none; -webkit-user-select:none; touch-action:none; }
.slide-track{
  position:relative; height:54px; border-radius:999px; background:var(--surface-3);
  border:1px solid var(--border-strong); display:flex; align-items:center; overflow:hidden;
}
.slide-label{ position:absolute; left:0; right:0; text-align:center; font-size:13px; font-weight:600; color:var(--text-dim); letter-spacing:0.02em; }
.slide-thumb{
  position:absolute; left:4px; top:4px; width:46px; height:46px; border-radius:50%;
  background:var(--toxic); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(124,255,107,0.35); touch-action:none; cursor:grab;
}
.slide-thumb img{ width:22px; height:22px; border-radius:50%; pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; draggable:false; }
.slide-track.selling .slide-thumb{ background:var(--venom); box-shadow:0 4px 14px rgba(255,61,110,0.35); }
.slide-track.confirmed .slide-thumb{ background:var(--bill); }
.sheet-error{ color:var(--venom); font-size:12px; text-align:center; min-height:16px; margin:10px 0 0; }

/* ===========================================================
   TRADER PROFILE MODAL
=========================================================== */
.modal-backdrop{
  position:fixed; inset:0; z-index:70; background:rgba(0,0,0,0.6); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .2s ease;
}
.modal-card{
  position:relative; width:100%; max-width:380px; max-height:85vh; overflow-y:auto;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border-strong); border-radius:var(--radius-xl);
  padding:28px 24px 24px;
  box-shadow:var(--shadow-lift);
  animation:rise .3s cubic-bezier(.2,.8,.2,1);
}
.modal-card::-webkit-scrollbar{ width:4px; }
.modal-card::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:2px; }
.modal-close{
  position:absolute; top:14px; right:14px;
  background:var(--surface-3); border:none; color:var(--text-dim);
  width:28px; height:28px; border-radius:50%; font-size:16px; line-height:1;
}
.modal-avatar-wrap{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.modal-avatar-wrap img{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:2px solid var(--border-strong); background:var(--surface-3);
}
.modal-user-info{ display:flex; flex-direction:column; gap:4px; }
.modal-username{ font-family:var(--font-display); font-size:18px; font-weight:700; }
.modal-since{ font-size:11px; color:var(--text-faint); }
.modal-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px;
}
.modal-stat{
  background:var(--surface-3); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:10px 12px; display:flex; flex-direction:column; gap:2px;
}
.modal-stat-label{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; }
.modal-stat-val{ font-size:15px; font-weight:700; }
.modal-stat-val.up{ color:var(--toxic); }
.modal-stat-val.down{ color:var(--venom); }
.modal-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.badge{
  display:flex; align-items:center; gap:5px;
  background:var(--surface-3); border:1px solid var(--border);
  border-radius:999px; padding:4px 10px; font-size:11px; font-weight:600; color:var(--text-dim);
}
.badge .badge-icon{ font-size:13px; }
.modal-trades-title{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }
.modal-trades-list{}
.modal-trade-item{
  display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--border); font-size:12px;
}
.modal-trade-item:last-child{ border-bottom:none; }
.modal-trade-badge{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; flex-shrink:0; }
.modal-trade-badge.buy{ color:var(--toxic); background:var(--toxic-dim); }
.modal-trade-badge.sell{ color:var(--venom); background:var(--venom-dim); }
.modal-trade-amount{ font-weight:600; flex:1; }
.modal-trade-time{ color:var(--text-faint); font-size:10.5px; flex-shrink:0; }

/* ===========================================================
   TOASTS
=========================================================== */
.toast-stack{ position:fixed; top:calc(18px + var(--safe-top)); right:18px; z-index:80; display:flex; flex-direction:column; gap:8px; }
.toast{
  background:var(--surface-2); border:1px solid var(--border-strong); border-left:3px solid var(--toxic);
  border-radius:var(--radius-s); padding:11px 16px; font-size:12.5px; box-shadow:var(--shadow-lift);
  animation:toastIn .25s ease; max-width:280px;
}
.toast.error{ border-left-color:var(--venom); }
@keyframes toastIn{ from{ opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);} }

/* ===========================================================
   RESPONSIVE — MOBILE FIRST
=========================================================== */
@media (max-width: 980px){
  .main-grid{ grid-template-columns:1fr; gap:14px; }
  .side-col{ order:2; }
  .panel{ min-height:320px; max-height:420px; }
}

/* Mobile: bottom nav style trade buttons + compact chart */
@media (max-width: 600px){
  .hide-sm{ display:none; }
  .topbar{ padding:10px 12px; padding-top:calc(10px + var(--safe-top)); gap:10px; }
  .topbar-stats{ gap:12px; }
  .brand-name{ font-size:13px; }
  .main-grid{ padding:12px 12px calc(80px + var(--safe-bottom)); gap:10px; }
  .chart-wrap{ min-height:240px; }
  .chart-col{ gap:10px; }
  .chart-head{ gap:10px; }
  .price-main{ font-size:clamp(20px,6vw,30px); }
  .venom-vial{ width:28px; height:54px; }

  /* sticky buy/sell bar at bottom on mobile */
  .trade-actions{
    position:fixed; bottom:0; left:0; right:0; z-index:9;
    padding:10px 16px calc(10px + var(--safe-bottom));
    background:rgba(11,14,12,0.92); backdrop-filter:blur(12px);
    border-top:1px solid var(--border);
    gap:10px;
  }
  .btn-buy, .btn-sell{ padding:14px 20px; font-size:15px; }

  .profile-chip span{ display:none; }
  .profile-chip{ padding:5px 5px; border-radius:50%; }

  .panel{ min-height:260px; max-height:360px; }

  /* Trade sheet full-width on mobile */
  .sheet{ border-radius:20px 20px 0 0; padding:12px 16px calc(20px + var(--safe-bottom)); }
  .sheet-amount-value{ font-size:44px; }

  /* Modal full-screen on mobile */
  .modal-backdrop{ padding:0; align-items:flex-end; }
  .modal-card{ max-width:100%; max-height:90vh; border-radius:20px 20px 0 0; }

  .lb-header{ flex-direction:column; align-items:flex-start; }

  .alert-inputs{ flex-direction:column; }
}

/* Extra-small phones */
@media (max-width: 380px){
  .tf-btn{ padding:5px 10px; font-size:11px; }
  .ct-btn{ padding:5px 8px; font-size:10.5px; }
  .topbar-stats{ gap:8px; }
  .stat-value{ font-size:11.5px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* focus visibility */
button:focus-visible, input:focus-visible{ outline:2px solid var(--toxic); outline-offset:2px; }

/* ============ ADMIN PORTAL ============ */
.admin-portal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: rgba(11, 14, 12, 0.97);
  border: 1px solid rgba(124, 255, 107, 0.4);
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(124, 255, 107, 0.15), 0 8px 32px rgba(0,0,0,0.8);
  width: min(380px, 94vw);
  backdrop-filter: blur(20px);
}
.admin-portal.hidden { display: none; }
.admin-portal-inner { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(124, 255, 107, 0.15);
  padding-bottom: 12px;
}
.admin-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--toxic, #7cff6b);
  letter-spacing: 0.04em;
}
.admin-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color 0.15s;
}
.admin-close:hover { color: #fff; }
.admin-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.admin-select, .admin-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}
.admin-select:focus, .admin-input:focus { border-color: rgba(124,255,107,0.4); }
.admin-select option { background: #0b0e0c; color: #fff; }
.admin-amount-row { display: flex; gap: 8px; align-items: stretch; }
.admin-amount-row .admin-input { flex: 1; }
.admin-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}
.admin-btn:active { transform: scale(0.97); }
.admin-btn-give {
  background: var(--toxic, #7cff6b);
  color: #0b0e0c;
}
.admin-btn-give:hover { opacity: 0.85; }
.admin-btn-reset {
  background: rgba(255,61,110,0.15);
  border: 1px solid rgba(255,61,110,0.4);
  color: #ff3d6e;
  width: 100%;
}
.admin-btn-reset:hover { background: rgba(255,61,110,0.25); }
.admin-btn-boost {
  background: linear-gradient(135deg, rgba(255,180,0,0.2), rgba(124,255,107,0.2));
  border: 1px solid rgba(255,180,0,0.5);
  color: #ffb400;
  width: 100%;
}
.admin-btn-boost:hover { background: linear-gradient(135deg, rgba(255,180,0,0.35), rgba(124,255,107,0.3)); }
.admin-btn-boost.active {
  background: linear-gradient(135deg, rgba(255,180,0,0.5), rgba(124,255,107,0.4));
  animation: boostPulse 0.8s ease-in-out infinite alternate;
}
@keyframes boostPulse {
  from { box-shadow: 0 0 6px rgba(255,180,0,0.4); }
  to { box-shadow: 0 0 18px rgba(255,180,0,0.8); }
}
.admin-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  margin: 0;
  line-height: 1.4;
}
.admin-boost-row { display: flex; gap: 8px; }
.admin-boost-row .admin-btn { flex: 1; }
.admin-btn-dump {
  background: linear-gradient(135deg, rgba(255,61,110,0.2), rgba(180,0,60,0.2));
  border: 1px solid rgba(255,61,110,0.5);
  color: #ff3d6e;
}
.admin-btn-dump:hover { background: linear-gradient(135deg, rgba(255,61,110,0.35), rgba(180,0,60,0.3)); }
.admin-btn-dump.active {
  background: linear-gradient(135deg, rgba(255,61,110,0.5), rgba(180,0,60,0.4));
  animation: dumpPulse 0.8s ease-in-out infinite alternate;
}
@keyframes dumpPulse {
  from { box-shadow: 0 0 6px rgba(255,61,110,0.4); }
  to { box-shadow: 0 0 18px rgba(255,61,110,0.9); }
}