.pi { margin: 20px 0; padding: 24px; border: 1px solid var(--line-c,#393939); border-radius: 16px; background: var(--panel-c,#1d1e20); color: var(--text-c,#eee); min-width: 0; }
.pi[hidden] { display: none; }
.pi h2, .pi h3, .pi p { margin: 0; }
.pi h2 { font: 700 27px/1.2 var(--font-body, sans-serif); color: var(--ink-c,#fff); }
.pi h3 { font: 700 17px/1.3 var(--font-body,sans-serif); }
.pi-heading,.pi-chart-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:14px; }
.pi-kicker { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-c,#aaa); }
.pi-note { font-size:12px; line-height:1.6; color:var(--muted-c,#aaa); }
.pi > .pi-note { margin:10px 0; }
.pi-controls,.pi-actions { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.pi button,.pi input { min-height:44px; padding:9px 12px; border:1px solid var(--line-c,#444); border-radius:8px; background:var(--bg-c,#111); color:var(--ink-c,#fff); font:inherit; font-size:13px; max-width:100%; }
.pi button { cursor:pointer; }
.pi button[aria-pressed="true"] { background:var(--portal-blue-soft,#192d46); color:var(--portal-blue,#8abaff); border-color:var(--portal-blue,#8abaff); }
.pi-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0 24px; }
.pi-stat { padding:16px; border:1px solid var(--line-c,#444); border-radius:12px; background:var(--bg-c,#111); min-width:0; }
.pi-stat .pi-kicker { display:block; min-height:30px; }
.pi-number { display:block; font-size:27px; font-weight:700; line-height:1.3; margin:5px 0 8px; color:var(--ink-c,#fff); overflow-wrap:anywhere; }
.pi-stat--over .pi-number { color:var(--portal-red,#ffa294); }
.pi-legend { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; margin:12px 0; }
.pi-key:before { content:''; display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; background:var(--portal-blue,#8abaff); }
.pi-key--actual:before { background:var(--portal-green,#8ad5ac); }
.pi-chart-row { display:grid; grid-template-columns:145px minmax(40px,1fr) 185px; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-c,#444); }
.pi-chart-label,.pi-chart-values { font-size:12px; line-height:1.5; }
.pi-chart-values { text-align:right; color:var(--muted-c,#aaa); }
.pi-bars { display:grid; gap:4px; }
.pi-track { height:11px; border-radius:3px; background:var(--app-wash,#ffffff08); overflow:hidden; }
.pi-track.is-missing { border:1px dashed var(--line-2-c,#666); background:transparent; }
.pi-bar { display:block; height:100%; background:var(--portal-blue,#8abaff); border-radius:3px; min-width:0; }
.pi-bar--actual { background:var(--portal-green,#8ad5ac); }
.pi-warnings { margin:14px 0; padding:12px 14px; border-left:3px solid var(--portal-amber,#f0b454); background:var(--portal-amber-soft,#382b17); border-radius:5px; }
.pi-details { margin:18px 0; border-top:1px solid var(--line-c,#444); }
.pi-details summary { padding:15px 0; cursor:pointer; font-size:13px; font-weight:700; }
.pi-table-wrap { overflow:auto; max-width:100%; }
.pi-table { width:100%; border-collapse:collapse; font-size:12px; }
.pi-table th,.pi-table td { text-align:left; padding:10px; border-bottom:1px solid var(--line-c,#444); white-space:nowrap; }
.pi-table caption { text-align:left; padding:8px 0; color:var(--muted-c,#aaa); }
@media(max-width:1100px) { .pi-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .pi-chart-row { grid-template-columns:115px minmax(30px,1fr) 150px; } }
@media(max-width:600px) { .pi { padding:16px; } .pi-number { font-size:23px; } .pi-stat { padding:12px; } .pi-chart-row { grid-template-columns:100px minmax(30px,1fr); gap:6px 10px; } .pi-chart-values { grid-column:2; text-align:left; font-size:11px; } .pi-chart-label { grid-row:span 2; } .pi-controls input { width:100%; } .pi-heading>.pi-controls { width:100%; } }