:root{color-scheme:dark;--bg: #0c0f14;--bg-elevated: #141a22;--bg-soft: #1a222d;--border: #2a3544;--text: #e8eef6;--muted: #8b9bb0;--accent: #3d8bfd;--accent-soft: rgba(61, 139, 253, .15);--danger: #ff6b6b;--ok: #3ecf8e;--radius: 14px;--font: "Segoe UI", system-ui, -apple-system, sans-serif;--toolbar-h: 3.5rem;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;height:100%;min-height:100dvh;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-tap-highlight-color:transparent}button,input{font:inherit}a{color:var(--accent)}.shell{min-height:100%;min-height:100dvh;display:flex;flex-direction:column;padding:var(--safe-top) env(safe-area-inset-right,0) var(--safe-bottom) env(safe-area-inset-left,0)}.panel{width:min(420px,calc(100% - 2rem));margin:auto;padding:1.5rem;background:linear-gradient(180deg,var(--bg-elevated),var(--bg-soft));border:1px solid var(--border);border-radius:var(--radius)}.brand{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;margin:0 0 .25rem}.sub{color:var(--muted);margin:0 0 1.5rem;line-height:1.4}label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.35rem}input{width:100%;padding:.85rem .95rem;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);margin-bottom:1rem}input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:2.75rem;padding:.9rem 1rem;border:none;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.secondary{background:transparent;border:1px solid var(--border);color:var(--text)}.error{color:var(--danger);font-size:.9rem;margin:0 0 1rem}.dash{padding:calc(1.25rem + var(--safe-top)) 1.25rem calc(1.25rem + var(--safe-bottom));max-width:720px;margin:0 auto;width:100%}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.device-card{border:1px solid var(--border);background:var(--bg-elevated);border-radius:var(--radius);padding:1.15rem;margin-bottom:.85rem}.device-card h2{margin:0 0 .35rem;font-size:1.15rem}.meta{color:var(--muted);font-size:.9rem;margin-bottom:1rem}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:999px;font-size:.75rem;background:var(--bg-soft);border:1px solid var(--border)}.badge.online{color:var(--ok);border-color:#3ecf8e59}.badge.offline{color:var(--muted)}.viewer-root{position:fixed;top:0;right:0;bottom:0;left:0;height:100%;height:100dvh;background:#000;display:flex;flex-direction:column;overflow:hidden}.viewer-chrome{position:absolute;top:calc(.65rem + var(--safe-top));left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:0 .75rem;pointer-events:none}.viewer-chrome>*{pointer-events:auto}.viewer-back{position:absolute;left:calc(.65rem + env(safe-area-inset-left,0px));min-width:2.75rem;min-height:2.75rem;padding:0 .75rem;border-radius:999px;border:1px solid var(--border);background:#0c0f14d9;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600}.viewer-stage{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;background:#000;touch-action:none}.viewer-stage .display{position:absolute;top:0;left:0;transform-origin:0 0}.soft-keyboard-input{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;margin:0;padding:0;border:0;pointer-events:none}.toolbar{flex:0 0 auto;display:flex;gap:.45rem;padding:.55rem .65rem calc(.55rem + var(--safe-bottom));background:#0c0f14f0;border-top:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;transition:transform .22s ease,opacity .22s ease;z-index:5}.toolbar--hidden{position:absolute;left:0;right:0;bottom:0;transform:translateY(110%);opacity:0;pointer-events:none}.toolbar button{flex:0 0 auto;min-width:2.75rem;min-height:2.75rem;height:2.75rem;border-radius:10px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);font-size:.8rem;font-weight:600;scroll-snap-align:start}.toolbar button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.toolbar-abc{letter-spacing:.04em}.toolbar-fab{position:absolute;left:50%;bottom:calc(.65rem + var(--safe-bottom));transform:translate(-50%);z-index:6;min-width:3rem;min-height:2.5rem;border-radius:999px;border:1px solid var(--border);background:#0c0f14e6;color:var(--text);font-size:1rem;font-weight:700}.status-pill{padding:.4rem .85rem;border-radius:999px;background:#0c0f14d9;border:1px solid var(--border);font-size:.8rem;color:var(--muted);max-width:min(70vw,16rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .35s ease}.status-pill--ok{color:var(--ok);border-color:#3ecf8e59}.status-pill--fade{opacity:0;pointer-events:none}@media(max-width:640px){.dash{padding-left:1rem;padding-right:1rem}.device-card .btn{min-height:3rem;font-size:1rem}.toolbar{gap:.4rem;padding-top:.65rem}.toolbar button{min-width:3rem;min-height:3rem;height:3rem}}@media(orientation:landscape)and (max-height:500px){.toolbar{padding:.35rem .5rem calc(.35rem + var(--safe-bottom))}.toolbar button{min-width:2.4rem;min-height:2.4rem;height:2.4rem;font-size:.75rem}.viewer-back,.status-pill{min-height:2.25rem;font-size:.75rem}}.semantic-page{display:flex;flex-direction:column;height:100dvh;overflow:hidden;background:#000}.semantic-banner{display:none}.metro-shell{display:flex;flex-direction:column;flex:1;min-height:0;background:#000;color:#fff;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.metro-start,.metro-desktop{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.metro-start-header,.metro-desktop-bar{display:flex;align-items:center;gap:.55rem;padding:.65rem .75rem;padding-top:calc(.65rem + var(--safe-top));z-index:2}.metro-greeting{flex:1;min-width:0}.metro-greeting h1{margin:0;font-size:1.55rem;font-weight:300;letter-spacing:-.02em}.metro-greeting p{margin:.1rem 0 0;font-size:.75rem;color:#ffffff8c}.metro-nav-btn{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border:none;border-radius:0;background:#ffffff14;color:#fff;text-decoration:none;font-size:1.1rem;cursor:pointer;flex-shrink:0}.metro-tiles,.metro-desktop-list{flex:1;overflow:auto;padding:.25rem .55rem .85rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:4.35rem;gap:.28rem;align-content:start;-webkit-overflow-scrolling:touch}.metro-tile{position:relative;border:none;border-radius:0;color:#fff;text-align:left;padding:.4rem .45rem;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;height:100%;transition:transform .12s ease,filter .12s ease;aspect-ratio:1}.metro-tile:active{transform:scale(.96);filter:brightness(1.1)}.metro-tile.small{grid-column:span 1;grid-row:span 1;aspect-ratio:1}.metro-tile.medium{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;min-height:0}.metro-tile.wide{grid-column:span 4;grid-row:span 2;aspect-ratio:auto;min-height:0;height:auto}.metro-tile.focused{box-shadow:inset 0 0 0 2px #fff}.metro-tile.live{grid-row:span 2;min-height:8.2rem;aspect-ratio:auto}.metro-tile-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.9}.metro-tile-icon{position:absolute;top:12%;left:50%;transform:translate(-50%);width:52%;height:52%;object-fit:contain;image-rendering:-webkit-optimize-contrast;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}.metro-tile.medium .metro-tile-icon{top:18%;width:42%;height:42%}.metro-tile.wide .metro-tile-icon{display:none}.metro-tile-glyph{position:absolute;top:18%;left:50%;transform:translate(-50%);font-size:1.35rem;opacity:.95;pointer-events:none;line-height:1}.metro-tile.medium .metro-tile-glyph{top:22%;font-size:2rem}.metro-tile-label{position:relative;z-index:1;font-size:.68rem;font-weight:600;line-height:1.1;text-shadow:0 1px 2px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.metro-tile.medium .metro-tile-label{font-size:.82rem}.metro-tile.wide .metro-tile-label{font-size:.9rem}.metro-tile-sub{position:relative;z-index:1;font-size:.62rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metro-tile.wide .metro-tile-sub{font-size:.7rem}.metro-empty{grid-column:1 / -1;padding:2rem .5rem;text-align:center;color:#ffffffa6}.metro-empty-inline{grid-column:1 / -1;color:#ffffffa6;text-align:center;padding:2rem .5rem}.metro-cta{margin-top:.75rem;border:none;background:#0078d4;color:#fff;padding:.7rem 1.2rem;font-weight:600;cursor:pointer}.metro-desktop{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.metro-desktop-bar{position:relative;z-index:2;background:#000000b8}.metro-desktop-title{flex:1;min-width:0;display:flex;flex-direction:column}.metro-desktop-title strong{font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metro-desktop-title span{font-size:.7rem;color:#ffffff8c}.metro-nav-btn.on{background:#0078d4}.metro-stage{position:relative;flex:1;min-height:0;background:#000;touch-action:none;overflow:hidden;display:flex;align-items:center;justify-content:center}.metro-stage-img{width:100%;height:100%;object-fit:fill;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.metro-stage-wait{color:#fff9;font-size:.95rem}.metro-stage-hint{position:absolute;left:50%;bottom:.65rem;transform:translate(-50%);font-size:.68rem;color:#ffffff8c;background:#00000073;padding:.2rem .55rem;pointer-events:none}.metro-chrome{max-height:28%;background:#0a0a0af0;border-top:1px solid rgba(255,255,255,.1);padding:.45rem .55rem;z-index:3}.metro-chrome-scroll{display:flex;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.15rem}.metro-chip{flex:0 0 auto;border:none;color:#fff;padding:.55rem .75rem;font-size:.75rem;font-weight:600;white-space:nowrap;cursor:pointer}.metro-chrome-edit{flex:0 0 auto;display:flex;gap:.25rem;min-width:12rem}.metro-chrome-edit input{flex:1;border:none;padding:.45rem .55rem;font-size:.85rem}.metro-chrome-edit button{border:none;background:#0078d4;color:#fff;padding:0 .65rem;font-weight:700}.metro-chrome-empty{color:#ffffff73;font-size:.75rem;padding:.4rem}.metro-dock{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;padding:.4rem .5rem calc(.45rem + var(--safe-bottom));background:#0c0c0ceb;border-top:1px solid rgba(255,255,255,.08);z-index:5}.metro-dock button,.metro-dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:3.1rem;border:none;background:transparent;color:#ffffff8c;text-decoration:none;font-size:.68rem;cursor:pointer}.metro-dock button span,.metro-dock a span{font-size:1.15rem;line-height:1}.metro-dock button.active{color:#00bcf2}