/* DASH Trader — Stylesheet */

/* ═══════════════════════════════════════════════════════
   DASH TRADER — Android PWA
   Touch-first, offline-capable, installable
   ═══════════════════════════════════════════════════════ */

:root{
  --blue:#008DE4;--teal:#00C6C6;
  --bg:#07101A;--surf:#0C1825;--surf2:#111D2E;--bord:#162840;
  --txt:#DFF0FF;--mute:#4A6B8A;--mute2:#2A4B6A;
  --buy:#00E5A0;--sell:#FF4D6A;--hold:#F5A623;
  --buy-a:rgba(0,229,160,.1);--sell-a:rgba(255,77,106,.1);--hold-a:rgba(245,166,35,.1);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  --nav-h:64px;
  --header-h:56px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;padding:0;background:var(--bg);}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  color:var(--txt);
  display:flex;flex-direction:column;
  padding-top:var(--safe-top);
  padding-bottom:calc(var(--nav-h) + var(--safe-bot));
  overscroll-behavior:none;
}

/* ── HEADER ─────────────────────────────────────── */
.app-header{
  height:var(--header-h);
  background:var(--surf);
  border-bottom:1px solid var(--bord);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  flex-shrink:0;
  position:sticky;top:0;z-index:50;
}
.h-logo{display:flex;align-items:center;gap:10px;}
.h-icon{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--teal));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;color:#fff;font-family:monospace;
  flex-shrink:0;
}
.h-title{font-size:17px;font-weight:700;letter-spacing:.01em;}
.h-sub{font-size:10px;color:var(--mute);font-family:monospace;letter-spacing:.06em;margin-top:1px;}
.h-right{display:flex;align-items:center;gap:8px;}
.status-pill{
  display:flex;align-items:center;gap:6px;
  background:var(--surf2);border:1px solid var(--bord);
  border-radius:99px;padding:5px 12px;
  font-size:11px;font-family:monospace;color:var(--mute);
}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--mute);flex-shrink:0;}
.sdot.live{background:var(--buy);animation:blink 2s infinite;}
.sdot.err{background:var(--sell);}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* voice btn */
.voice-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--surf2);border:1px solid var(--bord);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;transition:all .2s;
}
.voice-btn.on{background:var(--buy-a);border-color:rgba(0,229,160,.4);}

/* ── PAGES ──────────────────────────────────────── */
.pages{flex:1;overflow:hidden;position:relative;isolation:isolate;}
.page{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:14px 14px 100px;
  display:none;
  flex-direction:column;gap:14px;
  z-index:1;
  background:var(--bg);
}
.page.active{display:flex;z-index:2;}

/* ── BOTTOM NAV ─────────────────────────────────── */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  height:calc(var(--nav-h) + var(--safe-bot));
  background:var(--surf);border-top:1px solid var(--bord);
  display:flex;align-items:flex-start;
  padding-top:8px;
  padding-bottom:var(--safe-bot);
  z-index:100;
}
.nav-btn{
  flex:1;display:flex;flex-direction:column;
  align-items:center;gap:3px;cursor:pointer;
  padding:4px 0;border:none;background:none;
  color:var(--mute);transition:color .18s;
}
.nav-btn.active{color:var(--blue);}
.nav-icon{font-size:20px;line-height:1;}
.nav-label{font-size:9px;font-weight:600;letter-spacing:.02em;}

/* ── CARDS ─────────────────────────────────────── */
.card{
  background:var(--surf);border:1px solid var(--bord);
  border-radius:14px;
}
.card-pad{padding:16px;}

/* ── PRICE HERO ─────────────────────────────────── */
.price-hero{
  background:var(--surf);border:1px solid var(--blue);
  border-radius:14px;padding:16px 16px 14px;
  position:relative;
}
.price-hero::before{
  content:'';position:absolute;top:-30px;right:-30px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,141,228,.12),transparent 70%);
  pointer-events:none;
}
.price-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--mute);font-family:monospace;}
.price-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:6px;}
.price-val{font-family:monospace;font-size:clamp(22px,7vw,34px);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#DFF0FF;display:block;}
.price-meta{display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.meta-item{text-align:right;}
.meta-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);font-family:monospace;}
.meta-val{font-family:monospace;font-size:12px;font-weight:600;margin-top:1px;}
.chg-pill{
  display:inline-flex;align-items:center;gap:4px;margin-top:8px;
  font-family:monospace;font-size:12px;padding:3px 9px;border-radius:6px;
}
.chg-pill.up{color:var(--buy);background:var(--buy-a);}
.chg-pill.dn{color:var(--sell);background:var(--sell-a);}

