/* ==================================================================
   HANDLEAKUN — tema Hijau Botol & Putih
   Palet:
     --botol-900 #062a1c  (paling gelap)
     --botol-800 #0b3d2e  (sidebar)
     --botol-700 #0e4a37
     --botol-600 #124a37  (tombol utama)
     --botol-500 #17805c  (aksen)
     --hijau     #1fa97b  (sukses / aktif)
     --tint      #eaf4ef  (isi lembut)
     --kertas    #f5faf7  (latar aplikasi)
     --putih     #ffffff
   Data (nomor HP, username) memakai font monospace supaya rapi seperti buku
   catatan — ini ciri khas tampilan.
   ================================================================== */
:root{
  --botol-900:#062a1c;
  --botol-800:#0b3d2e;
  --botol-700:#0e4a37;
  --botol-600:#124a37;
  --botol-500:#17805c;
  --botol-400:#1fa97b;
  --hijau:#1fa97b;
  --hijau-terang:#34c98f;
  --tint:#eaf4ef;
  --tint-2:#dcebe3;
  --kertas:#f5faf7;
  --putih:#ffffff;
  --teks:#132019;
  --teks-2:#42544b;
  --teks-lembut:#6c7d74;
  --garis:#e2ece7;
  --garis-2:#d1e0d8;
  --merah:#d64545;
  --merah-bg:#fbecec;
  --kuning:#c07d18;
  --kuning-bg:#fbf1de;
  --info:#2f6db3;
  --shadow:0 1px 2px rgba(6,42,28,.05),0 6px 18px rgba(6,42,28,.06);
  --shadow-lg:0 12px 40px rgba(6,42,28,.18);
  --r:12px;
  --r-sm:9px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,Consolas,"Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--sans);background:var(--kertas);color:var(--teks);-webkit-font-smoothing:antialiased;}
svg{width:16px;height:16px;display:block;flex-shrink:0;}
.mono{font-family:var(--mono);}
a{color:var(--botol-500);}
button{font-family:inherit;}

/* ---------- Layar masuk ---------- */
.center-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(31,169,123,.14), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(11,61,46,.10), transparent 55%),
    var(--kertas);
}
.auth-box{width:100%;max-width:400px;}
.brand-mark{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:22px;}
.brand-logo{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(150deg,var(--botol-600),var(--botol-800));
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.brand-logo svg{width:24px;height:24px;stroke:#fff;}
.brand-name{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--botol-800);line-height:1;}
.brand-sub{font-size:12px;color:var(--teks-lembut);letter-spacing:.04em;text-transform:uppercase;margin-top:3px;}
.auth-title{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px;color:var(--teks);}
.auth-desc{color:var(--teks-lembut);font-size:14px;margin:0 0 22px;}

.card{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);box-shadow:var(--shadow);}
.auth-card{padding:26px;}
.field{margin-bottom:15px;}
.field:last-child{margin-bottom:0;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--teks-2);margin-bottom:6px;}
.field .req{color:var(--botol-500);}
.hint{font-size:12px;color:var(--teks-lembut);margin-top:5px;line-height:1.5;}

