:root{
  /* ===== NASTY palette ===== */
  --black:#000000;
  --ink:#0A0A0A;
  --surface:#141414;
  --surface-2:#1C1C1C;
  --line:#2A2A2A;
  --line-2:#3A3A3A;

  --lime:#CEFA05;
  --lime-soft:#1E2600;
  --lime-dim:#8FA803;

  --blue:#0E4DD5;
  --blue-soft:#0A2E7A;

  --red:#E81454;
  --red-soft:#2A0A12;

  --white:#FFFFFF;
  --grey:#747880;
  --grey-2:#9BA0A8;

  --buy:#CEFA05;
  --sell:#E81454;

  /* ===== type ===== */
  --f-display:"Archivo",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;

  /* ===== mobile app metrics ===== */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --hdr-h:56px;
  --tab-h:64px;
  --r-sm:12px;
  --r-md:18px;
  --r-lg:24px;
  --r-pill:50px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  margin:0;padding:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--f-body);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

body{
  min-height:100dvh;
  padding-bottom:calc(var(--tab-h) + var(--safe-b));
}

.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ============ SPLASH ============ */
#splash{
  position:fixed;inset:0;z-index:100;
  background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:calc(var(--safe-t) + 24px) 24px calc(var(--safe-b) + 24px);
  transition:opacity .45s ease, visibility .45s;
}
#splash.gone{opacity:0;visibility:hidden;pointer-events:none}

.splash-logo{display:flex;align-items:flex-start;font-family:var(--f-display);font-weight:800;font-size:clamp(42px,13vw,64px);letter-spacing:-.045em;line-height:.9}
.splash-logo .pip{display:block;width:.28em;height:.28em;background:var(--lime);border-radius:3px;margin-top:.06em;margin-left:.03em}

.splash-tag{
  font-family:var(--f-display);font-weight:600;font-size:11px;
  letter-spacing:.42em;color:var(--lime);text-transform:uppercase;
  margin-top:14px;text-align:center;
}

.splash-sub{color:var(--grey);font-size:12.5px;margin-top:22px;text-align:center;max-width:280px;line-height:1.6}

.splash-stats{display:flex;gap:34px;margin-top:44px}
.splash-stats > div{text-align:center}
.splash-stats b{display:block;font-family:var(--f-display);font-weight:800;font-size:26px;color:var(--lime);line-height:1}
.splash-stats span{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:7px}

.btn-enter{
  margin-top:52px;
  width:100%;max-width:320px;height:54px;
  background:var(--lime);color:var(--black);
  border:0;border-radius:var(--r-pill);
  font-family:var(--f-display);font-weight:800;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;
  transition:transform .12s, filter .12s;
}
.btn-enter:active{transform:scale(.97);filter:brightness(.92)}
.btn-enter svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

.splash-legal{
  position:absolute;bottom:calc(var(--safe-b) + 18px);left:0;right:0;
  text-align:center;font-size:10px;color:#4A4F55;padding:0 28px;line-height:1.5;
}

