:root{
  --bg-0:#04060a;--bg-1:#070b11;--bg-2:#0b1018;
  --panel:rgba(14,22,32,.6);--line:rgba(120,210,255,.12);--line-2:rgba(120,210,255,.22);
  --cyan:#27e6cf;--cyan-soft:#7af2e6;--violet:#b48bff;--violet-soft:#cdb4ff;--gold:#e7c574;--gold-soft:#f5e2ad;
  --pos:#2fe6a8;--neg:#ff5f76;--txt:#eaf4f6;--txt-2:#9bb0bd;--txt-3:#5c7080;
  --sidebar-w:266px;--sidebar-w-collapsed:78px;--radius:18px;
  --holo:linear-gradient(110deg,var(--cyan),var(--violet) 48%,var(--gold));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Sora',sans-serif;background:var(--bg-0);color:var(--txt);overflow:hidden;-webkit-font-smoothing:antialiased}
.atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora{position:absolute;border-radius:50%;filter:blur(130px);opacity:.5;animation:float 24s ease-in-out infinite}
.a1{width:560px;height:560px;background:radial-gradient(circle,#0f6b63,transparent 70%);top:-170px;left:-130px}
.a2{width:500px;height:500px;background:radial-gradient(circle,#4b2f86,transparent 70%);bottom:-190px;right:-110px;animation-delay:-8s}
.a3{width:440px;height:440px;background:radial-gradient(circle,#6e5a23,transparent 70%);top:42%;left:54%;animation-delay:-14s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(44px,-34px) scale(1.13)}}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(120,210,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(120,210,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 25%,#000 28%,transparent 86%)}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(120,210,255,.025) 0 1px,transparent 1px 3px);opacity:.5;mix-blend-mode:overlay}
.grain{position:absolute;inset:0;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.app{position:relative;z-index:1;display:flex;height:100vh}
.sidebar{width:var(--sidebar-w);flex-shrink:0;height:100%;background:linear-gradient(180deg,rgba(8,13,19,.94),rgba(4,7,11,.94));backdrop-filter:blur(22px);border-right:1px solid var(--line);display:flex;flex-direction:column;transition:width .32s cubic-bezier(.7,0,.2,1);position:relative;z-index:30}
body.collapsed .sidebar{width:var(--sidebar-w-collapsed)}
.brand{display:flex;align-items:center;gap:13px;padding:22px 20px 18px;border-bottom:1px solid var(--line)}
.brand-logo{width:40px;height:40px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;background:var(--holo);background-size:200% 200%;animation:holoShift 6s ease infinite;box-shadow:0 0 26px rgba(120,150,255,.45);position:relative}
.brand-logo::after{content:"";position:absolute;inset:2px;border-radius:10px;background:var(--bg-1)}
.brand-logo svg{position:relative;z-index:1;width:26px;height:26px}
@keyframes holoShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.brand-txt{overflow:hidden;white-space:nowrap}
.brand-name{font-family:'Orbitron';font-weight:700;font-size:15px;letter-spacing:2px;background:var(--holo);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holoShift 6s ease infinite}
.brand-sub{font-size:9px;color:var(--txt-3);letter-spacing:3.5px;margin-top:3px}
body.collapsed .brand-txt{opacity:0;width:0}
.nav{flex:1;padding:12px 12px;overflow-y:auto}
.nav-label{font-size:9px;letter-spacing:2.5px;color:var(--txt-3);padding:13px 12px 7px;text-transform:uppercase;white-space:nowrap;overflow:hidden}
body.collapsed .nav-label{opacity:0;height:8px;padding:6px 0}
.nav-item{display:flex;align-items:center;gap:13px;padding:10px 13px;border-radius:12px;cursor:pointer;color:var(--txt-2);margin-bottom:3px;position:relative;transition:.22s;white-space:nowrap}
.nav-item svg{width:19px;height:19px;flex-shrink:0;stroke-width:1.7}
.nav-item .lbl{font-size:12.5px;font-weight:500;overflow:hidden}
body.collapsed .nav-item .lbl{opacity:0;width:0}
.nav-item:hover{background:rgba(120,210,255,.07);color:var(--txt)}
.nav-item.active{background:linear-gradient(90deg,rgba(120,210,255,.16),transparent);color:var(--cyan-soft)}
.nav-item.active::before{content:"";position:absolute;left:0;top:16%;height:68%;width:3px;border-radius:3px;background:var(--holo);box-shadow:0 0 12px var(--cyan)}
.nav-badge{margin-left:auto;font-family:'JetBrains Mono';font-size:10px;color:var(--txt-3)}
body.collapsed .nav-badge{display:none}
.sidebar-foot{padding:13px;border-top:1px solid var(--line)}
.acct-chip{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line-2);border-radius:12px;margin-bottom:10px;background:rgba(120,210,255,.04)}
.acct-av{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;font-weight:700;font-size:14px;color:#04110f;background:var(--holo);background-size:200% 200%}
.acct-meta{min-width:0;flex:1}
.acct-email{font-size:12px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-sub{font-size:10px;color:var(--pos)}
.acct-out{flex-shrink:0;width:32px;height:32px;border-radius:9px;border:1px solid var(--line-2);background:transparent;color:var(--txt-3);display:grid;place-items:center;cursor:pointer;transition:.15s}
.acct-out:hover{border-color:var(--neg);color:var(--neg)}
.acct-out svg{width:16px;height:16px}
body:not(.is-admin) [data-admin]{display:none!important}
.hist-badge{font-size:10.5px;padding:3px 9px;border-radius:7px;font-weight:600;white-space:nowrap}
.role-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:600;letter-spacing:.03em;}
.role-badge.utama{background:rgba(39,230,207,.15);color:var(--cyan);border:1px solid rgba(39,230,207,.35);}
.role-badge.cadangan{background:rgba(180,139,255,.15);color:var(--violet);border:1px solid rgba(180,139,255,.3);}
.primary-bank-card{background:linear-gradient(135deg,rgba(39,230,207,.08) 0%,rgba(180,139,255,.06) 100%);border:1px solid rgba(39,230,207,.22);border-radius:14px;padding:16px 20px;margin-bottom:14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.primary-bank-card .pbc-logo{width:52px;height:52px;border-radius:12px;background:rgba(39,230,207,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.primary-bank-card .pbc-info{flex:1;min-width:140px;}
.primary-bank-card .pbc-label{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--cyan);text-transform:uppercase;margin-bottom:2px;}
.primary-bank-card .pbc-name{font-size:15px;font-weight:700;color:var(--txt);margin-bottom:2px;}
.primary-bank-card .pbc-meta{font-size:11px;color:var(--txt-3);}
.primary-bank-card .pbc-bal{text-align:right;flex-shrink:0;}
.primary-bank-card .pbc-bal-lbl{font-size:10px;color:var(--txt-3);margin-bottom:3px;}
.primary-bank-card .pbc-bal-val{font-size:18px;font-weight:800;color:var(--pos);font-family:'JetBrains Mono',monospace;}
.b-buy{color:var(--pos);background:rgba(47,230,168,.12);border:1px solid rgba(47,230,168,.3)}
.b-sell{color:var(--neg);background:rgba(255,95,118,.12);border:1px solid rgba(255,95,118,.3)}
.hist-tbl td{vertical-align:middle}
.top-acct{margin-bottom:14px}
.top-acct-em{font-size:11px;color:var(--cyan-soft);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px;padding-left:4px}
.logout-top{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:11px;border:1px solid var(--line-2);background:rgba(255,95,118,.06);color:var(--neg);font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}
.logout-top:hover{background:rgba(255,95,118,.14);border-color:var(--neg)}
.logout-top svg{width:16px;height:16px}
body.collapsed .top-acct-em{display:none}
body.collapsed .logout-top{padding:10px 0}body.collapsed .logout-top span,body.collapsed .logout-top{font-size:0}body.collapsed .logout-top svg{font-size:initial}
.admin-note{font-size:12px;color:var(--txt-3);line-height:1.6}
body.collapsed .acct-meta,body.collapsed .acct-sub{display:none}
.fb-status{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--txt-2);white-space:nowrap;overflow:hidden}
.dot{width:8px;height:8px;border-radius:50%;background:var(--txt-3);flex-shrink:0;transition:.3s}
.dot.live{background:var(--pos);box-shadow:0 0 10px var(--pos);animation:pulse 2s infinite}
.dot.cloud{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
@keyframes pulse{50%{opacity:.4}}

.main{flex:1;display:flex;flex-direction:column;min-width:0;height:100%}
.topbar{display:flex;align-items:center;gap:11px;padding:13px 20px;border-bottom:1px solid var(--line);background:rgba(6,10,16,.55);backdrop-filter:blur(14px);flex-shrink:0;flex-wrap:wrap}
.icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--txt-2);display:grid;place-items:center;cursor:pointer;transition:.2s;flex-shrink:0;position:relative}
.icon-btn:hover{color:var(--cyan);border-color:var(--line-2);background:rgba(120,210,255,.08)}
.icon-btn svg{width:20px;height:20px;stroke-width:1.8}
.page-title{font-family:'Orbitron';font-weight:600;font-size:13.5px;letter-spacing:1.5px}
.page-title small{display:block;font-family:'Sora';font-size:11px;color:var(--txt-3);letter-spacing:.5px;margin-top:3px;font-weight:400}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pf-switch{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:11px;padding:0 6px 0 12px;background:linear-gradient(135deg,rgba(180,139,255,.08),rgba(39,230,207,.05))}
.pf-switch select{background:transparent;border:none;color:var(--violet-soft);font-family:'Sora';font-weight:600;font-size:12px;padding:9px 4px;cursor:pointer;outline:none;max-width:140px}
.pf-switch svg{width:15px;height:15px;color:var(--violet)}
.cur-toggle{display:flex;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.cur-toggle button{background:transparent;border:none;color:var(--txt-3);font-family:'JetBrains Mono';font-size:12px;font-weight:600;padding:9px 12px;cursor:pointer;transition:.2s}
.cur-toggle button.on{background:linear-gradient(135deg,var(--cyan),#16b8a6);color:#04110f}
.live-pill{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line);border-radius:11px;font-family:'JetBrains Mono';font-size:11px;color:var(--pos);cursor:pointer;transition:.2s;user-select:none}
.live-pill.paused{color:var(--txt-3)}.live-pill.paused .dot{background:var(--txt-3);box-shadow:none;animation:none}
.bell-count{position:absolute;top:-5px;right:-5px;background:var(--neg);color:#fff;font-family:'JetBrains Mono';font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 3px}
.clock{font-family:'JetBrains Mono';font-size:12px;color:var(--txt-2);text-align:right;line-height:1.5}
.clock b{color:var(--cyan-soft)}
.exch-row{display:flex;gap:7px;overflow-x:auto;padding:2px 0}
.exch-chip{display:flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2);color:var(--txt-2);font-size:11px;white-space:nowrap;cursor:pointer;flex-shrink:0}
.exch-chip.on{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px rgba(39,230,207,.2)}
.pager{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:12px;justify-content:center}
.pg-btn{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt-2);border-radius:7px;font-size:12px;cursor:pointer;font-family:'Sora'}
.pg-btn.on{border-color:var(--cyan);color:var(--cyan);background:rgba(39,230,207,.08)}
.pg-btn:disabled{opacity:.35;cursor:default}
.pg-ell{color:var(--txt-3);padding:0 2px}
.pg-info{font-size:10.5px;color:var(--txt-3);width:100%;text-align:center;margin-top:4px}
.livebox{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.lb-h{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.lb-name{font-size:12px;color:var(--txt-2);font-weight:600}
.lb-v{font-family:'JetBrains Mono';font-size:15px;font-weight:600}
.lb-c{font-size:11px;margin-top:2px}
.content{flex:1;overflow-y:auto;padding:24px;scroll-behavior:smooth;position:relative}
.ptr{position:absolute;top:6px;left:50%;transform:translateX(-50%) translateY(-64px);width:42px;height:42px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line-2);display:grid;place-items:center;z-index:6;opacity:0;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s;box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none}
.ptr-spin{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--cyan)}
.ptr.ready .ptr-spin{border-top-color:var(--gold-soft)}
.ptr.spinning{transform:translateX(-50%) translateY(16px)!important;opacity:1!important}
.ptr.spinning .ptr-spin{animation:ptrspin .7s linear infinite;border-top-color:var(--cyan)}
@keyframes ptrspin{to{transform:rotate(360deg)}}
.view{display:none;animation:rise .5s cubic-bezier(.2,.7,.3,1)}
.view.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.tape{display:flex;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(14,22,32,.7),rgba(8,12,18,.7));margin-bottom:20px;backdrop-filter:blur(14px)}
.tape-item{flex:1;padding:13px 16px;border-right:1px solid var(--line);min-width:0;transition:.2s}
.tape-item:hover{background:rgba(120,210,255,.05)}
.tape-item:last-child{border-right:none}
.tape-item .t-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.tape-item .t-sym{font-size:10.5px;letter-spacing:1px;color:var(--txt-2);font-weight:600;font-family:'JetBrains Mono'}
.tape-item .t-px{font-family:'JetBrains Mono';font-size:16px;font-weight:700;letter-spacing:-.3px}
.tape-item .t-chg{font-family:'JetBrains Mono';font-size:11px;margin-top:3px;display:inline-block}
@media(max-width:880px){.tape{flex-wrap:wrap}.tape-item{flex:1 1 33%;border-bottom:1px solid var(--line)}}
.tape-h{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tape-h .tape-item{flex:0 0 auto;min-width:132px;border-bottom:none}
.up,.pl-up{color:var(--pos)}.down,.pl-down{color:var(--neg)}

.grid{display:grid;gap:18px}
.g-main{grid-template-columns:1.55fr 1fr}.g-3{grid-template-columns:repeat(3,1fr)}.g-2{grid-template-columns:1fr 1fr}.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1050px){.g-main,.g-3,.g-2,.g-4{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;backdrop-filter:blur(16px);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.card-title{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt-2);font-weight:600}
.card-title .accent{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
/* HUD corner brackets */
.hud{position:relative}
.hud::after{content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;background:
 linear-gradient(var(--cyan),var(--cyan)) left top/14px 2px no-repeat,
 linear-gradient(var(--cyan),var(--cyan)) left top/2px 14px no-repeat,
 linear-gradient(var(--gold),var(--gold)) right top/14px 2px no-repeat,
 linear-gradient(var(--gold),var(--gold)) right top/2px 14px no-repeat,
 linear-gradient(var(--gold),var(--gold)) left bottom/14px 2px no-repeat,
 linear-gradient(var(--gold),var(--gold)) left bottom/2px 14px no-repeat,
 linear-gradient(var(--violet),var(--violet)) right bottom/14px 2px no-repeat,
 linear-gradient(var(--violet),var(--violet)) right bottom/2px 14px no-repeat;opacity:.55}
.hero{background:linear-gradient(135deg,rgba(16,28,38,.82),rgba(8,12,20,.6));border:1px solid transparent;background-clip:padding-box;position:relative}
.hero::before{content:"";position:absolute;inset:-1px;border-radius:var(--radius);padding:1px;background:var(--holo);background-size:200% 200%;animation:holoShift 8s ease infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;height:auto}
.hero .label{font-size:11px;letter-spacing:2.5px;color:var(--txt-3);text-transform:uppercase}
.hero .balance{font-family:'JetBrains Mono';font-size:40px;font-weight:700;margin:10px 0 6px;letter-spacing:-1px;line-height:1;background:linear-gradient(120deg,#fff,var(--cyan-soft) 45%,var(--violet-soft) 75%,var(--gold-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .balance.alt{font-size:15px;color:var(--txt-2);background:none;-webkit-text-fill-color:var(--txt-2)}
.hero-meta{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap}
.hero-meta .m .k{font-size:10px;letter-spacing:1.5px;color:var(--txt-3);text-transform:uppercase}
.hero-meta .m .v{font-family:'JetBrains Mono';font-size:14px;font-weight:600;margin-top:4px}
.quick{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.compare{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:'JetBrains Mono';font-size:11px;padding:6px 11px;border-radius:9px;border:1px solid var(--line);color:var(--txt-2)}

.btn{border:none;border-radius:11px;padding:11px 17px;font-family:'Sora';font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.2s;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-primary{background:linear-gradient(135deg,var(--cyan),#15b6a4);color:#04110f}.btn-primary:hover{box-shadow:0 0 22px rgba(39,230,207,.4);transform:translateY(-1px)}
.btn-violet{background:linear-gradient(135deg,var(--violet),#7e5bd6);color:#0c0717}.btn-violet:hover{box-shadow:0 0 22px rgba(180,139,255,.4);transform:translateY(-1px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#caa64e);color:#1c1405}.btn-gold:hover{box-shadow:0 0 22px rgba(231,197,116,.35);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--txt);border:1px solid var(--line-2)}.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-neg{background:rgba(255,95,118,.12);color:var(--neg);border:1px solid rgba(255,95,118,.3)}.btn-neg:hover{background:rgba(255,95,118,.2)}
.btn-sm{padding:8px 13px;font-size:12px;border-radius:9px}
input,select,textarea{font-family:'Sora';background:var(--bg-2);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:11px 13px;font-size:13px;width:100%;outline:none;transition:.2s}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(39,230,207,.12)}
input::placeholder,textarea::placeholder{color:var(--txt-3)}
input[type=date],input[type=time],input[type=datetime-local]{color-scheme:dark}
label.field{display:block;margin-bottom:13px}
label.field .lk{font-size:11px;letter-spacing:1px;color:var(--txt-2);text-transform:uppercase;margin-bottom:6px;display:block}
.row{display:flex;gap:10px}.row>*{flex:1}

.holdings{width:100%;border-collapse:collapse}
.holdings th{text-align:left;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt-3);padding:10px 9px;border-bottom:1px solid var(--line);font-weight:600}
.holdings th.r,.holdings td.r{text-align:right}
.holdings td{padding:12px 9px;border-bottom:1px solid rgba(120,210,255,.06);font-size:13px;vertical-align:middle}
.holdings tr:hover td{background:rgba(120,210,255,.04)}
.asset-cell{display:flex;align-items:center;gap:11px}
.asset-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-family:'JetBrains Mono';font-weight:700;font-size:12px;flex-shrink:0}
.ico-crypto{background:rgba(247,147,26,.14);color:#f7a93a;border:1px solid rgba(247,147,26,.3)}
.ico-gold{background:rgba(231,197,116,.14);color:var(--gold);border:1px solid rgba(231,197,116,.3)}
.ico-saham{background:rgba(39,230,207,.12);color:var(--cyan);border:1px solid rgba(39,230,207,.3)}
.ico-currency{background:rgba(180,139,255,.14);color:var(--violet);border:1px solid rgba(180,139,255,.3)}
.ico-cash{background:rgba(47,230,168,.12);color:var(--pos);border:1px solid rgba(47,230,168,.3)}
.asset-name{font-weight:600}.asset-sub{font-size:11px;color:var(--txt-3);font-family:'JetBrains Mono';margin-top:2px}
.mono{font-family:'JetBrains Mono'}
.iconbtn-s{cursor:pointer;color:var(--txt-3);padding:3px;transition:.2s}.iconbtn-s:hover{color:var(--cyan)}
.del-x{cursor:pointer;color:var(--txt-3);transition:.2s;padding:4px}.del-x:hover{color:var(--neg)}
.bell-ico{cursor:pointer;color:var(--txt-3);padding:3px;transition:.2s}.bell-ico:hover{color:var(--gold)}.bell-ico.on{color:var(--gold)}
.tag{font-size:10px;padding:3px 9px;border-radius:20px;letter-spacing:.5px;border:1px solid var(--line-2);color:var(--txt-2)}
.tag.g-income{color:var(--pos);border-color:rgba(47,230,168,.4)}.tag.g-wajib{color:var(--neg);border-color:rgba(255,95,118,.4)}.tag.g-investasi{color:var(--violet);border-color:rgba(180,139,255,.4)}
.empty{text-align:center;padding:42px 20px;color:var(--txt-3)}
.empty svg{width:44px;height:44px;margin-bottom:14px;opacity:.5}

.tx-row{display:flex;align-items:center;gap:13px;padding:12px 4px;border-bottom:1px solid rgba(120,210,255,.06)}
.tx-row:last-child{border:none}
.tx-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-family:'JetBrains Mono';font-weight:700}
.tx-in{background:rgba(47,230,168,.13);color:var(--pos)}.tx-out{background:rgba(255,95,118,.13);color:var(--neg)}.tx-v{background:rgba(180,139,255,.13);color:var(--violet)}
.tx-meta{flex:1;min-width:0}.tx-meta .t{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx-meta .d{font-size:11px;color:var(--txt-3);margin-top:2px}
.tx-amt{font-family:'JetBrains Mono';font-weight:600;font-size:13.5px}

.chart-wrap{position:relative;height:230px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:880px){.kpi-grid{grid-template-columns:1fr 1fr}}
.kpi{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:15px}
.kpi .k{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--txt-3)}
.kpi .v{font-family:'JetBrains Mono';font-size:18px;font-weight:600;margin-top:7px}
.kpi .s{font-size:11px;color:var(--txt-3);margin-top:3px}
.budget-bar,.goal-bar{height:9px;border-radius:6px;background:var(--bg-0);overflow:hidden;margin-top:8px}
.budget-fill,.goal-fill{height:100%;border-radius:6px;background:var(--holo);transition:width .5s}
.goal-card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px}
.goal-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.goal-name{font-weight:600;font-size:15px}.goal-sub{font-size:11.5px;color:var(--txt-3);margin-top:3px}
.goal-pct{font-family:'JetBrains Mono';font-size:22px;font-weight:700;color:var(--cyan-soft)}
.goal-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--txt-2);margin-top:9px;font-family:'JetBrains Mono';gap:8px;flex-wrap:wrap}
.heat{display:flex;gap:4px;overflow-x:auto;padding-bottom:6px}
.heat-col{display:flex;flex-direction:column;gap:4px}
.heat-cell{width:15px;height:15px;border-radius:4px;background:rgba(120,210,255,.06);transition:.2s}
.heat-cell:hover{outline:2px solid var(--cyan)}
.heat-legend{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--txt-3);margin-top:10px}
.heat-legend i{width:13px;height:13px;border-radius:3px;display:inline-block}
.jr-card{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:12px;padding:16px;margin-bottom:13px}
.jr-card h4{font-size:14px;margin-bottom:5px}.jr-card .meta{font-size:11px;color:var(--txt-3);margin-bottom:9px;font-family:'JetBrains Mono'}.jr-card p{font-size:13px;color:var(--txt-2);line-height:1.6;white-space:pre-wrap}
.conv{background:linear-gradient(160deg,rgba(20,30,42,.7),rgba(10,15,22,.7));border:1px solid var(--line-2);border-radius:16px;padding:18px;position:relative;overflow:hidden;transition:.25s}
.conv::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(135deg,rgba(39,230,207,.5),transparent 40%,transparent 60%,rgba(180,139,255,.45));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
.conv::after{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.6}
.conv:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.4)}
.conv .big{font-family:'JetBrains Mono';font-size:24px;font-weight:700;color:var(--gold-soft);margin-top:6px;letter-spacing:-.5px}
.range-tabs{display:flex;gap:6px;flex-wrap:wrap}
.range-tabs button{background:var(--bg-2);border:1px solid var(--line);color:var(--txt-3);font-family:'JetBrains Mono';font-size:11px;padding:5px 10px;border-radius:8px;cursor:pointer}
.range-tabs button.on{background:rgba(39,230,207,.15);border-color:var(--cyan);color:var(--cyan)}
.note{background:rgba(231,197,116,.07);border:1px solid rgba(231,197,116,.22);border-radius:12px;padding:14px 16px;font-size:12.5px;color:var(--gold-soft);line-height:1.6;margin-bottom:18px}
.note b{color:var(--gold)}
.note.cyan{background:rgba(39,230,207,.06);border-color:rgba(39,230,207,.22);color:var(--cyan-soft)}.note.cyan b{color:var(--cyan)}
textarea.cfg{font-family:'JetBrains Mono';font-size:12px;background:var(--bg-0);color:var(--cyan-soft);min-height:150px;line-height:1.6;resize:vertical}
.feat-list{display:grid;gap:9px}
.feat{display:flex;align-items:center;gap:11px;font-size:12.5px;padding:10px 13px;border-radius:11px;border:1px solid var(--line);background:var(--bg-2)}
.feat .pill{margin-left:auto;font-size:9.5px;letter-spacing:1px;padding:3px 9px;border-radius:20px;font-weight:600}
.pill-free{background:rgba(47,230,168,.14);color:var(--pos)}.pill-paid{background:rgba(255,95,118,.12);color:var(--neg)}
.feat svg{width:17px;height:17px;color:var(--cyan)}.feat.off{opacity:.45}.feat.off svg{color:var(--txt-3)}
.tv-box{height:360px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.quickchips{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.qchip{font-family:'JetBrains Mono';font-size:11px;padding:6px 10px;border-radius:9px;border:1px solid var(--line);color:var(--txt-2);cursor:pointer;background:var(--bg-2);transition:.2s}
.qchip:hover{border-color:var(--cyan);color:var(--cyan)}
/* logo badge */
.logo{position:relative;display:inline-grid;place-items:center;border-radius:50%;overflow:hidden;flex-shrink:0;font-family:'JetBrains Mono';font-weight:700;background:rgba(120,210,255,.1);color:var(--cyan)}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0e1620}
/* custom dropdown */
.dd{position:relative}
.dd-btn{display:flex;align-items:center;gap:10px;width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--txt);cursor:pointer;font-family:'Sora';font-size:13px}
.dd-btn:hover{border-color:var(--cyan)}
.dd-btn .chev{margin-left:auto;color:var(--txt-3)}
.dd-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line-2);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.6);z-index:50;display:none;overflow:hidden}
.dd-panel.open{display:block}
.dd-search{padding:10px}.dd-search input{font-size:12.5px}
.dd-list{max-height:240px;overflow-y:auto}
.dd-item{display:flex;align-items:center;gap:11px;padding:9px 13px;cursor:pointer;transition:.15s}
.dd-item:hover{background:rgba(120,210,255,.08)}
.dd-item .nm{font-size:13px;font-weight:500}.dd-item .sb{font-size:11px;color:var(--txt-3)}
.dd-item.custom{color:var(--violet);border-top:1px solid var(--line)}

.overlay{position:fixed;inset:0;background:rgba(2,4,7,.74);backdrop-filter:blur(6px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.overlay.open{display:flex}
.modal{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line-2);border-radius:20px;padding:26px;width:100%;max-width:460px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:rise .35s;max-height:92vh;overflow-y:auto}
.modal h3{font-family:'Orbitron';font-weight:600;font-size:13.5px;letter-spacing:1px;margin-bottom:4px}
.modal .sub{font-size:12px;color:var(--txt-3);margin-bottom:18px}
.modal-foot{display:flex;gap:10px;margin-top:8px}.modal-foot>*{flex:1}
.seg{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.seg button{flex:1;min-width:78px;padding:11px;border-radius:11px;border:1px solid var(--line);background:var(--bg-2);color:var(--txt-2);font-family:'Sora';font-weight:600;font-size:13px;cursor:pointer;transition:.2s}
.seg button.on-in{background:rgba(47,230,168,.15);border-color:var(--pos);color:var(--pos)}
.seg button.on-out{background:rgba(255,95,118,.15);border-color:var(--neg);color:var(--neg)}
.seg button.on-v{background:rgba(180,139,255,.15);border-color:var(--violet);color:var(--violet)}
.toast-wrap{position:fixed;top:18px;right:18px;z-index:400;display:flex;flex-direction:column;gap:10px;max-width:90vw}
.toast{background:linear-gradient(135deg,rgba(16,28,38,.97),rgba(8,12,20,.97));border:1px solid var(--line-2);border-left:3px solid var(--cyan);border-radius:13px;padding:13px 17px;min-width:240px;box-shadow:0 18px 50px rgba(0,0,0,.5);animation:toastIn .4s cubic-bezier(.2,.8,.3,1);backdrop-filter:blur(12px)}
.toast.alert{border-left-color:var(--gold)}
.toast .tt{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}.toast .td{font-size:11.5px;color:var(--txt-2);margin-top:4px}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.gate{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;padding:20px;overflow:auto}
.gate.show{display:flex}
.gate:not(.show){display:none!important;pointer-events:none!important}
.gate-bg{pointer-events:none}
.gate-bg{position:absolute;inset:0;background:radial-gradient(900px 500px at 70% -10%,rgba(180,139,255,.18),transparent 60%),radial-gradient(800px 500px at 0% 110%,rgba(39,230,207,.16),transparent 60%),radial-gradient(ellipse at 50% 30%,#0a141e,#04060a)}
.gate-bg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(13,19,27,.5) 0 1px,transparent 1px 4px);opacity:.5}
.gate-card{position:relative;width:100%;max-width:380px;background:rgba(12,18,26,.72);backdrop-filter:blur(14px);border:1px solid var(--line-2);border-radius:22px;padding:34px 26px 26px;box-shadow:0 30px 80px rgba(0,0,0,.55);animation:gateIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes gateIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.gate-logo{width:94px;height:94px;margin:0 auto 18px;border-radius:24px;background:#04060a;display:grid;place-items:center;box-shadow:0 0 48px rgba(120,150,255,.45);position:relative;overflow:hidden}
.gate-logo::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#27e6cf,#b48bff,#e7c574);opacity:.14}
.gate-logo::after{content:"";position:absolute;inset:0;border-radius:24px;border:1.5px solid rgba(120,150,255,.35)}
.gate-logo svg{position:relative;z-index:1;width:74px;height:74px}
.gate-logo svg{width:30px;height:30px}
.gate-brand{text-align:center;font-family:'Orbitron',sans-serif;font-size:22px;font-weight:800;letter-spacing:1px;color:var(--txt);margin-bottom:4px}
.gate-brand span{color:var(--cyan-soft)}
.gate-tag{text-align:center;font-size:12px;color:var(--txt-3);margin-bottom:22px}
.gate-card .field{margin-bottom:13px}
.gate-submit{width:100%;justify-content:center;height:46px;margin-top:6px;font-size:14px}
.gate-msg{font-size:11px;color:var(--txt-3);text-align:center;margin-top:13px;line-height:1.5;min-height:30px}
.gate-toggle{text-align:center;font-size:13px;color:var(--txt-2);margin-top:14px;padding-top:16px;border-top:1px solid var(--line);cursor:pointer}
.gate-toggle b{color:var(--cyan-soft)}
.gate-skip{text-align:center;font-size:11px;color:var(--txt-3);margin-top:14px;cursor:pointer;opacity:.7}
.gate-skip:hover{opacity:1;color:var(--txt-2)}
/* ===== Splash intro ===== */
#splash{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(110% 90% at 50% 32%,#0b1320 0%,#070b13 55%,#05080e 100%);transition:opacity .65s ease;contain:strict}
#splash.done{opacity:0;pointer-events:none}
#splash .sp-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(13,19,27,.5) 0 1px,transparent 1px 5px);opacity:.3;pointer-events:none}
#splash .sp-logo{height:168px;width:auto;opacity:0;filter:drop-shadow(0 0 18px rgba(78,192,182,.5)) drop-shadow(0 0 30px rgba(159,140,219,.4)) drop-shadow(0 0 44px rgba(205,174,120,.28));animation:spLogo 1.55s cubic-bezier(.18,.75,.22,1) .15s forwards;will-change:transform,opacity}
@keyframes spLogo{0%{opacity:0;transform:perspective(720px) rotateY(-540deg) scale(.42)}55%{opacity:1}100%{opacity:1;transform:perspective(720px) rotateY(0deg) scale(1)}}
#splash .sp-mask{overflow:hidden;padding:4px 10px}
#splash .sp-text{transform:translateY(120%);opacity:0;animation:spRise .8s cubic-bezier(.16,.8,.26,1) 1.35s forwards;text-align:center;will-change:transform,opacity}
@keyframes spRise{to{transform:translateY(0);opacity:1}}
#splash .sp-brand{font-family:'Orbitron',sans-serif;font-weight:800;font-size:30px;letter-spacing:3px;background:linear-gradient(92deg,#8fe9df,#b9a6e8,#e0cda0,#8fe9df);background-size:240% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holoShift 9s linear infinite;filter:drop-shadow(0 0 8px rgba(122,242,230,.25))}
#splash .sp-brand span{color:transparent}
#splash .sp-sub{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:4px;color:var(--cyan-soft);opacity:.85}
#splash .sp-bar{width:184px;height:2px;border-radius:2px;background:rgba(122,242,230,.12);overflow:hidden;opacity:0;animation:spRise .5s ease 1.5s forwards}
#splash .sp-bar i{display:block;width:45%;height:100%;border-radius:2px;background:linear-gradient(90deg,transparent,#7af2e6,#b9a6e8,transparent);animation:spSweep 1.1s ease-in-out .2s infinite}
@keyframes spSweep{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
@media (prefers-reduced-motion:reduce){#splash .sp-logo,#splash .sp-text,#splash .sp-bar{animation-duration:.01s;animation-delay:0s}}
/* ===== HUD sci-fi login panel ===== */
.gate-card.gate-wide .gate-right{position:relative;overflow:hidden}
.hud-c{position:absolute;width:16px;height:16px;border:0 solid rgba(122,242,230,.6);pointer-events:none}
.hc-tl{top:10px;left:10px;border-top-width:2px;border-left-width:2px}
.hc-tr{top:10px;right:10px;border-top-width:2px;border-right-width:2px}
.hc-bl{bottom:10px;left:10px;border-bottom-width:2px;border-left-width:2px}
.hc-br{bottom:10px;right:10px;border-bottom-width:2px;border-right-width:2px}
.hud-scan{position:absolute;top:0;left:-45%;width:45%;height:2px;background:linear-gradient(90deg,transparent,rgba(122,242,230,.75),transparent);animation:hudScan 5.5s linear infinite;pointer-events:none}
@keyframes hudScan{0%{left:-45%}60%,100%{left:100%}}
/* ===== Login horizontal · hologram hex ===== */
.gate-card.gate-wide{max-width:860px;width:100%;padding:0;background:transparent;border:none;box-shadow:none;display:flex;flex-wrap:wrap;align-items:stretch;gap:0;overflow:visible}
.gate-card.gate-wide .gate-left{flex:1 1 360px;min-width:300px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 26px;border-radius:24px 0 0 24px;background:radial-gradient(120% 120% at 30% 0%,rgba(180,139,255,.10),transparent 55%),radial-gradient(120% 120% at 70% 100%,rgba(39,230,207,.10),transparent 55%),rgba(8,13,20,.55);backdrop-filter:blur(14px);border:1px solid var(--line-2);border-right:none;overflow:hidden}
.gate-card.gate-wide .gate-left::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(13,19,27,.4) 0 1px,transparent 1px 5px);opacity:.35;pointer-events:none}
.gate-card.gate-wide .gate-right{flex:1 1 320px;min-width:280px;padding:38px 30px 28px;border-radius:0 24px 24px 0;background:rgba(12,18,26,.78);backdrop-filter:blur(14px);border:1px solid var(--line-2);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.gate-rhead{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:700;letter-spacing:.5px;color:var(--txt);margin-bottom:2px}
.hex-scene{position:relative;width:248px;height:248px;perspective:900px;display:grid;place-items:center;margin-bottom:10px}
/* brand logo (transparent cube) — soft float + color halo following logo */
.gate-cube-img{height:160px;width:auto;z-index:3;filter:drop-shadow(0 0 18px rgba(78,192,182,.5)) drop-shadow(0 0 28px rgba(159,140,219,.42)) drop-shadow(0 0 40px rgba(205,174,120,.3));animation:logoFloat 6s ease-in-out infinite;will-change:transform}
@keyframes logoFloat{0%,100%{transform:translateY(-5px) rotate(-1.4deg) scale(1)}50%{transform:translateY(5px) rotate(1.4deg) scale(1.03)}}
.hex-scene::before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle at 42% 36%,rgba(78,192,182,.24),rgba(159,140,219,.17) 46%,rgba(205,174,120,.11) 70%,transparent 78%);filter:blur(10px);z-index:0;pointer-events:none;animation:glowPulse 7s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.65;transform:scale(.95)}50%{opacity:1;transform:scale(1.07)}}
/* asset tokens — soft wall bounce (transform only = GPU, no lag) */
.bounce-field{position:absolute;inset:0;z-index:2;pointer-events:none}
.tok{position:absolute;left:50%;top:50%;margin:-19px 0 0 -19px;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:var(--c);background:rgba(9,14,22,.72);border:1.2px solid var(--c);opacity:.88;box-shadow:0 0 9px -4px var(--c);will-change:transform;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.tok svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
@keyframes driftA{0%{transform:translate(-92px,-66px)}25%{transform:translate(82px,-78px)}50%{transform:translate(94px,70px)}75%{transform:translate(-60px,88px)}100%{transform:translate(-92px,-66px)}}
@keyframes driftB{0%{transform:translate(86px,-70px)}25%{transform:translate(-90px,-50px)}50%{transform:translate(-78px,82px)}75%{transform:translate(70px,60px)}100%{transform:translate(86px,-70px)}}
@keyframes driftC{0%{transform:translate(-40px,90px)}25%{transform:translate(90px,40px)}50%{transform:translate(40px,-88px)}75%{transform:translate(-92px,-30px)}100%{transform:translate(-40px,90px)}}
.tx0{animation-name:driftA;animation-duration:34s}
.tx1{animation-name:driftB;animation-duration:39s;animation-delay:-7s}
.tx2{animation-name:driftC;animation-duration:31s;animation-delay:-12s}
.tx3{animation-name:driftA;animation-duration:43s;animation-delay:-20s;animation-direction:reverse}
.tx4{animation-name:driftB;animation-duration:36s;animation-delay:-4s;animation-direction:reverse}
.tx5{animation-name:driftC;animation-duration:41s;animation-delay:-16s;animation-direction:reverse}
.tx6{animation-name:driftA;animation-duration:38s;animation-delay:-26s}
.tx7{animation-name:driftB;animation-duration:45s;animation-delay:-11s}
/* containment rings */
.orbit-rings{position:absolute;inset:0;transform-style:preserve-3d;z-index:1}
.orbit-rings .ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(122,242,230,.1);box-shadow:0 0 14px rgba(120,150,255,.06) inset}
.orbit-rings .r1{width:170px;height:170px;margin:-85px 0 0 -85px;transform:rotateX(74deg);animation:ringSpin 22s linear infinite}
.orbit-rings .r2{width:228px;height:228px;margin:-114px 0 0 -114px;border-color:rgba(180,139,255,.09);transform:rotateY(70deg);animation:ringSpin 30s linear infinite reverse}
@keyframes ringSpin{to{transform:rotateX(74deg) rotate(360deg)}}
/* neon brand */
.gate-brand.neon{font-size:26px;letter-spacing:2px;background:linear-gradient(92deg,#8fe9df,#b9a6e8,#e0cda0,#8fe9df);background-size:240% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holoShift 9s linear infinite;filter:drop-shadow(0 0 7px rgba(122,242,230,.25))}
.gate-brand.neon span{color:transparent}
.gate-tag.cyber{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:1.5px;color:var(--cyan-soft);opacity:.8;margin-bottom:0}
@media(max-width:760px){
 .gate-card.gate-wide{flex-direction:column;max-width:400px}
 .gate-card.gate-wide .gate-left{border-radius:24px 24px 0 0;border-right:1px solid var(--line-2);border-bottom:none;padding:30px 24px 26px}
 .gate-card.gate-wide .gate-right{border-radius:0 0 24px 24px}
 .hex-scene{width:200px;height:200px}
 .gate-rhead{text-align:center}
 .gate-card.gate-wide .gate-right>.gate-tag{text-align:center!important}
}

.lock.open{display:flex}
.lock .lk-logo{width:64px;height:64px;border-radius:18px;background:var(--holo);background-size:200% 200%;animation:holoShift 6s ease infinite;display:grid;place-items:center;box-shadow:0 0 44px rgba(120,150,255,.45)}
.lock .lk-logo svg{width:32px;height:32px}
.lock h2{font-family:'Orbitron';font-weight:700;font-size:16px;letter-spacing:2px}
.lock p{font-size:12px;color:var(--txt-3)}
.pin-dots{display:flex;gap:14px;margin:6px 0}
.pin-dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-2);transition:.2s}
.pin-dots i.fill{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.keypad{display:grid;grid-template-columns:repeat(3,72px);gap:14px}
.keypad button{height:72px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--txt);font-family:'JetBrains Mono';font-size:22px;cursor:pointer;transition:.15s}
.keypad button:hover{border-color:var(--cyan);background:rgba(39,230,207,.1)}
.keypad button.fn{font-size:14px;color:var(--txt-3)}
@media(max-width:880px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .3s;width:var(--sidebar-w);z-index:46}
  body.mobile-open .sidebar{transform:translateX(0)}
  body.collapsed .sidebar{width:var(--sidebar-w)}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:45;display:none}
  body.mobile-open .scrim{display:block}
  .content{padding:14px;padding-bottom:calc(78px + env(safe-area-inset-bottom))}.hero .balance{font-size:30px}.clock{display:none}
  .bnav{display:flex}
}
/* ===== Bottom navigation (app mode, HP/PWA) ===== */
.bnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(62px + env(safe-area-inset-bottom));padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(9,14,21,.92),rgba(5,8,13,.97));backdrop-filter:blur(18px);border-top:1px solid var(--line);justify-content:space-around;align-items:stretch}
.bnav-item{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:14px;color:var(--txt-3);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .18s,background .18s}
.bnav-item svg{width:21px;height:21px;stroke-width:1.8}
.bnav-item span{font-size:10px;letter-spacing:.3px;font-weight:600}
.bnav-item.active{color:var(--cyan);background:rgba(39,230,207,.09)}
.bnav-item:active{background:rgba(120,150,200,.12)}
/* ===== App Menu page (grid tiles) ===== */
.amenu-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--cyan-soft);opacity:.8;margin:20px 2px 10px}
.amenu-label:first-child{margin-top:2px}
.amenu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}
.amenu-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 6px 13px;border-radius:16px;background:linear-gradient(165deg,rgba(16,24,36,.85),rgba(9,14,22,.9));border:1px solid var(--line-2);color:var(--txt-2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,border-color .2s;position:relative;overflow:hidden}
.amenu-tile::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1.5px;background:linear-gradient(90deg,transparent,rgba(122,242,230,.45),transparent);opacity:0;transition:opacity .2s}
.amenu-tile:active{transform:scale(.95);border-color:rgba(122,242,230,.5)}
.amenu-tile:active::before{opacity:1}
.amenu-tile svg{width:24px;height:24px;stroke-width:1.7;color:var(--cyan)}
.amenu-tile span{font-size:10.5px;font-weight:600;text-align:center;line-height:1.25;color:var(--txt-2)}
/* App mode: no website sidebar/hamburger at all */
@media(max-width:880px){
  .sidebar{display:none!important}
  .scrim{display:none!important}
  .topbar .icon-btn[title="Buka/tutup sidebar"]{display:none!important}
}
/* Tables: horizontal swipe when cut off */
@media(max-width:1366px){
  .card:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .card table{min-width:530px}
}
.scrim{display:none}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:rgba(120,210,255,.18);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:rgba(120,210,255,.32)}
/* Nytherion AI */
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:180;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;background:var(--holo);background-size:200% 200%;animation:holoShift 5s ease infinite;box-shadow:0 8px 30px rgba(120,150,255,.5);display:grid;place-items:center;transition:transform .2s}
.ai-fab:hover{transform:scale(1.08)}
.ai-fab svg{width:28px;height:28px}
.ai-fab::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--cyan);opacity:.5;animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.5);opacity:0}}
.ai-panel{position:fixed;right:22px;bottom:94px;z-index:181;width:380px;max-width:calc(100vw - 28px);height:560px;max-height:calc(100vh - 130px);background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line-2);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:none;flex-direction:column;overflow:hidden;animation:rise .3s}
.ai-panel.open{display:flex}
.ai-head{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--line);background:rgba(120,210,255,.04)}
.ai-logo{width:38px;height:38px;border-radius:11px;background:var(--holo);background-size:200% 200%;animation:holoShift 5s ease infinite;display:grid;place-items:center}.ai-logo svg{width:20px;height:20px}
.ai-name{font-family:'Orbitron';font-weight:700;font-size:13px;letter-spacing:1px;background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-sub{font-size:10.5px;color:var(--txt-3);margin-top:3px;display:flex;align-items:center;gap:6px}
.ai-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.ai-msg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ai-msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--cyan),#15b6a4);color:#04110f;border-bottom-right-radius:4px}
.ai-msg.bot{align-self:flex-start;background:var(--bg-0);border:1px solid var(--line);color:var(--txt);border-bottom-left-radius:4px}
.ai-msg.bot b{color:var(--cyan-soft)}
.ai-typing{align-self:flex-start;color:var(--txt-3);font-size:12px;display:flex;gap:5px;align-items:center;padding:6px 4px}
.ai-typing i{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:blink 1.2s infinite}.ai-typing i:nth-child(2){animation-delay:.2s}.ai-typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.ai-quick{display:flex;gap:7px;padding:0 14px 8px;flex-wrap:wrap}
.ai-quick span{font-size:11px;padding:6px 10px;border-radius:9px;border:1px solid var(--line);color:var(--txt-2);cursor:pointer;white-space:nowrap}
.ai-quick span:hover{border-color:var(--cyan);color:var(--cyan)}
.ai-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);align-items:flex-end}
.ai-input textarea{resize:none;max-height:90px;font-size:13px}
.ai-input button{height:42px;padding:0 14px}
/* AI full page */
.ai-page{display:flex;flex-direction:column;height:calc(100vh - 150px);min-height:520px;background:linear-gradient(180deg,rgba(120,210,255,.04),rgba(180,139,255,.03));border:1px solid var(--line-2);border-radius:20px;overflow:hidden;position:relative}
.ai-page::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 320px at 80% -10%,rgba(180,139,255,.12),transparent 60%),radial-gradient(700px 300px at 0% 110%,rgba(39,230,207,.10),transparent 60%);pointer-events:none}
.ai-page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:rgba(8,12,18,.5);backdrop-filter:blur(6px);position:relative;z-index:1;flex-wrap:wrap}
.ai-page-title{display:flex;align-items:center;gap:12px}
.ai-orb{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;font-size:18px;color:#04110f;background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 20px rgba(120,210,255,.45)}
.ai-page-body{flex:1;overflow-y:auto;padding:24px clamp(16px,6vw,80px);display:flex;flex-direction:column;gap:16px;position:relative;z-index:1}
.ai-page-body .ai-msg{max-width:760px;font-size:14px;padding:14px 18px}
.ai-page-body .ai-msg.bot{align-self:flex-start}.ai-page-body .ai-msg.user{align-self:flex-end}
.ai-page-quick{display:flex;gap:9px;padding:0 clamp(16px,6vw,80px) 10px;flex-wrap:wrap;position:relative;z-index:1}
.ai-page-quick span{font-size:12px;padding:8px 13px;border-radius:11px;border:1px solid var(--line-2);color:var(--txt-2);cursor:pointer;white-space:nowrap;transition:.15s}
.ai-page-quick span:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px rgba(39,230,207,.25)}
.ai-page-input{display:flex;gap:10px;align-items:flex-end;padding:16px clamp(16px,6vw,80px);border-top:1px solid var(--line);background:rgba(8,12,18,.5);position:relative;z-index:1}
.ai-page-input textarea{flex:1;resize:none;max-height:140px;min-height:48px;font-size:14px;padding:14px 16px}
.ai-page-input button{height:48px;padding:0 20px}
@media(max-width:880px){.ai-page{height:calc(100vh - 180px)}}
/* market indicators */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.ind-grid{grid-template-columns:1fr}}
.ind-box{background:var(--bg-0);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.ind-k{font-size:11px;letter-spacing:.5px;color:var(--txt-3);text-transform:uppercase;margin-bottom:8px}
.ind-v{font-size:24px;font-weight:700;font-family:'Orbitron',sans-serif;color:var(--cyan-soft)}
.ind-s{font-size:11px;color:var(--txt-3);margin-top:6px}
.ind-bar{position:relative;height:8px;border-radius:6px;margin-top:10px;background:linear-gradient(90deg,#ff5f76,#f7a93a,#e7c574,#2fe6a8)}
.ind-fill{display:none}
.ind-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #04060a;transform:translate(-50%,-50%);box-shadow:0 0 10px rgba(255,255,255,.7);left:50%}
.ind-foot{font-size:11px;color:var(--txt-3);margin-top:14px;line-height:1.5}
.perf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.perf-item{background:var(--bg-0);border:1px solid var(--line);border-radius:13px;padding:13px 15px}
.perf-k{font-size:11px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px}
.perf-v{font-size:20px;font-weight:700;font-family:'Orbitron',sans-serif}
.perf-s{font-size:11px;color:var(--txt-3);margin-top:5px}
.fire-big{font-size:30px;font-weight:800;font-family:'Orbitron',sans-serif;color:var(--cyan-soft);line-height:1.1}
.fire-sub{font-size:12px;color:var(--txt-2);margin-top:8px;line-height:1.5}
.fire-rows{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.fire-rows>div{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
.fire-rows span{color:var(--txt-3)}.fire-rows b{color:var(--txt-1);font-family:'JetBrains Mono',monospace}
.watch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.watch-card{display:flex;align-items:center;gap:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px}
.watch-logo{width:40px;height:40px;border-radius:11px;background:#0e1620;display:grid;place-items:center;flex-shrink:0;font-size:12px;font-weight:700;color:var(--txt-3);overflow:hidden}
.watch-logo img{width:100%;height:100%;object-fit:cover}
.watch-meta{min-width:0;flex:1}.watch-tk{font-weight:700;font-size:14px}.watch-cat{font-size:11px;color:var(--txt-3)}
.watch-px{text-align:right}.watch-price{font-size:13px;font-weight:600;font-family:'JetBrains Mono',monospace}
.watch-chg{font-size:11px;font-family:'JetBrains Mono',monospace}.watch-chg.up{color:var(--pos)}.watch-chg.down{color:var(--neg)}
.watch-act{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0}
/* news */
.auth-in{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:rgba(47,230,168,.05)}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.news-card{display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.18s;cursor:pointer;text-decoration:none;color:inherit}
.news-card:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.news-thumb{position:relative;height:158px;background:linear-gradient(135deg,#0f1a26,#1b2433 60%,#241b33);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.news-thumb svg{width:38px;height:38px;color:var(--cyan-soft);opacity:.45}
.news-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,12,18,.55))}
.news-tag{position:absolute;left:11px;top:11px;z-index:1;font-size:10px;padding:4px 10px;border-radius:8px;background:rgba(8,12,18,.7);color:var(--cyan-soft);border:1px solid var(--line-2);backdrop-filter:blur(5px);letter-spacing:.3px}
.news-main{min-width:0;flex:1;padding:13px 15px 15px;display:flex;flex-direction:column;gap:9px}
.news-title{font-size:13.5px;font-weight:600;color:var(--txt);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-meta{font-size:11px;color:var(--txt-3);margin-top:auto;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.news-src{color:var(--cyan-soft);font-weight:600}
@media(max-width:880px){.ai-panel{right:10px;left:10px;width:auto;bottom:86px}.news-grid{grid-template-columns:1fr}.news-thumb{height:170px}}