:root {color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif; background:#0b1220; color:#e4ecf7}
* {box-sizing:border-box}
body {margin:0;line-height:1.45}
button,input {font:inherit}
button {background:#de3c51;color:#fff;border:1px solid #de3c51;padding:9px 13px;border-radius:8px;font-weight:650;cursor:pointer}
button:hover {filter:brightness(1.12)}
button:focus-visible,input:focus-visible {outline:3px solid #7bb5fa;outline-offset:3px}
button:disabled {cursor:not-allowed;opacity:.5}
button.secondary {background:#202d41;border-color:#36465e;color:#e4ecf7}
header {display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:24px 32px;background:#111b2b;border-bottom:1px solid #25354d}
h1 {font-size:26px;letter-spacing:-.5px;margin:5px 0 1px}
p {margin:4px 0;color:#9baec5}
nav {display:flex;gap:8px;flex-wrap:wrap}
.tag {color:#f49aab;font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
main {padding:22px 32px;max-width:1800px;margin:0 auto}
.info {padding:12px 16px;color:#b9cbe4;border:1px solid #334761;background:#17253a;border-radius:9px;font-size:13px}
.toolbar {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:22px 0 12px;color:#9eb2c8;font-size:13px}
.tabs {display:flex;gap:6px}
.tabs button {padding:6px 12px;background:#1c293d;border:1px solid #35445b;color:#e2ebf6}
.tabs button.selected {background:#dd3a50;border-color:#dd3a50;color:#fff}
.toolbar button.secondary {padding:6px 9px;margin-left:8px}
.grid {display:grid;grid-template-columns:repeat(var(--columns,8),minmax(0,1fr));gap:8px}
.device {min-width:0;overflow:hidden;border-radius:7px;background:#152235;border:1px solid #304159}
.preview {position:relative;aspect-ratio:16/10;background:linear-gradient(150deg,#1c314d,#162337 68%,#293b55);display:flex;align-items:center;justify-content:center;overflow:hidden}
.preview::after {content:'';position:absolute;bottom:0;left:0;right:0;height:6px;background:#243650}
.preview-label {font-size:clamp(9px,1vw,12px);font-weight:600;color:#88a1bc;text-align:center;padding:6px}
.preview-icon {height:21px;width:31px;margin:0 auto 5px;border:2px solid #65819f;border-radius:2px;position:relative}
.preview-icon:after {content:'';width:12px;height:3px;background:#65819f;position:absolute;bottom:-6px;left:8px}
.device-info {padding:8px 9px}
.device-info strong {display:block;font-size:clamp(9px,1vw,12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-info span {display:block;font-size:clamp(8px,.85vw,11px);color:#94abc5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-meta {display:flex;gap:4px;align-items:center;justify-content:space-between;margin-top:6px}
.pill {background:#33425c;color:#c8d3e4;font-size:9px;padding:2px 5px;border-radius:5px}
.footer-note {margin-top:23px;color:#8098b1;font-size:12px}
.empty {grid-column:1/-1;text-align:center;padding:55px 20px;border:1px dashed #455877;border-radius:9px;color:#a5b8d0}
body.login {min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card {background:#162235;border:1px solid #31435a;border-radius:14px;padding:32px;max-width:400px;width:100%;box-shadow:0 20px 55px #0003}
.login-card h1 {font-size:34px}
.login-card label {display:block;font-size:13px;margin:26px 0 9px}
.login-card input {background:#0a1525;color:#fff;border:1px solid #496078;border-radius:7px;padding:12px;width:100%;font-size:16px}
.login-card button {margin-top:15px;width:100%}
.login-card small {display:block;color:#8fa5be;margin-top:25px;font-size:12px}
.error {color:#f59ba9}
@media (max-width:1000px) {.grid {grid-template-columns:repeat(min(var(--columns,8),4),minmax(0,1fr))}header,main {padding-left:16px;padding-right:16px}}
@media (max-width:600px) {.grid {grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar button.secondary {margin-left:3px}}