:root{color:#17212b;background:#f5f7f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:15px}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}button,input,select{font:inherit}button{color:inherit}button:focus-visible{outline:2px solid rgba(15,159,95,.45);outline-offset:2px}#root{min-height:100vh}.app-shell{min-height:100vh;background:linear-gradient(180deg,#e9f0edb8,#f5f7f800 270px),#f5f7f8}.phone-first{min-height:100vh;width:100%;max-width:520px;margin:0 auto;position:relative;padding-bottom:86px;overflow-x:hidden}.topbar{min-height:64px;padding:max(14px,env(safe-area-inset-top)) 16px 8px;display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;position:sticky;top:0;z-index:20;background:#f5f7f8e6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(27,38,49,.06)}.brand-mark{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:#0f9f5f;color:#fff}.brand-text{display:grid;gap:1px}.brand-text strong,.page-title h1,.hero-panel h1,.detail-header h1{letter-spacing:0}.brand-text strong{font-size:18px}.brand-text span,.eyebrow,.hero-time span,.section-head span,.settings-list span,.command-card span,.sensor span,.rack-card-body span{color:#687482;font-size:12px}.topbar-actions{display:flex;align-items:center;gap:8px}.icon-button,.back-button{width:36px;height:36px;border:1px solid rgba(27,38,49,.1);background:#fff;border-radius:8px;display:grid;place-items:center;position:relative}.badge{min-width:17px;height:17px;border-radius:999px;display:grid;place-items:center;position:absolute;top:-5px;right:-5px;background:#ef4444;color:#fff;font-size:10px;font-weight:700}.mode-pill{height:36px;min-width:62px;border:1px solid rgba(15,159,95,.28);background:#0f9f5f;color:#fff;border-radius:8px;font-weight:700}.connectivity-strip{margin:10px 14px 0;min-height:42px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid rgba(27,38,49,.08);border-radius:8px;overflow:hidden}.connectivity-strip div{min-width:0;padding:8px 6px;display:grid;place-items:center;gap:2px;border-right:1px solid rgba(27,38,49,.06);color:#23765a}.connectivity-strip div:last-child{border-right:0}.connectivity-strip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#3f4d5a;font-size:11px}.content-shell{padding:12px 14px 0}.view-grid{display:grid;gap:10px;min-width:0}.view-grid>*,.panel,.hero-panel,.metric-row,.rack-detail,.rack-list,.camera-stack{min-width:0}.hero-panel,.page-title,.detail-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.hero-panel{min-height:68px;padding:14px;background:#17212b;color:#fff;border-radius:8px}.hero-panel h1,.page-title h1,.detail-header h1{margin:0;font-size:22px;line-height:1.1}.hero-panel .eyebrow,.hero-time span{color:#b8c8c4}.hero-time{text-align:right;display:grid;gap:2px}.hero-time strong{font-size:22px}.metric-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.metric-tile{min-height:74px;padding:10px;display:grid;align-content:center;gap:4px;border:1px solid rgba(27,38,49,.08);border-radius:8px;background:#fff}.metric-tile strong{font-size:22px}.metric-tile.danger{color:#dc2626;background:#fff5f5}.metric-tile.blue{color:#2563eb;background:#f3f8ff}.metric-tile.green{color:#138a55;background:#f0fbf5}.panel,.rack-card,.camera-card{border:1px solid rgba(27,38,49,.08);border-radius:8px;background:#fff}.panel{padding:12px}.section-head{min-height:26px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.section-head h2{margin:0;font-size:15px}.attention-list,.shelf-list,.rack-list,.camera-stack,.event-panel,.settings-list{display:grid;gap:8px}.attention-row,.event-row{min-height:54px;display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;padding:9px;border:1px solid rgba(27,38,49,.08);border-radius:8px;background:#fbfcfd}.attention-row strong,.event-row strong{display:block;font-size:13px}.attention-row span,.event-row span{display:block;color:#687482;font-size:12px;margin-top:2px}.attention-row time,.event-row time{color:#687482;font-size:12px}.attention-row.critical,.attention-row.warn,.event-row.critical,.event-row.warn{background:#fff7f5;border-color:#ef44443d;color:#dc2626}.attention-row.warn,.event-row.warn{background:#fffaf0;border-color:#f59e0b47;color:#b45309}.attention-row.info,.event-row.info{color:#2563eb}.attention-row.ok,.event-row.ok{color:#138a55}.rack-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.rack-strip::-webkit-scrollbar{display:none}.rack-chip{flex:0 0 auto;min-width:112px;height:56px;display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:6px;padding:8px;border:1px solid rgba(27,38,49,.08);border-radius:8px;background:#fbfcfd}.rack-chip strong,.rack-chip span{font-size:13px}.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.quick-grid button,.control-row button{min-height:44px;border:1px solid rgba(27,38,49,.1);border-radius:8px;background:#fbfcfd;display:grid;place-items:center;gap:4px;color:#273542}.quick-grid button span{font-size:11px}.command-card{padding:10px;display:grid;gap:4px;border-radius:8px;background:#effaf4;color:#0f6c43}.command-card small{color:#437a62}.page-title{min-height:48px;padding:2px 2px 0}.page-title>span{padding:6px 9px;border:1px solid rgba(27,38,49,.08);border-radius:8px;background:#fff;color:#3f4d5a;font-size:12px;font-weight:700}.rack-card{width:100%;padding:12px;display:grid;gap:10px;text-align:left}.rack-card-head,.rack-card-body,.rack-summary{display:flex;align-items:center;justify-content:space-between;gap:8px}.rack-card-head>div{display:flex;align-items:center;gap:7px}.rack-card-head span{color:#687482;font-size:12px}.rack-card-body>div,.rack-summary>div{display:grid;gap:2px}.rack-card-body strong,.rack-summary strong{font-size:16px}.shelf-dots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.shelf-dots span{height:7px;border-radius:999px;background:#dbe2e8}.status-dot{width:9px;height:9px;border-radius:999px;display:inline-block;background:#94a3b8}.status-dot.ok,.status-dot.attention,.rack-chip.ok .status-dot{background:#22a35a}.status-dot.warn,.shelf-dots .warn,.rack-chip.warn .status-dot{background:#f59e0b}.status-dot.critical,.shelf-dots .critical,.rack-chip.critical .status-dot{background:#ef4444}.status-dot.offline,.shelf-dots .offline,.shelf-dots .off{background:#a8b2bd}.shelf-dots .ok{background:#22a35a}.rack-card.critical{border-color:#ef444438}.rack-card.attention{border-color:#f59e0b3d}.detail-header{position:sticky;top:64px;z-index:10;padding:8px 0;background:#f5f7f8eb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.detail-header>div{flex:1;min-width:0}.detail-header span{display:block;color:#687482;font-size:12px;margin-top:3px}.rack-summary{align-items:stretch}.rack-summary>div{min-width:0;flex:1;padding-right:8px;border-right:1px solid rgba(27,38,49,.08)}.rack-summary>div:last-child{border-right:0}.shelf-row{width:100%;min-height:62px;display:grid;grid-template-columns:minmax(90px,1fr) auto;gap:8px;align-items:center;position:relative;padding:10px;border:1px solid rgba(27,38,49,.08);border-radius:8px;background:#fbfcfd;text-align:left;overflow:hidden}.shelf-row.selected{border-color:#0f9f5f73;box-shadow:inset 3px 0 #0f9f5f}.shelf-row.critical{background:#fff5f5}.shelf-row.warn{background:#fffaf0}.shelf-row.off,.shelf-row.offline{color:#77818c}.shelf-id{display:grid;gap:2px}.shelf-id span{font-weight:800}.shelf-id small{color:#687482}.shelf-metrics{display:flex;align-items:center;gap:10px}.shelf-metrics div{min-width:48px;display:grid;justify-items:center;gap:2px;color:#2563eb}.mini-bar{grid-column:1 / -1;height:5px;border-radius:999px;background:#e5e9ed;overflow:hidden}.mini-bar span{display:block;height:100%;background:#2f80ed;border-radius:inherit}.switch{width:48px;height:28px;border:0;border-radius:999px;padding:3px;background:#cbd3db}.switch span{width:22px;height:22px;display:block;border-radius:999px;background:#fff;transition:transform .18s ease}.switch.on{background:#16a34a}.switch.on span{transform:translate(20px)}.sensor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.sensor{min-height:72px;padding:8px;display:grid;align-content:center;gap:4px;border:1px solid rgba(27,38,49,.08);border-radius:8px;background:#fbfcfd}.sensor strong{font-size:18px}.sensor.critical{color:#dc2626;background:#fff5f5}.sensor.warn{color:#b45309;background:#fffaf0}.control-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.control-row button{display:flex;justify-content:center;font-weight:700}.control-row button:disabled{color:#9aa4af;background:#f1f4f6}.camera-card{position:relative;overflow:hidden}.camera-card img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover}.camera-overlay{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;gap:8px;color:#fff}.camera-overlay strong,.camera-overlay span{padding:5px 7px;border-radius:6px;background:#0a1016b8;font-size:12px}.camera-overlay span{background:#16a34a;font-weight:800}.camera-card button{width:calc(100% - 20px);min-height:40px;margin:10px;border:1px solid rgba(15,159,95,.24);border-radius:8px;background:#effaf4;color:#0f6c43;font-weight:800}.camera-stack.compact{gap:10px}.camera-selector{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.camera-selector::-webkit-scrollbar{display:none}.camera-selector button{flex:0 0 112px;padding:0;border:1px solid rgba(27,38,49,.1);border-radius:8px;overflow:hidden;background:#fff;text-align:left}.camera-selector button.active{border-color:#0f9f5f94;box-shadow:inset 0 0 0 2px #0f9f5f29}.camera-selector img{width:100%;aspect-ratio:16 / 9;display:block;object-fit:cover}.camera-selector span{display:block;padding:7px;font-size:12px;font-weight:800}.event-panel{padding:8px}.event-row{grid-template-columns:48px 1fr}.settings-list>div{min-height:50px;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(27,38,49,.08)}.settings-list>div:last-child{border-bottom:0}.settings-list strong{text-align:right;font-size:13px}.bottom-nav{position:fixed;left:50%;bottom:0;z-index:30;width:min(520px,100%);transform:translate(-50%);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:#fffffff0;border-top:1px solid rgba(27,38,49,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.bottom-nav button,.desktop-rail button{border:0;background:transparent}.bottom-nav button{height:50px;display:grid;place-items:center;gap:2px;color:#607080;border-radius:8px}.bottom-nav button span{font-size:11px;font-weight:700}.bottom-nav button.active{color:#0f9f5f;background:#effaf4}.desktop-rail{display:none}@media(max-width:360px){:root{font-size:14px}.connectivity-strip span,.quick-grid button span,.bottom-nav button span{font-size:10px}.content-shell{padding-inline:10px}.sensor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:900px){.app-shell{display:grid;grid-template-columns:236px minmax(0,1fr)}.desktop-rail{display:grid;align-content:start;gap:6px;min-height:100vh;padding:22px 14px;background:#15212d;color:#fff}.rail-brand{height:54px;display:flex;align-items:center;gap:9px;margin-bottom:14px;font-size:20px}.desktop-rail button{height:44px;display:flex;align-items:center;gap:10px;padding:0 12px;color:#c7d2dc;border-radius:8px;text-align:left}.desktop-rail button.active{color:#fff;background:#0f9f5f}.phone-first{max-width:none;padding-bottom:18px}.bottom-nav{display:none}.topbar{grid-template-columns:36px 1fr auto;padding-inline:24px}.connectivity-strip{margin-inline:24px;max-width:680px}.content-shell{padding:18px 24px 0}.today-view{grid-template-columns:1fr 1fr 1fr;align-items:start}.today-view .hero-panel,.today-view .metric-row{grid-column:1 / -1}.rack-detail{display:grid;grid-template-columns:minmax(360px,1.1fr) minmax(360px,1fr);gap:12px;align-items:start}.rack-detail .detail-header{grid-column:1 / -1;top:64px}.rack-detail .selected-shelf{position:sticky;top:136px}.rack-list,.camera-stack{grid-template-columns:repeat(2,minmax(0,1fr))}}