input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=tel],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--garis-2);border-radius:var(--r-sm);
  font-size:14px;background:var(--putih);color:var(--teks);font-family:inherit;transition:border-color .12s,box-shadow .12s;
}
textarea{resize:vertical;min-height:64px;line-height:1.5;}
input::placeholder,textarea::placeholder{color:#a7b6ae;}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--botol-500);box-shadow:0 0 0 3px rgba(23,128,92,.15);
}
input.mono{font-family:var(--mono);letter-spacing:.02em;}
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7d74' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px;padding-right:34px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  border-radius:var(--r-sm);padding:10px 16px;font-size:14px;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:background .12s,border-color .12s,opacity .12s;
}
.btn svg{width:15px;height:15px;}
.btn-primary{background:var(--botol-600);color:#fff;}
.btn-primary:hover{background:var(--botol-700);}
.btn-accent{background:var(--hijau);color:#04231a;}
.btn-accent:hover{background:var(--hijau-terang);}
.btn-ghost{background:var(--putih);border-color:var(--garis-2);color:var(--teks);}
.btn-ghost:hover{background:var(--tint);border-color:var(--tint-2);}
.btn-danger{background:var(--merah-bg);border-color:#f0cccc;color:var(--merah);}
.btn-danger:hover{background:#f7dede;}
.btn-block{width:100%;}
.btn-sm{padding:7px 12px;font-size:13px;}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none;}

.auth-foot{text-align:center;font-size:13.5px;color:var(--teks-lembut);margin-top:18px;}
.auth-foot a{color:var(--botol-500);font-weight:600;text-decoration:none;cursor:pointer;}
.auth-foot a:hover{text-decoration:underline;}
.alert{border-radius:var(--r-sm);padding:10px 12px;font-size:13px;margin-bottom:14px;line-height:1.5;}
.alert-err{background:var(--merah-bg);border:1px solid #f0cccc;color:#a63232;}
.alert-info{background:var(--tint);border:1px solid var(--tint-2);color:var(--botol-700);}

/* ---------- Kerangka aplikasi ---------- */
.shell{display:flex;min-height:100vh;}
.sidebar{
  width:236px;flex-shrink:0;background:var(--botol-800);color:#cfe3d9;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.sidebar-head{padding:18px 18px 16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.08);}
.sidebar-logo{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(150deg,var(--hijau),var(--botol-600));
  display:flex;align-items:center;justify-content:center;
}
.sidebar-logo svg{width:18px;height:18px;stroke:#fff;}
.sidebar-head .nm{font-size:15px;font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.01em;}
.sidebar-head .rl{font-size:11px;color:#8fb3a3;line-height:1.3;margin-top:1px;}
.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.nav-group{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6f9686;padding:14px 12px 6px;}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
  color:#cfe3d9;font-size:14px;cursor:pointer;background:transparent;border:none;width:100%;text-align:left;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav-item.active{background:var(--hijau);color:#04231a;font-weight:600;}
.nav-item.active svg{stroke:#04231a;}
.nav-item svg{width:17px;height:17px;stroke:#9fc0b1;}
.nav-item:hover svg{stroke:#fff;}
.nav-badge{margin-left:auto;font-size:11px;font-family:var(--mono);background:rgba(255,255,255,.12);
  color:#cfe3d9;padding:1px 7px;border-radius:20px;}
.nav-item.active .nav-badge{background:rgba(4,35,26,.18);color:#04231a;}
.sidebar-foot{padding:12px 10px;border-top:1px solid rgba(255,255,255,.08);}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;}
.user-av{width:30px;height:30px;border-radius:50%;background:var(--botol-600);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;}
.sidebar-user .u-nm{color:#fff;font-weight:600;line-height:1.2;}
.sidebar-user .u-rl{color:#8fb3a3;font-size:11px;line-height:1.2;}
.ver{text-align:center;font-size:10.5px;color:#5b7f6e;margin-top:8px;font-family:var(--mono);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  position:sticky;top:0;z-index:20;background:rgba(245,250,247,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--garis);padding:14px 26px;display:flex;align-items:center;gap:14px;
}
.topbar .menu-btn{display:none;background:none;border:none;cursor:pointer;color:var(--teks-2);}
.page-title{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--botol-800);}
.page-sub{font-size:12.5px;color:var(--teks-lembut);margin-top:1px;}
.topbar-spacer{flex:1;}
.content{padding:24px 26px 60px;max-width:1400px;width:100%;}

/* ---------- Kartu statistik ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.stat{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);}
.stat .lbl{font-size:12.5px;color:var(--teks-lembut);font-weight:600;display:flex;align-items:center;gap:7px;}
.stat .lbl svg{width:15px;height:15px;stroke:var(--botol-500);}
.stat .val{font-size:30px;font-weight:700;letter-spacing:-.03em;color:var(--botol-800);margin-top:8px;line-height:1;font-family:var(--mono);}
.stat .cap{font-size:12px;color:var(--teks-lembut);margin-top:6px;}
.meter{height:7px;border-radius:20px;background:var(--tint-2);overflow:hidden;margin-top:12px;}
.meter > span{display:block;height:100%;background:linear-gradient(90deg,var(--botol-500),var(--hijau-terang));border-radius:20px;}

.panel{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:20px;}
.panel-head{padding:15px 18px;border-bottom:1px solid var(--garis);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.panel-head h3{margin:0;font-size:15px;font-weight:700;color:var(--botol-800);letter-spacing:-.01em;}
.panel-head .sub{font-size:12.5px;color:var(--teks-lembut);}
.panel-body{padding:18px;}
.panel-body.flush{padding:0;}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.search{position:relative;flex:1;min-width:200px;max-width:360px;}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);stroke:var(--teks-lembut);width:16px;height:16px;}
.search input{padding-left:34px;}
.seg{display:inline-flex;background:var(--tint);border:1px solid var(--garis);border-radius:var(--r-sm);padding:3px;gap:2px;}
.seg button{border:none;background:none;padding:6px 12px;font-size:13px;font-weight:600;color:var(--teks-2);border-radius:6px;cursor:pointer;}
.seg button.on{background:var(--putih);color:var(--botol-700);box-shadow:var(--shadow);}

/* ---------- MATRIKS (ciri khas) ---------- */
.matrix-wrap{overflow:auto;border-radius:var(--r);border:1px solid var(--garis);background:var(--putih);box-shadow:var(--shadow);}
table.matrix{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:13px;}
table.matrix th,table.matrix td{border-bottom:1px solid var(--garis);border-right:1px solid var(--garis);}
table.matrix thead th{
  position:sticky;top:0;z-index:6;background:var(--botol-800);color:#dcefe6;font-weight:600;
  padding:0;height:64px;vertical-align:bottom;
}
.pcol{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 8px;min-width:104px;}
.pav{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:12px;flex-shrink:0;}
.pcol .pn{font-size:11.5px;color:#dcefe6;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
.pcol .capi{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:#7fdcb8;font-weight:700;}

table.matrix thead th.corner{left:0;z-index:8;text-align:left;vertical-align:middle;padding:0 16px;min-width:214px;}
table.matrix thead th.corner .ttl{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8fb3a3;}
table.matrix thead th.tail{min-width:96px;}
table.matrix thead th.tail .pcol .pn{color:#8fb3a3;}

.idcell{
  position:sticky;left:0;z-index:5;background:var(--putih);padding:11px 16px;min-width:214px;vertical-align:middle;
}
tr:hover .idcell{background:var(--tint);}
.idcell .hp{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--botol-800);letter-spacing:.01em;}
.idcell .ow{font-size:12px;color:var(--teks-lembut);margin-top:2px;display:flex;align-items:center;gap:6px;}
.idcell .ow .lbl-tag{background:var(--tint);color:var(--botol-600);border-radius:5px;padding:0 6px;font-size:10.5px;font-weight:700;}

td.cell{padding:6px;text-align:center;vertical-align:middle;min-width:104px;height:58px;cursor:pointer;}
td.cell:hover{background:var(--tint);}
.chip{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:6px 6px;border-radius:8px;
  background:var(--tint);border:1px solid var(--tint-2);position:relative;
}
.chip .u{font-family:var(--mono);font-size:11.5px;color:var(--botol-800);font-weight:600;max-width:88px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chip .dot{width:7px;height:7px;border-radius:50%;position:absolute;top:5px;right:5px;}
.chip.st-aktif{background:#e7f5ee;border-color:#c7e8d7;}
.chip.st-nonaktif{background:#f0f2f1;border-color:#dde3e0;}
.chip.st-banned{background:var(--merah-bg);border-color:#f0cccc;}
.chip.st-pending{background:var(--kuning-bg);border-color:#f0e0be;}
.dot.aktif{background:var(--hijau);}
.dot.nonaktif{background:#9aa8a1;}
.dot.banned{background:var(--merah);}
.dot.pending{background:var(--kuning);}
.chip .flags{display:flex;gap:3px;}
.chip .flags svg{width:11px;height:11px;stroke:var(--botol-500);}
.empty{
  display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:40px;border-radius:8px;
  border:1.5px dashed var(--garis-2);color:#a7b6ae;font-size:12px;
}
td.cell:hover .empty{border-color:var(--hijau);color:var(--botol-500);background:var(--putih);}
td.cell:hover .empty .plus{opacity:1;}
.empty .plus{opacity:.5;}
.empty svg{width:13px;height:13px;}
td.tail{padding:8px 12px;text-align:center;min-width:96px;}
.cov{display:inline-flex;flex-direction:column;gap:5px;align-items:center;}
.cov .n{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--botol-700);}
.cov .bar{width:64px;height:6px;border-radius:20px;background:var(--tint-2);overflow:hidden;}
.cov .bar > span{display:block;height:100%;background:var(--hijau);}

.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--teks-lembut);align-items:center;}
.legend .it{display:flex;align-items:center;gap:6px;}
.legend .sw{width:22px;height:14px;border-radius:5px;}
.legend .sw.filled{background:#e7f5ee;border:1px solid #c7e8d7;}
.legend .sw.emptysw{border:1.5px dashed var(--garis-2);}

/* ---------- Tabel biasa ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
table.tbl th{text-align:left;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--teks-lembut);
  font-weight:700;padding:11px 14px;border-bottom:1px solid var(--garis);}
table.tbl td{padding:12px 14px;border-bottom:1px solid var(--garis);vertical-align:middle;}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl tbody tr:hover,table.tbl tr:hover{background:var(--tint);}
.tbl .mut{color:var(--teks-lembut);}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:20px;}
.pill.aktif{background:#e7f5ee;color:#12805a;}
.pill.nonaktif{background:#eef1ef;color:#5b6b63;}
.pill.banned{background:var(--merah-bg);color:#a63232;}
.pill.pending{background:var(--kuning-bg);color:#96610f;}
.kat-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--tint);color:var(--botol-600);text-transform:capitalize;}
.row-actions{display:flex;gap:6px;justify-content:flex-end;}
.icon-btn{border:1px solid var(--garis-2);background:var(--putih);border-radius:7px;padding:6px;cursor:pointer;color:var(--teks-2);display:flex;}
.icon-btn:hover{background:var(--tint);border-color:var(--tint-2);}
.icon-btn.danger:hover{background:var(--merah-bg);border-color:#f0cccc;color:var(--merah);}
.icon-btn svg{width:15px;height:15px;}

.empty-state{text-align:center;padding:48px 20px;color:var(--teks-lembut);}
.empty-state .ico{width:52px;height:52px;border-radius:14px;background:var(--tint);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.empty-state .ico svg{width:24px;height:24px;stroke:var(--botol-500);}
.empty-state h4{margin:0 0 5px;color:var(--teks);font-size:16px;}
.empty-state p{margin:0 0 16px;font-size:13.5px;max-width:380px;margin-inline:auto;line-height:1.6;}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(6,42,28,.42);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:34px 16px;z-index:100;overflow-y:auto;}
.modal{background:var(--putih);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:540px;margin:auto;}
.modal.wide{max-width:680px;}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--garis);display:flex;align-items:center;gap:12px;}
.modal-head .m-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0;font-size:14px;}
.modal-head h3{margin:0;font-size:16px;font-weight:700;color:var(--botol-800);letter-spacing:-.01em;}
.modal-head .m-sub{font-size:12.5px;color:var(--teks-lembut);margin-top:1px;}
.modal-head .x{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--teks-lembut);padding:5px;border-radius:7px;}
.modal-head .x:hover{background:var(--tint);color:var(--teks);}
.modal-body{padding:22px;}
.modal-foot{padding:16px 22px;border-top:1px solid var(--garis);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid2 .full{grid-column:1/-1;}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--garis);margin-bottom:18px;}
.tabs button{border:none;background:none;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--teks-lembut);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.tabs button.on{color:var(--botol-700);border-bottom-color:var(--botol-500);}

.pw-row{display:flex;gap:8px;}
.pw-row input{flex:1;}
.toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:13.5px;color:var(--teks-2);}
.toggle input{display:none;}
.toggle .tk{width:38px;height:22px;border-radius:20px;background:var(--garis-2);position:relative;transition:background .15s;flex-shrink:0;}
.toggle .tk::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s;}
.toggle input:checked + .tk{background:var(--hijau);}
.toggle input:checked + .tk::after{left:18px;}

/* ---------- Inbox / konektor ---------- */
.conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.conn{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);}
.conn-top{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.conn-top .pav{width:34px;height:34px;border-radius:10px;font-size:14px;}
.conn-top .nm{font-weight:700;color:var(--botol-800);font-size:15px;}
.conn-top .st{font-size:11.5px;font-weight:700;margin-top:1px;}
.st-on{color:var(--hijau);}
.st-off{color:var(--teks-lembut);}
.st-soon{color:var(--kuning);}
.conn .cara{font-size:12.5px;color:var(--teks-lembut);line-height:1.6;margin:0 0 12px;}
.conn .prog{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--teks-2);}
.conn .prog .bar{flex:1;height:6px;border-radius:20px;background:var(--tint-2);overflow:hidden;}
.conn .prog .bar>span{display:block;height:100%;background:var(--hijau);}
.chips-need{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.chips-need span{font-family:var(--mono);font-size:10.5px;background:var(--tint);color:var(--botol-600);padding:2px 7px;border-radius:5px;}

.notice{background:var(--tint);border:1px solid var(--tint-2);border-radius:var(--r);padding:14px 16px;font-size:13px;color:var(--botol-700);line-height:1.6;display:flex;gap:11px;margin-bottom:18px;}
.notice svg{width:18px;height:18px;stroke:var(--botol-500);flex-shrink:0;margin-top:1px;}

/* ---------- Toast ---------- */
.toasts{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:9px;}
.toast{background:var(--botol-800);color:#eafaf3;padding:11px 15px;border-radius:10px;font-size:13.5px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;max-width:340px;animation:slidein .2s ease;}
.toast svg{width:16px;height:16px;stroke:var(--hijau-terang);}
.toast.err{background:#7a2727;}
.toast.err svg{stroke:#ffc9c9;}
@keyframes slidein{from{transform:translateY(8px);opacity:0;}to{transform:translateY(0);opacity:1;}}

.spinner{width:20px;height:20px;border:2.5px solid var(--tint-2);border-top-color:var(--botol-500);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-full{min-height:60vh;display:flex;align-items:center;justify-content:center;}

.scrim{display:none;}
/* ---------- Responsif ---------- */
@media(max-width:860px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s;z-index:120;box-shadow:var(--shadow-lg);}
  .sidebar.open{transform:translateX(0);}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(6,42,28,.4);z-index:110;}
  .topbar .menu-btn{display:flex;}
  .content{padding:18px 16px 60px;}
  .topbar{padding:12px 16px;}
  .grid2{grid-template-columns:1fr;}
}