:root{--bg: #eef2f4;--panel: #ffffff;--line: #c8d2d8;--ink: #102028;--muted: #4e636f;--accent: #007a7a;--warn: #b64926}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% -20%,#f8fbfc,#e8eef1 45%,#e2eaee 80%);color:var(--ink);font-family:Segoe UI,Trebuchet MS,sans-serif}html,body,#root{width:100%;height:100%}.app{min-height:100vh;padding:14px;display:grid;gap:14px;grid-template-rows:auto 1fr auto}.app.base-cards{--bg: #eef2f4;--panel: #ffffff;--line: #c8d2d8;--ink: #102028;--muted: #4e636f;--accent: #007a7a;--warn: #b64926;min-height:100%;height:100%;width:100%;padding:10px;gap:10px;background:radial-gradient(circle at 10% -20%,#f8fbfc,#e8eef1 45%,#e2eaee 80%);color:var(--ink)}.app.mm2{--bg: #090f14;--panel: #121b24;--line: #253647;--ink: #dce6ef;--muted: #91a5b8;--accent: #58d7c8;--warn: #f5b23a;min-height:100%;height:100%;width:100%;padding:10px;gap:10px;grid-template-rows:1fr;background:radial-gradient(circle at 10% -20%,#131d27,#0d141c 45%,#080d13 85%);color:var(--ink)}.app.mobile{--bg: #edf3f7;--panel: #ffffff;--line: #c7d6df;--ink: #112430;--muted: #4f6775;--accent: #0c7b6d;--warn: #b96f16;min-height:100%;height:100%;width:100%;padding:10px;gap:10px;background:radial-gradient(90% 65% at 0% 0%,#fbfdff,#eef4f8 54%,#e7eff4),linear-gradient(135deg,#f6fbff,#eaf2f7);color:var(--ink)}.app.ohh{--bg: #eff5f9;--panel: #ffffff;--line: #c8d9e5;--ink: #0f2430;--muted: #4f6978;--accent: #126e7c;min-height:100%;width:100%;padding:12px;gap:12px;background:radial-gradient(80% 55% at 5% 0%,#fcfeff,#eff5f9 52%,#e6eff5),linear-gradient(135deg,#f6fbff,#ebf3f8);color:var(--ink);display:block}.ohh-panel{padding:14px}.ohh-panel h1{margin:0 0 10px;font-size:34px;letter-spacing:-.3px}.ohh-stack{display:grid;grid-template-columns:1fr;gap:10px}.ohh-chart-row{border:1px solid var(--line);border-radius:10px;padding:6px;background:#f9fcff}.ohh-chart{width:100%;height:220px}.app.mobile .admin-grid{grid-template-columns:1fr}.view-switcher{display:flex;justify-content:flex-start;align-items:center;padding:8px 10px}.view-switcher label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.view-switcher select{border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--panel);color:var(--ink)}.admin-panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px}.admin-title{text-align:center;font-size:34px;font-weight:700;margin-bottom:8px}.admin-grid{display:grid;grid-template-columns:minmax(320px,1.3fr) minmax(220px,.9fr) minmax(320px,1.4fr);gap:10px;align-items:stretch}.kpi-row{display:flex;gap:10px;align-items:stretch}.kpi{min-width:110px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#f8fbfc}.kpi span{display:block;font-size:12px;color:var(--muted)}.kpi strong{font-size:22px}.kpi .subcount{margin-top:2px;font-size:11px;color:var(--muted)}.kpi.alert strong{color:var(--warn)}.admin-choice{border:1px solid var(--line);border-radius:8px;background:#f8fbfc;padding:10px;display:grid;align-content:center;gap:8px}.admin-choice label{display:grid;gap:6px;font-size:14px}.admin-choice select{border:1px solid var(--line);border-radius:6px;padding:8px;background:#fff}.testing-note{font-size:12px;color:var(--muted)}.debug-section{border:1px solid var(--line);border-radius:8px;background:#f8fbfc;padding:8px}.debug-title{font-size:20px;margin-bottom:8px;text-align:center}.replay-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.replay-controls input,.replay-controls select,.replay-controls button{border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:#fff}.replay-controls button{background:#edf7f7;cursor:pointer}.replay-controls .status{font-size:12px;color:var(--muted)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px}.panel h2{margin:0 0 10px;font-size:28px;font-weight:700;letter-spacing:-.3px}.overview{min-height:380px}.app.mm2 .overview{min-height:0;height:100%}.table-wrap{overflow:auto;max-height:56vh}.mirror-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;height:100%;overflow:auto;padding-right:2px}.mobile-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:65vh}.mobile-card{min-height:124px}.mirror-card{min-height:0;height:auto;min-height:136px;border:1px solid var(--line);border-radius:14px;background-color:#f7fafc;display:grid;grid-template-columns:minmax(0,4fr) minmax(30px,42px);gap:8px;padding:6px;cursor:pointer;overflow:hidden}.mirror-card.clarity-shaded{background-color:#7fb4e838}.mirror-card.selected{border-color:#6cf0df;border-width:2px;box-shadow:0 0 0 3px #6cf0df6b,0 0 24px #58d7c84d;background-color:#fff}.mirror-card.clarity-shaded.selected{background-color:#7fb4e847}.app.mm2 .mirror-card{background-color:#d9e0e7}.app.mm2 .mirror-card.clarity-shaded{background-color:#72a4d657}.app.mm2 .mirror-card.selected{background-color:#e3e8ee}.app.mm2 .mirror-card.clarity-shaded.selected{background-color:#7eaede66}.mirror-left{display:grid;grid-template-rows:auto minmax(0,1fr);gap:5px;min-width:0}.mirror-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;align-items:center;min-width:0}.mirror-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;min-width:0}.mirror-pill{border:2px solid #a9b9c8;border-radius:14px;min-height:0;padding:4px 6px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink);background:#eef4f8;font-size:clamp(9px,.58vw,11px);line-height:1.1;min-width:0;overflow:hidden}.app.mm2 .mirror-pill{border-color:#4c6074;background:#15212d}.app.mm2 .mirror-name-pill,.app.mm2 .mirror-inst-name,.app.mm2 .mirror-common-name{color:#1a2733}.mirror-id-text{font-size:clamp(30px,2vw,44px);font-weight:700;color:#1a2733;line-height:.9;padding:0 2px}.mirror-name-pill{display:grid;align-content:center;justify-items:center;gap:0;padding:2px 8px 3px;border-radius:16px}.mirror-pill.mirror-name-pill.status-online{background-color:#c0ffc0}.mirror-pill.mirror-name-pill.status-recent{background-color:#ffffc0}.mirror-pill.mirror-name-pill.status-offline{background-color:#e0e0e0}.app.mm2 .mirror-pill.mirror-name-pill.status-online{background-color:#b0ffa0}.app.mm2 .mirror-pill.mirror-name-pill.status-recent{background-color:#ffffa0}.mirror-inst-name{font-size:clamp(17px,1.22vw,26px);font-weight:700;letter-spacing:.1px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mirror-common-name{font-size:clamp(13px,.86vw,16px);font-weight:400;color:#5c7081;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app.mm2 .mirror-common-name{color:#1a2733}.mirror-metric-block{display:grid;grid-template-rows:auto minmax(0,1fr);gap:2px;min-width:0}.mirror-metric-pill{display:flex;align-items:center;justify-content:center;height:100%;padding:1px 5px;border-radius:16px}.mirror-metric-heading{font-size:clamp(11px,.78vw,16px);color:#364756;font-weight:600;white-space:nowrap;text-align:center}.app.mm2 .mirror-card.clarity-shaded .mirror-metric-heading{color:#cad5df}.mirror-metric-value{font-size:clamp(25px,1.74vw,40px);color:#263a4a;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1}.app.mm2 .mirror-metric-value{color:#e4edf5}.mirror-indicators{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:4px;justify-items:center;align-items:center}.mirror-indicator{border:2px solid #263847;border-radius:50%;display:grid;place-items:center;text-align:center;width:clamp(16px,1.3vw,22px);height:clamp(16px,1.3vw,22px);font-size:clamp(7px,.5vw,9px);font-weight:700;color:#0d1a24;line-height:1;padding:0}.mirror-indicator-spacer{width:clamp(16px,1.3vw,22px);height:clamp(16px,1.3vw,22px)}.mirror-indicator.status-green{background:#2dc35d}.mirror-indicator.status-yellow{background:#f3bf30}.mirror-indicator.status-gray{background:#9aa8b5}.mirror-indicator.production-green{background:#2dc35d}.mirror-indicator.production-blue{background:#5a92dc}.mirror-indicator.production-neutral{background:#7f93a6}.mirror-indicator.type{background:#f0f3f7}.error-banner{margin-bottom:10px;padding:8px 10px;border:1px solid #e5ccbe;border-radius:8px;background:#fff8f3;color:#7a3f22;font-size:13px}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid #e1e8ed;padding:8px;font-size:13px;text-align:left;white-space:nowrap}tr{cursor:pointer}.sortable-th{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable-th:hover{background:#eaf4f4}.sortable-th.sort-active{color:var(--accent)}tr.selected{background:#dff2f2}.overview-row.table-status-online td,.overview-row.table-status-online td.muted-reading{color:#2d8a4e}.overview-row.table-status-online td{font-weight:700}.overview-row.table-status-recent td,.overview-row.table-status-recent td.muted-reading{color:#b96f16}.status-cell{font-weight:400}.status-cell.status-emphasis{font-weight:700}.muted-reading{color:#7d8d97}.active-time{font-weight:700}.status-active{color:#2d8a4e;font-weight:700}.status-inactive{color:#7d8d97}.bottom-row{display:grid;grid-template-columns:2fr 1.05fr;gap:14px;min-height:280px}.app.base-cards .bottom-row{min-height:0;grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,1fr);gap:10px}.app.base-cards .panel h2{font-size:24px}.app.base-cards .details{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-height:0}.app.base-cards .chart{height:100%;min-height:160px}.app.base-cards .info-grid,.app.base-cards .faults-list{max-height:none;overflow:auto}.right-stack{display:grid;grid-template-rows:1fr 1fr;gap:12px;min-height:280px}.right-stack-hybrid{grid-template-rows:1fr 1fr 1fr}.mobile-detail-screen{display:none}.mobile-detail-screen.open{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;border-radius:0;border:none;padding:12px;background:radial-gradient(90% 65% at 0% 0%,#fbfdff,#eef4f8 54%,#e7eff4),linear-gradient(135deg,#f6fbff,#eaf2f7)}.mobile-detail-head{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px}.mobile-detail-head h2{margin:0;font-size:24px}.mobile-detail-subhead{grid-column:1 / -1;color:var(--muted);font-size:13px}.mobile-back-btn{border:1px solid var(--line);background:#f2f8fb;color:var(--ink);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:600}.mobile-detail-content{min-height:0;display:grid;gap:10px;overflow:auto;padding-bottom:10px}.mobile-detail-panel{padding:10px}.app.mobile .chart{height:290px}.details .subhead{color:var(--muted);font-size:14px;margin-bottom:8px}.chart{width:100%;height:340px}.alerts-list{display:block;max-height:380px;overflow:auto}.alert-item{border:1px solid #e5ccbe;background:#fff8f3;border-radius:8px;padding:8px;color:#633928}.alert-item.ok{background:#f5fcf6;border-color:#cce6cf;color:#22502d}.alert-item .line{font-size:13px;margin-bottom:2px}.alerts-table{width:100%;border-collapse:separate;border-spacing:0 6px}.alerts-table th,.alerts-table td{border-bottom:none;font-size:13px;padding:6px 8px}.alerts-table th{color:#253540;font-weight:700}.alert-message{color:#fff;font-weight:700;border-radius:4px;min-width:220px}.alert-message.sev-green{background:#1f9f1f}.alert-message.sev-orange{background:#f5a700}.alert-message.sev-red{background:#d8432e}.info-grid{display:grid;gap:4px}.info-row{display:flex;justify-content:space-between;gap:8px;font-size:13px}.info-row>span:first-child{color:#000;font-weight:700}.info-row>span.info-value{color:#000;font-weight:400}.info-row>span.firmware-warning{font-weight:400}.firmware-warning{display:inline-block;padding:2px 8px;border-radius:4px;background:#f5a700;color:#1f1f1f;font-weight:700}.faults-list{display:grid;gap:8px;max-height:240px;overflow:auto}.fault-item{border:1px solid #d8e2e8;background:#f9fcff;border-radius:8px;padding:8px}.fault-item .line{font-size:13px;margin-bottom:2px}.empty-state{color:var(--muted);font-size:13px}@media (max-width: 980px){.admin-grid{grid-template-columns:1fr}.kpi-row{flex-wrap:wrap}.bottom-row{grid-template-columns:1fr}.overview{min-height:320px}.panel h2{font-size:22px}.mobile-compact-grid{grid-template-columns:1fr;max-height:68vh}.ohh-panel h1{font-size:26px}.ohh-chart{height:200px}}@media (max-width: 1600px){.mirror-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mirror-card{min-height:130px}}@media (max-width: 1280px){.mirror-grid{grid-template-columns:repeat(3,minmax(240px,1fr));overflow-x:auto;overflow-y:auto;align-content:start}.mirror-card{height:auto;min-height:126px}.mirror-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.app.base-cards .bottom-row{grid-template-columns:minmax(420px,3fr) minmax(180px,1fr) minmax(180px,1fr);overflow-x:auto;align-content:start}}