/* ===============================
   Nexus Analyt – App.css
   Green + Silver trading UI
   =============================== */

/* ===============================
   Nexus Analyt – App.css
   =============================== */

:root{
  --bg-main:#071816;
  --bg-card:#0b2622;
  --bg-card-2:#0e2f2a;
  --border-soft:rgba(210,220,230,.12);
  --txt-main:rgba(232,242,240,.92);
  --txt-muted:rgba(232,242,240,.62);
  --green:#2ecc71;
  --yellow:#f1c40f;
  --red:#e74c3c;
  --silver:rgba(210,220,230,.65);
}

*{ box-sizing:border-box; }

/* 🔥 BACKGROUND FIX (NEU) */
body{
  margin:0;
  color:var(--txt-main);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background:
    linear-gradient(rgba(5,22,20,0.6), rgba(5,22,20,0.8)),
    url("/assets/Neostadt-YP_OBoAS.png");

  background-size: cover;
  background-position: right center;
  background-attachment: fixed;
}

/* 🔥 Blur Layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  backdrop-filter: blur(3px);
  background: rgba(0,0,0,0.15);
  z-index: -1;
}

/* ===============================
   Rest bleibt unverändert
   =============================== */
.app{ min-height:100vh; }

/* ... (DEIN GANZER RESTLICHER CSS BLEIBT GENAU SO WIE ER IST) ... */
/* ===============================
   Topbar
   =============================== */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:18px 22px;
}
.brand{ display:flex; gap:14px; align-items:center; }
.brandTitle{ font-size:22px; font-weight:900; }
.brandSub{ font-size:13px; color:var(--txt-muted); }

.logoBox{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(180deg,#0f3b33,#0a2b26);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-soft);
}
.logoSvg{ width:30px;height:30px; }
.logoHex{ fill:#1f7a63; }
.logoInner{ fill:#0b2622; }
.logoDot{ fill:#2ecc71; }

.walletBox{ display:flex;flex-direction:column;gap:8px; }
.walletRow{ display:flex;gap:8px;align-items:center; }

/* ===============================
   Buttons / Pills
   =============================== */
.btn,.btnGhost,.btnDanger{
  padding:8px 14px;border-radius:14px;
  font-weight:700;cursor:pointer;
}
.btn{
  background:linear-gradient(180deg,#2ecc71,#25a25a);
  border:none;color:#071816;
}
.btnGhost{
  background:transparent;border:1px solid var(--border-soft);
  color:var(--txt-main);
}
.btnDanger{
  background:linear-gradient(180deg,#e74c3c,#c0392b);
  border:none;color:#fff;
}
.btn:disabled,.btnGhost:disabled{ opacity:.45; cursor:not-allowed; }

.pill{
  padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.18);
  border:1px solid var(--border-soft);
  font-size:13px;font-weight:700;
}
.pill.silver{ color:var(--silver); }
.pill.good{ color:var(--green); }
.pill.bad{ color:var(--red); }

/* ===============================
   Cards / Layout
   =============================== */
.main{ padding:0 18px 40px; max-width:1400px; margin:0 auto; }
.card{
  background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));
  border:1px solid var(--border-soft);
  border-radius:22px;
  padding:16px 18px 18px;
  margin-bottom:22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.38), inset 0 0 0 1px rgba(46,204,113,.06);
}
.cardHead{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;
}
.cardTitle{ font-size:18px;font-weight:900; }
.cardActions{ display:flex;gap:8px;align-items:center; }

/* ===============================
   Info button + modal
   =============================== */
.infoBtn{
  width:28px;height:28px;border-radius:999px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,.25);
  color:var(--txt-main);
  font-weight:900;cursor:pointer;
}
.modalBackdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;
  z-index:999;
}
.modal{
  width:min(520px,92%);
  border-radius:20px;
  border:1px solid var(--border-soft);
  padding:16px 18px 18px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.modalHead{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;
}
.helpLangTitle{
  font-size:13px;font-weight:900;
  color:var(--silver);margin-bottom:4px;
}
.helpText{ font-size:14px;line-height:1.45; }
.iconBtn{
  background:none;border:none;color:var(--txt-main);
  font-size:22px;cursor:pointer;
}

/* ===============================
   Compare section
   =============================== */
.compareGrid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:18px;
}
.compareLive{
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:12px;
}
.liveListBox{ margin-top:10px;max-height:320px;overflow-y:auto; }
.liveRow{
  display:flex;justify-content:space-between;
  padding:8px 10px;border-radius:14px;
  border:1px solid var(--border-soft);
  margin-bottom:8px;
}
.liveLeft{ display:flex;gap:10px;align-items:center; }
.liveRight{ text-align:right; }
.livePx{ font-weight:900; }

