/* ===== JEKUNRL POS — Glass UI biru muda, otomatis mengikuti mode gelap/terang perangkat =====
   Semua warna ada di variabel :root. Mode gelap = bawaan, mode terang = blok prefers-color-scheme:light. */
:root{
  color-scheme:dark light;
  --bg:#0B182B;--text:#EAF4FF;--muted:#9DB6D0;--accent-text:#7DD3FC;
  --accent:#7DD3FC;--accent2:#38A8F5;--primary:#7DD3FC;--on-primary:#04223A;
  --danger:#FF8A8A;--ok:#5EEAA6;--r:16px;
  --card:rgba(255,255,255,.07);--card2:rgba(255,255,255,.05);--border:rgba(255,255,255,.14);--glass-border:rgba(255,255,255,.18);
  --g1:rgba(190,225,255,.14);--g2:rgba(190,225,255,.04);          /* kaca biasa */
  --gb1:rgba(190,225,255,.20);--gb2:rgba(190,225,255,.06);        /* kaca tombol/panel besar */
  --panel1:rgba(40,78,120,.80);--panel2:rgba(10,22,42,.90);       /* panel pekat: dialog, toast, drawer */
  --top1:rgba(40,78,120,.62);--top2:rgba(10,22,42,.58);
  --field:rgba(255,255,255,.07);--field-hi:rgba(255,255,255,.11);--field-shadow:rgba(0,0,0,.22);--ph:rgba(157,182,208,.7);
  --hi:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.03);
  --shadow:0 12px 32px rgba(0,0,0,.38);--shadow-lg:0 30px 70px rgba(0,0,0,.55);
  --ring:rgba(125,211,252,.28);--ring-border:rgba(125,211,252,.85);
  --btn-a:rgba(150,224,255,.97);--btn-b:rgba(70,150,250,.93);--btn-glow:rgba(56,168,245,.32);
  --pill-a:rgba(125,211,252,.30);--pill-b:rgba(255,255,255,.10);--pill-border:rgba(255,255,255,.26);
  --ico-bg:rgba(255,255,255,.07);--ico-on:rgba(125,211,252,.28);
  --scrim:rgba(5,10,20,.40);--bd:rgba(5,10,20,.45);
  --orb1:rgba(56,189,248,.62);--orb2:rgba(34,211,238,.48);--orb3:rgba(99,140,255,.60);--orb4:rgba(125,211,252,.42);--orb5:rgba(59,130,246,.42);
  --option-bg:#10203A;--skel1:rgba(255,255,255,.05);--skel2:rgba(255,255,255,.16);--solid:rgba(26,42,68,.93);
  --mascot-sh:rgba(0,0,0,.35);--door-glow:#D6EBFF;
  --blur:blur(18px) saturate(160%);--blur-l:blur(28px) saturate(170%);--blur-s:blur(10px) saturate(140%);
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:light){:root{
  --bg:#DDEEFF;--text:#0B2540;--muted:#4B6A8A;--accent-text:#0369A1;
  --accent:#38BDF8;--accent2:#0EA5E9;--primary:#38BDF8;--on-primary:#04223A;
  --danger:#C62828;--ok:#0A8F55;
  --card:rgba(255,255,255,.50);--card2:rgba(255,255,255,.40);--border:rgba(20,90,160,.16);--glass-border:rgba(255,255,255,.80);
  --g1:rgba(255,255,255,.72);--g2:rgba(255,255,255,.30);
  --gb1:rgba(255,255,255,.88);--gb2:rgba(255,255,255,.46);
  --panel1:rgba(255,255,255,.90);--panel2:rgba(230,243,255,.94);
  --top1:rgba(255,255,255,.88);--top2:rgba(236,247,255,.82);
  --field:rgba(255,255,255,.66);--field-hi:rgba(255,255,255,.95);--field-shadow:rgba(30,90,160,.12);--ph:rgba(75,106,138,.7);
  --hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.35);
  --shadow:0 12px 32px rgba(40,100,170,.20);--shadow-lg:0 30px 70px rgba(40,100,170,.28);
  --ring:rgba(14,165,233,.28);--ring-border:rgba(2,132,199,.85);
  --btn-a:rgba(135,214,255,1);--btn-b:rgba(56,168,245,.98);--btn-glow:rgba(14,140,230,.30);
  --pill-a:rgba(56,189,248,.35);--pill-b:rgba(255,255,255,.55);--pill-border:rgba(255,255,255,.85);
  --ico-bg:rgba(255,255,255,.65);--ico-on:rgba(56,189,248,.38);
  --scrim:rgba(215,232,250,.35);--bd:rgba(170,200,235,.45);
  --orb1:rgba(56,189,248,.70);--orb2:rgba(103,232,249,.55);--orb3:rgba(129,160,255,.50);--orb4:rgba(255,255,255,.95);--orb5:rgba(147,197,253,.65);
  --option-bg:#EAF4FF;--skel1:rgba(255,255,255,.45);--skel2:rgba(255,255,255,.98);--solid:rgba(240,248,255,.97);
  --mascot-sh:rgba(40,100,170,.30);--door-glow:#FFFFFF;
}}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}
button,.btn,.chip,.pcard,.nav a,.bottom a,.rowbtn,.link,.eye{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}
html{background:var(--bg)}
body{background:transparent;color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
/* bola cahaya di belakang kaca — inilah yang membuat blur terlihat */
body::before{content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;
  background:
   radial-gradient(38vmax 38vmax at 12% 10%,var(--orb1),transparent 62%),
   radial-gradient(34vmax 34vmax at 90% 16%,var(--orb2),transparent 62%),
   radial-gradient(40vmax 40vmax at 72% 98%,var(--orb3),transparent 62%),
   radial-gradient(30vmax 30vmax at 8% 90%,var(--orb4),transparent 62%),
   radial-gradient(28vmax 28vmax at 52% 46%,var(--orb5),transparent 65%);
  animation:orbs 38s ease-in-out infinite alternate}
@keyframes orbs{to{transform:translate3d(3%,-2%,0) scale(1.08) rotate(2deg)}}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:.2px}.muted{color:var(--muted)}.center{display:grid;place-items:center;height:100%}