/* ── SIGNAL BANNER ──────────────────────────────── */
.sig-banner{
  border-radius:12px;padding:14px 16px;
  display:flex;align-items:center;gap:14px;
  border:1px solid transparent;transition:all .35s;
}
.sig-banner.BUY{background:var(--buy-a);border-color:rgba(0,229,160,.25);}
.sig-banner.SELL{background:var(--sell-a);border-color:rgba(255,77,106,.25);}
.sig-banner.HOLD{background:var(--hold-a);border-color:rgba(245,166,35,.25);}
.sig-word{font-family:monospace;font-size:22px;font-weight:800;letter-spacing:.08em;min-width:68px;}
.sig-banner.BUY  .sig-word{color:var(--buy);}
.sig-banner.SELL .sig-word{color:var(--sell);}
.sig-banner.HOLD .sig-word{color:var(--hold);}
.sig-body{flex:1;}
.sig-desc{font-size:13px;line-height:1.45;}
.sig-time{font-size:10px;color:var(--mute);font-family:monospace;margin-top:3px;}

/* ── INDICATORS ─────────────────────────────────── */
.inds-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ind-card{background:var(--surf);border:1px solid var(--bord);border-radius:12px;padding:13px 12px;}
.ind-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);font-family:monospace;}
.ind-val{font-family:monospace;font-size:18px;font-weight:800;margin:5px 0 4px;}
.ind-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:2px 6px;border-radius:4px;display:inline-block;}
.ind-tag.bull{color:var(--buy);background:var(--buy-a);}
.ind-tag.bear{color:var(--sell);background:var(--sell-a);}
.ind-tag.neut{color:var(--hold);background:var(--hold-a);}
.bar-track{height:3px;background:var(--bord);border-radius:2px;overflow:hidden;margin-top:6px;}
.bar-fill{height:100%;border-radius:2px;transition:width .5s;}

/* ── CHART ──────────────────────────────────────── */
.chart-wrap{padding:16px;}
.chart-top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:0;padding:4px 6px;border-radius:8px;transition:background .15s;}
.chart-top:active{background:var(--surf2);}
.chart-ttl{font-size:13px;font-weight:600;}
.tf-row{display:flex;gap:2px;background:var(--surf2);border-radius:7px;padding:3px;}
.tf-btn{
  padding:5px 12px;border-radius:5px;font-family:monospace;font-size:10px;
  border:none;background:none;color:var(--mute);cursor:pointer;transition:all .15s;
}
.tf-btn.on,.tf-btn:active{background:var(--bord);color:var(--txt);}
canvas#myChart{display:block;width:100%!important;}

/* ── POSITION CARD ──────────────────────────────── */
.pos-card{border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.pos-card.profit{background:var(--buy-a);border:1px solid rgba(0,229,160,.25);}
.pos-card.loss{background:var(--sell-a);border:1px solid rgba(255,77,106,.25);}
.pos-item{}
.pos-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);font-family:monospace;}
.pos-val{font-family:monospace;font-size:14px;font-weight:700;margin-top:3px;}

/* ── LOG ────────────────────────────────────────── */





to{opacity:1;transform:none}}





