:root{
	--bg:#0e1a1e;--sf:#15262c;--sf2:#1c323a;--ln:#27404a;--ln2:#3a5964;
	--tx:#e9f0ee;--mu:#94aaa8;--br:#f2d544;--on-br:#1a1700;--logo:#f2d544;--end:#f2d544;--p1:#f2d544;--p2:#5cc8ff;--p3:#b69cff;--p4:#94aaa8;
	--win:#4fd1a0;--loss:#ff7a6b;--buy:#4fd1a0;--sell:#ff7a6b;
	--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	--num:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
	color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
	--bg:#eef3f2;--sf:#fff;--sf2:#f3f7f6;--ln:#d3dfdd;--ln2:#a9bdba;
	--tx:#14262b;--mu:#58706e;--br:#f2d544;--on-br:#1a1700;
	--win:#0f9d6e;--loss:#d6453a;--buy:#0f9d6e;--sell:#d6453a;--logo:#14262b;--end:#8a6a00;--p1:#b08900;--p2:#1f86c4;--p3:#7a55d6;--p4:#58706e;color-scheme:light;
}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--tx);line-height:1.6;font-size:16px;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--br);outline-offset:2px;border-radius:4px}
h1{font-size:clamp(2rem,6vw,3.1rem);line-height:1.08;letter-spacing:-.03em;font-weight:800}
h2{font-size:1.35rem;line-height:1.25;letter-spacing:-.01em;margin-bottom:.5rem}
h3{font-size:1.05rem;margin-bottom:.4rem}
small,.small{font-size:.8em}
.mu{color:var(--mu)}
.win{color:var(--win)}.loss{color:var(--loss)}

/* header */
.navbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(16px,calc((100% - 1080px)/2));background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--ln);backdrop-filter:blur(8px)}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--logo)}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{padding:8px 12px;border-radius:10px;font-weight:600;font-size:.95rem;color:var(--mu)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--tx)}
.nav-links a.premi{background:var(--br);color:var(--on-br)}
.nav-links a.premi:hover{filter:brightness(.94)}

/* layout */
.container{width:100%;max-width:1080px;margin:0 auto;padding:28px 16px 8px;flex:1}
.hero{padding:18px 0 26px;max-width:46rem}
.hero p{color:var(--mu);font-size:1.08rem;margin-top:14px}
.sec{margin-top:34px}
.sec>h2{margin-bottom:14px}

/* ticket */
.tickets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}
.tk{background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:16px}
.tk header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sym{font-weight:800;font-size:1.2rem;letter-spacing:-.01em}
a.sym:hover{color:var(--br)}
.pill{font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid currentColor}
.pill.buy{color:var(--buy)}.pill.sell{color:var(--sell)}
.st{margin-left:auto;font-family:var(--num);font-weight:700;font-size:.95rem;display:inline-flex;align-items:center;gap:7px}
.st.win{color:var(--win)}.st.loss{color:var(--loss)}.st.be,.st.done{color:var(--mu)}.st.end{color:var(--end);font-family:var(--sans);font-size:.88rem}.st.live{color:var(--win);font-family:var(--sans)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--win);animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--win) 55%,transparent)}80%,100%{box-shadow:0 0 0 8px transparent}}
.tk footer{display:flex;justify-content:space-between;gap:10px;white-space:nowrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--ln);color:var(--mu);font-size:.82rem}

