:root{ --cs-deep:#0B5A66; --cs-teal:#1F8A9C; --cs-aqua:#60C7D2; --cs-bg1:#f4f8fa; --cs-bg2:#ecf3f6; --cs-panel:#ffffff; --cs-border:#e2e8ee; --cs-muted:#6b7b86; --cs-text:#0a1a1e; --radius:16px; }
.coldstream-wrap{ background: radial-gradient(1200px 400px at 20% -50px, var(--cs-bg2), transparent 60%), radial-gradient(1000px 500px at 80% -100px, #e9f7fa, transparent 60%), linear-gradient(180deg, var(--cs-bg1), #fafcfd); padding:16px; border-radius:var(--radius); border:1px solid var(--cs-border) }
.cs-header{ padding:8px 8px 12px; border-bottom:1px solid var(--cs-border) }
.cs-header h2{ margin:0; font-size:22px; color:var(--cs-text) }
.cs-content{ display:grid; grid-template-columns:380px 1fr; gap:16px; }
@media (max-width:900px){ .cs-content{ grid-template-columns:1fr } }
.cs-card{ background:var(--cs-panel); border:1px solid var(--cs-border); border-radius:var(--radius); padding:16px }
.cs-chart-card{ background:var(--cs-panel); border:1px solid var(--cs-border); border-radius:var(--radius); padding:8px }
.cs-field{ margin:10px 0 }
.cs-field label{ display:block; font-size:12px; font-weight:700; margin-bottom:6px }
.cs-field input, .cs-field select{ width:100%; padding:10px; border:1px solid var(--cs-border); border-radius:12px; font-size:14px; background:#fff; outline:none }
.cs-field input:focus, .cs-field select:focus{ border-color:var(--cs-teal); box-shadow:0 0 0 3px rgba(31,138,156,.15) }
.cs-help{ font-size:11px; color:var(--cs-muted) }
.cs-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.cs-button{ display:inline-block; background:linear-gradient(135deg,var(--cs-deep),var(--cs-teal)); color:#fff; border:none; border-radius:999px; padding:12px 16px; font-weight:700; cursor:pointer; margin-top:8px; box-shadow:0 4px 20px rgba(31,138,156,.18) }
.cs-badge{ display:inline-block; padding:4px 8px; border-radius:999px; background:#ecfdf5; color:#065f46; font-weight:700; font-size:11px; margin-left:8px }
.cs-err{ color:#9a3412; background:#fff7ed; border:1px solid #fed7aa; padding:6px 8px; border-radius:8px; font-size:12px; margin:6px 0; display:none }
.cs-kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:10px 0 16px }
.cs-kpi{ background:var(--cs-panel); border:1px solid var(--cs-border); border-radius:12px; padding:12px; min-height:76px; box-shadow:0 1px 0 rgba(0,0,0,.02) }
.cs-kpi small{ color:var(--cs-muted) }
.cs-kpi strong{ display:block; font-size:20px; margin-top:4px }
.cs-legend{ display:flex; gap:16px; align-items:center; font-size:12px; color:var(--cs-muted); padding:6px 8px }
.cs-swatch{ width:16px; height:3px; border-radius:3px; display:inline-block }
.cs-sw1{ background:var(--cs-deep) } .cs-sw2{ background:var(--cs-aqua) }
.cs-chart-wrap{ position:relative; width:100%; height:420px }
.cs-chart-wrap canvas{ display:block; width:100%; height:100% }