:root{
  --bg:#0c0a1d; --bg2:#14102b; --card:#1a1636; --line:#2f2a5e; --ink:#fff8e7; --mute:#a9a3c9;
  --gold:#f6c453; --gold-d:#b8841f; --ok:#3ddc84; --bad:#ff6b5e; --accent:#6b4cff;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--font)}
body{min-height:100vh;background:radial-gradient(900px 500px at 90% -10%,rgba(107,76,255,.25),transparent 60%),var(--bg)}
a{color:var(--gold)}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:6px}

header.top{display:flex;align-items:center;gap:18px;padding:12px 20px;border-bottom:1px solid var(--line);background:rgba(12,10,29,.8);position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}
.brand{font-weight:800;font-size:20px;letter-spacing:.3px;color:var(--gold);text-decoration:none}
nav.menu{display:flex;gap:4px;flex:1;flex-wrap:wrap}
nav.menu a{color:var(--mute);text-decoration:none;padding:6px 12px;border-radius:8px}
nav.menu a:hover,nav.menu a.on{color:var(--ink);background:rgba(255,255,255,.08)}
.who{color:var(--mute);font-size:14px;display:flex;align-items:center;gap:10px}

main{max-width:1040px;margin:0 auto;padding:24px 16px 80px}
h1{font-size:26px;margin:0 0 4px}
h2{font-size:19px;margin:30px 0 12px}
h3{font-size:16px;margin:0 0 8px}
p.sub{color:var(--mute);margin:0 0 18px}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.stack>*+*{margin-top:12px}
.hint{color:var(--mute);font-size:14px}

label{display:block;font-size:13px;color:var(--mute);margin-bottom:4px}
input,select,textarea{width:100%;background:#0e0b22;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit}
input[type=color]{padding:2px;height:40px;width:56px}
input[type=checkbox]{width:auto;accent-color:var(--gold)}
textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.45;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.btn{background:var(--gold);color:#2b1a00;border:0;border-radius:9px;padding:9px 16px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.g{background:#2a2655;color:var(--ink);border:1px solid var(--line)}
.btn.d{background:#4a1f2a;color:#ffd6d1;border:1px solid #7a3340}
.btn.s{padding:5px 10px;font-size:14px}

.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:700;background:rgba(246,196,83,.18);color:var(--gold);border:1px solid rgba(246,196,83,.5)}
.badge.pro{background:rgba(107,76,255,.25);color:#cfc4ff;border-color:rgba(107,76,255,.7)}
.badge.off{background:rgba(255,107,94,.15);color:var(--bad);border-color:rgba(255,107,94,.5)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#666;margin-right:6px}
.dot.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0;flex-wrap:wrap}
.tabs a{padding:9px 16px;color:var(--mute);text-decoration:none;border-bottom:3px solid transparent}
.tabs a.on{color:var(--ink);border-color:var(--gold)}

table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--mute);font-weight:600;font-size:13px}
.scroll{overflow-x:auto}

.crow{display:grid;grid-template-columns:30px 22px 1.1fr 56px 1.3fr 1.5fr;gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line)}
.crow .n{font-weight:800;color:var(--gold);text-align:center;padding-bottom:9px}
.crow .tg{padding-bottom:10px}
@media(max-width:760px){.crow{grid-template-columns:28px 20px 1fr 56px}.crow .w{grid-column:1 / -1}}

.preview{width:270px;height:480px;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:#000;position:relative}
.preview iframe{position:absolute;left:0;top:0;width:1080px;height:1920px;border:0;transform:scale(.25);transform-origin:0 0}
.split{display:grid;grid-template-columns:1fr 290px;gap:18px;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}

.note{background:rgba(246,196,83,.1);border:1px solid rgba(246,196,83,.4);border-radius:10px;padding:10px 14px;font-size:14px}
.note.bad{background:rgba(255,107,94,.1);border-color:rgba(255,107,94,.5)}
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-top:14px}
summary{cursor:pointer;font-weight:700}
pre{background:#0e0b22;border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;font-size:13px}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#241f4d;border:1px solid var(--line);padding:10px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20;max-width:90vw}
#toast.show{opacity:1}
#toast.bad{border-color:var(--bad);color:#ffd6d1}

.authbox{max-width:400px;margin:12vh auto 0;padding:0 16px}
.authbox .card{padding:24px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat b{display:block;font-size:28px;line-height:1.1}
.stat span{color:var(--mute);font-size:13px}

/* ───── paket, pemakaian, tema ───── */
.btn.wa{background:#25d366;color:#052e16}
.meter{height:10px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),#ff8a4c);min-width:4px}
.meter.full i{background:linear-gradient(90deg,#ff8a4c,var(--bad))}
.banner{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 18px;border-radius:14px;border:1px solid rgba(107,76,255,.65);
  background:linear-gradient(120deg,rgba(107,76,255,.28),rgba(246,196,83,.12))}
.banner .hint{margin-top:2px;max-width:560px}
.plans{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.plancard.cur{border-color:var(--gold);box-shadow:0 0 0 1px rgba(246,196,83,.4)}
.plancard.pro{border-color:rgba(107,76,255,.8)}
.plancard.pro.cur{border-color:var(--gold)}
.plancard .big{font-size:40px;font-weight:800;line-height:1}
.plancard ul{list-style:none;margin:0;padding:0}
.plancard li{position:relative;padding:5px 0 5px 26px}
.plancard li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
ol.steps{margin:0;padding-left:20px}
ol.steps li{padding:3px 0}

.themes{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.themes.compact{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
button.theme{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-start;border:2px solid var(--line);border-radius:12px;padding:8px;background:#0e0b22;text-align:left}
button.theme:hover{border-color:#4a43a0}
button.theme:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button.theme[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px rgba(246,196,83,.3)}
button.theme .sw{position:relative;display:block;height:64px;border-radius:8px;overflow:hidden}
.themes.compact button.theme .sw{height:40px}
button.theme .sw i{position:absolute;left:10px;bottom:10px;width:42%;height:8px;border-radius:6px}
button.theme .nm{display:block;margin-top:7px;font-weight:700;font-size:15px}
button.theme[aria-pressed="true"] .nm::after{content:" · aktif";color:var(--gold);font-weight:600;font-size:13px}
button.theme .ds{display:block;color:var(--mute);font-size:12.5px;line-height:1.35;margin-top:2px}