.spp{display:grid;gap:20px;min-width:0}.spp-hero{border-radius:22px;padding:28px;background:linear-gradient(120deg,#122c3e,#204f61);color:#fff}.spp-hero h3{font-size:30px;margin:10px 0}.spp-hero small{letter-spacing:.15em;color:#85dbcb}.spp-hero p{color:#c5d6df;margin-bottom:0}.spp-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.spp-filters label{display:grid;gap:6px;min-width:130px;flex:1;font-size:12px;color:#526777}.spp-filters select,.spp-filters input{width:100%;min-width:0;max-width:100%;padding:11px;border:1px solid #d6e1e7;border-radius:10px;background:#fff}.spp-filters label:nth-child(3){flex:2;min-width:220px}.spp-message:empty{display:none}.spp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.spp-kpi{display:grid;text-align:left;background:white;border:1px solid #dce5e9;border-radius:16px;padding:18px;gap:10px;cursor:pointer}.spp-kpi strong{font-size:30px;color:#173e4f}.spp-kpi small{font-size:12px;color:#5e7380}.spp-tabs{display:flex;gap:8px;flex-wrap:wrap}.spp-tabs button[aria-pressed=true]{background:#173e4f;color:#fff}.spp-table-wrap{overflow:auto;border:1px solid #e0e8ec;border-radius:14px;background:#fff;margin:16px 0}.spp table{width:100%;border-collapse:collapse;min-width:740px;font-size:13px}.spp th{background:#eff5f7;text-align:left;padding:13px;color:#617887}.spp td{padding:14px;border-top:1px solid #e8eef1;vertical-align:top}.spp td small{display:block;margin-top:5px;color:#758591;font-size:11px}.spp-product{border:0;background:none;text-align:left;padding:0;color:#153c50;cursor:pointer;max-width:270px;min-width:160px}.spp-product strong{font-size:13px}.spp td .spp-stale{color:#a77428}.spp-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}.spp-chart{background:#fff;border:1px solid #dce5e9;border-radius:15px;padding:15px;min-width:0}.spp-chart h4{font-size:13px;margin:0 0 10px}.spp-chart svg{width:100%;height:auto}.spp-line{stroke:#168b85;stroke-width:2;fill:none}.spp-chart circle{fill:#168b85}.spp-chart text{font-size:10px;fill:#627c88}.spp-chart small{color:#758591;font-size:11px}.spp-dialog{border:0;border-radius:18px;width:min(500px,calc(100vw - 24px));max-height:85vh;overflow:auto;padding:22px}.spp-dialog form{display:grid;gap:14px}.spp-dialog label{display:grid;gap:6px}.spp-dialog input,.spp-dialog select,.spp-dialog textarea{min-width:0;width:100%;padding:10px;border:1px solid #cad9e2;border-radius:8px}.spp-dialog::backdrop{background:#17344699}@media(max-width:650px){.spp-kpis{grid-template-columns:repeat(2,1fr)}.spp-kpi{padding:13px}.spp-hero{padding:20px}.spp-hero h3{font-size:25px}.spp-charts{grid-template-columns:1fr}.spp-filters label:nth-child(3){min-width:100%;max-width:100%}.spp-tabs button{font-size:12px;padding:9px}.spp{gap:14px}}
.spp>div,.spp>form,.spp>nav,.spp>section{min-width:0;max-width:100%}.spp-chart svg{display:block}.spp-dialog{box-sizing:border-box}


.spp-filters label,.spp-kpi small,.spp table,.spp-product strong,.spp-chart h4{font-size:14px}.spp td small,.spp-chart small{font-size:12px}.spp-row-actions{display:grid;gap:8px}.spp td{overflow-wrap:anywhere}.spp-operation-count{font-weight:600;color:#173e4f}.spp td strong{font-variant-numeric:tabular-nums}.spp-filters label[hidden]{display:none}
@media(max-width:650px){.spp-tabs button{font-size:14px}.spp-filters label{min-width:120px}.spp-row-actions button{padding:9px}}