:root {
  --bg: #0a0a0a;
  --bg2: #111111;
  --bg3: #181818;
  --bg4: #1f1f1f;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);
  --gold: #c9a84c;
  --gold2: #e8c86a;
  --gold3: #f5e0a0;
  --golddim: rgba(201,168,76,0.12);
  --red: #e24b4a;
  --reddim: rgba(226,75,74,0.12);
  --green: #1d9e75;
  --greendim: rgba(29,158,117,0.12);
  --amber: #ef9f27;
  --amberdim: rgba(239,159,39,0.12);
  --blue: #5b9bd5;
  --bluedim: rgba(91,155,213,0.12);
  --purple: #9b8fdd;
  --purpledim: rgba(155,143,221,0.12);
  --text: #f0ede8;
  --text2: #a09a90;
  --text3: #5a5650;
  --safe: env(safe-area-inset-top, 0px);
  --safeb: env(safe-area-inset-bottom, 0px);
  --safel: env(safe-area-inset-left, 0px);
  --safer: env(safe-area-inset-right, 0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;min-height:100vh;background:var(--bg);color:var(--text);font-family:-apple-system,'SF Pro Display','Helvetica Neue',sans-serif;overscroll-behavior:none}
body{padding-top:calc(var(--safe) + 0px);padding-bottom:calc(var(--safeb) + 60px);padding-left:var(--safel);padding-right:var(--safer)}

/* ── HEADER ── */
.header{position:sticky;top:0;z-index:100;background:rgba(10,10,10,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:0.5px solid var(--border);padding:10px 16px 8px}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo-wrap{display:flex;align-items:center;gap:8px}
.logo-icon{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#1a1600,#3d2e00);border:.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--gold);letter-spacing:-.5px}
.logo-text{font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.logo-sub{font-size:9px;letter-spacing:.18em;color:var(--text3);text-transform:uppercase;margin-top:1px}
.header-right{display:flex;align-items:center;gap:8px}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}
.clock{font-size:10px;color:var(--text3);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.refresh-btn{font-size:10px;color:var(--text2);background:var(--bg3);border:.5px solid var(--border2);border-radius:6px;padding:4px 9px;cursor:pointer;letter-spacing:.06em;text-transform:uppercase}

/* ── NAV TABS ── */
.nav{display:flex;gap:0;border-bottom:.5px solid var(--border);background:var(--bg);overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-tab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;color:var(--text3);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:all .2s;font-weight:500}
.nav-tab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ── PAGE ── */
.page{display:none;padding:12px 14px}
.page.active{display:block}

/* ── MARKET CARDS ── */
.market-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
.mcard{background:var(--bg2);border:.5px solid var(--border);border-radius:12px;padding:12px;position:relative;overflow:hidden}
.mcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.mcard.usd::before{background:var(--blue)}
.mcard.gold::before{background:var(--gold)}
.mcard.nas::before{background:var(--purple)}
.mcard.dow::before{background:var(--red)}
.mcard-sym{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:4px;font-weight:500}
.mcard-price{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.mcard-chg{font-size:11px;font-weight:600;margin-top:2px}
.chg-up{color:var(--green)}.chg-dn{color:var(--red)}
.mcard-sig{font-size:9px;letter-spacing:.07em;text-transform:uppercase;margin-top:6px;padding:2px 7px;border-radius:4px;display:inline-block;font-weight:600}
.sig-buy{background:var(--greendim);color:var(--green)}
.sig-sell{background:var(--reddim);color:var(--red)}
.sig-watch{background:var(--amberdim);color:var(--amber)}

/* ── SECTION HEADER ── */
.sec-hdr{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;padding-bottom:5px;border-bottom:.5px solid var(--border);font-weight:600}

/* ── ORDER FLOW ── */
.of-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
.of-card{background:var(--bg2);border:.5px solid var(--border);border-radius:12px;padding:11px}
.of-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.of-name{font-size:11px;font-weight:600;color:var(--text)}
.of-badge{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:3px}
.ob-buy{background:var(--greendim);color:var(--green)}
.ob-sell{background:var(--reddim);color:var(--red)}
.ob-watch{background:var(--amberdim);color:var(--amber)}
.bm-row{display:flex;align-items:center;gap:5px;margin-bottom:4px}
.bm-lbl{font-size:9px;color:var(--text3);min-width:46px;font-weight:500}
.bm-track{flex:1;height:5px;border-radius:3px;background:var(--bg4);overflow:hidden}
.bm-fill{height:100%;border-radius:3px}
.fill-g{background:var(--green)}.fill-r{background:var(--red)}.fill-a{background:var(--amber)}
.bm-num{font-size:9px;color:var(--text2);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.of-delta{display:flex;justify-content:space-between;margin-top:7px;padding-top:6px;border-top:.5px solid var(--border)}
.delta-lbl{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)}
.delta-val{font-size:12px;font-weight:700;margin-top:1px}
.dv-pos{color:var(--green)}.dv-neg{color:var(--red)}.dv-neu{color:var(--amber)}
.of-levels{margin-top:7px;padding-top:6px;border-top:.5px solid var(--border)}
.lvl-r{display:flex;justify-content:space-between;font-size:9px;margin-bottom:2px}
.lvl-lbl{color:var(--text3)}.lvl-res{color:var(--red)}.lvl-sup{color:var(--green)}
.lvl-val{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.of-note{font-size:9px;color:var(--text3);line-height:1.5;margin-top:6px;padding-top:5px;border-top:.5px solid var(--border)}

/* ── FILTER PILLS ── */
.filter-scroll{overflow-x:auto;scrollbar-width:none;margin-bottom:8px}
.filter-scroll::-webkit-scrollbar{display:none}
.filter-row{display:flex;gap:5px;padding-bottom:2px;width:max-content}
.pill{font-size:10px;font-weight:600;letter-spacing:.06em;padding:4px 10px;border-radius:20px;border:.5px solid var(--border2);cursor:pointer;background:var(--bg2);color:var(--text3);text-transform:uppercase;white-space:nowrap;transition:all .15s}
.pill.on-war{background:var(--reddim);color:var(--red);border-color:var(--red)}
.pill.on-iran{background:rgba(239,159,39,0.1);color:var(--amber);border-color:var(--amber)}
.pill.on-usa{background:var(--bluedim);color:var(--blue);border-color:var(--blue)}
.pill.on-israel{background:rgba(201,168,76,0.1);color:var(--gold);border-color:var(--gold)}
.pill.on-geo{background:var(--greendim);color:var(--green);border-color:var(--green)}
.pill.on-usd{background:var(--bluedim);color:var(--blue);border-color:var(--blue)}
.pill.on-gold{background:rgba(201,168,76,0.1);color:var(--gold);border-color:var(--gold)}
.pill.on-nasdaq{background:var(--purpledim);color:var(--purple);border-color:var(--purple)}
.pill.on-dow{background:var(--reddim);color:var(--red);border-color:var(--red)}
.pill.on-fed{background:var(--greendim);color:var(--green);border-color:var(--green)}
.pill.on-oil{background:var(--amberdim);color:var(--amber);border-color:var(--amber)}
.pill.on-latest{background:var(--bg3);color:var(--text2);border-color:var(--border2)}
.pill.on-severity{background:var(--bg3);color:var(--text2);border-color:var(--border2)}

/* ── NEWS CARDS ── */
.news-list{display:flex;flex-direction:column;gap:8px}
.ncard{background:var(--bg2);border:.5px solid var(--border);border-radius:12px;padding:11px;cursor:pointer;position:relative;overflow:hidden}
.sev-bar{position:absolute;top:0;left:0;height:2px;transition:width .2s}
.ntop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;gap:8px}
.ntags{display:flex;gap:3px;flex-wrap:wrap;flex:1}
.ntag{font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:3px}
.ntag.war{background:var(--reddim);color:var(--red)}
.ntag.iran{background:var(--amberdim);color:var(--amber)}
.ntag.usa{background:var(--bluedim);color:var(--blue)}
.ntag.israel{background:var(--golddim);color:var(--gold)}
.ntag.geo{background:var(--greendim);color:var(--green)}
.ntag.usd{background:var(--bluedim);color:var(--blue)}
.ntag.gold{background:var(--golddim);color:var(--gold)}
.ntag.nasdaq{background:var(--purpledim);color:var(--purple)}
.ntag.dow{background:var(--reddim);color:var(--red)}
.ntag.fed{background:var(--greendim);color:var(--green)}
.ntag.oil{background:var(--amberdim);color:var(--amber)}
.ntime{font-size:9px;color:var(--text3);white-space:nowrap;font-weight:500}
.ntitle{font-size:12px;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:4px}
.nsrc{font-size:9px;color:var(--text3);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em}
.nimp-row{display:flex;gap:4px;flex-wrap:wrap}
.nimp{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 5px;border-radius:3px}
.nimp-up{background:var(--greendim);color:var(--green)}
.nimp-dn{background:var(--reddim);color:var(--red)}
.nimp-nx{background:var(--bg3);color:var(--text3)}
.nimp-mx{background:var(--amberdim);color:var(--amber)}
.nbody{max-height:0;overflow:hidden;transition:max-height .3s;margin-top:0}
.nbody.open{max-height:800px;margin-top:8px;padding-top:8px;border-top:.5px solid var(--border)}
.ai-lbl{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;font-weight:700}
.nanalysis{font-size:11px;color:var(--text2);line-height:1.55;margin-bottom:6px}
.deep-btn{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);background:var(--golddim);border:.5px solid var(--gold);border-radius:6px;padding:5px 11px;cursor:pointer;transition:all .15s}
.deep-btn:active{transform:scale(.96)}

/* ── AI SECTION ── */
.ai-box{background:var(--bg2);border:.5px solid var(--border2);border-radius:12px;padding:12px;margin-bottom:14px}
.ai-title{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:10px;font-weight:600}
.ai-desc{font-size:11px;color:var(--text2);line-height:1.5;margin-bottom:10px}
.ai-input-wrap{position:relative;margin-bottom:8px}
.ai-input{width:100%;background:var(--bg3);border:.5px solid var(--border2);border-radius:8px;padding:10px;font-size:12px;color:var(--text);font-family:inherit;resize:none;min-height:70px}
.ai-input:focus{outline:none;border-color:var(--gold)}
.ai-input::placeholder{color:var(--text3)}
.ai-btn{width:100%;background:linear-gradient(135deg,#3d2e00,#1a1600);border:.5px solid var(--gold);border-radius:8px;padding:10px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);cursor:pointer;transition:all .2s}
.ai-btn:active{transform:scale(.98)}
.ai-output{background:var(--bg3);border:.5px solid var(--border2);border-radius:8px;padding:12px;margin-top:10px;display:none}
.ai-output-lbl{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;font-weight:700}
.ai-output-text{font-size:11px;color:var(--text);line-height:1.6}
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:10px}
.quick-btn{background:var(--bg3);border:.5px solid var(--border2);border-radius:8px;padding:8px;font-size:10px;color:var(--text2);cursor:pointer;text-align:left;transition:all .15s;font-weight:500}
.quick-btn:active{transform:scale(.97);background:var(--bg4)}

/* ── SEARCH ── */
.search-box{background:var(--bg3);border:.5px solid var(--border2);border-radius:8px;padding:8px 12px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.search-box input{flex:1;background:none;border:none;color:var(--text);font-size:11px;font-family:inherit}
.search-box input:focus{outline:none}
.search-box input::placeholder{color:var(--text3)}
.search-icon{font-size:12px;color:var(--text3)}

/* ── SORT ── */
.sort-wrap{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sort-sel{background:var(--bg3);border:.5px solid var(--border2);border-radius:6px;padding:4px 8px;font-size:10px;color:var(--text2);font-family:inherit;cursor:pointer}
.sort-sel:focus{outline:none}
.refresh-news-btn{background:linear-gradient(135deg,#3d2e00,#1a1600);border:.5px solid var(--gold);border-radius:6px;padding:5px 12px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:5px}
.refresh-news-btn:active{transform:scale(.96)}
.refresh-news-btn.loading{opacity:0.6;pointer-events:none}

/* ── INSTALL ── */
.install-card{background:var(--bg2);border:.5px solid var(--border2);border-radius:12px;padding:12px;margin-bottom:10px}
.install-title{font-size:11px;font-weight:700;color:var(--gold);margin-bottom:8px;letter-spacing:.08em;text-transform:uppercase}
.install-steps{font-size:11px;color:var(--text2);line-height:1.7}
.install-steps ol{padding-left:18px}
.install-steps li{margin-bottom:6px}
.install-steps strong{color:var(--text);font-weight:600}

/* ── ABOUT ── */
.about-text{font-size:11px;color:var(--text2);line-height:1.7;margin-bottom:14px}
.about-foot{font-size:10px;color:var(--text3);text-align:center;padding-top:8px;border-top:.5px solid var(--border)}

/* ── BOTTOM NAV ── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(10,10,10,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:.5px solid var(--border);display:flex;justify-content:space-around;padding:8px 0 calc(var(--safeb) + 8px);z-index:100}
.bnav-item{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:4px 16px;transition:all .15s}
.bnav-icon{font-size:18px}
.bnav-label{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);font-weight:600}
.bnav-item.active .bnav-icon{color:var(--gold)}
.bnav-item.active .bnav-label{color:var(--gold)}

/* ── EMPTY STATE ── */
.empty{text-align:center;padding:30px;color:var(--text3);font-size:11px}

@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
