/* WhatsApp Gateway — gaya Duolingo + sidebar */
@font-face{font-family:"Nunito";font-style:normal;font-weight:600 900;font-display:swap;
  src:url(/static/fonts/nunito-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:600 900;font-display:swap;
  src:url(/static/fonts/nunito-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*{box-sizing:border-box}
:root{
  --green:#58CC02;--green-d:#58A700;--green-bg:#D7FFB8;
  --blue:#1CB0F6;--blue-d:#1899D6;--blue-bg:#DDF4FF;--blue-line:#84D8FF;
  --red:#FF4B4B;--red-d:#EA2B2B;--red-bg:#FFDFE0;
  --yellow:#FFC800;--yellow-d:#E5B400;--yellow-bg:#FFF4CC;
  --purple:#CE82FF;--purple-d:#A568CC;
  --ink:#4B4B4B;--muted:#777;--hare:#AFAFAF;--line:#E5E5E5;--polar:#F7F7F7;--bg:#fff;
  --r:16px;--side:220px;
}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);min-height:100vh;
  font:700 14px/1.45 "Nunito",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
h1,h2,h3{margin:0;font-weight:900;color:var(--ink)}
a{color:inherit}
[hidden],.hidden{display:none!important}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- Layout ---------- */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:16px 12px;border-right:2px solid var(--line);
  display:flex;flex-direction:column;gap:6px;background:#fff;overflow-y:auto}
.brand{display:flex;align-items:center;gap:9px;padding:2px 8px 14px;text-decoration:none}
.logo{width:34px;height:34px;border-radius:12px;background:var(--green);box-shadow:0 3px 0 var(--green-d);
  display:grid;place-items:center;color:#fff;flex:none}
.logo svg{width:20px;height:20px}
.brand b{font-size:18px;font-weight:900;color:var(--green);letter-spacing:-.3px;line-height:1}
.brand small{display:block;color:var(--hare);font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;margin-top:3px}

.nav{flex:1}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:12px;border:2px solid transparent;
  text-decoration:none;color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.7px;text-transform:uppercase;
  margin-bottom:3px;transition:background .12s}
.nav a svg{width:21px;height:21px;flex:none}
.nav a:hover{background:var(--polar)}
.nav a.active{background:var(--blue-bg);border-color:var(--blue-line);color:var(--blue-d)}

.me{border-top:2px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.me-row{display:flex;align-items:center;gap:10px;padding:0 4px;min-width:0}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--purple);box-shadow:0 3px 0 var(--purple-d);
  color:#fff;font-weight:900;display:grid;place-items:center;font-size:15px;flex:none}
.me-row>span:last-child{min-width:0}
.me-row b{display:block;font-weight:900;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-row small{color:var(--hare);font-weight:800;text-transform:uppercase;letter-spacing:.6px;font-size:10px}
.me form{margin:0}

.main{padding:22px 28px 48px;min-width:0}
.page-head{margin-bottom:16px}
.page-head h1{font-size:22px}
.page-head p{margin:4px 0 0;color:var(--muted);font-weight:700}

/* ---------- Components ---------- */
.card{border:2px solid var(--line);border-bottom-width:4px;border-radius:var(--r);padding:16px 18px;margin-bottom:14px;background:#fff;overflow-wrap:anywhere}
.card h2{font-size:16px;margin-bottom:2px}
.card .sub{color:var(--muted);margin:0 0 12px;font-weight:700;font-size:13px}

.btn{font:inherit;font-weight:900;font-size:13px;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;
  border:0;border-radius:14px;padding:10px 18px;color:#fff;background:var(--green);
  box-shadow:0 4px 0 var(--green-d);transition:transform .05s,box-shadow .05s,filter .1s;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.btn.block{width:100%}
.btn.blue{background:var(--blue);box-shadow:0 4px 0 var(--blue-d)}
.btn.red{background:var(--red);box-shadow:0 4px 0 var(--red-d)}
.btn.ghost{background:#fff;color:var(--blue-d);border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.btn.ghost.danger{color:var(--red)}
.btn.sm{padding:7px 12px;font-size:12px;border-radius:11px}
.btn svg{width:17px;height:17px}

label{display:block;font-weight:800;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
input,select,textarea{width:100%;font:inherit;font-weight:700;color:var(--ink);background:var(--polar);
  border:2px solid var(--line);border-radius:12px;padding:9px 12px;margin-bottom:12px;outline:none}
input::placeholder,textarea::placeholder{color:var(--hare)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);background:#fff}
textarea{min-height:84px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-weight:900;
  font-size:11px;letter-spacing:.6px;text-transform:uppercase}
.chip i{width:9px;height:9px;border-radius:50%;background:currentColor;display:inline-block}
.chip.ok{background:var(--green-bg);color:var(--green-d)}
.chip.bad{background:var(--red-bg);color:var(--red-d)}
.chip.warn{background:var(--yellow-bg);color:#9a7500}
.chip.mute{background:var(--polar);color:var(--muted);border:2px solid var(--line)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.stat{border:2px solid var(--line);border-bottom-width:4px;border-radius:var(--r);padding:10px 14px;display:flex;gap:11px;align-items:center}
.stat .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.stat .ic svg{width:21px;height:21px}
.stat .ic.g{background:var(--green);box-shadow:0 3px 0 var(--green-d)}
.stat .ic.y{background:var(--yellow);box-shadow:0 3px 0 var(--yellow-d)}
.stat .ic.b{background:var(--blue);box-shadow:0 3px 0 var(--blue-d)}
.stat b{display:block;font-size:20px;font-weight:900;line-height:1.1}
.stat small{color:var(--muted);font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.5px}

.device{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.device-l{display:flex;gap:12px;align-items:center}
.device-actions{display:flex;gap:8px;flex-wrap:wrap}
.device-actions form{margin:0}
.device-l b{font-weight:900;font-size:15px}
.phone{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--hare);box-shadow:0 3px 0 #8f8f8f}
.phone.on{background:var(--green);box-shadow:0 3px 0 var(--green-d)}
.phone svg{width:24px;height:24px}
.qrbox{margin-top:14px;border:2px dashed var(--blue-line);background:var(--blue-bg);border-radius:var(--r);padding:14px;text-align:center}
.qrbox b{font-weight:900;font-size:15px}
.qrbox .small{color:var(--muted);font-size:13px}
#qr{display:block;width:min(220px,100%);margin:10px auto;background:#fff;border-radius:14px;border:2px solid var(--line);padding:8px}

.hist{display:flex;flex-direction:column;gap:10px}
.hist-empty{color:var(--hare);margin:0}
.hist-item{display:flex;gap:10px;align-items:center;border:2px solid var(--line);border-radius:12px;padding:8px 12px}
.hist-item .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.hist-item .dot svg{width:15px;height:15px}
.hist-item .dot.ok{background:var(--green)}.hist-item .dot.err{background:var(--red)}
.hist-item div{min-width:0}
.hist-item b{display:block;font-weight:900;line-height:1.2}
.hist-item small{color:var(--muted);font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-item time{margin-left:auto;color:var(--hare);font-size:12px;font-weight:800;white-space:nowrap}

.section-title{margin:4px 0 10px;font-size:16px}
.keys{display:flex;flex-direction:column;gap:12px}
.key{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-bottom-width:4px;border-radius:var(--r);padding:10px 14px;flex-wrap:wrap}
.key .ki{width:38px;height:38px;border-radius:12px;background:var(--yellow);box-shadow:0 3px 0 var(--yellow-d);display:grid;place-items:center;color:#fff;flex:none}
.key .ki svg{width:21px;height:21px}
.key.revoked .ki{background:var(--hare);box-shadow:0 3px 0 #8f8f8f}
.key.revoked{opacity:.65}
.key .kt{flex:1;min-width:150px}
.key .kt b{display:block;font-weight:900}
.key .kt small{color:var(--muted);font-weight:700}
.key form{margin:0}
.empty{border:2px dashed var(--line);border-radius:var(--r);padding:22px;text-align:center;color:var(--muted)}

.ep{border:2px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.ep p{color:var(--muted);margin:6px 0 0;font-size:13px}
.method{display:inline-block;font-weight:900;font-size:11px;letter-spacing:.8px;border-radius:8px;padding:2px 8px;color:#fff;margin-right:8px}
.method.get{background:var(--blue)}.method.post{background:var(--green)}
pre{margin:10px 0 0;background:#2B3A42;color:#E6F1F5;border-radius:12px;padding:12px;overflow:auto;
  font:700 12.5px/1.55 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.base{background:var(--polar);border:2px solid var(--line);border-radius:12px;padding:6px 10px;display:inline-block;
  font:800 13px ui-monospace,Consolas,monospace;color:var(--blue-d);margin-top:4px;overflow-wrap:anywhere}
.lbl{color:var(--muted);margin:12px 0 4px;font-size:13px}

/* banner umpan balik ala "benar/salah" */
.toast{position:fixed;left:var(--side);right:0;bottom:0;padding:14px 28px;display:flex;align-items:center;gap:14px;
  transform:translateY(110%);transition:transform .25s ease;z-index:60;border-top:2px solid transparent}
.toast.show{transform:none}
.toast.ok{background:var(--green-bg);color:var(--green-d);border-color:#b6ee86}
.toast.err{background:var(--red-bg);color:var(--red-d);border-color:#ffbcbc}
.toast svg{width:28px;height:28px;flex:none}
.toast b{font-size:16px;font-weight:900;display:block;line-height:1.2}
.toast span{font-size:13px;font-weight:700}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:80;padding:16px}
.modal{background:#fff;border-radius:24px;padding:24px;width:min(460px,100%);text-align:center}
.modal h2{font-size:20px}
.modal p{color:var(--muted);margin:6px 0 0}
.modal .big{width:72px;height:72px;margin:0 auto 12px;border-radius:50%;background:var(--yellow);box-shadow:0 5px 0 var(--yellow-d);display:grid;place-items:center;color:#fff}
.modal .big.red{background:var(--red);box-shadow:0 5px 0 var(--red-d)}
.modal .big svg{width:38px;height:38px}
.modal .actions{display:flex;gap:10px;margin-top:16px}
.modal .actions .btn{flex:1}

.keyshow{text-align:center}
.keyshow .big{width:72px;height:72px;margin:0 auto 12px;border-radius:50%;background:var(--yellow);box-shadow:0 5px 0 var(--yellow-d);display:grid;place-items:center;color:#fff}
.keyshow .big svg{width:38px;height:38px}
.keyshow pre{text-align:left;font-size:14px}
.keyshow .actions{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--polar)}
.login-box{width:min(400px,100%)}
.login-hero{text-align:center;margin-bottom:20px}
.mascot{width:84px;height:84px;border-radius:26px;background:var(--green);box-shadow:0 5px 0 var(--green-d);
  margin:0 auto 12px;display:grid;place-items:center;color:#fff}
.mascot svg{width:48px;height:48px}
.login-hero h1{font-size:26px;color:var(--green)}
.login-hero p{color:var(--muted);margin:4px 0 0}
.login .card{margin:0}
.login .chip{margin:0 0 14px}

/* ---------- Mobile ---------- */
.tabbar{display:none}
.mobile-top{display:none;align-items:center;justify-content:space-between;margin-bottom:14px}
.mobile-top .brand{padding:0}
.mobile-top form{margin:0}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .main{padding:16px 14px 100px}
  .mobile-top{display:flex}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:2px solid var(--line);z-index:70;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:12px;border:2px solid transparent;
    color:var(--muted);text-decoration:none;font-size:10px;font-weight:900;letter-spacing:.5px;text-transform:uppercase}
  .tabbar a svg{width:24px;height:24px}
  .tabbar a.active{background:var(--blue-bg);border-color:var(--blue-line);color:var(--blue-d)}
  .toast{left:0;bottom:62px}
  .stats{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .page-head h1{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .btn,.toast{transition:none}
}