/* z-wealth · merged styles · auto-split */

/* ── BLOCK 1 ── */
:root {
  --bg:#050810; --surface:#0b1120; --surface2:#111827; --border:#1e2d45;
  --accent:#00e5ff; --accent2:#7c3aed; --accent3:#10b981; --accent4:#f59e0b;
  --danger:#ef4444; --text:#e2e8f0; --muted:#64748b;
  --glow:0 0 20px rgba(0,229,255,.15); --glow2:0 0 40px rgba(0,229,255,.3);
  --nav-bg:rgba(11,17,32,.97); --card-shadow:0 4px 24px rgba(0,0,0,.4);
}
[data-theme="light"] {
  --bg:#f0f6ff; --surface:#ffffff; --surface2:#e8f0fb; --border:#c8d8f0;
  --accent:#0070c0; --accent2:#6d28d9; --accent3:#047857; --accent4:#b45309;
  --danger:#c0392b; --text:#0f1e2e; --muted:#5a6a80;
  --glow:0 0 20px rgba(0,112,192,.08); --glow2:0 0 40px rgba(0,112,192,.18);
  --nav-bg:rgba(255,255,255,.97); --card-shadow:0 4px 24px rgba(0,0,0,.07);
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;max-width:100vw}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;min-height:100vh;overflow-x:hidden}
/* Smooth transitions hanya untuk elemen yang membutuhkan */
.stat-card,.card,.modal,.fi,.btn,.btn-primary,.btn-ghost,.btn-del,
.login-box,.btc-badge,.acct-badge,.theme-toggle,
nav,.nav-topstrip,.bottom-nav,
.bnav-item,.bnav-label,.bnav-icon,
[data-theme="light"] .stat-card,[data-theme="light"] .card{
  transition:background-color .3s ease,border-color .3s ease,
    color .3s ease,box-shadow .3s ease,opacity .3s ease;
}

/* ── GRID BG ── */
.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,229,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.03) 1px,transparent 1px);
  background-size:60px 60px}

/* ── LOGIN ── */
#login-screen{
  position:fixed;inset:0;z-index:500;
  background:var(--bg);
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  min-height:100dvh;
}
.login-box{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:2rem;width:100%;max-width:460px;
  position:relative;z-index:1;
  box-shadow:0 0 80px rgba(0,0,0,.6);
}
.login-logo{font-size:2rem;font-weight:800;color:var(--accent);text-align:center;letter-spacing:-.03em;text-shadow:var(--glow2);margin-bottom:.3rem}
.login-logo span{color:var(--text)}
.login-tagline{text-align:center;color:var(--muted);font-size:.8rem;margin-bottom:1.5rem;line-height:1.5}
.ltabs{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:4px;margin-bottom:1.5rem;gap:2px}
.ltab{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem;text-align:center;padding:.6rem .3rem;border-radius:7px;cursor:pointer;font-size:.8rem;font-weight:600;color:var(--muted);transition:color .2s,background .2s;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.ltab.active{background:var(--accent);color:var(--bg)}

/* seed display */
.seed-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1rem 0;width:100%}
.sw{
  background:var(--bg);border:1.5px solid var(--accent);border-radius:10px;
  padding:.8rem .3rem;text-align:center;
  font-family:'Space Mono',monospace;font-size:.9rem;font-weight:700;
  color:var(--accent);position:relative;
  box-shadow:var(--glow);min-height:54px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;word-break:break-word;
}
.sw-num{position:absolute;top:3px;left:5px;font-size:.52rem;color:var(--muted);font-weight:400}

/* seed inputs */
.sinput{
  width:100%;min-width:0;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;
  padding:.8rem .3rem;text-align:center;
  font-family:'Space Mono',monospace;font-size:.85rem;color:var(--text);
  outline:none;transition:border-color .2s;box-sizing:border-box;
}
.sinput:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,229,255,.1)}
.sinput::placeholder{color:var(--muted);font-size:.7rem}

.seed-warn{
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);
  border-radius:10px;padding:.9rem 1rem;font-size:.78rem;color:var(--accent4);
  line-height:1.6;margin:.8rem 0;
}
.check-row{display:flex;align-items:center;gap:.7rem;margin:1rem 0;cursor:pointer;user-select:none}
.check-box{
  width:20px;height:20px;border:2px solid var(--border);border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;flex-shrink:0;font-size:.8rem;
}
.check-box.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.check-label{font-size:.8rem;color:var(--muted);line-height:1.4}
.lbtn{
  width:100%;padding:.95rem;border-radius:10px;background:var(--accent);color:var(--bg);
  border:none;font-family:'Inter',sans-serif;font-size:.95rem;font-weight:800;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s;letter-spacing:.02em;margin-top:.5rem;
}
.lbtn:hover:not(:disabled){background:#33eaff;box-shadow:var(--glow2);transform:translateY(-1px)}
.lbtn:disabled{opacity:.45;cursor:not-allowed}
.lbtn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--text);width:100%;padding:.7rem;border-radius:10px;font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s;margin-bottom:.5rem}
.lbtn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.lerr{color:var(--danger);font-size:.8rem;text-align:center;margin:.5rem 0;display:none}
.lloading{display:none;align-items:center;justify-content:center;gap:.7rem;padding:1rem;color:var(--muted);font-size:.84rem}

/* ── NAV ── */
nav{
  position:sticky;top:0;z-index:150;
  background:var(--nav-bg);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;
  padding:0 1rem;gap:.4rem;
}
.nav-logo{font-size:1.1rem;font-weight:800;color:var(--accent);letter-spacing:-.02em;padding:.85rem 0;margin-right:.3rem;white-space:nowrap;text-shadow:var(--glow);transition:color .3s}
.nav-logo span{color:var(--text);transition:color .3s}

/* ── Z-WEALTH LOGO ── */
.nav-logo{position:relative;display:inline-flex;align-items:center}
.zw-z{
  color:var(--accent);
  font-style:italic;
  font-weight:900;
  letter-spacing:-.04em;
  font-size:1.25rem;
  text-shadow:0 0 22px rgba(0,229,255,.7),0 0 6px rgba(0,229,255,.4);
  position:relative;
}
.zw-z::after{
  content:'';
  position:absolute;
  bottom:-3px;left:0;
  width:110%;height:2px;
  background:linear-gradient(90deg,var(--accent),rgba(0,229,255,.15));
  border-radius:2px;
}
.zw-hyphen{
  color:rgba(0,229,255,.4);
  font-weight:300;
  font-size:1rem;
  margin:0 1px;
  letter-spacing:0;
}
.zw-wealth{
  color:#f0f9ff;
  font-weight:800;
  letter-spacing:-.03em;
  font-size:1.25rem;
}
[data-theme="light"] .zw-z{text-shadow:0 0 16px rgba(0,100,180,.5)}
[data-theme="light"] .zw-z::after{background:linear-gradient(90deg,var(--accent),rgba(0,100,180,.1))}
[data-theme="light"] .zw-hyphen{color:rgba(0,100,180,.35)}
[data-theme="light"] .zw-wealth{color:#0f172a}

/* Login logo */
.login-logo .zw-z{font-size:2.4rem;font-style:italic;font-weight:900;color:var(--accent);text-shadow:0 0 40px rgba(0,229,255,.7),0 0 10px rgba(0,229,255,.5);letter-spacing:-.04em;position:relative}
.login-logo .zw-z::after{content:'';position:absolute;bottom:-4px;left:0;width:115%;height:2.5px;background:linear-gradient(90deg,var(--accent),transparent);border-radius:2px}
.login-logo .zw-hyphen{font-size:2rem;color:rgba(0,229,255,.35);font-weight:300;margin:0 2px}
.login-logo .zw-wealth{font-size:2.4rem;font-weight:800;color:#f0f9ff;letter-spacing:-.03em}

/* PDF logo overrides */
.ph-logo-z{color:#00c8ff;font-style:italic;font-weight:900;font-size:20px;letter-spacing:-.02em}
.ph-logo-hyphen{color:rgba(0,200,255,.3);font-weight:300;font-size:18px;margin:0 1px}
.ph-logo-wealth{color:#bae6fd;font-weight:800;font-size:20px;letter-spacing:-.02em}
[data-theme="light"] .nav-logo{color:var(--accent)}
[data-theme="light"] .nav-logo .wealth-text{
  color:#fff;
  background:var(--accent);
  padding:0 .25rem;
  border-radius:4px;
  display:inline-block;
  line-height:1.15;
}
[data-theme="light"] .nav-logo span{color:var(--accent)}
.nav-tabs{display:flex;overflow-x:auto;flex:1;scrollbar-width:none;-ms-overflow-style:none}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tab{padding:.85rem .9rem;cursor:pointer;font-size:.75rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.nav-tab:hover{color:var(--text)}
.nav-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.btc-badge{display:flex;align-items:center;gap:.35rem;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.4rem .7rem;font-family:'Space Mono',monospace;font-size:.7rem;white-space:nowrap}
.live-dot{width:6px;height:6px;background:var(--accent3);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.acct-badge{display:flex;align-items:center;gap:.35rem;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.4rem .7rem;font-size:.7rem;cursor:pointer;transition:background .2s,border-color .2s;white-space:nowrap;max-width:140px;overflow:hidden}
.acct-badge:hover{border-color:var(--accent);color:var(--accent)}
.acct-dot{width:6px;height:6px;background:var(--accent3);border-radius:50%;flex-shrink:0}

/* ── PAGES ── */
.page{display:none;padding:1.2rem;position:relative;z-index:1;max-width:1400px;margin:0 auto}
.page.active{display:block;animation:fadeIn .2s ease}
/* Chat & AI pages need flex layout */
#page-chat.active,#page-ai-chat.active{display:flex !important;flex-direction:column;}
#page-ai-predict.active{display:block !important;}
@keyframes fadeIn{from{opacity:0}to{opacity:1;transform:translateY(0)}}

/* ── COMMON ── */
.ph{margin-bottom:1.2rem}
.ph h1{font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.2rem}
.ph p{color:var(--muted);font-size:.82rem}
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.sec-title{font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:.5rem}
.sec-title::before{content:'';display:block;width:4px;height:14px;background:var(--accent);border-radius:2px}

/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-bottom:1.2rem}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.4rem;transition:all .3s;cursor:default}
.stat-card:hover{border-color:var(--accent);box-shadow:var(--glow);transform:translateY(-2px)}
.slabel{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.4rem}
.sval{font-size:1.7rem;font-weight:800;font-family:'Space Mono',monospace;line-height:1}
.ssub{font-size:.75rem;color:var(--muted);margin-top:.3rem;font-family:'Space Mono',monospace}
.pos{color:var(--accent3)}.neg{color:var(--danger)}.acc{color:var(--accent)}.gld{color:var(--accent4)}

/* ── BUTTONS ── */
.btn{padding:.65rem 1.3rem;border-radius:8px;font-family:'Inter',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.03em;cursor:pointer;border:none;transition:all .2s}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{background:#33eaff;box-shadow:var(--glow2);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:.38rem .8rem;font-size:.75rem}
.btn-del{background:transparent;border:1px solid var(--danger);color:var(--danger);padding:.35rem .7rem;font-size:.72rem;border-radius:6px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:700;transition:all .2s}
.btn-del:hover{background:var(--danger);color:#fff}

/* ── CHART AREA ── */
.chart-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.4rem;margin-bottom:1.4rem}
.chart-container{position:relative;height:240px;margin-top:.8rem}

/* ── TABLE ── */
.tbl-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:600px}
th{background:var(--surface2);padding:.85rem 1.1rem;text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:.85rem 1.1rem;border-bottom:1px solid var(--border);font-family:'Space Mono',monospace;font-size:.8rem;white-space:nowrap}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(0,229,255,.02)}
.badge{display:inline-block;padding:.18rem .55rem;border-radius:4px;font-size:.68rem;font-weight:700;letter-spacing:.04em}
.bg{background:rgba(16,185,129,.15);color:var(--accent3);border:1px solid rgba(16,185,129,.3)}
.br{background:rgba(239,68,68,.15);color:var(--danger);border:1px solid rgba(239,68,68,.3)}
.bb{background:rgba(0,229,255,.1);color:var(--accent);border:1px solid rgba(0,229,255,.2)}

/* ── MODAL ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:300;align-items:center;justify-content:center;padding:1rem}
.overlay.open{display:flex;animation:fadeIn .2s}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2rem;width:100%;max-width:460px;box-shadow:0 0 60px rgba(0,0,0,.5);max-height:90vh;overflow-y:auto}
.modal-title{font-size:1.15rem;font-weight:800;color:var(--accent);margin-bottom:1.4rem}

/* ── FORM ── */
.fg{margin-bottom:1.1rem}
.fl{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.35rem}
.fi,.fs{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.65rem .9rem;color:var(--text);font-family:'Space Mono',monospace;font-size:.85rem;transition:border-color .2s;outline:none}
.fi:focus,.fs:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,229,255,.1)}
.fs option{background:var(--surface2)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.modal-footer{display:flex;gap:.8rem;justify-content:flex-end;margin-top:1.4rem}

/* ── SIMULATION ── */
.sim-results{display:flex;flex-direction:column;gap:1rem}
.sim-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.4rem}
.sim-tbl-wrap{max-height:320px;overflow-y:auto}
.sim-tbl-wrap::-webkit-scrollbar{width:4px}
.sim-tbl-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

input[type=range]{width:100%;-webkit-appearance:none;height:4px;background:var(--border);border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 0 8px rgba(0,229,255,.5)}

/* ── PORTFOLIO ── */
.port-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-bottom:1.4rem}
.port-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.4rem;transition:all .3s}
.port-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.port-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.9rem}
.asset-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(124,58,237,.12));border:1px solid var(--border)}
.asset-name{font-weight:700;font-size:.95rem}
.asset-ticker{font-size:.7rem;color:var(--muted);font-family:'Space Mono',monospace}
.asset-price{font-family:'Space Mono',monospace;font-size:1.3rem;font-weight:700;color:var(--accent);margin-bottom:.2rem}
.pbar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin:.5rem 0}
.pbar-fill{height:100%;border-radius:2px}

/* ── TOAST ── */
/* Toast — positioned via #toast-wrapper, not directly */
.toast {
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(.97);
  transition: transform .32s cubic-bezier(.34,1.3,.64,1), opacity .22s ease;
  font-family: 'Inter', sans-serif;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: break-word;
}
.toast > div {
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}


.sync-bar{position:fixed;top:calc(5rem + env(safe-area-inset-top,0px));right:1rem;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.35rem .7rem;font-size:.68rem;color:var(--muted);z-index:201;display:none;align-items:center;gap:.4rem;font-family:'Space Mono',monospace;box-shadow:0 4px 16px rgba(0,0,0,.3)}
@media(max-width:640px){.sync-bar{top:calc(3rem + env(safe-area-inset-top,0px));right:.75rem}}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--accent3);flex-shrink:0}
.sdot.syncing{background:var(--accent4);animation:pulse 1s infinite}
.sdot.err{background:var(--danger)}

/* ── EMPTY ── */
.empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.empty .emoji{font-size:2.5rem;margin-bottom:.8rem}
.empty h3{font-size:1rem;margin-bottom:.4rem;color:var(--text)}
.empty p{font-size:.82rem}

/* ── TWO COL ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .two-col{grid-template-columns:1fr}
}
@media(max-width:640px){
  .frow{grid-template-columns:1fr}
  .nav-tab{padding:.75rem .6rem;font-size:.68rem;letter-spacing:.01em}
  .page{padding:.9rem}
  .ph h1{font-size:1.5rem}
  .ph{margin-bottom:.9rem}
  .stats-grid{grid-template-columns:1fr 1fr;gap:.6rem}
  .stat-card{padding:1rem}
  .sval{font-size:1.4rem}
  /* Login mobile */
  #login-screen{padding:1rem;align-items:flex-start;padding-top:2rem}
  .login-box{padding:1.4rem;border-radius:16px}
  .login-logo{font-size:1.7rem}
  .login-tagline{font-size:.75rem;margin-bottom:1.2rem}
  .ltabs{margin-bottom:1rem;padding:3px}
  .ltab{font-size:.72rem;padding:.55rem .2rem}
  .seed-warn{font-size:.73rem;padding:.7rem}
  .seed-row{gap:.4rem}
  .sw{font-size:.82rem;min-height:48px;padding:.7rem .2rem}
  .sinput{font-size:.78rem;padding:.7rem .2rem}
  .sinput::placeholder{font-size:.65rem}
  .lbtn{font-size:.88rem;padding:.85rem}
  /* App */
  .chart-container{height:200px}
  .modal{padding:1.4rem;border-radius:14px}
  .port-grid{grid-template-columns:1fr}
  .btc-badge{display:none}
  .acct-badge{max-width:110px}
  nav{padding:0 .75rem;gap:.3rem}
  .nav-logo{font-size:1rem;padding:.75rem 0}
  table{min-width:480px}
  td,th{padding:.65rem .75rem;font-size:.72rem}
}
@media(max-width:400px){
  .stats-grid{grid-template-columns:1fr}
  #login-screen{padding:.75rem}
  .login-box{padding:1.1rem}
  .ltab{font-size:.66rem;padding:.5rem .15rem}
  .seed-row{gap:.3rem}
  .sw,.sinput{font-size:.75rem;padding:.6rem .15rem;min-height:44px}
  .lbtn{font-size:.85rem;padding:.8rem}
}

/* ── LOGOUT BTN ── */
.logout-btn{background:transparent;border:1px solid var(--border);border-radius:8px;padding:.4rem .7rem;font-size:.72rem;color:var(--muted);cursor:pointer;font-family:'Inter',sans-serif;font-weight:600;transition:all .2s;white-space:nowrap;flex-shrink:0}
.logout-btn:hover{border-color:var(--danger);color:var(--danger)}
.export-pdf-btn{background:transparent;border:1px solid rgba(0,229,255,.3);border-radius:8px;padding:.4rem .7rem;font-size:.72rem;color:var(--accent);cursor:pointer;font-family:'Inter',sans-serif;font-weight:700;transition:all .2s;white-space:nowrap;flex-shrink:0}
.export-pdf-btn:hover{background:rgba(0,229,255,.1);border-color:var(--accent);box-shadow:var(--glow)}
@media(max-width:640px){.logout-txt{display:none}.logout-btn{padding:.4rem .55rem;font-size:.82rem}.export-txt{display:none}.export-pdf-btn{padding:.4rem .55rem;font-size:.82rem}}

/* ── BTC LIVE CHART ── */
.btc-chart-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.4rem;margin-bottom:1.4rem}
.btc-chart-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:.8rem;margin-bottom:1rem}
.btc-price-display{display:flex;flex-direction:column;gap:.2rem}
.btc-price-big{font-family:'Space Mono',monospace;font-size:1.9rem;font-weight:700;color:var(--accent4);line-height:1}
.btc-price-idr{font-family:'Space Mono',monospace;font-size:.78rem;color:var(--muted)}
.btc-change-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .7rem;border-radius:6px;font-size:.8rem;font-weight:700;font-family:'Space Mono',monospace;margin-top:.3rem}
.btc-change-badge.up{background:rgba(16,185,129,.15);color:var(--accent3);border:1px solid rgba(16,185,129,.3)}
.btc-change-badge.dn{background:rgba(239,68,68,.15);color:var(--danger);border:1px solid rgba(239,68,68,.3)}
.tf-btns{display:flex;gap:.3rem;flex-wrap:wrap}
.tf-btn{padding:.35rem .7rem;border-radius:6px;font-size:.72rem;font-weight:700;font-family:'Space Mono',monospace;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--muted);transition:all .2s}
.tf-btn:hover{border-color:var(--accent);color:var(--accent)}
.tf-btn.active{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btc-chart-container{position:relative;height:280px;margin-top:.5rem}
.btc-chart-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,17,32,.7);border-radius:8px;font-size:.82rem;color:var(--muted);gap:.6rem;z-index:10}
.btc-ohlc{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--border)}
.btc-ohlc-item{display:flex;flex-direction:column;gap:.1rem}
.btc-ohlc-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.btc-ohlc-val{font-family:'Space Mono',monospace;font-size:.78rem;font-weight:700}
@media(max-width:640px){
  .btc-price-big{font-size:1.5rem}
  .btc-chart-container{height:220px}
  .tf-btn{padding:.3rem .55rem;font-size:.68rem}
  .btc-ohlc{gap:.6rem}
  .btc-ohlc-val{font-size:.72rem}
}

/* ── BOTTOM NAV (mobile only) ── */
.bottom-nav{
  display:none;
  position:fixed;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%);
  z-index:200;
  isolation:auto;
  will-change:opacity;
  width:calc(100% - 32px);
  max-width:480px;
  border-radius:28px;
  border:none;
  padding:0;
  /* Base glass dark - transparan */
  background:rgba(5,8,20,0.28);
  backdrop-filter:blur(52px) saturate(1.8) brightness(1.2);
  -webkit-backdrop-filter:blur(52px) saturate(1.8) brightness(1.2);
  box-shadow:
    0 8px 32px rgba(0,0,0,.25),
    0 2px 8px rgba(0,0,0,.15),
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 1px 0 rgba(255,255,255,.1) inset;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.bottom-nav.bnav-hidden {
  transform: translateX(-50%) translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}
.bnav-items{display:flex;align-items:stretch;border-radius:28px;overflow:visible;padding:5px 8px;gap:2px}
.bnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.5rem .15rem .45rem;gap:.14rem;cursor:pointer;
  color:rgba(255,255,255,0.45);
  transition:color .25s ease, background .25s ease;
  border:none;background:none;
  font-family:'Inter',sans-serif;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  border-radius:22px;
  overflow:visible !important;
}
.bnav-item:active{background:rgba(255,255,255,.06);transform:scale(.95)}
.bnav-item .bnav-icon{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
  will-change:transform;
  overflow:visible;
}
.bnav-item .bnav-label{
  transition:color .25s ease, letter-spacing .25s ease, font-weight .1s;
  font-size:.48rem;letter-spacing:.02em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:clip;
}

.bnav-icon{font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding-top:8px;margin-top:-8px;transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .25s ease;will-change:transform;perspective:200px;overflow:visible}
.bnav-icon svg{stroke:currentColor;transition:stroke .25s;overflow:visible}
.bnav-label{font-size:.52rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;white-space:nowrap;transition:color .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s ease;opacity:.6}

/* ── BNAV ACTIVE STATE ── */
.bnav-item.active{color:var(--accent)}
.bnav-item.active::before{content:'';position:absolute;inset:0;background:rgba(0,229,255,.08);border-radius:22px;border:1px solid rgba(0,229,255,.12)}
.bnav-item.active .bnav-icon{transform:translateY(-3px) scale(1.15);filter:drop-shadow(0 0 8px rgba(0,229,255,.7))}
.bnav-item.active .bnav-label{letter-spacing:.08em;opacity:1;transform:translateY(-1px)}
/* Top nav account+logout strip on mobile */
.nav-topstrip{
  display:none;
  background:var(--nav-bg);
  border-bottom:1px solid var(--border);
  padding:.4rem .75rem;
  align-items:center;justify-content:space-between;gap:.4rem;
  position:relative;z-index:200;
  width:100%;box-sizing:border-box;overflow:hidden;
}
.nav-topstrip-left{min-width:0;flex:1;overflow:hidden;display:flex;align-items:center;gap:.5rem}
@media(max-width:640px){
  .bottom-nav{display:block}
  .nav-tabs{display:none !important}
  .nav-right-desktop{display:none !important}
  .nav-topstrip{display:flex}
  nav{padding:0 1rem;min-height:44px}
  .nav-logo{font-size:1rem;padding:.7rem 0}
  #app .page:not(#page-chat):not(#page-ai-chat):not(#page-ai-predict){padding-bottom:calc(10rem + env(safe-area-inset-bottom,0)) !important}
  #page-theme, #page-alerts { padding-bottom: calc(10rem + env(safe-area-inset-bottom,0)) !important; }
}
/* Desktop: bottom nav & topstrip hidden, normal nav */
@media(min-width:641px){
  .bottom-nav{display:none !important}
  .nav-topstrip{display:none !important}
  .nav-right-desktop{display:flex !important}
  .nav-tabs{display:flex !important}
}

/* ── SIMULATION NEW ── */
.sim-param-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:1.2rem;overflow:hidden}
.sim-param-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.2rem;background:none;border:none;color:var(--text);
  font-family:'Inter',sans-serif;font-size:.9rem;font-weight:700;cursor:pointer;
  text-align:left;
}
.sim-param-toggle:hover{background:rgba(0,229,255,.04)}
#sim-param-arrow{color:var(--accent);transition:transform .25s;font-size:.8rem}
.sim-param-body{padding:0 1.2rem 1.2rem;border-top:1px solid var(--border)}
.sim-param-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem;margin-top:1rem}
.sim-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1rem}
.sim-sum-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.25rem}
.sim-sum-card.accent{border-color:rgba(0,229,255,.3);background:rgba(0,229,255,.04)}
.sim-sum-card.green{border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.04)}
.sim-sum-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.sim-sum-val{font-family:'Space Mono',monospace;font-size:1rem;font-weight:700;line-height:1.2}
.sim-sum-sub{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--muted)}
@media(max-width:640px){
  .sim-param-grid{grid-template-columns:1fr}
  .sim-summary-grid{grid-template-columns:1fr 1fr}
  .sim-sum-val{font-size:.9rem}
  .sim-param-toggle{padding:.85rem 1rem;font-size:.85rem}
  .sim-param-body{padding:0 1rem 1rem}
}
@media(max-width:400px){
  .sim-summary-grid{grid-template-columns:1fr}
}

/* ══════════ NAVBAR SLIDING ANIMATION ══════════ */
#bnav-indicator{
  position:absolute;top:4px;height:3px;
  background:linear-gradient(90deg, rgba(0,229,255,0.4), var(--accent), rgba(0,229,255,0.4));
  background-size:200% 100%;
  border-radius:0 0 4px 4px;
  box-shadow:0 0 12px rgba(0,229,255,.8), 0 0 4px rgba(0,229,255,.4), 0 2px 16px rgba(0,229,255,.25);
  pointer-events:none;
  transition:left .42s cubic-bezier(.34,1.56,.64,1), width .3s cubic-bezier(.34,1.56,.64,1);
  animation:indicatorShimmer 2s ease infinite;
}
@keyframes indicatorShimmer{
  0%,100%{background-position:0% 0%}
  50%{background-position:100% 0%}
}
/* ══ ACCOUNT MODAL — LIQUID GLASS ══ */
.modal-acct-glass{
  background:rgba(10,16,32,0.55);
  backdrop-filter:blur(48px) saturate(1.8) brightness(1.15);
  -webkit-backdrop-filter:blur(48px) saturate(1.8) brightness(1.15);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 32px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,229,255,0.06) inset,
    0 1px 0 rgba(255,255,255,0.12) inset;
}
[data-theme="light"] .modal-acct-glass{
  background:rgba(240,248,255,0.75);
  backdrop-filter:blur(48px) saturate(2) brightness(1.05);
  -webkit-backdrop-filter:blur(48px) saturate(2) brightness(1.05);
  border:1px solid rgba(186,230,253,0.8);
  box-shadow:
    0 24px 64px rgba(0,80,160,.18),
    0 0 0 1px rgba(255,255,255,0.9) inset;
}
[data-theme="light"] .acct-seed-box{
  background:rgba(224,242,255,0.6)!important;
  border-color:rgba(14,165,233,.2)!important;
}
[data-theme="light"] .acct-stats{
  background:rgba(241,249,255,0.8)!important;
  border-color:rgba(186,230,253,.5)!important;
}
[data-theme="light"] .acct-stat-sep{background:rgba(186,230,253,.6)!important}
[data-theme="light"] .acct-title{color:#0284c7!important}
[data-theme="light"] .acct-title-icon{background:rgba(14,165,233,.1)!important;border-color:rgba(14,165,233,.2)!important;color:#0284c7!important}
[data-theme="light"] .acct-x{background:rgba(0,0,0,.04)!important;border-color:rgba(0,0,0,.08)!important;color:#64748b!important}
.acct-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.3rem}
.acct-title{display:flex;align-items:center;gap:.5rem;font-size:1.05rem;font-weight:800;color:var(--accent);letter-spacing:.02em}
.acct-title-icon{width:30px;height:30px;border-radius:8px;background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.2);display:flex;align-items:center;justify-content:center;color:var(--accent)}
[data-theme="light"] .acct-title-icon{background:rgba(0,136,204,.1);border-color:rgba(0,136,204,.25)}
.acct-x{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px;cursor:pointer;color:var(--muted);display:flex;align-items:center;transition:all .2s}
.acct-x:hover{background:rgba(255,255,255,.12);color:var(--text)}
[data-theme="light"] .acct-x{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}

/* Seed box */
.acct-seed-box{
  background:rgba(0,229,255,.04);
  border:1px solid rgba(0,229,255,.12);
  border-radius:14px;padding:1rem 1.1rem;margin-bottom:1rem;
}
[data-theme="light"] .acct-seed-box{
  background:rgba(0,136,204,.04);
  border-color:rgba(0,136,204,.15);
}
.acct-seed-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:.6rem}
.acct-seed-warn{display:flex;align-items:flex-start;gap:.4rem;font-size:.7rem;color:var(--muted);margin-top:.65rem;line-height:1.55}
.acct-seed-warn svg{flex-shrink:0;margin-top:1px;color:var(--accent4)}

/* Stats row */
.acct-stats{display:flex;align-items:stretch;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;margin-bottom:.9rem;overflow:hidden}
[data-theme="light"] .acct-stats{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.07)}
.acct-stat{flex:1;padding:.9rem .5rem;text-align:center}
.acct-stat-sep{width:1px;background:rgba(255,255,255,.07);margin:10px 0}
[data-theme="light"] .acct-stat-sep{background:rgba(0,0,0,.08)}
.acct-stat-l{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:.3rem}
.acct-stat-v{font-size:1.4rem;font-weight:800;font-family:'Space Mono',monospace;color:var(--accent)}

/* Sync */
.acct-sync{font-size:.7rem;color:var(--muted);text-align:center;margin-bottom:.9rem;opacity:.7}

/* Multi-device badge */
.acct-mdev{
  display:flex;align-items:center;gap:.7rem;
  padding:.75rem 1rem;
  background:rgba(16,185,129,.07);
  border:1px solid rgba(16,185,129,.18);
  border-radius:12px;margin-bottom:1.1rem;
}
[data-theme="light"] .acct-mdev{background:rgba(5,150,105,.06);border-color:rgba(5,150,105,.2)}
.acct-mdev-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.6);flex-shrink:0}
.acct-mdev-t{font-size:.76rem;font-weight:700;color:#10b981;margin-bottom:.15rem}
.acct-mdev-s{font-size:.68rem;color:var(--muted);line-height:1.4}

/* Action buttons */
.acct-btns{display:flex;gap:.5rem;margin-top:.25rem}
.acct-btns .btn{
  flex:1;
  background:transparent!important;
  border-width:1.5px!important;
  border-style:solid!important;
  border-radius:13px!important;
  padding:.72rem .3rem!important;
  font-weight:700!important;
  font-size:.78rem!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:.35rem!important;
  cursor:pointer!important;
  transition:background .2s,opacity .2s!important;
  white-space:nowrap;
}
.acct-btns .btn-ghost{
  border-color:rgba(148,163,184,.3)!important;
  color:var(--muted)!important;
}
.acct-btns .btn-ghost:hover{background:rgba(148,163,184,.08)!important}
.acct-btn-seed{border-color:rgba(245,158,11,.5)!important;color:var(--accent4)!important}
.acct-btn-seed:hover{background:rgba(245,158,11,.08)!important}
.acct-btn-out{border-color:rgba(239,68,68,.45)!important;color:var(--danger)!important}
.acct-btn-out:hover{background:rgba(239,68,68,.08)!important}
[data-theme="light"] .acct-btns .btn-ghost{border-color:rgba(100,116,139,.3)!important;color:#334155!important}

/* Settings group (notif + fingerprint) */
.acct-settings-group{
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:1rem;
  background:rgba(255,255,255,.025);
}
.acct-setting-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:.85rem 1rem;
}
.acct-setting-left{display:flex;align-items:center;gap:.7rem;min-width:0;flex:1}
.acct-setting-icon{
  width:34px;height:34px;border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.acct-setting-text{min-width:0}
.acct-setting-title{font-size:.76rem;font-weight:700;color:var(--text);margin-bottom:.15rem}
.acct-setting-sub{font-size:.64rem;color:var(--muted);line-height:1.4}

/* Notif activate button */
.acct-notif-toggle-btn{
  flex-shrink:0;padding:.38rem .9rem;border-radius:8px;
  border:1.5px solid rgba(239,68,68,.45);
  background:rgba(239,68,68,.08);
  color:#ef4444;font-size:.7rem;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .2s;
  white-space:nowrap;
}
.acct-notif-toggle-btn:hover{background:rgba(239,68,68,.15)}

/* Fingerprint toggle switch */
.acct-fp-toggle{
  flex-shrink:0;width:46px;height:26px;border-radius:100px;
  background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.12);
  cursor:pointer;position:relative;transition:all .28s;
}
.acct-fp-knob{
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:#64748b;transition:all .28s;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}


/* ══ BOTTOM NAV IMPROVEMENTS ══ */
.bnav-item svg{width:22px;height:22px}


/* ══════════════════════════════════════════════
   PROPORTIONAL LAYOUT IMPROVEMENTS
══════════════════════════════════════════════ */

/* -- Fix SVG inline display everywhere -- */
svg { display:inline-block; }

/* -- Fix section-label flex display -- */
.section-label {
  display:flex !important;
  align-items:center;
  gap:.35rem;
}

/* -- Fix chat-topbar-title -- */
.chat-topbar-title {
  display:flex !important;
  align-items:center;
  gap:.4rem;
  font-size:.92rem;
  font-weight:800;
}

/* -- Fix chat empty state icon centering -- */
.chat-empty-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.5rem;
}

/* -- Fix news sentiment badge alignment -- */
.news-sentiment-badge {
  display:inline-flex !important;
  align-items:center;
}

/* -- AI chips better layout -- */
.ai-suggestions {
  padding:.55rem 1rem 0;
  gap:.4rem;
}
.ai-chip {
  display:inline-flex !important;
  align-items:center;
  gap:.35rem;
  padding:.38rem .85rem;
}

/* -- pred-verdict icon alignment -- */
#pred-verdict-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  line-height:1;
}
.pred-verdict {
  display:flex;
  align-items:center;
  gap:.6rem;
}

/* -- Fix pred-level-row -- */
.pred-level-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.pred-level-row > span:first-child {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

/* -- Fix toast SVG display -- */
.toast-inner {
  display:flex;
  align-items:center;
  gap:.4rem;
}

/* -- Fix inline SVG alignment in spans -- */
span svg, div svg.inline {
  vertical-align:middle;
  flex-shrink:0;
}

/* -- Page header proportional -- */
.ph h1 {
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* -- Better sim-param-toggle -- */
.sim-param-toggle {
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
}
.sim-param-toggle > span:first-child {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

/* -- Fix news page padding on mobile -- */
@media(max-width:640px) {
  #page-news { padding:.9rem .9rem 5rem; }
  .news-card { padding:.85rem .95rem; }
}

/* ── News Detail Modal ── */
#news-modal-overlay {
  position:fixed;inset:0;z-index:450;
  background:rgba(0,0,0,.82);backdrop-filter:blur(8px);
  display:none;align-items:flex-end;justify-content:center;
}
#news-modal-overlay.open { display:flex; }
#news-modal-box {
  background:var(--surface);border:1px solid var(--border);
  border-radius:22px 22px 0 0;width:100%;max-width:620px;
  max-height:90vh;overflow-y:auto;padding:1.5rem 1.3rem 2.8rem;
  position:relative;animation:nmSlideUp .26s ease;
}
@keyframes nmSlideUp { from{transform:translateY(50px);opacity:0} to{transform:translateY(0);opacity:1} }
#news-modal-close {
  position:absolute;top:1rem;right:1rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:50%;width:34px;height:34px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--muted);
}
#news-modal-close:hover{color:var(--text);border-color:var(--accent);}
.nm-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .7rem;border-radius:100px;font-size:.62rem;font-weight:800;letter-spacing:.04em;margin-bottom:.8rem;}
.nm-title{font-size:1.05rem;font-weight:800;color:var(--text);line-height:1.55;margin-bottom:.65rem;}
.nm-meta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:.66rem;color:var(--muted);margin-bottom:.9rem;}
.nm-body{font-size:.85rem;color:var(--muted);line-height:1.75;white-space:pre-line;margin-bottom:1.2rem;}
.nm-loading{text-align:center;padding:2.5rem 1rem;color:var(--muted);font-size:.84rem;}
.nm-actions{display:flex;gap:.6rem;margin-top:.5rem;}
.nm-btn-search{flex:1;padding:.78rem;border-radius:12px;background:var(--accent);color:var(--bg);border:none;font-weight:700;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;}
.nm-btn-search:hover{background:#33eaff;}
.nm-btn-close{padding:.78rem 1.2rem;border-radius:12px;background:transparent;border:1.5px solid var(--border);color:var(--text);font-weight:600;font-size:.85rem;cursor:pointer;}
.nm-btn-close:hover{border-color:var(--accent);color:var(--accent);}

/* ════════════════════════════════════════
   ONBOARDING SCREEN — z-wealth
   ════════════════════════════════════════ */
#ob-screen {
  position:fixed;inset:0;z-index:9999;
  background:#050810;
  overflow:hidden;
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;
}
#ob-screen.ob-exit {
  animation: obFadeOut .5s ease forwards;
}
@keyframes obFadeOut {
  to { opacity:0; transform:scale(1.04); }
}
#ob-canvas {
  position:absolute;inset:0;pointer-events:none;
}
#ob-splash {
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:1.2rem;
  z-index:2;
}
.ob-logo-wrap {
  position:relative;
  width:120px;height:120px;
  display:flex;align-items:center;justify-content:center;
}
.ob-logo-ring {
  position:absolute;inset:-12px;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:#00e5ff;
  border-right-color:rgba(0,229,255,.3);
  animation:obRingSpin 1.2s linear infinite;
}
.ob-logo-ring2 {
  position:absolute;inset:-20px;
  border-radius:50%;
  border:1px solid transparent;
  border-bottom-color:rgba(0,229,255,.2);
  border-left-color:rgba(124,58,237,.3);
  animation:obRingSpin 2s linear infinite reverse;
}
@keyframes obRingSpin { to { transform:rotate(360deg); } }
.ob-logo-img {
  width:100px;height:100px;
  border-radius:22px;
  box-shadow:0 0 40px rgba(0,229,255,.35),0 0 80px rgba(0,229,255,.12);
  animation:obLogoPop .6s cubic-bezier(.34,1.56,.64,1) forwards;
  opacity:0;
}
@keyframes obLogoPop {
  from { opacity:0; transform:scale(.6); }
  to   { opacity:1; transform:scale(1); }
}
.ob-splash-title {
  font-size:2rem;font-weight:900;letter-spacing:-.04em;
  background:linear-gradient(135deg,#fff 30%,#00e5ff 70%,#7c3aed);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  opacity:0;animation:obFadeUp .5s .4s ease forwards;
}
.ob-splash-sub {
  font-size:.82rem;color:rgba(255,255,255,.4);letter-spacing:.12em;text-transform:uppercase;
  opacity:0;animation:obFadeUp .5s .6s ease forwards;
}
.ob-splash-bar {
  width:160px;height:2px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;
  opacity:0;animation:obFadeUp .3s .8s ease forwards;
}
.ob-splash-bar-fill {
  height:100%;background:linear-gradient(90deg,#00e5ff,#7c3aed);border-radius:99px;
  width:0%;animation:obBarFill 1.5s .9s ease forwards;
}
@keyframes obBarFill { to { width:100%; } }
@keyframes obFadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
#ob-features {
  position:absolute;inset:0;
  display:none;flex-direction:column;
  z-index:2;
}
#ob-features.show { display:flex; }
.ob-slides-wrap {
  flex:1;overflow:hidden;position:relative;
}
.ob-slides {
  display:flex;height:100%;
  transition:transform .45s cubic-bezier(.77,0,.175,1);
}
.ob-slide {
  flex:0 0 100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:2rem 2rem 1rem;
  text-align:center;
  gap:1rem;
}
.ob-illus {
  width:100%;max-width:320px;height:180px;
  position:relative;
  flex-shrink:0;
}
.ob-slide-label {
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(0,229,255,.6);
}
.ob-slide-title {
  font-size:1.55rem;font-weight:900;letter-spacing:-.03em;
  color:#fff;line-height:1.2;
}
.ob-slide-title span {
  background:linear-gradient(135deg,#00e5ff,#7c3aed);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ob-slide-desc {
  font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.65;max-width:300px;
}
.ob-dots {
  display:flex;gap:.45rem;justify-content:center;padding:.8rem;
}
.ob-dot {
  height:4px;border-radius:2px;background:rgba(255,255,255,.15);
  transition:all .3s;cursor:pointer;
}
.ob-dot.active {
  background:#00e5ff;width:24px;
}
.ob-dot:not(.active) { width:8px; }
.ob-nav {
  display:flex;gap:.75rem;padding:.75rem 1.5rem 1.5rem;justify-content:center;
  align-items:center;
}
.ob-btn-skip {
  background:transparent;border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.4);padding:.65rem 1.4rem;border-radius:12px;
  font-size:.8rem;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;
  transition:all .2s;flex:1;max-width:120px;
}
.ob-btn-skip:hover { border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.6); }
.ob-btn-next {
  background:linear-gradient(135deg,#00e5ff,#0099ff);color:#050810;
  border:none;padding:.7rem 2rem;border-radius:12px;
  font-size:.88rem;font-weight:800;cursor:pointer;font-family:'Inter',sans-serif;
  box-shadow:0 8px 32px rgba(0,229,255,.3);
  transition:all .2s;flex:1;max-width:200px;
  display:flex;align-items:center;justify-content:center;gap:.45rem;
}
.ob-btn-next:hover { transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,229,255,.4); }
.ob-btn-next:active { transform:translateY(0); }
.ob-btn-next svg { transition:transform .2s; }
.ob-btn-next:hover svg { transform:translateX(3px); }
#ob-seed-step {
  position:absolute;inset:0;
  display:none;flex-direction:column;
  align-items:center;padding:2rem 1.5rem;
  z-index:2;overflow-y:auto;
}
#ob-seed-step.show { display:flex; }
.ob-step-badge {
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.2);
  border-radius:100px;padding:.3rem .8rem;
  font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#00e5ff;margin-bottom:1rem;margin-top:auto;
}
.ob-step-title {
  font-size:1.5rem;font-weight:900;color:#fff;letter-spacing:-.03em;
  text-align:center;line-height:1.25;margin-bottom:.5rem;
}
.ob-step-desc {
  font-size:.8rem;color:rgba(255,255,255,.45);text-align:center;line-height:1.65;
  max-width:300px;margin-bottom:1.5rem;
}
.ob-seed-cards {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:.6rem;width:100%;max-width:360px;margin-bottom:1.2rem;
}
.ob-seed-card {
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(0,229,255,.25);
  border-radius:14px;padding:.9rem .5rem;
  text-align:center;position:relative;
  opacity:0;transform:translateY(20px);
  transition:all .3s;
}
.ob-seed-card.revealed {
  opacity:1;transform:translateY(0);
  box-shadow:0 0 20px rgba(0,229,255,.12);
}
.ob-seed-card:hover { border-color:rgba(0,229,255,.5); }
.ob-seed-num {
  font-size:.52rem;color:rgba(0,229,255,.5);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem;
}
.ob-seed-word {
  font-family:'Space Mono',monospace;font-size:.92rem;font-weight:700;
  color:#00e5ff;letter-spacing:.02em;
}
.ob-warn-box {
  background:rgba(245,158,11,.06);
  border:1px solid rgba(245,158,11,.25);
  border-radius:12px;padding:.85rem 1rem;
  display:flex;gap:.6rem;align-items:flex-start;
  width:100%;max-width:360px;margin-bottom:1.2rem;
  font-size:.75rem;color:rgba(245,158,11,.8);line-height:1.6;
}
.ob-warn-box svg { flex-shrink:0;margin-top:1px; }
.ob-regen-btn {
  background:transparent;border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.4);padding:.5rem 1rem;
  border-radius:10px;font-size:.75rem;font-weight:600;
  cursor:pointer;font-family:'Inter',sans-serif;
  display:flex;align-items:center;gap:.35rem;
  transition:all .2s;margin-bottom:1rem;
}
.ob-regen-btn:hover { border-color:rgba(0,229,255,.3);color:#00e5ff; }
.ob-proceed-btn {
  width:100%;max-width:360px;
  background:linear-gradient(135deg,rgba(0,180,220,.8),rgba(0,229,255,.7));
  border:none;border-radius:14px;padding:.9rem;
  color:#050810;font-size:.9rem;font-weight:800;
  cursor:pointer;font-family:'Inter',sans-serif;
  box-shadow:0 8px 32px rgba(0,229,255,.25);
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  transition:all .2s;margin-top:auto;margin-bottom:1rem;
}
.ob-proceed-btn:hover { transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,229,255,.35); }
.ob-proceed-btn:disabled { opacity:.4;cursor:not-allowed;transform:none; }
#ob-verify-step {
  position:absolute;inset:0;
  display:none;flex-direction:column;
  align-items:center;padding:2rem 1.5rem;
  z-index:2;
}
#ob-verify-step.show { display:flex; }
.ob-verify-question {
  font-size:1rem;font-weight:700;color:#fff;
  text-align:center;margin-bottom:.5rem;
}
.ob-verify-hint {
  font-size:.75rem;color:rgba(255,255,255,.35);
  text-align:center;margin-bottom:1.5rem;
}
.ob-choices {
  display:grid;grid-template-columns:1fr 1fr;
  gap:.6rem;width:100%;max-width:340px;margin-bottom:1.5rem;
}
.ob-choice {
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);
  border-radius:12px;padding:.9rem .5rem;
  text-align:center;cursor:pointer;
  font-family:'Space Mono',monospace;font-size:.88rem;font-weight:700;
  color:rgba(255,255,255,.7);transition:all .2s;
}
.ob-choice:hover { border-color:rgba(0,229,255,.4);color:#00e5ff;background:rgba(0,229,255,.06); }
.ob-choice.correct {
  border-color:#10b981;color:#10b981;
  background:rgba(16,185,129,.1);
  animation:obChoicePop .3s ease;
}
.ob-choice.wrong {
  border-color:#f43f5e;color:#f43f5e;
  background:rgba(244,63,94,.1);
  animation:obShake .3s ease;
}
@keyframes obChoicePop {
  0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}
}
@keyframes obShake {
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)}
}
.ob-success-wrap {
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  animation:obFadeUp .4s ease forwards;
}
.ob-check-circle {
  width:72px;height:72px;border-radius:50%;
  background:rgba(16,185,129,.12);border:2px solid #10b981;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 40px rgba(16,185,129,.3);
  animation:obCheckPop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes obCheckPop {
  from{transform:scale(0)} to{transform:scale(1)}
}
.ob-success-title {
  font-size:1.2rem;font-weight:800;color:#10b981;
}
.ob-success-sub {
  font-size:.78rem;color:rgba(255,255,255,.4);text-align:center;
}
.ob-enter-btn {
  background:linear-gradient(135deg,#10b981,#059669);
  border:none;border-radius:14px;padding:.9rem 2.5rem;
  color:#fff;font-size:.92rem;font-weight:800;
  cursor:pointer;font-family:'Inter',sans-serif;
  box-shadow:0 8px 32px rgba(16,185,129,.3);
  display:flex;align-items:center;gap:.5rem;
  transition:all .2s;
}
.ob-enter-btn:hover { transform:translateY(-2px);box-shadow:0 12px 40px rgba(16,185,129,.4); }
.ob-chart-bars {
  position:absolute;bottom:10px;left:0;right:0;
  display:flex;align-items:flex-end;gap:8px;
  justify-content:center;height:140px;
  padding:0 20px;
}
.ob-bar {
  flex:1;max-width:36px;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#00e5ff,rgba(0,229,255,.3));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .6s cubic-bezier(.34,1.2,.64,1);
  box-shadow:0 0 12px rgba(0,229,255,.3);
}
.ob-bar.show { transform:scaleY(1); }
.ob-bar-line {
  position:absolute;bottom:10px;left:20px;right:20px;
  height:1px;background:rgba(255,255,255,.07);
}
.ob-chart-avg {
  position:absolute;top:50%;left:20px;right:20px;
  height:1.5px;background:rgba(245,158,11,.5);
  border-radius:1px;
}
.ob-chart-avg::after {
  content:'avg';position:absolute;right:0;top:-10px;
  font-size:.5rem;color:rgba(245,158,11,.7);font-family:'Space Mono',monospace;
}
.ob-donut-wrap {
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.ob-donut-svg {
  width:140px;height:140px;
  animation:obDonutSpin 1.2s ease;
}
@keyframes obDonutSpin {
  from { transform:rotate(-90deg);opacity:0; }
  to   { transform:rotate(0);opacity:1; }
}
.ob-donut-center {
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.1rem;
}
.ob-donut-val {
  font-family:'Space Mono',monospace;font-size:.85rem;font-weight:700;color:#fff;
}
.ob-donut-lbl {
  font-size:.55rem;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.1em;
}
.ob-asset-pills {
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.35rem;
}
.ob-pill {
  display:flex;align-items:center;gap:.4rem;
  font-size:.6rem;color:rgba(255,255,255,.6);
  white-space:nowrap;
}
.ob-pill-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0; }
.ob-chat-wrap {
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:center;gap:.55rem;padding:0 1rem;
}
.ob-chat-bubble {
  max-width:75%;padding:.6rem .85rem;border-radius:14px;
  font-size:.72rem;color:#fff;line-height:1.45;
  opacity:0;transform:translateY(10px);
  transition:all .4s ease;
}
.ob-chat-bubble.show { opacity:1;transform:translateY(0); }
.ob-chat-bubble.left {
  align-self:flex-start;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-bottom-left-radius:4px;
}
.ob-chat-bubble.right {
  align-self:flex-end;
  background:rgba(0,180,220,.35);border:1px solid rgba(0,229,255,.25);
  border-bottom-right-radius:4px;
}
.ob-chat-meta {
  font-size:.52rem;color:rgba(255,255,255,.3);margin-top:.2rem;
  opacity:0;transition:opacity .3s .3s;
}
.ob-chat-bubble.show .ob-chat-meta { opacity:1; }
.ob-ai-wrap {
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:center;gap:.7rem;padding:0 .5rem;
}
.ob-ai-prompt {
  background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.3);
  border-radius:12px;padding:.65rem .85rem;
  font-size:.72rem;color:rgba(255,255,255,.7);
  opacity:0;transform:translateY(8px);transition:all .4s;
}
.ob-ai-prompt.show { opacity:1;transform:translateY(0); }
.ob-ai-response {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:.65rem .85rem;
  font-size:.7rem;color:rgba(255,255,255,.55);line-height:1.6;
  opacity:0;transition:opacity .4s .5s;
}
.ob-ai-response.show { opacity:1; }
.ob-typing-dots {
  display:inline-flex;gap:3px;align-items:center;
}
.ob-typing-dot {
  width:4px;height:4px;border-radius:50%;background:#7c3aed;
  animation:obDotBounce 1s infinite;
}
.ob-typing-dot:nth-child(2){ animation-delay:.15s; }
.ob-typing-dot:nth-child(3){ animation-delay:.3s; }
@keyframes obDotBounce {
  0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-4px)}
}
.ob-security-wrap {
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.8rem;
}
.ob-lock-icon {
  width:72px;height:72px;border-radius:50%;
  background:rgba(0,229,255,.07);border:1.5px solid rgba(0,229,255,.2);
  display:flex;align-items:center;justify-content:center;
  animation:obPulseGlow 2s ease infinite;
}
@keyframes obPulseGlow {
  0%,100%{box-shadow:0 0 20px rgba(0,229,255,.15)}
  50%{box-shadow:0 0 40px rgba(0,229,255,.35)}
}
.ob-device-row {
  display:flex;gap:1rem;
}
.ob-device {
  width:36px;height:58px;border-radius:7px;
  border:1.5px solid rgba(0,229,255,.2);
  background:rgba(0,229,255,.04);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:.4rem;
}
.ob-device-bar {
  width:16px;height:2px;background:rgba(0,229,255,.3);border-radius:1px;
}
.ob-sync-arrow {
  display:flex;align-items:center;
  color:rgba(0,229,255,.4);font-size:1.1rem;
}
.ob-word-pills {
  display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;
  max-width:220px;
}
.ob-word-pill {
  font-family:'Space Mono',monospace;font-size:.62rem;font-weight:700;
  color:#00e5ff;background:rgba(0,229,255,.08);
  border:1px solid rgba(0,229,255,.2);border-radius:6px;
  padding:.2rem .5rem;
  opacity:0;animation:obFadeIn .3s ease forwards;
}
@keyframes obFadeIn { to{opacity:1} }
.ob-swipe-hint {
  position:absolute;bottom:80px;left:50%;transform:translateX(-50%);
  font-size:.62rem;color:rgba(255,255,255,.2);
  display:flex;align-items:center;gap:.3rem;
  pointer-events:none;letter-spacing:.05em;
  animation:obHintFade 2s 1.5s ease forwards;
  opacity:0;
}
@keyframes obHintFade {
  0%{opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{opacity:0}
}

/* ── BLOCK 2 ── */
/* ═══════════════════════════════════════════════════════
   Z-WEALTH · ULTRA POLISH LAYER v2.0
   Pure visual enhancement — zero functional changes
═══════════════════════════════════════════════════════ */

/* ── GLOBAL ANIMATION EASING ── */
:root {
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-in-out-quart: cubic-bezier(.76,0,.24,1);
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-slow: 420ms;
  --duration-xslow: 600ms;
}

/* ── AMBIENT BACKGROUND PARTICLES ── */
.grid-bg {
  background-image:
    linear-gradient(rgba(0,229,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.025) 1px,transparent 1px),
    radial-gradient(ellipse at 20% 50%, rgba(124,58,237,.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0,229,255,.05) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(16,185,129,.04) 0%, transparent 40%);
  background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%, 100% 100%;
  animation: gridDrift 20s ease-in-out infinite alternate;
}
@keyframes gridDrift {
  0%   { transform: translate(0,0); }
  100% { transform: translate(4px,6px); }
}
[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(rgba(0,100,180,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,100,180,.02) 1px,transparent 1px),
    radial-gradient(ellipse at 20% 50%, rgba(109,40,217,.03) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0,70,150,.03) 0%, transparent 50%);
  background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%;
}

/* ── PAGE TRANSITIONS ── */
.page.active {
  animation: pageReveal var(--duration-slow) var(--ease-out-expo) both;
}
@keyframes pageReveal {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── STAT CARDS — STAGGERED REVEAL + GLOW ── */
.stat-card {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-spring),
    border-color var(--duration-base) var(--ease-smooth),
    box-shadow var(--duration-base) var(--ease-smooth),
    background-color .3s ease;
  animation: cardReveal var(--duration-slow) var(--ease-out-expo) both;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,229,255,.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  pointer-events: none;
  border-radius: inherit;
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.06), transparent);
  transition: left .6s var(--ease-out-expo);
  pointer-events: none;
}
.stat-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(0,229,255,.5);
  box-shadow: 0 0 24px rgba(0,229,255,.14), 0 8px 32px rgba(0,0,0,.4), var(--glow);
}
.stat-card:hover::before { opacity: 1; }
.stat-card:hover::after  { left: 150%; }
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.stats-grid .stat-card:nth-child(1) { animation-delay: 60ms; }
.stats-grid .stat-card:nth-child(2) { animation-delay: 120ms; }
.stats-grid .stat-card:nth-child(3) { animation-delay: 180ms; }
.stats-grid .stat-card:nth-child(4) { animation-delay: 240ms; }
.stats-grid .stat-card:nth-child(5) { animation-delay: 300ms; }
.stats-grid .stat-card:nth-child(6) { animation-delay: 360ms; }

/* ── NAV — GLASS + SHIMMER ── */
nav {
  position: sticky; /* PENTING: jangan dioverride dengan transform */
  top: 0;
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(0,229,255,.06), 0 4px 20px rgba(0,0,0,.2);
  transition: background-color .3s ease, box-shadow .3s ease;
}
nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.15), rgba(124,58,237,.1), transparent);
  pointer-events: none;
  z-index: 1;
}
[data-theme="light"] nav::after {
  background: linear-gradient(90deg, transparent, rgba(0,100,200,.12), transparent);
}

/* ── NAV TAB HOVER ── */
.nav-tab {
  position: relative;
  transition: color var(--duration-fast) ease;
}
.nav-tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width var(--duration-base) var(--ease-spring), left var(--duration-base) var(--ease-spring);
  box-shadow: 0 0 8px rgba(0,229,255,.5);
}
.nav-tab:hover::after { width: 80%; left: 10%; }
.nav-tab.active::after { width: 100%; left: 0; }

/* ── BOTTOM NAV — EXTRA POLISH ── */
.bottom-nav {
  transition: transform var(--duration-slow) var(--ease-spring), opacity var(--duration-base) ease;
  background: rgba(5,8,20,0.22);
  backdrop-filter: blur(56px) saturate(2) brightness(1.25);
  -webkit-backdrop-filter: blur(56px) saturate(2) brightness(1.25);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -1px 0 rgba(0,229,255,.04) inset,
    0 12px 40px rgba(0,0,0,.3),
    0 4px 16px rgba(0,0,0,.2);
}
[data-theme="light"] .bottom-nav {
  background: rgba(230,240,255,0.55);
  backdrop-filter: blur(56px) saturate(2.5) brightness(1.1);
  -webkit-backdrop-filter: blur(56px) saturate(2.5) brightness(1.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.8) inset,
    0 12px 40px rgba(0,60,140,.15);
}
.bnav-item {
  transition:
    color var(--duration-base) var(--ease-smooth),
    background var(--duration-base) ease,
    transform var(--duration-fast) var(--ease-spring);
}
.bnav-item:active {
  transform: scale(.88) !important;
  transition-duration: 80ms !important;
}
.bnav-item.active .bnav-icon {
  transform: translateY(-4px) scale(1.2) !important;
  filter: drop-shadow(0 0 10px rgba(0,229,255,.85)) drop-shadow(0 0 4px rgba(0,229,255,.4)) !important;
}

/* ── BUTTONS — ENHANCED ── */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition:
    background var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) ease;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s ease;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:hover::before { left: 100%; }
.btn-primary:active { transform: translateY(0) scale(.97); transition-duration: 80ms; }

.btn-ghost {
  transition: all var(--duration-base) ease;
  position: relative;
  overflow: hidden;
}
.btn-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,229,255,.05), rgba(124,58,237,.05));
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  border-radius: inherit;
}
.btn-ghost:hover::before { opacity: 1; }
.btn-ghost:active { transform: scale(.96); transition-duration: 80ms; }

.lbtn {
  position: relative;
  overflow: hidden;
  transition:
    background var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-base) ease !important;
}
.lbtn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: left .55s ease;
  pointer-events: none;
}
.lbtn:hover:not(:disabled)::before { left: 100%; }
.lbtn:active:not(:disabled) { transform: scale(.97) translateY(1px); transition-duration: 80ms !important; }

/* ── FORM INPUTS — GLOW FOCUS ── */
.fi, .fs, .sinput {
  transition:
    border-color var(--duration-base) ease,
    box-shadow var(--duration-base) ease,
    background-color .3s ease !important;
}
.fi:focus, .fs:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,229,255,.12), 0 0 16px rgba(0,229,255,.08) !important;
}
.sinput:focus {
  box-shadow: 0 0 0 3px rgba(0,229,255,.12), 0 0 16px rgba(0,229,255,.08) !important;
}

/* ── CARDS — GLASS SHIMMER ── */
.card, .chart-wrap, .btc-chart-wrap, .tbl-wrap, .sim-card, .port-card {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-spring),
    border-color var(--duration-base) ease,
    box-shadow var(--duration-base) ease,
    background-color .3s ease !important;
}
.card::before, .chart-wrap::before, .btc-chart-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  pointer-events: none;
}
.port-card:hover {
  transform: translateY(-3px) scale(1.005);
  border-color: rgba(0,229,255,.4);
  box-shadow: 0 0 20px rgba(0,229,255,.1), 0 8px 28px rgba(0,0,0,.4);
}

/* ── MODALS — ANIMATED OPEN/CLOSE ── */
.overlay.open {
  animation: overlayIn var(--duration-base) ease both;
}
@keyframes overlayIn {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(8px); }
}
.overlay.open .modal {
  animation: modalSlide var(--duration-slow) var(--ease-spring) both;
}
@keyframes modalSlide {
  from { opacity: 0; transform: translateY(24px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal {
  position: relative;
  overflow: hidden;
}
.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.3), rgba(124,58,237,.2), transparent);
  pointer-events: none;
}

/* ── TOAST — BOUNCY ── */
.toast {
  transition:
    transform var(--duration-base) var(--ease-spring),
    opacity var(--duration-fast) ease !important;
}
.toast.show {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── TABLE ROWS — HOVER GLOW ── */
tr {
  transition: background var(--duration-fast) ease;
}
tr:hover td {
  background: rgba(0,229,255,.03) !important;
}
[data-theme="light"] tr:hover td {
  background: rgba(0,100,200,.035) !important;
}

/* ── SECTION TITLES — ACCENT BAR GLOW ── */
.sec-title::before {
  animation: barPulse 3s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(0,229,255,.5);
}
@keyframes barPulse {
  0%,100% { opacity: 1; box-shadow: 0 0 8px rgba(0,229,255,.5); }
  50%      { opacity: .7; box-shadow: 0 0 4px rgba(0,229,255,.2); }
}

/* ── LIVE DOT — ENHANCED ── */
.live-dot {
  animation: liveGlow 2s ease-in-out infinite;
}
@keyframes liveGlow {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
  50%      { transform: scale(1.2); box-shadow: 0 0 0 4px rgba(16,185,129,.0); }
}

/* ── BTC BADGE ── */
.btc-badge {
  transition: all var(--duration-base) ease;
}
.btc-badge:hover {
  border-color: rgba(0,229,255,.4);
  box-shadow: 0 0 12px rgba(0,229,255,.1);
}

/* ── BTC PRICE — SUBTLE GLOW ── */
.btc-price-big {
  text-shadow: 0 0 24px rgba(245,158,11,.25), 0 0 8px rgba(245,158,11,.1);
  transition: color var(--duration-base) ease;
}

/* ── SEED WORDS — SHIMMER ── */
.sw {
  transition: all var(--duration-base) ease;
  position: relative;
  overflow: hidden;
}
.sw::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.1), transparent);
  animation: seedShimmer 3s ease-in-out infinite;
}
@keyframes seedShimmer {
  0%   { left: -100%; }
  50%  { left: 150%; }
  100% { left: 150%; }
}

/* ── LOGIN BOX — DEPTH ── */
.login-box {
  position: relative;
  overflow: hidden;
  animation: loginBoxIn var(--duration-xslow) var(--ease-out-expo) both;
}
.login-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.4), rgba(124,58,237,.3), transparent);
  pointer-events: none;
}
.login-box::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,229,255,.04) 0%, transparent 60%);
  pointer-events: none;
}
@keyframes loginBoxIn {
  from { opacity: 0; transform: translateY(32px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── LOGIN SCREEN — AMBIENT ── */
#login-screen {
  background: radial-gradient(ellipse at 30% 20%, rgba(0,229,255,.06) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(124,58,237,.07) 0%, transparent 50%),
              var(--bg);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,229,255,.3), rgba(124,58,237,.3));
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(0,229,255,.6), rgba(124,58,237,.5));
}
* { scrollbar-width: thin; scrollbar-color: rgba(0,229,255,.25) transparent; }

/* ── RANGE SLIDER ── */
input[type=range] {
  transition: opacity var(--duration-fast) ease;
}
input[type=range]:hover { opacity: .9; }
input[type=range]::-webkit-slider-thumb {
  transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) ease;
}
input[type=range]:hover::-webkit-slider-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 14px rgba(0,229,255,.7);
}

/* ── LOGOUT BTN ── */
.logout-btn {
  transition: all var(--duration-base) var(--ease-spring);
}
.logout-btn:hover {
  transform: translateY(-1px);
}
.logout-btn:active { transform: scale(.95); }

/* ── EXPORT BTN ── */
.export-pdf-btn {
  transition: all var(--duration-base) var(--ease-spring);
}
.export-pdf-btn:hover {
  transform: translateY(-1px);
}

/* ── BADGE ── */
.badge {
  transition: all var(--duration-fast) ease;
}

/* ── BTN DEL ── */
.btn-del {
  transition: all var(--duration-fast) ease;
}
.btn-del:hover { transform: scale(1.03); }
.btn-del:active { transform: scale(.95); transition-duration: 60ms; }

/* ── TF BUTTONS (timeframe) ── */
.tf-btn {
  transition: all var(--duration-fast) var(--ease-spring) !important;
  position: relative;
  overflow: hidden;
}
.tf-btn.active {
  box-shadow: 0 0 14px rgba(0,229,255,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.tf-btn:hover:not(.active) {
  transform: translateY(-1px);
}
.tf-btn:active { transform: scale(.93); transition-duration: 60ms !important; }

/* ── LTAB (login tabs) ── */
.ltab {
  transition: all var(--duration-base) var(--ease-smooth) !important;
  position: relative;
  overflow: hidden;
}
.ltab.active {
  box-shadow: 0 2px 12px rgba(0,229,255,.2), inset 0 1px 0 rgba(255,255,255,.15);
}
.ltab:not(.active):hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
}

/* ── ACCT BADGE ── */
.acct-badge {
  transition: all var(--duration-base) var(--ease-spring) !important;
}
.acct-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(0,229,255,.12);
}
.acct-badge:active { transform: scale(.95); transition-duration: 80ms !important; }

/* ── CHECK ROW ── */
.check-box {
  transition: all var(--duration-base) var(--ease-spring) !important;
}
.check-box.on {
  box-shadow: 0 0 10px rgba(0,229,255,.35);
  transform: scale(1.05);
}

/* ── LOADING SPINNER ── */
.lloading {
  gap: .8rem;
}

/* ── THEME TOGGLE ── */
.theme-toggle {
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.theme-toggle:hover {
  transform: none;
}
.theme-toggle:active {
  transform: scale(.95);
  transition-duration: 80ms;
}

/* ── PROGRESS BAR ANIMATION ── */
.pbar-fill {
  animation: barGrow .8s var(--ease-out-expo) both;
}
@keyframes barGrow {
  from { width: 0 !important; }
}

/* ── CHART WRAP SHIMMER ── */
.btc-chart-wrap {
  transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.btc-chart-wrap:hover {
  border-color: rgba(0,229,255,.2);
  box-shadow: 0 0 20px rgba(0,229,255,.06), 0 8px 32px rgba(0,0,0,.3);
}

/* ── MODAL ACCOUNT GLASS ── */
.modal-acct-glass {
  animation: modalSlide var(--duration-slow) var(--ease-spring) both;
}

/* ── ASSET ICON HOVER ── */
.asset-icon {
  transition: all var(--duration-base) var(--ease-spring);
}
.port-card:hover .asset-icon {
  transform: scale(1.1) rotate(-3deg);
  box-shadow: 0 0 16px rgba(0,229,255,.2);
}

/* ── SIM PARAM TOGGLE ── */
.sim-param-toggle {
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.sim-param-toggle:active {
  background: rgba(0,229,255,.06) !important;
}

/* ── TABLE HEADER ── */
th {
  position: relative;
}
th::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.15), transparent);
}

/* ── SECTION REVEAL ANIMATION ── */
.ph {
  animation: sectionReveal var(--duration-slow) var(--ease-out-expo) both;
}
@keyframes sectionReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PORT CARDS STAGGER ── */
.port-card {
  animation: cardReveal var(--duration-slow) var(--ease-out-expo) both;
}
.port-grid .port-card:nth-child(1) { animation-delay: 40ms; }
.port-grid .port-card:nth-child(2) { animation-delay: 100ms; }
.port-grid .port-card:nth-child(3) { animation-delay: 160ms; }
.port-grid .port-card:nth-child(4) { animation-delay: 220ms; }

/* ── Z-WEALTH LOGO — CONTINUOUS PULSE ── */
.zw-z {
  animation: zPulse 4s ease-in-out infinite;
}
@keyframes zPulse {
  0%,100% { text-shadow: 0 0 22px rgba(0,229,255,.7), 0 0 6px rgba(0,229,255,.4); }
  50%      { text-shadow: 0 0 32px rgba(0,229,255,1), 0 0 12px rgba(0,229,255,.6), 0 0 48px rgba(0,229,255,.2); }
}
[data-theme="light"] .zw-z {
  animation: zPulseLight 4s ease-in-out infinite;
}
@keyframes zPulseLight {
  0%,100% { text-shadow: 0 0 16px rgba(0,100,180,.5); }
  50%      { text-shadow: 0 0 24px rgba(0,100,180,.8), 0 0 40px rgba(0,100,180,.2); }
}

/* ── NAV TOPSTRIP ── */
.nav-topstrip {
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: 0 1px 0 rgba(0,229,255,.06);
}

/* ── SYNC BAR ── */
.sync-bar {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: syncSlideIn .3s var(--ease-spring) both;
}
@keyframes syncSlideIn {
  from { opacity: 0; transform: translateY(-8px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── CHART LOADING ── */
.btc-chart-loading {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── FOCUS VISIBLE ── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid rgba(0,229,255,.5);
  outline-offset: 2px;
}

/* ── EMPTY STATE ── */
.empty .emoji {
  animation: emptyBounce 3s ease-in-out infinite;
}
@keyframes emptyBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── WALLET BUTTON HOVER ── */
.wc-ext-btn {
  transition: all var(--duration-base) var(--ease-spring) !important;
}
.wc-ext-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.wc-ext-btn:active { transform: scale(.93) !important; transition-duration: 80ms !important; }

/* ── SELECTION ── */
::selection {
  background: rgba(0,229,255,.2);
  color: var(--text);
}
[data-theme="light"] ::selection {
  background: rgba(0,100,200,.18);
}

/* ── PERFORMANCE ── */
.stat-card, .port-card, .card, .btn, .btn-primary, .btn-ghost, .lbtn, .modal, .bottom-nav {
  will-change: transform;
}

/* ─────────── LIGHT THEME OVERRIDES ─────────── */
[data-theme="light"] .stat-card::before {
  background: linear-gradient(135deg, rgba(0,100,200,.04) 0%, transparent 60%);
}
[data-theme="light"] .stat-card::after {
  background: linear-gradient(90deg, transparent, rgba(0,100,200,.05), transparent);
}
[data-theme="light"] .stat-card:hover {
  box-shadow: 0 0 20px rgba(0,100,200,.1), 0 8px 28px rgba(0,60,140,.1);
  border-color: rgba(0,100,200,.4);
}
[data-theme="light"] .btc-price-big {
  text-shadow: 0 0 20px rgba(180,83,9,.2);
}
[data-theme="light"] .modal::before {
  background: linear-gradient(90deg, transparent, rgba(0,100,200,.2), rgba(109,40,217,.15), transparent);
}
[data-theme="light"] nav::after {
  background: linear-gradient(90deg, transparent, rgba(0,80,200,.12), transparent);
}
[data-theme="light"] .sec-title::before {
  box-shadow: 0 0 8px rgba(0,100,200,.4);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,100,200,.3), rgba(109,40,217,.25));
}
[data-theme="light"] ::selection {
  background: rgba(0,100,200,.2);
}

/* ── BLOCK 3 ── */
/* ══ LANG TOGGLE BUTTON ══ */
#lang-toggle-btn, #lang-toggle-btn-d {
  position: relative;
  overflow: visible;
  transition: background .18s, border-color .18s, transform .13s;
}
#lang-toggle-btn:hover, #lang-toggle-btn-d:hover {
  background: rgba(0,229,255,.13) !important;
  border-color: rgba(0,229,255,.4) !important;
  transform: translateY(-1px);
}
#lang-toggle-btn:active, #lang-toggle-btn-d:active {
  transform: scale(.93) !important;
}

/* ══ TOAST NOTIF ══ */
#lang-toast-wrap {
  position: fixed;
  bottom: 5.8rem;
  left: 1rem;
  right: 1rem;
  z-index: 999999;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
#lang-toast {
  transform: translateY(14px) scale(.94);
  background: rgba(8,14,28,.97);
  border: 1px solid rgba(0,229,255,.3);
  border-radius: 14px;
  padding: .5rem 1.1rem;
  font-size: .77rem;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--accent, #00e5ff);
  display: flex;
  align-items: center;
  gap: .45rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease, transform .28s cubic-bezier(.34,1.4,.64,1);
  backdrop-filter: blur(16px);
  white-space: normal;
  word-break: break-word;
  max-width: 420px;
  box-shadow: 0 8px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(0,229,255,.08) inset;
}
#lang-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ══ FLASH ANIMATION SAAT GANTI BAHASA ══ */
@keyframes lang-flash {
  0%   { opacity:1; }
  25%  { opacity:0; transform:translateY(-4px); }
  55%  { opacity:0; transform:translateY(4px); }
  100% { opacity:1; transform:translateY(0); }
}
.lang-switching [data-i18n],
.lang-switching .bnav-label,
.lang-switching .nav-tab,
.lang-switching h1,
.lang-switching .slabel,
.lang-switching .modal-title {
  animation: lang-flash .38s ease forwards;
}

/* ── BLOCK 4 ── */
/* Unread badge di bnav icon */
.bnav-chat-badge {
  position:absolute;
  top:2px;right:50%;
  transform:translateX(calc(50% + 8px));
  min-width:18px;height:18px;
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;border-radius:100px;
  font-size:.55rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;
  border:2px solid rgba(5,8,20,0.5);
  box-shadow:0 2px 8px rgba(239,68,68,.5);
  opacity:0;transform:translateX(calc(50% + 8px)) scale(0);
  transition:opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
  z-index:5;
}
.bnav-chat-badge.show {
  opacity:1;
  transform:translateX(calc(50% + 8px)) scale(1);
}

/* Unread dot di feat-btn dan nav desktop */
.chat-unread-dot {
  display:inline-block;
  width:8px;height:8px;
  background:var(--danger);
  border-radius:50%;
  box-shadow:0 0 8px rgba(239,68,68,.7);
  margin-left:.3rem;
  vertical-align:middle;
  animation:chat-dot-pulse 1.5s ease infinite;
}
@keyframes chat-dot-pulse {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.7)}
}

/* Chat notif toast show state */
#chat-notif-toast.show {
  animation: notif-bounce .45s cubic-bezier(.34,1.2,.64,1) forwards;
  opacity: 1;
  pointer-events: auto;
}

/* Bounce animation on new msg */
@keyframes notif-bounce {
  0%   { transform: translateY(-120px); opacity: 0; }
  60%  { transform: translateY(6px); }
  80%  { transform: translateY(-3px); }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── BLOCK 5 ── */
.feat-btn {
      position:relative;overflow:hidden;cursor:pointer;border:none;
      border-radius:22px;padding:1.15rem 1rem 1rem;text-align:left;
      backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
      transition:transform .18s ease,box-shadow .18s ease;
      -webkit-tap-highlight-color:transparent;
      width:100%;display:block;
    }
    .feat-btn:active{transform:scale(.96);}
    .feat-btn::before{
      content:'';position:absolute;inset:0;border-radius:22px;
      background:linear-gradient(145deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.06) 38%,transparent 60%);
      pointer-events:none;z-index:1;
    }
    .feat-btn::after{
      content:'';position:absolute;inset:0;border-radius:22px;
      border:1px solid rgba(255,255,255,.32);
      border-bottom-color:rgba(255,255,255,.08);
      border-right-color:rgba(255,255,255,.08);
      pointer-events:none;z-index:2;
    }
    .feat-btn .fb-blob{
      position:absolute;bottom:-28px;right:-24px;
      width:100px;height:100px;border-radius:50%;
      filter:blur(22px);opacity:.55;pointer-events:none;z-index:0;
    }
    .feat-btn .fb-dot3{
      position:absolute;top:9px;right:10px;z-index:3;
      width:28px;height:28px;border-radius:50%;
      background:rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.25);
      display:flex;align-items:center;justify-content:center;gap:2px;
    }
    .feat-btn .fb-dot3 span{display:block;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.9);}
    .feat-btn .fb-icon{
      position:relative;z-index:3;
      width:38px;height:38px;border-radius:12px;
      background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);
      display:flex;align-items:center;justify-content:center;margin-bottom:.65rem;
    }
    .feat-btn .fb-icon svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
    .feat-btn .fb-label{
      position:relative;z-index:3;
      font-size:.8rem;font-weight:800;color:#fff;line-height:1.3;
      letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.25);
    }

    /* ── Fitur Popup ── */
    /* Tombol "Fitur Lainnya" di samping header */
    #fitur-more-btn {
      display:inline-flex;align-items:center;gap:.3rem;
      padding:.25rem .65rem .25rem .5rem;
      border-radius:8px;
      background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(249,115,22,.15));
      border:1px solid rgba(249,115,22,.35);
      cursor:pointer;transition:all .18s;
      -webkit-tap-highlight-color:transparent;
      color:#f97316;font-size:.6rem;font-weight:700;
      letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;
    }
    #fitur-more-btn:active { background:rgba(249,115,22,.28); transform:scale(.96); }
    .fmb-dot {
      width:6px;height:6px;border-radius:50%;
      background:linear-gradient(135deg,#ef4444,#f97316);
      animation:fmb-blink 2s ease infinite;flex-shrink:0;
    }
    @keyframes fmb-blink{0%,100%{opacity:1}50%{opacity:.25}}

    /* Panel inline - disembunyikan, diganti modal */
    #fitur-more-panel { display:none !important; }

    /* ── FITUR LAINNYA MODAL ── */
    #fitur-modal-overlay {
      display:none;position:fixed;inset:0;z-index:99999;
      background:rgba(0,0,0,.7);
      backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
      align-items:flex-end;justify-content:center;
    }
    #fitur-modal-overlay.open {
      display:flex;
      animation:fitur-overlay-in .25s ease forwards;
    }
    @keyframes fitur-overlay-in {
      from{opacity:0} to{opacity:1}
    }
    #fitur-modal-sheet {
      width:100%;max-width:480px;
      background:linear-gradient(180deg,#0d1520 0%,#060910 100%);
      border-radius:24px 24px 0 0;
      border-top:1px solid rgba(255,255,255,.1);
      max-height:88vh;overflow-y:auto;
      padding:0 0 env(safe-area-inset-bottom,16px);
      transform:translateY(100%);
      transition:transform .35s cubic-bezier(.34,1.08,.64,1);
    }
    #fitur-modal-overlay.open #fitur-modal-sheet {
      transform:translateY(0);
    }
    #fitur-modal-overlay.closing #fitur-modal-sheet {
      transform:translateY(100%);
    }
    #fitur-modal-overlay.closing {
      opacity:0;transition:opacity .25s ease;
    }
    .fitur-modal-handle {
      width:40px;height:4px;border-radius:99px;
      background:rgba(255,255,255,.18);
      margin:.75rem auto .2rem;
    }
    .fitur-modal-header {
      display:flex;align-items:center;justify-content:space-between;
      padding:.75rem 1.2rem .5rem;
    }
    .fitur-modal-title {
      display:flex;align-items:center;gap:.5rem;
    }
    .fitur-modal-close {
      width:32px;height:32px;border-radius:99px;
      background:rgba(255,255,255,.08);border:none;
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;color:var(--muted);transition:all .15s;
      flex-shrink:0;
    }
    .fitur-modal-close:active{transform:scale(.9);background:rgba(255,255,255,.15)}
    .fitur-modal-grid {
      display:grid;grid-template-columns:1fr 1fr;gap:.75rem;
      padding:.5rem 1rem 1.5rem;
    }
    .fmo-btn {
      position:relative;overflow:hidden;cursor:pointer;border:none;
      border-radius:20px;padding:1rem .9rem .9rem;text-align:left;
      min-height:110px;display:flex;flex-direction:column;justify-content:flex-end;
      transition:transform .18s,box-shadow .18s;
      -webkit-tap-highlight-color:transparent;
    }
    .fmo-btn:active{transform:scale(.95)}
    .fmo-blob {
      position:absolute;width:90px;height:90px;border-radius:50%;
      top:-20px;right:-20px;filter:blur(28px);opacity:.55;pointer-events:none;
    }
    .fmo-icon {
      width:36px;height:36px;border-radius:12px;
      background:rgba(255,255,255,.12);
      display:flex;align-items:center;justify-content:center;margin-bottom:.55rem;
      flex-shrink:0;
    }
    .fmo-icon svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .fmo-label{font-size:.78rem;font-weight:800;color:#fff;line-height:1.25;letter-spacing:.01em}
    .fmo-sub{font-size:.6rem;color:rgba(255,255,255,.55);margin-top:.2rem;line-height:1.3}
    .fmo-badge{
      position:absolute;top:.55rem;left:.7rem;
      font-size:.48rem;font-weight:800;letter-spacing:.06em;
      padding:.15rem .45rem;border-radius:99px;color:#fff;
    }
    .fmo-soon{opacity:.5;cursor:default}
    .fmo-soon:active{transform:none}
    .fitur-modal-divider{
      margin:.2rem 1rem .6rem;
      border:none;border-top:1px solid rgba(255,255,255,.06);
    }
    .fitur-modal-section-label{
      font-size:.58rem;font-weight:700;letter-spacing:.1em;
      color:rgba(249,115,22,.8);text-transform:uppercase;
      padding:0 1rem .4rem;display:flex;align-items:center;gap:.35rem;
    }
    .fitur-popup-grid {
      display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
    }
    .fpp-btn {
      position:relative;overflow:hidden;cursor:pointer;border:none;
      border-radius:16px;padding:.85rem .8rem .75rem;text-align:left;
      backdrop-filter:blur(12px);
      transition:transform .15s;
      -webkit-tap-highlight-color:transparent;
      width:100%;display:block;
    }
    .fpp-btn:active { transform:scale(.94); }
    .fpp-btn::before {
      content:'';position:absolute;inset:0;border-radius:16px;
      background:linear-gradient(145deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 45%,transparent 65%);
      pointer-events:none;z-index:1;
    }
    .fpp-btn::after {
      content:'';position:absolute;inset:0;border-radius:16px;
      border:1px solid rgba(255,255,255,.25);
      border-bottom-color:rgba(255,255,255,.06);
      pointer-events:none;z-index:2;
    }
    .fpp-btn .fb-blob {
      position:absolute;bottom:-20px;right:-18px;
      width:70px;height:70px;border-radius:50%;
      filter:blur(16px);opacity:.5;pointer-events:none;
    }
    .fpp-btn .fpp-icon {
      position:relative;z-index:3;
      width:32px;height:32px;border-radius:10px;
      background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);
      display:flex;align-items:center;justify-content:center;
      margin-bottom:.5rem;
    }
    .fpp-btn .fpp-icon svg { width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }
    .fpp-btn .fpp-label {
      position:relative;z-index:3;
      font-size:.72rem;font-weight:800;color:#fff;line-height:1.3;
      text-shadow:0 1px 5px rgba(0,0,0,.3);
    }
    .fpp-btn .fpp-soon {
      position:relative;z-index:3;
      font-size:.58rem;font-weight:600;color:rgba(255,255,255,.38);
      margin-top:.15rem;
    }
    .fpp-btn .fpp-new {
      position:absolute;top:7px;left:8px;z-index:4;
      background:linear-gradient(90deg,#ef4444,#f97316);
      border-radius:100px;padding:.06rem .38rem;
      font-size:.48rem;font-weight:800;color:#fff;letter-spacing:.06em;
      pointer-events:none;
    }

/* ── BLOCK 6 ── */
#fng-wrap {
      position:relative;overflow:hidden;
      background:rgba(255,255,255,.04);
      backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
      border:1px solid rgba(255,255,255,.13);
      border-bottom-color:rgba(255,255,255,.05);
      border-right-color:rgba(255,255,255,.05);
      border-radius:24px;
      box-shadow:0 16px 48px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);
      padding:1.2rem;margin-bottom:1.2rem;
    }
    #fng-wrap::before {
      content:'';position:absolute;inset:0;border-radius:24px;
      background:linear-gradient(145deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.02) 40%,transparent 70%);
      pointer-events:none;
    }
    /* colored glow blobs behind gauge */
    #fng-glow-left  { position:absolute;top:10px;left:-20px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(239,68,68,.25),transparent 70%);filter:blur(24px);pointer-events:none; }
    #fng-glow-right { position:absolute;top:10px;right:-20px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.2),transparent 70%);filter:blur(24px);pointer-events:none; }
    /* history cards glass */
    .fng-hist-card {
      border-radius:16px;
      background:rgba(255,255,255,.06);
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      border:1px solid rgba(255,255,255,.14);
      border-bottom-color:rgba(255,255,255,.04);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 16px rgba(0,0,0,.2);
      padding:.75rem .6rem;text-align:center;
      position:relative;overflow:hidden;
    }
    .fng-hist-card::before {
      content:'';position:absolute;top:0;left:0;right:0;height:40%;
      background:linear-gradient(180deg,rgba(255,255,255,.1),transparent);
      border-radius:16px 16px 0 0;pointer-events:none;
    }
    /* zone bar glass pill */
    .fng-zone-bar {
      border-radius:100px;overflow:hidden;height:7px;display:flex;
      margin-bottom:.65rem;
      box-shadow:0 2px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2);
    }

/* ── BLOCK 7 ── */
/* ── CHAT PAGE GLOBAL ── */
#page-chat {
  padding:0 !important;
  flex-direction:column;
  overflow:hidden;
  overflow-x:hidden !important;
  min-height:0;
  position:relative;
}
#page-chat.active {
  display:flex !important;
  height:calc(100dvh - 56px - 100px);
}
@media(max-width:640px){
  #page-chat.active {
    height:calc(100dvh - 44px - 80px - env(safe-area-inset-bottom, 16px));
  }
  /* Saat chat-room-screen aktif (masuk room), gunakan full height */
  #page-chat:has(#chat-room-screen.active) {
    height:100dvh;
  }
}

/* ── CHAT SCREENS ── */
.chat-screen { display:none; flex-direction:column; height:100%; overflow-x:hidden; width:100%; }
.chat-screen.active { display:flex; }

/* ── GLASS CARD BASE ── */
.cg {
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12);
  border-bottom-color:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 4px 24px rgba(0,0,0,.25);
}

/* ── ROOM LIST SCREEN ── */
#chat-rooms-screen {
  padding:1rem;
  overflow-y:auto;
  gap:.75rem;
}
.chat-topbar {
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1rem .5rem;
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,var(--bg) 70%,transparent);
}
.chat-topbar-title {
  font-size:1.2rem;font-weight:800;letter-spacing:-.02em;
}
.chat-fab {
  display:flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;border-radius:100px;border:none;cursor:pointer;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(135deg,rgba(16,185,129,.7),rgba(5,150,105,.8));
  backdrop-filter:blur(12px);
  border:1px solid rgba(52,211,153,.4);
  box-shadow:0 4px 20px rgba(16,185,129,.35),inset 0 1px 0 rgba(255,255,255,.2);
  transition:all .2s;
}
.chat-fab:hover { transform:translateY(-1px);box-shadow:0 8px 28px rgba(16,185,129,.45); }

/* Room item */
.room-item {
  display:flex;align-items:center;gap:.85rem;
  padding:.85rem 1rem;border-radius:18px;cursor:pointer;
  transition:all .18s;position:relative;overflow:hidden;
  margin-bottom:.55rem;
}
.room-item:last-child { margin-bottom:0; }
.room-item:active { transform:scale(.98); }
.room-item::before {
  content:'';position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.1) 0%,transparent 60%);
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.room-item:hover::before { opacity:1; }

.room-avatar {
  width:50px;height:50px;border-radius:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:800;color:#fff;
  position:relative;
}
.room-avatar::after {
  content:'';position:absolute;inset:0;border-radius:16px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.room-info { flex:1;min-width:0; }
.room-name { font-size:.9rem;font-weight:700;margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.room-preview { font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.room-meta { display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;flex-shrink:0; }
.room-time { font-size:.65rem;color:var(--muted);font-family:'Space Mono',monospace; }
.room-badge { background:var(--accent);color:var(--bg);border-radius:100px;font-size:.6rem;font-weight:800;padding:.15rem .45rem;min-width:18px;text-align:center; }

.section-label {
  font-size:.62rem;font-weight:700;letter-spacing:.12em;color:var(--muted);
  text-transform:uppercase;padding:.5rem .2rem .3rem;margin-top:.3rem;
}

/* ── CHAT ROOM SCREEN ── */
#chat-room-screen { display:none; }
#chat-room-screen.active { display:flex; }

.room-header {
  display:flex;align-items:center;gap:.85rem;
  padding:.85rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(5,8,16,.6);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  flex-shrink:0;
}
[data-theme="light"] .room-header {
  background:var(--surface) !important;
  border-bottom:1px solid var(--border) !important;
  backdrop-filter:none !important;
}
.room-header-back {
  width:36px;height:36px;border-radius:12px;border:none;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;color:var(--text);
  transition:all .18s;flex-shrink:0;
}
.room-header-back:hover { background:rgba(255,255,255,.15); }
[data-theme="light"] .room-header-back {
  background:var(--surface2) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
}
[data-theme="light"] .room-header-back:hover { background:var(--border) !important; }
.room-header-avatar {
  width:40px;height:40px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:1rem;color:#fff;flex-shrink:0;
  border:1px solid rgba(255,255,255,.2);
}
.room-header-info { flex:1;min-width:0; }
.room-header-name { font-size:.95rem;font-weight:800; }
.room-header-sub { font-size:.68rem;color:var(--muted); }
[data-theme="light"] .room-header-name { color:var(--text) !important; }
[data-theme="light"] .room-header-sub { color:var(--muted) !important; }

/* Messages area */
.messages-area {
  flex:1;overflow-y:auto;overflow-x:hidden;padding:.75rem 1rem;
  display:flex;flex-direction:column;gap:.4rem;
  scroll-behavior:smooth;
  width:100%;box-sizing:border-box;
}
.messages-area::-webkit-scrollbar { width:3px; }
.messages-area::-webkit-scrollbar-track { background:transparent; }
.messages-area::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1);border-radius:99px; }

/* Message bubbles */
.msg-row { display:flex;gap:.55rem;align-items:flex-end;max-width:82%;animation:msgIn .2s ease;min-width:0;overflow:visible; }
.msg-row.mine { align-self:flex-end;flex-direction:row-reverse; }
.msg-row.theirs { align-self:flex-start; }
@keyframes msgIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.msg-avatar {
  width:28px;height:28px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:800;color:#fff;
  border:1px solid rgba(255,255,255,.15);
}
.msg-bubble-wrap { display:flex;flex-direction:column;gap:.2rem;min-width:0;overflow:visible;max-width:100%; }
.msg-sender-name { font-size:.6rem;color:var(--muted);padding:0 .5rem;font-weight:600; }
.msg-row.mine .msg-sender-name { text-align:right;color:rgba(0,229,255,.7); }

.msg-bubble {
  padding:.6rem .9rem;border-radius:18px;font-size:.85rem;line-height:1.5;
  position:relative;word-break:break-word;overflow-wrap:break-word;
  overflow:hidden;min-width:0;max-width:100%;
}
.msg-row.mine .msg-bubble {
  background:linear-gradient(135deg,rgba(0,180,220,.55),rgba(0,229,255,.4));
  border:1px solid rgba(0,229,255,.35);
  border-bottom-right-radius:5px;
  backdrop-filter:blur(12px);
  box-shadow:0 4px 20px rgba(0,229,255,.2),inset 0 1px 0 rgba(255,255,255,.2);
}
.msg-row.theirs .msg-bubble {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-bottom-left-radius:5px;
  backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.msg-time { font-size:.58rem;color:rgba(255,255,255,.3);text-align:right;padding:0 .3rem; }

/* Reply bubble */
.msg-reply-ref {
  background:rgba(0,229,255,.08) !important;
  border-left:3px solid var(--accent) !important;
  border-radius:10px !important;
  padding:.4rem .7rem !important;
  margin-bottom:.25rem !important;
  font-size:.75rem !important;
  color:rgba(255,255,255,.8) !important;
  cursor:pointer;
  user-select:none;
  display:block !important;
  white-space:normal !important;
  word-break:break-word !important;
  overflow:visible !important;
  max-height:none !important;
}
.msg-reply-ref:hover,.msg-reply-ref:active {
  background:rgba(0,229,255,.15);
}
[data-theme="light"] .msg-reply-ref {
  background:rgba(0,0,0,.07);
  color:rgba(0,0,0,.65);
}

/* Swipe reply icon */
._swipe-reply-icon {
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,229,255,.2);
}

/* Date separator */
.msg-date-sep {
  text-align:center;font-size:.62rem;color:var(--muted);
  font-family:'Space Mono',monospace;
  padding:.5rem 1rem;margin:.4rem auto;
  background:rgba(255,255,255,.04);border-radius:100px;
  border:1px solid rgba(255,255,255,.07);
  letter-spacing:.06em;
}

/* System message */
.msg-system {
  text-align:center;font-size:.7rem;color:var(--muted);
  padding:.3rem;font-style:italic;
}

/* Input area */
.chat-input-area {
  padding:.75rem 1rem;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(5,8,16,.5);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  flex-shrink:0;
}
[data-theme="light"] .chat-input-area {
  background:var(--surface) !important;
  border-top:1px solid var(--border) !important;
  backdrop-filter:none !important;
}
.reply-preview {
  display:none;align-items:center;gap:.5rem;
  background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.2);
  border-radius:10px;padding:.4rem .7rem;margin-bottom:.5rem;font-size:.75rem;
}
.reply-preview.show { display:flex; }
.reply-preview-text { flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.reply-cancel { background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:0; }

.chat-input-row {
  display:flex;gap:.6rem;align-items:flex-end;
}
.chat-input {
  flex:1;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:.7rem 1rem;
  color:var(--text);font-family:'Inter',sans-serif;font-size:.88rem;
  outline:none;resize:none;max-height:120px;min-height:44px;
  line-height:1.45;transition:border-color .2s;
  backdrop-filter:blur(8px);
}
[data-theme="light"] .chat-input {
  background:var(--surface2) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
  backdrop-filter:none !important;
}
[data-theme="light"] .chat-input:focus {
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(0,112,192,.1) !important;
}
/* AI input — fixed single line, no scroll */
.ai-input-single {
  flex:1;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:.7rem 1rem;
  color:var(--text);font-family:'Inter',sans-serif;font-size:.88rem;
  outline:none;height:44px;line-height:1;
  transition:border-color .2s;backdrop-filter:blur(8px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
[data-theme="light"] .ai-input-single {
  background:var(--surface2) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
  backdrop-filter:none !important;
}
[data-theme="light"] .ai-input-single:focus {
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(0,112,192,.1) !important;
}
.ai-input-single:focus {
  border-color:rgba(0,229,255,.4);
  box-shadow:0 0 0 3px rgba(0,229,255,.08);
}
.ai-input-single::placeholder { color:var(--muted); }
.chat-input:focus { border-color:rgba(0,229,255,.4);box-shadow:0 0 0 3px rgba(0,229,255,.08); }
.chat-input::placeholder { color:var(--muted); }
.chat-send-btn {
  width:44px;height:44px;border-radius:14px;border:none;cursor:pointer;flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,180,220,.7),rgba(0,229,255,.6));
  border:1px solid rgba(0,229,255,.4);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,229,255,.3),inset 0 1px 0 rgba(255,255,255,.2);
  transition:all .18s;color:#fff;
}
.chat-send-btn:hover { transform:scale(1.05);box-shadow:0 6px 24px rgba(0,229,255,.4); }
.chat-send-btn:active { transform:scale(.95); }

/* ── NEW ROOM MODAL ── */
#chat-new-room-modal {
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.75);backdrop-filter:blur(16px);
  display:none;align-items:flex-end;justify-content:center;
  padding-bottom:0;
}
#chat-new-room-modal.open { display:flex; }
.new-room-sheet {
  width:100%;max-width:500px;
  background:rgba(10,14,25,.97);
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,.15);
  border-bottom:none;
  border-radius:28px 28px 0 0;
  padding:1.2rem 1.4rem calc(6rem + env(safe-area-inset-bottom,16px));
  box-shadow:0 -24px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18);
  animation:slideUp .3s cubic-bezier(.32,.72,0,1);
  max-height:88dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.sheet-handle { width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:0 auto .9rem; }
.sheet-title { font-size:1rem;font-weight:800;margin-bottom:1.1rem; }

.room-type-tabs {
  display:flex;gap:.5rem;margin-bottom:1rem;
  background:rgba(255,255,255,.04);border-radius:14px;padding:4px;
}
.room-type-tab {
  flex:1;padding:.55rem;border-radius:11px;border:none;cursor:pointer;
  font-size:.78rem;font-weight:700;color:var(--muted);background:transparent;
  transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.3rem;
}
.room-type-tab.active { background:var(--accent);color:var(--bg); }

.sheet-field {
  margin-bottom:.8rem;
}
.sheet-label { font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.35rem; }
.sheet-input {
  width:100%;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
  padding:.7rem .9rem;color:var(--text);font-family:'Inter',sans-serif;
  font-size:.88rem;outline:none;transition:border-color .2s;
}
.sheet-input:focus { border-color:rgba(0,229,255,.4); }

.color-picker-row {
  display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.35rem;
}
.color-dot {
  width:32px;height:32px;border-radius:10px;cursor:pointer;
  border:2px solid transparent;transition:all .15s;flex-shrink:0;
}
.color-dot.selected { border-color:#fff;transform:scale(1.15); }

.sheet-btn {
  width:100%;padding:.85rem;border-radius:14px;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.9rem;font-weight:800;
  letter-spacing:.04em;margin-top:.3rem;
  background:linear-gradient(135deg,rgba(16,185,129,.7),rgba(5,150,105,.8));
  color:#fff;border:1px solid rgba(52,211,153,.35);
  box-shadow:0 6px 24px rgba(16,185,129,.3),inset 0 1px 0 rgba(255,255,255,.2);
  transition:all .2s;
}
.sheet-btn:hover { opacity:.9;transform:translateY(-1px); }

/* DM invite code display */
.dm-code-box {
  background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.2);
  border-radius:12px;padding:.8rem 1rem;margin-bottom:.8rem;display:none;
}
.dm-code-box.show { display:block; }
.dm-code-label { font-size:.68rem;color:var(--muted);margin-bottom:.3rem; }
.dm-code-val { font-family:'Space Mono',monospace;font-size:1rem;font-weight:700;color:var(--accent); }

/* User code badge */
.my-code-badge {
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:100px;padding:.3rem .7rem;font-family:'Space Mono',monospace;
  font-size:.7rem;color:var(--muted);cursor:pointer;transition:all .2s;
}
.my-code-badge:hover { border-color:var(--accent);color:var(--accent); }

/* Online indicator */
.online-dot { width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0;box-shadow:0 0 6px rgba(34,197,94,.6); }

/* Empty state */
.chat-empty {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;padding:2rem;text-align:center;gap:.7rem;
}
.chat-empty-icon { font-size:2.5rem;opacity:.4; }
.chat-empty-text { font-size:.85rem;color:var(--muted);line-height:1.6; }

/* Loading skeleton */
.msg-skeleton {
  height:44px;border-radius:14px;background:rgba(255,255,255,.04);
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer { 0%,100%{opacity:.4} 50%{opacity:.8} }

/* ── CHAT TOOL BUTTONS (emoji, upload) ── */
.chat-tool-btn {
  width:36px;height:36px;border-radius:11px;border:none;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:all .18s;
}
.chat-tool-btn:hover { background:rgba(255,255,255,.13);color:var(--accent);border-color:rgba(0,229,255,.3); }
.chat-tool-btn.active { background:rgba(0,229,255,.12);color:var(--accent);border-color:rgba(0,229,255,.4); }
[data-theme="light"] .chat-tool-btn {
  background:var(--surface2) !important;
  border-color:var(--border) !important;
  color:var(--muted) !important;
}
[data-theme="light"] .chat-tool-btn:hover {
  background:var(--border) !important;
  color:var(--accent) !important;
  border-color:var(--accent) !important;
}
[data-theme="light"] .chat-tool-btn.active {
  background:rgba(0,112,192,.1) !important;
  color:var(--accent) !important;
  border-color:var(--accent) !important;
}

/* ── EMOJI PICKER TABS ── */
.emoji-cat-btn {
  flex-shrink:0;padding:.4rem .6rem;border-radius:10px;border:none;
  background:transparent;font-size:1rem;cursor:pointer;
  transition:background .15s;line-height:1;
}
.emoji-cat-btn:hover { background:rgba(255,255,255,.08); }
.emoji-cat-btn.active { background:rgba(0,229,255,.15);outline:1px solid rgba(0,229,255,.3); }

/* ── EMOJI GRID ITEM ── */
.emoji-btn {
  font-size:1.35rem;padding:.35rem;border-radius:9px;border:none;
  background:transparent;cursor:pointer;text-align:center;line-height:1;
  transition:background .12s, transform .1s;
}
.emoji-btn:hover { background:rgba(255,255,255,.1);transform:scale(1.2); }

/* ── MEDIA BUBBLE (foto/video dalam pesan) ── */
.msg-media {
  max-width:220px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;display:block;
  transition:transform .2s, box-shadow .2s;
}
.msg-media:hover { transform:scale(1.02);box-shadow:0 8px 28px rgba(0,0,0,.4); }
.msg-media img { width:100%;display:block;max-height:300px;object-fit:cover; }
.msg-media video { width:100%;display:block;max-height:300px; }
.msg-media-loading {
  width:180px;height:120px;background:rgba(255,255,255,.05);
  border-radius:14px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.1);
  animation:shimmer 1.5s infinite;
}

/* Upload progress */
.upload-progress-wrap {
  height:3px;background:rgba(255,255,255,.08);border-radius:99px;
  margin-top:.4rem;overflow:hidden;
}
.upload-progress-bar {
  height:100%;background:linear-gradient(90deg,var(--accent),rgba(0,229,255,.5));
  border-radius:99px;transition:width .2s;
}

/* Lightbox */
#media-lightbox {
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.92);backdrop-filter:blur(20px);
  display:none;align-items:center;justify-content:center;
  padding:1rem;
}
#media-lightbox.open { display:flex; }
#media-lightbox img, #media-lightbox video {
  max-width:100%;max-height:90vh;border-radius:14px;
  box-shadow:0 24px 80px rgba(0,0,0,.8);
}
#media-lightbox-close {
  position:absolute;top:1rem;right:1rem;
  width:40px;height:40px;border-radius:12px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;transition:background .2s;
}
#media-lightbox-close:hover { background:rgba(255,255,255,.2); }

/* Send button uploading state */
.chat-send-btn.uploading {
  background:rgba(255,255,255,.1);
  pointer-events:none;
}

/* ── BLOCK 8 ── */
#page-ai-chat {
  padding:0 !important;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}
#page-ai-chat.active {
  display:flex !important;
  height:calc(100dvh - 56px - 100px);
}
@media(max-width:640px){
  #page-ai-chat.active {
    /* Full height when navbar hidden */
    height:calc(100dvh - 44px);
  }
}
/* Typing indicator */
.ai-typing-dot {
  width:7px;height:7px;border-radius:50%;
  background:rgba(0,229,255,.7);
  animation:aiDot 1.4s infinite ease-in-out;
}
.ai-typing-dot:nth-child(2){animation-delay:.2s}
.ai-typing-dot:nth-child(3){animation-delay:.4s}
@keyframes aiDot {
  0%,80%,100%{transform:scale(.6);opacity:.4}
  40%{transform:scale(1);opacity:1}
}
/* AI bubble markdown */
.ai-bubble-content p { margin-bottom:.5rem; line-height:1.65; }
.ai-bubble-content p:last-child { margin-bottom:0; }
.ai-bubble-content strong { color:var(--accent);font-weight:700; }
.ai-bubble-content em { color:rgba(255,255,255,.8);font-style:italic; }
.ai-bubble-content ul,.ai-bubble-content ol { padding-left:1.2rem;margin:.4rem 0; }
.ai-bubble-content li { margin-bottom:.25rem;line-height:1.5; }
.ai-bubble-content code { background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.2);border-radius:5px;padding:.1rem .35rem;font-family:'Space Mono',monospace;font-size:.82em; }
.ai-bubble-content blockquote { border-left:3px solid var(--accent);padding-left:.8rem;margin:.4rem 0;color:var(--muted); }
.ai-bubble-content h3 { font-size:.92rem;font-weight:800;margin:.6rem 0 .3rem;color:var(--accent); }
/* Suggestion chips */
.ai-suggestions { display:flex;flex-wrap:wrap;gap:.45rem;padding:.6rem 1rem 0;flex-shrink:0; }
.ai-chip {
  background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.2);
  border-radius:100px;padding:.35rem .8rem;
  font-size:.72rem;font-weight:600;color:rgba(0,229,255,.85);
  cursor:pointer;transition:all .18s;white-space:nowrap;
}
.ai-chip:hover{background:rgba(0,229,255,.14);border-color:rgba(0,229,255,.4);transform:translateY(-1px);}

/* ── BLOCK 9 ── */
/* ── AI Signal Page ── */
.sig-header {
  background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(6,182,212,.1));
  border:1px solid rgba(16,185,129,.3);
  border-radius:20px;padding:1.1rem 1.2rem;margin-bottom:1rem;
  position:relative;overflow:hidden;
}
.sig-header::before {
  content:'';position:absolute;top:-50px;right:-50px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.12),transparent 70%);
  pointer-events:none;
}
.sig-verdict {
  display:inline-flex;align-items:center;gap:.45rem;
  border-radius:100px;padding:.4rem 1rem;
  font-size:.78rem;font-weight:800;letter-spacing:.05em;
  margin-bottom:.6rem;
}
.sig-verdict.long { background:rgba(16,185,129,.2);border:1px solid rgba(16,185,129,.5);color:#10b981; }
.sig-verdict.short { background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.5);color:#ef4444; }
.sig-verdict.wait { background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.4);color:#f59e0b; }

.sig-pair-row { display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem; }
.sig-pair { font-size:1.5rem;font-weight:900;letter-spacing:-.02em;color:#f1f5f9; }
.sig-tf-badge { background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:.2rem .6rem;font-size:.68rem;font-weight:700;color:#94a3b8; }
.sig-confidence {
  display:flex;align-items:center;gap:.6rem;font-size:.75rem;color:#94a3b8;
}
.sig-conf-bar { flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden; }
.sig-conf-fill { height:100%;border-radius:99px;transition:width .6s ease; }

/* ── Trade Setup Card ── */
.sig-setup {
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;
  margin-bottom:.9rem;
}
.sig-setup-item {
  border-radius:14px;padding:.75rem .7rem;text-align:center;
  border:1px solid transparent;
}
.sig-setup-item.entry { background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3); }
.sig-setup-item.sl    { background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25); }
.sig-setup-item.tp    { background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.25); }
.sig-setup-label { font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem;color:#64748b; }
.sig-setup-price { font-size:.9rem;font-weight:800;font-family:'Space Mono',monospace; }
.sig-setup-item.entry .sig-setup-price { color:#f59e0b; }
.sig-setup-item.sl    .sig-setup-price { color:#ef4444; }
.sig-setup-item.tp    .sig-setup-price { color:#10b981; }
.sig-setup-pct { font-size:.62rem;font-weight:700;margin-top:.15rem; }

/* Risk/Reward */
.sig-rr {
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:.7rem 1rem;margin-bottom:.9rem;
}
.sig-rr-item { text-align:center; }
.sig-rr-label { font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:.2rem; }
.sig-rr-val { font-size:1rem;font-weight:900; }
.sig-rr-divider { width:1px;height:32px;background:rgba(255,255,255,.08); }

/* Canvas chart */
#sig-chart-wrap {
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:.8rem;
  margin-bottom:.9rem;position:relative;
  overflow:hidden;
}
#sig-canvas { width:100%;height:240px;display:block; }

/* Timeframe selector */
.sig-tf-row {
  display:flex;gap:.4rem;margin-bottom:.9rem;overflow-x:auto;
  scrollbar-width:none;padding-bottom:.1rem;
}
.sig-tf-btn {
  flex-shrink:0;padding:.35rem .75rem;border-radius:8px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);
  font-size:.7rem;font-weight:700;color:#94a3b8;cursor:pointer;
  transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.sig-tf-btn.active {
  background:rgba(16,185,129,.2);border-color:rgba(16,185,129,.5);color:#10b981;
}

/* Indicator panel */
.sig-indicators {
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:.9rem;margin-bottom:.9rem;
}
.sig-ind-title {
  font-size:.58rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#64748b;margin-bottom:.7rem;
  display:flex;align-items:center;gap:.5rem;
}
.sig-ind-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:.45rem;
}
.sig-ind-item {
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:.5rem .7rem;
}
.sig-ind-name { font-size:.65rem;font-weight:700;color:#94a3b8; }
.sig-ind-val  { font-size:.65rem;font-weight:800;font-family:'Space Mono',monospace; }
.sig-ind-badge {
  font-size:.55rem;font-weight:800;letter-spacing:.04em;
  border-radius:100px;padding:.08rem .4rem;margin-left:.3rem;
}
.bull { color:#10b981; }
.bear { color:#ef4444; }
.neut { color:#f59e0b; }
.badge-bull { background:rgba(16,185,129,.2);color:#10b981; }
.badge-bear { background:rgba(239,68,68,.2);color:#ef4444; }
.badge-neut { background:rgba(245,158,11,.2);color:#f59e0b; }

/* Pair selector */
.sig-pair-sel {
  display:flex;gap:.4rem;margin-bottom:.9rem;overflow-x:auto;scrollbar-width:none;
}
.sig-pair-btn {
  flex-shrink:0;padding:.35rem .9rem;border-radius:10px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);
  font-size:.7rem;font-weight:800;color:#94a3b8;cursor:pointer;
  font-family:'Space Mono',monospace;
  transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.sig-pair-btn.active {
  background:rgba(6,182,212,.2);border-color:rgba(6,182,212,.5);color:#06b6d4;
}

/* Analyze button */
.sig-analyze-btn {
  width:100%;padding:.85rem;border-radius:16px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#10b981,#06b6d4);
  color:#fff;font-size:.9rem;font-weight:800;letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  transition:opacity .2s,transform .15s;margin-bottom:1rem;
  box-shadow:0 4px 20px rgba(16,185,129,.4);
  -webkit-tap-highlight-color:transparent;
}
.sig-analyze-btn:active { opacity:.85;transform:scale(.98); }
.sig-analyze-btn:disabled { opacity:.5;cursor:not-allowed; }

/* Back button */
.sig-back {
  display:flex;align-items:center;gap:.5rem;
  margin-bottom:1rem;cursor:pointer;color:#94a3b8;
  font-size:.78rem;font-weight:600;
  -webkit-tap-highlight-color:transparent;
  width:fit-content;
}
.sig-back:active { color:#f1f5f9; }

/* Skeleton loader */
.sig-skeleton {
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── BLOCK 10 ── */
.pred-header-card {
  background:linear-gradient(135deg,rgba(8,145,178,.15),rgba(124,58,237,.1));
  border:1px solid rgba(8,145,178,.3);
  border-radius:18px;padding:1.2rem;margin-bottom:1rem;
  position:relative;overflow:hidden;
}
.pred-header-card::before {
  content:'';position:absolute;top:-40px;right:-40px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(8,145,178,.15),transparent 70%);
  pointer-events:none;
}
.pred-verdict {
  display:inline-flex;align-items:center;gap:.5rem;
  border-radius:100px;padding:.4rem 1rem;
  font-size:.8rem;font-weight:800;letter-spacing:.04em;
  margin-bottom:.6rem;
}
.pred-verdict.bullish { background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.4);color:#10b981; }
.pred-verdict.bearish { background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4);color:#ef4444; }
.pred-verdict.neutral { background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.4);color:#f59e0b; }
.pred-verdict.loading { background:rgba(100,116,139,.12);border:1px solid rgba(100,116,139,.3);color:var(--muted); }

.pred-stat-grid {
  display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:1rem;
}
.pred-stat-card {
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:.8rem;
}
.pred-stat-label { font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.25rem;font-weight:700; }
.pred-stat-value { font-size:1rem;font-weight:900;font-family:'Space Mono',monospace; }
.pred-stat-sub { font-size:.65rem;color:var(--muted);margin-top:.15rem; }

.pred-section-title {
  font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase;
  letter-spacing:.1em;margin:.9rem 0 .6rem;
  display:flex;align-items:center;gap:.5rem;
}
.pred-section-title::after { content:'';flex:1;height:1px;background:var(--border); }

.pred-analysis-box {
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:1rem;margin-bottom:.8rem;
  font-size:.83rem;line-height:1.7;color:var(--text);
  min-height:80px;
}
.pred-analysis-box strong { color:var(--accent);font-weight:700; }
.pred-analysis-box .bullish-text { color:#10b981; }
.pred-analysis-box .bearish-text { color:#ef4444; }

/* Sentiment gauge */
.fng-row {
  display:flex;align-items:center;gap:.75rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:.8rem 1rem;margin-bottom:.6rem;
}
.fng-label-text { font-size:.75rem;font-weight:700;flex-shrink:0; }
.fng-bar-wrap { flex:1;height:8px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden; }
.fng-bar-fill { height:100%;border-radius:99px;transition:width .8s ease; }
.fng-val { font-size:.78rem;font-weight:900;font-family:'Space Mono',monospace;flex-shrink:0;min-width:28px;text-align:right; }

/* Price levels */
.pred-level-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem .75rem;border-radius:10px;margin-bottom:.35rem;font-size:.8rem;
}
.pred-level-row.support { background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.2); }
.pred-level-row.resistance { background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.2); }
.pred-level-row.current { background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.2); }

/* Refresh button */
.pred-refresh-btn {
  display:flex;align-items:center;gap:.4rem;
  background:linear-gradient(135deg,rgba(8,145,178,.2),rgba(124,58,237,.15));
  border:1px solid rgba(8,145,178,.35);
  border-radius:12px;padding:.6rem 1.1rem;
  color:var(--accent);font-size:.78rem;font-weight:700;cursor:pointer;
  transition:all .2s;margin-bottom:1rem;width:100%;justify-content:center;
}
.pred-refresh-btn:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(8,145,178,.25); }
.pred-refresh-btn:disabled { opacity:.5;pointer-events:none; }

/* Confidence bar */
.confidence-row { display:flex;align-items:center;gap:.6rem;margin-top:.5rem; }
.confidence-label { font-size:.65rem;color:var(--muted);font-weight:700;flex-shrink:0; }
.confidence-bar { flex:1;height:5px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden; }
.confidence-fill { height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#10b981);transition:width .8s ease; }
.confidence-val { font-size:.65rem;font-weight:800;flex-shrink:0;min-width:28px;text-align:right; }

/* AI narrative loading shimmer */
.shimmer {
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);
  background-size:400% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:6px;height:14px;margin:.35rem 0;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ── BLOCK 11 ── */
#page-news { padding-bottom: 6rem; }

/* ── News Back Header ── */
.news-back-header {
  display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;
  padding:.6rem 0;
}

/* ── News Card ── */
.news-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;padding:1rem 1.1rem;margin-bottom:.65rem;
  cursor:pointer;transition:all .22s;position:relative;overflow:hidden;
  text-align:left;width:100%;box-sizing:border-box;
  display:block;
}
.news-card:hover { 
  border-color:rgba(0,229,255,.3);
  box-shadow:0 4px 20px rgba(0,0,0,.25),0 0 0 1px rgba(0,229,255,.08);
  transform:translateY(-2px); 
}
.news-card::before {
  content:'';position:absolute;left:0;top:0;bottom:0;width:3.5px;border-radius:3.5px 0 0 3.5px;
}
.news-card.positif::before  { background:linear-gradient(180deg,#10b981,#34d399); }
.news-card.negatif::before  { background:linear-gradient(180deg,#ef4444,#f87171); }
.news-card.netral::before   { background:rgba(100,116,139,.4); }
.news-card.loading-card::before { background:rgba(255,255,255,.08); }

/* ── HIGHLIGHT: Most Positive & Most Negative ── */
.news-card.top-positif {
  background: linear-gradient(135deg, rgba(16,185,129,.12) 0%, rgba(16,185,129,.04) 100%);
  border-color: rgba(16,185,129,.45) !important;
  box-shadow: 0 0 0 1.5px rgba(16,185,129,.18), 0 4px 24px rgba(16,185,129,.15);
}
.news-card.top-positif::before {
  width: 4px;
  background: linear-gradient(180deg, #10b981, #34d399, #6ee7b7);
  box-shadow: 2px 0 12px rgba(16,185,129,.5);
}
.news-card.top-negatif {
  background: linear-gradient(135deg, rgba(239,68,68,.12) 0%, rgba(239,68,68,.04) 100%);
  border-color: rgba(239,68,68,.45) !important;
  box-shadow: 0 0 0 1.5px rgba(239,68,68,.18), 0 4px 24px rgba(239,68,68,.15);
}
.news-card.top-negatif::before {
  width: 4px;
  background: linear-gradient(180deg, #ef4444, #f87171, #fca5a5);
  box-shadow: 2px 0 12px rgba(239,68,68,.5);
}
.news-highlight-label {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: 100px;
  margin-bottom: .4rem;
  margin-right: .35rem;
}
.news-highlight-label.hl-pos {
  background: rgba(16,185,129,.18);
  color: #10b981;
  border: 1px solid rgba(16,185,129,.35);
}
.news-highlight-label.hl-neg {
  background: rgba(239,68,68,.18);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.35);
}

/* ── Badge ── */
.news-sentiment-badge {
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.2rem .65rem;border-radius:100px;font-size:.62rem;font-weight:800;
  letter-spacing:.04em;margin-bottom:.55rem;
}
.badge-positif { background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.25); }
.badge-negatif { background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.25); }
.badge-netral  { background:rgba(100,116,139,.1);color:#94a3b8;border:1px solid rgba(100,116,139,.18); }
.badge-loading { background:rgba(255,255,255,.06);color:var(--muted);border:1px solid rgba(255,255,255,.1); }

/* ── Content ── */
.news-title { font-size:.87rem;font-weight:700;color:var(--text);line-height:1.5;margin-bottom:.4rem; }
.news-orig  { font-size:.72rem;color:var(--muted);line-height:1.4;margin-bottom:.4rem;font-style:italic;opacity:.65; }
.news-meta  { display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.65rem;color:var(--muted);margin-top:.5rem; }
.news-source-tag { font-weight:700;color:var(--accent3);display:inline-flex;align-items:center;gap:.3rem; }
.news-coins { display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.4rem; }
.news-coin-tag {
  background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.18);
  border-radius:6px;padding:.12rem .45rem;font-size:.6rem;
  font-weight:800;color:var(--accent);font-family:'Space Mono',monospace;
  letter-spacing:.04em;
}

/* ── Sentiment Bar ── */
.news-sentiment-bar-wrap {
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:.85rem 1.1rem;margin-bottom:.9rem;
}

/* ── Filter Pills ── */
.news-filter-row { display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.9rem; }
.nf-btn {
  padding:.32rem .8rem;border-radius:100px;font-size:.69rem;font-weight:700;
  border:1px solid var(--border);background:var(--surface);
  color:var(--muted);cursor:pointer;transition:all .18s;
  display:inline-flex;align-items:center;gap:.3rem;
}
.nf-btn:hover { border-color:var(--accent);color:var(--accent); }
.nf-btn.active { 
  background:var(--accent);color:#050810;border-color:var(--accent);
  box-shadow:0 2px 12px rgba(0,229,255,.25);
}

/* ── BLOCK 12 ── */
@keyframes spin{to{transform:rotate(360deg)}}

/* ── WALLET BUTTON ── */
#btn-connect-wallet:hover{border-color:rgba(167,139,250,.8)!important;background:rgba(124,58,237,.15)!important;box-shadow:0 0 14px rgba(124,58,237,.2);transform:translateY(-1px)}

.stat-card,.modal,.login-box,.fi,.card,.overlay>div{transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}

/* ── THEME TOGGLE ── */
.theme-toggle{
  position:relative;
  width:48px;height:26px;
  background:var(--surface2);
  border:1.5px solid var(--border);
  border-radius:100px;
  cursor:pointer;flex-shrink:0;
  padding:0;outline:none;
  display:inline-flex;align-items:center;
}
.theme-toggle:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,229,255,.1)}
.theme-toggle-thumb{
  position:absolute;
  top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:var(--muted);
  transition:left .5s cubic-bezier(.34,1.56,.64,1), background .4s ease;
  pointer-events:none;
  will-change:left;
}
[data-theme="light"] .theme-toggle-thumb{left:25px !important;background:#f59e0b}
[data-theme="light"] .theme-toggle{background:#fef9c3;border-color:#fcd34d}
[data-theme="light"] .theme-toggle:hover{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.15)}
.theme-toggle-icons{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 6px;pointer-events:none;
  z-index:1;
}
.theme-toggle-icons svg{transition:opacity .3s ease}
.icon-moon{opacity:.9;stroke:#ffffff !important;fill:none !important;color:#ffffff}
.icon-sun{opacity:.2}
[data-theme="light"] .icon-moon{opacity:.2}
[data-theme="light"] .icon-sun{opacity:.9}

/* ── LIGHT MODE OVERRIDES ── */
[data-theme="light"] nav{background:var(--nav-bg);box-shadow:0 2px 16px rgba(0,0,0,.08)}
[data-theme="light"] .bottom-nav{background:rgba(200,215,240,0.22) !important;backdrop-filter:blur(56px) saturate(2.4) brightness(1.1) !important;-webkit-backdrop-filter:blur(56px) saturate(2.4) brightness(1.1) !important;box-shadow:0 8px 32px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.05),0 0 0 1px rgba(255,255,255,.6) inset,0 2px 0 rgba(255,255,255,.85) inset !important}
[data-theme="light"] .nav-topstrip{background:var(--nav-bg)}
[data-theme="light"] .stat-card{box-shadow:var(--card-shadow);background:var(--surface)}
[data-theme="light"] .card{box-shadow:var(--card-shadow)}
[data-theme="light"] .modal{box-shadow:0 8px 48px rgba(0,0,0,.18)}
[data-theme="light"] .grid-bg{opacity:.25;filter:invert(1)}
[data-theme="light"] #login-screen{background:linear-gradient(135deg,#dbeafe 0%,#f0f4f8 60%,#ede9fe 100%)}
[data-theme="light"] .login-box{box-shadow:0 8px 48px rgba(0,0,0,.12)}
[data-theme="light"] .fi{background:var(--surface2)}
[data-theme="light"] .btc-badge{background:rgba(0,136,204,.08);border-color:rgba(0,136,204,.2)}
[data-theme="light"] .acct-badge{background:rgba(0,136,204,.06);border-color:rgba(0,136,204,.15)}
[data-theme="light"] .nav-logo span{color:var(--accent)}
[data-theme="light"] .bnav-item.active{color:var(--accent)}
.bnav-item.active::before{
  content:'';position:absolute;inset:0;
  background:rgba(0,229,255,.08);
  border-radius:22px;
  border:1px solid rgba(0,229,255,.12);
}
[data-theme="light"] #bnav-indicator{background:linear-gradient(90deg,rgba(0,136,204,.6),var(--accent),rgba(0,136,204,.6));box-shadow:0 0 12px rgba(0,136,204,.7)}
[data-theme="light"] .btn-primary{background:var(--accent);color:#fff}
[data-theme="light"] .btn-ghost{border-color:var(--border);color:var(--text)}
[data-theme="light"] .logout-btn{border-color:rgba(239,68,68,.3);color:var(--danger)}
[data-theme="light"] .logout-btn:hover{background:rgba(239,68,68,.08)}
[data-theme="light"] .ph h1{color:var(--accent)}

[data-theme='dark'] .nav-logo .wealth-text,[data-theme='dark'] .nav-logo:not([data-theme]) .wealth-text{background:none;padding:0;color:var(--accent)}
/* ══ LIQUID GLASS (Light Mode) ══ */
[data-theme="light"] .stat-card{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  border:1px solid rgba(255,255,255,0.8);
  box-shadow:
    0 2px 12px rgba(0,0,0,.06),
    0 0 0 0.5px rgba(255,255,255,0.9) inset,
    0 1px 0 rgba(255,255,255,1) inset;
  position:relative;overflow:hidden;
}
[data-theme="light"] .stat-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 60%);
  pointer-events:none;border-radius:inherit;
}
[data-theme="light"] .card{
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,0.75);
  box-shadow:0 4px 20px rgba(0,0,0,.07),0 0 0 0.5px rgba(255,255,255,.85) inset;
}
[data-theme="light"] nav{
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(24px) saturate(2);
  -webkit-backdrop-filter:blur(24px) saturate(2);
  border-bottom:1px solid rgba(255,255,255,0.8);
  box-shadow:0 2px 20px rgba(0,0,0,.06),0 0 0 0.5px rgba(255,255,255,.9) inset;
}
[data-theme="light"] .nav-topstrip{
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(24px) saturate(2);
  -webkit-backdrop-filter:blur(24px) saturate(2);
  border-bottom:1px solid rgba(255,255,255,0.8);
  box-shadow:0 1px 12px rgba(0,0,0,.05);
}

[data-theme="light"] .modal{
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(32px) saturate(1.8);
  -webkit-backdrop-filter:blur(32px) saturate(1.8);
  border:1px solid rgba(255,255,255,0.9);
  box-shadow:0 8px 48px rgba(0,0,0,.14),0 0 0 0.5px rgba(255,255,255,.95) inset;
}
[data-theme="light"] .login-box{
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(32px) saturate(2);
  -webkit-backdrop-filter:blur(32px) saturate(2);
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:0 8px 48px rgba(0,0,0,.12),0 0 0 0.5px rgba(255,255,255,.95) inset;
  position:relative;overflow:hidden;
}
[data-theme="light"] .login-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  pointer-events:none;
}
[data-theme="light"] #login-screen{
  background:
    radial-gradient(ellipse at 20% 20%, rgba(147,197,253,.5) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(196,181,253,.4) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(186,230,253,.3) 0%, transparent 70%),
    linear-gradient(135deg,#e0f2fe,#f0f4f8,#ede9fe);
}
[data-theme="light"] .fi{
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.7);
}
[data-theme="light"] .fi:focus{
  background:rgba(255,255,255,0.85);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,136,204,.12);
}
[data-theme="light"] .acct-badge{
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.7);
}
[data-theme="light"] .btc-badge{
  background:rgba(255,255,255,0.4);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.6);
}
[data-theme="light"] .sync-bar{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.8);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
[data-theme="light"] .grid-bg{
  background-image:linear-gradient(rgba(0,136,204,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,136,204,.04) 1px,transparent 1px);
  opacity:1;
}

/* Dark mode: wealth-text no bg, cyan color */
:root:not([data-theme="light"]) .nav-logo .wealth-text{background:none;padding:0;border-radius:0;color:var(--accent)}

/* ══════════════════════════════════════════
   LIQUID GLASS v2 — iOS 26 Authentic
   Multi-layer: blur base + specular rim + 
   refraction tint + inner highlight
══════════════════════════════════════════ */

/* === DARK MODE: floating glass nav === */
.bottom-nav{
  /* Sudah di-set di class utama */
}

/* === LIGHT MODE: liquid glass nav === */
[data-theme="light"] .bottom-nav{
  background:rgba(210,225,245,0.28) !important;
  backdrop-filter:blur(52px) saturate(2.5) brightness(1.1) !important;
  -webkit-backdrop-filter:blur(52px) saturate(2.5) brightness(1.1) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.08),
    0 2px 8px rgba(0,0,0,.05),
    0 0 0 1px rgba(255,255,255,.65) inset,
    0 2px 0 rgba(255,255,255,.85) inset !important;
}
[data-theme="light"] .bnav-item{color:rgba(0,0,0,0.45)}
[data-theme="light"] .bnav-item.active{color:var(--accent)}
[data-theme="light"] .bnav-item.active::before{
  background:rgba(0,136,204,.08);
  border:1px solid rgba(0,136,204,.15);
}
[data-theme="light"] #bnav-indicator{
  background:linear-gradient(90deg,rgba(0,136,204,.5),var(--accent),rgba(0,136,204,.5));
  box-shadow:0 0 10px rgba(0,136,204,.7),0 0 3px rgba(0,136,204,.4);
}
[data-theme="light"] .bnav-item.active .bnav-icon{
  filter:drop-shadow(0 0 6px rgba(0,136,204,.6));
}

/* === LIQUID GLASS CARDS === */
[data-theme="light"] .stat-card{
  background:rgba(255,255,255,0.45);
  backdrop-filter:blur(24px) saturate(1.8) brightness(1.02);
  -webkit-backdrop-filter:blur(24px) saturate(1.8) brightness(1.02);
  border:none;
  box-shadow:
    0 4px 24px rgba(0,0,0,.07),
    0 1px 3px rgba(0,0,0,.05),
    0 0 0 1px rgba(255,255,255,.8) inset,
    0 2px 0 rgba(255,255,255,.95) inset;
  position:relative;overflow:hidden;
}
[data-theme="light"] .stat-card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;border-radius:inherit;
}
[data-theme="light"] .stat-card::after{
  content:'';position:absolute;
  top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  pointer-events:none;
}

/* === LIQUID GLASS MODAL === */
[data-theme="light"] .modal{
  background:rgba(240,244,252,0.72);
  backdrop-filter:blur(40px) saturate(2) brightness(1.05);
  -webkit-backdrop-filter:blur(40px) saturate(2) brightness(1.05);
  border:none;
  box-shadow:
    0 24px 64px rgba(0,0,0,.16),
    0 8px 24px rgba(0,0,0,.1),
    0 0 0 1px rgba(255,255,255,.85) inset,
    0 2px 0 rgba(255,255,255,.98) inset;
  position:relative;overflow:hidden;
}
[data-theme="light"] .modal::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,transparent 100%);
  pointer-events:none;
}
[data-theme="light"] .modal::after{
  content:'';position:absolute;
  top:0;left:15%;right:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  pointer-events:none;
}

/* === LIQUID GLASS NAV === */
[data-theme="light"] nav{
  background:rgba(245,248,255,0.6) !important;
  backdrop-filter:blur(32px) saturate(2) brightness(1.04) !important;
  -webkit-backdrop-filter:blur(32px) saturate(2) brightness(1.04) !important;
  border-bottom:none !important;
  box-shadow:
    0 2px 20px rgba(0,0,0,.06),
    0 1px 0 rgba(0,0,0,.04),
    0 0 0 1px rgba(255,255,255,.7) inset,
    0 1px 0 rgba(255,255,255,.9) inset !important;
}
[data-theme="light"] .nav-topstrip{
  background:rgba(245,248,255,0.6) !important;
  backdrop-filter:blur(32px) saturate(2) !important;
  -webkit-backdrop-filter:blur(32px) saturate(2) !important;
  border-bottom:1px solid rgba(255,255,255,.6) !important;
  box-shadow:0 1px 12px rgba(0,0,0,.05),0 0 0 0.5px rgba(255,255,255,.8) inset !important;
}

/* === LOGIN SCREEN GLASS === */
[data-theme="light"] .login-box{
  background:rgba(255,255,255,0.52);
  backdrop-filter:blur(40px) saturate(2.2) brightness(1.06);
  -webkit-backdrop-filter:blur(40px) saturate(2.2) brightness(1.06);
  border:none;
  box-shadow:
    0 16px 64px rgba(0,0,0,.12),
    0 4px 16px rgba(0,0,0,.08),
    0 0 0 1px rgba(255,255,255,.85) inset,
    0 2px 0 rgba(255,255,255,.98) inset;
  position:relative;overflow:hidden;
}
[data-theme="light"] .login-box::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:35%;
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,transparent 100%);
  pointer-events:none;
}
[data-theme="light"] .login-box::after{
  content:'';position:absolute;
  top:0;left:20%;right:20%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  pointer-events:none;
}

/* Dark mode nav glass juga */
:root:not([data-theme="light"]) nav{
  background:rgba(10,15,30,0.7);
  backdrop-filter:blur(32px) saturate(1.6);
  -webkit-backdrop-filter:blur(32px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 2px 20px rgba(0,0,0,.3),0 0 0 0.5px rgba(255,255,255,.04) inset;
}

/* ── SCROLL PERFORMANCE FIX ── */
#app{position:relative;min-height:100vh}

/* ── TABLE LIGHT MODE ── */
[data-theme="light"] td{border-bottom:1px solid rgba(0,0,0,.08)}
[data-theme="light"] th{background:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.1)}
[data-theme="light"] .tbl-wrap{background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.1)}
[data-theme="light"] tr:last-child td{border-bottom:none}
[data-theme="light"] .fi{background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.12);color:var(--text)}
[data-theme="light"] select.fi option{background:#fff;color:#000}

/* ══════════════════════════════════════════
   LIGHT MODE — COMPREHENSIVE AESTHETIC FIX
   Semua elemen dengan warna hardcode dark
══════════════════════════════════════════ */

/* Background halaman utama */
[data-theme="light"] body { background: var(--bg); }
[data-theme="light"] #app { background: var(--bg); }

/* Page headers */
[data-theme="light"] .ph p { color: var(--muted); }
[data-theme="light"] .ph h1 { color: var(--accent); }
[data-theme="light"] .sec-title { color: var(--text); }

/* Stat cards teks */
[data-theme="light"] .slabel { color: var(--muted) !important; }
[data-theme="light"] .sval { color: var(--text) !important; }
[data-theme="light"] .ssub { color: var(--muted) !important; }
[data-theme="light"] .sval.acc { color: var(--accent) !important; }
[data-theme="light"] .sval.pos { color: var(--accent3) !important; }
[data-theme="light"] .sval.gld { color: var(--accent4) !important; }

/* Cards & surfaces */
[data-theme="light"] .card { background: var(--surface); border-color: var(--border); }
[data-theme="light"] .tbl-wrap table { color: var(--text); }
[data-theme="light"] th { color: var(--muted) !important; }
[data-theme="light"] td { color: var(--text) !important; }
[data-theme="light"] td.pos, [data-theme="light"] .pos { color: var(--accent3) !important; }
[data-theme="light"] td.neg, [data-theme="light"] .neg { color: var(--danger) !important; }
[data-theme="light"] td.acc { color: var(--accent) !important; }

/* Form inputs */
[data-theme="light"] .fi { color: var(--text) !important; background: #fff !important; border-color: var(--border) !important; }
[data-theme="light"] .fl { color: var(--muted) !important; }
[data-theme="light"] select.fi { color: var(--text) !important; }
[data-theme="light"] input::placeholder { color: var(--muted) !important; opacity:.7; }

/* Buttons */
[data-theme="light"] .btn { color: var(--text); border-color: var(--border); background: var(--surface); }
[data-theme="light"] .btn-primary { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
[data-theme="light"] .btn-ghost { border-color: var(--border) !important; color: var(--text) !important; background: transparent; }
[data-theme="light"] .btn-del { color: var(--danger) !important; border-color: rgba(192,57,43,.25) !important; background: rgba(192,57,43,.05) !important; }
[data-theme="light"] .lbtn { background: var(--accent) !important; color: #fff !important; }
[data-theme="light"] .lbtn-ghost { border-color: var(--border); color: var(--text); }

/* Chart section & badges */
[data-theme="light"] .btc-chart-wrap { background: var(--surface); border-color: var(--border); }
[data-theme="light"] .btc-chart-header { border-bottom-color: var(--border); }
[data-theme="light"] .btc-price-big { color: var(--text) !important; }
[data-theme="light"] .btc-price-idr { color: var(--muted) !important; }
[data-theme="light"] .tf-btn { background: var(--surface2) !important; color: var(--muted) !important; border-color: var(--border) !important; }
[data-theme="light"] .tf-btn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* DCA page */
[data-theme="light"] .dca-sum-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="light"] .dca-sum-val { color: var(--text) !important; }
[data-theme="light"] .dca-sum-label { color: var(--muted) !important; }
[data-theme="light"] .empty h3 { color: var(--muted) !important; }
[data-theme="light"] .empty p { color: var(--muted) !important; opacity: .7; }

/* Seed words */
[data-theme="light"] .sw { background: #eef5ff !important; border-color: rgba(0,112,192,.3) !important; color: var(--accent) !important; }
[data-theme="light"] .sw-num { color: var(--muted) !important; }
[data-theme="light"] .sinput { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--text) !important; }

/* Modal internals */
[data-theme="light"] .modal { color: var(--text); }
[data-theme="light"] .modal h2, [data-theme="light"] .modal h3 { color: var(--text); }
[data-theme="light"] .modal label { color: var(--muted); }
[data-theme="light"] .modal .sec-hdr { border-color: var(--border); }
[data-theme="light"] .overlay { background: rgba(15,30,46,.35) !important; }

/* AI Chat page */
[data-theme="light"] .ai-chat-header { background: var(--surface) !important; border-bottom-color: var(--border) !important; }
[data-theme="light"] .ai-chat-title { color: var(--text) !important; }
[data-theme="light"] .ai-chat-sub { color: var(--muted) !important; }
[data-theme="light"] .msg-bubble { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="light"] .msg-row.mine .msg-bubble { background: var(--accent) !important; color: #fff !important; }
[data-theme="light"] .msg-sender-name { color: var(--muted) !important; }
[data-theme="light"] .msg-time { color: var(--muted) !important; }
[data-theme="light"] .ai-chip { background: var(--surface) !important; border-color: var(--border) !important; color: var(--accent) !important; }
[data-theme="light"] .ai-chip:hover { background: var(--surface2) !important; border-color: var(--accent) !important; }
[data-theme="light"] .chat-input-area { background: var(--surface) !important; border-top-color: var(--border) !important; }
[data-theme="light"] .chat-input { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="light"] .ai-bubble-content { color: var(--text) !important; }
[data-theme="light"] .ai-bubble-content strong { color: var(--accent) !important; }
[data-theme="light"] .ai-bubble-content code { background: rgba(0,112,192,.08) !important; border-color: rgba(0,112,192,.18) !important; color: var(--accent) !important; }
[data-theme="light"] #ai-typing-provider-status span { color: #047857 !important; }

/* Community Chat */
[data-theme="light"] .chat-rooms-list { background: var(--bg) !important; }
[data-theme="light"] .room-item { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="light"] .room-name { color: var(--text) !important; }
[data-theme="light"] .room-preview { color: var(--muted) !important; }
[data-theme="light"] .chat-room-header { background: var(--surface) !important; border-bottom-color: var(--border) !important; }
[data-theme="light"] .chat-room-name { color: var(--text) !important; }
[data-theme="light"] .messages-area { background: var(--bg) !important; }
[data-theme="light"] .chat-empty-text { color: var(--muted) !important; }

/* News page */
[data-theme="light"] .news-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="light"] .news-title { color: var(--text) !important; }
[data-theme="light"] .news-snippet { color: var(--muted) !important; }
[data-theme="light"] .news-meta { color: var(--muted) !important; border-top-color: var(--border) !important; }
[data-theme="light"] .nf-btn { background: var(--surface2) !important; color: var(--muted) !important; border-color: var(--border) !important; }
[data-theme="light"] .nf-btn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* Portfolio page */
[data-theme="light"] .port-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="light"] .port-name { color: var(--text) !important; }
[data-theme="light"] .port-val { color: var(--text) !important; }

/* Simulation page */
[data-theme="light"] .sim-param-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="light"] .sim-param-toggle { color: var(--text) !important; background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="light"] .sim-sum-card { background: var(--surface2) !important; border-color: var(--border) !important; }
[data-theme="light"] .sim-sum-label { color: var(--muted) !important; }
[data-theme="light"] .sim-sum-val { color: var(--text) !important; }

/* Cashflow page */
[data-theme="light"] .cf-sum-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="light"] .badge { color: var(--text) !important; }

/* Alerts & Reminders */
[data-theme="light"] .alert-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="light"] .alert-label { color: var(--text) !important; }
[data-theme="light"] .alert-sub { color: var(--muted) !important; }

/* Theme page */
[data-theme="light"] .theme-preset-card { background: var(--surface) !important; border-color: var(--border) !important; }

/* AI Predict page */
[data-theme="light"] #pred-verdict { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="light"] #pred-ai-narrative { color: var(--text) !important; }

/* Section headers */
[data-theme="light"] .sec-hdr { border-bottom-color: var(--border) !important; }

/* Scrollbar light mode */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--surface2); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Toast */
[data-theme="light"] .toast-msg { background: #1e2d3d !important; color: #f0f6ff !important; }

/* Fear & Greed widget */
[data-theme="light"] #fear-greed-widget { background: var(--surface) !important; border-color: var(--border) !important; }

/* Inline hardcoded dark rgba overrides — semua elemen pakai background rgba gelap */
[data-theme="light"] [style*="background:rgba(0,229,255,.08)"],
[data-theme="light"] [style*="background:rgba(0,229,255, .08)"] { background: rgba(0,112,192,.07) !important; }
[data-theme="light"] [style*="background:rgba(0,229,255,.1)"] { background: rgba(0,112,192,.08) !important; }
[data-theme="light"] [style*="background:rgba(0,229,255,.15)"] { background: rgba(0,112,192,.1) !important; }
[data-theme="light"] [style*="background:rgba(124,58,237,.08)"] { background: rgba(109,40,217,.07) !important; }
[data-theme="light"] [style*="background:rgba(16,185,129,.08)"],
[data-theme="light"] [style*="background:rgba(16,185,129,.07)"] { background: rgba(4,120,87,.07) !important; }
[data-theme="light"] [style*="background:rgba(245,158,11,.08)"],
[data-theme="light"] [style*="background:rgba(245,158,11,.06)"] { background: rgba(180,83,9,.06) !important; }
[data-theme="light"] [style*="background:rgba(239,68,68,.08)"] { background: rgba(192,57,43,.06) !important; }
[data-theme="light"] [style*="background:#050810"],
[data-theme="light"] [style*="background:#0b1120"],
[data-theme="light"] [style*="background:#111827"] { background: var(--surface2) !important; }
[data-theme="light"] [style*="background:var(--bg)"] { background: var(--bg) !important; }
[data-theme="light"] [style*="background:var(--surface)"] { background: var(--surface) !important; }
[data-theme="light"] [style*="color:var(--text)"] { color: var(--text) !important; }
[data-theme="light"] [style*="color:var(--muted)"] { color: var(--muted) !important; }
[data-theme="light"] [style*="color:var(--accent)"] { color: var(--accent) !important; }
[data-theme="light"] [style*="border.*var(--border)"] { border-color: var(--border) !important; }

/* Inline text warna putih yang tidak sesuai di light */
[data-theme="light"] [style*="color:#e2e8f0"],
[data-theme="light"] [style*="color:#f0f9ff"],
[data-theme="light"] [style*="color:#bae6fd"],
[data-theme="light"] [style*="color:rgba(255,255,255"] { color: var(--text) !important; }
[data-theme="light"] [style*="color:rgba(226,232,240"] { color: var(--muted) !important; }

/* Divider dan border */
[data-theme="light"] [style*="border-color:#1e2d45"],
[data-theme="light"] [style*="border:#1e2d45"] { border-color: var(--border) !important; }

/* Inline dark surface backgrounds jadi terang */
[data-theme="light"] [style*="background:linear-gradient(135deg,#0a1628"],
[data-theme="light"] [style*="background:linear-gradient(135deg,rgba(5,8,16"],
[data-theme="light"] [style*="background:linear-gradient(135deg,rgba(11,17,32"] { background: linear-gradient(135deg, #e8f0fb, #f0f6ff) !important; }

/* Feat buttons di dashboard — tetap colorful tapi lebih cerah */
[data-theme="light"] .feat-btn { box-shadow: 0 6px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.4) !important; }
[data-theme="light"] .feat-btn .fb-label { text-shadow: 0 1px 4px rgba(0,0,0,.15) !important; }

/* Sync bar */
[data-theme="light"] .sync-bar { color: var(--muted) !important; }
[data-theme="light"] #acct-sync { color: var(--muted) !important; }

/* Bottom nav labels */
[data-theme="light"] .bnav-label { color: var(--muted) !important; }
[data-theme="light"] .bnav-item.active .bnav-label { color: var(--accent) !important; }

/* PWA install banner light */
[data-theme="light"] #pwa-install-banner {
  background: linear-gradient(135deg, #e8f4ff, #f0f6ff, #ede9fe) !important;
  border-color: rgba(0,112,192,.2) !important;
}
[data-theme="light"] #pwa-install-banner * { color: var(--text) !important; }
[data-theme="light"] #pwa-banner-btn { color: var(--accent) !important; border-color: rgba(0,112,192,.4) !important; background: rgba(0,112,192,.08) !important; }

/* Chart canvas area containers */
[data-theme="light"] .btc-chart-wrap,
[data-theme="light"] [id^="page-"] .card,
[data-theme="light"] .chart-section { background: var(--surface) !important; border-color: var(--border) !important; }

/* DCA chart area */
[data-theme="light"] #dca-btc-chart-wrap { background: var(--surface) !important; border-color: var(--border) !important; }

/* Dash chat preview */
[data-theme="light"] #dash-chat-preview { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }

/* Notif cards */
[data-theme="light"] #notif-perm-card { background: rgba(180,83,9,.06) !important; border-color: rgba(180,83,9,.2) !important; }

/* Coming soon overlay */
[data-theme="light"] #coming-soon-overlay { background: rgba(15,30,46,.5) !important; }

/* QR Modal */
[data-theme="light"] #qr-modal-box { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }

/* News modal */
[data-theme="light"] #news-modal-box { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
[data-theme="light"] .nm-title { color: var(--text) !important; }
[data-theme="light"] .nm-body { color: var(--text) !important; }
[data-theme="light"] .nm-meta { color: var(--muted) !important; border-bottom-color: var(--border) !important; }

/* ── CHAT: z-AI header inline override ── */
[data-theme="light"] #ai-room-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── CHAT: messages area ── */
[data-theme="light"] .messages-area {
  background: var(--bg) !important;
}

/* ── CHAT: bubbles theirs (orang lain) ── */
[data-theme="light"] .msg-row.theirs .msg-bubble {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  backdrop-filter: none !important;
}

/* ── CHAT: bubbles mine (sendiri) ── */
[data-theme="light"] .msg-row.mine .msg-bubble {
  background: linear-gradient(135deg, #0070c0, #0099e6) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(0,112,192,.3) !important;
  backdrop-filter: none !important;
}

/* ── CHAT: sender name & time ── */
[data-theme="light"] .msg-sender-name { color: var(--muted) !important; }
[data-theme="light"] .msg-row.mine .msg-sender-name { color: rgba(0,112,192,.7) !important; }
[data-theme="light"] .msg-time { color: var(--muted) !important; }
[data-theme="light"] .msg-row.mine .msg-time { color: rgba(255,255,255,.7) !important; }

/* ── CHAT: date separator ── */
[data-theme="light"] .msg-date-sep {
  background: rgba(0,0,0,.05) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

/* ── CHAT: reply ref ── */
[data-theme="light"] .reply-preview {
  background: rgba(0,112,192,.06) !important;
  border-color: rgba(0,112,192,.2) !important;
}

/* ── CHAT: emoji panel ── */
[data-theme="light"] #emoji-picker-panel {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}
[data-theme="light"] .emoji-cat-btn { color: var(--text) !important; }
[data-theme="light"] .emoji-cat-btn:hover { background: var(--surface2) !important; }
[data-theme="light"] .emoji-cat-btn.active { background: rgba(0,112,192,.1) !important; outline-color: rgba(0,112,192,.3) !important; }
[data-theme="light"] .emoji-btn:hover { background: var(--surface2) !important; }

/* ── CHAT: room list ── */
[data-theme="light"] .rooms-page { background: var(--bg) !important; }
[data-theme="light"] .room-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
[data-theme="light"] .room-item:hover { background: var(--surface2) !important; }
[data-theme="light"] .room-name { color: var(--text) !important; }
[data-theme="light"] .room-preview { color: var(--muted) !important; }
[data-theme="light"] .room-meta { color: var(--muted) !important; }
[data-theme="light"] .room-unread {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ── CHAT: delete button in header ── */
[data-theme="light"] .room-header .btn-del,
[data-theme="light"] .room-header button {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

/* ── BLOCK 13 ── */
${css}

/* ── BLOCK 14 ── */
#modal-share {
  display:none;position:fixed;inset:0;z-index:600;
  background:rgba(2,4,12,.92);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  align-items:center;justify-content:center;padding:1rem;
}
#modal-share::before {
  content:'';position:absolute;top:-20%;right:-10%;width:55%;height:55%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,200,255,0.11),transparent 65%);
  filter:blur(40px);pointer-events:none;
}
#modal-share::after {
  content:'';position:absolute;bottom:-15%;left:-10%;width:50%;height:50%;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,0.12),transparent 65%);
  filter:blur(40px);pointer-events:none;
}
#modal-share-inner {
  position:relative;z-index:1;
  background:rgba(8,11,22,0.55);
  backdrop-filter:blur(48px) saturate(180%);
  -webkit-backdrop-filter:blur(48px) saturate(180%);
  border-radius:28px;padding:0;
  width:100%;max-width:380px;max-height:94vh;overflow:hidden;
  border:1px solid rgba(255,255,255,0.13);
  box-shadow:0 0 0 1px rgba(0,200,255,0.15),0 40px 100px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18);
}
#modal-share-inner::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:10;
  background:linear-gradient(90deg,transparent 0%,#00c8ff 25%,#a855f7 60%,#00f5a0 85%,transparent 100%);
  border-radius:28px 28px 0 0;pointer-events:none;
}
#modal-share-inner::after {
  content:'';position:absolute;top:0;left:0;right:0;height:50%;z-index:0;
  background:linear-gradient(175deg,rgba(255,255,255,.07) 0%,transparent 100%);
  border-radius:28px 28px 0 0;pointer-events:none;
}
.ms-header {
  position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;
  padding:1.15rem 1.3rem 1rem;border-bottom:1px solid rgba(255,255,255,.07);
}
#share-canvas-wrap {
  position:relative;z-index:1;padding:.85rem 1rem;overflow-y:auto;max-height:62vh;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#share-canvas-wrap-inner {
  border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 12px 48px rgba(0,0,0,.7),0 0 28px rgba(0,200,255,.07);
}
#share-canvas-wrap-inner::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,#00c8ff,#a855f7,transparent);pointer-events:none;
}
.ms-footer { position:relative;z-index:1;padding:.85rem 1rem 1.15rem; }
#share-download-btn {
  width:100%;padding:.9rem;border-radius:16px;border:none;
  background:linear-gradient(135deg,#00c8ff 0%,#0070f3 50%,#a855f7 100%);
  color:#fff;font-size:.82rem;font-weight:900;font-family:'Inter',sans-serif;
  letter-spacing:.1em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.55rem;
  box-shadow:0 0 32px rgba(0,200,255,.3),0 4px 20px rgba(0,200,255,.15),inset 0 1px 0 rgba(255,255,255,.3);
  transition:all .2s;
}
#share-download-btn:hover { transform:translateY(-2px);box-shadow:0 0 48px rgba(0,200,255,.45),0 8px 28px rgba(0,200,255,.2); }
#share-close-btn {
  width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);color:rgba(148,163,184,.7);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .18s;flex-shrink:0;padding:0;
}
#share-close-btn:hover { background:rgba(255,255,255,.14);color:#e2e8f0;border-color:rgba(0,200,255,.3); }

/* ── BLOCK 15 ── */
#modal-futures-share { display:none;position:fixed;inset:0;z-index:600;background:rgba(2,4,12,.92);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);align-items:center;justify-content:center;padding:1rem; }

/* Colorful ambient blobs in backdrop */
#modal-futures-share::before {
  content:'';position:absolute;top:-20%;right:-10%;width:55%;height:55%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,245,160,0.12),transparent 65%);
  filter:blur(40px);pointer-events:none;
}
#modal-futures-share::after {
  content:'';position:absolute;bottom:-15%;left:-10%;width:50%;height:50%;border-radius:50%;
  background:radial-gradient(circle,rgba(120,40,255,0.14),transparent 65%);
  filter:blur(40px);pointer-events:none;
}

#mfs-inner {
  position:relative;z-index:1;
  background:rgba(8,11,22,0.55);
  backdrop-filter:blur(48px) saturate(180%);
  -webkit-backdrop-filter:blur(48px) saturate(180%);
  border-radius:28px;
  width:100%;max-width:380px;max-height:94vh;overflow:hidden;
  /* Multi-layer colorful border */
  border:1px solid rgba(255,255,255,0.13);
  box-shadow:
    0 0 0 1px rgba(0,245,160,0.18),
    0 40px 100px rgba(0,0,0,0.9),
    0 0 60px rgba(0,245,160,0.06),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.04);
}

/* Rainbow top border */
#mfs-inner::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:10;
  background:linear-gradient(90deg,transparent 0%,#00f5a0 25%,#00c8ff 55%,#a855f7 80%,transparent 100%);
  border-radius:28px 28px 0 0;pointer-events:none;
}

/* Glass shine overlay */
#mfs-inner::after {
  content:'';position:absolute;top:0;left:0;right:0;height:50%;z-index:0;
  background:linear-gradient(175deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 50%,transparent 100%);
  border-radius:28px 28px 0 0;pointer-events:none;
}

#mfs-header {
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.15rem 1.3rem 1rem;
  border-bottom:1px solid rgba(255,255,255,0.07);
  background:rgba(0,0,0,0.1);
}

#mfs-canvas-wrap {
  position:relative;z-index:1;
  padding:.85rem 1rem;
  overflow-y:auto;max-height:62vh;
}

#mfs-canvas-wrap-inner {
  border-radius:16px;overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 12px 48px rgba(0,0,0,0.7),
    0 0 32px rgba(0,245,160,0.08);
}

#mfs-footer {
  position:relative;z-index:1;
  padding:.85rem 1rem 1.15rem;
  border-top:1px solid rgba(255,255,255,0.06);
  background:rgba(0,0,0,0.15);
}

#mfs-dl-btn {
  width:100%;padding:.9rem;border-radius:16px;border:none;
  background:linear-gradient(135deg,#00f5a0 0%,#00d4c8 50%,#00b4ff 100%);
  color:#030f08;font-size:.82rem;font-weight:900;
  font-family:'Inter',sans-serif;letter-spacing:.1em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  box-shadow:
    0 0 32px rgba(0,245,160,0.35),
    0 4px 20px rgba(0,245,160,0.2),
    inset 0 1px 0 rgba(255,255,255,0.35);
  transition:all .2s;
}
#mfs-dl-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 0 48px rgba(0,245,160,0.5),0 8px 28px rgba(0,245,160,0.25),inset 0 1px 0 rgba(255,255,255,0.4);
}
#mfs-dl-btn:active { transform:translateY(0); }

#mfs-close-btn {
  width:32px;height:32px;border-radius:10px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(148,163,184,0.7);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;flex-shrink:0;
}
#mfs-close-btn:hover { background:rgba(255,255,255,0.14);color:#e2e8f0;border-color:rgba(0,245,160,0.3); }

/* ── BLOCK 16 ── */
@keyframes qrScan { 0%,100%{top:10%;opacity:.7} 50%{top:82%;opacity:1} }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── BLOCK 17 ── */
@keyframes slideUpBanner{from{transform:translateY(120px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── BLOCK 18 ── */
@keyframes wc-slide-up { from { transform:translateY(60px); opacity:0; } to { transform:translateY(0); opacity:1; } }
#wc-modal-overlay.open { display:flex !important; }
#wc-modal-box { animation:wc-slide-up .22s cubic-bezier(.32,1.01,.46,1); }
.wc-ext-btn {
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:12px;
  padding:.7rem .4rem;cursor:pointer;transition:all .18s;
  color:var(--muted);font-size:.68rem;font-weight:700;font-family:'Inter',sans-serif;
}
.wc-ext-btn:hover,.wc-ext-btn:active { border-color:rgba(167,139,250,.5);background:rgba(124,58,237,.1);color:var(--text);transform:translateY(-1px); }
.wc-ext-icon {
  width:46px;height:46px;border-radius:12px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}

/* ── BLOCK 19 ── */
#modal-sighist-share {
  display:none;position:fixed;inset:0;z-index:601;
  background:rgba(2,4,12,.92);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  align-items:center;justify-content:center;padding:1rem;
}
#modal-sighist-share::before {
  content:'';position:absolute;top:-20%;right:-10%;width:55%;height:55%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,245,160,0.12),transparent 65%);
  filter:blur(40px);pointer-events:none;
}
#modal-sighist-share::after {
  content:'';position:absolute;bottom:-15%;left:-10%;width:50%;height:50%;border-radius:50%;
  background:radial-gradient(circle,rgba(120,40,255,0.13),transparent 65%);
  filter:blur(40px);pointer-events:none;
}
#msh-inner {
  position:relative;z-index:1;
  background:rgba(8,11,22,0.55);
  backdrop-filter:blur(48px) saturate(180%);
  -webkit-backdrop-filter:blur(48px) saturate(180%);
  border-radius:28px;width:100%;max-width:380px;max-height:94vh;overflow:hidden;
  border:1px solid rgba(255,255,255,0.13);
  box-shadow:0 0 0 1px rgba(0,245,160,0.18),0 40px 100px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18);
}
#msh-inner::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:10;
  background:linear-gradient(90deg,transparent 0%,#00f5a0 25%,#00d4ff 55%,#a855f7 80%,transparent 100%);
  border-radius:28px 28px 0 0;pointer-events:none;
}
#msh-inner::after {
  content:'';position:absolute;top:0;left:0;right:0;height:50%;z-index:0;
  background:linear-gradient(175deg,rgba(255,255,255,.07) 0%,transparent 100%);
  border-radius:28px 28px 0 0;pointer-events:none;
}
#msh-header {
  position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;
  padding:1.15rem 1.3rem 1rem;border-bottom:1px solid rgba(255,255,255,.07);
}
#msh-canvas-wrap { position:relative;z-index:1;padding:.85rem 1rem;overflow-y:auto;max-height:62vh; }
#msh-canvas-inner { border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 12px 48px rgba(0,0,0,.7),0 0 32px rgba(0,245,160,.07); }
#msh-footer { position:relative;z-index:1;padding:.85rem 1rem 1.15rem;border-top:1px solid rgba(255,255,255,.06); }
#msh-dl-btn {
  width:100%;padding:.9rem;border-radius:16px;border:none;
  background:linear-gradient(135deg,#00f5a0 0%,#00d4c8 50%,#00b4ff 100%);
  color:#030f08;font-size:.82rem;font-weight:900;font-family:'Inter',sans-serif;
  letter-spacing:.1em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.55rem;
  box-shadow:0 0 32px rgba(0,245,160,.35),0 4px 20px rgba(0,245,160,.2),inset 0 1px 0 rgba(255,255,255,.35);
  transition:all .2s;
}
#msh-dl-btn:hover { transform:translateY(-2px);box-shadow:0 0 48px rgba(0,245,160,.5),0 8px 28px rgba(0,245,160,.25); }
#msh-close-btn {
  width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);color:rgba(148,163,184,.7);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .18s;flex-shrink:0;
}
#msh-close-btn:hover { background:rgba(255,255,255,.14);color:#e2e8f0;border-color:rgba(0,245,160,.3); }

/* ── BLOCK 20 ── */
/* ═══════════════════════════════════════════════════════
   LIQUID GLASS VARIABLES
═══════════════════════════════════════════════════════ */
:root {
  --glass-bg:          rgba(12, 18, 36, 0.45);
  --glass-bg-raised:   rgba(16, 24, 48, 0.52);
  --glass-bg-float:    rgba(8,  13, 28, 0.38);
  --glass-blur:        blur(32px) saturate(1.7) brightness(1.1);
  --glass-blur-sm:     blur(18px) saturate(1.5) brightness(1.08);
  --glass-blur-lg:     blur(52px) saturate(1.9) brightness(1.15);
  --glass-border:      rgba(255, 255, 255, 0.08);
  --glass-border-top:  rgba(255, 255, 255, 0.13);
  --glass-shine:       linear-gradient(180deg, rgba(255,255,255,.09) 0%, transparent 55%);
  --glass-rim:         0 0 0 1px rgba(255,255,255,.07) inset, 0 1px 0 rgba(255,255,255,.12) inset;
  --glass-shadow-sm:   0 4px 16px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2);
  --glass-shadow-md:   0 8px 32px rgba(0,0,0,.4),  0 2px 8px rgba(0,0,0,.25);
  --glass-shadow-lg:   0 16px 56px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3);
  --glass-shadow-xl:   0 24px 80px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.35);
}
[data-theme="light"] {
  --glass-bg:          rgba(255, 255, 255, 0.48);
  --glass-bg-raised:   rgba(255, 255, 255, 0.62);
  --glass-bg-float:    rgba(245, 250, 255, 0.42);
  --glass-blur:        blur(32px) saturate(2.2) brightness(1.04);
  --glass-blur-sm:     blur(18px) saturate(2.0) brightness(1.03);
  --glass-blur-lg:     blur(52px) saturate(2.5) brightness(1.06);
  --glass-border:      rgba(255, 255, 255, 0.75);
  --glass-border-top:  rgba(255, 255, 255, 0.92);
  --glass-shine:       linear-gradient(180deg, rgba(255,255,255,.55) 0%, transparent 55%);
  --glass-rim:         0 0 0 1px rgba(255,255,255,.85) inset, 0 2px 0 rgba(255,255,255,.95) inset;
  --glass-shadow-sm:   0 4px 16px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  --glass-shadow-md:   0 8px 28px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.06);
  --glass-shadow-lg:   0 16px 48px rgba(0,0,0,.13), 0 4px 16px rgba(0,0,0,.08);
  --glass-shadow-xl:   0 24px 72px rgba(0,0,0,.16), 0 8px 24px rgba(0,0,0,.1);
}

/* ── STAT CARDS ── */
.stat-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-top-color: var(--glass-border-top) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}
.stat-card:hover {
  background: rgba(15,24,48,.58) !important;
  border-color: rgba(0,229,255,.28) !important;
  border-top-color: rgba(0,229,255,.38) !important;
  box-shadow: 0 0 28px rgba(0,229,255,.12), 0 8px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(0,229,255,.1) inset, 0 1px 0 rgba(0,229,255,.2) inset !important;
}
[data-theme="light"] .stat-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-top-color: var(--glass-border-top) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}
[data-theme="light"] .stat-card:hover {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(0,112,192,.3) !important;
  box-shadow: 0 0 20px rgba(0,112,192,.1), 0 8px 28px rgba(0,0,0,.1), var(--glass-rim) !important;
}

/* ── MODAL ── */
.modal {
  background: var(--glass-bg-raised) !important;
  backdrop-filter: var(--glass-blur-lg) !important;
  -webkit-backdrop-filter: var(--glass-blur-lg) !important;
  border: 1px solid var(--glass-border) !important;
  border-top-color: rgba(255,255,255,.16) !important;
  box-shadow: var(--glass-shadow-xl), var(--glass-rim) !important;
}
[data-theme="light"] .modal {
  background: rgba(245,250,255,.70) !important;
  backdrop-filter: var(--glass-blur-lg) !important;
  -webkit-backdrop-filter: var(--glass-blur-lg) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  border-top-color: white !important;
  box-shadow: var(--glass-shadow-lg), var(--glass-rim) !important;
}

/* ── MODAL OVERLAY ── */
.overlay {
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  background: rgba(0,0,0,.55) !important;
}
[data-theme="light"] .overlay {
  background: rgba(10,20,40,.25) !important;
  backdrop-filter: blur(20px) saturate(1.6) brightness(.98) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(.98) !important;
}

/* ── CHART WRAPS ── */
.chart-wrap, .btc-chart-wrap {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-top-color: var(--glass-border-top) !important;
  box-shadow: var(--glass-shadow-md), var(--glass-rim) !important;
}
[data-theme="light"] .chart-wrap, [data-theme="light"] .btc-chart-wrap {
  background: rgba(255,255,255,.52) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}

/* ── PORT CARDS ── */
.port-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-top-color: var(--glass-border-top) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}
.port-card:hover {
  background: rgba(14,22,44,.62) !important;
  border-color: rgba(0,229,255,.25) !important;
  box-shadow: 0 0 24px rgba(0,229,255,.1), 0 8px 32px rgba(0,0,0,.45), var(--glass-rim) !important;
}
[data-theme="light"] .port-card {
  background: rgba(255,255,255,.5) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}
[data-theme="light"] .port-card:hover {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(0,112,192,.25) !important;
}

/* ── SIM CARDS ── */
.sim-card, .sim-param-card, .sim-sum-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-top-color: var(--glass-border-top) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}
[data-theme="light"] .sim-card, [data-theme="light"] .sim-param-card, [data-theme="light"] .sim-sum-card {
  background: rgba(255,255,255,.5) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}
.sim-sum-card.accent {
  border-color: rgba(0,229,255,.2) !important;
  border-top-color: rgba(0,229,255,.3) !important;
  background: rgba(0,229,255,.05) !important;
  box-shadow: 0 0 20px rgba(0,229,255,.06), var(--glass-shadow-sm), var(--glass-rim) !important;
}
.sim-sum-card.green {
  border-color: rgba(16,185,129,.2) !important;
  border-top-color: rgba(16,185,129,.3) !important;
  background: rgba(16,185,129,.05) !important;
  box-shadow: 0 0 20px rgba(16,185,129,.06), var(--glass-shadow-sm), var(--glass-rim) !important;
}

/* ── TABLE WRAP ── */
.tbl-wrap {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-top-color: var(--glass-border-top) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
}
th {
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
tr:hover td { background: rgba(0,229,255,.035) !important; }
[data-theme="light"] .tbl-wrap {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}
[data-theme="light"] th { background: rgba(255,255,255,.5) !important; border-bottom: 1px solid rgba(0,0,0,.07) !important; }
[data-theme="light"] tr:hover td { background: rgba(0,112,192,.04) !important; }

/* ── TOAST ── */
.toast-msg, .toast-inner {
  background: rgba(10,16,30,.82) !important;
  backdrop-filter: blur(40px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-top-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.06) inset, 0 1px 0 rgba(255,255,255,.14) inset !important;
}
[data-theme="light"] .toast-msg, [data-theme="light"] .toast-inner {
  background: rgba(15,25,46,.88) !important;
  backdrop-filter: blur(40px) saturate(2) !important;
  -webkit-backdrop-filter: blur(40px) saturate(2) !important;
  color: #f0f6ff !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* ── SYNC BAR ── */
.sync-bar {
  background: rgba(10,16,30,.70) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-top-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}
[data-theme="light"] .sync-bar {
  background: rgba(240,248,255,.72) !important;
  backdrop-filter: blur(24px) saturate(2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(2) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.08), var(--glass-rim) !important;
}

/* ── FORM INPUTS ── */
.fi, .fs {
  background: rgba(6,10,22,.55) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.06) !important;
}
.fi:focus, .fs:focus {
  background: rgba(8,14,30,.65) !important;
  border-color: rgba(0,229,255,.45) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.1), 0 0 16px rgba(0,229,255,.08), inset 0 1px 3px rgba(0,0,0,.3) !important;
}
.sinput {
  background: rgba(6,10,22,.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3) !important;
}
.sinput:focus {
  border-color: rgba(0,229,255,.5) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.12), inset 0 1px 3px rgba(0,0,0,.25) !important;
}
[data-theme="light"] .fi, [data-theme="light"] .fs {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(12px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.8) !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.9) !important;
}
[data-theme="light"] .fi:focus, [data-theme="light"] .fs:focus {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(0,112,192,.4) !important;
  box-shadow: 0 0 0 3px rgba(0,112,192,.1), inset 0 1px 2px rgba(0,0,0,.04) !important;
}
[data-theme="light"] .sinput {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(0,0,0,.1) !important;
}

/* ── BTC & ACCT BADGES ── */
.btc-badge {
  background: rgba(12,18,36,.55) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-top-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05) inset !important;
}
.btc-badge:hover {
  background: rgba(16,24,46,.7) !important;
  border-color: rgba(0,229,255,.3) !important;
  box-shadow: 0 0 16px rgba(0,229,255,.12), 0 4px 16px rgba(0,0,0,.35) !important;
}
.acct-badge {
  background: rgba(12,18,36,.55) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-top-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05) inset !important;
}
.acct-badge:hover {
  background: rgba(16,24,46,.7) !important;
  border-color: rgba(0,229,255,.28) !important;
  box-shadow: 0 0 14px rgba(0,229,255,.1), 0 4px 14px rgba(0,0,0,.3) !important;
}
[data-theme="light"] .btc-badge, [data-theme="light"] .acct-badge {
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(20px) saturate(2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(2) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.07), var(--glass-rim) !important;
}

/* ── LOGIN BOX ── */
.login-box {
  background: rgba(10,16,32,.62) !important;
  backdrop-filter: blur(56px) saturate(1.9) brightness(1.12) !important;
  -webkit-backdrop-filter: blur(56px) saturate(1.9) brightness(1.12) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-top-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 0 120px rgba(0,0,0,.7), 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07) inset, 0 1px 0 rgba(255,255,255,.15) inset !important;
}
[data-theme="light"] .login-box {
  background: rgba(255,255,255,.58) !important;
  backdrop-filter: blur(56px) saturate(2.5) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(56px) saturate(2.5) brightness(1.06) !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 16px 72px rgba(0,0,0,.12), 0 4px 20px rgba(0,0,0,.08), var(--glass-rim) !important;
}

/* ── LTABS ── */
.ltabs {
  background: rgba(6,10,22,.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.ltab.active {
  box-shadow: 0 2px 14px rgba(0,229,255,.22), inset 0 1px 0 rgba(255,255,255,.2) !important;
  text-shadow: 0 0 12px rgba(0,229,255,.4);
}
[data-theme="light"] .ltabs {
  background: rgba(225,235,255,.4) !important;
  backdrop-filter: blur(16px) saturate(2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(2) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
}

/* ── SEED WARN ── */
.seed-warn {
  background: rgba(245,158,11,.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(245,158,11,.2) !important;
  box-shadow: 0 0 20px rgba(245,158,11,.06), inset 0 1px 0 rgba(245,158,11,.08) !important;
}

/* ── SEED WORDS ── */
.sw {
  background: rgba(0,229,255,.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(0,229,255,.22) !important;
  box-shadow: 0 0 16px rgba(0,229,255,.08), inset 0 1px 0 rgba(0,229,255,.1) !important;
}
[data-theme="light"] .sw {
  background: rgba(0,112,192,.06) !important;
  border: 1.5px solid rgba(0,112,192,.25) !important;
  box-shadow: 0 0 12px rgba(0,112,192,.07), inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* ── LOGOUT / EXPORT BTNS ── */
.logout-btn {
  background: rgba(12,18,36,.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset !important;
}
.logout-btn:hover { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.4) !important; }
.export-pdf-btn {
  background: rgba(0,229,255,.05) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(0,229,255,.22) !important;
  box-shadow: 0 0 12px rgba(0,229,255,.06), 0 1px 0 rgba(0,229,255,.1) inset !important;
}
.export-pdf-btn:hover { background: rgba(0,229,255,.1) !important; border-color: rgba(0,229,255,.45) !important; box-shadow: 0 0 20px rgba(0,229,255,.15), 0 1px 0 rgba(0,229,255,.15) inset !important; }
[data-theme="light"] .logout-btn { background: rgba(255,255,255,.55) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(0,0,0,.1) !important; box-shadow: var(--glass-rim) !important; }
[data-theme="light"] .export-pdf-btn { background: rgba(0,112,192,.06) !important; border: 1px solid rgba(0,112,192,.2) !important; }

/* ── BTN GHOST ── */
.btn-ghost {
  background: rgba(12,18,36,.42) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.btn-ghost:hover { background: rgba(0,229,255,.07) !important; border-color: rgba(0,229,255,.3) !important; box-shadow: 0 0 14px rgba(0,229,255,.1), inset 0 1px 0 rgba(0,229,255,.08) !important; }
[data-theme="light"] .btn-ghost { background: rgba(255,255,255,.55) !important; border: 1px solid rgba(0,0,0,.1) !important; box-shadow: var(--glass-rim) !important; }
[data-theme="light"] .btn-ghost:hover { background: rgba(0,112,192,.06) !important; border-color: rgba(0,112,192,.28) !important; }

/* ── LBTN GHOST ── */
.lbtn-ghost {
  background: rgba(12,18,36,.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.lbtn-ghost:hover { background: rgba(0,229,255,.06) !important; border-color: rgba(0,229,255,.3) !important; }
[data-theme="light"] .lbtn-ghost { background: rgba(255,255,255,.55) !important; border: 1.5px solid rgba(0,0,0,.1) !important; box-shadow: var(--glass-rim) !important; }

/* ── TF BUTTONS ── */
.tf-btn {
  background: rgba(10,16,30,.48) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.tf-btn:hover:not(.active) { background: rgba(0,229,255,.06) !important; border-color: rgba(0,229,255,.3) !important; }
.tf-btn.active { background: var(--accent) !important; box-shadow: 0 0 18px rgba(0,229,255,.35), inset 0 1px 0 rgba(255,255,255,.2) !important; }
[data-theme="light"] .tf-btn { background: rgba(255,255,255,.55) !important; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: var(--glass-rim) !important; }
[data-theme="light"] .tf-btn.active { background: var(--accent) !important; box-shadow: 0 0 14px rgba(0,112,192,.25) !important; }

/* ── BTC CHANGE BADGE ── */
.btc-change-badge.up {
  background: rgba(16,185,129,.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(16,185,129,.28) !important;
  box-shadow: 0 0 14px rgba(16,185,129,.08), inset 0 1px 0 rgba(16,185,129,.08) !important;
}
.btc-change-badge.dn {
  background: rgba(239,68,68,.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(239,68,68,.28) !important;
  box-shadow: 0 0 14px rgba(239,68,68,.08), inset 0 1px 0 rgba(239,68,68,.08) !important;
}

/* ── TABLE BADGES ── */
.badge.bg { background: rgba(16,185,129,.1) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(16,185,129,.25) !important; }
.badge.br { background: rgba(239,68,68,.1) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(239,68,68,.25) !important; }
.badge.bb { background: rgba(0,229,255,.07) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(0,229,255,.22) !important; }

/* ── CHECK BOX ── */
.check-box {
  background: rgba(10,16,30,.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 2px solid rgba(255,255,255,.15) !important;
}
.check-box.on { background: var(--accent) !important; border-color: var(--accent) !important; box-shadow: 0 0 14px rgba(0,229,255,.4) !important; }
[data-theme="light"] .check-box { background: rgba(255,255,255,.65) !important; border: 2px solid rgba(0,0,0,.15) !important; }

/* ── LOGIN SCREEN AMBIENT ── */
#login-screen {
  background:
    radial-gradient(ellipse at 25% 15%, rgba(0,229,255,.1) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 85%, rgba(124,58,237,.1) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 40%, rgba(16,185,129,.05) 0%, transparent 45%),
    var(--bg) !important;
}
[data-theme="light"] #login-screen {
  background:
    radial-gradient(ellipse at 25% 15%, rgba(0,112,192,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 85%, rgba(109,40,217,.07) 0%, transparent 50%),
    var(--bg) !important;
}

/* ── SCROLL TO TOP BTN ── */
#zw-scroll-top {
  background: rgba(10,16,30,.52) !important;
  backdrop-filter: blur(24px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.7) !important;
  border: 1px solid rgba(0,229,255,.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.35), 0 0 12px rgba(0,229,255,.08), var(--glass-rim) !important;
}
#zw-scroll-top:hover { background: rgba(0,229,255,.1) !important; border-color: rgba(0,229,255,.4) !important; box-shadow: 0 4px 24px rgba(0,229,255,.18), 0 0 16px rgba(0,229,255,.12), var(--glass-rim) !important; }
[data-theme="light"] #zw-scroll-top { background: rgba(255,255,255,.62) !important; border: 1px solid rgba(0,112,192,.2) !important; box-shadow: 0 4px 16px rgba(0,0,0,.1), var(--glass-rim) !important; }

/* ── FITUR MODAL SHEET ── */
#fitur-modal-sheet {
  background: rgba(8,12,26,.78) !important;
  backdrop-filter: blur(52px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(52px) saturate(1.8) !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05) inset !important;
}
[data-theme="light"] #fitur-modal-sheet {
  background: rgba(240,248,255,.80) !important;
  backdrop-filter: blur(52px) saturate(2.5) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(52px) saturate(2.5) brightness(1.04) !important;
  border-top: 1px solid rgba(255,255,255,.9) !important;
}

/* ── CHAT NOTIF TOAST ── */
#chat-notif-toast > div {
  background: rgba(8,14,28,.88) !important;
  backdrop-filter: blur(40px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
  border: 1px solid rgba(0,229,255,.2) !important;
  border-top-color: rgba(0,229,255,.35) !important;
  box-shadow: 0 12px 52px rgba(0,0,0,.55), 0 0 0 1px rgba(0,229,255,.06) inset !important;
}

/* ── WC MODAL ── */
#wc-modal-box {
  background: rgba(8,14,28,.82) !important;
  backdrop-filter: blur(48px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(48px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-top-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.65), var(--glass-rim) !important;
}

/* ── WC EXT BUTTONS ── */
.wc-ext-btn {
  background: rgba(12,18,36,.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.wc-ext-btn:hover { background: rgba(124,58,237,.1) !important; border-color: rgba(167,139,250,.4) !important; box-shadow: 0 0 16px rgba(124,58,237,.12), inset 0 1px 0 rgba(255,255,255,.1) !important; }

/* ── PAGE HEADER GRADIENT TEXT ── */
.ph h1 {
  background: linear-gradient(135deg, var(--accent) 0%, rgba(0,229,255,.7) 50%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(0,229,255,.2));
}
[data-theme="light"] .ph h1 {
  background: linear-gradient(135deg, var(--accent) 0%, rgba(0,100,200,.8) 50%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(0,100,200,.15));
}

/* ── ASSET ICON ── */
.asset-icon {
  background: rgba(0,229,255,.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 8px rgba(0,0,0,.2) !important;
}
[data-theme="light"] .asset-icon { background: rgba(0,112,192,.06) !important; border: 1px solid rgba(255,255,255,.85) !important; box-shadow: var(--glass-rim) !important; }

/* ── SECTION TITLE BAR ── */
.sec-title::before {
  background: linear-gradient(180deg, var(--accent), rgba(0,229,255,.4)) !important;
  box-shadow: 0 0 10px rgba(0,229,255,.6), 0 0 4px rgba(0,229,255,.3) !important;
}
[data-theme="light"] .sec-title::before { background: linear-gradient(180deg, var(--accent), rgba(0,112,192,.4)) !important; box-shadow: 0 0 8px rgba(0,112,192,.4) !important; }

/* ── NAV ── */
nav {
  background: rgba(6,10,22,.65) !important;
  backdrop-filter: blur(40px) saturate(1.9) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.9) brightness(1.1) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.35), 0 1px 0 rgba(0,229,255,.06), 0 0 0 .5px rgba(255,255,255,.05) inset !important;
}
[data-theme="light"] nav {
  background: rgba(245,250,255,.65) !important;
  backdrop-filter: blur(40px) saturate(2.2) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(40px) saturate(2.2) brightness(1.04) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.07), 0 0 0 1px rgba(255,255,255,.75) inset, 0 1px 0 rgba(255,255,255,.95) inset !important;
}
.nav-topstrip {
  background: rgba(6,10,22,.65) !important;
  backdrop-filter: blur(40px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 1px 16px rgba(0,0,0,.3), 0 0 0 .5px rgba(255,255,255,.04) inset !important;
}
[data-theme="light"] .nav-topstrip {
  background: rgba(245,250,255,.65) !important;
  backdrop-filter: blur(40px) saturate(2.2) !important;
  -webkit-backdrop-filter: blur(40px) saturate(2.2) !important;
  border-bottom: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: 0 1px 12px rgba(0,0,0,.05), var(--glass-rim) !important;
}

/* ── THEME TOGGLE ── */
.theme-toggle {
  background: rgba(10,16,30,.55) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.25) !important;
}
[data-theme="light"] .theme-toggle { background: rgba(255,255,255,.65) !important; border: 1px solid rgba(0,0,0,.1) !important; box-shadow: var(--glass-rim), 0 2px 6px rgba(0,0,0,.06) !important; }

/* ── BOTTOM NAV ── */
.bottom-nav {
  background: rgba(4,7,18,.24) !important;
  backdrop-filter: blur(60px) saturate(2.2) brightness(1.3) !important;
  -webkit-backdrop-filter: blur(60px) saturate(2.2) brightness(1.3) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1) inset,
    0 1px 0 rgba(255,255,255,.14) inset,
    0 -1px 0 rgba(255,255,255,.04) inset,
    0 16px 48px rgba(0,0,0,.35),
    0 4px 16px rgba(0,0,0,.2) !important;
}
[data-theme="light"] .bottom-nav {
  background: rgba(220,232,252,.26) !important;
  backdrop-filter: blur(60px) saturate(2.8) brightness(1.12) !important;
  -webkit-backdrop-filter: blur(60px) saturate(2.8) brightness(1.12) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.72) inset,
    0 2px 0 rgba(255,255,255,.88) inset,
    0 16px 48px rgba(0,0,0,.1) !important;
}

/* ── GPU ACCELERATION (AMAN) ── */
/*
  ATURAN PENTING:
  - nav           → DILARANG transform (merusak position:sticky)
  - .bottom-nav   → DILARANG transform (menimpa translateX(-50%) centering)
  - .bottom-nav.bnav-hidden → pakai translateX(-50%) translateY(...), tidak boleh di-reset
  Elemen lain yang punya animasi transform sendiri juga tidak dimasukkan.
  Gunakan will-change saja untuk elemen yang butuh GPU hint tanpa transform.
*/

/* Elemen statis aman pakai translateZ */
.stat-card, .modal, .chart-wrap, .btc-chart-wrap,
.port-card, .sim-card, .sim-param-card, .tbl-wrap,
.login-box, .btc-badge, .acct-badge,
.sync-bar, .fi, .fs, .sinput, .ltabs,
.logout-btn, .export-pdf-btn, .theme-toggle, .lbtn-ghost {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Elemen dengan custom transform: pakai will-change saja */
nav            { will-change: backdrop-filter; }
.nav-topstrip  { position: relative !important; will-change: backdrop-filter; }
.bottom-nav    { will-change: backdrop-filter, opacity; }
.tf-btn        { will-change: transform; }
.btn-ghost     { will-change: transform; }

/* ── BLOCK 21 ── */
/* ── RIPPLE EFFECT ── */
.ripple-host { position: relative; overflow: hidden; }
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleAnim .55s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none;
  z-index: 9;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── SKELETON LOADING ── */
.skeleton {
  background: linear-gradient(90deg,
    var(--surface2) 25%,
    rgba(255,255,255,.06) 50%,
    var(--surface2) 75%);
  background-size: 200% 100%;
  animation: skeletonSweep 1.5s ease infinite;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
}
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, #e2eaf5 25%, #f0f6ff 50%, #e2eaf5 75%);
  background-size: 200% 100%;
}
@keyframes skeletonSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── ERROR SHAKE ── */
.shake {
  animation: shakeAnim .4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shakeAnim {
  10%,90% { transform: translateX(-2px); }
  20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-4px); }
  40%,60% { transform: translateX(4px); }
}

/* ── COUNTER ANIMATION ── */
.counting { transition: opacity .2s ease; }

/* ── TOOLTIP ── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(10,16,30,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,229,255,.2);
  border-radius: 8px;
  padding: .35rem .7rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
  font-family: 'Inter', sans-serif;
  letter-spacing: .01em;
  box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 0 1px rgba(0,229,255,.1) inset;
}
[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: rgba(0,229,255,.2);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}
[data-tip]:hover::after,
[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-theme="light"] [data-tip]::after {
  background: rgba(255,255,255,.98);
  border-color: rgba(0,100,200,.25);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,60,140,.15);
}
[data-theme="light"] [data-tip]::before {
  border-top-color: rgba(0,100,200,.2);
}

/* ── FOCUS RING for inputs ── */
.fi:focus-visible, .fs:focus-visible, .sinput:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(0,229,255,.6);
  outline-offset: 2px;
}

/* ── SMOOTH VALUE CHANGE FLASH ── */
.value-up {
  animation: flashGreen .6s ease;
}
.value-down {
  animation: flashRed .6s ease;
}
@keyframes flashGreen {
  0%   { color: #10b981; text-shadow: 0 0 16px rgba(16,185,129,.6); }
  100% { text-shadow: none; }
}
@keyframes flashRed {
  0%   { color: #ef4444; text-shadow: 0 0 16px rgba(239,68,68,.6); }
  100% { text-shadow: none; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── SMOOTH SCROLLING ── */
html { scroll-behavior: smooth; }

/* ── MODAL BACKDROP BLUR TRANSITION ── */
.overlay {
  transition: opacity .2s ease;
}

/* ── FEAT BTN ENHANCED HOVER ── */
.feat-btn {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease !important;
}
.feat-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.15) !important;
}

/* ── BNAV ITEM TOUCH RIPPLE ── */
.bnav-item::after {
  display: none; /* override dari enhancement layer sebelumnya */
}

/* ── INPUT LABEL FLOAT ANIMATION ── */
.fg { position: relative; }

/* ── STAT CARD VALUE NUMBER TRANSITION ── */
.sval, .btc-price-big {
  transition: color var(--duration-base) ease;
}

/* ── LOADING SPINNER STYLE ── */
.zw-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(0,229,255,.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: zwSpin .7s linear infinite;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
@keyframes zwSpin { to { transform: rotate(360deg); } }

/* ── SCROLL TO TOP BUTTON ── */
#zw-scroll-top {
  position: fixed;
  bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  right: 1.1rem;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(0,229,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0,229,255,.25);
  color: var(--accent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  opacity: 0; pointer-events: none;
  transform: translateY(12px) scale(.85);
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 12px rgba(0,229,255,.1);
}
#zw-scroll-top.visible {
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
}
#zw-scroll-top:hover {
  background: rgba(0,229,255,.2);
  box-shadow: 0 4px 20px rgba(0,229,255,.2), 0 0 16px rgba(0,229,255,.15);
  transform: translateY(-2px) scale(1.05);
}
#zw-scroll-top:active {
  transform: scale(.93);
  transition-duration: .08s;
}
@media(min-width:641px) {
  #zw-scroll-top { bottom: 1.5rem; right: 1.5rem; }
}
[data-theme="light"] #zw-scroll-top {
  background: rgba(0,100,200,.1);
  border-color: rgba(0,100,200,.25);
  color: var(--accent);
}

/* ── PAGE TRANSITION DIRECTION ── */
.page-exit {
  animation: pageExit .2s ease forwards !important;
  pointer-events: none !important;
}
@keyframes pageExit {
  to { opacity: 0; transform: scale(.99); }
}

/* ── ACTIVE STATE CLICK FLASH ── */
button:active, .ltab:active, .bnav-item:active {
  filter: brightness(1.15);
}

/* ── BLOCK 22 ── */
/* ═══════════════════════════════════════════════
   1. LIQUID GLASS — ELEMEN YANG TERLEWAT
═══════════════════════════════════════════════ */

/* News Cards */
.news-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-top-color: var(--glass-border-top) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
  transition: transform .22s var(--ease-spring), border-color .2s ease, box-shadow .2s ease !important;
}
.news-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0,229,255,.28) !important;
  box-shadow: 0 0 20px rgba(0,229,255,.1), 0 8px 28px rgba(0,0,0,.4), var(--glass-rim) !important;
}
[data-theme="light"] .news-card {
  background: rgba(255,255,255,.52) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}
[data-theme="light"] .news-card:hover {
  border-color: rgba(0,112,192,.25) !important;
  box-shadow: 0 0 16px rgba(0,112,192,.08), 0 8px 24px rgba(0,0,0,.09), var(--glass-rim) !important;
}

/* DCA Sum Cards & CF Sum Cards */
.dca-sum-card,
.cf-sum-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-top-color: var(--glass-border-top) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}
[data-theme="light"] .dca-sum-card,
[data-theme="light"] .cf-sum-card {
  background: rgba(255,255,255,.5) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}

/* Chat Room Items */
.room-item {
  background: rgba(255,255,255,.03) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: background .18s ease, border-color .18s ease, transform .2s var(--ease-spring) !important;
  margin-bottom: .55rem !important;
}
.room-item:hover {
  background: rgba(0,229,255,.05) !important;
  border-color: rgba(0,229,255,.2) !important;
  transform: translateX(3px) !important;
}
[data-theme="light"] .room-item {
  background: rgba(255,255,255,.45) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
[data-theme="light"] .room-item:hover {
  background: rgba(0,112,192,.05) !important;
  border-color: rgba(0,112,192,.2) !important;
}

/* Onboarding Seed Cards */
.ob-seed-card {
  background: rgba(0,229,255,.04) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border: 1.5px solid rgba(0,229,255,.2) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset !important;
}
.ob-seed-card.revealed {
  box-shadow:
    0 0 24px rgba(0,229,255,.15),
    0 4px 16px rgba(0,0,0,.2),
    0 0 0 1px rgba(0,229,255,.08) inset !important;
}
.ob-seed-card:hover {
  background: rgba(0,229,255,.08) !important;
  border-color: rgba(0,229,255,.45) !important;
}

/* Onboarding Choices */
.ob-choice {
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important;
  transition: all .2s var(--ease-spring) !important;
}
.ob-choice:hover {
  background: rgba(0,229,255,.07) !important;
  border-color: rgba(0,229,255,.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0,229,255,.12), 0 1px 0 rgba(0,229,255,.1) inset !important;
}
.ob-choice.correct {
  background: rgba(16,185,129,.1) !important;
  border-color: rgba(16,185,129,.5) !important;
  box-shadow: 0 0 20px rgba(16,185,129,.2), 0 1px 0 rgba(16,185,129,.1) inset !important;
}
.ob-choice.wrong {
  background: rgba(244,63,94,.1) !important;
  border-color: rgba(244,63,94,.4) !important;
  box-shadow: 0 0 16px rgba(244,63,94,.15) !important;
}

/* Onboarding Skip Button */
.ob-btn-skip {
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important;
  transition: all .2s ease !important;
}
.ob-btn-skip:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.7) !important;
}

/* Onboarding Regen Button */
.ob-regen-btn {
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important;
}
.ob-regen-btn:hover {
  background: rgba(0,229,255,.07) !important;
  border-color: rgba(0,229,255,.3) !important;
}

/* Onboarding Step Badge */
.ob-step-badge {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: rgba(0,229,255,.08) !important;
  border: 1px solid rgba(0,229,255,.22) !important;
  box-shadow: 0 0 16px rgba(0,229,255,.1), 0 1px 0 rgba(0,229,255,.08) inset !important;
}

/* Onboarding Warn Box */
.ob-warn-box {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 0 16px rgba(245,158,11,.06), 0 1px 0 rgba(245,158,11,.08) inset !important;
}

/* Msg date separator */
.msg-date-sep {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Reply preview in chat */
.reply-preview {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* AI chips */
.ai-chip {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important;
}
[data-theme="light"] .ai-chip {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Chat send button */
.chat-send-btn {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(0,229,255,.3), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition: all .18s var(--ease-spring) !important;
}
.chat-send-btn:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 28px rgba(0,229,255,.4), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.chat-send-btn:active {
  transform: scale(.93) !important;
  transition-duration: .08s !important;
}

/* Sim param toggle row */
.sim-param-toggle {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background .2s ease !important;
}
.sim-param-toggle:hover {
  background: rgba(0,229,255,.05) !important;
}


/* ═══════════════════════════════════════════════
   2. BOTTOM NAV — ACTIVE STATE SUPER POLISH
═══════════════════════════════════════════════ */

/* Icon aktif — lebih dramatic scale + glow */
.bnav-item.active .bnav-icon {
  transform: translateY(-5px) scale(1.22) !important;
  filter: drop-shadow(0 0 10px rgba(0,229,255,.8)) drop-shadow(0 0 4px rgba(0,229,255,.5)) !important;
}

/* Label aktif — gradient text */
.bnav-item.active .bnav-label {
  background: linear-gradient(135deg, #00e5ff, rgba(0,229,255,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .09em !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  font-weight: 800 !important;
}
[data-theme="light"] .bnav-item.active .bnav-label {
  background: linear-gradient(135deg, var(--accent), rgba(0,100,180,.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Active background pill — lebih visible */
.bnav-item.active::before {
  background: rgba(0,229,255,.1) !important;
  border: 1px solid rgba(0,229,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(0,229,255,.12) !important;
}
[data-theme="light"] .bnav-item.active::before {
  background: rgba(0,112,192,.09) !important;
  border: 1px solid rgba(0,112,192,.18) !important;
}

/* Inactive icons — sedikit lebih visible */
.bnav-item:not(.active) .bnav-label {
  opacity: .45;
}

/* Hover state non-active */
.bnav-item:not(.active):hover .bnav-icon {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 0 4px rgba(0,229,255,.3));
}
.bnav-item:not(.active):hover .bnav-label {
  opacity: .7;
}
.bnav-item:not(.active):hover {
  color: rgba(255,255,255,.7);
}

/* bnav indicator bar — lebih glowy */
#bnav-indicator {
  box-shadow:
    0 0 14px rgba(0,229,255,.9),
    0 0 6px rgba(0,229,255,.6),
    0 0 2px rgba(0,229,255,.4) !important;
}
[data-theme="light"] #bnav-indicator {
  box-shadow:
    0 0 12px rgba(0,112,192,.8),
    0 0 5px rgba(0,112,192,.5) !important;
}


/* ═══════════════════════════════════════════════
   3. MICRO-ANIMATIONS
═══════════════════════════════════════════════ */

/* Stat value — flip counter animation */
@keyframes valueFlip {
  0%   { opacity: 0; transform: translateY(8px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.sval {
  display: inline-block;
  transition: color .3s ease !important;
}

/* P&L positive pulse */
@keyframes plPulse {
  0%, 100% { text-shadow: 0 0 0px transparent; }
  50%       { text-shadow: 0 0 16px rgba(16,185,129,.5); }
}
.sval.pos {
  animation: plPulse 3s ease infinite;
}
.sval.neg {
  animation: plPulse 3s ease infinite;
}
@keyframes plPulseRed {
  0%, 100% { text-shadow: 0 0 0px transparent; }
  50%       { text-shadow: 0 0 16px rgba(239,68,68,.45); }
}
.sval.neg { animation: plPulseRed 3s ease infinite !important; }

/* BTC price in nav — subtle shimmer on update */
#nav-btc {
  transition: color .3s ease, text-shadow .3s ease;
  display: inline-block;
}

/* Live dot — more expressive ripple */
.live-dot {
  position: relative;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(16,185,129,.5);
  animation: liveRipple 2s ease infinite;
}
@keyframes liveRipple {
  0%   { transform: scale(.8); opacity: .8; }
  70%  { transform: scale(2);  opacity: 0; }
  100% { opacity: 0; }
}

/* Feat buttons — spring hover (already has magnetic, enhance base) */
.feat-btn {
  transition: transform .25s var(--ease-spring), box-shadow .25s ease !important;
}

/* fmo-btn hover */
.fmo-btn {
  transition: transform .22s var(--ease-spring), box-shadow .22s ease !important;
}
.fmo-btn:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.18) inset !important;
}

/* stat-card value — animate in on render */
.stats-grid .stat-card:nth-child(1) .sval { animation-delay: 80ms; }
.stats-grid .stat-card:nth-child(2) .sval { animation-delay: 140ms; }
.stats-grid .stat-card:nth-child(3) .sval { animation-delay: 200ms; }
.stats-grid .stat-card:nth-child(4) .sval { animation-delay: 260ms; }
.stats-grid .stat-card:nth-child(5) .sval { animation-delay: 320ms; }
.stats-grid .stat-card:nth-child(6) .sval { animation-delay: 380ms; }

/* Chart wrap — animate in */
.chart-wrap, .btc-chart-wrap {
  animation: cardReveal .5s var(--ease-out-expo) both;
  animation-delay: 200ms;
}

/* Section title reveal */
.sec-title {
  animation: cardReveal .45s var(--ease-out-expo) both;
}

/* Page header animate */
.ph h1 {
  animation: obFadeUp .4s var(--ease-out-expo) both;
}
.ph p {
  animation: obFadeUp .4s .08s var(--ease-out-expo) both;
}

/* Table rows — stagger fade on render */
tr { animation: cardReveal .3s var(--ease-out-expo) both; }
tr:nth-child(1) { animation-delay: 50ms; }
tr:nth-child(2) { animation-delay: 80ms; }
tr:nth-child(3) { animation-delay: 110ms; }
tr:nth-child(4) { animation-delay: 140ms; }
tr:nth-child(5) { animation-delay: 170ms; }
tr:nth-child(6) { animation-delay: 200ms; }
tr:nth-child(7) { animation-delay: 230ms; }
tr:nth-child(n+8) { animation-delay: 260ms; }

/* News cards stagger */
.news-card:nth-child(1) { animation: cardReveal .4s .05s var(--ease-out-expo) both; }
.news-card:nth-child(2) { animation: cardReveal .4s .1s var(--ease-out-expo) both; }
.news-card:nth-child(3) { animation: cardReveal .4s .15s var(--ease-out-expo) both; }
.news-card:nth-child(4) { animation: cardReveal .4s .2s var(--ease-out-expo) both; }
.news-card:nth-child(n+5) { animation: cardReveal .4s .25s var(--ease-out-expo) both; }

/* Port cards stagger */
.port-card:nth-child(1) { animation-delay: 60ms; }
.port-card:nth-child(2) { animation-delay: 110ms; }
.port-card:nth-child(3) { animation-delay: 160ms; }
.port-card:nth-child(n+4) { animation-delay: 210ms; }

/* ── Onboarding dots — spring pill ── */
.ob-dot {
  transition: all .35s var(--ease-spring) !important;
  border-radius: 4px !important;
  cursor: pointer;
}
.ob-dot.active {
  background: #00e5ff !important;
  box-shadow: 0 0 10px rgba(0,229,255,.6), 0 0 4px rgba(0,229,255,.3) !important;
}
.ob-dot:not(.active):hover {
  background: rgba(0,229,255,.35) !important;
  width: 14px !important;
}

/* ── Onboarding slide in ── */
.ob-slide-label {
  animation: obFadeUp .4s .05s var(--ease-out-expo) both;
}
.ob-slide-title {
  animation: obFadeUp .4s .1s var(--ease-out-expo) both;
}
.ob-slide-desc {
  animation: obFadeUp .4s .15s var(--ease-out-expo) both;
}

/* ── Next button — animated arrow ── */
.ob-btn-next {
  box-shadow: 0 8px 32px rgba(0,229,255,.3), inset 0 1px 0 rgba(255,255,255,.2) !important;
  transition: all .25s var(--ease-spring) !important;
}
.ob-btn-next:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,229,255,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
}


/* ═══════════════════════════════════════════════
   4. TYPOGRAPHY REFINEMENTS
═══════════════════════════════════════════════ */

/* Section labels yang konsisten */
.slabel {
  letter-spacing: .12em !important;
  font-weight: 700 !important;
}

/* Mono values — subtle glow on accent */
.sval.acc {
  text-shadow: 0 0 20px rgba(0,229,255,.25);
}
.sval.gld {
  text-shadow: 0 0 20px rgba(245,158,11,.25);
}
.sval.pos {
  text-shadow: 0 0 20px rgba(16,185,129,.25);
}

/* BTC price big — gold glow */
.btc-price-big {
  text-shadow: 0 0 24px rgba(245,158,11,.25), 0 0 8px rgba(245,158,11,.15);
  transition: text-shadow .3s ease;
}

/* Modal title */
.modal-title {
  background: linear-gradient(135deg, var(--accent), rgba(0,229,255,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(0,229,255,.2));
}
[data-theme="light"] .modal-title {
  background: linear-gradient(135deg, var(--accent), rgba(0,80,160,.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Page header date */
.ph p {
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .04em;
}

/* z-wealth logo — richer */
.zw-z {
  text-shadow:
    0 0 30px rgba(0,229,255,.8),
    0 0 10px rgba(0,229,255,.5),
    0 0 4px rgba(0,229,255,.3) !important;
}
[data-theme="light"] .zw-z {
  text-shadow:
    0 0 20px rgba(0,112,192,.5),
    0 0 8px rgba(0,112,192,.3) !important;
}

/* Empty state — breathing animation */
.empty .emoji {
  animation: emptyBounce 2.5s var(--ease-spring) infinite;
  display: block;
}
@keyframes emptyBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-8px) scale(1.05); }
}


/* ═══════════════════════════════════════════════
   5. MISC POLISH
═══════════════════════════════════════════════ */

/* Range input — glass thumb */
input[type=range]::-webkit-slider-thumb {
  background: var(--accent) !important;
  box-shadow:
    0 0 12px rgba(0,229,255,.5),
    0 0 4px rgba(0,229,255,.3),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
  transition: transform .18s var(--ease-spring), box-shadow .18s ease !important;
}
input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.25) !important;
  box-shadow: 0 0 20px rgba(0,229,255,.7), 0 0 6px rgba(0,229,255,.4) !important;
}
input[type=range]::-webkit-slider-track,
input[type=range] {
  background: rgba(255,255,255,.08) !important;
  border-radius: 4px !important;
}

/* Pbar fill — smooth gradient */
.pbar-fill {
  transition: width .6s var(--ease-out-expo) !important;
}

/* Acct dot & live dot — consistent glow */
.acct-dot {
  box-shadow: 0 0 8px rgba(16,185,129,.7), 0 0 3px rgba(16,185,129,.4);
}

/* Seed row words on login */
.sw {
  transition: all .2s var(--ease-spring) !important;
}
.sw:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0,229,255,.4) !important;
  box-shadow: 0 0 20px rgba(0,229,255,.14), 0 4px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(0,229,255,.12) !important;
}

/* Check row hover */
.check-row {
  cursor: pointer;
  padding: .4rem .2rem;
  border-radius: 8px;
  transition: background .18s ease;
}
.check-row:hover {
  background: rgba(0,229,255,.04);
}

/* Scrollbar — thinner and more glass */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,229,255,.2);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,229,255,.4);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,112,192,.2);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0,112,192,.4);
}

/* PWA install button — glass */
#pwa-install-btn {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: all .2s var(--ease-spring) !important;
}
#pwa-install-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(0,229,255,.2) !important;
}

/* NM modal (news modal) — glass */
#nm-modal-box {
  background: rgba(8,14,28,.88) !important;
  backdrop-filter: blur(48px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(48px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-top-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.65), var(--glass-rim) !important;
}
[data-theme="light"] #nm-modal-box {
  background: rgba(245,250,255,.80) !important;
  backdrop-filter: blur(48px) saturate(2.5) !important;
  -webkit-backdrop-filter: blur(48px) saturate(2.5) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
}

/* Ob screen background — richer ambient */
#ob-screen {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(0,229,255,.18) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 90%, rgba(124,58,237,.18) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(16,185,129,.06) 0%, transparent 50%),
    #050810;
}

/* Ob feature buttons — glass top border */
.ob-btn-next {
  border-top: 1px solid rgba(255,255,255,.25) !important;
}

/* Theming the page transitions more precisely */
.page.active {
  animation: pageReveal var(--duration-slow) var(--ease-out-expo) both !important;
}

/* Cashflow income/expense indicator — glass badge */
.cf-type-badge {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ── BLOCK 23 ── */
/* ═══════════════════════════════════════════════
   INLINE-STYLE GLASS OVERRIDE
   Target semua div yang pakai background:var(--surface)
   via sibling/child selector pada page containers
═══════════════════════════════════════════════ */

/* Semua direct-child div berstyle surface di dalam .page */
#page-alerts > div[style*="background:var(--surface)"],
#page-theme  > div[style*="background:var(--surface)"],
#page-alerts > div[style*="background:var(--surface)"] > div[style*="background:var(--surface)"],
#page-cashflow > div[style*="background:var(--surface)"],
#page-portfolio > div[style*="background:var(--surface)"],
#page-ai-predict > div[style*="background:var(--surface)"],
#page-dashboard > div[style*="background:var(--surface)"] {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-top-color: var(--glass-border-top) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}

/* Tombol kecil inline (export, share, dll) */
[style*="background:var(--surface)"][style*="border-radius:10px"],
[style*="background:var(--surface)"][style*="border-radius:36px"] {
  background: rgba(12,18,36,.45) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* Light mode override untuk inline divs */
[data-theme="light"] #page-alerts > div[style*="background:var(--surface)"],
[data-theme="light"] #page-theme  > div[style*="background:var(--surface)"],
[data-theme="light"] #page-cashflow > div[style*="background:var(--surface)"],
[data-theme="light"] #page-ai-predict > div[style*="background:var(--surface)"],
[data-theme="light"] #page-dashboard > div[style*="background:var(--surface)"] {
  background: rgba(255,255,255,.52) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}

/* dash-chat-preview */
#dash-chat-preview {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-top-color: var(--glass-border-top) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}
[data-theme="light"] #dash-chat-preview {
  background: rgba(255,255,255,.5) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}

/* theme-preview-card */
#theme-preview-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 2px solid var(--accent) !important;
  box-shadow: 0 0 24px rgba(0,229,255,.15), var(--glass-shadow-sm), var(--glass-rim) !important;
}
[data-theme="light"] #theme-preview-card {
  background: rgba(255,255,255,.55) !important;
  box-shadow: 0 0 16px rgba(0,112,192,.1), var(--glass-shadow-sm), var(--glass-rim) !important;
}

/* ── AI Predict: fear greed & verdict ── */
#pred-verdict {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}
.pred-verdict.bullish {
  background: rgba(16,185,129,.12) !important;
  border: 1px solid rgba(16,185,129,.3) !important;
  box-shadow: 0 0 20px rgba(16,185,129,.12), var(--glass-rim) !important;
}
.pred-verdict.bearish {
  background: rgba(239,68,68,.12) !important;
  border: 1px solid rgba(239,68,68,.3) !important;
  box-shadow: 0 0 20px rgba(239,68,68,.1), var(--glass-rim) !important;
}
.pred-verdict.neutral {
  background: rgba(245,158,11,.12) !important;
  border: 1px solid rgba(245,158,11,.3) !important;
  box-shadow: 0 0 20px rgba(245,158,11,.1), var(--glass-rim) !important;
}
.pred-verdict.loading {
  background: rgba(100,116,139,.08) !important;
  border: 1px solid rgba(100,116,139,.2) !important;
}

/* ═══════════════════════════════════════════════
   AI CHAT & COMMUNITY CHAT — GLASS HEADERS
═══════════════════════════════════════════════ */

.ai-chat-header,
.chat-room-header {
  background: rgba(6,10,22,.7) !important;
  backdrop-filter: blur(32px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 1px 0 rgba(0,229,255,.05), 0 4px 16px rgba(0,0,0,.2) !important;
  position: sticky; top: 0; z-index: 10;
}
[data-theme="light"] .ai-chat-header,
[data-theme="light"] .chat-room-header {
  background: rgba(245,250,255,.75) !important;
  backdrop-filter: blur(32px) saturate(2.2) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2.2) !important;
  border-bottom: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: 0 1px 0 rgba(0,112,192,.05), 0 4px 12px rgba(0,0,0,.05) !important;
}

/* Chat topbar */
.chat-topbar {
  background: linear-gradient(180deg, rgba(5,8,16,.9) 60%, transparent) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
[data-theme="light"] .chat-topbar {
  background: linear-gradient(180deg, rgba(240,248,255,.92) 60%, transparent) !important;
}

/* Messages area */
.messages-area {
  background: transparent !important;
}

/* Chat input area — upgrade blur */
.chat-input-area {
  background: rgba(4,7,16,.6) !important;
  backdrop-filter: blur(40px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.2) !important;
}
[data-theme="light"] .chat-input-area {
  background: rgba(245,250,255,.80) !important;
  backdrop-filter: blur(40px) saturate(2.2) !important;
  -webkit-backdrop-filter: blur(40px) saturate(2.2) !important;
  border-top: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.04) !important;
}

/* Chat input field */
.chat-input,
.ai-input-single {
  background: rgba(255,255,255,.07) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.05) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.chat-input:focus,
.ai-input-single:focus {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(0,229,255,.4) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.1), inset 0 1px 2px rgba(0,0,0,.15) !important;
}
[data-theme="light"] .chat-input,
[data-theme="light"] .ai-input-single {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04) !important;
}
[data-theme="light"] .chat-input:focus,
[data-theme="light"] .ai-input-single:focus {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(0,112,192,.35) !important;
  box-shadow: 0 0 0 3px rgba(0,112,192,.1) !important;
}

/* ═══════════════════════════════════════════════
   NEWS FILTER BUTTONS — Glass Pills
═══════════════════════════════════════════════ */
.nf-btn {
  background: rgba(10,16,30,.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition: all .2s var(--ease-spring) !important;
}
.nf-btn:hover:not(.active) {
  background: rgba(0,229,255,.07) !important;
  border-color: rgba(0,229,255,.3) !important;
  transform: translateY(-1px) !important;
}
.nf-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 16px rgba(0,229,255,.35), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
[data-theme="light"] .nf-btn {
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: var(--glass-rim) !important;
}
[data-theme="light"] .nf-btn.active {
  background: var(--accent) !important;
  box-shadow: 0 0 14px rgba(0,112,192,.3) !important;
}

/* ═══════════════════════════════════════════════
   CHAT FAB — Glass Floating Button
═══════════════════════════════════════════════ */
.chat-fab {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 24px rgba(16,185,129,.4), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition: all .22s var(--ease-spring) !important;
}
.chat-fab:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 8px 32px rgba(16,185,129,.5), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* ═══════════════════════════════════════════════
   MODE BUTTONS (Dark/Light toggle on Theme page)
═══════════════════════════════════════════════ */
#mode-dark-btn, #mode-light-btn {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: all .2s var(--ease-spring) !important;
}
#mode-dark-btn:hover, #mode-light-btn:hover {
  transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════
   LOGIN BUTTON (lbtn) — Premium Glass Primary
═══════════════════════════════════════════════ */
.lbtn {
  box-shadow: 0 8px 32px rgba(0,229,255,.35), inset 0 1px 0 rgba(255,255,255,.25) !important;
  position: relative;
  overflow: hidden;
}
.lbtn::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation: btnShimmer 3s ease infinite;
  pointer-events: none;
}
@keyframes btnShimmer {
  0%   { left: -100%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}
.lbtn:hover:not(:disabled) {
  box-shadow: 0 12px 40px rgba(0,229,255,.45), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
[data-theme="light"] .lbtn {
  box-shadow: 0 8px 28px rgba(0,112,192,.3), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* ═══════════════════════════════════════════════
   OB PROCEED BTN — Shimmer effect
═══════════════════════════════════════════════ */
.ob-proceed-btn {
  position: relative;
  overflow: hidden;
}
.ob-proceed-btn::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: btnShimmer 3s ease infinite;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   REPLY PREVIEW — Glass
═══════════════════════════════════════════════ */
.reply-preview {
  background: rgba(0,229,255,.06) !important;
  border: 1px solid rgba(0,229,255,.2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: inset 0 1px 0 rgba(0,229,255,.08) !important;
}

/* ═══════════════════════════════════════════════
   SWIPE REPLY ICON — Glass
═══════════════════════════════════════════════ */
._swipe-reply-icon {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 16px rgba(0,229,255,.25) !important;
}

/* ═══════════════════════════════════════════════
   NEWS SENTIMENT BADGE — Glass
═══════════════════════════════════════════════ */
.news-sentiment-badge {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ═══════════════════════════════════════════════
   FEAR & GREED WIDGET
═══════════════════════════════════════════════ */
#fear-greed-widget {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-top-color: var(--glass-border-top) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}
[data-theme="light"] #fear-greed-widget {
  background: rgba(255,255,255,.52) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: var(--glass-shadow-sm), var(--glass-rim) !important;
}

/* ═══════════════════════════════════════════════
   SHARE CARD MODAL — Glass
═══════════════════════════════════════════════ */
.share-card-bg {
  backdrop-filter: blur(48px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(48px) saturate(1.8) !important;
}

/* ═══════════════════════════════════════════════
   PBAR — Glowing Progress Bar
═══════════════════════════════════════════════ */
.pbar {
  background: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2) !important;
}
[data-theme="light"] .pbar {
  background: rgba(0,0,0,.07) !important;
}

/* ═══════════════════════════════════════════════
   ROOM AVATAR — Glass
═══════════════════════════════════════════════ */
.room-avatar {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* ═══════════════════════════════════════════════
   MSG AVATAR — Glass
═══════════════════════════════════════════════ */
.msg-avatar {
  box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* ═══════════════════════════════════════════════
   GLOBAL MICRO-POLISHES FINAL PASS
═══════════════════════════════════════════════ */

/* btn-del — glass destructive */
.btn-del {
  background: rgba(239,68,68,.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(239,68,68,.22) !important;
  box-shadow: inset 0 1px 0 rgba(239,68,68,.06) !important;
  transition: all .18s var(--ease-spring) !important;
}
.btn-del:hover {
  background: rgba(239,68,68,.15) !important;
  border-color: rgba(239,68,68,.45) !important;
  box-shadow: 0 0 16px rgba(239,68,68,.2), inset 0 1px 0 rgba(239,68,68,.1) !important;
  transform: translateY(-1px) !important;
}

/* btn-primary — glow shimmer */
.btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,229,255,.3), inset 0 1px 0 rgba(255,255,255,.2) !important;
  transition: all .2s var(--ease-spring) !important;
}
.btn-primary::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation: btnShimmer 4s ease infinite 1s;
  pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,229,255,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
[data-theme="light"] .btn-primary {
  box-shadow: 0 4px 16px rgba(0,112,192,.25), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* ob-dots indicator upgrade — richer glow */
.ob-dot.active {
  box-shadow:
    0 0 12px rgba(0,229,255,.7),
    0 0 5px rgba(0,229,255,.4),
    0 0 2px rgba(0,229,255,.2) !important;
}

/* Page content fade when switching */
.page.active {
  animation: pageReveal .38s var(--ease-out-expo) both !important;
}

/* ── Scrollbar — 2px ultra thin ── */
::-webkit-scrollbar { width: 2px; height: 2px; }

/* ── Focus ring — consistent accessibility ── */
:focus-visible {
  outline: 2px solid rgba(0,229,255,.6) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
[data-theme="light"] :focus-visible {
  outline: 2px solid rgba(0,112,192,.6) !important;
}

/* ── Input placeholder — softer ── */
::placeholder {
  opacity: .45 !important;
  transition: opacity .2s ease;
}
:focus::placeholder { opacity: .25 !important; }

/* ── Card hover — consistent lift ── */
.stat-card, .port-card, .news-card {
  transition: 
    transform .25s var(--ease-spring),
    border-color .2s ease,
    box-shadow .25s ease,
    background .2s ease !important;
}

/* ── Backdrop blur fallback (for older browsers) ── */
@supports not (backdrop-filter: blur(1px)) {
  .stat-card, .modal, .bottom-nav, nav,
  .login-box, .chart-wrap, .btc-chart-wrap,
  .port-card, .sim-card, .tbl-wrap {
    background: var(--surface) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SPECTACULAR NAV ICON ANIMATIONS
   Tiap ikon punya animasi kontekstual unik saat diklik
═══════════════════════════════════════════════════════════ */

/* Base: ikon tidak aktif */
.bnav-icon {
  transition: filter .25s ease, color .25s ease !important;
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════
   PHANTOM MORPH SYSTEM v3.0
   Setiap ikon: phantom (bentuk lain) muncul dulu via scaleX/scaleY
   lalu morph menjadi bentuk asli — seperti efek Simulasi!
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   PREMIUM COMBO SYSTEM v4.0 — Draw + Dissolve-Rotate + Scale-Fade
   Phantom: dissolve sambil rotate pelan → Real: draw sendiri + scale masuk
   Durasi ~0.65s smooth, modern, kalem & premium
══════════════════════════════════════════════════════════════ */

/* ── Shared: stroke-dashoffset draw animation ── */
@keyframes stroke-draw {
  to { stroke-dashoffset: 0; }
}

/* ── Shared: dot pop untuk Z-AI ── */
@keyframes dot-pop {
  0%   { transform: scale(0); opacity:0; }
  60%  { transform: scale(1.4); opacity:1; }
  80%  { transform: scale(0.85); opacity:1; }
  100% { transform: scale(1); opacity:1; }
}

/* ── Phantom OUT: dissolve + rotate pelan (semua pakai ini, rapi & konsisten) ── */
@keyframes phantom-out {
  0%   { opacity:1; transform: rotate(0deg) scale(1); filter:blur(0px); }
  45%  { opacity:0.4; transform: rotate(18deg) scale(0.75); filter:blur(1px); }
  100% { opacity:0; transform: rotate(32deg) scale(0.4); filter:blur(3px); }
}

/* ── Phantom OUT versi rotateY (coin flip & card flip) ── */
@keyframes phantom-out-flip {
  0%   { opacity:1; transform: rotateY(0deg) scale(1); }
  50%  { opacity:0.3; transform: rotateY(55deg) scale(0.9); }
  100% { opacity:0; transform: rotateY(90deg) scale(0.8); }
}

/* ── Real IN: scale dari kecil + fade, dengan sedikit overshoot ── */
@keyframes real-in-scale {
  0%   { opacity:0; transform: scale(0.55) rotate(-8deg); filter:blur(2px); }
  55%  { opacity:1; transform: scale(1.08) rotate(2deg); filter:blur(0px); }
  75%  { opacity:1; transform: scale(0.96) rotate(-1deg); }
  90%  { opacity:1; transform: scale(1.02) rotate(0.5deg); }
  100% { opacity:1; transform: scale(1) rotate(0deg); }
}

/* ── Real IN versi rotateY flip masuk ── */
@keyframes real-in-flip {
  0%   { opacity:0; transform: rotateY(-90deg) scale(0.8); }
  55%  { opacity:1; transform: rotateY(5deg) scale(1.06); }
  78%  { opacity:1; transform: rotateY(-2deg) scale(0.97); }
  100% { opacity:1; transform: rotateY(0deg) scale(1); }
}

/* ── SIMULASI phantom out: tetap scale gepeng favorit ── */
@keyframes sim-a-out {
  0%   { opacity:1; transform: scaleX(1) scaleY(1); }
  30%  { opacity:1; transform: scaleX(1) scaleY(4); }
  55%  { opacity:0; transform: scaleX(0.2) scaleY(6); }
  100% { opacity:0; }
}

/* Glow pulse setelah animasi selesai */
@keyframes glowPulse {
  0%,100% { filter: drop-shadow(0 0 6px rgba(0,229,255,.7)) drop-shadow(0 0 14px rgba(0,229,255,.25)); }
  50%      { filter: drop-shadow(0 0 14px rgba(0,229,255,1)) drop-shadow(0 0 28px rgba(0,229,255,.6)); }
}

/* ══ TRIGGER CLASSES ══ */

/* HOME — dissolve+rotate keluar, draw+scale masuk */
.bnav-item.anim-home .hp-a { animation: phantom-out .3s cubic-bezier(.4,0,1,1) forwards !important; }
.bnav-item.anim-home .hp-b { opacity:1 !important; animation: real-in-scale .5s .18s cubic-bezier(.34,1.4,.64,1) forwards !important; }
.bnav-item.anim-home .hp-b .draw-me { animation: stroke-draw .45s .28s cubic-bezier(.4,0,.2,1) forwards !important; }

/* DCA — coin flip keluar, detail di-draw + flip masuk */
.bnav-item.anim-dca .dp-a { animation: phantom-out-flip .3s cubic-bezier(.4,0,1,1) forwards !important; }
.bnav-item.anim-dca .dp-b { opacity:1 !important; animation: real-in-flip .5s .15s cubic-bezier(.34,1.3,.64,1) forwards !important; }
.bnav-item.anim-dca .dp-b .draw-me { animation: stroke-draw .5s .2s cubic-bezier(.4,0,.2,1) forwards !important; }

/* PORTO — dissolve+rotate keluar, kubus di-draw + scale masuk */
.bnav-item.anim-porto .pp-a { animation: phantom-out .3s cubic-bezier(.4,0,1,1) forwards !important; }
.bnav-item.anim-porto .pp-b { opacity:1 !important; animation: real-in-scale .52s .17s cubic-bezier(.34,1.4,.64,1) forwards !important; }
.bnav-item.anim-porto .pp-b .draw-me { animation: stroke-draw .48s .22s cubic-bezier(.4,0,.2,1) forwards !important; }

/* SIMULASI — scale gepeng favorit keluar, waveform di-draw masuk */
.bnav-item.anim-sim .sim-line-a { animation: sim-a-out .32s cubic-bezier(.55,0,.45,1) forwards !important; }
.bnav-item.anim-sim .sim-line-b { opacity:1 !important; animation: real-in-scale .5s .2s cubic-bezier(.34,1.5,.64,1), stroke-draw .5s .2s cubic-bezier(.4,0,.2,1) forwards !important; }

/* KAS — dissolve+rotate keluar, dollar di-draw + scale masuk */
.bnav-item.anim-kas .kp-a { animation: phantom-out .3s cubic-bezier(.4,0,1,1) forwards !important; }
.bnav-item.anim-kas .kp-b { opacity:1 !important; animation: real-in-scale .5s .17s cubic-bezier(.34,1.4,.64,1) forwards !important; }
.bnav-item.anim-kas .kp-b .draw-me { animation: stroke-draw .46s .22s cubic-bezier(.4,0,.2,1) forwards !important; }

/* Z-AI — card flip keluar, bubble di-draw + flip masuk, dots pop sekuensial */
.bnav-item.anim-ai .ap-a { animation: phantom-out-flip .3s cubic-bezier(.4,0,1,1) forwards !important; }
.bnav-item.anim-ai .ap-b { opacity:1 !important; animation: real-in-flip .48s .15s cubic-bezier(.34,1.3,.64,1) forwards !important; }
.bnav-item.anim-ai .ap-b .draw-me { animation: stroke-draw .45s .2s cubic-bezier(.4,0,.2,1) forwards !important; }
.bnav-item.anim-ai .ap-b .dot-pop:nth-child(2) { animation: dot-pop .3s .42s cubic-bezier(.34,1.8,.64,1) forwards !important; }
.bnav-item.anim-ai .ap-b .dot-pop:nth-child(3) { animation: dot-pop .3s .52s cubic-bezier(.34,1.8,.64,1) forwards !important; }
.bnav-item.anim-ai .ap-b .dot-pop:nth-child(4) { animation: dot-pop .3s .62s cubic-bezier(.34,1.8,.64,1) forwards !important; }

/* ══ DEACTIVATION ANIMATIONS — animasi keluar saat icon aktif ditinggalkan ══ */
@keyframes deact-out {
  0%   { opacity:1; transform: scale(1) rotate(0deg); }
  30%  { opacity:1; transform: scale(1.08) rotate(-4deg); }
  65%  { opacity:0.3; transform: scale(0.72) rotate(6deg); filter:blur(1px); }
  100% { opacity:0; transform: scale(0.45) rotate(-8deg); filter:blur(3px); }
}
@keyframes deact-in-ghost {
  0%   { opacity:0; transform: scale(0.45) rotate(8deg); }
  60%  { opacity:0.85; transform: scale(1.06) rotate(-2deg); }
  100% { opacity:1; transform: scale(1) rotate(0deg); }
}
.bnav-item.deact-home .hp-b  { animation: deact-out .28s cubic-bezier(.4,0,1,1) forwards !important; }
.bnav-item.deact-home .hp-a  { opacity:0; animation: deact-in-ghost .3s .22s cubic-bezier(.34,1.3,.64,1) forwards !important; }
.bnav-item.deact-dca .dp-b   { animation: deact-out .28s cubic-bezier(.4,0,1,1) forwards !important; }
.bnav-item.deact-dca .dp-a   { opacity:0; animation: deact-in-ghost .3s .22s cubic-bezier(.34,1.3,.64,1) forwards !important; }
.bnav-item.deact-porto .pp-b { animation: deact-out .28s cubic-bezier(.4,0,1,1) forwards !important; }
.bnav-item.deact-porto .pp-a { opacity:0; animation: deact-in-ghost .3s .22s cubic-bezier(.34,1.3,.64,1) forwards !important; }
.bnav-item.deact-sim .sim-line-b { animation: deact-out .28s cubic-bezier(.4,0,1,1) forwards !important; }
.bnav-item.deact-sim .sim-line-a { opacity:0; animation: deact-in-ghost .3s .22s cubic-bezier(.34,1.3,.64,1) forwards !important; }
.bnav-item.deact-kas .kp-b   { animation: deact-out .28s cubic-bezier(.4,0,1,1) forwards !important; }
.bnav-item.deact-kas .kp-a   { opacity:0; animation: deact-in-ghost .3s .22s cubic-bezier(.34,1.3,.64,1) forwards !important; }
.bnav-item.deact-ai .ap-b    { animation: deact-out .28s cubic-bezier(.4,0,1,1) forwards !important; }
.bnav-item.deact-ai .ap-a    { opacity:0; animation: deact-in-ghost .3s .22s cubic-bezier(.34,1.3,.64,1) forwards !important; }
/* Glow pulse untuk ikon aktif */
.bnav-item.active.glow-pulse .bnav-icon {
  animation: glowPulse 1.5s ease infinite !important;
}

/* Active state */
.bnav-item.active .bnav-icon {
  filter: drop-shadow(0 0 10px rgba(0,229,255,.9)) drop-shadow(0 0 20px rgba(0,229,255,.4)) !important;
  color: var(--accent) !important;
}
.bnav-item.active::before { display: none !important; }
.bnav-item.active .bnav-label { opacity:1 !important; }

/* BTC EDU LIGHT MODE FIX */
.btc-edu-hero { background: linear-gradient(135deg,#0a0f1e 0%,#0d1628 50%,#1a1000 100%); }
[data-theme="light"] .btc-edu-hero {
  background: linear-gradient(135deg,#fff8ee 0%,#fffdf7 60%,#fef3dc 100%) !important;
  box-shadow: 0 8px 32px rgba(247,147,26,.12), inset 0 1px 0 rgba(247,147,26,.2) !important;
}
.btc-edu-title  { color: #f1f5f9; }
[data-theme="light"] .btc-edu-title  { color: #1c0d00 !important; }
.btc-edu-body   { color: rgba(203,213,225,.82); }
[data-theme="light"] .btc-edu-body   { color: #3b2000 !important; }
.btc-edu-strong { color: #f1f5f9; }
[data-theme="light"] .btc-edu-strong { color: #1c0d00 !important; }
.btc-edu-stat-box { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
[data-theme="light"] .btc-edu-stat-box { background:rgba(247,147,26,.08)!important; border-color:rgba(247,147,26,.2)!important; }
[data-theme="light"] #page-btc-edu [style*="color:rgba(203,213,225"] { color:#3b2000!important; }
[data-theme="light"] #page-btc-edu [style*="color:#f1f5f9"] { color:#1c0d00!important; }
[data-theme="light"] #page-btc-edu [style*="background:rgba(255,255,255,.04)"],
[data-theme="light"] #page-btc-edu [style*="background:rgba(255,255,255,.05)"] {
  background:rgba(247,147,26,.06)!important; border-color:rgba(247,147,26,.15)!important;
}


/* ── OVERFLOW FIX: pastikan ikon tidak terpotong ── */
.bottom-nav, .bnav-items, .bnav-item {
  overflow: visible !important;
}
.bnav-icon, .bnav-icon svg, .bnav-icon g {
  overflow: visible !important;
}

/* ── BNAV PROPORTIONAL FIX: padding merata atas bawah, icon tidak terpotong ── */
.bnav-item {
  padding: .5rem .15rem .5rem !important;
}
.bnav-icon {
  width: 28px !important;
  height: 36px !important;
  padding-top: 8px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* ── THEME TOGGLE FIX: hapus semua rotate transform ── */
.theme-toggle:hover, .theme-toggle:active, .theme-toggle:focus {
  transform: none !important;
}

/* ── HIDE VALUES FEATURE ── */
.sensitive-val {
  transition: filter .3s ease;
}
/* Body-class approach: lebih robust terhadap dynamic re-render */
body.vals-hidden .sensitive-val {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
}
/* Fallback class juga tetap ada */
.sensitive-val.hidden-val {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
}

/* ── BLOCK 24 ── */
/* ── GLOBAL SMOOTH ── */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

/* ── PAGE EXIT ANIMATION ── */
.page.page-exit {
  animation: pageExit 160ms var(--ease-in-out-quart) both !important;
  pointer-events: none;
}
@keyframes pageExit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-5px) scale(.999); }
}

/* ── MODAL CLOSE ANIMATION ── */
.overlay.closing { animation: overlayOut 200ms var(--ease-smooth) both !important; }
.overlay.closing .modal { animation: modalOut 200ms var(--ease-in-out-quart) both !important; }
@keyframes overlayOut { to { opacity: 0; } }
@keyframes modalOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(14px) scale(.96); }
}

/* ── RIPPLE EFFECT ── */
.ripple-host { position: relative; overflow: hidden; }
.ripple-wave {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.16);
  transform: scale(0);
  animation: rippleAnim 500ms var(--ease-out-expo) forwards;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ── INTERACTIVE FEEDBACK ── */
.nav-tab { -webkit-user-select:none; user-select:none; }
.nav-tab:active { transform: scale(.93) !important; transition-duration: 70ms !important; }
.bnav-item { -webkit-user-select:none; user-select:none; }
.stat-card:active { transform: scale(.985) !important; transition-duration: 80ms !important; }
tr { -webkit-user-select:none; user-select:none; }
tr:active td { background: rgba(0,229,255,.06) !important; transition: background 60ms ease !important; }
.overlay { cursor:pointer; }
.overlay .modal { cursor:default; }

/* ── DCA TABLE ROWS — STAGGER REVEAL ── */
#dca-tbody tr { animation: rowReveal var(--duration-base) var(--ease-out-expo) both; }
#dca-tbody tr:nth-child(1)  { animation-delay: 20ms; }
#dca-tbody tr:nth-child(2)  { animation-delay: 50ms; }
#dca-tbody tr:nth-child(3)  { animation-delay: 80ms; }
#dca-tbody tr:nth-child(4)  { animation-delay: 110ms; }
#dca-tbody tr:nth-child(5)  { animation-delay: 140ms; }
#dca-tbody tr:nth-child(6)  { animation-delay: 170ms; }
#dca-tbody tr:nth-child(7)  { animation-delay: 200ms; }
#dca-tbody tr:nth-child(8)  { animation-delay: 230ms; }
#dca-tbody tr:nth-child(9)  { animation-delay: 260ms; }
#dca-tbody tr:nth-child(10) { animation-delay: 290ms; }
@keyframes rowReveal {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── SCROLLBAR — minimal ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,229,255,.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,229,255,.4); }

/* ── RESPECT prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ── LOW-END DEVICE: disable heavy effects ── */
.low-end .grid-bg { animation: none !important; }
.low-end .zw-z { animation: none !important; }
.low-end *:not(input):not(textarea) { animation-duration: .01ms !important; }
.low-end nav, .low-end .nav-topstrip, .low-end .bottom-nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--nav-bg) !important;
}
.low-end .modal-acct-glass {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--surface) !important;
}
.low-end .stat-card::after { display: none !important; }
.low-end .stat-card:hover { transform: none !important; }
.low-end .btc-chart-loading { backdrop-filter: none !important; }
.low-end .sync-bar { backdrop-filter: none !important; }

/* ══════════════════════════════════════════════
   BITCOIN POWER LAW PAGE
══════════════════════════════════════════════ */
#page-btc-powerlaw canvas {
  width: 100% !important;
  height: 240px !important;
}

/* ══════════════════════════════════════════════
   CRYPTO CALENDAR PAGE
══════════════════════════════════════════════ */

/* Skeleton shimmer animation */
@keyframes calSkeleton {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.cal-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.1)  50%,
    rgba(255,255,255,.05) 75%
  );
  background-size: 200px 100%;
  animation: calSkeleton 1.4s ease infinite;
  border-radius: 4px;
}

/* Calendar grid */
#cal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-bottom: 1rem;
}

/* Day card */
.cal-day-card {
  background: var(--surface);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 13px;
  padding: .6rem .65rem;
  min-height: 100px;
  transition: border-color .2s, transform .15s;
  cursor: default;
}
.cal-day-card.today {
  background: rgba(6,182,212,.07);
  border-color: rgba(6,182,212,.5);
}
.cal-day-card.past {
  opacity: .55;
}
.cal-day-card:hover {
  border-color: rgba(255,255,255,.15);
}

/* Event bubble */
.cal-event-bubble {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  padding: .22rem .4rem;
  border-radius: 5px;
  font-size: .58rem;
  font-weight: 600;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  transition: filter .15s, opacity .15s;
  border: 1px solid transparent;
  line-height: 1.4;
}
.cal-event-bubble:hover {
  filter: brightness(1.2);
}
.cal-event-bubble:active {
  opacity: .7;
}

/* Impact dot */
.cal-impact-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Detail panel */
#cal-detail {
  background: var(--surface);
  border: 1px solid rgba(6,182,212,.3);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1rem;
  animation: fadeIn .2s ease;
}

/* Week nav buttons */
.cal-week-btn {
  display: flex;
  align-items: center;
  gap: .3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: .45rem .8rem;
  color: var(--text);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  font-family: 'Inter', sans-serif;
}
.cal-week-btn:hover {
  border-color: rgba(6,182,212,.4);
  background: rgba(6,182,212,.06);
  color: #67e8f9;
}
.cal-week-btn:active {
  transform: scale(.97);
}

/* Status bar */
#cal-status {
  font-size: .62rem;
  color: rgba(103,232,249,.6);
  margin-top: .5rem;
  min-height: .9rem;
  transition: color .3s;
}

/* Calendar legend */
.cal-legend {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .75rem 1rem;
  margin-bottom: 1.5rem;
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  color: var(--muted);
}
.cal-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Responsive: single column on very small screens */
@media (max-width: 360px) {
  #cal-grid {
    grid-template-columns: 1fr;
  }
}

/* Low-end: disable calendar animations */
.low-end .cal-skeleton { animation: none !important; background: rgba(255,255,255,.06) !important; }
.low-end #cal-detail { animation: none !important; }

/* ══════════════════════════════════════════════
   POWER LAW PAGE — POLISH
══════════════════════════════════════════════ */
#page-btc-powerlaw .pl-stat-card {
  background: var(--surface);
  border-radius: 12px;
  padding: .65rem .75rem;
  text-align: center;
}

/* Position bar gradient track */
#pl-position-bar {
  background: linear-gradient(90deg, #10b981, #f7931a, #ef4444) !important;
  transition: width .8s cubic-bezier(.34,1.3,.64,1) !important;
}

/* Projection grid cards */
#pl-projections > div {
  transition: transform .15s, box-shadow .15s;
}
#pl-projections > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(124,58,237,.2);
}

/* Loading overlay smooth */
#pl-loading {
  transition: opacity .3s ease;
}

/* ══════════════════════════════════════════════
   CRYPTO CALENDAR — EXTRA POLISH
══════════════════════════════════════════════ */

/* Smooth detail panel slide-in */
#cal-detail {
  animation: calDetailIn .25s cubic-bezier(.34,1.3,.64,1);
}
@keyframes calDetailIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Calendar day card hover — subtle lift */
.cal-day-card {
  transition: border-color .2s, transform .15s, box-shadow .15s;
}
.cal-day-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.cal-day-card.today:hover {
  box-shadow: 0 4px 20px rgba(6,182,212,.2);
}

/* Event bubble active press */
.cal-event-bubble:active {
  transform: scale(.96);
  opacity: .75;
}

/* Week button active press */
.cal-week-btn:active {
  transform: scale(.96);
}

/* Range label */
#cal-range-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  min-width: 0;
  flex: 1;
}

/* Status message fade */
#cal-status {
  transition: opacity .4s ease;
}

/* Light theme overrides */
[data-theme="light"] .cal-day-card {
  border-color: rgba(0,0,0,.08);
}
[data-theme="light"] .cal-day-card.today {
  background: rgba(6,182,212,.06);
  border-color: rgba(6,182,212,.4);
}
[data-theme="light"] .cal-day-card.past {
  opacity: .5;
}
[data-theme="light"] #cal-detail {
  border-color: rgba(6,182,212,.25);
}
[data-theme="light"] .cal-week-btn:hover {
  border-color: rgba(6,182,212,.35);
  background: rgba(6,182,212,.05);
  color: #0891b2;
}
[data-theme="light"] #cal-status {
  color: rgba(8,145,178,.7);
}

/* ══════════════════════════════════════════════
   ACCOUNT MODAL — LIGHT THEME
══════════════════════════════════════════════ */
[data-theme="light"] .acct-settings-group {
  border-color: rgba(0,0,0,.07);
  background: rgba(0,0,0,.02);
}
[data-theme="light"] .acct-setting-row {
  border-color: rgba(0,0,0,.06) !important;
}
[data-theme="light"] .acct-setting-title {
  color: #1e293b;
}
[data-theme="light"] .acct-fp-toggle {
  background: rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.12);
}
[data-theme="light"] .acct-fp-knob {
  background: #94a3b8;
}
[data-theme="light"] .acct-notif-toggle-btn {
  background: rgba(239,68,68,.06);
}


/* ══════════════════════════════════════════════════════
   ZEN PAPER THEME — v1.0
   Tampilan 180° berlawanan dari Cyberpunk default.
   Inspired by: japanese washi paper, serif editorial,
   warm cream, ink brushstrokes, quiet luxury.
   Diaktifkan via: html[data-style="zen"]
══════════════════════════════════════════════════════ */

/* Google Font load untuk Zen */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');

/* ── ZEN CSS VARIABLES ── */
html[data-style="zen"] {
  --bg: #f7f3ed;
  --surface: #faf8f4;
  --surface2: #f0ebe2;
  --border: #d9cfc2;
  --accent: #8b5e3c;
  --accent2: #5c7a6b;
  --accent3: #5c7a6b;
  --accent4: #b8862b;
  --danger: #b04040;
  --text: #2c2416;
  --muted: #8a7a6a;
  --glow: 0 2px 12px rgba(139,94,60,.08);
  --glow2: 0 4px 24px rgba(139,94,60,.16);
  --nav-bg: rgba(247,243,237,.97);
  --card-shadow: 0 2px 16px rgba(44,36,22,.07);
}

/* ── BODY & TYPOGRAPHY ── */
html[data-style="zen"] body {
  font-family: 'Lora', Georgia, serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Remove cyberpunk grid bg */
html[data-style="zen"] .grid-bg {
  background-image: none !important;
  opacity: 0 !important;
}

/* ── PAPER TEXTURE OVERLAY ── */
html[data-style="zen"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
}

/* ── NAV ── */
html[data-style="zen"] nav {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(139,94,60,.06) !important;
}

html[data-style="zen"] .nav-logo,
html[data-style="zen"] .zw-z {
  color: var(--accent) !important;
  text-shadow: none !important;
  font-style: normal !important;
  font-family: 'Playfair Display', serif !important;
}

html[data-style="zen"] .zw-z::after {
  background: linear-gradient(90deg, var(--accent), rgba(139,94,60,.1)) !important;
}

html[data-style="zen"] .zw-hyphen {
  color: rgba(139,94,60,.3) !important;
}

html[data-style="zen"] .zw-wealth {
  color: var(--text) !important;
  font-family: 'Playfair Display', serif !important;
}

html[data-style="zen"] .nav-tab {
  font-family: 'Lora', serif !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  font-size: .82rem !important;
  color: var(--muted) !important;
}

html[data-style="zen"] .nav-tab:hover {
  color: var(--text) !important;
}

html[data-style="zen"] .nav-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

html[data-style="zen"] .btc-badge,
html[data-style="zen"] .acct-badge {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  font-family: 'DM Mono', monospace !important;
  color: var(--text) !important;
}

html[data-style="zen"] .live-dot,
html[data-style="zen"] .acct-dot {
  background: var(--accent3) !important;
}

/* ── PAGE HEADERS ── */
html[data-style="zen"] .ph h1 {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--text) !important;
  background-clip: unset !important;
  color: var(--text) !important;
  letter-spacing: -.01em !important;
}

html[data-style="zen"] .ph p {
  font-family: 'Lora', serif !important;
  color: var(--muted) !important;
  font-style: italic !important;
}

html[data-style="zen"] .sec-title {
  font-family: 'Lora', serif !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: var(--muted) !important;
}

html[data-style="zen"] .sec-title::before {
  background: var(--accent) !important;
  width: 3px !important;
  height: 12px !important;
  border-radius: 1px !important;
}

/* ── STAT CARDS ── */
html[data-style="zen"] .stat-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 4px rgba(44,36,22,.06) !important;
}

html[data-style="zen"] .stat-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 3px 16px rgba(139,94,60,.1) !important;
  transform: translateY(-1px) !important;
}

html[data-style="zen"] .slabel {
  font-family: 'Lora', serif !important;
  font-size: .65rem !important;
  letter-spacing: .14em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
}

html[data-style="zen"] .sval {
  font-family: 'DM Mono', monospace !important;
  color: var(--text) !important;
}

html[data-style="zen"] .ssub {
  font-family: 'DM Mono', monospace !important;
  color: var(--muted) !important;
}

html[data-style="zen"] .pos { color: #4a7c5c !important; }
html[data-style="zen"] .neg { color: var(--danger) !important; }
html[data-style="zen"] .acc { color: var(--accent) !important; }
html[data-style="zen"] .gld { color: var(--accent4) !important; }

/* ── BUTTONS ── */
html[data-style="zen"] .btn-primary {
  background: var(--accent) !important;
  color: #faf8f4 !important;
  border-radius: 4px !important;
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  box-shadow: none !important;
}

html[data-style="zen"] .btn-primary:hover {
  background: #7a5233 !important;
  box-shadow: 0 2px 12px rgba(139,94,60,.2) !important;
  transform: translateY(-1px) !important;
}

html[data-style="zen"] .btn-ghost {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  border-radius: 4px !important;
  font-family: 'Lora', serif !important;
}

html[data-style="zen"] .btn-ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

html[data-style="zen"] .btn-del {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  border-radius: 4px !important;
}

html[data-style="zen"] .btn-del:hover {
  background: var(--danger) !important;
}

/* ── CARDS / CHART WRAP / MODAL ── */
html[data-style="zen"] .card,
html[data-style="zen"] .chart-wrap,
html[data-style="zen"] .tbl-wrap,
html[data-style="zen"] .port-card,
html[data-style="zen"] .sim-card,
html[data-style="zen"] .modal {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 6px rgba(44,36,22,.05) !important;
}

html[data-style="zen"] .modal {
  border-radius: 8px !important;
}

html[data-style="zen"] .modal-title {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  color: var(--text) !important;
  font-size: 1.2rem !important;
}

/* ── FORM INPUTS ── */
html[data-style="zen"] .fi,
html[data-style="zen"] .fs,
html[data-style="zen"] .sinput {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  border-radius: 4px !important;
  font-family: 'DM Mono', monospace !important;
}

html[data-style="zen"] .fi:focus,
html[data-style="zen"] .fs:focus,
html[data-style="zen"] .sinput:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(139,94,60,.08) !important;
}

/* ── TABLE ── */
html[data-style="zen"] th {
  background: var(--surface2) !important;
  color: var(--muted) !important;
  font-family: 'Lora', serif !important;
  font-size: .68rem !important;
  letter-spacing: .12em !important;
  border-color: var(--border) !important;
}

html[data-style="zen"] td {
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-family: 'DM Mono', monospace !important;
}

html[data-style="zen"] tr:hover td {
  background: rgba(139,94,60,.02) !important;
}

/* ── BADGES ── */
html[data-style="zen"] .badge.bg {
  background: rgba(92,122,107,.12) !important;
  color: #4a7c5c !important;
  border-color: rgba(92,122,107,.25) !important;
}

html[data-style="zen"] .badge.br {
  background: rgba(176,64,64,.1) !important;
  color: var(--danger) !important;
  border-color: rgba(176,64,64,.2) !important;
}

html[data-style="zen"] .badge.bb {
  background: rgba(139,94,60,.08) !important;
  color: var(--accent) !important;
  border-color: rgba(139,94,60,.2) !important;
}

/* ── LOGIN SCREEN ── */
html[data-style="zen"] #login-screen {
  background: var(--bg) !important;
}

html[data-style="zen"] .login-box {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 32px rgba(44,36,22,.1) !important;
}

html[data-style="zen"] .login-logo .zw-z {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  color: var(--accent) !important;
  text-shadow: none !important;
}

html[data-style="zen"] .login-logo .zw-wealth {
  font-family: 'Playfair Display', serif !important;
  color: var(--text) !important;
}

html[data-style="zen"] .ltabs {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
}

html[data-style="zen"] .ltab.active {
  background: var(--accent) !important;
  color: #faf8f4 !important;
}

html[data-style="zen"] .lbtn {
  background: var(--accent) !important;
  color: #faf8f4 !important;
  border-radius: 4px !important;
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
}

html[data-style="zen"] .lbtn:hover:not(:disabled) {
  background: #7a5233 !important;
  box-shadow: 0 2px 16px rgba(139,94,60,.2) !important;
  transform: translateY(-1px) !important;
}

html[data-style="zen"] .lbtn-ghost {
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-family: 'Lora', serif !important;
  border-radius: 4px !important;
}

html[data-style="zen"] .lbtn-ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

html[data-style="zen"] .sw {
  background: var(--surface2) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  border-radius: 4px !important;
  font-family: 'DM Mono', monospace !important;
  box-shadow: none !important;
}

html[data-style="zen"] .seed-warn {
  background: rgba(184,134,43,.07) !important;
  border-color: rgba(184,134,43,.25) !important;
  color: var(--accent4) !important;
}

/* ── BOTTOM NAV ── */
html[data-style="zen"] .bottom-nav {
  background: rgba(247,243,237,.88) !important;
  backdrop-filter: blur(32px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.2) !important;
  box-shadow:
    0 -1px 0 rgba(139,94,60,.12),
    0 8px 32px rgba(44,36,22,.1),
    0 0 0 1px rgba(139,94,60,.08) inset !important;
}

html[data-style="zen"] .bnav-item {
  color: rgba(44,36,22,.4) !important;
  font-family: 'Lora', serif !important;
}

html[data-style="zen"] .bnav-item.active {
  color: var(--accent) !important;
}

html[data-style="zen"] .bnav-item.active::before {
  background: rgba(139,94,60,.07) !important;
  border-color: rgba(139,94,60,.15) !important;
}

html[data-style="zen"] .bnav-item.active .bnav-icon {
  filter: drop-shadow(0 1px 6px rgba(139,94,60,.35)) !important;
}

html[data-style="zen"] .bnav-label {
  font-size: .47rem !important;
  letter-spacing: .06em !important;
  font-family: 'Lora', serif !important;
  text-transform: uppercase !important;
}

html[data-style="zen"] #bnav-indicator {
  background: linear-gradient(90deg, rgba(139,94,60,.3), var(--accent), rgba(139,94,60,.3)) !important;
  box-shadow: 0 0 6px rgba(139,94,60,.4) !important;
  animation: none !important;
}

/* ── OVERLAYS & MODALS ── */
html[data-style="zen"] .overlay {
  background: rgba(44,36,22,.55) !important;
  backdrop-filter: blur(8px) !important;
}

/* ── TOAST ── */
html[data-style="zen"] #toast-wrapper .toast > div {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: 'Lora', serif !important;
  box-shadow: 0 4px 24px rgba(44,36,22,.12) !important;
}

/* ── NAV TOPSTRIP ── */
html[data-style="zen"] .nav-topstrip {
  background: var(--nav-bg) !important;
  border-color: var(--border) !important;
}

/* ── BTC CHART ── */
html[data-style="zen"] .btc-price-big {
  font-family: 'DM Mono', monospace !important;
  color: var(--accent4) !important;
}

html[data-style="zen"] .btc-price-idr {
  font-family: 'DM Mono', monospace !important;
  color: var(--muted) !important;
}

html[data-style="zen"] .tf-btn {
  font-family: 'DM Mono', monospace !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  border-radius: 3px !important;
}

html[data-style="zen"] .tf-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #faf8f4 !important;
}

html[data-style="zen"] .tf-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

html[data-style="zen"] .btc-change-badge.up {
  background: rgba(92,122,107,.1) !important;
  color: #4a7c5c !important;
  border-color: rgba(92,122,107,.2) !important;
}

html[data-style="zen"] .btc-change-badge.dn {
  background: rgba(176,64,64,.08) !important;
  color: var(--danger) !important;
  border-color: rgba(176,64,64,.18) !important;
}

/* ── RANGE INPUT ── */
html[data-style="zen"] input[type=range]::-webkit-slider-thumb {
  background: var(--accent) !important;
  box-shadow: 0 0 6px rgba(139,94,60,.3) !important;
}

/* ── PORT CARD ── */
html[data-style="zen"] .port-card:hover {
  border-color: var(--accent) !important;
}

html[data-style="zen"] .asset-icon {
  background: linear-gradient(135deg,rgba(139,94,60,.1),rgba(92,122,107,.1)) !important;
  border-color: var(--border) !important;
}

html[data-style="zen"] .asset-price {
  font-family: 'DM Mono', monospace !important;
  color: var(--accent) !important;
}

/* ── LOGOUT & EXPORT BTNS ── */
html[data-style="zen"] .logout-btn {
  border-color: var(--border) !important;
  color: var(--muted) !important;
  font-family: 'Lora', serif !important;
  border-radius: 4px !important;
}

html[data-style="zen"] .logout-btn:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

html[data-style="zen"] .export-pdf-btn {
  border-color: rgba(139,94,60,.25) !important;
  color: var(--accent) !important;
  font-family: 'Lora', serif !important;
  border-radius: 4px !important;
}

html[data-style="zen"] .export-pdf-btn:hover {
  background: rgba(139,94,60,.07) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 2px 8px rgba(139,94,60,.12) !important;
}

/* ── THEME PAGE SPECIAL BUTTON ── */
html[data-style="zen"] #zen-style-btn {
  border-color: var(--accent) !important;
  background: rgba(139,94,60,.08) !important;
  color: var(--accent) !important;
}

/* ── ONBOARDING SCREEN ── */
html[data-style="zen"] #ob-screen {
  background: var(--bg) !important;
}

html[data-style="zen"] .ob-splash-title {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  color: var(--accent) !important;
  text-shadow: none !important;
}

html[data-style="zen"] .ob-splash-sub {
  color: var(--muted) !important;
  font-family: 'Lora', serif !important;
  font-style: italic !important;
}

html[data-style="zen"] .ob-splash-bar {
  background: rgba(139,94,60,.15) !important;
}

html[data-style="zen"] .ob-splash-bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent4)) !important;
}

html[data-style="zen"] .ob-slide-title {
  font-family: 'Playfair Display', serif !important;
  color: var(--text) !important;
}

html[data-style="zen"] .ob-slide-title span {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--accent) !important;
}

html[data-style="zen"] .ob-slide-desc {
  font-family: 'Lora', serif !important;
  font-style: italic !important;
  color: var(--muted) !important;
}

html[data-style="zen"] .ob-slide-label {
  font-family: 'Lora', serif !important;
  color: var(--accent) !important;
  letter-spacing: .12em !important;
}

html[data-style="zen"] .ob-btn-primary {
  background: var(--accent) !important;
  color: #faf8f4 !important;
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

html[data-style="zen"] .ob-btn-skip {
  color: var(--muted) !important;
  font-family: 'Lora', serif !important;
}

/* ── FITUR MODAL ── */
html[data-style="zen"] #fitur-modal-sheet {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -4px 32px rgba(44,36,22,.12) !important;
}

html[data-style="zen"] .fitur-modal-title span {
  font-family: 'Lora', serif !important;
  color: var(--text) !important;
}

html[data-style="zen"] .fitur-modal-section-label {
  font-family: 'Lora', serif !important;
  color: var(--muted) !important;
  letter-spacing: .1em !important;
}

/* ── FP LOCK SCREEN ── */
html[data-style="zen"] #fp-lock-screen {
  background: var(--bg) !important;
}

/* ── ZEN THEME BUTTON ON THEME PAGE ── */
.zen-style-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-radius: 6px;
  border: 1.5px solid #c4a882;
  background: linear-gradient(135deg, #fdf8f0, #f5ede0);
  cursor: pointer;
  text-align: left;
  transition: all .25s;
  font-family: inherit;
  margin-top: .4rem;
}

.zen-style-toggle-btn:hover {
  border-color: #8b5e3c;
  box-shadow: 0 3px 16px rgba(139,94,60,.15);
  transform: translateY(-1px);
}

.zen-style-toggle-btn.active {
  border-color: #8b5e3c;
  background: linear-gradient(135deg, #f5ede0, #ede0cc);
  box-shadow: 0 3px 20px rgba(139,94,60,.18);
}

.zen-btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: linear-gradient(135deg, #8b5e3c, #b8862b);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.35rem;
}

.zen-btn-text {
  flex: 1;
}

.zen-btn-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .95rem;
  font-weight: 700;
  font-style: italic;
  color: #2c2416;
  margin-bottom: .15rem;
}

.zen-btn-sub {
  font-size: .73rem;
  color: #8a7a6a;
  font-family: 'Lora', Georgia, serif;
}

.zen-btn-badge {
  background: #8b5e3c;
  color: #faf8f4;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .18rem .55rem;
  border-radius: 3px;
  flex-shrink: 0;
}

html[data-style="zen"] .zen-style-toggle-btn {
  border-color: #8b5e3c !important;
}

html[data-style="zen"] .zen-style-toggle-btn .zen-btn-badge {
  background: #5c7a6b !important;
  content: 'AKTIF';
}

/* ── ZEN ACCENT ACTIVE ── */
html[data-style="zen"] .zen-btn-badge::after {
  content: ' ✓';
}



/* ══════════════════════════════════════════════════════
   VIVID STUDIO THEME — v1.0
   Inspired by: modern app UI, bold colored cards,
   clean white backgrounds, playful rounded shapes,
   colorful category bubbles, fresh & energetic.
   Diaktifkan via: html[data-style="vivid"]
══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── VIVID CSS VARIABLES ── */
html[data-style="vivid"] {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface2: #f0f2f8;
  --border: #e4e8f4;
  --accent: #5b6ef5;
  --accent2: #ff4d8d;
  --accent3: #00c896;
  --accent4: #ff9500;
  --danger: #ff3b5c;
  --text: #18192b;
  --muted: #8b90b0;
  --glow: 0 4px 20px rgba(91,110,245,.12);
  --glow2: 0 8px 32px rgba(91,110,245,.22);
  --nav-bg: rgba(255,255,255,.96);
  --card-shadow: 0 2px 20px rgba(24,25,43,.07);
}

/* ── BODY ── */
html[data-style="vivid"] body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Remove cyberpunk grid, add subtle dot pattern */
html[data-style="vivid"] .grid-bg {
  background-image: radial-gradient(circle, rgba(91,110,245,.06) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
}

/* ── NAV ── */
html[data-style="vivid"] nav {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(91,110,245,.06), 0 2px 16px rgba(24,25,43,.04) !important;
}

html[data-style="vivid"] .nav-logo,
html[data-style="vivid"] .zw-z {
  color: var(--accent) !important;
  text-shadow: none !important;
  font-family: 'Syne', sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html[data-style="vivid"] .zw-z::after {
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  height: 3px !important;
  border-radius: 2px !important;
}

html[data-style="vivid"] .zw-hyphen {
  color: rgba(91,110,245,.3) !important;
}

html[data-style="vivid"] .zw-wealth {
  color: var(--text) !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
}

html[data-style="vivid"] .nav-tab {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

html[data-style="vivid"] .nav-tab:hover {
  color: var(--text) !important;
}

html[data-style="vivid"] .nav-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

html[data-style="vivid"] .btc-badge,
html[data-style="vivid"] .acct-badge {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--text) !important;
  box-shadow: 0 2px 8px rgba(24,25,43,.06) !important;
}

html[data-style="vivid"] .live-dot {
  background: var(--accent3) !important;
  box-shadow: 0 0 6px rgba(0,200,150,.5) !important;
}

html[data-style="vivid"] .acct-dot {
  background: var(--accent3) !important;
}

/* ── PAGE HEADERS ── */
html[data-style="vivid"] .ph h1 {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -.02em !important;
}

html[data-style="vivid"] .ph p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--muted) !important;
  font-size: .83rem !important;
}

html[data-style="vivid"] .sec-title {
  font-family: 'Syne', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--muted) !important;
}

html[data-style="vivid"] .sec-title::before {
  background: linear-gradient(180deg, var(--accent), var(--accent2)) !important;
  width: 3px !important;
  height: 14px !important;
  border-radius: 3px !important;
}

/* ── STAT CARDS ── */
html[data-style="vivid"] .stat-card {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 16px rgba(24,25,43,.05) !important;
  transition: all .25s cubic-bezier(.34,1.56,.64,1) !important;
}

html[data-style="vivid"] .stat-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 32px rgba(91,110,245,.15) !important;
  transform: translateY(-3px) !important;
}

html[data-style="vivid"] .slabel {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .65rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
}

html[data-style="vivid"] .sval {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -.02em !important;
}

html[data-style="vivid"] .ssub {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--muted) !important;
}

html[data-style="vivid"] .pos { color: #00b37a !important; }
html[data-style="vivid"] .neg { color: var(--danger) !important; }
html[data-style="vivid"] .acc { color: var(--accent) !important; }
html[data-style="vivid"] .gld { color: var(--accent4) !important; }

/* ── BUTTONS ── */
html[data-style="vivid"] .btn-primary {
  background: linear-gradient(135deg, var(--accent), #7b8ff8) !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(91,110,245,.35) !important;
  border: none !important;
}

html[data-style="vivid"] .btn-primary:hover {
  background: linear-gradient(135deg, #4a5de0, var(--accent)) !important;
  box-shadow: 0 8px 24px rgba(91,110,245,.45) !important;
  transform: translateY(-2px) !important;
}

html[data-style="vivid"] .btn-ghost {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 6px rgba(24,25,43,.06) !important;
}

html[data-style="vivid"] .btn-ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  box-shadow: 0 4px 16px rgba(91,110,245,.12) !important;
}

html[data-style="vivid"] .btn-del {
  border-color: rgba(255,59,92,.3) !important;
  color: var(--danger) !important;
  border-radius: 10px !important;
}

html[data-style="vivid"] .btn-del:hover {
  background: var(--danger) !important;
}

/* ── CARDS ── */
html[data-style="vivid"] .card,
html[data-style="vivid"] .chart-wrap,
html[data-style="vivid"] .sim-card {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 16px rgba(24,25,43,.05) !important;
}

html[data-style="vivid"] .tbl-wrap {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 16px rgba(24,25,43,.05) !important;
}

/* ── MODAL ── */
html[data-style="vivid"] .overlay {
  background: rgba(24,25,43,.45) !important;
  backdrop-filter: blur(10px) !important;
}

html[data-style="vivid"] .modal {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 64px rgba(24,25,43,.16) !important;
}

html[data-style="vivid"] .modal-title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -.01em !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── FORM INPUTS ── */
html[data-style="vivid"] .fi,
html[data-style="vivid"] .fs,
html[data-style="vivid"] .sinput {
  background: var(--bg) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .88rem !important;
}

html[data-style="vivid"] .fi:focus,
html[data-style="vivid"] .fs:focus,
html[data-style="vivid"] .sinput:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(91,110,245,.1) !important;
}

/* ── TABLE ── */
html[data-style="vivid"] th {
  background: var(--surface2) !important;
  color: var(--muted) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  border-color: var(--border) !important;
}

html[data-style="vivid"] td {
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .78rem !important;
}

html[data-style="vivid"] tr:hover td {
  background: rgba(91,110,245,.03) !important;
}

/* ── BADGES ── */
html[data-style="vivid"] .badge.bg {
  background: rgba(0,200,150,.12) !important;
  color: #00a36c !important;
  border-color: rgba(0,200,150,.25) !important;
}

html[data-style="vivid"] .badge.br {
  background: rgba(255,59,92,.1) !important;
  color: var(--danger) !important;
  border-color: rgba(255,59,92,.2) !important;
}

html[data-style="vivid"] .badge.bb {
  background: rgba(91,110,245,.1) !important;
  color: var(--accent) !important;
  border-color: rgba(91,110,245,.2) !important;
}

/* ── LOGIN ── */
html[data-style="vivid"] #login-screen {
  background: linear-gradient(145deg, #eef0ff, #f4f6fb, #ffeef5) !important;
}

html[data-style="vivid"] .login-box {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 28px !important;
  box-shadow: 0 16px 64px rgba(91,110,245,.12) !important;
}

html[data-style="vivid"] .login-logo .zw-z {
  font-family: 'Syne', sans-serif !important;
  color: var(--accent) !important;
  text-shadow: none !important;
  font-style: normal !important;
}

html[data-style="vivid"] .login-logo .zw-wealth {
  font-family: 'Syne', sans-serif !important;
  color: var(--text) !important;
}

html[data-style="vivid"] .ltabs {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  border-radius: 14px !important;
}

html[data-style="vivid"] .ltab {
  border-radius: 10px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

html[data-style="vivid"] .ltab.active {
  background: linear-gradient(135deg, var(--accent), #7b8ff8) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(91,110,245,.3) !important;
}

html[data-style="vivid"] .lbtn {
  background: linear-gradient(135deg, var(--accent), #7b8ff8) !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(91,110,245,.35) !important;
}

html[data-style="vivid"] .lbtn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4a5de0, var(--accent)) !important;
  box-shadow: 0 8px 24px rgba(91,110,245,.45) !important;
  transform: translateY(-2px) !important;
}

html[data-style="vivid"] .lbtn-ghost {
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background: var(--surface) !important;
}

html[data-style="vivid"] .lbtn-ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

html[data-style="vivid"] .sw {
  background: var(--surface2) !important;
  border: 2px solid rgba(91,110,245,.3) !important;
  color: var(--accent) !important;
  border-radius: 12px !important;
  font-family: 'JetBrains Mono', monospace !important;
  box-shadow: none !important;
}

html[data-style="vivid"] .seed-warn {
  background: rgba(255,149,0,.07) !important;
  border-color: rgba(255,149,0,.25) !important;
  color: #c97000 !important;
  border-radius: 14px !important;
}

/* ── BOTTOM NAV ── */
html[data-style="vivid"] .bottom-nav {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(32px) saturate(2) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2) !important;
  box-shadow:
    0 -1px 0 rgba(91,110,245,.08),
    0 8px 48px rgba(24,25,43,.14),
    0 0 0 1px rgba(91,110,245,.06) inset !important;
  border-radius: 28px !important;
}

html[data-style="vivid"] .bnav-item {
  color: rgba(24,25,43,.35) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

html[data-style="vivid"] .bnav-item.active {
  color: var(--accent) !important;
}

html[data-style="vivid"] .bnav-item.active::before {
  background: rgba(91,110,245,.08) !important;
  border-color: rgba(91,110,245,.18) !important;
  border-radius: 16px !important;
}

html[data-style="vivid"] .bnav-item.active .bnav-icon {
  filter: drop-shadow(0 2px 8px rgba(91,110,245,.5)) !important;
  transform: translateY(-3px) scale(1.18) !important;
}

html[data-style="vivid"] .bnav-label {
  font-size: .48rem !important;
  letter-spacing: .04em !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

html[data-style="vivid"] #bnav-indicator {
  background: linear-gradient(90deg, rgba(91,110,245,.3), var(--accent), rgba(255,77,141,.5)) !important;
  box-shadow: 0 0 8px rgba(91,110,245,.5) !important;
}

/* ── NAV TOPSTRIP ── */
html[data-style="vivid"] .nav-topstrip {
  background: var(--nav-bg) !important;
  border-color: var(--border) !important;
}

/* ── BTC CHART ── */
html[data-style="vivid"] .btc-chart-wrap {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 16px rgba(24,25,43,.05) !important;
}

html[data-style="vivid"] .btc-price-big {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: var(--accent4) !important;
  letter-spacing: -.02em !important;
}

html[data-style="vivid"] .btc-price-idr {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--muted) !important;
}

html[data-style="vivid"] .btc-change-badge.up {
  background: rgba(0,200,150,.12) !important;
  color: #00a36c !important;
  border-color: rgba(0,200,150,.25) !important;
  border-radius: 8px !important;
}

html[data-style="vivid"] .btc-change-badge.dn {
  background: rgba(255,59,92,.1) !important;
  color: var(--danger) !important;
  border-color: rgba(255,59,92,.2) !important;
  border-radius: 8px !important;
}

html[data-style="vivid"] .tf-btn {
  font-family: 'JetBrains Mono', monospace !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
}

html[data-style="vivid"] .tf-btn.active {
  background: linear-gradient(135deg, var(--accent), #7b8ff8) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(91,110,245,.3) !important;
}

html[data-style="vivid"] .tf-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── PORTFOLIO CARDS ── */
html[data-style="vivid"] .port-card {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 16px rgba(24,25,43,.05) !important;
}

html[data-style="vivid"] .port-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 32px rgba(91,110,245,.15) !important;
  transform: translateY(-3px) !important;
}

html[data-style="vivid"] .asset-icon {
  background: linear-gradient(135deg, rgba(91,110,245,.12), rgba(255,77,141,.1)) !important;
  border: 1.5px solid rgba(91,110,245,.15) !important;
  border-radius: 14px !important;
}

html[data-style="vivid"] .asset-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
}

html[data-style="vivid"] .asset-ticker {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--muted) !important;
}

html[data-style="vivid"] .asset-price {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}

/* ── RANGE SLIDER ── */
html[data-style="vivid"] input[type=range] {
  background: var(--border) !important;
}

html[data-style="vivid"] input[type=range]::-webkit-slider-thumb {
  background: linear-gradient(135deg, var(--accent), #7b8ff8) !important;
  box-shadow: 0 2px 8px rgba(91,110,245,.4) !important;
}

/* ── TOAST ── */
html[data-style="vivid"] #toast-wrapper .toast > div {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  box-shadow: 0 8px 32px rgba(91,110,245,.14) !important;
  border-radius: 16px !important;
}

/* ── LOGOUT / EXPORT ── */
html[data-style="vivid"] .logout-btn {
  border: 1.5px solid var(--border) !important;
  color: var(--muted) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
}

html[data-style="vivid"] .logout-btn:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

html[data-style="vivid"] .export-pdf-btn {
  border: 1.5px solid rgba(91,110,245,.25) !important;
  color: var(--accent) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
}

html[data-style="vivid"] .export-pdf-btn:hover {
  background: rgba(91,110,245,.06) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 16px rgba(91,110,245,.15) !important;
}

/* ── SYNC BAR ── */
html[data-style="vivid"] .sync-bar {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(24,25,43,.08) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ── ACCOUNT MODAL ── */
html[data-style="vivid"] .modal-acct-glass {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(32px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  border: 1.5px solid rgba(91,110,245,.12) !important;
  box-shadow: 0 32px 80px rgba(24,25,43,.16) !important;
}

html[data-style="vivid"] .acct-title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
}

html[data-style="vivid"] .acct-title-icon {
  background: rgba(91,110,245,.1) !important;
  border-color: rgba(91,110,245,.2) !important;
  border-radius: 12px !important;
  color: var(--accent) !important;
}

html[data-style="vivid"] .acct-x {
  background: rgba(24,25,43,.04) !important;
  border-color: rgba(24,25,43,.08) !important;
  border-radius: 10px !important;
}

html[data-style="vivid"] .acct-seed-box {
  background: rgba(91,110,245,.04) !important;
  border-color: rgba(91,110,245,.15) !important;
  border-radius: 16px !important;
}

html[data-style="vivid"] .acct-stats {
  background: rgba(91,110,245,.04) !important;
  border-color: rgba(91,110,245,.1) !important;
  border-radius: 16px !important;
}

html[data-style="vivid"] .acct-stat-sep {
  background: rgba(91,110,245,.12) !important;
}

html[data-style="vivid"] .acct-stat-v {
  font-family: 'Syne', sans-serif !important;
  color: var(--accent) !important;
}

/* ── FITUR MODAL ── */
html[data-style="vivid"] #fitur-modal-sheet {
  background: var(--surface) !important;
  border-top: 1.5px solid var(--border) !important;
  box-shadow: 0 -8px 48px rgba(91,110,245,.12) !important;
  border-radius: 28px 28px 0 0 !important;
}

html[data-style="vivid"] .fitur-modal-title span {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

html[data-style="vivid"] .fitur-modal-section-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  font-size: .68rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* ── ONBOARDING ── */
html[data-style="vivid"] #ob-screen {
  background: linear-gradient(145deg, #eef0ff, #f4f6fb) !important;
}

html[data-style="vivid"] .ob-splash-title {
  font-family: 'Syne', sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  text-shadow: none !important;
}

html[data-style="vivid"] .ob-splash-sub {
  color: var(--muted) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

html[data-style="vivid"] .ob-splash-bar {
  background: rgba(91,110,245,.15) !important;
  border-radius: 4px !important;
}

html[data-style="vivid"] .ob-splash-bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
}

html[data-style="vivid"] .ob-slide-title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -.02em !important;
}

html[data-style="vivid"] .ob-slide-title span {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

html[data-style="vivid"] .ob-slide-desc {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--muted) !important;
}

html[data-style="vivid"] .ob-slide-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

html[data-style="vivid"] .ob-btn-primary {
  background: linear-gradient(135deg, var(--accent), #7b8ff8) !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(91,110,245,.35) !important;
}

html[data-style="vivid"] .ob-btn-skip {
  color: var(--muted) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ── FP LOCK SCREEN ── */
html[data-style="vivid"] #fp-lock-screen {
  background: linear-gradient(145deg, #eef0ff, #f4f6fb) !important;
}

/* ── SIM CARDS ── */
html[data-style="vivid"] .sim-param-card {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 20px !important;
}

html[data-style="vivid"] .sim-param-toggle {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
}

html[data-style="vivid"] .sim-param-toggle:hover {
  background: rgba(91,110,245,.04) !important;
}

html[data-style="vivid"] #sim-param-arrow {
  color: var(--accent) !important;
}

html[data-style="vivid"] .sim-sum-card {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 16px !important;
}

html[data-style="vivid"] .sim-sum-card.accent {
  border-color: rgba(91,110,245,.3) !important;
  background: rgba(91,110,245,.04) !important;
}

html[data-style="vivid"] .sim-sum-card.green {
  border-color: rgba(0,200,150,.3) !important;
  background: rgba(0,200,150,.04) !important;
}

html[data-style="vivid"] .sim-sum-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}

html[data-style="vivid"] .sim-sum-val {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
}

/* ── THEME PAGE BUTTON STYLES ── */
.vivid-style-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-radius: 20px;
  border: 2px solid rgba(124,58,237,.22);
  background: linear-gradient(135deg, #f5f0ff, #fff0f7);
  cursor: pointer;
  text-align: left;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  font-family: inherit;
  box-shadow: 4px 4px 0px rgba(124,58,237,.12), inset 0 1px 0 rgba(255,255,255,.9);
}

.vivid-style-toggle-btn:hover {
  border-color: #7c3aed;
  box-shadow: 6px 6px 0px rgba(124,58,237,.2), inset 0 1px 0 rgba(255,255,255,.95);
  transform: translate(-1px,-1px);
}

.vivid-style-toggle-btn.active {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #ede5ff, #ffe5f5);
  box-shadow: 6px 6px 0px rgba(124,58,237,.22);
}

.vivid-btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #f43f8e);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.3rem;
  box-shadow: 0 4px 0 rgba(80,20,160,.4), 0 2px 12px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.25);
}

.vivid-btn-text {
  flex: 1;
}

.vivid-btn-title {
  font-family: 'Plus Jakarta Sans', 'Syne', sans-serif;
  font-size: .93rem;
  font-weight: 800;
  color: #1e1030;
  margin-bottom: .15rem;
  letter-spacing: -.01em;
}

.vivid-btn-sub {
  font-size: .72rem;
  color: #7c6fa0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.vivid-btn-badge {
  background: linear-gradient(135deg, #7c3aed, #f43f8e);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .18rem .55rem;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 0 rgba(80,20,160,.3);
}

html[data-style="vivid"] .vivid-style-toggle-btn {
  border-color: #7c3aed !important;
}

/* ── Zen btn looks good on Vivid too ── */
html[data-style="vivid"] .zen-style-toggle-btn {
  border-color: rgba(139,94,60,.25) !important;
  background: linear-gradient(135deg, #fdf8f0, #fff5ec) !important;
}

html[data-style="vivid"] .zen-btn-title {
  color: #2c2416 !important;
}



/* ══════════════════════════════════════════════════════
   LIQUID GLASS THEME — v1.0
   Inspired by: Apple iOS 26 / WWDC 2025 Liquid Glass
   The most viral UI trend of 2025.
   Translucent frosted surfaces, ambient light refraction,
   soft depth layers, subtle specular highlights.
   Clean white/light base, glass panels float over content.
   Diaktifkan via: html[data-style="glass"]
══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');
/* Fallback since SF Pro isn't on Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&family=Fira+Code:wght@400;500&display=swap');

/* ── LIQUID GLASS CSS VARIABLES ── */
html[data-style="glass"] {
  --bg: #e8eef8;
  --surface: rgba(255,255,255,0.55);
  --surface2: rgba(255,255,255,0.35);
  --border: rgba(255,255,255,0.6);
  --accent: #007aff;
  --accent2: #af52de;
  --accent3: #34c759;
  --accent4: #ff9f0a;
  --danger: #ff3b30;
  --text: #1c1c1e;
  --muted: #8e8e93;
  --glow: 0 4px 24px rgba(0,122,255,.12);
  --glow2: 0 8px 40px rgba(0,122,255,.22);
  --nav-bg: rgba(242,242,247,0.75);
  --card-shadow: 0 8px 32px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.8) inset;
  /* Glass-specific */
  --glass-bg: rgba(255,255,255,0.45);
  --glass-border: rgba(255,255,255,0.7);
  --glass-blur: blur(32px) saturate(2.2) brightness(1.08);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(0,0,0,.04) inset;
  --glass-shadow-heavy: 0 16px 48px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.95) inset;
}

/* ── BODY & BG ── */
html[data-style="glass"] body {
  font-family: 'Nunito', -apple-system, 'Helvetica Neue', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Layered ambient gradient background — the "wallpaper" behind the glass */
html[data-style="glass"] .grid-bg {
  background-image: none !important;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,122,255,.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 85% 15%, rgba(175,82,222,.14) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 90%, rgba(52,199,89,.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 90% 70%, rgba(255,159,10,.1) 0%, transparent 50%) !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* ── NAV ── */
html[data-style="glass"] nav {
  background: rgba(232,238,248,0.7) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid rgba(255,255,255,.65) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06) !important;
}

html[data-style="glass"] .nav-logo,
html[data-style="glass"] .zw-z {
  color: var(--accent) !important;
  text-shadow: none !important;
  font-family: 'Nunito', sans-serif !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

html[data-style="glass"] .zw-z::after {
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  height: 2.5px !important;
  border-radius: 2px !important;
}

html[data-style="glass"] .zw-hyphen { color: rgba(0,122,255,.25) !important; }

html[data-style="glass"] .zw-wealth {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}

html[data-style="glass"] .nav-tab {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--muted) !important;
}

html[data-style="glass"] .nav-tab:hover { color: var(--text) !important; }
html[data-style="glass"] .nav-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

html[data-style="glass"] .btc-badge,
html[data-style="glass"] .acct-badge {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--glass-shadow) !important;
  font-family: 'Fira Code', monospace !important;
  color: var(--text) !important;
}

html[data-style="glass"] .live-dot {
  background: var(--accent3) !important;
  box-shadow: 0 0 6px rgba(52,199,89,.6) !important;
}

html[data-style="glass"] .acct-dot { background: var(--accent3) !important; }

/* ── PAGE HEADERS ── */
html[data-style="glass"] .ph h1 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--text) 0%, #3a3a5c 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -.025em !important;
}

html[data-style="glass"] .ph p {
  font-family: 'Nunito', sans-serif !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}

html[data-style="glass"] .sec-title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  font-size: .72rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--muted) !important;
}

html[data-style="glass"] .sec-title::before {
  background: var(--accent) !important;
  border-radius: 2px !important;
}

/* ── GLASS MIXIN — the core card style ── */
html[data-style="glass"] .stat-card,
html[data-style="glass"] .card,
html[data-style="glass"] .chart-wrap,
html[data-style="glass"] .btc-chart-wrap,
html[data-style="glass"] .tbl-wrap,
html[data-style="glass"] .port-card,
html[data-style="glass"] .sim-card,
html[data-style="glass"] .sim-param-card,
html[data-style="glass"] .sim-sum-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
}

html[data-style="glass"] .stat-card:hover {
  border-color: rgba(0,122,255,.4) !important;
  box-shadow: var(--glass-shadow-heavy), 0 0 0 1px rgba(0,122,255,.2) !important;
  transform: translateY(-3px) scale(1.01) !important;
  transition: all .3s cubic-bezier(.34,1.56,.64,1) !important;
}

html[data-style="glass"] .port-card:hover {
  border-color: rgba(0,122,255,.4) !important;
  box-shadow: var(--glass-shadow-heavy) !important;
  transform: translateY(-3px) !important;
}

/* ── STAT TEXT ── */
html[data-style="glass"] .slabel {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: .64rem !important;
  letter-spacing: .1em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
}

html[data-style="glass"] .sval {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  letter-spacing: -.03em !important;
}

html[data-style="glass"] .ssub {
  font-family: 'Fira Code', monospace !important;
  color: var(--muted) !important;
}

html[data-style="glass"] .pos { color: #1c9c4e !important; }
html[data-style="glass"] .neg { color: var(--danger) !important; }
html[data-style="glass"] .acc { color: var(--accent) !important; }
html[data-style="glass"] .gld { color: var(--accent4) !important; }

/* ── BUTTONS ── */
html[data-style="glass"] .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(0,122,255,.35) !important;
  border: none !important;
  letter-spacing: -.01em !important;
}

html[data-style="glass"] .btn-primary:hover {
  background: #0060d0 !important;
  box-shadow: 0 8px 24px rgba(0,122,255,.5) !important;
  transform: translateY(-1px) !important;
}

html[data-style="glass"] .btn-ghost {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: var(--glass-shadow) !important;
}

html[data-style="glass"] .btn-ghost:hover {
  border-color: rgba(0,122,255,.4) !important;
  color: var(--accent) !important;
}

html[data-style="glass"] .btn-del {
  border: 1px solid rgba(255,59,48,.3) !important;
  color: var(--danger) !important;
  border-radius: 10px !important;
  background: rgba(255,59,48,.05) !important;
}

html[data-style="glass"] .btn-del:hover {
  background: var(--danger) !important;
  color: white !important;
}

/* ── MODAL ── */
html[data-style="glass"] .overlay {
  background: rgba(0,0,0,.3) !important;
  backdrop-filter: blur(12px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
}

html[data-style="glass"] .modal {
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(48px) saturate(2.5) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(48px) saturate(2.5) brightness(1.05) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  border-radius: 28px !important;
  box-shadow: var(--glass-shadow-heavy) !important;
}

html[data-style="glass"] .modal-title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  letter-spacing: -.02em !important;
}

/* ── FORM INPUTS ── */
html[data-style="glass"] .fi,
html[data-style="glass"] .fs,
html[data-style="glass"] .sinput {
  background: rgba(255,255,255,.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.9) inset !important;
}

html[data-style="glass"] .fi:focus,
html[data-style="glass"] .fs:focus,
html[data-style="glass"] .sinput:focus {
  border-color: rgba(0,122,255,.5) !important;
  box-shadow: 0 0 0 4px rgba(0,122,255,.1), 0 1px 4px rgba(0,0,0,.06) !important;
  background: rgba(255,255,255,.8) !important;
}

/* ── TABLE ── */
html[data-style="glass"] th {
  background: rgba(255,255,255,.35) !important;
  color: var(--muted) !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  border-color: rgba(255,255,255,.5) !important;
  backdrop-filter: blur(8px) !important;
}

html[data-style="glass"] td {
  color: var(--text) !important;
  border-color: rgba(255,255,255,.4) !important;
  font-family: 'Fira Code', monospace !important;
  font-size: .78rem !important;
}

html[data-style="glass"] tr:hover td {
  background: rgba(0,122,255,.04) !important;
}

/* ── BADGES ── */
html[data-style="glass"] .badge.bg {
  background: rgba(52,199,89,.15) !important;
  color: #1c9c4e !important;
  border-color: rgba(52,199,89,.3) !important;
}

html[data-style="glass"] .badge.br {
  background: rgba(255,59,48,.1) !important;
  color: var(--danger) !important;
  border-color: rgba(255,59,48,.25) !important;
}

html[data-style="glass"] .badge.bb {
  background: rgba(0,122,255,.1) !important;
  color: var(--accent) !important;
  border-color: rgba(0,122,255,.25) !important;
}

/* ── LOGIN ── */
html[data-style="glass"] #login-screen {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,122,255,.2) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 85% 20%, rgba(175,82,222,.16) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 95%, rgba(52,199,89,.14) 0%, transparent 55%),
    #dde5f5 !important;
}

html[data-style="glass"] .login-box {
  background: rgba(255,255,255,.6) !important;
  backdrop-filter: blur(48px) saturate(2.2) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(48px) saturate(2.2) brightness(1.06) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  border-radius: 32px !important;
  box-shadow: var(--glass-shadow-heavy) !important;
}

html[data-style="glass"] .login-logo .zw-z {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  text-shadow: none !important;
  font-style: normal !important;
}

html[data-style="glass"] .login-logo .zw-wealth {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

html[data-style="glass"] .ltabs {
  background: rgba(0,0,0,.06) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(8px) !important;
}

html[data-style="glass"] .ltab {
  border-radius: 10px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}

html[data-style="glass"] .ltab.active {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0,122,255,.35) !important;
}

html[data-style="glass"] .lbtn {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 16px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 20px rgba(0,122,255,.4) !important;
  letter-spacing: -.01em !important;
}

html[data-style="glass"] .lbtn:hover:not(:disabled) {
  background: #0060d0 !important;
  box-shadow: 0 8px 28px rgba(0,122,255,.5) !important;
  transform: translateY(-2px) !important;
}

html[data-style="glass"] .lbtn-ghost {
  background: rgba(255,255,255,.5) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}

html[data-style="glass"] .lbtn-ghost:hover {
  border-color: rgba(0,122,255,.4) !important;
  color: var(--accent) !important;
}

html[data-style="glass"] .sw {
  background: rgba(255,255,255,.5) !important;
  border: 1.5px solid rgba(0,122,255,.35) !important;
  color: var(--accent) !important;
  border-radius: 12px !important;
  font-family: 'Fira Code', monospace !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}

html[data-style="glass"] .seed-warn {
  background: rgba(255,159,10,.08) !important;
  border-color: rgba(255,159,10,.3) !important;
  color: #c97800 !important;
  border-radius: 14px !important;
  backdrop-filter: blur(4px) !important;
}

/* ── BOTTOM NAV ── */
html[data-style="glass"] .bnav-item {
  color: rgba(28,28,30,.3) !important;
  font-family: 'Nunito', sans-serif !important;
}

html[data-style="glass"] .bnav-item.active { color: var(--accent) !important; }

html[data-style="glass"] .bnav-item.active::before {
  background: rgba(0,122,255,.08) !important;
  border-color: rgba(0,122,255,.18) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(8px) !important;
}

html[data-style="glass"] .bnav-item.active .bnav-icon {
  filter: drop-shadow(0 2px 8px rgba(0,122,255,.45)) !important;
}

html[data-style="glass"] .bnav-label {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: .48rem !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

html[data-style="glass"] #bnav-indicator {
  background: linear-gradient(90deg, rgba(0,122,255,.3), var(--accent), rgba(175,82,222,.4)) !important;
  box-shadow: 0 0 8px rgba(0,122,255,.5) !important;
  animation: none !important;
}

/* ── NAV TOPSTRIP ── */
html[data-style="glass"] .nav-topstrip {
  background: rgba(232,238,248,.75) !important;
  backdrop-filter: blur(24px) !important;
  border-color: rgba(255,255,255,.6) !important;
}

/* ── BTC CHART ── */
html[data-style="glass"] .btc-price-big {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  color: var(--accent4) !important;
  letter-spacing: -.03em !important;
}

html[data-style="glass"] .btc-price-idr {
  font-family: 'Fira Code', monospace !important;
  color: var(--muted) !important;
}

html[data-style="glass"] .btc-change-badge.up {
  background: rgba(52,199,89,.12) !important;
  color: #1c9c4e !important;
  border-color: rgba(52,199,89,.3) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(4px) !important;
}

html[data-style="glass"] .btc-change-badge.dn {
  background: rgba(255,59,48,.1) !important;
  color: var(--danger) !important;
  border-color: rgba(255,59,48,.25) !important;
  border-radius: 10px !important;
}

html[data-style="glass"] .tf-btn {
  font-family: 'Fira Code', monospace !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  color: var(--muted) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.45) !important;
  backdrop-filter: blur(8px) !important;
}

html[data-style="glass"] .tf-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0,122,255,.35) !important;
}

html[data-style="glass"] .tf-btn:hover {
  border-color: rgba(0,122,255,.4) !important;
  color: var(--accent) !important;
  background: rgba(0,122,255,.06) !important;
}

/* ── PORTFOLIO ── */
html[data-style="glass"] .asset-icon {
  background: rgba(255,255,255,.5) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(8px) !important;
}

html[data-style="glass"] .asset-name {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}

html[data-style="glass"] .asset-ticker {
  font-family: 'Fira Code', monospace !important;
  color: var(--muted) !important;
}

html[data-style="glass"] .asset-price {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
}

/* ── RANGE SLIDER ── */
html[data-style="glass"] input[type=range] {
  background: rgba(0,0,0,.1) !important;
}

html[data-style="glass"] input[type=range]::-webkit-slider-thumb {
  background: var(--accent) !important;
  box-shadow: 0 2px 10px rgba(0,122,255,.45) !important;
  width: 20px !important;
  height: 20px !important;
}

/* ── TOAST ── */
html[data-style="glass"] #toast-wrapper .toast > div {
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(32px) saturate(2) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: var(--glass-shadow-heavy) !important;
  border-radius: 18px !important;
}

/* ── LOGOUT / EXPORT ── */
html[data-style="glass"] .logout-btn {
  border: 1px solid rgba(255,255,255,.6) !important;
  color: var(--muted) !important;
  font-family: 'Nunito', sans-serif !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.4) !important;
  backdrop-filter: blur(8px) !important;
}

html[data-style="glass"] .logout-btn:hover {
  border-color: rgba(255,59,48,.4) !important;
  color: var(--danger) !important;
}

html[data-style="glass"] .export-pdf-btn {
  border: 1px solid rgba(0,122,255,.3) !important;
  color: var(--accent) !important;
  font-family: 'Nunito', sans-serif !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.4) !important;
  backdrop-filter: blur(8px) !important;
}

html[data-style="glass"] .export-pdf-btn:hover {
  background: rgba(0,122,255,.08) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 16px rgba(0,122,255,.15) !important;
}

/* ── SYNC BAR ── */
html[data-style="glass"] .sync-bar {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: 14px !important;
  box-shadow: var(--glass-shadow) !important;
  font-family: 'Fira Code', monospace !important;
}

/* ── ACCOUNT MODAL ── */
html[data-style="glass"] .modal-acct-glass {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(52px) saturate(2.5) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(52px) saturate(2.5) brightness(1.06) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: var(--glass-shadow-heavy) !important;
}

html[data-style="glass"] .acct-title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
}

html[data-style="glass"] .acct-title-icon {
  background: rgba(0,122,255,.1) !important;
  border-color: rgba(0,122,255,.2) !important;
  border-radius: 12px !important;
  color: var(--accent) !important;
}

html[data-style="glass"] .acct-x {
  background: rgba(0,0,0,.05) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(8px) !important;
}

html[data-style="glass"] .acct-seed-box {
  background: rgba(0,122,255,.04) !important;
  border: 1px solid rgba(0,122,255,.15) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(8px) !important;
}

html[data-style="glass"] .acct-stats {
  background: rgba(255,255,255,.35) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px) !important;
}

html[data-style="glass"] .acct-stat-sep { background: rgba(0,0,0,.08) !important; }

html[data-style="glass"] .acct-stat-v {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
}

/* ── FITUR MODAL ── */
html[data-style="glass"] #fitur-modal-sheet {
  background: rgba(232,238,248,.8) !important;
  backdrop-filter: blur(48px) saturate(2.2) !important;
  -webkit-backdrop-filter: blur(48px) saturate(2.2) !important;
  border-top: 1px solid rgba(255,255,255,.75) !important;
  border-radius: 28px 28px 0 0 !important;
  box-shadow: 0 -4px 32px rgba(0,0,0,.08) !important;
}

html[data-style="glass"] .fitur-modal-title span {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  color: var(--text) !important;
}

html[data-style="glass"] .fitur-modal-section-label {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
  font-size: .66rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* ── ONBOARDING ── */
html[data-style="glass"] #ob-screen {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,122,255,.2) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 85% 20%, rgba(175,82,222,.16) 0%, transparent 50%),
    #dde5f5 !important;
}

html[data-style="glass"] .ob-splash-title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  text-shadow: none !important;
  font-style: normal !important;
}

html[data-style="glass"] .ob-splash-sub {
  color: var(--muted) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 500 !important;
}

html[data-style="glass"] .ob-splash-bar {
  background: rgba(0,0,0,.1) !important;
  border-radius: 4px !important;
}

html[data-style="glass"] .ob-splash-bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
}

html[data-style="glass"] .ob-slide-title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  letter-spacing: -.02em !important;
}

html[data-style="glass"] .ob-slide-title span {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

html[data-style="glass"] .ob-slide-desc {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
}

html[data-style="glass"] .ob-slide-label {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

html[data-style="glass"] .ob-btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0,122,255,.4) !important;
}

html[data-style="glass"] .ob-btn-skip {
  color: var(--muted) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600 !important;
}

/* ── FP LOCK SCREEN ── */
html[data-style="glass"] #fp-lock-screen {
  background:
    radial-gradient(ellipse 80% 60% at 30% 10%, rgba(0,122,255,.2) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 80% 30%, rgba(175,82,222,.16) 0%, transparent 50%),
    #dde5f5 !important;
}

/* ── SIM CARDS ── */
html[data-style="glass"] .sim-param-toggle {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}

html[data-style="glass"] .sim-param-toggle:hover {
  background: rgba(0,122,255,.04) !important;
}

html[data-style="glass"] .sim-param-body {
  border-color: rgba(255,255,255,.5) !important;
}

html[data-style="glass"] #sim-param-arrow { color: var(--accent) !important; }

html[data-style="glass"] .sim-sum-card.accent {
  border-color: rgba(0,122,255,.3) !important;
  background: rgba(0,122,255,.06) !important;
}

html[data-style="glass"] .sim-sum-card.green {
  border-color: rgba(52,199,89,.3) !important;
  background: rgba(52,199,89,.06) !important;
}

html[data-style="glass"] .sim-sum-label {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}

html[data-style="glass"] .sim-sum-val {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
}

/* ── THEME PAGE BUTTON ── */
.glass-style-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(232,238,248,.6));
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  cursor: pointer;
  text-align: left;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  font-family: inherit;
  box-shadow: 0 4px 20px rgba(0,0,0,.07), 0 1px 0 rgba(255,255,255,.9) inset;
}

.glass-style-toggle-btn:hover {
  border-color: rgba(0,122,255,.35);
  box-shadow: 0 8px 32px rgba(0,122,255,.18), 0 1px 0 rgba(255,255,255,.9) inset;
  transform: translateY(-2px) scale(1.01);
}

.glass-style-toggle-btn.active {
  border-color: rgba(0,122,255,.45);
  background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(220,232,255,.6));
  box-shadow: 0 8px 32px rgba(0,122,255,.2), 0 1px 0 rgba(255,255,255,.95) inset;
}

.glass-btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,122,255,.8), rgba(175,82,222,.7));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.3rem;
  box-shadow: 0 4px 14px rgba(0,122,255,.3), 0 1px 0 rgba(255,255,255,.4) inset;
  backdrop-filter: blur(4px);
}

.glass-btn-text { flex: 1; }

.glass-btn-title {
  font-family: 'Nunito', -apple-system, sans-serif;
  font-size: .93rem;
  font-weight: 800;
  color: #1c1c1e;
  margin-bottom: .15rem;
  letter-spacing: -.01em;
}

.glass-btn-sub {
  font-size: .72rem;
  color: #8e8e93;
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
}

.glass-btn-badge {
  background: linear-gradient(135deg, #007aff, #af52de);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .18rem .55rem;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,122,255,.3);
}

/* When glass theme is active, make all the theme buttons look like glass too */
html[data-style="glass"] .zen-style-toggle-btn,
html[data-style="glass"] .vivid-style-toggle-btn,
html[data-style="glass"] .glass-style-toggle-btn {
  background: rgba(255,255,255,.5) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border-color: rgba(255,255,255,.65) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.07), 0 1px 0 rgba(255,255,255,.9) inset !important;
}

html[data-style="glass"] .glass-style-toggle-btn {
  border-color: rgba(0,122,255,.45) !important;
}

html[data-style="glass"] .zen-btn-title,
html[data-style="glass"] .vivid-btn-title,
html[data-style="glass"] .glass-btn-title {
  color: var(--text) !important;
}

html[data-style="glass"] .zen-btn-sub,
html[data-style="glass"] .vivid-btn-sub,
html[data-style="glass"] .glass-btn-sub {
  color: var(--muted) !important;
}

/* Glass also makes the section containers look frosted */
html[data-style="glass"] #page-theme > div[style*="background:var(--surface)"],
html[data-style="glass"] #page-theme > div[style*="background:var"] {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 20px !important;
}


/* ══════════════════════════════════════════════════════
   DARK / LIGHT MODE VARIANTS — semua tema custom
   Setiap tema punya 2 varian: default (dark) + light.
   Kombinasi: html[data-style="X"][data-theme="light"]
══════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   ZEN PAPER — DARK MODE (default sudah light,
   tapi kalau user pilih dark mode di Zen,
   kita buat versi gelap yang tetap "zen" —
   coklat tinta, kertas malam, hangat pekat)
════════════════════════════════════════════ */
html[data-style="zen"]:not([data-theme="light"]) {
  --bg: #1c1510;
  --surface: #261e17;
  --surface2: #1e1712;
  --border: #3d2f22;
  --accent: #d4956a;
  --accent2: #7a9e8e;
  --accent3: #7a9e8e;
  --accent4: #d4a832;
  --danger: #c06060;
  --text: #ede0d0;
  --muted: #8a7060;
  --glow: 0 2px 12px rgba(212,149,106,.1);
  --glow2: 0 4px 24px rgba(212,149,106,.18);
  --nav-bg: rgba(28,21,16,.97);
  --card-shadow: 0 2px 16px rgba(0,0,0,.35);
}

html[data-style="zen"]:not([data-theme="light"]) body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html[data-style="zen"]:not([data-theme="light"]) .grid-bg {
  background-image: none !important;
  opacity: 0 !important;
}

/* Dark Zen: Paper texture overlay — darker */
html[data-style="zen"]:not([data-theme="light"]) body::before {
  opacity: 0.25 !important;
}

/* Dark Zen: Nav */
html[data-style="zen"]:not([data-theme="light"]) nav {
  background: var(--nav-bg) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 1px 0 rgba(212,149,106,.05) !important;
}

html[data-style="zen"]:not([data-theme="light"]) .nav-logo,
html[data-style="zen"]:not([data-theme="light"]) .zw-z {
  color: var(--accent) !important;
  text-shadow: none !important;
}

html[data-style="zen"]:not([data-theme="light"]) .zw-z::after {
  background: linear-gradient(90deg, var(--accent), rgba(212,149,106,.1)) !important;
}

/* Dark Zen: Login */
html[data-style="zen"]:not([data-theme="light"]) #login-screen {
  background: var(--bg) !important;
}

html[data-style="zen"]:not([data-theme="light"]) .login-box {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.4) !important;
}

/* Dark Zen: Bottom Nav */
html[data-style="zen"]:not([data-theme="light"]) .bottom-nav {
  background: rgba(28,21,16,.85) !important;
  box-shadow:
    0 -1px 0 rgba(212,149,106,.15),
    0 8px 32px rgba(0,0,0,.35),
    0 0 0 1px rgba(212,149,106,.06) inset !important;
}

html[data-style="zen"]:not([data-theme="light"]) .bnav-item {
  color: rgba(237,224,208,.3) !important;
}

/* Dark Zen: Onboarding */
html[data-style="zen"]:not([data-theme="light"]) #ob-screen {
  background: var(--bg) !important;
}

/* ── ZEN PAPER — LIGHT MODE (sudah default, tapi pastikan bersih) ── */
html[data-style="zen"][data-theme="light"] {
  --bg: #f7f3ed;
  --surface: #faf8f4;
  --surface2: #f0ebe2;
  --border: #d9cfc2;
  --accent: #8b5e3c;
  --accent2: #5c7a6b;
  --accent3: #5c7a6b;
  --accent4: #b8862b;
  --danger: #b04040;
  --text: #2c2416;
  --muted: #8a7a6a;
  --glow: 0 2px 12px rgba(139,94,60,.08);
  --glow2: 0 4px 24px rgba(139,94,60,.16);
  --nav-bg: rgba(247,243,237,.97);
  --card-shadow: 0 2px 16px rgba(44,36,22,.07);
}


/* ════════════════════════════════════════════
   TACTILE MAXIMALISM — DARK MODE
   Cartoon Clay style: bold outlines, hyper-saturated,
   playful squishy shapes, mainan plastik aesthetic
════════════════════════════════════════════ */
html[data-style="vivid"]:not([data-theme="light"]) {
  --bg: #0d1b2a;
  --surface: #1a2e45;
  --surface2: #1e3a55;
  --border: #ff6b35;
  --accent: #ff3f81;
  --accent2: #ffde03;
  --accent3: #00e676;
  --accent4: #ff6b35;
  --danger: #ff1744;
  --text: #ffffff;
  --muted: #b0c8e0;
  --glow: 0 0 0 3px #ff3f81;
  --glow2: 0 0 0 4px #ff3f81, 0 8px 24px rgba(255,63,129,.5);
  --nav-bg: #0a1520;
  --card-shadow: 0 6px 0 #000, 3px 9px 0 rgba(0,0,0,.5);
  /* Cartoon outline vars */
  --outline: 3px solid #000;
  --outline-thick: 4px solid #000;
  --clay-r: 20px;
}

/* ── CARTOON BODY: starry night dark blue ── */
html[data-style="vivid"]:not([data-theme="light"]) body {
  background: #0d1b2a !important;
  color: var(--text) !important;
}

/* ── Starfield background dots (like the reference image) ── */
html[data-style="vivid"]:not([data-theme="light"]) .grid-bg {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.3) 1px, transparent 1px) !important;
  background-size: 80px 80px, 40px 40px !important;
  background-position: 0 0, 20px 20px !important;
  opacity: .25 !important;
}

/* ── CARTOON NAV ── */
html[data-style="vivid"]:not([data-theme="light"]) nav {
  background: #0a1520 !important;
  border-bottom: 3px solid #ff6b35 !important;
  box-shadow: 0 4px 0 #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .nav-logo,
html[data-style="vivid"]:not([data-theme="light"]) .zw-z {
  color: #ffde03 !important;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .zw-z::after {
  background: linear-gradient(90deg, #ff3f81, #ffde03) !important;
  height: 3px !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .zw-wealth {
  color: #ffffff !important;
  text-shadow: 2px 2px 0 #000 !important;
}

/* ── CARTOON BADGES ── */
html[data-style="vivid"]:not([data-theme="light"]) .btc-badge {
  background: #ff6b35 !important;
  border: 3px solid #000 !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: 3px 3px 0 #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .acct-badge {
  background: #00c2ff !important;
  border: 3px solid #000 !important;
  color: #000 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: 3px 3px 0 #000 !important;
}

/* ── CARTOON CLAY CARDS — bold outline + vibrant fill ── */
html[data-style="vivid"]:not([data-theme="light"]) .stat-card {
  background: #1e7fd4 !important;
  border: 3px solid #000 !important;
  border-radius: 20px !important;
  box-shadow: 4px 6px 0 #000, inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.3) !important;
  color: #fff !important;
}

/* Alternate card colors for visual variety */
html[data-style="vivid"]:not([data-theme="light"]) .stat-card:nth-child(2n) {
  background: #e8380d !important;
}
html[data-style="vivid"]:not([data-theme="light"]) .stat-card:nth-child(3n) {
  background: #f5a623 !important;
}
html[data-style="vivid"]:not([data-theme="light"]) .stat-card:nth-child(4n) {
  background: #00a878 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .card,
html[data-style="vivid"]:not([data-theme="light"]) .chart-wrap,
html[data-style="vivid"]:not([data-theme="light"]) .btc-chart-wrap {
  background: #1a2e45 !important;
  border: 3px solid #000 !important;
  border-radius: 20px !important;
  box-shadow: 4px 6px 0 #000, inset 0 2px 0 rgba(255,255,255,.1) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .tbl-wrap {
  background: #1a2e45 !important;
  border: 3px solid #000 !important;
  border-radius: 20px !important;
  box-shadow: 4px 6px 0 #000 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .port-card {
  background: #2a1f5e !important;
  border: 3px solid #000 !important;
  border-radius: 20px !important;
  box-shadow: 4px 6px 0 #000, inset 0 2px 0 rgba(255,255,255,.1) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .sim-card {
  background: #1a2e45 !important;
  border: 3px solid #000 !important;
  border-radius: 20px !important;
  box-shadow: 4px 6px 0 #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .stat-card:hover,
html[data-style="vivid"]:not([data-theme="light"]) .port-card:hover {
  box-shadow: 6px 8px 0 #000, inset 0 2px 0 rgba(255,255,255,.25) !important;
  transform: translate(-2px,-2px) scale(1.01) !important;
}

/* ── CARTOON TABLE ── */
html[data-style="vivid"]:not([data-theme="light"]) th {
  background: #ff6b35 !important;
  border: 2px solid #000 !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) td {
  border: 1px solid rgba(0,0,0,.3) !important;
  color: #fff !important;
}

html[data-style="vivid"]:not([data-theme="light"]) tr:nth-child(even) td {
  background: rgba(255,255,255,.04) !important;
}

/* ── CARTOON MODAL ── */
html[data-style="vivid"]:not([data-theme="light"]) .modal {
  background: #1a2e45 !important;
  border: 4px solid #000 !important;
  border-radius: 28px !important;
  box-shadow: 8px 10px 0 #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .overlay {
  background: rgba(0,0,0,.75) !important;
}

/* ── CARTOON INPUTS ── */
html[data-style="vivid"]:not([data-theme="light"]) .fi,
html[data-style="vivid"]:not([data-theme="light"]) .fs,
html[data-style="vivid"]:not([data-theme="light"]) .sinput {
  background: #fff !important;
  border: 3px solid #000 !important;
  border-radius: 14px !important;
  color: #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  font-weight: 700 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .fi:focus,
html[data-style="vivid"]:not([data-theme="light"]) .sinput:focus {
  border-color: #ff3f81 !important;
  box-shadow: 3px 3px 0 #ff3f81, 0 0 0 3px rgba(255,63,129,.3) !important;
}

/* ── CARTOON LOGIN ── */
html[data-style="vivid"]:not([data-theme="light"]) #login-screen {
  background: #0d1b2a !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .login-box {
  background: #1a2e45 !important;
  border: 4px solid #000 !important;
  border-radius: 28px !important;
  box-shadow: 8px 10px 0 #000, inset 0 2px 0 rgba(255,255,255,.1) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .ltabs {
  background: #0d1b2a !important;
  border: 2px solid #000 !important;
  border-radius: 12px !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .ltab.active {
  background: #ff3f81 !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 9px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.3) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .sw {
  background: #ff6b35 !important;
  border: 3px solid #000 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 3px 3px 0 #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .seed-warn {
  background: rgba(255,222,3,.15) !important;
  border: 2px solid #ffde03 !important;
  border-radius: 14px !important;
}

/* ── CARTOON BOTTOM NAV ── */
html[data-style="vivid"]:not([data-theme="light"]) .bottom-nav {
  background: #0a1520 !important;
  border-top: 4px solid #000 !important;
  box-shadow: 0 -3px 0 #ff6b35, 0 -7px 0 #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .bnav-item {
  color: rgba(255,255,255,.35) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .bnav-item.active {
  color: #ffde03 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .bnav-item.active::before {
  background: #ff3f81 !important;
  border: 2px solid #000 !important;
  border-radius: 14px !important;
  box-shadow: 2px 3px 0 #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .bnav-item.active .bnav-icon {
  filter: drop-shadow(2px 3px 0 #000) drop-shadow(0 0 8px rgba(255,222,3,.8)) !important;
}

/* ── CARTOON ONBOARDING ── */
html[data-style="vivid"]:not([data-theme="light"]) #ob-screen {
  background: #0d1b2a !important;
}

/* ── CARTOON ACCOUNT MODAL ── */
html[data-style="vivid"]:not([data-theme="light"]) .modal-acct-glass {
  background: #1a2e45 !important;
  border: 4px solid #000 !important;
  box-shadow: 8px 10px 0 #000 !important;
  border-radius: 28px !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .acct-seed-box {
  background: rgba(255,222,3,.1) !important;
  border: 2px solid #ffde03 !important;
  border-radius: 14px !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .acct-stats {
  background: rgba(30,127,212,.2) !important;
  border: 2px solid #1e7fd4 !important;
  border-radius: 14px !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .acct-stat-sep {
  background: #000 !important;
  width: 2px !important;
}

/* ── CARTOON FITUR MODAL ── */
html[data-style="vivid"]:not([data-theme="light"]) #fitur-modal-sheet {
  background: #1a2e45 !important;
  border-top: 4px solid #000 !important;
  box-shadow: 0 -6px 0 #ff6b35, 0 -10px 0 #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .fitur-modal-handle {
  background: #ff6b35 !important;
  border: 2px solid #000 !important;
  border-radius: 10px !important;
}

/* ── CARTOON SIM CARDS ── */
html[data-style="vivid"]:not([data-theme="light"]) .sim-param-card,
html[data-style="vivid"]:not([data-theme="light"]) .sim-sum-card {
  background: #1a2e45 !important;
  border: 3px solid #000 !important;
  border-radius: 18px !important;
  box-shadow: 4px 5px 0 #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .sim-sum-card.accent {
  background: #e8380d !important;
  border-color: #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .sim-sum-card.green {
  background: #00a878 !important;
  border-color: #000 !important;
}

/* ── CARTOON BUTTONS — MAIN CTA ── */
html[data-style="vivid"]:not([data-theme="light"]) .btn-primary,
html[data-style="vivid"]:not([data-theme="light"]) .lbtn {
  background: #ff3f81 !important;
  border: 3px solid #000 !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 0 #000, 0 7px 0 rgba(0,0,0,.5) !important;
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
  text-shadow: 1px 2px 0 rgba(0,0,0,.4) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .btn-primary:hover:not(:active),
html[data-style="vivid"]:not([data-theme="light"]) .lbtn:hover:not(:active):not(:disabled) {
  background: #ff5a98 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 #000, 0 9px 0 rgba(0,0,0,.5) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .btn-primary:active,
html[data-style="vivid"]:not([data-theme="light"]) .lbtn:active {
  box-shadow: 0 2px 0 #000 !important;
  transform: translateY(3px) !important;
}

/* ── CARTOON GHOST BUTTONS ── */
html[data-style="vivid"]:not([data-theme="light"]) .btn-ghost,
html[data-style="vivid"]:not([data-theme="light"]) .lbtn-ghost {
  background: #ffde03 !important;
  border: 3px solid #000 !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 0 #000 !important;
  color: #000 !important;
  font-weight: 900 !important;
}

/* ── CARTOON DANGER BUTTON ── */
html[data-style="vivid"]:not([data-theme="light"]) .btn-del {
  background: #ff1744 !important;
  border: 3px solid #000 !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 0 #000 !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* ── CARTOON TF BUTTONS (timeframe) ── */
html[data-style="vivid"]:not([data-theme="light"]) .tf-btn {
  background: #1a2e45 !important;
  border: 2px solid #000 !important;
  border-radius: 12px !important;
  box-shadow: 2px 3px 0 #000 !important;
  color: #b0c8e0 !important;
  font-weight: 700 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .tf-btn.active,
html[data-style="vivid"]:not([data-theme="light"]) .tf-btn:hover {
  background: #ff6b35 !important;
  border-color: #000 !important;
  color: #fff !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4) !important;
  box-shadow: 3px 4px 0 #000 !important;
}

/* ── CARTOON NAV TABS ── */
html[data-style="vivid"]:not([data-theme="light"]) .nav-tab {
  color: rgba(255,255,255,.4) !important;
  font-weight: 700 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .nav-tab.active {
  color: #ffde03 !important;
  border-bottom: 3px solid #ffde03 !important;
  text-shadow: 0 0 12px rgba(255,222,3,.6) !important;
}

/* ── CARTOON SECTION TITLES ── */
html[data-style="vivid"]:not([data-theme="light"]) .sec-title,
html[data-style="vivid"]:not([data-theme="light"]) .ph h1 {
  -webkit-text-fill-color: unset !important;
  background: none !important;
  color: #ffde03 !important;
  text-shadow: 2px 3px 0 #000, -1px -1px 0 #000 !important;
  font-weight: 900 !important;
}

/* ── CARTOON STAT VALUES ── */
html[data-style="vivid"]:not([data-theme="light"]) .sval {
  color: #fff !important;
  font-weight: 900 !important;
  text-shadow: 1px 2px 0 rgba(0,0,0,.5) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .slabel {
  color: rgba(255,255,255,.7) !important;
  font-weight: 700 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .pos {
  color: #00e676 !important;
  text-shadow: 0 0 8px rgba(0,230,118,.5) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .neg {
  color: #ff1744 !important;
  text-shadow: 0 0 8px rgba(255,23,68,.5) !important;
}

/* ── CARTOON SYNC BAR & MISC ── */
html[data-style="vivid"]:not([data-theme="light"]) .sync-bar {
  background: #1a2e45 !important;
  border: 2px solid #000 !important;
  border-radius: 14px !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .logout-btn {
  background: #ff1744 !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 4px 0 #000 !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .export-pdf-btn {
  background: #1e7fd4 !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 4px 0 #000 !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
}

/* ── FMO BUTTONS (fitur tambahan) — cartoon style ── */
html[data-style="vivid"]:not([data-theme="light"]) .fmo-btn {
  border: 3px solid #000 !important;
  border-radius: 20px !important;
  box-shadow: 4px 6px 0 #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .fmo-label {
  font-weight: 900 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5) !important;
}

/* ── CARTOON SCROLL TOP BTN ── */
html[data-style="vivid"]:not([data-theme="light"]) #zw-scroll-top {
  background: #ff6b35 !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 4px 0 #000 !important;
  color: #fff !important;
}

/* ── LIVE DOT — bouncy colored ── */
html[data-style="vivid"]:not([data-theme="light"]) .live-dot {
  background: #00e676 !important;
  box-shadow: 0 0 0 3px rgba(0,230,118,.3) !important;
  width: 8px !important;
  height: 8px !important;
}

/* ── CARTOON PROGRESS BARS ── */
html[data-style="vivid"]:not([data-theme="light"]) [style*="background:linear-gradient(90deg,var(--accent)"],
html[data-style="vivid"]:not([data-theme="light"]) .progress-bar,
html[data-style="vivid"]:not([data-theme="light"]) [class*="progress"] {
  border-radius: 8px !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.3) !important;
}

/* ── TACTILE MAXIMALISM — LIGHT MODE (CARTOON CLAY) ── */
html[data-style="vivid"][data-theme="light"] {
  --bg: #e8f4fd;
  --surface: #ffffff;
  --surface2: #d4ecfa;
  --border: #000000;
  --accent: #e8380d;
  --accent2: #ffde03;
  --accent3: #00a878;
  --accent4: #f5a623;
  --danger: #ff1744;
  --text: #0d1b2a;
  --muted: #2a4a6b;
  --glow: 0 0 0 3px #e8380d;
  --glow2: 0 0 0 4px #e8380d, 0 8px 24px rgba(232,56,13,.4);
  --nav-bg: #d0e8fa;
  --card-shadow: 4px 6px 0 #000;
}

html[data-style="vivid"][data-theme="light"] body {
  background: #e8f4fd !important;
}

html[data-style="vivid"][data-theme="light"] .grid-bg {
  background-image:
    radial-gradient(circle, rgba(0,0,0,.15) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  opacity: .3 !important;
}

html[data-style="vivid"][data-theme="light"] nav {
  background: #d0e8fa !important;
  border-bottom: 3px solid #000 !important;
  box-shadow: 0 4px 0 #000 !important;
}

html[data-style="vivid"][data-theme="light"] .zw-z,
html[data-style="vivid"][data-theme="light"] .nav-logo {
  color: #e8380d !important;
  text-shadow: 2px 2px 0 #000 !important;
}

html[data-style="vivid"][data-theme="light"] .zw-wealth {
  color: #0d1b2a !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.15) !important;
}

/* Light cartoon stat cards — colorful solid fills */
html[data-style="vivid"][data-theme="light"] .stat-card {
  background: #ffde03 !important;
  border: 3px solid #000 !important;
  border-radius: 20px !important;
  box-shadow: 4px 6px 0 #000 !important;
  color: #000 !important;
}

html[data-style="vivid"][data-theme="light"] .stat-card:nth-child(2n) {
  background: #e8380d !important;
  color: #fff !important;
}

html[data-style="vivid"][data-theme="light"] .stat-card:nth-child(3n) {
  background: #00a878 !important;
  color: #fff !important;
}

html[data-style="vivid"][data-theme="light"] .stat-card:nth-child(4n) {
  background: #1e7fd4 !important;
  color: #fff !important;
}

html[data-style="vivid"][data-theme="light"] .card,
html[data-style="vivid"][data-theme="light"] .chart-wrap,
html[data-style="vivid"][data-theme="light"] .tbl-wrap,
html[data-style="vivid"][data-theme="light"] .btc-chart-wrap {
  background: #fff !important;
  border: 3px solid #000 !important;
  border-radius: 20px !important;
  box-shadow: 4px 6px 0 #000 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
}

html[data-style="vivid"][data-theme="light"] .port-card {
  background: #fff !important;
  border: 3px solid #000 !important;
  border-radius: 20px !important;
  box-shadow: 4px 6px 0 #000 !important;
}

html[data-style="vivid"][data-theme="light"] .stat-card:hover,
html[data-style="vivid"][data-theme="light"] .port-card:hover {
  box-shadow: 6px 8px 0 #000 !important;
  transform: translate(-2px,-2px) !important;
}

/* Light bottom nav */
html[data-style="vivid"][data-theme="light"] .bottom-nav {
  background: #d0e8fa !important;
  border-top: 4px solid #000 !important;
  box-shadow: 0 -3px 0 #e8380d, 0 -7px 0 #000 !important;
}

html[data-style="vivid"][data-theme="light"] .bnav-item {
  color: rgba(13,27,42,.35) !important;
}

html[data-style="vivid"][data-theme="light"] .bnav-item.active {
  color: #e8380d !important;
}

html[data-style="vivid"][data-theme="light"] .bnav-item.active::before {
  background: #ffde03 !important;
  border: 2px solid #000 !important;
  box-shadow: 2px 3px 0 #000 !important;
}

html[data-style="vivid"][data-theme="light"] .btn-primary,
html[data-style="vivid"][data-theme="light"] .lbtn {
  background: #e8380d !important;
  border: 3px solid #000 !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 0 #000 !important;
  color: #fff !important;
  font-weight: 900 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4) !important;
}

html[data-style="vivid"][data-theme="light"] .sec-title,
html[data-style="vivid"][data-theme="light"] .ph h1 {
  -webkit-text-fill-color: unset !important;
  background: none !important;
  color: #e8380d !important;
  text-shadow: 2px 2px 0 rgba(0,0,0,.15) !important;
  font-weight: 900 !important;
}

html[data-style="vivid"][data-theme="light"] .modal {
  background: #fff !important;
  border: 4px solid #000 !important;
  border-radius: 28px !important;
  box-shadow: 8px 10px 0 #000 !important;
}

html[data-style="vivid"][data-theme="light"] th {
  background: #e8380d !important;
  border: 2px solid #000 !important;
  color: #fff !important;
  font-weight: 800 !important;
}

html[data-style="vivid"][data-theme="light"] .tf-btn {
  background: #fff !important;
  border: 2px solid #000 !important;
  border-radius: 12px !important;
  box-shadow: 2px 3px 0 #000 !important;
  color: #0d1b2a !important;
  font-weight: 700 !important;
}

html[data-style="vivid"][data-theme="light"] .tf-btn.active,
html[data-style="vivid"][data-theme="light"] .tf-btn:hover {
  background: #ffde03 !important;
  border-color: #000 !important;
  color: #000 !important;
}

/* ════════════════════════════════════════════
   LIQUID GLASS — DARK MODE
   Glass effect di atas background gelap —
   ambient gradient deep blue/purple/teal,
   surface tetap translucent tapi lebih gelap
════════════════════════════════════════════ */
html[data-style="glass"]:not([data-theme="light"]) {
  --bg: #0d0f1a;
  --surface: rgba(255,255,255,0.06);
  --surface2: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.12);
  --accent: #3b9eff;
  --accent2: #bf7bff;
  --accent3: #30d68c;
  --accent4: #ffb340;
  --danger: #ff5555;
  --text: #e8ecf5;
  --muted: #636b8a;
  --glow: 0 4px 24px rgba(59,158,255,.15);
  --glow2: 0 8px 40px rgba(59,158,255,.28);
  --nav-bg: rgba(13,15,26,0.8);
  --card-shadow: 0 8px 32px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08) inset;
  --glass-bg: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.12);
  --glass-blur: blur(32px) saturate(1.8) brightness(1.1);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.1) inset, 0 -1px 0 rgba(0,0,0,.2) inset;
  --glass-shadow-heavy: 0 16px 48px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.12) inset;
}

html[data-style="glass"]:not([data-theme="light"]) body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Dark Glass: rich deep-space ambient gradient */
html[data-style="glass"]:not([data-theme="light"]) .grid-bg {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59,158,255,.2) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 85% 15%, rgba(191,123,255,.18) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 90%, rgba(48,214,140,.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 90% 70%, rgba(255,179,64,.12) 0%, transparent 50%) !important;
  opacity: 1 !important;
}

/* Dark Glass: Nav */
html[data-style="glass"]:not([data-theme="light"]) nav {
  background: rgba(13,15,26,0.72) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 20px rgba(0,0,0,.3) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .nav-logo,
html[data-style="glass"]:not([data-theme="light"]) .zw-z {
  color: var(--accent) !important;
  text-shadow: 0 0 20px rgba(59,158,255,.4) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .zw-z::after {
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .zw-wealth {
  color: var(--text) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .btc-badge,
html[data-style="glass"]:not([data-theme="light"]) .acct-badge {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Dark Glass: All glass cards */
html[data-style="glass"]:not([data-theme="light"]) .stat-card,
html[data-style="glass"]:not([data-theme="light"]) .card,
html[data-style="glass"]:not([data-theme="light"]) .chart-wrap,
html[data-style="glass"]:not([data-theme="light"]) .btc-chart-wrap,
html[data-style="glass"]:not([data-theme="light"]) .tbl-wrap,
html[data-style="glass"]:not([data-theme="light"]) .port-card,
html[data-style="glass"]:not([data-theme="light"]) .sim-card,
html[data-style="glass"]:not([data-theme="light"]) .sim-param-card,
html[data-style="glass"]:not([data-theme="light"]) .sim-sum-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .stat-card:hover {
  border-color: rgba(59,158,255,.4) !important;
  box-shadow: var(--glass-shadow-heavy), 0 0 0 1px rgba(59,158,255,.2) !important;
}

/* Dark Glass: Text */
html[data-style="glass"]:not([data-theme="light"]) .slabel {
  color: var(--muted) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .sval {
  color: var(--text) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .pos { color: #30d68c !important; }
html[data-style="glass"]:not([data-theme="light"]) .neg { color: var(--danger) !important; }
html[data-style="glass"]:not([data-theme="light"]) .acc { color: var(--accent) !important; }

/* Dark Glass: Table */
html[data-style="glass"]:not([data-theme="light"]) th {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: var(--muted) !important;
}

html[data-style="glass"]:not([data-theme="light"]) td {
  border-color: rgba(255,255,255,.07) !important;
  color: var(--text) !important;
}

html[data-style="glass"]:not([data-theme="light"]) tr:hover td {
  background: rgba(59,158,255,.04) !important;
}

/* Dark Glass: Overlay & Modal */
html[data-style="glass"]:not([data-theme="light"]) .overlay {
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(12px) saturate(1.5) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .modal {
  background: rgba(20,24,44,.75) !important;
  backdrop-filter: blur(48px) saturate(2) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(48px) saturate(2) brightness(1.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: var(--glass-shadow-heavy) !important;
}

/* Dark Glass: Inputs */
html[data-style="glass"]:not([data-theme="light"]) .fi,
html[data-style="glass"]:not([data-theme="light"]) .fs,
html[data-style="glass"]:not([data-theme="light"]) .sinput {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .fi:focus,
html[data-style="glass"]:not([data-theme="light"]) .fs:focus,
html[data-style="glass"]:not([data-theme="light"]) .sinput:focus {
  border-color: rgba(59,158,255,.5) !important;
  background: rgba(255,255,255,.1) !important;
  box-shadow: 0 0 0 4px rgba(59,158,255,.12) !important;
}

/* Dark Glass: Login */
html[data-style="glass"]:not([data-theme="light"]) #login-screen {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59,158,255,.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 85% 20%, rgba(191,123,255,.18) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 95%, rgba(48,214,140,.16) 0%, transparent 55%),
    #070a14 !important;
}

html[data-style="glass"]:not([data-theme="light"]) .login-box {
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(48px) saturate(2) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(48px) saturate(2) brightness(1.1) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: var(--glass-shadow-heavy) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .ltabs {
  background: rgba(0,0,0,.25) !important;
  border-color: rgba(255,255,255,.1) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .sw {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(59,158,255,.35) !important;
  color: var(--accent) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .seed-warn {
  background: rgba(255,179,64,.08) !important;
  border-color: rgba(255,179,64,.25) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .lbtn-ghost {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: var(--text) !important;
}

/* Dark Glass: Bottom Nav */
html[data-style="glass"]:not([data-theme="light"]) .bnav-item {
  color: rgba(232,236,245,.3) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .bnav-item.active {
  color: var(--accent) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .bnav-item.active::before {
  background: rgba(59,158,255,.1) !important;
  border-color: rgba(59,158,255,.2) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .bnav-item.active .bnav-icon {
  filter: drop-shadow(0 2px 8px rgba(59,158,255,.55)) !important;
}

/* Dark Glass: Nav topstrip */
html[data-style="glass"]:not([data-theme="light"]) .nav-topstrip {
  background: rgba(13,15,26,.8) !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* Dark Glass: Onboarding */
html[data-style="glass"]:not([data-theme="light"]) #ob-screen {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59,158,255,.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 85% 20%, rgba(191,123,255,.18) 0%, transparent 50%),
    #070a14 !important;
}

html[data-style="glass"]:not([data-theme="light"]) .ob-splash-title {
  text-shadow: 0 0 24px rgba(59,158,255,.4) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .ob-splash-bar {
  background: rgba(255,255,255,.12) !important;
}

/* Dark Glass: Account modal */
html[data-style="glass"]:not([data-theme="light"]) .modal-acct-glass {
  background: rgba(20,24,44,.8) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: var(--glass-shadow-heavy) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .acct-seed-box {
  background: rgba(59,158,255,.06) !important;
  border-color: rgba(59,158,255,.18) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .acct-stats {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .acct-stat-sep {
  background: rgba(255,255,255,.1) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .acct-x {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Dark Glass: Fitur modal */
html[data-style="glass"]:not([data-theme="light"]) #fitur-modal-sheet {
  background: rgba(13,15,26,.85) !important;
  border-top-color: rgba(255,255,255,.12) !important;
}

/* Dark Glass: TF buttons */
html[data-style="glass"]:not([data-theme="light"]) .tf-btn {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: var(--muted) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .tf-btn:hover {
  background: rgba(59,158,255,.08) !important;
  border-color: rgba(59,158,255,.35) !important;
  color: var(--accent) !important;
}

/* Dark Glass: Sync bar */
html[data-style="glass"]:not([data-theme="light"]) .sync-bar {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Dark Glass: export & logout btns */
html[data-style="glass"]:not([data-theme="light"]) .logout-btn {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--muted) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .export-pdf-btn {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(59,158,255,.25) !important;
  color: var(--accent) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .sim-param-body {
  border-color: rgba(255,255,255,.1) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .sim-sum-card.accent {
  background: rgba(59,158,255,.08) !important;
  border-color: rgba(59,158,255,.25) !important;
}

html[data-style="glass"]:not([data-theme="light"]) .sim-sum-card.green {
  background: rgba(48,214,140,.08) !important;
  border-color: rgba(48,214,140,.25) !important;
}

/* ── LIQUID GLASS — LIGHT MODE (sudah default) ── */
html[data-style="glass"][data-theme="light"] {
  --bg: #e8eef8;
  --surface: rgba(255,255,255,0.55);
  --surface2: rgba(255,255,255,0.35);
  --border: rgba(255,255,255,0.6);
  --accent: #007aff;
  --accent2: #af52de;
  --accent3: #34c759;
  --accent4: #ff9f0a;
  --danger: #ff3b30;
  --text: #1c1c1e;
  --muted: #8e8e93;
  --glass-bg: rgba(255,255,255,0.45);
  --glass-border: rgba(255,255,255,0.7);
  --glass-blur: blur(32px) saturate(2.2) brightness(1.08);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(0,0,0,.04) inset;
  --glass-shadow-heavy: 0 16px 48px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.95) inset;
}

/* ════════════════════════════════════════════
   JUGA PERBAIKI: Mode Tampilan buttons di
   halaman tema — update visual saat aktif
════════════════════════════════════════════ */

/* Dark mode btn active state for all themes */
html[data-style="zen"]:not([data-theme="light"]) #mode-dark-btn,
html[data-style="vivid"]:not([data-theme="light"]) #mode-dark-btn,
html[data-style="glass"]:not([data-theme="light"]) #mode-dark-btn {
  border-color: var(--accent) !important;
  background: rgba(128,128,128,.12) !important;
}

html[data-style="zen"]:not([data-theme="light"]) #mode-light-btn,
html[data-style="vivid"]:not([data-theme="light"]) #mode-light-btn,
html[data-style="glass"]:not([data-theme="light"]) #mode-light-btn {
  border-color: var(--border) !important;
  background: transparent !important;
}

html[data-style="zen"][data-theme="light"] #mode-light-btn,
html[data-style="vivid"][data-theme="light"] #mode-light-btn,
html[data-style="glass"][data-theme="light"] #mode-light-btn {
  border-color: var(--accent) !important;
  background: rgba(128,128,128,.08) !important;
}

html[data-style="zen"][data-theme="light"] #mode-dark-btn,
html[data-style="vivid"][data-theme="light"] #mode-dark-btn,
html[data-style="glass"][data-theme="light"] #mode-dark-btn {
  border-color: var(--border) !important;
  background: transparent !important;
}


/* ══════════════════════════════════════════════════════
   FIX BATCH — 5 Mar 2026
   1. Liquid Glass nav — ultra transparent + light bend
   2. Theme buttons — no emoji, consistent design system
   3. Chat topbar — refined, not boxy
══════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────
   FIX 1: LIQUID GLASS — BOTTOM NAV ultra transparent
   + specular light refraction curve effect
──────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════
   LIQUID GLASS — BOTTOM NAV
   Seperti iOS music player widget:
   - ultra transparent frosted glass
   - position: fixed TETAP (tidak di-override!)
   - cahaya dinamis via CSS animation
   - specular highlight melengkung di atas
══════════════════════════════════════════════ */

/* LIGHT MODE glass nav */
html[data-style="glass"][data-theme="light"] .bottom-nav {
  background: rgba(255,255,255,.18) !important;
  backdrop-filter: blur(64px) saturate(3.5) brightness(1.15) !important;
  -webkit-backdrop-filter: blur(64px) saturate(3.5) brightness(1.15) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  box-shadow:
    0 4px 32px rgba(0,0,0,.08),
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(0,0,0,.03) inset !important;
}

/* Remove light sweep effects */
html[data-style="glass"][data-theme="light"] .bottom-nav::before,
html[data-style="glass"][data-theme="light"] .bottom-nav::after,
html[data-style="glass"]:not([data-theme="light"]) .bottom-nav::before,
html[data-style="glass"]:not([data-theme="light"]) .bottom-nav::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* DARK MODE glass nav */
html[data-style="glass"]:not([data-theme="light"]) .bottom-nav {
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(64px) saturate(3) brightness(1.3) !important;
  -webkit-backdrop-filter: blur(64px) saturate(3) brightness(1.3) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  box-shadow:
    0 8px 48px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -1px 0 rgba(0,0,0,.3) inset !important;
}

/* Also make top nav bar ultra transparent */
html[data-style="glass"] nav {
  background: rgba(232,238,248,.45) !important;
  backdrop-filter: blur(48px) saturate(3) brightness(1.12) !important;
  -webkit-backdrop-filter: blur(48px) saturate(3) brightness(1.12) !important;
  border-bottom: 1px solid rgba(255,255,255,.5) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7),
    0 4px 20px rgba(0,0,0,.04),
    0 1px 0 rgba(255,255,255,.8) inset !important;
}

html[data-style="glass"]:not([data-theme="light"]) nav {
  background: rgba(10,12,22,.45) !important;
  backdrop-filter: blur(48px) saturate(2.5) brightness(1.3) !important;
  -webkit-backdrop-filter: blur(48px) saturate(2.5) brightness(1.3) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}

/* ────────────────────────────────────────────────────
   FIX 2: THEME BUTTONS — redesign tanpa emoji,
   consistent design language, clean icon system
──────────────────────────────────────────────────── */

/* ── Base style untuk SEMUA theme buttons ── */
.style-theme-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .95rem 1.1rem;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  font-family: inherit;
  margin-bottom: .6rem;
  border: 1.5px solid var(--border);
  background: var(--surface);
}

.style-theme-btn:last-child { margin-bottom: 0; }

/* Icon box — replaces emoji */
.stheme-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stheme-body { flex: 1; min-width: 0; }

.stheme-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .12rem;
  letter-spacing: -.01em;
}

.stheme-desc {
  font-size: .71rem;
  color: var(--muted);
  line-height: 1.45;
}

.stheme-badge {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .07em;
  padding: .2rem .55rem;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1.5px solid transparent;
}

/* ── Cyberpunk button ── */
#cyberpunk-style-btn2 {
  border-color: rgba(0,229,255,.2);
  background: linear-gradient(135deg, rgba(0,229,255,.05), rgba(124,58,237,.05));
}
#cyberpunk-style-btn2:hover {
  border-color: rgba(0,229,255,.4);
  box-shadow: 0 4px 20px rgba(0,229,255,.1);
}
#cyberpunk-style-btn2.sactive {
  border-color: rgba(0,229,255,.5);
  background: linear-gradient(135deg, rgba(0,229,255,.1), rgba(124,58,237,.1));
}
#cyberpunk-style-btn2 .stheme-icon {
  background: linear-gradient(135deg, #050810, #0b1120);
  border: 1px solid rgba(0,229,255,.3);
  box-shadow: 0 0 12px rgba(0,229,255,.2);
}
#cyberpunk-style-btn2 .stheme-badge {
  background: rgba(0,229,255,.12);
  color: #00e5ff;
  border-color: rgba(0,229,255,.3);
}

/* ── Zen Paper button ── */
#zen-style-btn2 {
  border-color: rgba(139,94,60,.2);
  background: linear-gradient(135deg, rgba(139,94,60,.04), rgba(92,122,107,.04));
}
#zen-style-btn2:hover {
  border-color: rgba(139,94,60,.4);
  box-shadow: 0 4px 20px rgba(139,94,60,.1);
}
#zen-style-btn2.sactive {
  border-color: rgba(139,94,60,.5);
  background: linear-gradient(135deg, rgba(247,243,237,.08), rgba(139,94,60,.08));
}
#zen-style-btn2 .stheme-icon {
  background: linear-gradient(135deg, #c8a882, #8b5e3c);
  box-shadow: 0 2px 8px rgba(139,94,60,.3);
}
#zen-style-btn2 .stheme-badge {
  background: rgba(139,94,60,.1);
  color: #8b5e3c;
  border-color: rgba(139,94,60,.3);
}

/* ── Tactile Maximalism button ── */
#vivid-style-btn2 {
  border-color: rgba(124,58,237,.2);
  background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(244,63,142,.05));
}
#vivid-style-btn2:hover {
  border-color: rgba(124,58,237,.4);
  box-shadow: 4px 4px 0px rgba(124,58,237,.15);
  transform: translate(-1px,-1px);
}
#vivid-style-btn2.sactive {
  border-color: rgba(124,58,237,.5);
  background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(244,63,142,.08));
  box-shadow: 4px 4px 0px rgba(124,58,237,.2);
}
#vivid-style-btn2 .stheme-icon {
  background: linear-gradient(135deg, #7c3aed, #f43f8e);
  box-shadow: 0 4px 0 rgba(80,20,160,.4), 0 2px 12px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.25);
  border-radius: 14px;
}
#vivid-style-btn2 .stheme-badge {
  background: rgba(124,58,237,.1);
  color: #7c3aed;
  border-color: rgba(124,58,237,.3);
}

/* ── Liquid Glass button ── */
#glass-style-btn2 {
  border-color: rgba(0,122,255,.2);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,122,255,.04));
  backdrop-filter: blur(8px);
}
#glass-style-btn2:hover {
  border-color: rgba(0,122,255,.4);
  box-shadow: 0 4px 20px rgba(0,122,255,.12);
}
#glass-style-btn2.sactive {
  border-color: rgba(0,122,255,.5);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,122,255,.08));
}
#glass-style-btn2 .stheme-icon {
  background: linear-gradient(135deg, rgba(0,122,255,.6), rgba(175,82,222,.6));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 2px 12px rgba(0,122,255,.3), 0 1px 0 rgba(255,255,255,.5) inset;
}
#glass-style-btn2 .stheme-badge {
  background: rgba(0,122,255,.1);
  color: #007aff;
  border-color: rgba(0,122,255,.25);
}

/* ── FIX 3: CHAT TOPBAR — more fluid, less boxy ── */
.chat-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: .8rem 1rem .6rem !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: linear-gradient(180deg, var(--bg) 55%, transparent) !important;
  gap: .5rem !important;
}

.chat-topbar-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: .45rem !important;
}

/* Chat icon — smaller, cleaner */
.chat-topbar-title svg {
  width: 22px !important;
  height: 22px !important;
}

.my-code-badge {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 100px !important;
  padding: .3rem .75rem !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: .3rem !important;
  transition: all .18s !important;
  letter-spacing: .01em !important;
}

/* QR and Back buttons — pill style, softer */
.chat-topbar button[onclick="openQRModal()"],
.chat-topbar button[onclick*="showPage"] {
  border-radius: 10px !important;
  width: 32px !important;
  height: 32px !important;
  backdrop-filter: blur(8px) !important;
}

/* Liquid Glass chat topbar */
html[data-style="glass"] .chat-topbar {
  background: linear-gradient(180deg, rgba(var(--bg),0.7) 50%, transparent) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* ── Section labels in chat — remove boxy icon look ── */
.section-label svg[width="36"] {
  width: 16px !important;
  height: 16px !important;
}





/* ══════════════════════════════════════════════════════
   TACTILE MAXIMALISM — GLOBAL CARTOON EFFECTS
   Outline hitam tebal, teks bold, warna super saturated
   Persis seperti clay toy / cartoon app aesthetic
══════════════════════════════════════════════════════ */

/* ── Global cartoon text rendering ── */
html[data-style="vivid"] {
  -webkit-font-smoothing: auto !important;
  font-smooth: auto !important;
}

/* ── CARTOON: all text in vivid theme gets heavier weight ── */
html[data-style="vivid"]:not([data-theme="light"]) .sval,
html[data-style="vivid"]:not([data-theme="light"]) .slabel,
html[data-style="vivid"]:not([data-theme="light"]) .ph h1,
html[data-style="vivid"]:not([data-theme="light"]) h1,
html[data-style="vivid"]:not([data-theme="light"]) h2,
html[data-style="vivid"]:not([data-theme="light"]) h3 {
  font-weight: 900 !important;
}

/* ── CARTOON: outline on icon badges ── */
html[data-style="vivid"] .bnav-label {
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

/* ── CARTOON: Scrollbar ── */
html[data-style="vivid"]:not([data-theme="light"]) ::-webkit-scrollbar {
  width: 8px !important;
  background: #0d1b2a !important;
}

html[data-style="vivid"]:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
  background: #ff6b35 !important;
  border: 2px solid #000 !important;
  border-radius: 8px !important;
}

/* ── CARTOON ACCENT colors for accent text ── */
html[data-style="vivid"]:not([data-theme="light"]) .acc {
  color: #ffde03 !important;
  font-weight: 800 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4) !important;
}

/* ── CARTOON: Chart.js overrides via filter ── */
html[data-style="vivid"]:not([data-theme="light"]) canvas {
  filter: saturate(1.3) contrast(1.05) !important;
}

/* ── CARTOON: FMO badges ── */
html[data-style="vivid"]:not([data-theme="light"]) .fmo-badge {
  border: 2px solid #000 !important;
  border-radius: 8px !important;
  font-weight: 900 !important;
  box-shadow: 2px 2px 0 #000 !important;
}

/* ── CARTOON: onboarding bars ── */
html[data-style="vivid"]:not([data-theme="light"]) .ob-bar {
  border-radius: 6px !important;
  border: 1.5px solid rgba(0,0,0,.3) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .ob-splash-bar {
  background: #1a2e45 !important;
  border: 2px solid #000 !important;
  border-radius: 8px !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .ob-splash-bar-fill {
  background: linear-gradient(90deg, #ff3f81, #ffde03) !important;
  border-radius: 6px !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .ob-splash-title {
  color: #ffde03 !important;
  text-shadow: 3px 4px 0 #000, -1px -1px 0 #000 !important;
  font-weight: 900 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .ob-slide-title {
  color: #fff !important;
  text-shadow: 2px 3px 0 #000 !important;
  font-weight: 900 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .ob-slide-title span {
  -webkit-text-fill-color: unset !important;
  background: none !important;
  color: #ffde03 !important;
  text-shadow: 2px 3px 0 #000 !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .ob-slide-label {
  color: #ff6b35 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .ob-btn-primary {
  background: #ff3f81 !important;
  border: 3px solid #000 !important;
  border-radius: 18px !important;
  box-shadow: 0 5px 0 #000 !important;
  color: #fff !important;
  font-weight: 900 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .ob-btn-primary:active {
  box-shadow: 0 2px 0 #000 !important;
  transform: translateY(3px) !important;
}

/* ── CARTOON: Donut chart center ── */
html[data-style="vivid"]:not([data-theme="light"]) .ob-donut-val {
  color: #ffde03 !important;
  font-weight: 900 !important;
  text-shadow: 1px 2px 0 #000 !important;
}

/* ── CARTOON: Pills ── */
html[data-style="vivid"]:not([data-theme="light"]) .ob-pill {
  background: #1a2e45 !important;
  border: 2px solid #000 !important;
  border-radius: 10px !important;
  box-shadow: 2px 2px 0 #000 !important;
  font-weight: 800 !important;
  color: #fff !important;
}

/* ── CARTOON: Sync / loading skeletons ── */
html[data-style="vivid"]:not([data-theme="light"]) .skeleton,
html[data-style="vivid"]:not([data-theme="light"]) [class*="skeleton"] {
  background: linear-gradient(90deg, #1a2e45 25%, #2a4060 50%, #1a2e45 75%) !important;
  background-size: 200% 100% !important;
  border: 2px solid #000 !important;
  border-radius: 12px !important;
}

/* ── CARTOON: Theme toggle ── */
/* ══ CARTOON TOGGLE — presisi seperti referensi gambar ══
   Track: 64×34px, thumb: 28px, icon sun/moon di dalam thumb
════════════════════════════════════════════════════════ */

/* ══ CARTOON TOGGLE — presisi seperti gambar referensi ══
   Track 64×34 px · border 3px · thumb 26×26 px
   Dark: thumb kiri (left: 3px) · Light: thumb kanan (left: 35px)
   Icons: sun di kiri track, moon di kanan track (bukan di dalam thumb)
════════════════════════════════════════════════════ */

/* TRACK — dark mode */
html[data-style="vivid"]:not([data-theme="light"]) .theme-toggle {
  width: 64px !important;
  height: 34px !important;
  min-width: 64px !important;
  background: #1c1c30 !important;
  border: 3px solid #000 !important;
  border-radius: 100px !important;
  box-shadow: 3px 4px 0 #000 !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* TRACK — light mode: kuning cerah */
html[data-style="vivid"][data-theme="light"] .theme-toggle {
  width: 64px !important;
  height: 34px !important;
  min-width: 64px !important;
  background: #ffde03 !important;
  border: 3px solid #000 !important;
  border-radius: 100px !important;
  box-shadow: 3px 4px 0 #000 !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

html[data-style="vivid"] .theme-toggle:hover {
  box-shadow: 4px 5px 0 #000 !important;
  transform: translate(-1px, -1px) !important;
}

/* THUMB — circle putih/gelap yang geser */
html[data-style="vivid"] .theme-toggle-thumb {
  position: absolute !important;
  width: 26px !important;
  height: 26px !important;
  top: 50% !important;
  left: 3px !important;
  transform: translateY(-50%) !important;
  background: #2e2e55 !important;
  border: 2px solid #000 !important;
  border-radius: 50% !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5) !important;
  transition: left 0.32s cubic-bezier(.34,1.4,.64,1), background 0.25s ease, transform 0.32s cubic-bezier(.34,1.4,.64,1) !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* THUMB — light mode: geser ke kanan */
html[data-style="vivid"][data-theme="light"] .theme-toggle-thumb {
  left: 35px !important;
  transform: translateY(-50%) !important;
  background: #ffffff !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
}
/* Toggle thumb press animation — scale only, tidak ganggu translateY(-50%) */
html[data-style="vivid"] .theme-toggle-thumb.thumb-press {
  transform: translateY(-50%) scale(0.82) !important;
}


/* ICONS container — sun di kiri, moon di kanan, absolut di atas track */
html[data-style="vivid"] .theme-toggle-icons {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 7px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* DARK: sun redup di KIRI, moon terang di KANAN */
html[data-style="vivid"]:not([data-theme="light"]) .theme-toggle .icon-sun {
  opacity: 0.25 !important;
  color: rgba(255,255,255,0.4) !important;
  stroke: rgba(255,255,255,0.4) !important;
  width: 14px !important;
  height: 14px !important;
}
html[data-style="vivid"]:not([data-theme="light"]) .theme-toggle .icon-moon {
  opacity: 1 !important;
  color: #ffde03 !important;
  stroke: #ffde03 !important;
  fill: #ffde03 !important;
  width: 13px !important;
  height: 13px !important;
  filter: drop-shadow(0 0 5px rgba(255,222,3,0.9)) !important;
}

/* LIGHT: sun terang di KIRI, moon redup di KANAN */
html[data-style="vivid"][data-theme="light"] .theme-toggle .icon-sun {
  opacity: 1 !important;
  color: #e8380d !important;
  stroke: #e8380d !important;
  fill: #e8380d !important;
  width: 14px !important;
  height: 14px !important;
  filter: drop-shadow(0 0 4px rgba(232,56,13,0.7)) !important;
}
html[data-style="vivid"][data-theme="light"] .theme-toggle .icon-moon {
  opacity: 0.2 !important;
  color: rgba(0,0,0,0.35) !important;
  stroke: rgba(0,0,0,0.35) !important;
  width: 13px !important;
  height: 13px !important;
}

/* ── CARTOON: Toast notifications ── */
html[data-style="vivid"]:not([data-theme="light"]) #toast {
  background: #ffde03 !important;
  border: 3px solid #000 !important;
  border-radius: 18px !important;
  box-shadow: 4px 5px 0 #000 !important;
  color: #000 !important;
  font-weight: 800 !important;
}

/* ── CARTOON: Onboarding progress dots ── */
html[data-style="vivid"]:not([data-theme="light"]) .ob-dot {
  background: #1a2e45 !important;
  border: 2px solid rgba(255,255,255,.4) !important;
}

html[data-style="vivid"]:not([data-theme="light"]) .ob-dot.active {
  background: #ff3f81 !important;
  border-color: #000 !important;
  box-shadow: 2px 2px 0 #000 !important;
}

/* ── CARTOON: vivid style toggle btn (theme page) ── */
html[data-style="vivid"] #vivid-style-btn2 {
  background: linear-gradient(135deg, #ffde03, #ff6b35) !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
}

html[data-style="vivid"] #vivid-style-btn2 .stheme-name {
  color: #000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

html[data-style="vivid"] #vivid-style-btn2 .stheme-badge {
  background: #000 !important;
  color: #ffde03 !important;
  border-color: #000 !important;
  font-weight: 900 !important;
}

/* ── CARTOON: All general popup/sheet border fixes ── */
html[data-style="vivid"]:not([data-theme="light"]) [id$="-modal"],
html[data-style="vivid"]:not([data-theme="light"]) [id$="-sheet"],
html[data-style="vivid"]:not([data-theme="light"]) [id$="-panel"] {
  border: 3px solid #000 !important;
  box-shadow: 6px 8px 0 #000 !important;
}

/* ══════════════════════════════════════════════════════
   JELLY / BOUNCY CLICK ANIMATIONS — semua tombol
══════════════════════════════════════════════════════ */

@keyframes jelly-squish {
  0%   { transform: scale(1,1); }
  15%  { transform: scale(0.88,1.12); }
  30%  { transform: scale(1.08,0.92); }
  45%  { transform: scale(0.95,1.05); }
  60%  { transform: scale(1.02,0.98); }
  75%  { transform: scale(0.99,1.01); }
  90%  { transform: scale(1.005,0.995); }
  100% { transform: scale(1,1); }
}

@keyframes jelly-pop {
  0%   { transform: scale(1); }
  20%  { transform: scale(0.9); }
  40%  { transform: scale(1.12); }
  55%  { transform: scale(0.96); }
  70%  { transform: scale(1.04); }
  85%  { transform: scale(0.99); }
  100% { transform: scale(1); }
}

@keyframes jelly-push-down {
  0%   { transform: scale(1) translateY(0); }
  20%  { transform: scale(1.06, 0.9) translateY(4px); }
  45%  { transform: scale(0.97, 1.06) translateY(-3px); }
  65%  { transform: scale(1.02, 0.98) translateY(1px); }
  82%  { transform: scale(0.99, 1.01) translateY(-0.5px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes jelly-wobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15%       { transform: rotate(-2deg) scale(0.95); }
  30%       { transform: rotate(2deg) scale(1.05); }
  45%       { transform: rotate(-1deg) scale(0.98); }
  60%       { transform: rotate(1deg) scale(1.02); }
  75%       { transform: rotate(-0.5deg) scale(0.995); }
  90%       { transform: rotate(0.5deg) scale(1.005); }
}

@keyframes clay-press {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.04, 0.91) translateY(5px); }
  55%  { transform: scale(0.97, 1.04) translateY(-2px); }
  75%  { transform: scale(1.01, 0.99) translateY(0.5px); }
  90%  { transform: scale(0.998, 1.002) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

button,
.btn, .btn-primary, .btn-ghost, .btn-del,
.lbtn, .lbtn-ghost, .ltab, .nav-tab, .tf-btn,
.bnav-item, .style-theme-btn, .ob-btn-primary, .ob-btn-skip,
.fmo-btn, .theme-toggle, .acct-x, .fitur-modal-close,
.logout-btn, .export-pdf-btn, [role="button"] {
  cursor: pointer;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1),
              box-shadow .12s cubic-bezier(.34,1.56,.64,1),
              background .18s ease, border-color .18s ease, color .18s ease !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button:active, .btn:active, .btn-primary:active, .btn-ghost:active,
.btn-del:active, .lbtn:active, .lbtn-ghost:active, .tf-btn:active,
.ob-btn-primary:active, .ob-btn-skip:active,
.logout-btn:active, .export-pdf-btn:active, [role="button"]:active {
  animation: jelly-push-down .45s cubic-bezier(.34,1.56,.64,1) !important;
  transform-origin: center center !important;
}

.nav-tab:active, .ltab:active {
  animation: jelly-squish .4s cubic-bezier(.34,1.56,.64,1) !important;
}

.bnav-item:active {
  animation: jelly-pop .5s cubic-bezier(.34,1.56,.64,1) !important;
}

.bnav-item:active .bnav-icon {
  animation: jelly-wobble .5s cubic-bezier(.34,1.56,.64,1) !important;
}

.style-theme-btn:active {
  animation: jelly-squish .42s cubic-bezier(.34,1.56,.64,1) !important;
}

.fmo-btn:active {
  animation: jelly-pop .55s cubic-bezier(.34,1.56,.64,1) !important;
}

.theme-toggle:active, .acct-x:active, .fitur-modal-close:active {
  animation: jelly-pop .38s cubic-bezier(.34,1.56,.64,1) !important;
}

html[data-style="vivid"] .btn-primary:active,
html[data-style="vivid"] .lbtn:active,
html[data-style="vivid"] .fmo-btn:active {
  animation: clay-press .4s cubic-bezier(.34,1.56,.64,1) !important;
}

html[data-style="vivid"] .bnav-item:active .bnav-icon {
  animation: jelly-wobble .55s cubic-bezier(.34,1.56,.64,1) !important;
  filter: drop-shadow(0 0 8px var(--accent)) !important;
}

.btn-primary:hover:not(:active), .lbtn:hover:not(:active):not(:disabled) {
  transform: translateY(-2px) scale(1.01) !important;
}

.fmo-btn:hover:not(:active) { transform: translateY(-3px) scale(1.02) !important; }
.bnav-item:hover:not(:active) { transform: scale(1.08) !important; }

button:disabled, .btn:disabled, .lbtn:disabled {
  animation: none !important; transform: none !important; pointer-events: none !important;
}

.low-end button:active, .low-end .btn:active, .low-end .lbtn:active {
  animation: none !important;
  transform: scale(0.96) !important;
  transition: transform .08s ease !important;
}

/* ══════════════════════════════════════════════════════
   CIRCULAR RIPPLE REVEAL — Pure Canvas (no View Transitions)
   
   Tidak menggunakan View Transitions API karena clip-path
   animation tidak stabil di Android mobile browser.
   
   Semua animasi ditangani JavaScript canvas di app.js.
   CSS hanya perlu memastikan TIDAK ada transition yang
   "bocor" saat DOM switch tema secara instan.
══════════════════════════════════════════════════════ */

/* Matikan SEMUA transition saat ripple sedang berjalan.
   Class ini di-add/remove oleh JS di app.js */
html.zw-rippling *,
html.zw-rippling *::before,
html.zw-rippling *::after {
  transition: none !important;
  animation-duration: 0.001s !important;
}

/* Nonaktifkan View Transitions sepenuhnya — kita tidak pakai */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
}