.pdh-outer{}
.pdh-container{ background:#fff; color:#111827; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto; }
.pdh-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; position:sticky; top:0; background:#fff; z-index:5; }
.pdh-title{ font-weight:800; }
.pdh-subtitle{ color:#64748b; font-size:12px; }
.pdh-search{ width:360px; max-width:48vw; padding:10px 14px; border:1px solid #e5e7eb; border-radius:999px; background:#f9fafb; }
.pdh-user{ display:flex; align-items:center; gap:10px; }
.pdh-badge{ position:absolute; top:-8px; right:-10px; background:#ef4444; color:#fff; font-size:10px; padding:2px 6px; border-radius:999px; }
.pdh-bell{ position:relative; font-size:18px; }
.pdh-userpill{ background:#111827; color:#fff; width:28px; height:28px; display:grid; place-items:center; border-radius:999px; font-weight:700; }
.pdh-userinfo{ font-size:12px; color:#555; }

.pdh-tabs{ display:flex; gap:12px; padding:10px 0; background:#fff; border-bottom:1px solid #eee; position:sticky; top:64px; z-index:4; }
.pdh-tab{ flex:0 0 auto; padding:10px 14px; background:#eef0f4; border:1px solid #e5e7eb; border-radius:999px; cursor:pointer; color:#555; }
.pdh-tab.is-active{ background:#fff; color:#111; box-shadow:0 1px 3px rgba(0,0,0,.06); }

.pdh-panels{ padding:20px 0 40px; }
.pdh-h2{ font-size:22px; margin:6px 0 4px; }
.pdh-lead{ color:#6b7280; margin-bottom:14px; }

.pdh-grid4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.pdh-grid2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
@media (max-width:1100px){ .pdh-grid4{ grid-template-columns:repeat(2, minmax(0,1fr)); } .pdh-grid2{ grid-template-columns:1fr; } }

.pdh-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px; box-shadow:0 1px 0 rgba(0,0,0,.02); }
.card-title{ font-weight:600; margin-bottom:4px; }
.card-sub{ color:#6b7280; font-size:12px; margin-bottom:8px; }
.pdh-chart{ width:100%; height:320px; }

.metric .metric-title{ color:#6b7280; font-size:12px; }
.metric .metric-main{ font-weight:800; font-size:24px; margin-top:6px; }
.metric .metric-sub{ color:#10b981; font-size:12px; margin-top:6px; }

.pdh-pills{ display:flex; align-items:center; gap:8px; margin:14px 0; flex-wrap:wrap; }
.pill{ background:#eef2f7; border:1px solid #e5e7eb; color:#555; padding:8px 12px; border-radius:999px; cursor:pointer; }
.pill.is-active{ background:#fff; color:#111; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.pill-cta{ margin-left:auto; }

.btn{ padding:8px 12px; border-radius:10px; border:1px solid #111; cursor:pointer; }
.btn-light{ background:#fff; color:#111; border-color:#d1d5db; }
.btn-dark{ background:#0b0f1a; color:#fff; border-color:#0b0f1a; }

.pdh-table-wrap{ overflow:auto; }
.pdh-table{ width:100%; border-collapse:separate; border-spacing:0; }
.pdh-table th, .pdh-table td{ padding:10px 8px; border-bottom:1px solid #eee; text-align:left; font-size:14px; }

.pdh-card-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }

.pdh-subpanels .pdh-subpanel[hidden]{ display:none!important; }
.pdh-subpanel.is-active{ display:block; }
.pdh-list{ display:grid; gap:10px; }
.pdh-list-item{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; background:#0b0f1a; color:#fff; font-size:12px; margin-left:6px; }
.pdh-progress{ height:10px; background:#eef2f7; border-radius:999px; overflow:hidden; }
.pdh-progress span{ display:block; height:100%; background:#0b0f1a; }
.center{ text-align:center; }
.empty-state{ color:#6b7280; padding:30px 8px; }

/* Modals */
.pdh-modal[hidden]{ display:none; }
.pdh-modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:50; }
.pdh-modal-backdrop{ position:absolute; inset:0; background:rgba(17,24,39,.5); }
.pdh-modal-dialog{ position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:12px; width:min(560px, 92vw); padding:16px; box-shadow:0 20px 40px rgba(0,0,0,.18); }
.pdh-modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.pdh-modal-title{ font-weight:700; }
.pdh-modal-close{ border:none; background:transparent; font-size:18px; cursor:pointer; }
.pdh-modal-body{ color:#4b5563; }
.pdh-modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.pdh-input, .pdh-label{ width:100%; display:block; }
.pdh-input{ margin:4px 0 10px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#f9fafb; }
.pdh-fieldset{ border:1px solid #eee; padding:10px; border-radius:10px; margin-top:10px; }
.pdh-split{ display:flex; justify-content:space-between; }