/* BedAbed Pay — gelap + lime. Satu file, tanpa build. */
:root{
  --bg:#0B0C0C;--panel:#121414;--panel2:#0F1211;--hover:var(--hover);--rowhover:var(--rowhover);--grid:var(--grid);
  --line:#232727;--line2:#2E3333;--line3:#3A4140;--sep:var(--sep);
  --text:#F2F4F3;--soft:#C9CFCD;--muted:#9AA3A0;--dim:#8E9794;--faint:#7D8683;
  --lime:#C8F031;--lime-hi:#E2FF7A;--lime-bg:#10140B;--lime-ink:#C8F031;--on-lime:#0B0C0C;
  --ok-bg:var(--ok-bg);--ok-line:var(--ok-line);--ok-bg2:var(--ok-bg2);
  --warn:#FFD45C;--warn-bg:#17140A;--warn-bg2:var(--warn-bg2);--warn-line:#5A4A12;--warn-text:#F2E3B0;
  --bad:#FF6B5E;--bad-hi:#FF8A7D;--bad-bg:#1A0D0B;--bad-bg2:var(--bad-bg2);--bad-line:#6B2620;
  --glow:var(--glow);--glow-soft:var(--glow-soft);--dots:var(--dots);
  --glass:rgba(20,24,23,.78);--paysheet:var(--paysheet);
  --blue:#4DA3FF;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
/* Tema terang: dipilih lewat tombol (data-theme="light") atau mengikuti sistem bila belum pernah dipilih. */
:root[data-theme="light"]{
  --bg:#F4F6F2;--panel:#FFFFFF;--panel2:#FBFCF8;--hover:#EEF1EA;--rowhover:#F6F8F3;--grid:#ECEFE8;
  --line:#E1E5DE;--line2:#D2D8CE;--line3:#C3CABE;--sep:#A9B0A6;
  --text:#101412;--soft:#363D3A;--muted:#58615D;--dim:#69726E;--faint:#79817D;
  --lime:#C8F031;--lime-hi:#B5DE1F;--lime-bg:#F3FBD9;--lime-ink:#4A6A00;--on-lime:#0B0C0C;
  --ok-bg:#EEF8D2;--ok-line:#B8D96A;--ok-bg2:#F3FBDF;
  --warn:#8A6200;--warn-bg:#FFF8E1;--warn-bg2:#FFF1C2;--warn-line:#EBCB6E;--warn-text:#5C4300;
  --bad:#D93B2E;--bad-hi:#B42318;--bad-bg:#FFF1EF;--bad-bg2:#FFE4E0;--bad-line:#F2B1A9;
  --glow:rgba(168,214,40,.38);--glow-soft:rgba(168,214,40,.22);--dots:rgba(16,20,18,.07);
  --glass:rgba(255,255,255,.82);--paysheet:rgba(255,255,255,.88);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45}
a{color:var(--lime-ink)}a:hover{color:var(--lime-ink);text-decoration-thickness:2px}
h1,h2,h3{margin:0;letter-spacing:-.4px;font-weight:800}
h1{font-size:28px;letter-spacing:-.8px}h2{font-size:20px}h3{font-size:16px}
p{margin:0}
code,.mono{font-family:var(--mono);font-size:.92em}
.muted{color:var(--muted)}.dim{color:var(--dim)}.soft{color:var(--soft)}.lime{color:var(--lime-ink)}.warn{color:var(--warn)}.bad{color:var(--bad-hi)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- layout admin ---------- */
.app{display:flex;min-height:100vh}
.side{width:260px;flex:none;border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg)}
.brand{display:flex;align-items:center;gap:12px;height:72px;padding:0 22px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);flex:none}
.brand b{display:block;font-size:19px;font-weight:800;letter-spacing:-.4px;line-height:1.1}
.brand small{display:block;font-size:12px;color:var(--dim)}
.nav{display:flex;flex-direction:column;gap:18px;padding:18px 12px 18px;flex:1;min-height:0;overflow-y:auto}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);padding:0 12px 6px}
.nav a{display:flex;align-items:center;gap:12px;padding:0 12px;min-height:42px;border-radius:2px;color:var(--soft);text-decoration:none;font-weight:600}
.nav a:hover{background:var(--hover);color:var(--text)}
.nav a.on{background:var(--lime);color:var(--on-lime);font-weight:700}
.nav a span{flex:1}
.nav svg{width:18px;height:18px;flex:none}
.me{flex:none;margin:0;display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--line);background:var(--panel)}
.me .av{width:36px;height:36px;border-radius:2px;background:var(--lime);color:var(--on-lime);display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.me .who{flex:1;line-height:1.25;min-width:0}.me .who b{display:block;font-size:14px}.me .who small{color:var(--dim);font-size:12px}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:72px;padding:12px 32px;border-bottom:1px solid var(--line)}
.crumb{flex:1 1 260px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crumb .sep{color:var(--sep)}.crumb .here{font-weight:700}
.main{padding:28px 32px 56px;display:flex;flex-direction:column;gap:22px}
.top .menu-btn{display:none}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.page-head .grow{flex:1 1 320px;display:flex;flex-direction:column;gap:6px}
.page-head p{color:var(--muted)}

.theme-btn{width:44px;height:44px;border:1px solid var(--line2);border-radius:2px;background:var(--panel);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.theme-btn:hover{background:var(--hover)}
.theme-btn .sun{display:none}
:root[data-theme="light"] .theme-btn .sun{display:block}:root[data-theme="light"] .theme-btn .moon{display:none}

/* ---------- komponen ---------- */
.card{border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card.tight{padding:0;gap:0}
.card-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.card-head h2{flex:1}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(var(--min,240px),1fr))}
.row{display:flex;flex-wrap:wrap;gap:12px}.row>*{min-width:0}
.stack{display:flex;flex-direction:column;gap:10px}
.kpi{border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.kpi .k{font-size:13px;color:var(--muted);font-weight:600}
.kpi .v{font-size:28px;font-weight:800;letter-spacing:-.8px}
.kpi .s{font-size:13px;color:var(--muted)}
.kpi.warn{border-color:var(--warn-line);background:var(--warn-bg)}.kpi.warn .v{color:var(--warn)}
.hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:2px;background-color:var(--panel2);background-image:radial-gradient(ellipse 70% 90% at 28% 45%,var(--glow),transparent 45%,transparent 70%),radial-gradient(circle at center,var(--dots) 1px,transparent 1.6px);background-size:100% 100%,22px 22px;padding:40px 44px;display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.hero h1{font-size:40px;line-height:1.05;letter-spacing:-1.2px}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:var(--lime);color:var(--on-lime);padding:5px 8px;border-radius:1px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:2px;border:1px solid transparent;background:var(--lime);color:var(--on-lime);text-decoration:none;font:800 15px var(--sans);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--lime-hi);color:var(--on-lime)}
.btn.line{background:transparent;border-color:var(--lime-ink);color:var(--lime-ink)}
.btn.line:hover{background:var(--lime-bg)}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--text);font-weight:700}
.btn.ghost:hover{background:var(--hover)}
.btn.danger{background:transparent;border-color:var(--bad-line);color:var(--bad-hi)}
.btn.danger:hover{background:var(--bad-bg)}
.btn.sm{min-height:34px;padding:0 12px;font-size:13px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;color:var(--lime-ink);font:800 14px var(--sans);cursor:pointer}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border:1px solid var(--line2);color:var(--soft);border-radius:2px;padding:2px 8px;white-space:nowrap}
.badge.ok{border-color:var(--ok-line);background:var(--ok-bg);color:var(--lime-ink)}
.badge.wait{border-color:var(--warn-line);background:var(--warn-bg2);color:var(--warn)}
.badge.bad{border-color:var(--bad-line);background:var(--bad-bg2);color:var(--bad-hi)}
.badge.gray{color:var(--dim)}
.badge.mode{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.badge.live{border-color:var(--bad-line);background:var(--bad-bg2);color:var(--bad-hi)}
.badge.test{border-color:var(--warn-line);background:var(--warn-bg2);color:var(--warn)}
.dot{width:8px;height:8px;display:inline-block;flex:none;background:var(--lime)}
.dot.wait{background:var(--warn)}.dot.bad{background:var(--bad)}.dot.gray{background:var(--dim)}
.swatch{width:36px;height:36px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:none}

.alert{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;border:1px solid var(--line2);background:var(--panel);border-radius:2px;padding:12px 16px}
.alert>div{flex:1 1 280px}
.alert.bad{background:var(--bad-bg);border-color:var(--bad-line)}
.alert.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-text)}
.alert.ok{background:var(--ok-bg2);border-color:var(--ok-line)}

