.dash-actions { display: flex; gap: 10px; }
.dash-actions .btn { padding: 9px 14px; font-size: 13px; }
.dash { padding-block: 34px 70px; transition: max-width .3s; }
.dash.phone { width: 390px; max-width: 100%; padding-inline: 14px; border-inline: 1px solid var(--line); }
.dash-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.dash-title h1 { margin: 0; font-size: 28px; letter-spacing: -.8px; }
.dash-title p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.dash-title .pulse { font-size: 12px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.kpi { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.kpi small { color: var(--muted); font-size: 12px; }
.kpi strong { display: block; margin-top: 2px; font-size: 28px; font-variant-numeric: tabular-nums; }
.kpi.alert strong { color: var(--bad); }
.group-title { margin: 30px 0 14px; font-size: 18px; }
.machine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.dash.phone .machine-grid, .dash.phone .kpis { grid-template-columns: 1fr; }
.machine { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(160deg, var(--panel-2), var(--panel)); transition: border-color .3s; }
.machine.warn { border-color: rgb(255 176 32 / 60%); }
.machine.alarm { border-color: rgb(255 84 104 / 70%); }
.machine-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.machine-head h3 { margin: 0; font-size: 16px; }
.machine-head small { color: var(--muted); }
.badge { padding: 3px 10px; border-radius: 20px; background: rgb(47 210 122 / 14%); color: var(--ok); font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge.warn { background: rgb(255 176 32 / 16%); color: var(--warn); }
.badge.alarm { background: rgb(255 84 104 / 16%); color: var(--bad); }
.badge.stopped { background: rgb(143 163 184 / 16%); color: var(--muted); }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric { padding: 10px 12px; border-radius: 9px; background: #0e1722; }
.metric small { display: block; color: var(--muted); font-size: 11px; }
.metric b { font-size: 20px; font-variant-numeric: tabular-nums; }
.metric b span { color: var(--muted); font-size: 11px; font-weight: 500; }
.metric.warn b { color: var(--warn); }
.metric.alarm b { color: var(--bad); }
.spark { display: block; width: 100%; height: 46px; margin-top: 12px; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-label { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.nozzles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.nozzle { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 8px; background: #0e1722; font-size: 12px; }
.nozzle.busy { color: var(--accent); }
.alarm-log { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.alarm-log li { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.alarm-log li:last-child { border-bottom: 0; }
.alarm-log time { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.alarm-log .sev-alarm { color: var(--bad); }
.alarm-log .sev-warn { color: var(--warn); }
.alarm-log .muted { color: var(--muted); }

@media (max-width: 760px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  #phone-toggle { display: none; }
}