/* ── SETTINGS PAGE ──────────────────────────────── */
.settings-page{}
.settings-scroll{display:flex;flex-direction:column;gap:16px;}
.sec-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);padding:0 4px;margin-bottom:6px;}
.set-group{background:var(--surf);border:1px solid var(--bord);border-radius:14px;overflow:hidden;}
.set-row{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--bord);}
.set-row:last-child{border-bottom:none;}
.set-info{flex:1;}
.set-lbl{font-size:14px;font-weight:500;}
.set-desc{font-size:11px;color:var(--mute);margin-top:2px;}
.set-ctrl{margin-left:12px;}
input[type=number].num-in{
  width:72px;background:var(--surf2);border:1px solid var(--bord);
  border-radius:8px;padding:8px 10px;color:var(--txt);font-family:monospace;
  font-size:14px;text-align:center;outline:none;
  -moz-appearance:textfield;
}
input[type=number].num-in::-webkit-inner-spin-button{-webkit-appearance:none;}
input[type=number].num-in:focus{border-color:var(--blue);}
input[type=text].txt-in{
  width:130px;background:var(--surf2);border:1px solid var(--bord);
  border-radius:8px;padding:8px 10px;color:var(--txt);font-family:monospace;
  font-size:13px;text-align:center;outline:none;text-transform:uppercase;
}
input[type=text].txt-in:focus{border-color:var(--blue);}
select.sel-in{
  background:var(--surf2);border:1px solid var(--bord);
  border-radius:8px;padding:8px 10px;color:var(--txt);font-family:monospace;
  font-size:13px;outline:none;
}
/* toggle switch */
.toggle{position:relative;width:48px;height:26px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{
  position:absolute;inset:0;border-radius:13px;
  background:var(--bord);transition:background .2s;cursor:pointer;
}
.toggle input:checked + .toggle-track{background:var(--blue);}
.toggle-thumb{
  position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .2s;pointer-events:none;
}
.toggle input:checked ~ .toggle-thumb{transform:translateX(22px);}

/* RSI zone visual */
.rsi-zones{display:flex;gap:6px;margin:0 16px 12px;}
.rsi-zone{flex:1;border-radius:8px;border:1px solid;padding:8px 6px;text-align:center;font-size:10px;font-weight:700;}
.rsi-zone.buy{color:var(--buy);border-color:rgba(0,229,160,.3);background:var(--buy-a);}
.rsi-zone.hold{color:var(--hold);border-color:rgba(245,166,35,.3);background:var(--hold-a);}
.rsi-zone.sell{color:var(--sell);border-color:rgba(255,77,106,.3);background:var(--sell-a);}

/* save btn */
.save-btn{
  margin:4px 0 0;padding:15px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--teal));
  border:none;color:#fff;font-size:16px;font-weight:700;
  cursor:pointer;width:100%;transition:opacity .18s;
}
.save-btn:active{opacity:.8;}

/* api key input */
input[type=password].api-in, input[type=text].api-in{
  width:100%;background:var(--surf2);border:1px solid var(--bord);
  border-radius:8px;padding:10px 12px;color:var(--txt);font-family:monospace;
  font-size:13px;outline:none;
}
input[type=password].api-in:focus, input[type=text].api-in:focus{border-color:var(--blue);}
.api-group{padding:14px 16px;border-bottom:1px solid var(--bord);}
.api-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);font-family:monospace;margin-bottom:7px;}
.api-note{font-size:11px;color:var(--mute);padding:12px 16px;border-bottom:1px solid var(--bord);line-height:1.5;}
.test-btn{
  margin:12px 16px;padding:10px;border-radius:8px;
  background:var(--buy-a);border:1px solid rgba(0,229,160,.3);
  color:var(--buy);font-size:13px;font-weight:600;width:calc(100% - 32px);cursor:pointer;
}

/* err box */
.err-box{background:var(--sell-a);border:1px solid rgba(255,77,106,.25);
  border-radius:11px;padding:12px 14px;font-size:12px;color:#FF8FA0;line-height:1.5;display:none;}

/* auto-trade warning */
.auto-warn{background:rgba(255,77,106,.08);border:1px solid rgba(255,77,106,.2);
  border-radius:10px;padding:11px 14px;font-size:12px;color:#FF8FA0;line-height:1.5;display:none;margin:0 16px 4px;}

/* trade history page */
.trades-page{}
.trades-scroll{display:flex;flex-direction:column;gap:8px;}
.stats-row{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--bord);}
.stat-box{flex:1;background:var(--surf2);border-radius:10px;padding:10px;text-align:center;}
.stat-num{font-family:monospace;font-size:20px;font-weight:800;}
.stat-lbl{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;margin-top:2px;}
.trade-item{background:var(--surf);border-radius:10px;padding:12px 14px;border-left:3px solid var(--mute);}
.trade-item.buy{border-left-color:var(--buy);}
.trade-item.sell{border-left-color:var(--sell);}
.trade-item.error{border-left-color:var(--sell);opacity:.7;}
.trade-top{display:flex;align-items:center;gap:10px;}
.trade-type{font-family:monospace;font-size:11px;font-weight:800;min-width:44px;}
.trade-note{font-size:12px;line-height:1.4;flex:1;}
.trade-meta{display:flex;align-items:center;gap:8px;margin-top:5px;}
.trade-time{font-family:monospace;font-size:10px;color:var(--mute);}
.auto-tag{background:rgba(0,141,228,.15);color:var(--blue);font-size:9px;font-weight:700;padding:2px 5px;border-radius:3px;}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--mute);padding:40px;}
.empty-icon{font-size:48px;}
.empty-txt{font-size:16px;font-weight:600;color:var(--txt);}
.empty-sub{font-size:13px;text-align:center;line-height:1.5;}

/* scrollbar */
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--bord);border-radius:2px;}