/* form */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.label{font-size:14px;font-weight:700}
.field .hint{font-size:13px;color:var(--dim)}
.field .err{font-size:13px;color:var(--bad-hi)}
.input,select.input,textarea.input{width:100%;min-height:46px;padding:0 14px;border:1px solid var(--line2);border-radius:2px;background:var(--bg);color:var(--text);font:500 15px var(--sans)}
textarea.input{padding:12px 14px;min-height:96px;resize:vertical}
.input:focus{border-color:var(--lime);outline:none}
.input.mono{font-family:var(--mono);font-size:14px}
.input.big{min-height:56px;font-size:22px;font-weight:800}
.check{display:flex;align-items:flex-start;gap:10px;min-height:40px;cursor:pointer}
.check input{accent-color:var(--lime);width:18px;height:18px;margin-top:2px;flex:none}
.check small{display:block;color:var(--dim)}
.form-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:2px}
.seg a{min-height:40px;padding:0 14px;display:flex;align-items:center;color:var(--soft);text-decoration:none;font-weight:600;font-size:14px}
.seg a+a{border-left:1px solid var(--line2)}
.seg a.on{background:var(--text);color:var(--bg);font-weight:700}

/* tabel */
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:14px}
.t th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tbody tr:hover{background:var(--rowhover)}
.t .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.t a.rowlink{color:var(--text);text-decoration:none;font-weight:700}
.t a.rowlink:hover{color:var(--lime)}
.empty{padding:36px 20px;text-align:center;color:var(--dim)}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:12px 14px;border-top:1px solid var(--line)}
dl.kv{margin:0;display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:0}
dl.kv dt{color:var(--muted);padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
dl.kv dd{margin:0;padding:9px 0 9px 12px;border-bottom:1px solid var(--line);font-weight:600;min-width:0;overflow-wrap:anywhere}
.bar{height:8px;background:var(--line)}.bar>i{display:block;height:8px;background:var(--lime)}
.chart{display:flex;align-items:flex-end;gap:8px;height:190px;border-bottom:1px solid var(--line2);background-image:linear-gradient(var(--grid) 1px,transparent 1px);background-size:100% 47.5px;min-width:480px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:2px}
.chart-labels{display:flex;gap:8px;min-width:480px;padding-top:6px}
.chart-labels span{flex:1;text-align:center;font-size:11px;color:var(--dim)}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--soft)}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:12px;height:12px;display:inline-block}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.timeline li:last-child{border-bottom:0}
.timeline time{color:var(--dim);font-family:var(--mono);font-size:12px;min-width:118px;padding-top:2px}
pre.code{margin:0;background:var(--bg);border:1px solid var(--line);padding:14px;overflow:auto;font:500 13px/1.55 var(--mono);color:var(--soft);max-height:420px;white-space:pre-wrap;word-break:break-all}
.secret{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.secret code{background:var(--bg);border:1px solid var(--line2);padding:10px 12px;flex:1 1 280px;overflow-wrap:anywhere}

/* ---------- login ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background-image:radial-gradient(ellipse 60% 50% at 50% 20%,var(--glow-soft),transparent 70%),radial-gradient(circle at center,var(--dots) 1px,transparent 1.6px);background-size:100% 100%,22px 22px}
.auth-box{width:100%;max-width:420px;border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:28px;display:flex;flex-direction:column;gap:18px}
.otp{letter-spacing:10px;text-align:center;font:800 26px var(--mono)}

/* ---------- halaman bayar (hosted) ---------- */
.pay-body{min-height:100vh;display:flex;justify-content:center;background-image:radial-gradient(ellipse 80% 35% at 50% 0%,var(--glow-soft),transparent 70%)}
.pay{width:100%;max-width:460px;min-height:100vh;display:flex;flex-direction:column;border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--paysheet)}
.pay-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pay-head .t{flex:1;line-height:1.2;min-width:0}.pay-head .t b{display:block;font-size:15px}.pay-head .t small{font-size:12px;color:var(--dim);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-head .by{font-size:11px;color:var(--dim);text-align:right;line-height:1.3}.pay-head .by b{color:var(--soft)}
.back{width:44px;height:44px;border:1px solid var(--line2);border-radius:2px;color:var(--text);display:flex;align-items:center;justify-content:center;text-decoration:none;flex:none;background:transparent;cursor:pointer;font-size:18px}
.pay-main{flex:1;padding:18px 16px;display:flex;flex-direction:column;gap:16px}
.amount-card{border:1px solid var(--line);background-color:var(--panel2);background-image:radial-gradient(ellipse 90% 80% at 20% 0%,var(--glow-soft),transparent 70%);border-radius:2px;padding:16px;display:flex;flex-direction:column;gap:6px}
.amount-card .amt{font-size:34px;font-weight:800;letter-spacing:-1px}
.amount-card details{font-size:13px;color:var(--soft)}
.amount-card summary{cursor:pointer;min-height:32px;display:flex;align-items:center;font-weight:700;color:var(--lime-ink)}
.items{display:flex;flex-direction:column;gap:6px;padding-top:6px}.items span{display:flex;justify-content:space-between;gap:10px}
.methods{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.methods legend{font-size:15px;font-weight:800;padding:0;margin-bottom:10px}
.methods .grp{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--faint);margin-top:8px}
.method{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 14px;border:1px solid var(--line2);background:var(--panel);border-radius:2px;cursor:pointer}
.method input{accent-color:var(--lime);width:18px;height:18px;flex:none}
.method .n{flex:1;line-height:1.3}.method .n b{display:block}.method .n small{font-size:12px;color:var(--muted)}
.method:has(input:checked){border-color:var(--lime);background:var(--lime-bg)}
.method .tagx{font-size:11px;font-weight:800;background:var(--lime);color:var(--on-lime);padding:3px 6px}
.method.off{opacity:.45;cursor:not-allowed}
.pay-foot{padding:12px 16px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;position:sticky;bottom:0;background:var(--bg)}
.pay-foot small{font-size:12px;color:var(--faint);text-align:center}
.status-bar{padding:14px 16px 18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;position:sticky;bottom:0;background:var(--bg)}
.status-bar span{flex:1;font-size:14px;color:var(--soft)}
.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.qr-box{background:#fff;padding:14px;border-radius:2px;line-height:0}
.qr-box svg,.qr-box img{width:240px;height:240px;display:block}
.timer{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:2px;color:var(--warn-text);font-size:14px}
.timer b{font-family:var(--mono);color:var(--warn)}
ol.steps{margin:0;padding:14px 14px 14px 32px;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel);font-size:14px;color:var(--soft);line-height:1.6}
ol.steps b{color:var(--text)}
.va-num{font:700 26px var(--mono);letter-spacing:1.5px;overflow-wrap:anywhere}
.done{flex:1;padding:56px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.done .ic{width:84px;height:84px;border-radius:2px;display:flex;align-items:center;justify-content:center;background:var(--lime);color:var(--on-lime)}
.done .ic.gray{background:var(--line2);color:var(--soft)}.done .ic.warn{background:var(--warn);color:var(--bg)}
.done dl{width:100%;border:1px solid var(--line2);background:var(--panel);padding:6px 16px;text-align:left;font-size:14px;margin:6px 0 0}
.done dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.done dl div:last-child{border-bottom:0}.done dt{color:var(--muted)}.done dd{margin:0;font-weight:700;text-align:right}
.sim{border:1px dashed var(--warn-line);background:var(--warn-bg);color:var(--warn-text);padding:10px 12px;font-size:13px;border-radius:2px;width:100%;text-align:left}

/* ---------- docs ---------- */
.docs{max-width:920px}
.docs h1{font-size:32px;margin:8px 0 12px}.docs h2{font-size:22px;margin:30px 0 10px;padding-top:12px;border-top:1px solid var(--line)}.docs h3{font-size:17px;margin:20px 0 8px}
.docs p,.docs li{color:var(--soft);line-height:1.65}.docs p{margin:0 0 10px}
.docs table{border-collapse:collapse;width:100%;font-size:14px;margin:6px 0 14px;display:block;overflow-x:auto}
.docs th,.docs td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.docs th{background:var(--panel)}
.docs pre{background:var(--panel);border:1px solid var(--line);padding:14px;overflow:auto;font:500 13px/1.55 var(--mono);color:var(--soft)}
.docs code{background:var(--hover);padding:1px 5px}.docs pre code{background:none;padding:0}
.docs blockquote{margin:10px 0;padding:10px 14px;border-left:3px solid var(--lime-ink);background:var(--panel)}

/* ---------- responsif ---------- */
@media (max-width:900px){
  .side{position:fixed;z-index:20;left:0;top:0;transform:translateX(-100%);transition:transform .15s;background:var(--bg)}
  .side.open{transform:none}
  .top .menu-btn{display:inline-flex}
  .top,.main{padding-left:16px;padding-right:16px}
  .hero{padding:28px 22px}.hero h1{font-size:30px}
}
@media (max-width:480px){.pay{border:0}h1{font-size:24px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}