body.auth-mode .sidebar,
body.auth-mode .topbar,
body.auth-mode .mobile-nav { display: none; }
body.auth-mode .app-shell { display: block; }
body.auth-mode .main-area { min-height: 100dvh; }
body.auth-mode .page-wrap { min-height: 100dvh; display: grid; place-items: center; }
body.auth-mode .page-wrap.signed-out > [data-page-panel] { display: none !important; }
body.auth-mode .app-footer { display: none; }
.saved-actions-row { display: flex; align-items: center; gap: 6px; min-height: 29px; overflow: auto; margin-top: 8px; }
.controls-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.saved-actions { display: flex; gap: 6px; flex: 1; min-width: 0; overflow: auto; }
.saved-action-chip { display: flex; align-items: center; flex: none; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-2); }
.saved-action { padding: 6px 9px; border: 0; background: transparent; color: var(--muted); font-size: 8px; cursor: pointer; }
.saved-action:hover { color: var(--text); }
.saved-action-remove { width: 23px; height: 25px; border: 0; border-left: 1px solid var(--line); border-radius: 0 99px 99px 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.saved-action-remove:hover { color: var(--danger); }
.saved-actions-row > .text-button { flex: none; font-size: 8px; }
.form-error { min-height: 18px; margin-top: 8px; color: var(--danger); font-size: 9px; line-height: 1.5; text-align: left; }
.mfa-help { padding: 8px; border-radius: 7px; background: var(--surface-2); text-align: left; }
.info-page { width: min(800px, calc(100% - 36px)); min-height: 100dvh; margin: 0 auto; padding: 34px 0 28px; }
.info-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 58px; font-size: 13px; letter-spacing: .14em; }
.info-brand .brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 12px; font-size: 25px; }
.info-page h1 { margin: 8px 0 12px; font-size: clamp(36px, 7vw, 58px); line-height: 1.02; letter-spacing: -.06em; }
.info-lead { max-width: 620px; margin: 0 0 32px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.info-card { display: grid; grid-template-columns: 52px 1fr; gap: 15px; margin: 10px 0; padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.info-step { color: var(--muted); font-size: 11px; letter-spacing: .1em; }
.info-card h2 { margin: 0 0 8px; font-size: 15px; }
.info-card p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.status-label { display: inline-flex; padding: 5px 9px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 10px; }
.text-link { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; }
.info-page footer { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 32px; padding: 17px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.info-updated { margin: 20px 0; color: var(--muted); font-size: 10px; }
.feedback-form { display: grid; gap: 15px; }
.feedback-form label { display: grid; gap: 7px; font-size: 12px; font-weight: 650; }
.feedback-form select,.feedback-form textarea { width: 100%; padding: 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; }
.feedback-form textarea { resize: vertical; line-height: 1.6; }
.history-delete { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 14px; cursor: pointer; }
.history-delete:hover { color: var(--danger); border-color: var(--danger); }
.history-item { grid-template-columns: 31px minmax(0,1fr) auto 26px 26px; }
.history-save-quick { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 16px; cursor: pointer; }
.history-save-quick:hover { color: var(--text); border-color: var(--line-strong); }
.quick-dialog { text-align: left; }
.quick-dialog .eyebrow { margin: 0 0 7px; text-align: center; }
.quick-dialog h2 { margin-bottom: 18px; }
.stream-stage { position:relative; display:grid; place-items:center; min-height:320px; background:#141413; }
.stream-stage canvas { display:block; width:100%; height:auto; max-height:65vh; object-fit:contain; }
.stream-empty { position:absolute; inset:0; max-width:none; width:100%; background:var(--surface-2); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; }
.stream-stage video.pip-video { display:block; width:1px; height:1px; }
.pip-video { position:absolute; width:1px; height:1px; opacity:.01; pointer-events:none; }
.stream-toolbar { gap:12px; }
.stream-toolbar > span { min-width:0; }
.stream-toolbar b { font-size:11px; }
.stream-status { height:auto; min-height:40px; gap:10px; flex-wrap:wrap; padding:10px 14px; }
.home-screen-canvas { width:100%; height:220px; object-fit:contain; border-radius:13px; background:#151514; }
.trackpad { touch-action:none; user-select:none; -webkit-user-select:none; cursor:crosshair; transition:border-color .15s,background .15s; }
.trackpad[aria-disabled="false"] { border-color:var(--line-strong); background:linear-gradient(145deg,var(--surface),var(--surface-2)); }
.trackpad.active-touch { border-color:var(--text); background:var(--accent-soft); }
.trackpad-actions { grid-template-columns:1fr 1fr !important; }
.trackpad-actions .outline-button:last-child { display:inline-flex !important; }
.keyboard-entry { align-items:stretch; }
.keyboard-entry textarea { min-width:0; width:100%; resize:vertical; border:1px solid var(--line); background:var(--surface-2); color:var(--text); border-radius:10px; padding:10px; font-size:13px; }
.keyboard-shortcuts { display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.keyboard-shortcuts button { min-height:32px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:11px; cursor:pointer; }
.keyboard-shortcuts button:hover:not(:disabled) { background:var(--accent-soft); }
.keyboard-shortcuts button:disabled { opacity:.4; cursor:not-allowed; }
.keyboard-note { font-size:11px; line-height:1.6; }
.trackpad-coming { font-size:11px; max-width:calc(100% - 20px); text-align:center; }
.trackpad-actions .outline-button { font-size:12px; min-height:40px; }
.mini-screen { position:fixed; z-index:30; right:24px; bottom:90px; width:min(360px,calc(100vw - 24px)); border:1px solid var(--line-strong); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:0 16px 60px #0005; backdrop-filter:blur(24px); }
.mini-screen-handle { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; cursor:grab; touch-action:none; font-size:12px; }
.mini-screen canvas { display:block; width:100%; background:#151514; }
.appearance-extra { margin-top:18px; border-top:1px solid var(--line); padding-top:15px; display:grid; gap:10px; font-size:12px; }
.background-options { display:flex; gap:10px; align-items:center; }
.background-options button,.custom-color { width:34px; height:34px; padding:0; border-radius:50%; border:2px solid var(--line); background:var(--swatch); cursor:pointer; }
.background-options button.selected { outline:2px solid var(--text); outline-offset:3px; }
.custom-color { position:relative; display:grid; place-items:center; font-size:20px; background:var(--surface); overflow:hidden; }
.custom-color input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.appearance-extra select,.device-picker select { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:12px; }
.screen-position-label { margin-top:8px; }
.device-picker { display:grid; gap:9px; margin:18px 0 12px; font-size:12px; }
.enrolled-device { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:12px; }
.enrolled-devices { margin-bottom:14px; }
.enrolled-device span { overflow:hidden; text-overflow:ellipsis; }
.enrolled-device button { flex:none; font-size:11px; }
html[data-screen-position="left"] .workspace-grid .screen-preview { order:-1; }
html[data-screen-position="left"] .workspace-grid { grid-template-columns:.9fr 1.1fr; }
html[data-screen-position="hidden"] .workspace-grid,html[data-screen-position="floating"] .workspace-grid { grid-template-columns:1fr; }
html[data-screen-position="hidden"] .workspace-grid .screen-preview,html[data-screen-position="floating"] .workspace-grid .screen-preview { display:none; }
.nav-item { font-size:13px; }
.welcome-row p,.page-intro p,.pc-info>p { font-size:13px; }
.panel-heading h2,.settings-title h2 { font-size:16px; }
.panel-heading small,.settings-title p,.settings-card p,.stream-empty p { font-size:12px; line-height:1.7; }
.outline-button,.primary-button { font-size:12px; min-height:40px; }
.control-card>span:not(.control-icon) { font-size:13px; }
.control-card small { font-size:10px; }
.saved-action,.saved-actions-row>.text-button { font-size:11px; }
.dialog-label,.quick-dialog small { font-size:12px; line-height:1.6; }
.dialog-label input,.dialog-label textarea { font-size:14px; }
.confirm-dialog p { font-size:12px; }
.toast { font-size:12px; }
.surface-card,.pc-card { border-radius:20px; background:color-mix(in srgb,var(--surface) 93%,transparent); backdrop-filter:blur(20px); }
@media(max-width:760px) { .remote-inputs { grid-template-columns:1fr; } .trackpad { height:180px; } .remote-layout { gap:12px; } .stream-stage { min-height:230px; } .page-intro { flex-wrap:wrap; } .mini-screen { right:12px; bottom:90px; width:270px; } .keyboard-shortcuts button { min-height:40px; min-width:40px; } .stream-status>span { font-size:10px; } .welcome-row p,.page-intro p { font-size:12px; } .controls-grid .control-card { min-height:88px; } html[data-screen-position="left"] .workspace-grid { grid-template-columns:1fr; } .history-head { flex-wrap:wrap; gap:10px; } .background-options { gap:12px; } }
.analytics-summary { display: grid; gap: 5px; margin: 7px 0 11px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.analytics-summary b { font-size: 9px; }
.analytics-summary span { font-size: 11px; font-weight: 700; }
.analytics-summary small { color: var(--muted); font-size: 8px; }
.dialog-label { display: grid; gap: 6px; margin: 11px 0; color: var(--muted); font-size: 10px; }
.dialog-label input,.dialog-label textarea { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 11px; }
.dialog-label textarea { resize: vertical; line-height: 1.5; }
.feedback-form .form-note { margin: 0; }
html[data-theme="dark"] .info-brand .brand-mark { background: var(--surface); }
@media(max-width:760px) { .info-page { width: min(100% - 30px, 600px); padding-top: 20px; } .info-brand { margin-bottom: 42px; } .info-lead { font-size: 12px; } .info-card { grid-template-columns: 30px 1fr; gap: 10px; padding: 15px; } .info-card p { font-size: 11px; } }
@media (max-width: 1100px) { .controls-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .controls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.auth-mode .page-wrap { padding: 16px; }
  .saved-actions-row { margin-top: 5px; }
}
.profile-setup-form{display:grid;gap:22px;text-align:left;margin-top:26px}
.profile-setup-form>label{display:grid;gap:8px;font-weight:600}
.profile-setup-form input[name="nickname"]{width:100%;padding:14px;border-radius:14px;background:var(--bg);color:inherit;border:1px solid var(--line,#aaa5);font:inherit}
.profile-setup-form fieldset{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.profile-setup-form legend{font-weight:600;margin-bottom:12px}
.profile-setup-form fieldset label{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line,#aaa5);border-radius:14px;cursor:pointer;font-size:13px}
.profile-setup-form fieldset label:has(input:checked){background:var(--bg);border-color:currentColor}
.profile-setup-form input[type="checkbox"]{width:17px;height:17px;accent-color:currentColor;flex-shrink:0}
#profileSetup{max-width:580px}#emailCodeStatus{font-size:13px;line-height:1.7}#editZeusProfile{margin-bottom:12px}
@media(max-width:400px){.profile-setup-form fieldset{grid-template-columns:1fr}}

.auth-account-actions{display:none}body.auth-mode .auth-account-actions{display:flex;justify-content:flex-end;width:100%;max-width:1080px;padding:8px 0}
.design-preview-bar{display:flex;align-items:center;gap:6px;position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:90;width:max-content;max-width:calc(100% - 24px);overflow:auto;padding:7px;border:1px solid #ffffff25;border-radius:18px;background:#222222f5;color:#f8f8f5;box-shadow:0 8px 40px #0003;font-size:11px;backdrop-filter:blur(20px)}
.design-preview-bar span{padding:0 10px;white-space:nowrap;color:#b4b4ae}.design-preview-bar a{color:inherit;text-decoration:none;white-space:nowrap;padding:10px;border-radius:11px}.design-preview-bar a[aria-current]{background:#ffffff20}.design-preview .page-wrap{padding-bottom:90px}
@media(max-width:760px){.design-preview-bar{bottom:calc(74px + env(safe-area-inset-bottom))}.design-preview-bar span{display:none}body.auth-mode .design-preview-bar{bottom:14px}}

.pairing-card form{display:grid;gap:14px;margin:20px 0}.pairing-card label{display:grid;gap:8px;font-size:13px}.pairing-card input{min-width:0;width:100%;padding:13px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:inherit;font:inherit}.pairing-card input[name=code]{font:600 20px ui-monospace,monospace;letter-spacing:.1em}.pairing-card small{color:var(--muted);line-height:1.8}#pairDeviceStatus{font-size:13px;line-height:1.7}