.card{background:linear-gradient(160deg,var(--g1),var(--g2));border:1px solid var(--glass-border);border-radius:var(--r);padding:16px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow),var(--hi)}
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
input,select,textarea{width:100%;min-height:44px;padding:10px 12px;background:var(--field);color:var(--text);
  border:1px solid var(--border);border-radius:12px;font:inherit;box-shadow:inset 0 2px 6px var(--field-shadow);transition:border-color .2s,box-shadow .2s,background .2s}
input::placeholder,textarea::placeholder{color:var(--ph)}
select option{background:var(--option-bg);color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ring-border);background:var(--field-hi);box-shadow:inset 0 2px 6px var(--field-shadow),0 0 0 3px var(--ring)}
.btn:focus-visible,.chip:focus-visible,.pcard:focus-visible,.link:focus-visible{outline:2px solid var(--ring-border);outline-offset:2px}
.btn{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--glass-border);background:linear-gradient(160deg,var(--gb1),var(--gb2));
  color:var(--text);font:inherit;cursor:pointer;-webkit-backdrop-filter:var(--blur-s);backdrop-filter:var(--blur-s);box-shadow:var(--hi);
  transition:transform .18s var(--ease),background .2s,box-shadow .2s,filter .2s}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:var(--on-primary);border-color:rgba(255,255,255,.55);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 22px var(--btn-glow)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{color:var(--danger)}.btn:disabled{opacity:.55;cursor:wait}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit;padding:8px 0;transition:color .2s}.link:hover{color:var(--text)}
.err{color:var(--danger);font-size:13px;min-height:20px;margin-top:8px}
.row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

.dlg{background:linear-gradient(160deg,var(--panel1),var(--panel2));color:var(--text);border:1px solid var(--glass-border);border-radius:22px;max-width:min(92vw,380px);padding:20px;
  -webkit-backdrop-filter:var(--blur-l);backdrop-filter:var(--blur-l);box-shadow:var(--shadow-lg),var(--hi)}
.dlg[open]{animation:pop .35s var(--ease)}
.dlg::backdrop{background:var(--bd);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .3s}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}}

#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:grid;gap:8px;z-index:50;width:min(92vw,360px)}
.toast{padding:12px 16px;border-radius:16px;background:linear-gradient(160deg,var(--panel1),var(--panel2));border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow),var(--hi);animation:toastIn .45s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}}
.toast.ok{border-color:var(--ok)}.toast.err{border-color:var(--danger)}
.empty{text-align:center;color:var(--muted);padding:40px 16px}
.skel{height:18px;border-radius:8px;background:linear-gradient(90deg,var(--skel1),var(--skel2),var(--skel1));background-size:200%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200%}}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.toolbar input[type=search]{flex:1 1 200px;width:auto}.toolbar select{flex:0 1 170px;width:auto}
.prow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;padding:12px 14px}
.prow.off{opacity:.6}.pinfo{flex:1 1 180px;min-width:0}.pprice{text-align:right;font-weight:600}
.pact{display:flex;gap:6px}.pact .btn{min-height:40px;padding:0 12px}
.badge{font-size:11px;padding:2px 9px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--muted)}
.dlg.wide{width:min(92vw,440px);max-height:90vh}.chk{display:flex!important;gap:8px;align-items:center;color:var(--text)!important;font-size:14px!important}
.chk input{width:auto;min-height:0;accent-color:var(--accent2)}
.crow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;margin-top:8px}
@media (max-width:520px){.pprice{text-align:left;flex:1 1 40%}.pact{flex:1 1 100%}.pact .btn{flex:1}.crow{grid-template-columns:1fr auto}.crow .btn{grid-column:1/-1}}