.compareChart{ width:100%; }

/* ===============================
   Chart
   =============================== */
.chartSvg{ width:100%; height:100%; }
.chartAxis{ stroke:rgba(210,220,230,.25); stroke-width:2; }
.chartGrid{ stroke:rgba(210,220,230,.12); stroke-width:2; }
.chartLabel{ fill:rgba(232,242,240,.8); font-size:16px; font-weight:800; }

.chartLine{ fill:none; }
.line1{ stroke:#2ecc71; }
.line2{ stroke:#d0d6db; }
.line3{ stroke:#f1c40f; }
.line4{ stroke:#9b59b6; }
.line5{ stroke:#3498db; }
.line6{ stroke:#e74c3c; }
.line7{ stroke:#1abc9c; }
.line8{ stroke:#e67e22; }
.line9{ stroke:#00bcd4; }
.line10{ stroke:#ff6bcb; }

.chartLegend{
  display:flex;gap:8px;flex-wrap:wrap;
}
.legendItem{
  display:flex;gap:8px;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,.2);
  cursor:pointer;
}
.legendDot{
  width:10px;height:10px;border-radius:999px;
}
.legendDot.line1{ background:#2ecc71; }
.legendDot.line2{ background:#d0d6db; }
.legendDot.line3{ background:#f1c40f; }
.legendDot.line4{ background:#9b59b6; }
.legendDot.line5{ background:#3498db; }
.legendDot.line6{ background:#e74c3c; }
.legendDot.line7{ background:#1abc9c; }
.legendDot.line8{ background:#e67e22; }
.legendDot.line9{ background:#00bcd4; }
.legendDot.line10{ background:#ff6bcb; }

/* ===============================
   Health / Pairs
   =============================== */
.healthChips{
  display:flex;gap:10px;flex-wrap:wrap;
}
.coinChip{
  display:flex;gap:10px;align-items:center;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--border-soft);
}
.coinLogo{
  width:28px;height:28px;border-radius:999px;
  background:#0f3b33;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
}
.coinLogo.small{ width:22px;height:22px;font-size:12px; }

.pairsScroll{ max-height:180px;overflow-y:auto; }

/* ===============================
   Grid
   =============================== */
.gridWrap{
  display:grid;grid-template-columns:360px 1fr;
  gap:18px;
}
.formRow{
  display:flex;flex-direction:column;
  margin-bottom:10px;
}
.formRow input,.formRow select{
  padding:8px 10px;border-radius:12px;
  border:1px solid var(--border-soft);
  background:#071816;color:var(--txt-main);
}
.ordersList{ margin-top:10px; }
.orderRow{
  display:flex;gap:10px;align-items:center;
  padding:8px;border-bottom:1px solid var(--border-soft);
}

/* ===============================
   Watchlist
   =============================== */
.watchTable{ margin-top:10px; display:block; }
.watchHead,.watchRow{
  display:grid;
  grid-template-columns:60px 1fr 120px 80px 160px 120px 40px;
  gap:8px;
  align-items:center;
  min-width: 760px;   /* 👈 DAS ist die Ergänzung */
}
.watchHead{
  font-weight:800;color:var(--silver);
  margin-bottom:8px;
}
.watchScroll{
  display:block;
  height: 320px;          /* force scrollbar area */
  overflow-y: scroll;     /* always show scrollbar */
  overflow-x: auto;
  padding-right: 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.watchRow{
  padding:8px;border-radius:14px;
  border:1px solid var(--border-soft);
  margin-bottom:6px;
}
.watchCoin{ display:flex;gap:10px;align-items:center; }

/* ===============================
   AI
   =============================== */
.aiWrap{ display:grid;grid-template-columns:380px 1fr;gap:18px; }
.aiChips{ display:flex;gap:8px;flex-wrap:wrap; }
.aiPanel{
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:12px;
  min-height:220px;
  background:rgba(0,0,0,.25);
}
.aiText{ white-space:pre-wrap;font-size:14px; }

/* ===============================
   Misc
   =============================== */
.muted{ color:var(--txt-muted); }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.txtGood{ color:var(--green); }
.txtBad{ color:var(--red); }
.divider{ height:1px;background:var(--border-soft);margin:10px 0; }

@media(max-width:900px){
  .compareGrid,.gridWrap,.aiWrap{ grid-template-columns:1fr; }
}

.coinLogo{ color:#ffffff; }
.coinLogo.small{ color:#ffffff; }
.iconBtn{
  width:30px;height:30px;
  border-radius:12px;
  border:1px solid rgba(210,220,230,.14);
  background:rgba(0,0,0,.20);
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1;
}
.iconBtn:hover{ border-color: rgba(210,220,230,.28); }

/* Best pairs – readable rows */
.pairsScroll{
  max-height:180px;
  overflow-y:auto;
  padding-right:6px;
  margin-top:8px;
}
.pairRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(210,220,230,.10);
  background:rgba(0,0,0,.14);
  margin-bottom:8px;
}
.pairName{
  font-weight:900;
  letter-spacing:.2px;
}

/* Chips – closer to original style */
.chip{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(210,220,230,.12);
  background:rgba(0,0,0,.16);
  color:rgba(232,242,240,.88);
  font-weight:800;
  cursor:pointer;
}
.chip.active{
  background:rgba(46,204,113,.14);
  border-color:rgba(46,204,113,.28);
}
.chip:disabled{
  opacity:.35;
  cursor:not-allowed;
}

/* Watchlist – ensure remove column works */
.watchHead,.watchRow{
  grid-template-columns:60px 1fr 120px 80px 160px 120px 60px;
}
.right{ text-align:right; }

.modal{ color: rgba(232,242,240,.92); }
.modal .muted{ color: rgba(232,242,240,.70); }



/* ===== Fix: Legend text should be white (not black) ===== */
.legendSym{ color: rgba(255,255,255,.92); font-weight: 900; }
.legendItem{ color: rgba(255,255,255,.92); }
.legendItem:active{ transform: translateY(1px); }

/* ===== Fix: Watchlist scroll area ===== */
.watchTable{ overflow: hidden; }
.watchStickyHead{
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(10,32,28,1), rgba(7,24,22,1));
  padding: 10px 6px 8px;
  border-radius: 14px;
}
.watchScroll{
  display:block;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Scrollbar styling (optional) */
.watchScroll::-webkit-scrollbar{ width: 10px; }
.watchScroll::-webkit-scrollbar-track{ background: rgba(0,0,0,.10); border-radius: 999px; }
.watchScroll::-webkit-scrollbar-thumb{ background: rgba(210,220,230,.22); border-radius: 999px; border: 2px solid rgba(0,0,0,.10); }



/* ===== Compare chart: Grid view (small multiples) ===== */
.sparkGridWrap{
  margin-top: 6px;
}
.sparkGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 8px;
  overscroll-behavior: contain;
}

.sparkTile{
  width: 100%;
  text-align: left;
  padding: 10px 10px 8px;
  border-radius: 18px;
  border: 1px solid rgba(210,220,230,.12);
  background: rgba(0,0,0,.16);
  cursor: pointer;
}
.sparkTile:hover{ border-color: rgba(210,220,230,.22); }
.sparkTile.active{
  border-color: rgba(46,204,113,.32);
  background: rgba(46,204,113,.08);
}
.sparkTop{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 6px;
}
.sparkSym{ font-weight: 900; letter-spacing:.2px; color: rgba(255,255,255,.92); }
.sparkVal{ margin-left:auto; font-weight: 900; }
.sparkSvg{ width:100%; height: 110px; display:block; }
.sparkFoot{ margin-top: 4px; }

.sparkGrid::-webkit-scrollbar{ width: 10px; }
.sparkGrid::-webkit-scrollbar-track{ background: rgba(0,0,0,.10); border-radius: 999px; }
.sparkGrid::-webkit-scrollbar-thumb{ background: rgba(210,220,230,.22); border-radius: 999px; border: 2px solid rgba(0,0,0,.10); }


/* ===== FIX: Spark grid top-right value color ===== */
.sparkVal{
  color: rgba(255,255,255,.92) !important;
}


/* ===============================
   Grid tiles smaller (~40%)
   =============================== */
.sparkGrid{
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  max-height: 360px;
}

.sparkTile{
  padding: 6px 8px 6px;
  border-radius: 14px;
}

.sparkTop{
  gap: 6px;
  margin-bottom: 4px;
}

.sparkSym{
  font-size: 12px;
}

.sparkVal{
  font-size: 12px;
}

.sparkSvg{
  height: 64px; /* was 110px */
}

.sparkFoot{
  margin-top: 2px;
  font-size: 11px;
}


/* ===============================
   Grid tiles EVEN smaller (+20%)
   =============================== */
.sparkGrid{
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  max-height: 340px;
}

.sparkTile{
  padding: 5px 6px 5px;
  border-radius: 12px;
}

.sparkTop{
  gap: 5px;
  margin-bottom: 3px;
}

.sparkSym{
  font-size: 11px;
}

.sparkVal{
  font-size: 11px;
}

.sparkSvg{
  height: 52px; /* was 64px */
}

.sparkFoot{
  margin-top: 2px;
  font-size: 10px;
}


/* === Nexus Primary Button (matches POL badge green) === */
.nexusPrimaryBtn {
  background: linear-gradient(180deg, #2ecc71, #25a25a);
  color: #00110b !important;
  border: none !important;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.15s ease-in-out;
}

.nexusPrimaryBtn:hover {
  filter: brightness(1.05);
}

.nexusPrimaryBtn:active {
  transform: translateY(1px);
}

.nexusPrimaryBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ===============================
   Mobile polish + missing UI classes
   =============================== */
.nexusApp{
  width:100%;
}

.cardBody{ display:flex; flex-direction:column; gap:12px; }
.helpBlock{ display:flex; flex-direction:column; gap:6px; }
.helpBody{ display:flex; flex-direction:column; gap:10px; }
.chartEmpty{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(210,220,230,.18);
  border-radius:18px;
  background:rgba(0,0,0,.12);
}
.chartWrap{ width:100%; }
.chartHeader,
.pairsHead,
.ordersHead,
.row,
.btnRow,
.liveMeta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.rowBtn{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.flex{ display:flex; }
.items-center{ align-items:center; }
.gap-2{ gap:.5rem; }
.label{
  font-size:12px;
  font-weight:800;
  color:var(--txt-muted);
  margin-bottom:6px;
}
.input,
.select,
.formRow textarea{
  width:100%;
  min-height:40px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border-soft);
  background:#071816;
  color:var(--txt-main);
  font:inherit;
}
.formRow textarea{
  min-height:96px;
  resize:vertical;
}
.ghostBtn,
.btn.ghost,
.btnGhost.ghost,
.btn.secondary,
.btnGhost.secondary,
.secondary{
  background:transparent;
  border:1px solid var(--border-soft);
  color:var(--txt-main);
}
.btn.ghost:hover,
.btnGhost.ghost:hover,
.ghostBtn:hover,
.btn.secondary:hover,
.btnGhost.secondary:hover{
  border-color:rgba(210,220,230,.28);
  background:rgba(255,255,255,.04);
}
.btnPill{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,.05);
  color:var(--txt-main);
  font-weight:800;
  cursor:pointer;
}
.btnPill:hover{ border-color:rgba(210,220,230,.28); }
.pillOn,
.pillOff,
.infoDot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}
.pillOn{
  color:#082014;
  background:rgba(46,204,113,.9);
}
.pillOff{
  color:#fff;
  background:rgba(231,76,60,.85);
}
.infoDot{
  width:22px;
  min-width:22px;
  padding:0;
  background:rgba(255,255,255,.08);
  color:var(--txt-main);
}
.hr{ height:1px; background:var(--border-soft); margin:10px 0; }
.hint,
.tiny,
.text-xs{ font-size:12px; color:var(--txt-muted); }
.liveSym,
.watchSym,
.orderPx{ font-weight:900; }
.gridLayout,
.gridControls,
.gridOrders,
.gridLeft,
.gridRight,
.pairsBox,
.aiOut,
.aiSelect,
.section-compare,
.section-grid,
.section-watch,
.section-ai,
.mobileStack{
  min-width:0;
}

@media (max-width: 768px){
  body{
    font-size:14px;
    line-height:1.4;
  }

  .topbar{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:4px;
    padding:4px 10px 4px;
    min-height:0;
  }
  .brand{ gap:8px; margin:0; }
  .brandTitle{ font-size:18px; }
  .brandSub{ font-size:12px; }
  .logoBox{
    width:38px;
    height:38px;
    border-radius:12px;
  }
  .logoSvg{ width:24px; height:24px; }
  .walletBox{ width:100%; gap:4px; margin-top:0; }
  .walletRow{
    width:100%;
    gap:6px;
    flex-wrap:wrap;
  }
  .walletRow > *{
    flex:1 1 auto;
  }

  .main{
    padding:0 12px 24px;
  }
  .card{
    border-radius:18px;
    padding:12px;
    margin-bottom:14px;
  }
  .cardHead{
    align-items:flex-start;
    gap:8px;
    margin-bottom:10px;
  }
  .cardTitle{ font-size:16px; }
  .cardActions,
  .chartHeader,
  .pairsHead,
  .ordersHead,
  .btnRow,
  .row,
  .rowBtn,
  .healthChips,
  .chartLegend,
  .aiChips{
    gap:6px;
  }

  .btn,
  .btnGhost,
  .btnDanger,
  .btnPill,
  .chip,
  .pill,
  .legendItem{
    min-height:36px;
    padding:8px 11px;
    border-radius:12px;
    font-size:13px;
  }
  .pill{
    min-height:30px;
    padding:5px 9px;
    font-size:12px;
  }
  .infoBtn,
  .iconBtn{
    width:30px;
    height:30px;
    border-radius:10px;
  }

  .formRow{
    margin-bottom:8px;
  }
  .formRow input,
  .formRow select,
  .input,
  .select,
  .formRow textarea{
    min-height:38px;
    padding:9px 10px;
    border-radius:10px;
    font-size:13px;
  }
  .label,
  .tiny,
  .text-xs,
  .hint,
  .helpLangTitle,
  .brandSub,
  .watchHead,
  .muted{
    font-size:12px;
  }
  .helpText,
  .aiText{ font-size:13px; }

  .compareLive,
  .aiPanel,
  .compareChart{
    border-radius:14px;
  }
  .liveListBox{ max-height:240px; }
  .liveRow{
    padding:7px 8px;
    border-radius:12px;
    margin-bottom:6px;
  }

  .coinChip{
    padding:6px 10px;
    gap:8px;
  }
  .coinLogo{
    width:24px;
    height:24px;
    font-size:12px;
  }
  .coinLogo.small{
    width:20px;
    height:20px;
    font-size:11px;
  }

  .gridWrap,
  .compareGrid,
  .aiWrap{
    gap:12px;
  }
  .ordersList{ margin-top:8px; }
  .orderRow{
    gap:8px;
    align-items:flex-start;
    padding:7px 0;
    font-size:13px;
  }

  .watchTable{ margin-top:8px; }
  .watchHead,
  .watchRow{
    min-width:680px;
    gap:6px;
  }
  .watchRow{
    padding:7px;
    border-radius:12px;
    margin-bottom:5px;
    font-size:13px;
  }
  .watchScroll{
    max-height:280px;
    padding-right:4px;
  }

  .sparkGrid{
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap:6px;
    max-height:300px;
  }
  .sparkTile{
    padding:6px;
    border-radius:12px;
  }
  .sparkSvg{ height:50px; }
  .sparkSym,
  .sparkVal,
  .sparkFoot{ font-size:10px; }

  .pairsScroll{ max-height:160px; }
  .pairRow{
    padding:7px 8px;
    gap:8px;
    border-radius:12px;
    margin-bottom:6px;
  }

  .modal,
  .modalHelp{
    width:min(96vw, 520px);
    max-height:86vh;
    overflow:auto;
    border-radius:16px;
    padding:14px;
  }

  [role="dialog"][aria-label="Wallet details"]{
    top:46px !important;
    right:0 !important;
    left:auto !important;
    width:min(92vw, 360px) !important;
    max-height:78vh;
    overflow:auto;
    padding:12px !important;
    border-radius:14px !important;
  }
  [role="dialog"][aria-label="Withdraw & Send"] > div{
    width:min(96vw, 520px) !important;
    max-height:88vh;
    overflow:auto;
    padding:12px !important;
    border-radius:14px !important;
  }
}

@media (max-width: 560px){
  .topbar{
    padding:2px 8px 2px;
    gap:2px;
  }
  .brand{ gap:7px; }
  .brandTitle{ font-size:17px; }
  .main{ padding:0 10px 20px; }
  .card{
    padding:10px;
    border-radius:16px;
    margin-bottom:12px;
  }
  .cardTitle{ font-size:15px; }

  .btn,
  .btnGhost,
  .btnDanger,
  .btnPill,
  .chip,
  .legendItem{
    min-height:34px;
    padding:7px 10px;
    font-size:12px;
    border-radius:11px;
  }
  .pill{
    min-height:28px;
    padding:4px 8px;
    font-size:11px;
  }
  .cardActions,
  .walletRow,
  .btnRow,
  .row,
  .rowBtn,
  .healthChips,
  .chartLegend,
  .aiChips{
    gap:5px;
  }

  .formRow input,
  .formRow select,
  .input,
  .select,
  .formRow textarea{
    min-height:36px;
    padding:8px 9px;
    font-size:12px;
  }
  .label,
  .tiny,
  .text-xs,
  .hint,
  .helpLangTitle,
  .watchHead,
  .muted{
    font-size:11px;
  }
  .helpText,
  .aiText,
  .watchRow,
  .orderRow{ font-size:12px; }

  .compareLive,
  .aiPanel,
  .compareChart,
  .liveRow,
  .pairRow,
  .sparkTile,
  .watchRow{
    border-radius:12px;
  }
  .coinChip{
    padding:6px 8px;
    gap:6px;
  }
  .coinLogo{
    width:22px;
    height:22px;
    font-size:11px;
  }
  .coinLogo.small{
    width:18px;
    height:18px;
    font-size:10px;
  }

  .watchHead,
  .watchRow{
    min-width:620px;
  }
  .watchScroll{ max-height:240px; }

  .sparkGrid{
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    gap:5px;
    max-height:280px;
  }
  .sparkSvg{ height:44px; }

  [role="dialog"][aria-label="Wallet details"]{
    width:min(96vw, 360px) !important;
    top:44px !important;
  }
}


/* === Final mobile header tightening + compare colors === */
@media (max-width: 820px){
  .topbar{
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 3px !important;
    padding: 2px 10px 4px !important;
    min-height: 0 !important;
  }
  .brand{
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .brandTitle{
    line-height: 1.05 !important;
    margin: 0 !important;
  }
  .brandSub{
    margin-top: 1px !important;
  }
  .walletBox{
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 4px !important;
  }
  .walletRow{
    margin: 0 !important;
    gap: 6px !important;
  }
}
.liveRight .txtGood,
.watchRow .txtGood,
.right.mono.txtGood{ color: var(--green) !important; }
.liveRight .txtBad,
.watchRow .txtBad,
.right.mono.txtBad{ color: var(--red) !important; }


/* === Compact manual grid preset buttons on mobile === */
@media (max-width: 768px){
  .manualPresetRow .btn,
  .manualQuickRow .btn{
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }
}