/* price ladder */
.lad{position:relative;height:40px;margin:22px 14px 10px}
.lad::before{content:"";position:absolute;left:0;right:0;top:19px;height:4px;border-radius:2px;background:var(--ln)}
.lad i{position:absolute;font-style:normal}
.zr,.zw{top:19px;height:4px}
.zr{background:color-mix(in srgb,var(--loss) 60%,transparent)}
.zw{background:color-mix(in srgb,var(--win) 45%,transparent)}
.tick{top:14px;width:2px;height:14px;transform:translateX(-1px);background:var(--ln2);border-radius:1px}
.tick.hit{background:var(--win)}
.mk{top:10px;width:2px;height:22px;transform:translateX(-1px);background:var(--tx);border-radius:1px}
.mk b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:.68rem;font-weight:700;color:var(--mu);white-space:nowrap;padding-bottom:2px}
.mk.sl{background:var(--loss)}
.mk.sl2{background:var(--loss);opacity:.45;height:14px;top:14px}
.mk.ex{top:12px;width:14px;height:14px;transform:translateX(-7px) rotate(45deg) scale(.72);background:var(--br);border-radius:3px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nums dt{font-size:.74rem;color:var(--mu)}
.nums dd{font-family:var(--num);font-weight:600;font-size:.92rem;font-variant-numeric:tabular-nums}
.nums small{display:block;color:var(--mu);font-weight:400;font-size:.72rem;white-space:nowrap}

/* stats + chart */
.stats{display:flex;flex-wrap:wrap;gap:12px 40px;margin:6px 0 18px}
.stats b{display:block;font-size:1.9rem;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats span{font-size:.85rem;color:var(--mu)}
.chartbox{background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:12px}
.chart{display:block;width:100%;height:150px}
.chart .zero{stroke:var(--ln2);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.chart .w{fill:var(--win)}.chart .l{fill:var(--loss)}
.chart .line{fill:none;stroke:var(--br);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.chart .area{fill:color-mix(in srgb,var(--br) 14%,transparent)}

/* ledger */
.tzn{font-size:.82rem;color:var(--mu);margin-bottom:8px}
.ledger{background:var(--sf);border:1px solid var(--ln);border-radius:12px;overflow:hidden}
.row+.row{border-top:1px solid var(--ln)}
.row summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;font-size:.92rem}
.row summary::-webkit-details-marker{display:none}
.row summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--mu);border-bottom:2px solid var(--mu);transform:rotate(45deg);margin:-3px 2px 0 4px;transition:transform .15s}
.row[open] summary::after{transform:rotate(-135deg);margin:3px 2px 0 4px}
.row summary:hover{background:var(--sf2)}
.row summary time{color:var(--mu);min-width:6.2rem;font-size:.85rem}
.sym2{font-weight:700}
.pk,.pk2{color:var(--mu);font-size:.8rem}
.pk{margin-top:2px}
.rb{padding:2px 14px 14px;max-width:420px}
.rb .mu{font-size:.82rem;margin-top:10px}
.empty{padding:26px 14px;color:var(--mu);text-align:center}
.more{display:block;margin:16px auto 0}

/* buttons + cta */
.btn{display:inline-block;padding:11px 20px;font:inherit;font-weight:700;background:var(--br);color:var(--on-br);border:1px solid var(--br);border-radius:10px;cursor:pointer}
.btn:hover{filter:brightness(.94)}
.btn.ghost{background:transparent;color:var(--tx);border-color:var(--ln2)}
.btn.ghost:hover{border-color:var(--tx);filter:none}
.cta{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;margin-top:40px;padding:22px;border:1px solid var(--ln);border-left:4px solid var(--br);border-radius:12px;background:var(--sf)}
.cta>div:first-child{flex:1 1 360px;max-width:42rem}
.cta p{color:var(--mu)}
.btns{display:flex;flex-wrap:wrap;gap:10px}

/* vip */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin:22px 0 30px}
.plan{background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:6px}
.plan.rec{border-color:var(--br);box-shadow:0 0 0 1px var(--br)}
.plan .tag{font-size:.78rem;font-weight:700;color:var(--br)}
.plan .price{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.plan .price sup{font-size:1.1rem;vertical-align:top;margin-right:2px;color:var(--mu)}
.plan .btn{margin-top:auto;text-align:center}
.prose{max-width:44rem}
.prose p{margin-bottom:12px;color:var(--mu)}
.prose strong{color:var(--tx)}

/* disclaimer + footer */
.discl-section{margin-top:44px;padding-top:18px;border-top:1px solid var(--ln);max-width:62rem;color:var(--mu);font-size:.8rem;line-height:1.55}
.discl-section h3{font-size:.9rem;color:var(--tx)}
.discl-section p{text-align:left}
.footer{margin-top:44px;padding:22px 16px;border-top:1px solid var(--ln);color:var(--mu);font-size:.85rem}
.footer div{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
.footer nav{display:flex;gap:16px;flex-wrap:wrap}
.footer a:hover{color:var(--tx)}

@media (max-width:520px){
	.container{padding-top:18px}
	.nav-links a{padding:8px 9px}
	.row summary{flex-wrap:wrap;row-gap:4px}
	.row summary time{min-width:0;flex-basis:100%}
	.st{margin-left:auto}
	.cta{padding:18px}
}
@media (prefers-reduced-motion:reduce){.dot{animation:none}.row summary::after{transition:none}}

/* fallback: header lama dari DB (ul/li) sebelum update_template.sql dijalankan */
.navbar ul{list-style:none;display:flex;align-items:center;gap:6px;margin:0;padding:0}
.navbar li{list-style:none}
.navbar li a{display:inline-block;padding:8px 12px;border-radius:10px;font-weight:600;font-size:.95rem;color:var(--mu)}
.navbar li a:hover{color:var(--tx)}
.navbar li a.premi{background:var(--br);color:var(--on-br)}

/* SL dari awal: kartu dan baris kemerahan */
.tk.sl0{background:color-mix(in srgb,var(--loss) 13%,var(--sf));border-color:color-mix(in srgb,var(--loss) 45%,var(--ln))}
.tk.sl0 footer{border-top-color:color-mix(in srgb,var(--loss) 25%,var(--ln))}
.row.sl0{background:color-mix(in srgb,var(--loss) 12%,var(--sf))}
.row.sl0 summary:hover{background:color-mix(in srgb,var(--loss) 14%,var(--sf))}
.row.sl0+.row.sl0{border-top-color:color-mix(in srgb,var(--loss) 22%,var(--ln))}

/* analitik */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px;align-items:start}
.panel{background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:16px}
.panel h3{margin-bottom:2px}
.tscroll{overflow-x:auto}
.radarbox{max-width:420px;margin:6px auto 0}
.radar{display:block;width:100%;height:auto}
.radar .grid{fill:none;stroke:var(--ln);stroke-width:1}
.radar .axis{stroke:var(--ln);stroke-width:1}
.radar text{fill:var(--mu);font-size:11px;font-family:var(--sans)}
.radar .ser{stroke-width:2;stroke-linejoin:round}
.radar .p1,.sw.p1{--c:var(--p1)}.radar .p2,.sw.p2{--c:var(--p2)}.radar .p3,.sw.p3{--c:var(--p3)}.radar .p4,.sw.p4{--c:var(--p4)}
.radar .ser{stroke:var(--c);fill:color-mix(in srgb,var(--c) 12%,transparent)}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--c);margin-right:8px}
.legend{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:10px}
.legend th,.legend td{padding:7px 8px;text-align:right;border-top:1px solid var(--ln);white-space:nowrap;font-variant-numeric:tabular-nums}
.legend th:first-child{text-align:left;font-weight:600}
.legend thead th,.legend thead td{border-top:0;color:var(--mu);font-weight:400;font-size:.78rem}
.legend small{color:var(--mu);font-size:.72rem}
.funnel{margin-top:12px;display:grid;gap:9px}
.fr{display:grid;grid-template-columns:96px 1fr 44px 30px;gap:10px;align-items:center;font-size:.85rem}
.fr span{color:var(--mu)}
.fr b{text-align:right;font-variant-numeric:tabular-nums}
.fr small{color:var(--mu);text-align:right}
.bar{height:8px;border-radius:4px;background:var(--sf2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--win)}
.bar.neg i{background:var(--loss)}
.symtab{margin-top:10px;display:grid;gap:10px}
.sr{display:grid;grid-template-columns:64px 1fr auto;gap:5px 10px;align-items:center;font-size:.85rem}
.sr .mu{font-size:.78rem}
.sr em{font-style:normal;font-family:var(--num);font-weight:700}
.sr .bar{grid-column:1/4}
@media (max-width:520px){.fr{grid-template-columns:84px 1fr 40px 26px;gap:8px}}

