:root{
  --ink:#0F1419; --ink-2:#181F26; --ink-3:#2B353F;
  --paper:#ECEEF0; --card:#fff; --line:#D6DADE; --line-soft:#E6E9EC;
  --text:#161D24; --muted:#63707C;
  --signal:#12766A; --wait:#A9761A; --alert:#AF3A31;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r:4px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--text);font:15px/1.55 var(--ui);-webkit-font-smoothing:antialiased}
a{color:var(--signal)}
a:hover{color:#0d5a51}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:2px}

/* ---------- kerangka ---------- */
.shell{display:flex;min-height:100vh}
.rail{width:212px;flex:none;background:var(--ink);color:#C7D0D8;display:flex;flex-direction:column}
.brand{padding:20px 18px 16px;border-bottom:1px solid var(--ink-3)}
.brand b{display:block;font:600 15px/1.2 var(--ui);color:#fff;letter-spacing:-.01em}
.brand span{display:block;margin-top:3px;font:11px/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#6C7A87}
.rail nav{padding:10px 0;flex:1}
.rail a{display:flex;justify-content:space-between;gap:8px;padding:9px 18px;color:#AEB9C4;text-decoration:none;font-size:14px;border-left:2px solid transparent}
.rail a:hover{background:var(--ink-2);color:#fff}
.rail a.on{background:var(--ink-2);color:#fff;border-left-color:var(--signal)}
.rail a em{font:11px/1 var(--mono);font-style:normal;color:#6C7A87;align-self:center}
.rail .foot{padding:14px 18px;border-top:1px solid var(--ink-3);font:11px/1.5 var(--mono);color:#6C7A87}
.rail .foot a{padding:0;display:inline;color:#8C99A5;border:0}
.main{flex:1;min-width:0;padding:26px 30px 60px;max-width:1180px}

/* ---------- tipografi ---------- */
h1{font:600 22px/1.25 var(--ui);letter-spacing:-.015em;margin:0 0 4px}
h2{font:600 15px/1.3 var(--ui);margin:0 0 12px}
.eyebrow{font:11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 22px}
.mono{font-family:var(--mono)}
code{font:12.5px/1.4 var(--mono);background:#E3E7EA;padding:1px 5px;border-radius:3px}
pre{font:12.5px/1.6 var(--mono);background:var(--ink);color:#C7D0D8;padding:14px 16px;border-radius:var(--r);overflow:auto}

/* ---------- kartu ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:0 0 18px}
.card>h2:first-child,.card>.eyebrow:first-child{margin-top:0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}

.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px}
.stat b{display:block;font:500 27px/1.1 var(--mono);letter-spacing:-.02em}
.stat span{display:block;margin-top:5px;font:11px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* ---------- meter antrian (elemen tanda tangan) ---------- */
.meter{display:flex;height:12px;border-radius:2px;overflow:hidden;background:#DDE2E6;border:1px solid var(--line)}
.meter i{display:block;height:100%}
.meter .s{background:var(--signal)}
.meter .f{background:var(--alert)}
.meter .p{background:repeating-linear-gradient(135deg,#C3CAD1 0 5px,#D5DADF 5px 10px)}
.legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:11px;font:12px/1 var(--mono)}
.legend b{font-weight:500}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend .s i{background:var(--signal)} .legend .f i{background:var(--alert)} .legend .p i{background:#C3CAD1}
.legend span{color:var(--muted)}

/* ---------- form ---------- */
label{display:block;font:12px/1.4 var(--ui);font-weight:600;margin:0 0 5px}
label .hint{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;font:14px/1.4 var(--ui);color:var(--text)}
input.mono,textarea.mono,select.mono{font-family:var(--mono);font-size:13px}
textarea{resize:vertical;min-height:110px}
input:focus,select:focus,textarea:focus{border-color:var(--signal);outline:none;box-shadow:0 0 0 3px rgba(18,118,106,.13)}
.field{margin:0 0 14px}
.row{display:flex;flex-wrap:wrap;gap:14px}
.row>.field{flex:1 1 170px;margin-bottom:0}
.check{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px}
.check input{width:auto}

.btn{display:inline-block;border:1px solid var(--ink);background:var(--ink);color:#fff;
  padding:8px 15px;border-radius:var(--r);font:600 13.5px/1.3 var(--ui);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--ink-2);color:#fff}
.btn.ghost{background:#fff;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{background:#F5F7F8;color:var(--text)}
.btn.go{background:var(--signal);border-color:var(--signal)}
.btn.go:hover{background:#0d5a51}
.btn.danger{background:#fff;color:var(--alert);border-color:#E3BFBC}
.btn.danger:hover{background:#FBF2F1;color:var(--alert)}
.btn[disabled]{opacity:.45;pointer-events:none}
.actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}

/* ---------- tabel ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font:11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:0 10px 9px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
td.m,th.m{font-family:var(--mono);font-size:12.5px}
td.num{text-align:right;font-family:var(--mono)}
.tablewrap{overflow-x:auto;margin:0 -20px;padding:0 20px}

.tag{display:inline-block;font:11px/1.5 var(--mono);padding:1px 7px;border-radius:10px;border:1px solid}
.tag.active,.tag.sent,.tag.done{color:var(--signal);border-color:#B6D6D1;background:#EEF6F5}
.tag.unsubscribed,.tag.paused,.tag.draft,.tag.pending,.tag.queued{color:var(--wait);border-color:#E4D3AE;background:#FBF6EA}
.tag.bounced,.tag.failed,.tag.canceled{color:var(--alert);border-color:#E3BFBC;background:#FBF1F0}
.tag.sending{color:#0F5EA8;border-color:#B9D2EA;background:#EDF4FB}

/* ---------- pesan ---------- */
.flash{border:1px solid #B6D6D1;background:#EEF6F5;color:#0C4F47;padding:11px 14px;border-radius:var(--r);
  margin:0 0 18px;font-size:13.5px}
.flash.err{border-color:#E3BFBC;background:#FBF1F0;color:#7E2A23}
.note{border-left:2px solid var(--line);padding:2px 0 2px 13px;color:var(--muted);font-size:13px;margin:14px 0}
.empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:13.5px}
.empty b{display:block;color:var(--text);font-size:15px;margin-bottom:5px}

/* ---------- halaman masuk / setup ---------- */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--ink)}
.gate .box{width:100%;max-width:372px;background:var(--card);border-radius:6px;padding:30px}
.gate .brandline{font:11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.gate h1{font-size:20px;margin-bottom:20px}

/* ---------- responsif ---------- */
@media (max-width:900px){
  .shell{display:block}
  .rail{width:auto;position:sticky;top:0;z-index:9}
  .rail nav{display:flex;overflow-x:auto;padding:0}
  .rail nav a{border-left:0;border-bottom:2px solid transparent;white-space:nowrap;padding:12px 14px}
  .rail nav a.on{border-left:0;border-bottom-color:var(--signal)}
  .rail a em,.rail .foot{display:none}
  .brand{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 16px}
  .brand span{margin-top:0}
  .main{padding:20px 16px 50px}
  .tablewrap{margin:0 -16px;padding:0 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}