.pos{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.pcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:88px;padding:11px;text-align:left;
  background:linear-gradient(160deg,var(--gb1),var(--g2));color:var(--text);border:1px solid var(--glass-border);border-radius:var(--r);font:inherit;cursor:pointer;
  box-shadow:var(--hi);transition:transform .18s var(--ease),background .2s,border-color .2s}
@media (min-width:821px){.pcard{-webkit-backdrop-filter:var(--blur-s);backdrop-filter:var(--blur-s)}.pcard:hover{border-color:var(--ring-border)}}
.pcard:active{transform:scale(.97);background:var(--field-hi)}.pcard b{color:var(--muted);font-weight:600}
.qb{position:absolute;top:6px;right:6px;font-style:normal;font-size:12px;min-width:22px;text-align:center;border-radius:999px;background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:var(--on-primary);font-weight:700;padding:1px 7px;box-shadow:0 4px 10px var(--btn-glow)}
.cart{position:sticky;top:88px;max-height:calc(100vh - 104px);overflow:auto}.cart-h{display:flex;justify-content:space-between;align-items:center}#cclose,.cartbar{display:none}
.ci{padding:10px 0;border-bottom:1px solid var(--border)}.ci-t{display:flex;justify-content:space-between;gap:8px}.ci-c{display:flex;gap:6px;align-items:center;margin-top:6px}
.btn.q{min-width:40px;min-height:40px;padding:0}.qty{min-width:28px;text-align:center;font-weight:600}.dsc{width:110px;min-height:40px;margin-left:auto}
.sr{display:flex;justify-content:space-between;padding:6px 0}.sr.tot{font-size:18px;font-weight:700;border-top:1px solid var(--border);margin-top:6px}
.chips,.quick{display:flex;flex-wrap:wrap;gap:6px}.quick{margin-top:6px}
.chip{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--glass-border);background:var(--card);color:var(--text);font:inherit;cursor:pointer;box-shadow:var(--hi);
  transition:background .25s,color .25s,border-color .25s,transform .18s var(--ease)}
