:root { color-scheme: light dark; }
.psp-dark body, .psp-dark .psp-container { background:#0b1220; color:#e5e7eb; }
.psp-container { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.psp-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.psp-actions { display:flex; gap:.5rem; align-items:center; }
.psp-h1 { font-size: clamp(1.5rem, 2vw + 1rem, 2.2rem); margin: .5rem 0; }
.psp-h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.psp-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: .75rem; margin: 1rem 0; }
.psp-card { border-radius: 16px; padding: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,.06); background: var(--card-bg, #fff); }
.psp-dark .psp-card { background: #111827; }
.psp-actions .psp-btn { border:1px solid #e5e7eb; padding:.4rem .7rem; border-radius:999px; background:transparent; cursor:pointer; }
.psp-toggle { display:inline-flex; border:1px solid #cbd5e1; border-radius:999px; overflow:hidden; background:#f8fafc; }
.psp-dark .psp-toggle { background:#1f2937; border-color:#374151; }
.psp-toggle button { padding:.38rem .8rem; border:0; background:transparent; cursor:pointer; font-weight:600; color:#334155; }
.psp-dark .psp-toggle button { color:#e5e7eb; }
.psp-toggle button[aria-pressed="true"] { background:#0ea5e9; color:#fff; }
.psp-footer { opacity:.8; font-size:.9rem; margin-top:1rem; }
.psp-chart-wrap { height: 380px; }
.psp-placeholder { display:flex; align-items:center; justify-content:center; height:380px; border:2px dashed #cbd5e1; border-radius:16px; color:#64748b; background:#f8fafc;}
@media (max-width: 640px) {
  .psp-container { padding: .75rem; }
  .psp-grid { grid-template-columns: 1fr; gap: .6rem; }
  .psp-card { padding: .85rem; }
  .psp-chart-wrap { height: 320px; }
  .psp-placeholder { height:320px; }
  .psp-h2 { margin-bottom: .25rem; }
}
.recharts-tooltip-wrapper { pointer-events: none; } 
.recharts-cartesian-axis-tick-value { font-size: 12px; }