.pws-summary { margin: 0 0 18px; padding: 16px; border: 1px solid var(--gc-border, #d9e0dc); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--gc-surface, #fff) 97%, #deeee4), var(--gc-surface, #fff)); }
.pws-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.pws-head h3 { margin: 3px 0 0; color: var(--gc-ink, #10262a); font-size: 1.05rem; }
.pws-head h3 small { color: var(--gc-muted, #61706a); font-size: .72rem; font-weight: 500; }
.pws-badge { padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--gc-primary, #23754b) 10%, #fff); color: var(--gc-primary, #23754b); border: 1px solid color-mix(in srgb, var(--gc-primary, #23754b) 28%, transparent); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.pws-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.pws-kpis > div { min-width: 0; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--gc-border, #d9e0dc) 76%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--gc-surface, #fff) 96%, #e9f2ed); }
.pws-kpis span, .pws-kpis small, .pws-flow span, .pws-target span, .pws-target small, .pws-meta, .pws-mass small { display: block; color: var(--gc-muted, #61706a); font-size: .72rem; }
.pws-kpis strong { display: block; margin-top: 4px; color: var(--gc-ink, #10262a); font-size: 1rem; overflow-wrap: anywhere; }
.pws-mass { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 4px 14px; margin-top: 10px; padding: 11px 12px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--gc-border, #d9e0dc) 80%, transparent); background: var(--gc-surface, #fff); }
.pws-mass strong { color: var(--gc-ink, #10262a); }
.pws-mass span { color: var(--gc-ink, #10262a); }
.pws-mass small { grid-column: 2; }
.pws-streams { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 10px; margin-top: 10px; }
.pws-stream { border: 1px solid var(--gc-border, #d9e0dc); border-radius: 12px; background: var(--gc-surface, #fff); padding: 12px; }
.pws-stream header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pws-stream header strong { color: var(--gc-ink, #10262a); }
.pws-stream header span { color: var(--gc-muted, #61706a); font-size: .72rem; }
.pws-flow { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.pws-flow > div, .pws-target { padding: 8px 9px; border-radius: 9px; background: color-mix(in srgb, var(--gc-surface, #fff) 95%, #edf4f0); }
.pws-flow b, .pws-target strong { display: block; margin-top: 3px; color: var(--gc-ink, #10262a); font-size: .86rem; }
.pws-targets { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 6px; margin-top: 7px; }
.pws-meta { display: grid; gap: 3px; margin-top: 8px; line-height: 1.35; }
.pws-muted, .pws-error { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--gc-surface, #fff) 94%, #edf4f0); color: var(--gc-muted, #61706a); }
.pws-error { border: 1px solid color-mix(in srgb, #a13f36 30%, transparent); color: #8f352e; }
@media (max-width: 900px) { .pws-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .pws-head { flex-direction: column; } .pws-kpis, .pws-flow { grid-template-columns: 1fr; } .pws-mass { grid-template-columns: 1fr; } .pws-mass small { grid-column: 1; } }