@media (max-width:520px){.legend th,.legend td{padding:7px 5px;font-size:.78rem}.fr{grid-template-columns:44px 1fr 40px 28px}}

/* key metrics */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;margin:6px 0 16px}
.kpi{background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:14px 16px}
.kpi span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.kpi b{display:block;margin-top:8px;font-family:var(--num);font-size:1.7rem;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* kalender hasil per tanggal */
#cal{transition:opacity .15s}
#cal.busy{opacity:.55;pointer-events:none}
.calbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-bottom:14px}
.calnav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.calnav select{font:inherit;font-size:.9rem;font-weight:600;color:var(--tx);background:var(--sf2);border:1px solid var(--ln2);border-radius:10px;padding:8px 10px}
.btn.sm{padding:7px 12px;font-size:.9rem;border-radius:10px}
.calsum{display:flex;flex-wrap:wrap;gap:8px}
.calsum span{background:var(--sf2);border:1px solid var(--ln);border-radius:999px;padding:5px 12px;font-size:.78rem;color:var(--mu)}
.calsum b{margin-left:6px;color:var(--tx);font-family:var(--num)}
.calsum b.win{color:var(--win)}.calsum b.loss{color:var(--loss)}
.calhead,.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calhead span{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);text-align:center;padding-bottom:6px}
.cd{min-height:78px;padding:8px 9px;border-radius:10px;background:var(--sf2);border:1px solid var(--ln);display:flex;flex-direction:column;gap:2px;min-width:0}
.cd.out{background:transparent;border-color:transparent}
.cd .dn{font-size:.78rem;font-weight:700;color:var(--mu)}
.cd b{font-family:var(--num);font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cd .n{font-size:.7rem;color:var(--mu)}
.cd.today{outline:2px solid var(--br);outline-offset:-2px}
.cd.w1{background:color-mix(in srgb,var(--win) 14%,var(--sf2));border-color:color-mix(in srgb,var(--win) 35%,var(--ln))}
.cd.w2{background:color-mix(in srgb,var(--win) 26%,var(--sf2));border-color:color-mix(in srgb,var(--win) 50%,var(--ln))}
.cd.w3{background:color-mix(in srgb,var(--win) 40%,var(--sf2));border-color:color-mix(in srgb,var(--win) 65%,var(--ln))}
.cd.l1{background:color-mix(in srgb,var(--loss) 14%,var(--sf2));border-color:color-mix(in srgb,var(--loss) 35%,var(--ln))}
.cd.l2{background:color-mix(in srgb,var(--loss) 26%,var(--sf2));border-color:color-mix(in srgb,var(--loss) 50%,var(--ln))}
.cd.l3{background:color-mix(in srgb,var(--loss) 40%,var(--sf2));border-color:color-mix(in srgb,var(--loss) 65%,var(--ln))}
.cd.w1 b,.cd.w2 b,.cd.w3 b{color:var(--win)}
.cd.l1 b,.cd.l2 b,.cd.l3 b{color:var(--loss)}
.calnote{margin-top:12px}
@media (max-width:620px){
	.calhead,.calgrid{gap:3px}
	.cd{min-height:54px;padding:5px 4px;border-radius:8px;align-items:center;text-align:center}
	.cd .n{display:none}
	.cd b{font-size:.62rem}
	.cd .dn{font-size:.7rem}
	.calnav select{padding:7px 6px;font-size:.82rem}
	.kpi b{font-size:1.35rem}
}
@media (max-width:520px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kpi{padding:12px}}

.caltitle{font-size:1.1rem;margin:0}

/* filter halaman history */
.filterbar{margin:0 0 22px}
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:12px 14px}
.filters label{display:flex;flex-direction:column;gap:4px;min-width:0}
.filters label span{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.filters select{font:inherit;font-size:.92rem;font-weight:600;color:var(--tx);background:var(--sf2);border:1px solid var(--ln2);border-radius:10px;padding:8px 10px;min-width:9.5rem}
.filters select:disabled{opacity:.5}
.filters .btn{align-self:flex-end}
.showing{margin-top:10px}.showing b{color:var(--tx)}
.caltitle{font-weight:700;font-size:1rem;padding:0 6px}
@media (max-width:520px){.filters{gap:8px}.filters label{flex:1 1 calc(50% - 8px)}.filters select{min-width:0;width:100%}}