/* CekResi v9 — style.css — Mobile-first responsive */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #f1f5f9; color: #1e293b; min-height: 100vh; }
*, input, button, select, textarea { font-family: inherit; }
a { color: #3b82f6; text-decoration: none; }

:root {
  --nav-h:56px; --drawer-w:280px; --page-max:900px;
  --card-gap:12px; --section-gap:14px;
  --r1:8px; --r2:12px; --r3:16px; --r4:20px;
  --sx:0 1px 3px rgba(0,0,0,.06);
  --sm:0 2px 8px rgba(0,0,0,.08);
  --md:0 4px 16px rgba(0,0,0,.1);
  --lg:0 12px 40px rgba(0,0,0,.14);
  --blue:#3b82f6; --blue-d:#2563eb; --blue-l:#eff6ff;
  --indigo:#6366f1; --indigo-d:#4f46e5;
  --purple:#8b5cf6;
  --green:#22c55e; --green-d:#16a34a; --green-l:#f0fdf4;
  --amber:#f59e0b; --amber-d:#d97706; --amber-l:#fffbeb;
  --red:#ef4444; --red-d:#dc2626; --red-l:#fef2f2;
  --g50:#f8fafc; --g100:#f1f5f9; --g200:#e2e8f0;
  --g300:#cbd5e1; --g400:#94a3b8; --g500:#64748b;
  --g600:#475569; --g700:#334155; --g800:#1e293b;
}

/* ── TOPNAV ── */
.topnav { position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:linear-gradient(135deg,#1e3a8a,#2563eb 55%,#4f46e5);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 14px;z-index:200;box-shadow:0 2px 20px rgba(37,99,235,.4); }
.topnav-left,.topnav-right { display:flex;align-items:center;gap:8px; }
.topnav-brand { display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none; }
.brand-icon { font-size:1.2rem; }
.brand-text { font-weight:800;font-size:.95rem; }
.quota-chip { display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:3px 9px;border-radius:20px;font-size:.77rem; }
.quota-chip span { opacity:.8; }
.quota-chip strong,#nav-quota { font-weight:700; }
.expiry-badge { background:rgba(245,158,11,.3);border:1px solid rgba(245,158,11,.5);color:#fde68a;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:600; }
.nav-btn { display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:var(--r1);cursor:pointer;text-decoration:none;position:relative;transition:background .2s; }
.nav-btn:hover,.nav-btn.nav-active { background:rgba(255,255,255,.3);color:#fff; }
.notif-dot { position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:#f87171;border:1.5px solid #1e3a8a; }
.burger-btn { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:36px;height:36px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:var(--r1);cursor:pointer;flex-shrink:0;transition:background .2s; }
.burger-btn:hover { background:rgba(255,255,255,.28); }
.burger-btn span { display:block;width:16px;height:2px;background:#fff;border-radius:2px;transition:all .25s; }
.burger-btn.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity:0; }
.burger-btn.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ── DRAWER ── */
.drawer-overlay { position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(2px); }
.drawer-overlay.open { opacity:1;pointer-events:auto; }
.drawer { position:fixed;top:0;left:0;width:var(--drawer-w);height:100vh;background:#fff;z-index:400;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:var(--lg); }
.drawer.open { transform:translateX(0); }
.drawer-hd { display:flex;align-items:center;justify-content:space-between;padding:16px;background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;position:sticky;top:0;z-index:1;font-weight:700;font-size:1rem; }
.drawer-close-btn { background:rgba(255,255,255,.2);border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:background .2s; }
.drawer-close-btn:hover { background:rgba(255,255,255,.35); }
.drawer-user { display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#eff6ff,#eef2ff);border-bottom:1px solid var(--g200); }
.d-avatar { width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;font-weight:700;font-size:1.1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(99,102,241,.35); }
.d-name { font-weight:700;font-size:.9rem; }
.d-sub { font-size:.74rem;color:var(--g500);margin-top:2px; }
.d-admin-tag { display:inline-block;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:1px 8px;border-radius:10px;font-size:.68rem;font-weight:700;margin-top:3px; }
.d-nav { padding:10px; }
.d-link { display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r2);color:var(--g700);text-decoration:none;font-size:.9rem;font-weight:500;transition:all .2s;margin-bottom:2px; }
.d-link:hover { background:var(--blue-l);color:var(--blue-d); }
.d-link.d-active { background:linear-gradient(135deg,#eff6ff,#eef2ff);color:var(--blue-d);font-weight:700;border-left:3px solid var(--blue); }
.d-icon { font-size:1.05rem;width:22px;text-align:center; }
.d-badge { margin-left:auto;background:var(--red);color:#fff;padding:2px 7px;border-radius:10px;font-size:.68rem;font-weight:700; }
.d-divider { padding:10px 12px 6px;font-size:.68rem;text-transform:uppercase;letter-spacing:.8px;color:var(--g400);font-weight:700;border-top:1px solid var(--g200);margin-top:6px; }
.d-quota-mini { padding:12px 16px;background:var(--g50);border-top:1px solid var(--g200); }
.dqm-title { font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;color:var(--g500);font-weight:700;margin-bottom:8px; }
.dqm-row { display:flex;justify-content:space-between;align-items:center;padding:2px 0;font-size:.82rem; }
.dqm-row span { color:var(--g500); }
.c-success { color:var(--green-d) !important; }
.c-danger  { color:var(--red-d)   !important; }

/* ── PAGE LAYOUT ── */
.page-main { max-width:var(--page-max);margin:0 auto;padding:calc(var(--nav-h) + 14px) 12px 28px; }
.ads-bar { text-align:center;margin-bottom:12px;padding:8px;background:#fff;border-radius:var(--r2);border:1px solid var(--g200); }

/* ── PAGE CARDS ── */
.page-card { background:#fff;border-radius:var(--r4);box-shadow:var(--sm);border:1px solid var(--g200);padding:16px 14px;margin-bottom:var(--section-gap);overflow:hidden; }
.pc-purple-accent { border-top:3px solid var(--purple); }
.pc-header { display:flex;align-items:flex-start;gap:12px;margin-bottom:14px; }
.pc-icon { width:42px;height:42px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff; }
.pc-blue   { background:linear-gradient(135deg,#3b82f6,#6366f1);box-shadow:0 3px 10px rgba(99,102,241,.3); }
.pc-purple { background:linear-gradient(135deg,#8b5cf6,#6366f1);box-shadow:0 3px 10px rgba(139,92,246,.3); }
.pc-green  { background:linear-gradient(135deg,#34d399,#22c55e);box-shadow:0 3px 10px rgba(34,197,94,.25); }
.pc-amber  { background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 3px 10px rgba(245,158,11,.25); }
.pc-indigo { background:linear-gradient(135deg,#6366f1,#4f46e5);box-shadow:0 3px 10px rgba(99,102,241,.3); }
.pc-title { font-size:.97rem;font-weight:800;color:var(--g800);margin-bottom:2px;line-height:1.3; }
.pc-sub   { font-size:.78rem;color:var(--g500); }
.pc-header-title-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.pc-badge-sc { background:var(--amber-l);color:var(--amber-d);border:1px solid var(--amber);padding:2px 9px;border-radius:20px;font-size:.7rem;font-weight:700; }

/* ── FORM ── */
.form-row { display:flex;flex-wrap:wrap;gap:9px;align-items:flex-end; }
.fc { display:flex;flex-direction:column;gap:4px;min-width:0; }
.fc-lbl { font-size:.66rem;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap; }
.fc-resi  { flex:1 1 140px; }
.fc-jml   { flex:0 0 64px; }
.fc-kurir { flex:1 1 110px;max-width:170px; }
.fc-mode  { flex:0 0 100px; }
.fc-btn   { flex:0 0 auto; }
.fc-input-wrap { position:relative; }
.fc-ico { position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--g400);pointer-events:none; }
.fc-input-wrap input { padding-left:30px; }
.fc input,.fc select { width:100%;padding:9px 10px;border:1.5px solid var(--g200);border-radius:var(--r1);font-size:.87rem;color:var(--g800);background:var(--g50);transition:border-color .2s,box-shadow .2s; }
.fc input:focus,.fc select:focus { outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.12);background:#fff; }
.fc-sel-wrap { position:relative; }
.fc-sel-wrap select { appearance:none;padding-right:24px;cursor:pointer; }
.sel-arrow { position:absolute;right:7px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--g400); }
.info-note { display:flex;align-items:flex-start;gap:8px;padding:9px 12px;border-radius:var(--r2);background:linear-gradient(135deg,#eff6ff,#eef2ff);border-left:4px solid var(--blue);color:#1e40af;font-size:.83rem;margin-bottom:13px; }

/* ── BUTTONS ── */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:9px 15px;border:none;border-radius:var(--r1);font-size:.85rem;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .2s;line-height:1;font-family:inherit; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-blue   { background:linear-gradient(135deg,var(--blue),var(--indigo));color:#fff;box-shadow:0 2px 8px rgba(99,102,241,.35); }
.btn-blue:hover { box-shadow:0 4px 14px rgba(99,102,241,.45);color:#fff; }
.btn-purple { background:linear-gradient(135deg,var(--purple),var(--indigo));color:#fff;box-shadow:0 2px 8px rgba(139,92,246,.3); }
.btn-purple:hover { color:#fff; }
.btn-green  { background:linear-gradient(135deg,#34d399,var(--green));color:#fff; }
.btn-green:hover { color:#fff; }
.btn-amber  { background:linear-gradient(135deg,#fbbf24,var(--amber));color:#fff; }
.btn-amber:hover { color:#fff; }
.btn-red    { background:linear-gradient(135deg,#f87171,var(--red));color:#fff; }
.btn-red:hover { color:#fff; }
.btn-ghost  { background:var(--g100);color:var(--g600);border:1.5px solid var(--g200); }
.btn-ghost:hover { background:var(--g200); }
.btn-sm { padding:5px 10px;font-size:.77rem; }
.btn-track-submit { min-width:90px; }

/* ═══════════════════════════════════════════
   RESULTS SECTION — terpisah di bawah forms
═══════════════════════════════════════════ */
.results-section { margin-bottom:var(--section-gap); }
.results-section-hd { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px;padding:0 2px; }
.rsh-left { display:flex;align-items:center;gap:7px;font-weight:700;font-size:.93rem;color:var(--g800); }
.res-count { display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:linear-gradient(135deg,var(--blue),var(--indigo));color:#fff;border-radius:11px;font-size:.71rem;font-weight:700; }
.rsh-right { display:flex;gap:6px; }

/* Results grid — default 1 col, responsive via media queries */
.results-grid { display:grid;grid-template-columns:1fr;gap:var(--card-gap); }

/* ═══════════════════════════════════════════
   RESULT CARD
═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   RESULT CARD — Premium redesign
═══════════════════════════════════════════ */
.rcard {
  background:#fff;border-radius:var(--r3);overflow:hidden;
  min-width:0;max-width:100%;
  transition:box-shadow .25s,transform .25s;
  border:none;
  box-shadow:0 2px 8px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05);
}
.rcard:hover { box-shadow:0 8px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06); transform:translateY(-2px); }

/* Colored top accent bar */
.rc-skip  { border-top:3px solid #94a3b8; }
.rc-match { border-top:3px solid #22c55e; box-shadow:0 2px 12px rgba(34,197,94,.15), 0 0 0 1px rgba(34,197,94,.12); }
.rc-err   { border-top:3px solid #ef4444; box-shadow:0 2px 8px rgba(239,68,68,.1),  0 0 0 1px rgba(239,68,68,.1); }

/* ── Card Header ── */
.rcard-head {
  display:flex;align-items:center;gap:10px;
  padding:11px 13px 11px;
  background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);
  border-bottom:1px solid #e2e8f0;
}
.rc-match .rcard-head {
  background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);
  border-bottom-color:#bbf7d0;
}
.rc-err .rcard-head {
  background:linear-gradient(135deg,#fef2f2 0%,#fee2e2 100%);
  border-bottom-color:#fecaca;
}

.rcard-head-icon {
  width:36px;height:36px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
}
.rhi-skip  { background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; box-shadow:0 3px 8px rgba(99,102,241,.4); }
.rhi-match { background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; box-shadow:0 3px 8px rgba(34,197,94,.4); }
.rhi-err   { background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; box-shadow:0 3px 8px rgba(239,68,68,.4); }

.rcard-head-main { flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px; }
.rcard-resi-row { display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden; }
.rcard-resi { font-family:'Fira Mono','Consolas',monospace;font-size:.8rem;font-weight:700;letter-spacing:.3px;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; }

.copy-btn { display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.8);border:1px solid #e2e8f0;color:#94a3b8;width:24px;height:24px;min-width:24px;border-radius:6px;cursor:pointer;transition:all .2s;flex-shrink:0; }
.copy-btn:hover { background:#eff6ff;border-color:#3b82f6;color:#3b82f6;transform:scale(1.1); }

/* Status label badges in header */
.rcard-lbl { display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:.68rem;font-weight:800;white-space:nowrap;flex-shrink:0;letter-spacing:.3px; }
.rcard-lbl-skip  { background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0; }
.rcard-lbl-match { background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 2px 6px rgba(34,197,94,.35); }
.rcard-lbl-err   { background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 6px rgba(239,68,68,.35); }

/* ── Card Body ── */
.rcard-body { padding:12px 13px; }

.rcard-errmsg { display:flex;align-items:flex-start;gap:7px;color:#dc2626;font-size:.84rem;padding:9px 11px;background:linear-gradient(135deg,#fef2f2,#fee2e2);border-radius:8px;border-left:3px solid #ef4444;word-break:break-word; }

/* Location row with arrow */
.rcard-loc { display:flex;align-items:flex-start;gap:6px;margin-bottom:10px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:10px;padding:10px 11px;border:1px solid #e2e8f0; }
.rloc-item { flex:1;min-width:0; }
.rloc-arrow { display:flex;align-items:center;color:#94a3b8;flex-shrink:0;padding-top:16px; }
.rloc-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-bottom:4px; }
.rloc-dot-from { background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 0 0 2px #fee2e2; }
.rloc-dot-to   { background:linear-gradient(135deg,#3b82f6,#6366f1);box-shadow:0 0 0 2px #dbeafe; }
.rloc-lbl { font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#94a3b8;margin-bottom:2px; }
.rloc-val { font-size:.83rem;font-weight:700;color:#1e293b;line-height:1.3;word-break:break-word; }

/* Sender / Receiver */
.rcard-people { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px; }
.rp-item { display:flex;align-items:flex-start;gap:7px;background:#f8fafc;border-radius:8px;padding:8px 9px;border:1px solid #f1f5f9; }
.rp-avatar { width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px; }
.rp-avatar-s { background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff; }
.rp-avatar-r { background:linear-gradient(135deg,#34d399,#059669);color:#fff; }
.rp-lbl { font-size:.59rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;margin-bottom:2px; }
.rp-val { font-size:.81rem;font-weight:600;color:#334155;line-height:1.3;word-break:break-word; }

/* Status badge */
.rcard-status-row {
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:6px;margin-bottom:9px;
}

/* Waktu pembuatan resi di samping status */
.rcard-created {
  display:inline-flex;align-items:center;gap:4px;
  font-size:.69rem;font-weight:600;color:#64748b;
  background:linear-gradient(135deg,#f8fafc,#f1f5f9);
  border:1px solid #e2e8f0;
  padding:3px 9px;border-radius:20px;
  white-space:nowrap;
  font-family:'Fira Mono','Consolas',monospace;
  letter-spacing:.2px;
}
.rcard-created svg { color:#94a3b8;flex-shrink:0; }
.rcard-status-badge { display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-weight:700;font-size:.78rem;word-break:break-word; }
.rsb-ok      { background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d;border:1px solid #86efac; }
.rsb-process { background:linear-gradient(135deg,#fef9c3,#fde68a);color:#a16207;border:1px solid #fbbf24; }
.rsb-pickup  { background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1d4ed8;border:1px solid #93c5fd; }
.rsb-def     { background:linear-gradient(135deg,#f8fafc,#f1f5f9);color:#475569;border:1px solid #e2e8f0; }
.rsb-pulse { width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8;flex-shrink:0;animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:.8;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }

/* History */
.rcard-hist { border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fff; }
.rcard-hist summary { display:flex;align-items:center;gap:7px;padding:8px 11px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);cursor:pointer;font-size:.8rem;font-weight:700;color:#475569;list-style:none;user-select:none;transition:background .15s; }
.rcard-hist summary::-webkit-details-marker { display:none; }
.rcard-hist summary:hover { background:linear-gradient(135deg,#f1f5f9,#e2e8f0); }
.hist-count { display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;border-radius:10px;font-size:.67rem;font-weight:700; }
.h-chev { margin-left:auto;transition:transform .25s;color:#94a3b8;flex-shrink:0; }
.rcard-hist[open] .h-chev { transform:rotate(90deg); }
.rcard-hist[open] summary { border-bottom:1px solid #e2e8f0;background:linear-gradient(135deg,#eff6ff,#eef2ff); }
.hist-body { padding:8px 11px;background:#fff; }
.hist-row { display:flex;gap:10px;padding:7px 0;border-bottom:1px solid #f8fafc;position:relative; }
.hist-row:last-child { border-bottom:none; }
.hist-row::before { content:'';position:absolute;left:4px;top:17px;bottom:-7px;width:1px;background:#e2e8f0; }
.hist-row-first::before,.hist-row:last-child::before { display:none; }
.hist-dot { width:9px;height:9px;border-radius:50%;background:#e2e8f0;flex-shrink:0;margin-top:4px;border:2px solid #fff;box-shadow:0 0 0 1px #e2e8f0;z-index:1; }
.hist-dot-active { background:linear-gradient(135deg,#3b82f6,#6366f1);box-shadow:0 0 0 1px #93c5fd; }
.hist-content {}
.hist-date { font-size:.69rem;color:#94a3b8;margin-bottom:2px;font-weight:500; }
.hist-desc { font-size:.8rem;color:#334155;line-height:1.4;word-break:break-word; }

#ann-stack { position:fixed;bottom:18px;right:14px;display:flex;flex-direction:column;gap:9px;z-index:800;max-width:340px;width:calc(100vw - 28px); }
.ann-card { background:#fff;border-radius:var(--r3);box-shadow:var(--lg);border-left:4px solid var(--blue);overflow:hidden;animation:slideIn .3s cubic-bezier(.34,1.56,.64,1); }
.ann-card.ann-t-warning { border-left-color:var(--amber); }
.ann-card.ann-t-success { border-left-color:var(--green); }
.ann-card.ann-t-danger  { border-left-color:var(--red); }
.ann-card.removing { animation:slideOut .25s ease forwards; }
@keyframes slideIn { from{opacity:0;transform:translateX(50px) scale(.95)} to{opacity:1;transform:translateX(0)} }
@keyframes slideOut { from{opacity:1;max-height:400px} to{opacity:0;transform:translateX(60px);max-height:0;overflow:hidden} }
.ann-card-hd { display:flex;align-items:flex-start;justify-content:space-between;padding:11px 11px 0; }
.ann-card-hd-left { display:flex;align-items:center;gap:7px;min-width:0; }
.ann-card-hd-left strong { font-size:.87rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ann-close-x { background:none;border:none;cursor:pointer;color:var(--g400);padding:2px 5px;border-radius:4px;font-size:.87rem;flex-shrink:0; }
.ann-close-x:hover { background:var(--red-l);color:var(--red); }
.ann-card-time { padding:2px 11px;font-size:.67rem;color:var(--g400);font-style:italic; }
.ann-card-body { padding:7px 11px;font-size:.83rem;line-height:1.5;color:var(--g700);word-break:break-word; }
.ann-card-ft { display:flex;align-items:center;justify-content:space-between;padding:7px 11px 10px;border-top:1px solid var(--g100);background:var(--g50); }
.ann-dismiss-lbl { display:flex;align-items:center;gap:5px;font-size:.71rem;color:var(--g500);cursor:pointer;user-select:none; }
.ann-dismiss-lbl input { width:13px;height:13px;accent-color:var(--blue);cursor:pointer; }

/* ── Ann page ── */
.ann-page-list { display:flex;flex-direction:column; }
.ann-page-item { padding:14px 0;border-bottom:1px solid var(--g100); }
.ann-page-item:last-child { border-bottom:none; }
.api-head { display:flex;align-items:flex-start;gap:9px;margin-bottom:6px;flex-wrap:wrap; }
.api-icon { font-size:1.15rem;flex-shrink:0;margin-top:1px; }
.api-meta { flex:1;min-width:0; }
.api-meta strong { display:block;font-size:.91rem;font-weight:700;margin-bottom:2px;word-break:break-word; }
.api-time { font-size:.71rem;color:var(--g400); }
.api-body { font-size:.84rem;color:var(--g600);line-height:1.6;padding-left:28px;word-break:break-word; }
.ann-t-info    .api-head { border-left:3px solid var(--blue); padding-left:10px;margin-left:-10px; }
.ann-t-warning .api-head { border-left:3px solid var(--amber);padding-left:10px;margin-left:-10px; }
.ann-t-success .api-head { border-left:3px solid var(--green);padding-left:10px;margin-left:-10px; }
.ann-t-danger  .api-head { border-left:3px solid var(--red);  padding-left:10px;margin-left:-10px; }
.ann-pill { display:inline-block;padding:2px 9px;border-radius:12px;font-size:.69rem;font-weight:700;margin-left:auto;flex-shrink:0; }
.ap-info    { background:var(--blue-l);color:var(--blue-d); }
.ap-warning { background:var(--amber-l);color:var(--amber-d); }
.ap-success { background:var(--green-l);color:var(--green-d); }
.ap-danger  { background:var(--red-l);color:var(--red-d); }

/* ── Admin ann list ── */
.adm-ann-list { display:flex;flex-direction:column;gap:9px; }
.adm-ann-item { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px;background:#fff;border-radius:var(--r2);border:1px solid var(--g200);border-left:4px solid var(--blue);box-shadow:var(--sx); }
.adm-ann-item.ann-t-warning { border-left-color:var(--amber); }
.adm-ann-item.ann-t-success { border-left-color:var(--green); }
.adm-ann-item.ann-t-danger  { border-left-color:var(--red); }
.aai-left { display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0; }
.aai-ico { font-size:1.2rem;flex-shrink:0;margin-top:2px; }
.aai-body { min-width:0;flex:1; }
.aai-top { display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px; }
.aai-top strong { font-size:.89rem;font-weight:700;word-break:break-word; }
.aai-msg { font-size:.82rem;color:var(--g500);margin-bottom:4px;line-height:1.4;word-break:break-word; }
.aai-time { font-size:.69rem;color:var(--g400);font-style:italic; }
.aai-actions { display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end; }
.ann-status-pill { display:inline-block;padding:2px 8px;border-radius:10px;font-size:.67rem;font-weight:700; }
.asp-on  { background:var(--green-l);color:var(--green-d); }
.asp-off { background:var(--g100);color:var(--g500); }

/* ── Target page ── */
.tmode-group { display:flex;flex-direction:column;gap:7px;margin-bottom:13px; }
.tmode-item { display:flex;align-items:flex-start;gap:11px;padding:12px;border-radius:var(--r2);border:1.5px solid var(--g200);cursor:pointer;transition:all .2s;background:#fff;position:relative; }
.tmode-item:hover { border-color:var(--blue);background:var(--blue-l); }
.tmode-on { border-color:var(--blue);background:linear-gradient(135deg,#eff6ff,#eef2ff); }
.tmode-item input[type=radio] { position:absolute;opacity:0;width:0;height:0; }
.tmode-radio { width:19px;height:19px;border-radius:50%;border:2px solid var(--g300);flex-shrink:0;margin-top:2px;transition:all .2s;display:flex;align-items:center;justify-content:center; }
.tmode-item input:checked~.tmode-radio { border-color:var(--blue);background:var(--blue); }
.tmode-item input:checked~.tmode-radio::after { content:'';width:6px;height:6px;background:#fff;border-radius:50%; }
.tmode-item div strong { display:block;font-size:.87rem;margin-bottom:2px; }
.tmode-item div small { font-size:.75rem;color:var(--g500); }
.tmode-badge { margin-left:auto;background:var(--green-l);color:var(--green-d);padding:2px 9px;border-radius:10px;font-size:.68rem;font-weight:700;flex-shrink:0; }
.tf-wrap { padding:13px;background:var(--g50);border-radius:var(--r2);border:1px solid var(--g200);margin-bottom:4px; }
.tf-group { margin-bottom:13px; }
.tf-group:last-child { margin-bottom:0; }
.tf-group-lbl { font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--g600);margin-bottom:8px; }
.tf-checks { display:flex;flex-direction:column;gap:5px; }
.tf-row { display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border-radius:var(--r1);border:1.5px solid var(--g200);cursor:pointer;transition:all .2s;background:#fff; }
.tf-row:hover { border-color:var(--blue);background:var(--blue-l); }
.tf-on { border-color:var(--blue) !important;background:var(--blue-l) !important; }
.tf-row input[type=checkbox] { position:absolute;opacity:0;width:0;height:0; }
.tf-box { width:16px;height:16px;border-radius:4px;border:2px solid var(--g300);flex-shrink:0;margin-top:1px;transition:all .2s;display:flex;align-items:center;justify-content:center; }
.tf-row input:checked~.tf-box { background:var(--blue);border-color:var(--blue); }
.tf-row input:checked~.tf-box::after { content:'✓';color:#fff;font-size:.65rem;font-weight:700; }
.tf-row div strong { display:block;font-size:.85rem;margin-bottom:2px; }
.tf-row div small { font-size:.73rem;color:var(--g500); }

/* ── Admin API key ── */
.quota-summary { display:flex;align-items:center;background:linear-gradient(135deg,#f8fafc,#eff6ff);border-radius:var(--r2);padding:13px 16px;border:1px solid var(--g200); }
.qs-box { flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; }
.qs-box span { font-size:.66rem;color:var(--g500);text-transform:uppercase;letter-spacing:.5px; }
.qs-box strong { font-size:.97rem;font-weight:800; }
.qs-sep { width:1px;height:28px;background:var(--g200); }
.key-table { border:1px solid var(--g200);border-radius:var(--r2);overflow:hidden;overflow-x:auto; }
.kt-head { display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;padding:8px 12px;background:var(--g50);border-bottom:1px solid var(--g200);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--g500);min-width:480px; }
.kt-row { display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;padding:10px 12px;border-bottom:1px solid var(--g100);align-items:center;font-size:.83rem;min-width:480px; }
.kt-row:last-child { border-bottom:none; }
.kt-row:hover { background:var(--g50); }
.kt-row code { max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;font-size:.72rem; }
.dot-badge { display:inline-block;padding:2px 7px;border-radius:10px;font-size:.68rem;font-weight:700; }
.db-ok  { background:var(--green-l);color:var(--green-d); }
.db-err { background:var(--red-l);color:var(--red-d); }

/* ── Modals ── */
.modal-ov { position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:500;padding:14px;backdrop-filter:blur(4px); }
.modal-ov.hidden { display:none !important; }
.modal-card { background:#fff;border-radius:var(--r4);width:100%;max-width:420px;box-shadow:var(--lg);animation:popIn .22s cubic-bezier(.34,1.56,.64,1); }
.modal-wide { max-width:580px; }

/* JNE result modal - premium */
#jne-result-body { padding:0; }
#jne-result-body .rcard { border-radius:0; border:none; box-shadow:none; }
#jne-result-body .rcard:hover { transform:none; box-shadow:none; }
#jne-result-body .rc-match,
#jne-result-body .rc-skip,
#jne-result-body .rc-err { border-top:none; border-left:none; }
#jne-result-body .rcard-body { padding:14px 16px; }
#jne-result-body .rcard-head { padding:14px 16px; }
@keyframes popIn { from{opacity:0;transform:scale(.9) translateY(-10px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-hd { display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--g100); }
.modal-hd h3 { font-size:.93rem;font-weight:700; }
.modal-x { background:var(--g100);border:none;cursor:pointer;color:var(--g500);width:28px;height:28px;border-radius:50%;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .2s; }
.modal-x:hover { background:var(--red-l);color:var(--red); }
.modal-bd { padding:16px;max-height:65vh;overflow-y:auto; }
.modal-bd p { margin-bottom:11px;font-size:.87rem;color:var(--g600); }
.modal-ft { padding:11px 16px;border-top:1px solid var(--g100);display:flex;justify-content:flex-end;gap:8px; }
.input-lg { width:100%;padding:11px 12px;border:1.5px solid var(--g200);border-radius:var(--r1);font-size:.96rem;background:var(--g50);letter-spacing:2px;font-weight:600;transition:all .2s; }
.input-lg:focus { outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.12);background:#fff; }
.form-hint { font-size:.72rem;color:var(--g500);display:block;margin-top:4px; }
.form-textarea { width:100%;padding:9px 10px;border:1.5px solid var(--g200);border-radius:var(--r1);font-size:.87rem;background:var(--g50);resize:vertical;min-height:70px;transition:all .2s;font-family:inherit; }
.form-textarea:focus { outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.12);background:#fff; }

/* Loading */
.loading-ov { position:fixed;inset:0;background:rgba(30,58,138,.65);display:flex;align-items:center;justify-content:center;z-index:600;backdrop-filter:blur(4px); }
.loading-ov.hidden { display:none !important; }
.spinner-wrap { display:flex;flex-direction:column;align-items:center;gap:13px;color:#fff; }
.spinner-wrap p { font-size:.88rem;font-weight:600; }
.spinner { width:40px;height:40px;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Alerts */
.alert-ok   { padding:9px 12px;border-radius:var(--r1);background:var(--green-l);border:1px solid #bbf7d0;color:var(--green-d);font-size:.85rem; }
.alert-err  { padding:9px 12px;border-radius:var(--r1);background:var(--red-l);border:1px solid #fecaca;color:var(--red-d);font-size:.85rem; }
.alert-warn { padding:9px 12px;border-radius:var(--r1);background:var(--amber-l);border:1px solid #fde68a;color:#92400e;font-size:.85rem; }

/* Copy toast */
.copy-toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#1e293b,#334155);color:#fff;padding:7px 17px;border-radius:20px;font-size:.82rem;font-weight:600;z-index:900;box-shadow:var(--md);white-space:nowrap; }
.copy-toast.hidden { display:none; }

/* Misc */
.hidden { display:none !important; }
.mt-1{margin-top:6px} .mt-2{margin-top:10px} .mt-3{margin-top:13px}
.mb-2{margin-bottom:10px} .mb-3{margin-bottom:13px}
.empty-state { text-align:center;padding:34px 20px;color:var(--g400); }
.empty-icon { font-size:2.3rem;margin-bottom:8px; }
@keyframes qflash { 0%{background:#fef9c3} 100%{background:transparent} }
.qflash { animation:qflash .5s ease; }

/* ── LOGIN PAGE ── */
.login-page { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:linear-gradient(135deg,#1e3a8a,#2563eb 45%,#4f46e5 75%,#7c3aed);position:relative;overflow:hidden; }
.login-bg { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.lb { position:absolute;border-radius:50%;opacity:.18; }
.lb-1 { width:380px;height:380px;background:radial-gradient(circle,#93c5fd,transparent);top:-80px;left:-80px; }
.lb-2 { width:280px;height:280px;background:radial-gradient(circle,#818cf8,transparent);top:30px;right:-60px; }
.lb-3 { width:320px;height:320px;background:radial-gradient(circle,#60a5fa,transparent);bottom:-60px;left:30%; }
.ld { position:absolute; }
.ld-tl { top:60px;left:40px;width:140px;height:100px;background-image:radial-gradient(circle,rgba(255,255,255,.25) 1.5px,transparent 1.5px);background-size:18px 18px; }
.ld-br { bottom:60px;right:40px;width:140px;height:100px;background-image:radial-gradient(circle,rgba(255,255,255,.25) 1.5px,transparent 1.5px);background-size:18px 18px; }
.login-wrap { display:flex;flex-direction:column;align-items:center;z-index:1;width:100%; }
.login-brand { text-align:center;margin-bottom:20px;color:#fff; }
.login-brand-icon { font-size:3rem;display:block;margin-bottom:8px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25)); }
.login-brand h1 { font-size:1.85rem;font-weight:900;letter-spacing:-.5px; }
.login-brand p { font-size:.87rem;opacity:.8;margin-top:4px; }
.login-card { background:rgba(255,255,255,.97);border-radius:var(--r4);padding:28px 24px;width:100%;max-width:390px;box-shadow:0 20px 60px rgba(0,0,0,.25); }
.lc-shield { width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#eef2ff);display:flex;align-items:center;justify-content:center;margin:0 auto 13px;color:var(--blue-d); }
.login-card h2 { font-size:1.25rem;font-weight:800;text-align:center;color:var(--g800);margin-bottom:5px; }
.login-card>p { font-size:.86rem;color:var(--g500);text-align:center;margin-bottom:19px; }
.login-error { display:flex;align-items:center;gap:7px;padding:9px 12px;background:var(--red-l);border:1px solid #fecaca;border-radius:var(--r1);color:var(--red-d);font-size:.84rem;margin-bottom:13px; }
.login-form { display:flex;flex-direction:column;gap:13px; }
.lf-label { font-size:.8rem;font-weight:700;color:var(--g700);display:block;margin-bottom:5px; }
.lf-input-wrap { position:relative; }
.lf-icon { position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--g400);pointer-events:none; }
.lf-input-wrap input { width:100%;padding:11px 11px 11px 35px;border:1.5px solid var(--g200);border-radius:var(--r1);font-size:.92rem;background:var(--g50);color:var(--g800);transition:all .2s; }
.lf-input-wrap input:focus { outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15);background:#fff; }
.login-btn { width:100%;padding:12px;background:linear-gradient(135deg,var(--blue),var(--indigo));color:#fff;border:none;border-radius:var(--r1);font-size:.94rem;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(99,102,241,.4);transition:all .2s;font-family:inherit; }
.login-btn:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.5); }
.login-footer { color:rgba(255,255,255,.5);font-size:.76rem;margin-top:16px;z-index:1;text-align:center; }

/* ═══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Mobile <480: 1 col
   Tablet 480-767: 2 col
   Desktop S 768-1023: 2 col
   Desktop L ≥1024: 3 col
═══════════════════════════════════════════ */
@media (max-width:479px) {
  html { font-size:14px; }
  .page-main { padding:calc(var(--nav-h) + 10px) 10px 24px; }
  .page-card { padding:13px 11px;border-radius:var(--r3); }
  .results-grid { grid-template-columns:1fr;gap:9px; }
  .form-row { gap:7px; }
  .fc-resi,.fc-kurir,.fc-mode { flex:1 1 100%;max-width:100%; }
  .fc-jml { flex:0 0 60px; }
  .fc-btn { flex:1; }
  .btn-track-submit { width:100%; }
  .rsh-left,.rsh-right { width:100%; }
  .rsh-right { justify-content:flex-end; }
  .results-section-hd { flex-direction:column;align-items:flex-start; }
  .drawer { width:100%;max-width:285px; }
  #ann-stack { bottom:8px;right:8px;width:calc(100vw - 16px); }
  .login-card { padding:20px 16px; }
  .quota-chip { display:none; }
}
@media (min-width:480px) and (max-width:767px) {
  html { font-size:14px; }
  .page-main { padding:calc(var(--nav-h) + 12px) 11px 26px; }
  .results-grid { grid-template-columns:repeat(2,1fr);gap:10px; }
  .fc-kurir,.fc-mode { flex:1 1 100px;max-width:160px; }
}
@media (min-width:768px) and (max-width:1023px) {
  .page-main { padding:calc(var(--nav-h) + 16px) 16px 30px; }
  .page-card { padding:18px 16px; }
  .results-grid { grid-template-columns:repeat(2,1fr);gap:var(--card-gap); }
}
@media (min-width:1024px) {
  :root { --page-max:960px; }
  .page-main { padding:calc(var(--nav-h) + 20px) 20px 36px; }
  .page-card { padding:20px 18px; }
  .results-grid { grid-template-columns:repeat(3,1fr);gap:var(--card-gap); }
  .rcard-resi { font-size:.79rem; }
  .rg-val { font-size:.81rem; }
}

/* ═══════════════════════════════════════════
   MENTAHAN V2
═══════════════════════════════════════════ */
.mv2-card { border-top:3px solid #8b5cf6; }

/* Header icon */
.pc-mv2 {
  background:linear-gradient(135deg,#7c3aed,#6366f1);
  box-shadow:0 3px 10px rgba(124,58,237,.35);
  color:#fff;
}
.mv2-badge-new {
  display:inline-block;font-size:.62rem;font-weight:800;
  background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;
  padding:1px 7px;border-radius:10px;margin-left:6px;
  vertical-align:middle;letter-spacing:.3px;
}

/* Cara kerja box */
.mv2-howto {
  display:flex;align-items:flex-start;gap:12px;
  background:linear-gradient(135deg,#faf5ff,#ede9fe);
  border:1px solid #ddd6fe;border-left:4px solid #8b5cf6;
  border-radius:12px;padding:12px 14px;margin-bottom:16px;
}
.mv2-howto-icon { font-size:1.2rem;flex-shrink:0;margin-top:1px; }
.mv2-howto-title { font-weight:700;font-size:.85rem;color:#5b21b6;margin-bottom:6px; }
.mv2-howto-list { padding-left:16px;margin:0; }
.mv2-howto-list li { font-size:.8rem;color:#6d28d9;line-height:1.55;margin-bottom:3px; }
.mv2-howto-list li:last-child { margin-bottom:0; }
.mv2-howto-list strong { color:#4c1d95; }

/* Button */
.btn-mv2 {
  background:linear-gradient(135deg,#7c3aed,#6366f1);
  color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.35);
}
.btn-mv2:hover { box-shadow:0 4px 14px rgba(124,58,237,.45);color:#fff; }
.btn-mv2:disabled { opacity:.6;cursor:not-allowed;transform:none !important; }

/* Error */
.mv2-error {
  display:flex;align-items:flex-start;gap:8px;
  background:linear-gradient(135deg,#fef2f2,#fee2e2);
  border:1px solid #fca5a5;border-left:4px solid #ef4444;
  border-radius:10px;padding:10px 12px;
  color:#dc2626;font-size:.85rem;
}

/* Result section */
.mv2-result-badge {
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,#7c3aed,#6366f1);
  color:#fff;padding:3px 10px;border-radius:20px;
  font-size:.72rem;font-weight:700;
  font-family:'Fira Mono','Consolas',monospace;
  box-shadow:0 2px 6px rgba(124,58,237,.35);
}
.mv2-result-wrap { margin-bottom:12px; }

/* Copy bar */
.mv2-copy-bar {
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:linear-gradient(135deg,#faf5ff,#ede9fe);
  border:1px solid #ddd6fe;border-radius:12px;
  padding:12px 14px;
}
.copy-btn-large {
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:8px;
  font-size:.86rem;font-weight:700;cursor:pointer;
  border:none;white-space:nowrap;transition:all .2s;
}
.mv2-resi-display {
  font-family:'Fira Mono','Consolas',monospace;
  font-size:.92rem;font-weight:700;color:#5b21b6;
  letter-spacing:.5px;
}

/* Searching overlay */
.mv2-searching {
  position:fixed;inset:0;background:rgba(109,40,217,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:600;backdrop-filter:blur(4px);
}
.mv2-searching.hidden { display:none !important; }
.mv2-search-inner {
  display:flex;flex-direction:column;align-items:center;
  gap:14px;color:#fff;text-align:center;padding:20px;
}
.mv2-search-spinner {
  width:48px;height:48px;
  border:4px solid rgba(255,255,255,.25);
  border-top-color:#fff;border-radius:50%;
  animation:spin .8s linear infinite;
}
.mv2-search-title { font-size:1.1rem;font-weight:700; }
.mv2-search-sub { font-size:.82rem;opacity:.8; }

/* Drawer new badge */
.d-new-badge {
  margin-left:auto;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff;padding:2px 7px;border-radius:10px;
  font-size:.65rem;font-weight:800;letter-spacing:.3px;
}

/* ═══════════════════════════════════════════
   FEATURE FREEZE OVERLAY
═══════════════════════════════════════════ */
.feat-wrap {
  position: relative;
  margin-bottom: var(--section-gap, 14px);
}

/* ── FROZEN: bekukan SEMUA anak termasuk results-section ── */
.feat-wrap-frozen {
  /* Buat stacking context baru agar overlay bisa cover full */
  isolation: isolate;
}
/* Semua anak langsung: dim + no interaction */
.feat-wrap-frozen > * {
  opacity: .45;
  filter: grayscale(.6);
  pointer-events: none !important;
  user-select: none;
}
/* Overlay sendiri harus tetap terlihat + clickable */
.feat-wrap-frozen > .freeze-overlay {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

.freeze-overlay {
  /* Cover SELURUH feat-wrap dari atas ke bawah */
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  /* Tempelkan di tengah-tengah vertikal */
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(241,245,249,.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: not-allowed;
}
.freeze-box {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,.16);
  text-align: center;
  max-width: 290px;
  /* Pastikan box selalu terlihat meski konten panjang */
  position: sticky;
  top: 50%;
}
.freeze-icon  { font-size: 2.6rem; line-height: 1; }
.freeze-title { font-weight: 800; font-size: 1rem; color: #1e293b; }
.freeze-sub   { font-size: .82rem; color: #64748b; line-height: 1.5; }

/* Admin badge — tampil di atas feat-wrap, tidak ikut dibekukan */
/* Modern & Elegant Admin Frozen Badge */
.admin-frozen-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
  border: none;
  border-left: 4px solid #f59e0b;
  border-radius: 0 12px 12px 0;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: .85rem;
  font-weight: 500;
  color: #78350f;
  width: 100%;
  box-shadow:
    0 2px 8px rgba(245, 158, 11, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
}
.admin-frozen-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
}
.afb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 8px;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
  flex-shrink: 0;
}
.afb-text {
  flex: 1;
  line-height: 1.4;
}
.afb-text strong {
  font-weight: 700;
  color: #92400e;
}
.admin-frozen-badge:hover {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
  box-shadow:
    0 4px 12px rgba(245, 158, 11, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ═══════════════════════════════════════════
   ADMIN FEATURE CONTROL PAGE
═══════════════════════════════════════════ */
.feat-notice {
  display: flex; align-items: flex-start; gap: 9px;
  background: linear-gradient(135deg,#eef2ff,#ede9fe);
  border: 1px solid #c7d2fe; border-left: 4px solid #6366f1;
  border-radius: 10px; padding: 11px 13px;
  font-size: .84rem; color: #4338ca; margin-bottom: 18px;
  line-height: 1.5;
}
.feat-list { display: flex; flex-direction: column; gap: 10px; }
.feat-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px;
  background: #fff;
  border: 1.5px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: all .2s;
}
.feat-item.feat-frozen {
  background: linear-gradient(135deg,#f8fafc,#f1f5f9);
  border-color: #cbd5e1; opacity: .8;
}
.feat-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.feat-icon-wrap {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0; transition: all .2s;
}
.fi-on  { background: linear-gradient(135deg,#eff6ff,#eef2ff); box-shadow: 0 2px 6px rgba(99,102,241,.15); }
.fi-off { background: linear-gradient(135deg,#f8fafc,#f1f5f9); filter: grayscale(.6); }
.feat-name { font-weight: 700; font-size: .9rem; color: #1e293b; margin-bottom: 2px; }
.feat-key  { font-size: .71rem; color: #94a3b8; font-family: 'Fira Mono','Consolas',monospace; }
.feat-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.feat-status-pill {
  display: inline-block; padding: 3px 10px;
  border-radius: 20px; font-size: .72rem; font-weight: 700;
  white-space: nowrap;
}
.fsp-on  { background: #f0fdf4; color: #16a34a; border: 1px solid #86efac; }
.fsp-off { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }
.feat-toggle-btn {
  padding: 6px 14px; border: none; border-radius: 8px;
  font-size: .8rem; font-weight: 700; cursor: pointer;
  transition: all .2s; white-space: nowrap; font-family: inherit;
}
.feat-toggle-btn:hover { transform: translateY(-1px); }
.feat-toggle-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ftb-on  { background: linear-gradient(135deg,#fee2e2,#fecaca); color: #dc2626; }
.ftb-on:hover  { background: linear-gradient(135deg,#fca5a5,#f87171); }
.ftb-off { background: linear-gradient(135deg,#d1fae5,#a7f3d0); color: #16a34a; }
.ftb-off:hover { background: linear-gradient(135deg,#6ee7b7,#34d399); }

/* ═══════════════════════════════════════════
   TARGET WILAYAH — Filter Dropdown & Cek Resi Target
═══════════════════════════════════════════ */

/* Target card accent */
.pc-target-accent { border-top: 3px solid #f59e0b; }
.pc-target {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 3px 10px rgba(245,158,11,.3); color: #fff;
}
.btn-target {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; box-shadow: 0 2px 8px rgba(245,158,11,.35);
}
.btn-target:hover { box-shadow: 0 4px 14px rgba(245,158,11,.45); color: #fff; }

/* Warning when mode = default */
.target-mode-warn {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: var(--r2);
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-left: 4px solid var(--amber);
  color: #92400e; font-size: .84rem; margin-bottom: 14px;
  line-height: 1.5;
}

/* Filter accordion container */
.filter-accordion {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}

/* Each dropdown group */
.filter-dd-group {
  border: 1.5px solid var(--g200);
  border-radius: var(--r2); overflow: hidden;
  background: #fff;
}

/* Toggle button header */
.filter-dd-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 11px 13px;
  background: linear-gradient(135deg, var(--g50), #f8fafc);
  border: none; cursor: pointer;
  transition: background .2s; text-align: left; font-family: inherit;
}
.filter-dd-toggle:hover,
.filter-dd-toggle.fdt-open { background: linear-gradient(135deg, var(--blue-l), #eef2ff); }
.fdt-left {
  display: flex; align-items: center; gap: 8px;
  font-size: .87rem; font-weight: 700; color: var(--g700);
}
.fdt-right {
  display: flex; align-items: center; gap: 8px;
}
.fdt-count {
  font-size: .73rem; font-weight: 700;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  color: #fff; padding: 2px 8px; border-radius: 12px;
}
.fdt-chevron { transition: transform .25s; color: var(--g400); }

/* Dropdown body */
.filter-dd-body {
  padding: 10px;
  border-top: 1px solid var(--g100);
  display: flex; flex-direction: column; gap: 5px;
  background: #fff;
}

/* Result badge for target count */
.target-count {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

/* Empty result card */
.target-empty-card { margin-bottom: 0; }

/* Admin frozen notice badge */
.admin-frozen-notice {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fde68a; border-left: 4px solid #f59e0b;
  border-radius: var(--r2); padding: 8px 12px;
  font-size: .82rem; color: #92400e; margin-bottom: 10px;
}