.chip:active{transform:scale(.96)}
.chip.on{background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:var(--on-primary);border-color:rgba(255,255,255,.55);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px var(--btn-glow)}.paysec{margin-top:8px}
@media (max-width:820px){
 .pos{grid-template-columns:1fr}
 .cart{position:fixed;inset:0;z-index:40;max-height:none;border-radius:26px 26px 0 0;margin-top:48px;transform:translateY(105%);transition:transform .5s var(--ease);padding-bottom:calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(160deg,var(--panel1),var(--panel2));-webkit-backdrop-filter:var(--blur-l);backdrop-filter:var(--blur-l)}
 .cart.open{transform:none}#cclose{display:inline-block;min-height:40px}
 .cartbar{display:block;position:fixed;left:12px;right:12px;bottom:calc(90px + env(safe-area-inset-bottom));z-index:9;box-shadow:0 10px 26px var(--btn-glow),inset 0 1px 0 rgba(255,255,255,.6)}.cartbar[hidden]{display:none}
 .grid{grid-template-columns:repeat(2,1fr)}#grid{padding-bottom:80px}
 #toasts{bottom:98px}}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}.stats .card{padding:12px}.stats b{font-size:17px}
.rowbtn{width:100%;text-align:left;color:var(--text);font:inherit;cursor:pointer;transition:transform .18s var(--ease),border-color .2s}.rowbtn:active{transform:scale(.99)}
.badge.bad{color:var(--danger);border-color:var(--danger)}.badge.good{color:var(--ok);border-color:var(--ok)}.badge.warn{color:var(--warning,#d99000);border-color:var(--warning,#d99000)}.subscription-current.active{border-color:var(--ok)}.subscription-current.expiring{border-color:var(--warning,#d99000)}.subscription-current.expired{border-color:var(--danger)}
.onboarding-card{width:min(100%,560px);margin:0 auto;padding:28px}.onboarding-card h2{margin-top:4px}.onboarding-card input{margin-top:4px}
.admin-stack{display:grid;gap:10px}.admin-note textarea{resize:vertical}
.subscription-stats{margin:0 0 10px}.subscription-stats .card{display:grid;gap:3px}.subscription-stats b{font-size:20px;color:var(--accent-text)}
.platform-dashboard{display:grid;gap:10px;margin-bottom:22px}.platform-stats{margin:0}.platform-stats .card{display:grid;gap:3px}.platform-stats b{font-size:20px;color:var(--accent-text)}.platform-stats small{font-size:12px}.platform-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.platform-columns h3{margin-bottom:8px}@media(max-width:700px){.platform-columns{grid-template-columns:1fr}}
.platform-directory .prow{align-items:flex-start}.user-status,.rename-store{min-height:40px;white-space:nowrap}
.subscription-hero{padding:22px}.subscription-hero h2{margin-top:4px}.eyebrow{font-size:11px;letter-spacing:1.5px;color:var(--accent-text);font-weight:700}.section-title{margin:22px 0 10px}.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.plan-card{position:relative;display:flex;flex-direction:column;gap:8px;min-height:220px;padding:18px;background:linear-gradient(160deg,var(--gb1),var(--g2));border:1px solid var(--glass-border);border-radius:var(--r);box-shadow:var(--hi)}.plan-card.featured{border-color:var(--ring-border);box-shadow:var(--hi),0 10px 28px var(--btn-glow)}.plan-card .btn{margin-top:auto}.plan-price{font-size:24px;color:var(--accent-text)}.plan-badge{position:absolute;right:12px;top:12px;color:var(--accent-text);border-color:var(--ring-border)}.payment-note{margin-top:12px}.subscription-current{display:flex;align-items:center;justify-content:space-between;gap:12px}.subscription-current .right{text-align:right}.admin-note{border-color:var(--ring-border)}
@media (max-width:700px){.plan-grid{grid-template-columns:1fr}.plan-card{min-height:0}.subscription-current{align-items:flex-start;flex-direction:column}.subscription-current .right{text-align:left}}
.toolbar input[type=date]{flex:0 1 150px;width:auto}
@media (max-width:520px){.stats{grid-template-columns:1fr}}
.tblw{overflow-x:auto;margin-bottom:14px}.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}.tbl th{color:var(--muted);font-weight:500}.tbl tr.off{opacity:.55}
.sugwrap{position:relative}.sug{position:absolute;left:0;right:0;top:100%;z-index:5;margin-top:6px;background:linear-gradient(160deg,var(--panel1),var(--panel2));border:1px solid var(--glass-border);border-radius:14px;overflow:hidden;
  -webkit-backdrop-filter:var(--blur-l);backdrop-filter:var(--blur-l);box-shadow:var(--shadow-lg),var(--hi);animation:pop .25s var(--ease)}
.sug[hidden]{display:none}.sug button{display:block;width:100%;text-align:left;min-height:44px;padding:8px 12px;background:none;border:0;border-bottom:1px solid var(--border);color:var(--text);font:inherit;cursor:pointer;transition:background .15s}
.sug button:hover{background:var(--card)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .card,.btn,.chip,.pcard,.dlg,.toast,.sug,.cart{background:var(--solid)}
}
@media (prefers-reduced-motion:reduce){
 body::before,.skel,.toast,.dlg[open],.dlg::backdrop,.sug{animation:none}
 .cart,.btn,.chip,.pcard,.rowbtn{transition:none}
}

/* Tahap 023 — audit platform */
.audit-list{display:grid;gap:10px;margin-bottom:24px}.audit-row{padding:14px 16px;border-radius:18px;background:linear-gradient(145deg,var(--card),var(--panel2));border:1px solid var(--border);box-shadow:var(--shadow),var(--hi)}.audit-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}.audit-meta time{font-size:12px;color:var(--muted)}.audit-row code{display:block;margin-top:8px;padding:8px;overflow:auto;border-radius:10px;background:var(--field);color:var(--muted);font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word}.audit-row strong{display:block;margin-bottom:3px}

.audit-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}.audit-heading .section-title{margin:0}.audit-toggle{min-height:36px;padding:0 12px;font-size:12px;white-space:nowrap}.audit-panel[hidden]{display:none}

/* Tahap 025 — monitoring Supabase Cron */
.cron-card{margin:14px 0 18px;padding:16px}.cron-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.cron-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;font-size:13px}.cron-grid span{padding:9px 10px;border-radius:12px;background:var(--field);color:var(--muted)}.cron-grid b{display:block;margin-top:2px;color:var(--text);font-weight:600;overflow-wrap:anywhere}@media(max-width:560px){.cron-grid{grid-template-columns:1fr}}

/* Tahap 026 — kesehatan backup */
.backup-card{margin:0 0 18px;padding:16px}.backup-rows{display:grid;gap:6px;margin-top:10px}.backup-row{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:10px;background:var(--field);font-size:13px}.backup-row span:last-child{text-align:right;color:var(--muted)}