/* product window */
.win{background:#0a0a0f;border:1px solid var(--border-2);border-radius:4px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(129,140,248,.07),0 0 80px -20px rgba(129,140,248,.18)}
.win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.015)}
.win-bar i{width:10px;height:10px;border-radius:50%;display:block;background:rgba(255,255,255,.14)}
.win-bar span{margin-left:10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--dim);letter-spacing:.04em}
.win-bar em{margin-left:auto;font-style:normal;display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--muted)}
.win-bar em::before{content:"";width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399;animation:hudpulse 2s ease-in-out infinite}
.win-body{padding:14px;display:flex;flex-direction:column;gap:10px;font-family:'JetBrains Mono',monospace}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:520px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:rgba(255,255,255,.025);border:1px solid var(--border);border-left:2px solid rgba(52,211,153,.5);border-radius:3px;padding:10px 12px}
.kpi small{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.kpi b{display:block;margin-top:5px;font-size:22px;font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1;transition:color .3s}
.kpi b u{text-decoration:none;font-size:10px;color:var(--dim);margin-left:3px;font-weight:400}
.kpi.warn{border-left-color:#f0a04b}.kpi.warn b{color:#f0a04b}
.chartbox{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:3px;padding:12px 12px 8px;position:relative}
.chartbox-h{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.chartbox-h span i{display:inline-block;width:12px;height:3px;border-radius:1px;margin-right:6px;vertical-align:middle}
#heroChart{display:block;width:100%;height:130px}
.grid-h{stroke:rgba(255,255,255,.06);stroke-width:1}
.alert-row{display:flex;align-items:center;gap:10px;border:1px solid rgba(240,160,75,.28);background:rgba(240,160,75,.07);border-radius:3px;padding:9px 12px;font-size:11px;color:#f0a04b;
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;min-height:38px}
.alert-row.on{opacity:1;transform:none}
.alert-row i{width:6px;height:6px;border-radius:50%;background:#f0a04b;flex:0 0 auto}
.alert-row span{margin-left:auto;border:1px solid rgba(240,160,75,.4);border-radius:2px;padding:3px 8px;font-size:10px;letter-spacing:.06em}


@keyframes hudpulse{0%,100%{opacity:1}50%{opacity:.35}}