:root {
  --bg: #0a0b0d;
  --card: #13141a;
  --card-2: #1b1d26;
  --primary: #7b61ff;
  --primary-dim: #5b45c9;
  --profit: #00d4aa;
  --loss: #ff5252;
  --warn: #ffb547;
  --text: #f4f5f7;
  --muted: #8a8d99;
  --border: #23252f;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: 78px; /* space for bottom nav */
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
h1,h2,h3 { margin: 0 0 8px; font-weight: 700; letter-spacing: -0.02em; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* layout */
.app { max-width: 520px; margin: 0 auto; padding: 16px 16px 24px; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: rgba(10,11,13,.85);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.topbar .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.02em; }
.topbar .logo {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--profit));
  display: grid; place-items: center; font-size: 15px;
}
.topbar .tag { font-size: 11px; color: var(--muted); font-weight: 500; }

/* cards */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
  box-shadow: var(--shadow);
  animation: rise .3s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} }
.card.tight { padding: 14px; }

/* balance hero */
.hero { background: linear-gradient(160deg, #1a1630, #13141a 65%); }
.hero .label { color: var(--muted); font-size: 13px; }
.hero .balance { font-size: 40px; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 6px; }
.pl-line { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: rgba(0,212,170,.14); color: var(--profit);
}
.badge.commission { background: rgba(123,97,255,.16); color: #b7a7ff; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.chip { background: var(--card-2); border:1px solid var(--border); border-radius:12px; padding:10px 12px; flex:1; min-width:120px; }
.chip .k { font-size:11px; color:var(--muted); }
.chip .v { font-size:17px; font-weight:700; margin-top:2px; }

.profit { color: var(--profit); }
.loss { color: var(--loss); }
.warn { color: var(--warn); }
.up::before { content:"▲ "; font-size:10px; }
.down::before { content:"▼ "; font-size:10px; }

/* stock rows */
.row {
  display:flex; align-items:center; gap:12px; padding:13px 4px;
  border-bottom:1px solid var(--border); cursor:pointer;
  transition: background .2s;
}
.row:last-child{ border-bottom:none; }
.row:active{ background: var(--card-2); }
.tkr-badge {
  width:42px; height:42px; border-radius:12px; flex:none;
  display:grid; place-items:center; font-weight:800; font-size:13px;
  background: var(--card-2); border:1px solid var(--border);
}
.row .name { flex:1; min-width:0; }
.row .name .t { font-weight:700; }
.row .name .n { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .px { text-align:right; }
.row .px .p { font-weight:700; }
.row .px .c { font-size:12.5px; font-weight:600; }

/* price flash */
.flash-up { animation: fu .7s ease; }
.flash-down { animation: fd .7s ease; }
@keyframes fu { 0%{background:rgba(0,212,170,.28);} 100%{background:transparent;} }
@keyframes fd { 0%{background:rgba(255,82,82,.28);} 100%{background:transparent;} }

/* buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px; border:none; border-radius:14px;
  font-family:inherit; font-size:16px; font-weight:700; cursor:pointer;
  transition: transform .15s ease, filter .2s ease; color:#fff;
}
.btn:active{ transform: scale(.97); }
.btn.primary{ background: var(--primary); }
.btn.buy{ background: var(--profit); color:#062b24; }
.btn.sell{ background: var(--loss); }
.btn.ghost{ background: var(--card-2); border:1px solid var(--border); color:var(--text); }
.btn.sm{ width:auto; padding:9px 14px; font-size:13px; border-radius:11px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* sections / router */
.view{ display:none; }
.view.active{ display:block; }

/* bottom nav */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:flex; background:rgba(19,20,26,.95); backdrop-filter:blur(12px);
  border-top:1px solid var(--border); padding:8px 6px 10px;
}
.bottom-nav button{
  flex:1; background:none; border:none; color:var(--muted); font-family:inherit;
  font-size:10.5px; font-weight:600; display:flex; flex-direction:column;
  align-items:center; gap:4px; cursor:pointer; padding:4px; transition:color .2s;
}
.bottom-nav button .ic{ font-size:20px; line-height:1; }
.bottom-nav button.active{ color:var(--primary); }

/* overlay (stock detail / trade) */
.overlay{
  position:fixed; inset:0; z-index:50; background:var(--bg);
  overflow-y:auto; transform:translateY(100%); transition:transform .3s ease;
}
.overlay.open{ transform:translateY(0); }
.overlay-head{
  position:sticky; top:0; display:flex; align-items:center; gap:12px;
  padding:14px 16px; background:rgba(10,11,13,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); z-index:5;
}
.overlay-head .back{ font-size:22px; background:none; border:none; color:var(--text); cursor:pointer; }

/* indicators grid */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.metric{ background:var(--card-2); border:1px solid var(--border); border-radius:12px; padding:12px; }
.metric .k{ font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.metric .v{ font-size:19px; font-weight:700; margin-top:3px; }

/* tooltip / what-is-this */
.info{
  width:16px; height:16px; border-radius:50%; border:1px solid var(--muted);
  color:var(--muted); font-size:10px; font-weight:700; cursor:pointer;
  display:inline-grid; place-items:center; flex:none;
}
.tip{ position:relative; }
.tip .tip-body{
  display:none; position:absolute; z-index:60; left:0; top:22px; width:230px;
  background:var(--card-2); border:1px solid var(--border); border-radius:12px;
  padding:11px 12px; font-size:12.5px; line-height:1.45; color:var(--text);
  box-shadow: var(--shadow);
}
.tip.show .tip-body{ display:block; animation:rise .2s ease both; }

/* range bar (52w) */
.rangebar{ height:8px; border-radius:999px; background:var(--card-2); position:relative; margin:10px 0 6px; }
.rangebar .fill{ position:absolute; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--loss),var(--warn),var(--profit)); }
.rangebar .dot{ position:absolute; top:-3px; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--primary); transform:translateX(-50%); }

/* robo / risk cards */
.callout{ display:flex; gap:12px; align-items:flex-start; }
.callout .pill{ font-weight:800; padding:8px 12px; border-radius:12px; font-size:13px; white-space:nowrap; }
.pill.BUY{ background:rgba(0,212,170,.16); color:var(--profit);}
.pill.SELL{ background:rgba(255,82,82,.16); color:var(--loss);}
.pill.HOLD{ background:rgba(255,181,71,.16); color:var(--warn);}

/* news */
.news-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.news-item:last-child{ border-bottom:none; }
.news-item img{ width:64px; height:64px; border-radius:10px; object-fit:cover; flex:none; background:var(--card-2); }
.news-item .h{ font-weight:600; font-size:13.5px; }
.sent{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; }
.sent.Bullish{ background:rgba(0,212,170,.16); color:var(--profit);}
.sent.Bearish{ background:rgba(255,82,82,.16); color:var(--loss);}
.sent.Neutral{ background:rgba(138,141,153,.18); color:var(--muted);}

/* trade panel */
.seg{ display:flex; background:var(--card-2); border-radius:12px; padding:4px; margin-bottom:14px; }
.seg button{ flex:1; padding:11px; border:none; border-radius:9px; background:none; color:var(--muted); font-family:inherit; font-weight:700; cursor:pointer; transition:.2s; }
.seg button.on-buy{ background:var(--profit); color:#062b24; }
.seg button.on-sell{ background:var(--loss); color:#fff; }
.amount-input{ display:flex; align-items:center; background:var(--card-2); border:1px solid var(--border); border-radius:14px; padding:8px 14px; margin:10px 0; }
.amount-input span{ font-size:26px; font-weight:700; color:var(--muted); }
.amount-input input{ flex:1; background:none; border:none; color:var(--text); font-family:inherit; font-size:30px; font-weight:800; width:100%; outline:none; }
.quick{ display:flex; gap:8px; margin-bottom:12px; }
.quick button{ flex:1; background:var(--card-2); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:9px; font-family:inherit; font-weight:600; cursor:pointer; }

/* leaderboard */
.lb-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.lb-row:last-child{ border-bottom:none; }
.lb-row.me{ background:rgba(123,97,255,.1); border-radius:12px; padding:10px; border-bottom:none; }
.lb-rank{ width:26px; text-align:center; font-weight:800; color:var(--muted); }

/* history table */
.ledger{ width:100%; border-collapse:collapse; font-size:13px; }
.ledger th{ text-align:left; color:var(--muted); font-weight:600; padding:8px 6px; border-bottom:1px solid var(--border); font-size:11.5px; }
.ledger td{ padding:10px 6px; border-bottom:1px solid var(--border); }
select.filter{ background:var(--card-2); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:9px 12px; font-family:inherit; }

/* learn / about */
.learn-item{ padding:14px 0; border-bottom:1px solid var(--border); }
.learn-item:last-child{ border-bottom:none; }
.learn-item h3{ display:flex; align-items:center; gap:8px; }
.toast{
  position:fixed; left:50%; bottom:92px; transform:translateX(-50%) translateY(20px);
  background:var(--card-2); border:1px solid var(--border); color:var(--text);
  padding:13px 18px; border-radius:14px; box-shadow:var(--shadow); z-index:100;
  opacity:0; transition:.3s; font-weight:600; max-width:90%;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.ok{ border-color:var(--profit); }
.toast.err{ border-color:var(--loss); }

.spinner{ width:22px;height:22px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin:24px auto; }
@keyframes spin{ to{transform:rotate(360deg);} }
.empty{ text-align:center; color:var(--muted); padding:26px 10px; }

svg.chart{ width:100%; height:150px; display:block; }
.section-title{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:6px 0 10px; }