:root{
  --bg:#f5f6fb; --surface:#fff; --border:#e4e6ee; --text:#151827; --text-2:#5b6078; --text-3:#8d92a8;
  --primary:#059669; --primary-2:#10b981; --primary-soft:#e7f7ef; --primary-strong:#047857; --green:#16a34a; --green-soft:#e8f7ee; --red:#dc2626; --red-soft:#fdecec;
  --amber:#b45309; --amber-soft:#fff5e5;
  --radius:16px; --shadow:0 1px 2px rgba(20,24,40,.05), 0 8px 28px rgba(20,24,40,.07);
}
:root[data-theme="purple"]{ --primary:#7c3aed; --primary-2:#8b5cf6; --primary-soft:#f2edfe; --primary-strong:#6d28d9; }
*{box-sizing:border-box;}
body{margin:0; font-family:Inter,'Segoe UI',Roboto,system-ui,sans-serif; color:var(--text); background:var(--bg); line-height:1.5; font-size:15px;}
a{color:var(--primary);}
.wrap{max-width:1120px; margin:0 auto; padding:0 16px;}
.hidden{display:none !important;}
.muted{color:var(--text-2);}
.tiny{font-size:12px;}
h1,h2,h3{line-height:1.2; margin:0 0 10px;}

.nav{background:rgba(255,255,255,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:64px;}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px;}
.mark{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; display:inline-flex; align-items:center; justify-content:center;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:12px; padding:11px 18px; min-height:44px;
  font:inherit; font-weight:600; cursor:pointer; text-decoration:none;}
.btn.primary{background:var(--primary); color:#fff;}
.btn.primary:hover{filter:brightness(1.07);}
.btn.ghost{background:transparent; color:var(--primary); border:1px solid var(--border);}
.btn.danger{background:var(--red-soft); color:var(--red);}
.btn.ok{background:var(--green-soft); color:var(--green);}
.btn.sm{min-height:34px; padding:6px 12px; font-size:13px;}
.btn.block{width:100%;}
.btn:disabled{opacity:.6; cursor:not-allowed;}

.hero{padding:48px 0 32px; background:radial-gradient(900px 400px at 15% 0%, var(--primary-soft) 0%, transparent 70%);}
.hero-in{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:start;}
.hero h1{font-size:40px; letter-spacing:-.02em; margin-top:14px;}
.lead{font-size:17px; color:var(--text-2); max-width:520px;}
.pill{display:inline-block; background:var(--primary-soft); color:var(--primary-strong); font-weight:600; font-size:13px; padding:6px 12px; border-radius:20px;}
.features{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px;}
.features li{padding-left:30px; position:relative;}
.features li::before{content:'✓'; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px;}
.signup label{display:block; font-size:13px; font-weight:600; color:var(--text-2); margin:14px 0 6px;}
.opt{font-weight:400; color:var(--text-3);}
input{width:100%; font:inherit; color:inherit; border:1px solid var(--border); border-radius:10px; padding:10px 12px; min-height:44px; background:#fff; outline:none;}
input:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.slug-row{display:flex; align-items:stretch; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff;}
.slug-row:focus-within{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);}
.slug-row input{border:none; box-shadow:none !important; border-radius:0; min-width:0;}
.suffix{display:flex; align-items:center; padding:0 12px; background:#f7f8fb; color:var(--text-2); border-left:1px solid var(--border); white-space:nowrap; font-size:14px;}
.slug-row .btn{border-radius:0;}
.hint{font-size:12px; color:var(--text-3); margin-top:6px; min-height:18px;}
.hint.ok{color:var(--green);} .hint.bad{color:var(--red);}
.sep{margin:20px 0 0; padding-top:16px; border-top:1px dashed var(--border); font-weight:700; font-size:14px;}
.error{color:var(--red); font-size:13px; margin:14px 0 0;}
.error:empty{display:none;}
.signup .btn{margin-top:16px;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}

.login-box{padding:24px 16px 48px;}
.login-box .card{max-width:560px;}
.foot{padding:24px 16px 40px; font-size:13px;}

.done-wrap{position:fixed; inset:0; background:rgba(15,18,35,.5); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50;}
.done{max-width:440px; width:100%; text-align:center;}
.check{width:60px; height:60px; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:30px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 12px;}
.addr{background:var(--primary-soft); border-radius:10px; padding:12px; margin:12px 0; font-weight:700; word-break:break-all;}
.addr.small{font-weight:500; font-size:14px; background:#f7f8fb; margin-top:0;}
.done .btn{margin-top:8px;}

/* Super Admin */
.sa-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:24px 0 16px;}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px;}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px;}
.stat .v{font-size:24px; font-weight:800;}
.stat .l{font-size:12px; color:var(--text-2);}
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:14px;}
th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap;}
td{padding:12px; border-bottom:1px solid var(--border); vertical-align:top;}
tr:last-child td{border-bottom:none;}
.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700;}
.badge.active{background:var(--green-soft); color:var(--green);}
.badge.suspended{background:var(--red-soft); color:var(--red);}
.search{max-width:320px;}
.num{font-variant-numeric:tabular-nums;}

@media (max-width: 900px){
  .hero-in{grid-template-columns:1fr; gap:28px;}
  .hero h1{font-size:30px;}
  .stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 480px){
  .row2{grid-template-columns:1fr;}
  .card{padding:20px;}
  .suffix{font-size:12px; padding:0 8px;}
}

