:root{--bg:#07070d;--card:#10101c;--line:#23233a;--text:#eef0ff;--mut:#8a8fb0;--a:#00f0ff;--b:#ff2bd6;--g:#b6ff3c;--side:270px}
*{box-sizing:border-box;margin:0}
body{background:radial-gradient(circle at 80% -10%,#1b0f3a 0,transparent 50%),radial-gradient(circle at 0 20%,#06303a 0,transparent 40%),var(--bg);color:var(--text);font:15px/1.5 system-ui,Segoe UI,sans-serif;min-height:100vh}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}
#sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);background:#0b0b15;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;z-index:20;transition:transform .25s;overflow:auto}
.brand{display:flex;gap:10px;align-items:center;margin-bottom:18px}.brand small{display:block;font-size:11px;color:var(--mut)}
.brand b{font-size:18px;letter-spacing:3px;text-shadow:0 0 12px var(--a)}
.logo{width:40px;height:40px;flex:none;border-radius:10px;background:#07070d url(/logo.jpg) no-repeat;background-size:232.7% auto;background-position:56.5% 32.5%;box-shadow:0 0 18px #00f0ff88;border:1px solid #00f0ff55}
.x{display:none;margin-left:auto;background:none;border:0;cursor:pointer;color:var(--mut)}
#menu{display:grid;gap:4px;flex:1}
#menu a{display:flex;gap:12px;padding:10px 12px;border-radius:10px;color:var(--mut);border-left:3px solid transparent}
#menu a:hover{background:#15152a;color:var(--text)}
#menu a.active{background:#15152a;color:var(--text);border-left-color:var(--a);box-shadow:inset 0 0 20px #00f0ff14}
.credit-box{border:1px solid var(--line);border-radius:14px;padding:14px;margin:14px 0;display:grid;gap:10px;background:#10101c}
.credit-box>div:first-child{display:flex;justify-content:space-between;color:var(--mut)}.credit-box b{color:var(--text)}
.meter{height:6px;background:#1c1c2e;border-radius:9px;overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--a),var(--b))}
.logout{background:none;border:0;color:var(--mut);text-align:left;padding:10px 12px;cursor:pointer}.logout:hover{color:var(--b)}
.shell{margin-left:var(--side)}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#07070dcc;backdrop-filter:blur(12px);z-index:5}
#burger{display:none;background:#15152a;border:1px solid var(--line);border-radius:10px;width:40px;height:40px;cursor:pointer;font-size:18px}
.ttl small{display:block;font-size:10px;letter-spacing:2px;color:var(--mut)}.ttl b{font-size:17px}
.credits-pill{margin-left:auto;border:1px solid var(--a);color:var(--a);padding:6px 14px;border-radius:99px;box-shadow:0 0 12px #00f0ff44}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--a),var(--b));color:#000;font-weight:800}
.scrim{display:none;position:fixed;inset:0;background:#000a;z-index:15}
main{max-width:980px;margin:auto;padding:28px 20px 60px;display:grid;gap:28px}
.eyebrow{color:var(--g);font-size:12px;letter-spacing:2px}
h1{font-size:clamp(40px,8vw,76px);letter-spacing:2px;background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 18px #00f0ff55)}
h2{font-size:19px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
h3{margin-bottom:6px}
.sub,.mut{color:var(--mut)}
.stats{display:flex;gap:36px;margin-top:16px;flex-wrap:wrap}.stats b{font-size:30px;display:block}.stats small{color:var(--mut);letter-spacing:2px;font-size:11px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 0 40px #ff2bd611}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{border:1px solid var(--line);background:#15152a;padding:7px 14px;border-radius:99px;cursor:pointer;color:var(--mut)}
.chip:hover,.chip.on{border-color:var(--a);color:var(--a)}
form,.stack{display:grid;gap:14px}label{display:grid;gap:6px;color:var(--mut);font-size:13px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
select,textarea,input{background:#0a0a14;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;width:100%}
select:focus,textarea:focus,input:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 2px #00f0ff33}
.cta{display:block;text-align:center;background:linear-gradient(90deg,var(--a),var(--b));color:#000;font-weight:800;border:0;padding:14px;border-radius:12px;cursor:pointer;letter-spacing:1px}
.cta:hover{filter:brightness(1.15)}.cta.small{padding:9px;font-size:13px}
.ghost{background:#15152a;border:1px solid var(--line);padding:8px 14px;border-radius:10px;cursor:pointer}.ghost:hover{border-color:var(--a)}
.danger:hover{border-color:var(--b);color:var(--b)}
.live{font-size:11px;color:var(--g);letter-spacing:1px}.live em{font-style:normal;background:#1c1c2e;padding:2px 8px;border-radius:6px;color:var(--mut);margin-left:6px}
.jobs{display:grid;gap:10px}
.job{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.job .top{display:flex;justify-content:space-between;font-size:13px;gap:8px}.job small{color:var(--mut)}
.bar{height:6px;background:#1c1c2e;border-radius:9px;margin-top:8px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a),var(--b));transition:width .3s}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.grid.p{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.res{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.res canvas{width:100%;display:block;aspect-ratio:16/10;background:#000}
.res .meta{padding:10px;font-size:12px;color:var(--mut)}.res .meta b{color:var(--text);display:block;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res .meta a,.res .meta button{color:var(--a);background:none;border:0;cursor:pointer;margin-right:10px;padding:0}
.board{list-style:none;padding:0;display:grid;gap:8px;counter-reset:r}
.board li{counter-increment:r;display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);padding:10px 14px;border-radius:12px}
.board li::before{content:"#" counter(r);color:var(--b);font-weight:800;width:28px}.board li span{margin-left:auto;color:var(--a)}
.empty{color:var(--mut);font-size:14px}
.price{display:grid;gap:6px}.price .big{font-size:28px;font-weight:800;color:var(--a)}.price.hot{border-color:var(--b)}
code,pre{background:#0a0a14;border:1px solid var(--line);border-radius:8px;font:13px/1.5 Consolas,monospace;color:var(--g)}
code{padding:2px 6px}pre{padding:14px;overflow:auto;white-space:pre}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line)}th{color:var(--mut);font-weight:500}
.switch{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.switch input{width:auto}
#toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,80px);background:var(--card);border:1px solid var(--a);padding:10px 18px;border-radius:12px;transition:transform .25s;z-index:30;box-shadow:0 0 20px #00f0ff44}
#toast.show{transform:translate(-50%,0)}
@media(max-width:860px){
 #sidebar{transform:translateX(-100%)}body.open #sidebar{transform:none}body.open .scrim{display:block}
 .shell{margin-left:0}#burger{display:block}.x{display:block}
}

#auth{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;background:radial-gradient(circle at 15% 10%,#1b0f3a 0,transparent 55%),radial-gradient(circle at 90% 90%,#06303a 0,transparent 45%),var(--bg);padding:40px 6vw;overflow:auto}
#auth[hidden]{display:none}
.auth-hero{display:grid;gap:18px;max-width:560px}.auth-hero h1{font-size:clamp(30px,4.2vw,52px);line-height:1.1;letter-spacing:0}
.feats{list-style:none;padding:0;display:grid;gap:8px;color:var(--mut)}.feats li{padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:#10101c99;width:fit-content}
.auth-card{width:100%;max-width:400px;justify-self:center;display:grid;gap:14px;padding:26px;box-shadow:0 0 60px #00f0ff22}
.auth-card h2{display:block}
.pw{display:flex;gap:0;position:relative}.pw input{padding-right:44px}.pw button{position:absolute;right:4px;top:4px;bottom:4px;width:36px;background:none;border:0;cursor:pointer;opacity:.7}
.swap{text-align:center;font-size:13px}.swap a{color:var(--a)}
@media(max-width:820px){#auth{grid-template-columns:1fr;gap:24px;padding:24px 18px;align-items:start}.auth-hero h1{font-size:28px}.feats{display:none}}
.err{color:var(--b);font-size:13px;min-height:1em}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;border:1px solid var(--line);color:var(--mut)}
.badge.ok{color:var(--g);border-color:var(--g)}.badge.bad{color:var(--b);border-color:var(--b)}.badge.wait{color:#ffd23c;border-color:#ffd23c}
.sep{color:var(--mut);font-size:11px;letter-spacing:2px;padding:10px 12px 2px}
.tblwrap{overflow:auto}.tr-link{cursor:pointer}.tr-link:hover{background:#15152a}
.toolbar{display:flex;gap:10px;flex-wrap:wrap}.toolbar>*{flex:1;min-width:140px}.toolbar .ghost{flex:0}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}.kpi .card b{font-size:26px;display:block}.kpi small{color:var(--mut)}
[hidden]{display:none!important}
.res img,.res video{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;background:#000}
.res .audio{padding:18px 10px;background:linear-gradient(135deg,#1a0b3a,#06303a)}.res audio{width:100%}
.fail{padding:18px 12px;color:var(--b);font-size:13px;aspect-ratio:16/10;overflow:auto;background:#1a0b14}.fail small{color:var(--mut)}
.drop{border:1px dashed var(--line);border-radius:12px;padding:12px;display:grid;gap:8px;background:#0a0a14}
.drop input[type=file]{padding:8px}.thumbs{display:flex;gap:8px;flex-wrap:wrap}.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.res .thumb{position:relative;cursor:zoom-in;aspect-ratio:16/10;background:#000;overflow:hidden}
.res .thumb img,.res .thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.res .play{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:#fff;background:#0004;text-shadow:0 0 12px #000}
.res canvas{cursor:zoom-in}.res .audio{position:relative}.res .wave{display:block;font-size:28px;margin-bottom:6px}
.res .meta .pv{color:var(--g)}
#lightbox{position:fixed;inset:0;z-index:60;background:#000d;display:grid;place-items:center;padding:16px;backdrop-filter:blur(6px)}
.pv-box{position:relative;max-width:min(96vw,1100px);width:100%;max-height:94vh;display:grid;grid-template-rows:1fr auto;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 0 60px #00f0ff33}
.pv-media{display:grid;place-items:center;min-height:0;overflow:hidden;border-radius:10px;background:#000}
.pv-media img,.pv-media video{max-width:100%;max-height:72vh;display:block}
.pv-audio{display:grid;gap:14px;place-items:center;padding:40px 20px;width:100%;background:linear-gradient(135deg,#1a0b3a,#06303a)}.pv-audio span{font-size:64px}.pv-audio audio{width:min(100%,520px)}
.pv-info{display:grid;gap:4px}.pv-info b{overflow-wrap:anywhere;max-height:4.5em;overflow:auto}.pv-info small{color:var(--mut)}.pv-info .cta{display:inline-block;padding:9px 22px;margin-top:4px}
.pv-x{position:absolute;top:-14px;right:-8px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;z-index:2}
.pv-nav{position:absolute;top:40%;width:40px;height:56px;border:0;border-radius:10px;background:#000a;color:#fff;font-size:30px;cursor:pointer;z-index:2}.pv-nav.prev{left:6px}.pv-nav.next{right:6px}
.pay{border-color:var(--g);box-shadow:0 0 40px #b6ff3c1a}
.pay-amount{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#0a0a14;border:1px dashed var(--g);border-radius:12px;padding:14px 16px}
.pay-amount small{color:var(--mut)}.pay-amount b{font-size:30px;color:var(--g);letter-spacing:1px}.pay-amount .ghost{margin-left:auto}
.qris{display:grid;gap:12px;justify-items:center}
.qris img{width:min(100%,520px);height:auto;border-radius:14px;background:#fff;cursor:zoom-in;box-shadow:0 0 30px #00f0ff33}
.qris-act{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.qris-act .cta{display:inline-block;padding:10px 22px}.qris-act .ghost{display:inline-block}
.steps{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--mut)}.steps b{color:var(--text)}
.proof input{padding:8px}
.pv-media.zoom{overflow:auto;place-items:start center;max-height:80vh;background:#fff}.pv-media.zoom img{max-width:100%;max-height:none;width:min(100%,760px)}
/* Kotak kode QR: memotong area QR dari qris.jpg (1136x1598; QR sekitar x265-875, y530-1140) */
.qr-crop{width:min(100%,460px);aspect-ratio:1;background:#fff var(--qris) no-repeat;background-size:186.2% auto;background-position:50.4% 53.6%;border-radius:14px;cursor:zoom-in;box-shadow:0 0 0 6px #fff,0 0 40px #00f0ff44;image-rendering:auto}
.qr-crop.big{width:min(88vw,74vh,640px);cursor:default;box-shadow:0 0 0 8px #fff}
.qr-title{display:grid;justify-items:center;text-align:center}.qr-title b{font-size:20px}.qr-title small{color:var(--mut)}
.qrbox{place-items:center;text-align:center;background:#fff;color:#111;padding:20px}.qrbox .pv-info small,.qrbox .qr-title small{color:#555}.qrbox .pv-info b{color:#111}
.guide{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#0a0a14}.guide summary{cursor:pointer;font-weight:700}.guide .steps{margin-top:10px}
.qrbox .pv-x{top:8px;right:8px;background:#111;color:#fff;border-color:#111}
.hero-logo{width:min(100%,300px);height:auto;aspect-ratio:1;border-radius:20px;object-fit:cover;box-shadow:0 0 50px #00f0ff44,0 0 0 1px #00f0ff44}
@media(max-width:820px){.hero-logo{width:min(70%,240px);justify-self:center}}