:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    background: #0b0e13;
    color: #e9edf4;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .38; }
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.hidden { display: none !important; }
.topbar { height: 72px; padding: 0 clamp(22px, 4vw, 66px); border-bottom: 1px solid #222832; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 760; font-size: 21px; letter-spacing: -.7px; }
.brand-symbol { display: grid; place-items: center; width: 32px; height: 32px; color: #0b0e13; background: #a7d7c4; border-radius: 9px; font-weight: 850; }
.brand-accent { color: #a7d7c4; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.top-state { color: #8993a2; font-size: 13px; }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.login-layout { flex: 1; display: grid; place-items: center; padding: 48px 22px; }
.login-card { width: min(100%, 430px); padding: 35px; border: 1px solid #303743; background: linear-gradient(160deg, #181d26 0%, #12171e 95%); border-radius: 20px; box-shadow: 0 24px 100px #0005; }
.eyebrow { color: #a7d7c4; font-size: 11px; font-weight: 800; letter-spacing: 2.2px; }
h1 { margin: 10px 0; font-size: clamp(27px, 4vw, 38px); font-weight: 730; line-height: 1.15; letter-spacing: -1.3px; }
h2 { font-size: 21px; letter-spacing: -.5px; }
.muted { color: #98a3b1; line-height: 1.65; }
.login-card .muted { margin-bottom: 32px; }
label { display: block; margin: 18px 0 8px; font-size: 13px; font-weight: 650; color: #d1d8e2; }
input, textarea { display: block; width: 100%; color: #f3f6fa; background: #0b1017; border: 1px solid #333b49; border-radius: 10px; outline: none; padding: 13px 14px; }
input:focus, textarea:focus { border-color: #9dcab9; box-shadow: 0 0 0 3px #a7d7c422; }
.button { border: 1px solid #36404c; background: #222936; color: #eef3f7; font-weight: 680; border-radius: 10px; padding: 11px 17px; white-space: nowrap; transition: background .15s; }
.button:hover:not(:disabled) { background: #323b49; }
.button.primary { border-color: #a7d7c4; color: #10281f; background: #a7d7c4; }
.button.primary:hover:not(:disabled) { background: #c5e5d8; }
.button.ghost { background: none; border-color: transparent; color: #a9b3bf; }
.button.ghost:hover { background: #232a34; }
.button.wide { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 25px; }
.small-note { margin-top: 24px; color: #707b88; font-size: 12px; text-align: center; }
.error { color: #ff9e9e; padding: 8px 0 0; font-size: 13px; }
.dashboard { width: min(100%, 970px); align-self: center; padding: 65px 22px; }
.section-head { margin-bottom: 35px; }
.section-head h1 { margin: 10px 0 5px; }
.device-card { padding: 30px; border: 1px solid #303845; border-radius: 18px; background: #161c24; }
.device-top, .device-bottom { display: flex; justify-content: space-between; align-items: center; }
.computer-icon { display: grid; place-items: center; color: #a7d7c4; background: #273c37; border-radius: 12px; width: 54px; height: 54px; font-size: 28px; }
.device-card h2 { margin: 22px 0 2px; }
.device-card .muted { margin: 0; }
.device-bottom { border-top: 1px solid #303845; margin-top: 27px; padding-top: 24px; }
.device-type { font-size: 13px; color: #8b96a5; }
.status-badge { display: inline-flex; align-items: center; gap: 7px; background: #29313b; border-radius: 999px; font-size: 12px; padding: 8px 12px; color: #a8b1bd; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 100%; background: #8792a0; flex-shrink: 0; }
.status-badge.online { background: #1c3d31; color: #a7dfbf; }
.status-badge.online .status-dot, .live-dot { background: #7ddbae; box-shadow: 0 0 10px #7ddbae6b; }
.help { color: #74808e; font-size: 13px; line-height: 1.6; margin-top: 22px; }
.footer { padding: 18px 26px 26px; color: #57616d; font-size: 10px; text-align: center; letter-spacing: 2px; }
.footer span { margin: 0 7px; }
.viewer { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding: 13px clamp(14px, 3vw, 32px); border-bottom: 1px solid #262f38; background: #11161d; }
.viewer-title { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 730; }
.subtle { color: #788493; font-weight: 450; }
.viewer-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.viewer-actions .button { padding: 8px 12px; font-size: 12px; }
.viewer-toggle { background: #222936; border-color: #3b4754; color: #9eaab8; }
.viewer-toggle.active { border-color: #6b9b87; color: #b5e1cf; background: #23372f; }
.viewer-toggle:hover:not(:disabled) { background: #2d413b; }
.danger-button { background: #39262a; border-color: #66343c; color: #ffb8bd; }
.danger-button:hover { background: #57343a !important; }
.screen-area { flex: 1; min-height: 300px; overflow: hidden; background: #050608; display: flex; align-items: center; justify-content: center; position: relative; outline: none; touch-action: none; }
.screen-area:focus-within, .screen-area:focus { box-shadow: inset 0 0 0 2px #a7d7c477; }
.screen-area:fullscreen, .screen-area.pseudo-fullscreen { width: 100vw; height: 100dvh; min-height: 0; max-height: none; background: #000; padding: 0; }
.screen-area.pseudo-fullscreen { position: fixed; inset: 0; z-index: 3000; flex: none; }
.exit-fullscreen { display: none; position: absolute; top: 16px; right: 16px; z-index: 4; padding: 9px 13px; font-size: 12px; background: #111a24dc; border: 1px solid #475c65; color: #e7edf3; box-shadow: 0 4px 18px #0008; }
.screen-area:fullscreen .exit-fullscreen, .screen-area.pseudo-fullscreen .exit-fullscreen { display: inline-flex; }
.screen-area:fullscreen #remoteScreen, .screen-area.pseudo-fullscreen #remoteScreen { max-width: 100vw; max-height: 100dvh; }
.remote-keyboard { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none; resize: none; caret-color: transparent; }
#remoteScreen { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; user-select: none; cursor: crosshair; touch-action: none; }
.screen-loading { color: #8994a3; font-size: 13px; position: absolute; pointer-events: none; }
.viewer-hint { font-size: 11px; text-align: center; color: #7f8a97; padding: 10px; }
.overlay { position: fixed; inset: 0; background: #000b; display: grid; place-items: center; padding: 20px; z-index: 5; }
.dialog { width: min(100%, 450px); padding: 27px; background: #171e27; border: 1px solid #384454; border-radius: 17px; box-shadow: 0 24px 90px #0009; }
.dialog h2 { margin: 0 0 8px; }
.dialog textarea { resize: vertical; min-height: 90px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; }
.toast { position: fixed; bottom: 35px; left: 50%; transform: translateX(-50%); background: #253440; border: 1px solid #3a4e5e; border-radius: 12px; color: #eff6f7; padding: 13px 18px; box-shadow: 0 12px 40px #0008; z-index: 10; }
@media (max-width: 650px) {
    .topbar { height: 60px; padding: 0 18px; }
    .top-state, .hide-small { display: none; }
    .login-card { padding: 27px 23px; }
    .dashboard { padding-top: 43px; }
    .device-card { padding: 22px; }
    .viewer-bar { align-items: flex-start; }
    .viewer-actions { width: 100%; }
    .viewer-actions .button { flex: 1; }
    .viewer-hint { font-size: 10px; }
    .footer { display: none; }
}
.monitor-select { color: #e7edf3; background: #1b222d; border: 1px solid #37404d; padding: 8px; border-radius: 9px; font: inherit; font-size: 12px; max-width: 130px; }