/* Pemilih tema warna */
.theme-switch{ display:inline-flex; align-items:center; gap:6px; padding:4px; border:1px solid var(--border); border-radius:999px; background:#fff; }
.theme-dot{ width:22px; height:22px; border-radius:50%; border:none; padding:0; cursor:pointer; }
.theme-dot[data-set-theme="green"]{ background: linear-gradient(135deg,#059669,#10b981); }
.theme-dot[data-set-theme="purple"]{ background: linear-gradient(135deg,#7c3aed,#8b5cf6); }
.theme-dot.active{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text-3); }
.nav-right{ display:flex; align-items:center; gap:12px; }

/* ===== Super Admin: masa aktif ===== */
.stats{ grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px){ .stats{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .stats{ grid-template-columns: repeat(2, 1fr); } }
.stat.warn .v{ color: var(--amber); }
.stat.bad .v{ color: var(--red); }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chip{ border:1px solid var(--border); background:#fff; border-radius:20px; padding:7px 14px; font:inherit; font-size:13px; font-weight:600; color:var(--text-2); cursor:pointer; }
.chip.active{ background: var(--primary); border-color: var(--primary); color:#fff; }
.chip.active .muted{ color: rgba(255,255,255,.8); }
.badge.sub-trial{ background:#dbeafe; color:#1d4ed8; }
.badge.sub-paid{ background: var(--green-soft); color: var(--green); }
.badge.sub-soon{ background: var(--amber-soft); color: var(--amber); }
.badge.sub-expired{ background: var(--red-soft); color: var(--red); }
tr.row-expired td{ background:#fff7f7; }
.btn.primary.sm{ min-height:34px; }

.sa-modal-wrap{ position:fixed; inset:0; background:rgba(15,18,35,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:60; }
.sa-modal{ width:100%; max-width:560px; max-height:calc(100vh - 32px); overflow:auto; }
.sa-modal label{ display:block; font-size:13px; font-weight:600; color:var(--text-2); margin:14px 0 6px; }
.sa-modal select{ width:100%; font:inherit; border:1px solid var(--border); border-radius:10px; padding:10px 12px; min-height:44px; background:#fff; }
.sa-modal-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.sa-current{ background:#f7f8fb; border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:14px; }
.seg{ display:flex; background:#f1f3f8; border-radius:10px; padding:4px; gap:4px; }
.seg-btn{ flex:1; border:none; background:transparent; padding:9px; border-radius:8px; font:inherit; font-weight:600; font-size:13px; color:var(--text-2); cursor:pointer; }
.seg-btn.active{ background:#fff; color: var(--primary-strong); box-shadow:0 1px 3px rgba(16,24,40,.1); }
.month-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
@media (max-width: 480px){ .month-grid{ grid-template-columns: repeat(2, 1fr); } }
.month-opt{ border:1.5px solid var(--border); background:#fff; border-radius:10px; padding:10px 6px; display:flex; flex-direction:column; gap:3px; align-items:center; cursor:pointer; font:inherit; }
.month-opt.active{ border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }

/* Masuk ke toko */
.login-card-p{ max-width:520px; }
.pass-row{ display:flex; gap:8px; align-items:stretch; }
.pass-row input{ flex:1; }
.remember-check{ display:flex !important; align-items:center; gap:8px; font-weight:500 !important; color:var(--text) !important; margin-top:12px !important; }
.remember-check input{ width:16px; flex:none; height:16px; min-height:0; accent-color: var(--primary); }
.store-list{ display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.store-item{ display:grid; grid-template-columns: 1fr auto; grid-template-rows:auto auto; align-items:center; gap:2px 10px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--text); background:#fff; }
.store-item:hover{ border-color: var(--primary); background: var(--primary-soft); }
.store-item > span[aria-hidden]{ grid-row:1 / span 2; grid-column:2; font-size:22px; color:var(--primary); }

/* ===== Super Admin: Pengirim Pesan ===== */
.msg-sec{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-top:12px; }
.msg-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.msg-sec label{ margin-top:10px !important; }
.msg-test{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.msg-test input{ flex:1; min-width:160px; }
.sa-modal .msg-check{ display:flex !important; align-items:flex-start; gap:8px; font-weight:500 !important; color:var(--text) !important; margin-top:16px !important; }
.msg-check input{ width:16px; height:16px; min-height:0; flex:none; margin-top:2px; accent-color:var(--primary); }

/* ===== Kode OTP ===== */
.otp-input{ font-size:24px !important; letter-spacing:10px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.link-row{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:12px; }
.link-btn{ background:none; border:none; padding:4px 0; color:var(--primary); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.link-btn:disabled{ color:var(--text-2); cursor:default; }
.otp-sent{ background:var(--primary-soft); border-radius:10px; padding:10px 12px; font-size:13px; margin:10px 0 0; }
.ch-pick{ display:flex; gap:8px; margin-top:6px; }
.ch-pick button{ flex:1; }
.ch-pick button.active{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }

/* ===== Daftar: pilihan jenis usaha ===== */
.biz-types{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-bottom:4px; }
.biz-type{ display:flex !important; align-items:center; gap:8px; border:1px solid var(--border); border-radius:12px; padding:10px; cursor:pointer; font-size:13px !important; font-weight:500 !important; color:var(--text) !important; margin:0 !important; line-height:1.3; }
.biz-type input{ width:16px; height:16px; min-height:0; flex:none; margin:0; accent-color:var(--primary); }
.biz-type .biz-ico{ font-size:18px; flex:none; }
.biz-type:has(input:checked){ border-color:var(--primary); background:var(--primary-soft); font-weight:700 !important; }
@media (max-width: 420px){ .biz-types{ grid-template-columns:1fr; } }