/* ============ PAITO POLA DASAR PRO ============ */
.pd-scope{--pd-line:#cbd5e1;--pd-muted:#64748b;--pd-text:#0f172a;--pd-card:#fff;
  color:var(--pd-text);margin:16px 0;font-size:14px;line-height:1.5}
.pd-scope *{box-sizing:border-box}

/* ---------- Kartu & form input ---------- */
.pd-card{background:var(--pd-card);border:1px solid var(--pd-line);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.pd-hero{background:linear-gradient(135deg,#eff6ff,#f5f3ff);border-color:#c7d2fe}
.pd-hero h3{margin:0 0 4px;font-size:17px}
.pd-hero p{margin:0 0 10px;color:var(--pd-muted);font-size:13px}
.pd-input{width:100%;padding:12px;border:2px solid var(--pd-line);border-radius:10px;font-family:ui-monospace,Consolas,monospace;font-size:15px;letter-spacing:2px;background:#fff;color:#0f172a;transition:.2s}
.pd-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.pd-tools{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.pd-btn{border:none;cursor:pointer;padding:8px 14px;border-radius:9px;color:#fff;font-weight:700;font-size:13px;background:linear-gradient(135deg,#2563eb,#7c3aed);transition:.2s}
.pd-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(37,99,235,.3)}
.pd-btn-ghost{background:#fff;color:var(--pd-muted);border:1px solid var(--pd-line)}
.pd-count{margin-left:auto;font-size:12px;color:var(--pd-muted);font-weight:700}
.pd-loading{display:flex;align-items:center;gap:8px;margin-top:10px;color:#2563eb;font-weight:700;font-size:13px}
.pd-spinner{width:15px;height:15px;border:3px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;animation:pdSpin .7s linear infinite}
@keyframes pdSpin{to{transform:rotate(360deg)}}

/* ---------- Filter & info bar ---------- */
.pd-filterbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.pd-select{padding:8px 12px;border:1px solid var(--pd-line);border-radius:9px;background:#fff;color:var(--pd-text);font-size:13px;cursor:pointer}
.pd-infobar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.pd-badge{background:#fff;border:1px solid var(--pd-line);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700}
.pd-badge-primary{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border:none}
.pd-badge-success{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.pd-alert{padding:10px 14px;border-radius:10px;margin:0 0 12px;font-size:13.5px}
.pd-alert-info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
.pd-alert-warning{background:#fef9c3;color:#854d0e;border:1px solid #fde68a}
.pd-alert-danger{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}

/* ---------- TABEL POLA DASAR (gaya klasik) ---------- */
.pd-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--pd-line);border-radius:10px;background:#fff}
.pd-scope .pd-table{width:100%;border-collapse:separate;border-spacing:0;text-align:center;table-layout:auto;font-size:11.5px;min-width:640px}
.pd-scope .pd-table th{color:#fff;font-weight:700;padding:5px 4px;border-right:1px solid rgba(255,255,255,.18);white-space:nowrap}
.pd-scope .pd-table tr.pd-head1 th{background:#1e3a8a;font-size:11.5px;height:28px;position:sticky;top:0;z-index:3}
.pd-scope .pd-table tr.pd-head2 th{background:#1d4ed8;font-size:10px;height:22px;position:sticky;top:28px;z-index:3}
.pd-scope .pd-table td{border-right:1px solid #94a3b8;border-bottom:1px solid #94a3b8;padding:4px 3px;font-weight:800;font-size:10.5px;color:#fff;white-space:nowrap}
.pd-scope .pd-table tbody tr:hover td{filter:brightness(1.12)}
.pd-scope .pd-table td.pd-result{background:#e2e8f0!important;color:#0f172a!important;font-weight:800;font-family:ui-monospace,Consolas,monospace;font-size:12px;letter-spacing:.5px;min-width:48px}
.bg-kc{background:#059669}
.bg-bs{background:#dc2626}
.bg-gj{background:#d97706}
.bg-gp{background:#2563eb}
.bg-tw{background:#7c3aed}

/* Legend */
.pd-legend{display:flex;gap:8px 14px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--pd-muted);justify-content:center}
.pd-lg{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.pd-lg i{width:20px;height:13px;border-radius:4px;display:inline-block}

/* Responsive tabel (persis seperti referensi) */
.show-mob{display:none}
@media (max-width:640px){
  .hide-mob{display:none}
  .show-mob{display:inline}
  .pd-scope .pd-table{font-size:10px;min-width:560px}
  .pd-scope .pd-table td{padding:3px 2px;font-size:9.5px}
  .pd-scope .pd-table td.pd-result{font-size:10.5px}
}

/* ---------- DASHBOARD STATISTIK PREMIUM ---------- */
.pd-stats{margin-top:24px;background:linear-gradient(145deg,#f8fafc,#f1f5f9);padding:20px;border-radius:24px;border:1px solid #fff;box-shadow:0 20px 25px -5px rgba(0,0,0,.05),0 10px 10px -5px rgba(0,0,0,.02);width:100%}
.pd-stats-head{text-align:center;margin-bottom:24px}
.pd-stats-head h3{margin:0;color:#0f172a;font-size:21px;font-weight:900;letter-spacing:-.5px}
.pd-stats-head p{margin:8px 0 0;color:#64748b;font-size:13.5px;font-weight:500}
.pd-hl{color:#1e40af;font-weight:800}
.pd-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.pd-stats-grid{grid-template-columns:1fr}}
.pd-glass{background:rgba(255,255,255,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:18px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.pd-tag{display:inline-block;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.8px;padding:5px 12px;border-radius:999px;margin-bottom:14px}
.pd-pos-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.pd-pos-grid{grid-template-columns:1fr}}
.pd-sect-head{font-weight:900;font-size:15px;margin-bottom:10px;display:flex;align-items:baseline;gap:6px}
.pd-sect-head small{font-size:10px;color:#94a3b8;font-weight:700}
.pd-sect-div{margin:12px 0;border-top:1px solid rgba(0,0,0,.06)}
.pd-stat{margin-bottom:10px}
.pd-stat:last-child{margin-bottom:0}
.pd-stat-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4px}
.pd-stat-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase}
.pd-stat-val{font-size:13.5px;font-weight:800}
.pd-stat-val small{font-size:9.5px;opacity:.75;color:#94a3b8;font-weight:600}
.pd-bar{height:8px;background:rgba(226,232,240,.5);border-radius:20px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
.pd-bar i{display:block;height:100%;border-radius:20px;transition:width .8s cubic-bezier(.34,1.56,.64,1)}
.pd-insight{margin-top:10px;font-size:11.5px;font-weight:700;color:#7c3aed;background:rgba(124,58,237,.08);border:1px dashed rgba(124,58,237,.25);border-radius:9px;padding:6px 9px}
.pd-streaks{list-style:none;margin:0;padding:0}
.pd-streaks li{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed rgba(0,0,0,.07);font-size:12.5px;flex-wrap:wrap}
.pd-streaks li:last-child{border-bottom:none}
.pd-streak-nm{font-weight:700}
.pd-streaks em{font-style:normal;color:#dc2626;font-size:11.5px;font-weight:600;margin-left:auto}
.pd-chip{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pd-hint{font-size:12.5px;color:#64748b;margin:0}

/* ---------- DARK MODE otomatis ---------- */
@media (prefers-color-scheme:dark){
  .pd-scope{--pd-line:#334155;--pd-muted:#94a3b8;--pd-text:#e2e8f0;--pd-card:#0f172a}
  .pd-hero{background:linear-gradient(135deg,#0c1a3a,#1e1b4b);border-color:#334155}
  .pd-input{background:#0f172a;color:#e2e8f0}
  .pd-btn-ghost,.pd-select,.pd-badge{background:#0f172a;border-color:#334155}
  .pd-alert-info{background:#172554;color:#bfdbfe;border-color:#1e40af}
  .pd-alert-warning{background:#451a03;color:#fde68a;border-color:#92400e}
  .pd-alert-danger{background:#450a0a;color:#fecaca;border-color:#7f1d1d}
  .pd-table-wrap{background:#0f172a}
  .pd-scope .pd-table td{border-color:#475569}
  .pd-scope .pd-table td.pd-result{background:#334155!important;color:#f1f5f9!important}
  .pd-stats{background:linear-gradient(145deg,#0f172a,#1e293b);border-color:#334155}
  .pd-stats-head h3{color:#f1f5f9}
  .pd-glass{background:rgba(15,23,42,.7);border-color:#334155;box-shadow:none}
  .pd-sect-div{border-top-color:rgba(255,255,255,.08)}
  .pd-bar{background:rgba(51,65,85,.6)}
  .pd-insight{background:rgba(124,58,237,.15)}
  .pd-streaks li{border-bottom-color:rgba(255,255,255,.08)}
}
/* Desktop: wrapper tidak di-scroll, sticky header ngikut ke viewport */
@media (min-width:700px){
  .pd-table-wrap{overflow:visible}
}

/* Jika sedang login WP, header jangan ketutup admin bar */
body.admin-bar .pd-scope .pd-table tr.pd-head1 th{top:32px}
body.admin-bar .pd-scope .pd-table tr.pd-head2 th{top:60px}