/* ============ HEADER ============ */
.hdr{
  position:sticky;top:0;z-index:40;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding-top:var(--safe-t);
}
.hdr-row{
  height:var(--hdr-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
}
.hdr-logo{display:flex;align-items:flex-start;font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:-.04em;color:var(--white)}
.hdr-logo .pip{display:block;width:.28em;height:.28em;background:var(--lime);border-radius:2px;margin-top:.06em;margin-left:.02em}

.hdr-actions{display:flex;gap:8px;align-items:center}

.icon-btn{
  width:38px;height:38px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line-2);
  display:grid;place-items:center;cursor:pointer;
  color:var(--white);transition:background .15s;
}
.icon-btn:active{background:var(--line-2)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ticker */
.ticker{
  overflow:hidden;background:var(--lime);
  height:30px;display:flex;align-items:center;
}
.ticker-track{
  display:inline-flex;gap:26px;white-space:nowrap;
  padding-left:16px;
  animation:marquee 48s linear infinite;
  font-family:var(--f-mono);font-size:11.5px;font-weight:700;color:var(--black);
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-track .up{color:#0B7A00}
.ticker-track .down{color:#A8002E}

/* ============ VIEWS ============ */
main{padding-bottom:18px}
.view{display:none;animation:fade .22s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.sec{padding:0 16px;margin-top:24px}

.lbl{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-bottom:11px;
}

h2{
  font-family:var(--f-display);font-weight:800;
  font-size:20px;margin:0 0 14px;letter-spacing:-.03em;
  text-transform:uppercase;
}

/* ============ CARD ============ */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
}

/* currency row */
.mrow{
  display:flex;align-items:center;gap:13px;
  padding:15px 16px;
  border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .15s;
}
.mrow:last-child{border-bottom:0}
.mrow:active{background:var(--surface-2)}

.coin{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:12px;
  letter-spacing:-.02em;
}
.coin.xau{background:var(--lime);color:var(--black)}
.coin.btc{background:#F7931A;color:var(--black)}
.coin.oil{background:var(--blue);color:var(--white)}

.mrow .nm{flex:1;min-width:0}
.mrow .nm b{display:block;font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:-.01em}
.mrow .nm small{display:block;color:var(--grey);font-size:11.5px;margin-top:2px}

.mrow .px{text-align:right}
.mrow .px b{display:block;font-family:var(--f-mono);font-weight:600;font-size:15px}
.mrow .px small{display:block;font-family:var(--f-mono);font-size:11.5px;font-weight:600;margin-top:3px}
.px .u{color:#7BC400}
.px .d{color:var(--red)}

/* ============ MARKET PILLS ============ */
.mpills{display:flex;gap:8px;padding:0 16px;overflow-x:auto;scrollbar-width:none;margin-top:16px}
.mpills::-webkit-scrollbar{display:none}
.mpill{
  flex:none;height:36px;padding:0 18px;
  border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line-2);
  color:var(--grey-2);
  font-family:var(--f-display);font-weight:700;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;transition:.15s;
  display:flex;align-items:center;gap:7px;
}
.mpill.on{background:var(--lime);border-color:var(--lime);color:var(--black)}

/* ============ PRICE BLOCK ============ */
.ph{display:flex;align-items:center;gap:10px;padding:16px 16px 0}
.ph .nm{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:uppercase}
.livetag{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  color:var(--lime);border:1px solid var(--lime-dim);border-radius:var(--r-pill);
  padding:3px 9px;
}
.livetag i{width:5px;height:5px;border-radius:50%;background:var(--lime);animation:pulse 1.6s infinite}
.livetag.demo{color:var(--grey);border-color:var(--line-2)}
.livetag.demo i{background:var(--grey);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.bigrow{display:flex;align-items:flex-end;gap:12px;padding:10px 16px 0}
.big{font-family:var(--f-mono);font-weight:700;font-size:32px;letter-spacing:-.02em;line-height:1}
.arrow{font-family:var(--f-mono);font-weight:700;font-size:14px;padding-bottom:4px}
.arrow.u{color:#7BC400}
.arrow.d{color:var(--red)}

#spark{width:100%;height:64px;display:block;margin-top:8px}

.trendpill{
  display:inline-block;margin:4px 16px 0;
  font-size:11px;color:var(--grey);
  font-family:var(--f-display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.trendpill b{color:var(--lime)}

/* range */
.range{padding:14px 16px 18px}
.rh{display:flex;justify-content:space-between;margin-bottom:8px}
.label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-weight:600}
.rbar{position:relative;height:6px;border-radius:3px;background:var(--line);overflow:visible}
.rbar .f{position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg,var(--red),var(--lime))}
.rbar .k{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--white);border:2.5px solid var(--black);transform:translate(-50%,-50%)}
.rl{display:flex;justify-content:space-between;margin-top:8px}
.rl span{font-size:10.5px;color:var(--grey)}
.rl b{color:var(--white)}

/* levels */
.levels{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 16px}
.lv-box{
  background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:13px;
}
.lv-box .label{display:block;margin-bottom:7px}
.lv-box .lv{font-family:var(--f-mono);font-size:16px;font-weight:700}
.lv-box small{display:block;font-size:10.5px;color:var(--grey);margin-top:4px}

/* ============ SEGMENTS ============ */
.seg{
  display:flex;gap:6px;padding:4px;
  background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-pill);margin:0 auto;
}
.seg button{
  flex:1;height:34px;border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--grey-2);
  font-family:var(--f-display);font-weight:700;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  transition:.15s;white-space:nowrap;padding:0 10px;
}
.seg button[aria-pressed="true"]{background:var(--lime);color:var(--black)}

/* ============ SIGNAL ZONES ============ */
.zones{display:flex;flex-direction:column}
.zone{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.zone:last-child{border-bottom:0}
.zone .side{
  width:46px;height:46px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:10px;
  letter-spacing:.06em;
}
.side.buy{background:var(--lime);color:var(--black)}
.side.sell{background:var(--red);color:var(--white)}
.zone .zi{flex:1;min-width:0}
.zone .zi b{display:block;font-family:var(--f-mono);font-size:14px;font-weight:600}
.zone .zi small{display:block;font-size:11px;color:var(--grey);margin-top:3px}
.zone .zp{text-align:right}
.zone .zp b{display:block;font-family:var(--f-mono);font-size:13px;font-weight:700}
.zone .zp small{font-size:10px;color:var(--grey)}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px;margin-bottom:12px}
.stat{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px;
}
.stat .label{display:block;margin-bottom:7px}
.stat b{font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.stat b.g{color:var(--lime)}

/* timeframe grid */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tf{
  background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:10px 8px;text-align:center;
}
.tf .label{font-size:9.5px;display:block;margin-bottom:5px}
.tf b{font-family:var(--f-display);font-weight:800;font-size:11px;letter-spacing:.03em}
.tf.bull b{color:#7BC400}
.tf.bear b{color:var(--red)}
.tf.flat b{color:var(--grey)}

/* key levels */
.kl{display:flex;flex-direction:column}
.klrow{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.klrow:last-child{border-bottom:0}
.klrow span{font-size:12.5px;color:var(--grey-2)}
.klrow b{font-family:var(--f-mono);font-size:13.5px;font-weight:600}

/* ============ CHART ============ */
.ch{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 0}
.ch b{font-family:var(--f-display);font-weight:800;font-size:16px;letter-spacing:.02em;text-transform:uppercase}
.cm{
  display:flex;gap:10px;padding:8px 16px 0;
  font-family:var(--f-mono);font-size:10px;
  flex-wrap:nowrap;overflow:hidden;
}
.cm span{color:var(--grey)}
.cm b{font-weight:600}
.cm .u{color:#7BC400}
.cm .d{color:var(--red)}

.tfs{display:flex;gap:7px;padding:14px 16px}
.tfs button{
  flex:1;height:32px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line-2);
  color:var(--grey-2);
  font-family:var(--f-mono);font-size:11px;font-weight:700;
  cursor:pointer;transition:.15s;
}
.tfs button.on{background:var(--lime);border-color:var(--lime);color:var(--black)}

#candles{width:100%;height:300px;display:block;border-radius:0 0 var(--r-lg) var(--r-lg)}

/* timeframe chips — 7 butang, boleh scroll */
.tfs{display:flex;gap:4px;padding:12px 14px;overflow-x:auto;scrollbar-width:none}
.tfs::-webkit-scrollbar{display:none}
.tfs button{
  flex:1 1 0;min-width:0;height:30px;padding:0 4px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line-2);
  color:var(--grey-2);
  font-family:var(--f-mono);font-size:10px;font-weight:700;
  cursor:pointer;transition:.15s;
}
.tfs button.on{background:var(--lime);border-color:var(--lime);color:var(--black)}

/* ============ NEWS ============ */
.next{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;margin:0 16px 14px;
}
.next b{display:block;font-family:var(--f-display);font-weight:800;font-size:15px;margin-top:5px;letter-spacing:-.01em}
.cd{
  font-family:var(--f-mono);font-size:15px;font-weight:700;
  color:var(--lime);
  background:var(--lime-soft);
  border:1px solid var(--lime-dim);
  border-radius:var(--r-sm);padding:8px 12px;
}

.news{display:flex;flex-direction:column}
.nitem{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.nitem:last-child{border-bottom:0}
.imp{
  width:34px;height:34px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:10px;
}
.imp.h{background:var(--red);color:var(--white)}
.imp.m{background:#B8860B;color:var(--white)}
.imp.l{background:var(--line-2);color:var(--grey-2)}
.nbody{flex:1;min-width:0}
.nbody b{display:block;font-size:13px;font-weight:600;line-height:1.35}
.nbody small{display:block;font-size:11px;color:var(--grey);margin-top:4px;font-family:var(--f-mono)}

/* ============ TABBAR ============ */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:rgba(10,10,10,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
}
.tabbar nav{
  height:var(--tab-h);
  display:grid;grid-template-columns:repeat(5,1fr);
  align-items:center;
}
.tabbar button{
  background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--grey);height:100%;position:relative;
  transition:color .15s;
}
.tabbar button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabbar button span{font-family:var(--f-display);font-weight:600;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase}
.tabbar button[aria-selected="true"]{color:var(--lime)}
.tabbar button[aria-selected="true"]::before{
  content:"";position:absolute;top:0;width:26px;height:3px;
  background:var(--lime);border-radius:0 0 3px 3px;
}

/* ============ MISC ============ */
.disclaimer{
  margin:26px 16px 0;padding:14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);
  font-size:10.5px;color:var(--grey);line-height:1.55;
}
.disclaimer b{color:var(--grey-2)}

/* focus ring for a11y */
button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}


/* =========================================================
   SIGNAL FEED — elemen utama app
   ========================================================= */

.feed-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:18px 16px 12px;
}
.feed-count{
  font-family:var(--f-display);font-weight:800;
  font-size:22px;letter-spacing:-.03em;margin-top:4px;
  color:var(--white);
}
.feed-count b{color:var(--lime)}

.feed{display:flex;flex-direction:column;gap:12px;padding:0 16px}

/* ---- kad signal ---- */
.sig{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
}
.sig.new{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime), 0 0 28px -8px rgba(206,250,5,.45)}
.sig.hit{opacity:.62}

/* jalur sisi buy/sell */
.sig::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
}
.sig.buy::before{background:var(--lime)}
.sig.sell::before{background:var(--red)}

.sig-top{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px 12px 20px;
  border-bottom:1px solid var(--line);
}
.sig-top .sym{
  font-family:var(--f-display);font-weight:800;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;
}
.sig-top .tf{
  font-family:var(--f-mono);font-size:10px;font-weight:700;
  color:var(--grey);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:3px 8px;letter-spacing:.05em;
}
.sig-top .ago{
  margin-left:auto;font-family:var(--f-mono);font-size:10.5px;color:var(--grey);
}

/* badge BUY / SELL besar */
.dir{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-display);font-weight:800;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:5px 12px;
}
.dir.buy{background:var(--lime);color:var(--black)}
.dir.sell{background:var(--red);color:var(--white)}
.dir svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* grid harga entry / sl / tp */
.sig-prices{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;
  background:var(--line);
  border-bottom:1px solid var(--line);
}
.pcell{
  background:var(--surface);
  padding:13px 14px 14px;
  text-align:center;
}
.pcell .lbl-sm{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey);margin-bottom:6px;
}
.pcell b{
  display:block;font-family:var(--f-mono);font-weight:700;
  font-size:15px;letter-spacing:-.02em;
}
.pcell.entry b{color:var(--white)}
.pcell.sl b{color:var(--red)}
.pcell.tp b{color:var(--lime)}

