/* Portal Pelanggan — tema NetManager (navy + amber). Tanpa style inline (CSP style-src 'self'). */
:root, :root[data-theme="dark"]{
  --bg:#070C15; --bg2:#0A1220; --bg3:#0C1626; --panel:#0C1626; --panel2:#101D33;
  --bd:#1C2940; --bd2:#2A3D5E; --ac:#F0A83C; --on-ac:#000;
  --gn:#5BD8A0; --rd:#ff5252; --tx:#EAF0F9; --t2:#94A4BC; --t3:#4E6078;
  --g1:rgba(240,168,60,.09); --g2:rgba(143,183,216,.07);
  --ac-soft:rgba(240,168,60,.14); --gn-soft:rgba(91,216,160,.14); --rd-soft:rgba(255,82,82,.14); --t3-soft:rgba(78,96,120,.18);
  --hero:linear-gradient(135deg,#14243e,#0e1a2e);
}
:root[data-theme="light"]{
  --bg:#F6F4EF; --bg2:#ffffff; --bg3:#F1EDE4; --panel:#ffffff; --panel2:#F1EDE4;
  --bd:#E2DACB; --bd2:#CDBFA4; --ac:#A8690F; --on-ac:#000;
  --gn:#00a86b; --rd:#e5484d; --tx:#201A10; --t2:#6B5F49; --t3:#A79B84;
  --g1:rgba(240,168,60,.14); --g2:rgba(143,120,60,.07);
  --ac-soft:rgba(168,105,15,.12); --gn-soft:rgba(0,168,107,.12); --rd-soft:rgba(229,72,77,.12); --t3-soft:rgba(167,155,132,.2);
  --hero:linear-gradient(135deg,#fff,#F1EDE4);
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh; color:var(--tx); font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:15px;
  background:radial-gradient(1200px 520px at 10% -10%,var(--g1),transparent 60%),radial-gradient(900px 480px at 100% 0%,var(--g2),transparent 62%),
    linear-gradient(160deg,var(--bg) 0%,var(--bg2) 52%,var(--bg3) 100%);
  -webkit-font-smoothing:antialiased;}
.defs{position:absolute}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.wrap{max-width:460px; margin:0 auto; padding:16px 16px 40px}
.wrap.narrow{max-width:400px; padding-top:7vh}
.wm{font-weight:800; font-size:26px; letter-spacing:.01em; line-height:1.15}
.brandbox{text-align:center; margin-bottom:22px}
.logo{max-width:140px; max-height:64px; object-fit:contain; display:block; margin:0 auto 10px}
.kicker{font-size:11px; margin:8px 0 0; color:var(--t2); letter-spacing:.06em}
.muted{color:var(--t2)} .t3{color:var(--t3)} .small{font-size:12px} .center{text-align:center}
.h3{margin:0 0 4px; font-size:16px; font-weight:700}
.mt10{margin-top:10px} .mt12{margin-top:12px} .mt14{margin-top:14px} .mt16{margin-top:16px}
.card{background:var(--panel); border:1px solid var(--bd); border-radius:16px; padding:16px; margin-top:12px}
.card:first-child{margin-top:0}
.lbl{font-size:12px; font-weight:600; color:var(--t2); margin-bottom:6px; display:block}
.inp{width:100%; height:48px; border:1px solid var(--bd); border-radius:12px; background:var(--bg2); color:var(--tx); padding:0 14px; font-size:16px; outline:none; font-family:inherit}
.inp:focus{border-color:var(--ac)}
.inp.otp{letter-spacing:.5em; text-align:center; font-size:22px}
textarea.inp{height:96px; padding:12px 14px; resize:none}
select.inp{appearance:none}
.btn{width:100%; height:46px; border:none; border-radius:12px; background:#F0A83C; color:var(--on-ac); font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; font-family:inherit}
.btn[disabled]{opacity:.6; cursor:progress}
.btn2{width:100%; height:44px; border:1px solid var(--bd2); border-radius:12px; background:transparent; color:var(--tx); font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; font-family:inherit}
.btn2.auto,.btn.auto{width:auto; height:36px; padding:0 12px; flex:none}
.link{background:none; border:none; color:var(--ac); font-size:13px; font-weight:600; cursor:pointer; padding:0; display:block; margin-left:auto; margin-right:auto; font-family:inherit}
.note{font-size:12px; color:var(--t2); margin:14px 0 0; padding-top:14px; border-top:1px solid var(--bd); display:flex; gap:8px}
.pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap}
.pill.gn{background:var(--gn-soft); color:var(--gn)} .pill.ac{background:var(--ac-soft); color:var(--ac)}
.pill.rd{background:var(--rd-soft); color:var(--rd)} .pill.t3{background:var(--t3-soft); color:var(--t2)}
svg.ic{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
svg.ic.sm{width:15px; height:15px} svg.ic.lg{width:21px; height:21px} .ac{color:var(--ac)}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--bd); font-size:14px}
.row:last-child{border-bottom:none}
.row p{margin:0}
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px}
.topbar .wm{font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.iconbtn{width:38px; height:38px; border:1px solid var(--bd); border-radius:10px; background:var(--panel); color:var(--tx); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none}
.hero{background:var(--hero); border:1px solid var(--bd2); border-radius:18px; padding:18px}
.hero .top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.hero .name{margin:2px 0 0; font-size:19px; font-weight:700}
.hero .pkg{display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid var(--bd)}
.hero .mbps{margin:0; font-size:24px; font-weight:800; color:var(--ac); text-align:right}
p{margin:0}
.big{margin:8px 0 0; font-size:28px; font-weight:800}
.flex{display:flex; align-items:center; gap:12px} .flex1{flex:1; min-width:0} .gap6{gap:6px}
.dot{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center}
.dot.gn{background:var(--gn-soft); color:var(--gn)} .dot.t3{background:var(--t3-soft); color:var(--t3)}
.st-on{font-size:16px; font-weight:700; color:var(--gn)} .st-off{font-size:16px; font-weight:700; color:var(--t3)}
.acct{background:var(--bg2); border:1px solid var(--bd); border-radius:12px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.acct .no{margin:3px 0 0; font-size:18px; letter-spacing:.5px; word-break:break-all}
.amount{background:var(--ac-soft); border:1px solid var(--ac); border-radius:12px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.amount p{color:var(--ac)} .amount .v{font-size:22px; font-weight:800; margin-top:3px}
.warn{margin:10px 0 0; font-size:12px; color:var(--ac); background:var(--ac-soft); border-radius:10px; padding:9px 11px; display:flex; gap:7px}
.ovl{position:fixed; inset:0; background:rgba(4,8,16,.7); display:flex; align-items:flex-end; justify-content:center; z-index:50}
.sheet{width:100%; max-width:460px; max-height:88vh; overflow-y:auto; background:var(--panel); border:1px solid var(--bd); border-radius:20px 20px 0 0; padding:18px 16px calc(26px + env(safe-area-inset-bottom)); animation:up .2s ease}
@keyframes up{from{transform:translateY(30px); opacity:.6} to{transform:none; opacity:1}}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--panel2); border:1px solid var(--bd2); color:var(--tx); padding:10px 16px; border-radius:12px; font-size:13px; z-index:80; opacity:0; transition:opacity .2s; max-width:88vw; text-align:center; pointer-events:none}
.toast.on{opacity:1}
.spin{width:16px; height:16px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:sp .6s linear infinite; display:inline-block}
.spin.lg{width:26px; height:26px}
.loading{text-align:center; padding:26vh 0; color:var(--t2)}
@keyframes sp{to{transform:rotate(360deg)}}
.foot{text-align:center; font-size:11px; margin-top:18px; color:var(--t3)}