/* footer kad */
.sig-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 12px 20px;
}
.sig-foot .meta{display:flex;gap:14px;align-items:center}
.sig-foot .meta span{
  font-family:var(--f-mono);font-size:10.5px;color:var(--grey);
}
.sig-foot .meta b{color:var(--grey-2);font-weight:600}

.rr{
  font-family:var(--f-display);font-size:10px;font-weight:600;
  color:var(--grey-2);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:4px 10px;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
}

/* status pill */
.st{
  font-family:var(--f-display);font-weight:800;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:4px 10px;
}
.st.open{background:var(--lime-soft);color:var(--lime);border:1px solid var(--lime-dim)}
.st.tp{background:var(--lime);color:var(--black)}
.st.sl{background:var(--red-soft);color:var(--red);border:1px solid #5A1020}

/* bar progres ke TP */
.prog{
  height:3px;background:var(--line);position:relative;overflow:hidden;
}
.prog i{
  position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,var(--lime-dim),var(--lime));
  transition:width .5s ease;
}
.sig.sell .prog i{background:linear-gradient(90deg,#8A0A2E,var(--red))}

/* empty-ish shimmer untuk "baru masuk" */
@keyframes flashIn{
  0%{box-shadow:0 0 0 1px var(--lime),0 0 34px -4px rgba(206,250,5,.7)}
  100%{box-shadow:0 0 0 1px var(--lime),0 0 28px -8px rgba(206,250,5,.45)}
}
.sig.new{animation:flashIn 1.4s ease-out}

/* closed row */
.crow{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--line);
}
.crow:last-child{border-bottom:0}
.crow .sym{
  font-family:var(--f-display);font-weight:700;font-size:12.5px;
  letter-spacing:.03em;text-transform:uppercase;min-width:44px;
}
.crow .side{
  width:38px;height:26px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:9px;letter-spacing:.05em;
}
.crow .res{
  margin-left:auto;font-family:var(--f-mono);font-size:13px;font-weight:700;
}
.crow .res.win{color:var(--lime)}
.crow .res.loss{color:var(--red)}
.crow small{font-family:var(--f-mono);font-size:10.5px;color:var(--grey)}


/* ===== chart tools + gesture ===== */

.chart-tools button{
  width:28px;height:28px;border-radius:50%;
  background:rgba(14,14,14,.94);border:1px solid var(--line-2);
  display:grid;place-items:center;cursor:pointer;
  color:var(--grey-2);transition:.15s;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.chart-tools button:active{background:var(--lime);border-color:var(--lime);color:#000}
.chart-tools svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

#candles{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
#candles:active{cursor:grabbing}

.chart-hint{
  margin:0;padding:8px 16px 14px;
  font-size:10px;color:var(--grey);text-align:center;
  letter-spacing:.03em;
}


/* ===== chart ala Traxa ===== */
.mseg{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:16px 16px 0;
}
.mseg .mpill{
  height:44px;padding:0 10px;
  border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line-2);
  color:var(--grey-2);font-family:var(--f-display);font-weight:700;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;transition:.15s;
}
.mseg .mpill::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;opacity:.5;
}
.mseg .mpill.on{
  background:linear-gradient(180deg,rgba(227,188,87,.22),rgba(227,188,87,.08));
  border-color:var(--gold);color:var(--gold);
}
.mseg .mpill.on::before{opacity:1;box-shadow:0 0 8px var(--gold)}

/* REASON bar */
.reason{
  display:flex;align-items:center;gap:8px;
  margin:12px 16px 0;
  padding:9px 12px;
  background:rgba(227,188,87,.06);
  border:1px solid rgba(227,188,87,.28);
  border-radius:var(--r-pill);
}
.reason .r-dot{
  width:22px;height:13px;border-radius:7px;
  background:var(--gold);position:relative;flex:none;
}
.reason .r-dot::after{
  content:"";position:absolute;left:2px;top:2px;
  width:9px;height:9px;border-radius:50%;background:#000;
}
.reason b{
  font-family:var(--f-display);font-weight:800;font-size:9.5px;
  letter-spacing:.13em;color:var(--gold);flex:none;
}
.reason .r-txt{
  font-size:10.5px;color:var(--grey-2);margin-left:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.chart-card{margin:12px 16px}

/* card signal: boleh tekan */
.sig{cursor:pointer;transition:transform .12s}
.sig:active{transform:scale(.985)}

/* tambah warna emas */
:root{--gold:#E3BC57;--gold-dim:#8A7232}


/* ============ TABBAR kemas — 5 item ============ */
.tabbar nav{
  height:var(--tab-h);
  display:grid;grid-template-columns:repeat(5,1fr);
  align-items:stretch;padding:0 4px;
}
.tabbar button{
  background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#5C6168;position:relative;padding:6px 0 0;
  transition:color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.tabbar button svg{
  width:21px;height:21px;
  stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s ease;
}
.tabbar button span{
  font-family:var(--f-display);font-weight:600;font-size:9px;
  letter-spacing:.04em;text-transform:uppercase;
  transition:color .18s;
}
.tabbar button:active svg{transform:scale(.9)}

.tabbar button[aria-selected="true"]{color:var(--gold)}
.tabbar button[aria-selected="true"] svg{stroke-width:2.2}
.tabbar button[aria-selected="true"]::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:22px;height:2.5px;background:var(--gold);
  border-radius:0 0 3px 3px;
  box-shadow:0 0 10px rgba(227,188,87,.6);
}

/* ============ NEWS ============ */
.nitem{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);align-items:center}
.nitem:last-child{border-bottom:0}
.imp{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:9.5px;
}
.imp.h{background:var(--red);color:#fff}
.imp.m{background:#B8860B;color:#fff}
.imp.l{background:var(--line-2);color:var(--grey-2)}
.nbody{flex:1;min-width:0}
.nbody b{display:block;font-size:12.5px;font-weight:600;line-height:1.35}
.nbody small{display:block;font-size:10.5px;color:var(--grey);margin-top:3px;font-family:var(--f-mono)}

.next{display:flex;align-items:center;justify-content:space-between;padding:16px;margin:16px}
.next b{display:block;font-family:var(--f-display);font-weight:800;font-size:14px;margin-top:5px}
.cd{
  font-family:var(--f-mono);font-size:14px;font-weight:700;color:var(--gold);
  background:rgba(227,188,87,.1);border:1px solid rgba(227,188,87,.35);
  border-radius:var(--r-sm);padding:8px 12px;
}

/* ============ PROFILE ============ */
.prof-head{display:flex;align-items:center;gap:14px;padding:22px 16px 18px}
.avatar-lg{
  width:58px;height:58px;border-radius:50%;flex:none;
  background:linear-gradient(145deg,rgba(227,188,87,.28),rgba(227,188,87,.08));
  border:1.5px solid var(--gold);
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:24px;color:var(--gold);
}
.prof-id b{display:block;font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:-.02em}
.prof-id small{display:block;font-size:11px;color:var(--grey);margin-top:3px}

.prof-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin:0 16px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.prof-stats > div{background:var(--surface);padding:14px 8px;text-align:center}
.prof-stats b{display:block;font-family:var(--f-display);font-weight:800;font-size:17px;color:var(--gold)}
.prof-stats span{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-top:4px}

.list .prow{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;border-bottom:1px solid var(--line);
}
.list .prow:last-child{border-bottom:0}
.list .prow span{font-size:12.5px;color:var(--grey-2)}
.list .prow b{font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--white)}


/* ============ TOAST notifikasi ============ */
.toast{
  position:fixed;top:calc(var(--safe-t) + 96px);left:12px;right:12px;z-index:9999;
  background:rgba(14,14,16,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:0 12px 40px rgba(0,0,0,.75);
  animation:toastIn .32s cubic-bezier(.2,.9,.3,1.2);
  cursor:pointer;
}
.toast.buy{border-left:3px solid var(--lime)}
.toast.sell{border-left:3px solid var(--red)}
.toast.out{animation:toastOut .28s ease forwards}

@keyframes toastIn{from{opacity:0;transform:translateY(-16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-14px) scale(.97)}}

.toast-h{display:flex;align-items:center;gap:8px}
.toast-h b{
  font-family:var(--f-display);font-weight:800;font-size:12px;
  letter-spacing:.03em;color:var(--white);flex:1;
}
.t-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  animation:pulse 1.4s infinite;
}
.toast.buy .t-dot{background:var(--lime);box-shadow:0 0 10px var(--lime)}
.toast.sell .t-dot{background:var(--red);box-shadow:0 0 10px var(--red)}

.t-x{
  background:none;border:0;color:var(--grey);font-size:18px;
  line-height:1;cursor:pointer;padding:0 2px;
}
.toast-b{
  margin-top:7px;font-family:var(--f-mono);font-size:11px;
  line-height:1.6;color:var(--grey-2);white-space:pre-line;
}

/* bell aktif */
.icon-btn.on{
  background:rgba(227,188,87,.14);
  border-color:var(--gold);
  color:var(--gold);
}


/* ============ WHY / REASON panel ============ */
.why{
  padding:12px 16px 10px 20px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
.why-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.why-h b{
  flex:1;font-family:var(--f-display);font-weight:700;
  font-size:11.5px;letter-spacing:-.01em;color:var(--white);
}

.grade{
  width:22px;height:22px;border-radius:6px;flex:none;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:11px;
}
.grade.gA{background:var(--lime);color:#000}
.grade.gB{background:rgba(43,245,160,.2);color:#2BF5A0;border:1px solid rgba(43,245,160,.5)}
.grade.gC{background:rgba(227,188,87,.18);color:var(--gold);border:1px solid rgba(227,188,87,.5)}
.grade.gD{background:rgba(232,20,84,.18);color:var(--red);border:1px solid rgba(232,20,84,.5)}

.why-sc{
  font-family:var(--f-mono);font-size:10.5px;font-weight:700;
  color:var(--grey-2);
}

.why-l{display:flex;flex-direction:column;gap:5px}
.wl{
  display:flex;align-items:flex-start;gap:7px;
  font-size:10.5px;line-height:1.45;color:var(--grey-2);
}
.wl i{
  width:5px;height:5px;border-radius:50%;flex:none;margin-top:5px;
  background:var(--grey);
}
.wl b{
  font-family:var(--f-display);font-weight:700;font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--grey);
  min-width:62px;flex:none;padding-top:1px;
}
.wl.good i{background:var(--lime);box-shadow:0 0 6px var(--lime)}
.wl.good b{color:var(--lime)}
.wl.bad i{background:var(--red);box-shadow:0 0 6px var(--red)}
.wl.bad b{color:var(--red)}
.wl.key i{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.wl.key b{color:var(--gold)}
.wl.key{color:var(--white)}


/* ============ reason panel bawah chart ============ */
.rbox{
  display:none;
  margin:12px 16px 0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:14px 16px;
}
.rbox.on{display:block}

.rb-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.rb-grade{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:13px;
}
.rb-grade.gA{background:var(--lime);color:#000}
.rb-grade.gB{background:rgba(43,245,160,.2);color:#2BF5A0;border:1px solid rgba(43,245,160,.5)}
.rb-grade.gC{background:rgba(227,188,87,.18);color:var(--gold);border:1px solid rgba(227,188,87,.5)}
.rb-grade.gD{background:rgba(232,20,84,.18);color:var(--red);border:1px solid rgba(232,20,84,.5)}

.rb-title{flex:1;min-width:0}
.rb-head{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:12.5px;letter-spacing:-.01em;color:var(--white);
}
.rb-title small{display:block;font-size:10px;color:var(--grey);margin-top:3px}
.rb-score{font-family:var(--f-mono);font-weight:700;color:var(--gold)}

.rb-body{display:flex;flex-direction:column;gap:7px}
.rb-line{
  display:flex;align-items:flex-start;gap:8px;
  font-size:10.5px;line-height:1.5;color:var(--grey-2);
}
.rb-line i{
  width:5px;height:5px;border-radius:50%;flex:none;margin-top:5px;background:var(--grey);
}
.rb-line b{
  font-family:var(--f-display);font-weight:700;font-size:9px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--grey);
  min-width:66px;flex:none;padding-top:2px;
}
.rb-line span{flex:1}
.rb-line.good i{background:var(--lime);box-shadow:0 0 6px var(--lime)}
.rb-line.good b{color:var(--lime)}
.rb-line.bad i{background:var(--red);box-shadow:0 0 6px var(--red)}
.rb-line.bad b{color:var(--red)}
.rb-line.key i{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.rb-line.key b{color:var(--gold)}
.rb-line.key span{color:var(--white)}


/* ============ MTF status bar ============ */
.mtf-state{
  display:flex;align-items:center;gap:7px;
  margin:14px 16px 2px;padding:9px 13px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:10.5px;overflow:hidden;
}
.ms-dot{
  width:7px;height:7px;border-radius:50%;flex:none;background:#555;
}
.mtf-state b{
  font-family:var(--f-display);font-weight:700;font-size:10.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--grey-2);
  white-space:nowrap;
}
.ms-arrow{color:var(--grey);font-size:10px;flex:none}
.ms-note{
  margin-left:auto;font-family:var(--f-mono);font-size:9px;
  color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:52%;
}

.mtf-state.ready{border-color:rgba(206,250,5,.5);background:rgba(206,250,5,.07)}
.mtf-state.ready .ms-dot{background:var(--lime);box-shadow:0 0 9px var(--lime)}
.mtf-state.ready b{color:var(--lime)}
.mtf-state.ready .ms-note{color:var(--lime)}

.mtf-state.wait{border-color:rgba(227,188,87,.42);background:rgba(227,188,87,.06)}
.mtf-state.wait .ms-dot{background:var(--gold);box-shadow:0 0 9px var(--gold)}
.mtf-state.wait b{color:var(--gold)}


/* tools zoom: di dalam chart, bukan tindih chips */
.chart-tools{
  position:absolute;top:150px;left:10px;z-index:5;
  display:flex;flex-direction:row;gap:6px;
}


/* badge SAMPLE untuk dummy */
.sample-tag{
  font-family:var(--f-display);font-weight:800;font-size:8.5px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);
  border:1px solid rgba(227,188,87,.45);
  background:rgba(227,188,87,.1);
  border-radius:20px;padding:2px 7px;
  flex:none;
}