:root {
  --canvas: #edf2f8;
  --paper: #ffffff;
  --ink: #16243a;
  --muted: #64758d;
  --faint: #94a3b8;
  --line: #dce5ef;
  --green: #1769ed;
  --green-deep: #1054c2;
  --green-soft: #e9f1ff;
  --mint: #d9e9ff;
  --coral: #5fb7ff;
  --sand: #f3f7ff;
  --shadow: 0 16px 40px rgba(18, 43, 82, .07);
}

body { background: var(--canvas); }
button:focus-visible, a:focus-visible, input:focus-visible { outline-color: #66b8ff; }

.sidebar { background: #081323; border-right: 1px solid #142a45; }
.brand { color: #f4f8ff; }
.brand-mark { border-radius: 11px 11px 11px 3px; background: linear-gradient(135deg, #2686ff, #0647bc); box-shadow: 0 8px 24px rgba(20, 100, 230, .25); }
.brand-copy strong { font-size: 19px; letter-spacing: .45px; }
.brand-copy small { color: #7fa8d5; }
.workspace-label { color: #66809e; }
.nav-link { color: #9aacbf; }
.nav-link:hover { background: #122741; color: #f7fbff; }
.nav-link.is-active { color: #f6faff; background: #17416f; box-shadow: inset 3px 0 #55b7ff; }
.sidebar-help { border-color: #19304b; color: #7690ad; background: #0d2038; }
.sidebar-help strong { color: #e8f2ff; }
.help-mark { color: #91ccff; background: #18395c; }
.profile-row { border-top-color: #1b314a; }
.profile-avatar { color: #d8eaff; background: #254a76; }
.profile-copy strong { color: #eaf3ff; }
.profile-copy small, .profile-menu { color: #7891ad; }
.sidebar-utilities { display: grid; gap: 6px; margin-bottom: 15px; }
.sidebar-utility { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid #19304b; border-radius: 8px; color: #a8c0da; background: #0d2038; text-align: left; font-size: 10px; font-weight: 650; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.sidebar-utility:hover { border-color: #2a527c; color: #f4f9ff; background: #122b49; }
.utility-icon { display: grid; flex: 0 0 auto; place-items: center; width: 19px; height: 19px; color: #8fd0ff; font-size: 17px; line-height: 1; }
.utility-exit .utility-icon { color: #ff9b91; }
.utility-exit:hover { border-color: #714144; color: #ffe4e1; background: #38232d; }

.page-content { max-width: 1600px; padding: 20px clamp(16px, 2.2vw, 30px) 24px; }

.intro-section {
  display: block;
  min-height: 440px;
  margin-bottom: 17px;
  border: 1px solid #1d3c61;
  border-radius: 15px;
  color: #f8fbff;
  background: linear-gradient(90deg, rgba(3, 9, 21, .03) 0%, rgba(3, 9, 21, .14) 42%, rgba(3, 9, 21, .35) 62%, rgba(3, 9, 21, .21) 100%), url('assets/nogix-hero.png') center center / cover no-repeat, #081323;
  box-shadow: 0 23px 48px rgba(10, 29, 61, .2);
}
.intro-section::before { position: absolute; inset: 0; content: ''; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(125, 190, 255, .08), inset 0 -55px 55px rgba(3, 10, 24, .3); }
.intro-section::after { position: absolute; right: 31px; top: 38px; width: 74px; height: 3px; content: ''; background: linear-gradient(90deg, #78caff, transparent); }
.hero-content { position: relative; z-index: 1; width: 55%; margin-left: auto; padding: 80px 43px 65px 10px; }
.eyebrow { color: #92cafa; font-size: 10px; letter-spacing: 1.55px; white-space: nowrap; }
.eyebrow-line { width: 23px; background: #6cc3ff; }
.eyebrow-divider { padding: 0 2px; color: #4276ad; }
.intro-section h1 { margin: 7px 0 12px; color: #ffffff; font: inherit; letter-spacing: 0; text-shadow: none; }
.hero-wordmark { display: block; width: 100%; height: 98px; object-fit: cover; object-position: center; filter: drop-shadow(0 8px 15px rgba(20, 114, 229, .22)); }
.hero-service { display: block; margin-top: -7px; color: #ffffff; font: normal clamp(32px, 3.2vw, 46px)/1 Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: .03em; white-space: nowrap; }
.intro-section h1 em { display: block; margin-top: 7px; color: #68bfff; font: normal clamp(21px, 1.9vw, 27px)/1.1 Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: .06em; white-space: nowrap; }
.hero-actions { display: flex; align-items: center; gap: 21px; margin-top: 70px; }
.hero-primary, .hero-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 42px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.hero-primary { padding: 0 17px; border-radius: 6px; color: #061a33; background: #76c4ff; box-shadow: 0 7px 24px rgba(32, 139, 255, .19); }
.hero-primary:hover { background: #a2d8ff; }
.hero-secondary { color: #e8f4ff; }
.hero-secondary:hover { color: #81c8ff; }
.hero-primary span, .hero-secondary span { font-size: 15px; font-weight: 400; }
.hero-topline, .hero-bottomline { position: absolute; z-index: 1; color: #8cafcf; font-size: 8px; font-weight: 700; letter-spacing: 1.35px; }
.hero-topline { top: 25px; right: 31px; }
.hero-topline span { padding: 0 7px; color: #54adf8; font-size: 6px; }
.hero-bottomline { display: flex; gap: 19px; right: 42px; bottom: 21px; }
.hero-bottomline span { border-top: 1px solid #456b94; padding-top: 7px; }
.prototype-notice { margin-bottom: 17px; border-color: #c9dcf2; color: #4a6789; background: #e6f0fc; }
.notice-icon { color: #1764b9; background: #cde2fa; }
.prototype-notice strong { color: #244c77; }
.notice-label { color: #587da6; }

.work-area { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 14px; }
.card { position: relative; padding: 18px 20px 17px; border-color: #dae4ef; border-radius: 13px; }
.invite-card { border: 1.5px solid #83b8ed; background: linear-gradient(145deg, #dcecff 0%, #eaf4ff 62%, #f2f8ff 100%); box-shadow: 0 16px 38px rgba(28, 103, 197, .14); }
.connect-card { border: 1.5px solid #79c2c7; background: linear-gradient(145deg, #dcf2f1 0%, #eaf8f7 62%, #f2fbfa 100%); box-shadow: 0 16px 38px rgba(20, 117, 128, .13); }
.invite-card::before, .connect-card::before { position: absolute; top: 0; right: 20px; left: 20px; height: 3px; content: ''; border-radius: 0 0 5px 5px; }
.invite-card::before { background: linear-gradient(90deg, #277df0, #77c5ff); }
.connect-card::before { background: linear-gradient(90deg, #1597ac, #78d8d7); }
.card-heading { gap: 10px; }
.step-number { width: 24px; height: 24px; border-radius: 7px; color: #1764d4; background: #dcecff; font-size: 10px; }
.step-number-muted { color: #117584; background: #d8f2f2; }
.card-kicker, .code-label-row label, .input-label { color: #6d85a1; font-size: 9px; letter-spacing: 1.25px; }
.invite-card .card-kicker { color: #286daf; }
.connect-card .card-kicker { color: #187986; }
.card h2, .section-heading h2 { color: #18304d; font-size: 15px; line-height: 1.32; }
.connect-card h2 { color: #174752; }
.heading-icon { width: 32px; height: 32px; }
.invite-icon { color: #1769ed; background: #dbeeff; }
.connect-icon { color: #118297; background: #d9f3f2; }
.card-description, .code-label-row, .code-box, .invite-actions, .consent-hint, .input-label, .input-wrap, .connect-button, .connect-footnote { margin-left: 0; }
.card-description { min-height: 34px; margin-top: 10px; margin-bottom: 12px; color: #687e96; font-size: 11px; line-height: 1.5; }
.expires-label { color: #738aaa; font-size: 10px; }
.small-dot { background: #78a9d9; }
.small-dot.is-active { background: #2dba94; }
.code-box { min-height: 48px; border-color: #b8d4f3; border-radius: 8px; background: #f4f8ff; }
.invite-card .code-box { border-color: #9ec6f1; background: rgba(255, 255, 255, .82); }
.code-box output { color: #183c72; font-size: 17px; letter-spacing: 1.7px; overflow-wrap: anywhere; }
.copy-button { color: #3674b6; }
.copy-button:hover { color: #1769ed; background: #e2efff; }
.invite-actions { margin-top: 11px; }
.invite-actions #stop-capture[hidden], .invite-actions #stop-control[hidden] { display: none; }
.button { min-height: 45px; border-radius: 8px; font-size: 11px; }
.invite-card .button-primary { width: 190px; max-width: 100%; height: 45px; }
.button-primary { background: linear-gradient(135deg, #1769ed, #3287f1); box-shadow: 0 6px 16px rgba(23, 105, 237, .2); }
.button-primary:hover { background: linear-gradient(135deg, #1054c2, #2272db); }
.button-quiet { color: #5d7899; }
.button-quiet:hover { color: #1769ed; background: #edf5ff; }
.consent-hint { margin-top: 12px; padding-top: 9px; border-top-color: #e5edf7; color: #6d829b; font-size: 10px; }
.consent-check { color: #1769ed; background: #e5f1ff; }
.input-wrap { min-height: 44px; border-color: #d5e2ef; border-radius: 8px; background: #f8fbff; }
.input-wrap:focus-within { border-color: #65a8f4; box-shadow: 0 0 0 3px rgba(45, 143, 246, .12); }
.connect-card .input-wrap { border-color: #b2dcdf; background: rgba(255, 255, 255, .86); }
.connect-card .input-wrap:focus-within { border-color: #40aebc; box-shadow: 0 0 0 3px rgba(38, 157, 168, .12); }
.input-symbol { color: #6b99c7; }
.input-wrap input { font-size: 12px; }
.input-wrap input::placeholder { color: #a4b5c9; }
.paste-code-button { flex: 0 0 auto; padding: 6px 8px; border: 0; border-radius: 6px; color: #1769ad; background: transparent; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.paste-code-button:hover { background: #e2efff; }
.paste-code-button:focus-visible { outline: 2px solid #3c93ef; outline-offset: 2px; }
.connect-button { width: 190px; max-width: 100%; height: 45px; margin-top: 11px; background: #106c7b; box-shadow: 0 6px 16px rgba(16, 108, 123, .17); }
.connect-button:hover { background: #0d5663; }
.connect-footnote { margin-top: 10px; color: #8092a8; font-size: 10px; line-height: 1.4; }

.recent-section { margin-top: 18px; padding: 18px; border: 1px solid #1d3551; border-radius: 14px; color: #edf5ff; background: linear-gradient(145deg, #0b1728, #10233a); box-shadow: 0 16px 38px rgba(10, 29, 54, .16); }
.recent-heading { margin-bottom: 13px; }
.recent-kicker { margin: 0 0 5px; color: #7fa8d3; font-size: 9px; font-weight: 700; letter-spacing: 1.25px; }
.recent-heading h2 { margin: 0; color: #f2f7ff; font-size: 17px; line-height: 1.3; }
.recent-description { margin: 5px 0 0; color: #9aadc4; font-size: 11px; }
.recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 11px; }
.recent-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 15px; border: 1px dashed rgba(160, 190, 220, .28); border-radius: 10px; background: rgba(255, 255, 255, .035); }
.recent-empty-icon { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: #7cc6ff; background: rgba(76, 148, 219, .15); }
.recent-empty-icon svg { width: 21px; height: 21px; }
.recent-empty-copy { display: grid; gap: 4px; }
.recent-empty-copy strong { color: #e6f0fc; font-size: 11px; }
.recent-empty-copy > span { color: #94a9c1; font-size: 10px; line-height: 1.4; }
.recent-card { position: relative; overflow: hidden; min-height: 128px; padding: 13px; border: 1px solid #28415f; border-radius: 10px; background: radial-gradient(circle at 88% 20%, rgba(50, 127, 226, .26), transparent 38%), #101f33; }
.recent-card::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; content: ''; background: linear-gradient(90deg, #428de7, #73c5ff); }
.recent-card[data-tone="teal"] { background: radial-gradient(circle at 88% 20%, rgba(45, 176, 180, .25), transparent 38%), #10232f; }
.recent-card[data-tone="teal"]::after { background: linear-gradient(90deg, #18899b, #76d2d0); }
.recent-card[data-tone="violet"] { background: radial-gradient(circle at 88% 20%, rgba(113, 91, 223, .28), transparent 38%), #171d36; }
.recent-card[data-tone="violet"]::after { background: linear-gradient(90deg, #5143b7, #9b8bfa); }
.recent-card-top { display: flex; align-items: center; justify-content: space-between; }
.recent-state { display: flex; align-items: center; gap: 6px; color: #a8bdd4; font-size: 8px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; }
.recent-dot { width: 7px; height: 7px; border-radius: 50%; background: #58b4ff; box-shadow: 0 0 0 3px rgba(88, 180, 255, .12); }
.recent-controls { display: flex; gap: 4px; }
.recent-control { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(171, 197, 224, .16); border-radius: 7px; color: #b4c7dc; background: rgba(7, 16, 29, .38); font-size: 16px; line-height: 1; }
.recent-control:hover { border-color: rgba(164, 203, 243, .45); color: #f0f7ff; background: rgba(64, 125, 190, .25); }
.recent-favorite { font-size: 19px; }
.recent-favorite[aria-pressed="true"] { color: #f0c66d; }
.recent-remove:hover { color: #ffaaa5; }
.recent-code { display: flex; align-items: center; gap: 6px; margin-top: 15px; color: #f1f6ff; font-size: 13px; font-weight: 700; letter-spacing: .55px; }
.recent-wordmark { display: block; flex: 0 0 auto; width: 47px; height: 16px; object-fit: contain; }
.recent-accessed { margin: 5px 0 0; color: #9aafc8; font-size: 9px; }
.recent-footnote { margin: 10px 1px 0; color: #8097b0; font-size: 9px; }
.remote-screen { background: #081323; }
.remote-screen.control-enabled { cursor: crosshair; touch-action: none; outline: 2px solid #d6a944; outline-offset: 2px; }
.account-connect { margin-top: 18px; padding: 16px; border: 1px solid #bad0e7; border-radius: 12px; background: #f3f8ff; }
.account-connect summary { cursor: pointer; color: #17497a; font-weight: 800; }
.account-connect p { margin: 10px 0 14px; color: #52677e; font-size: 12px; }
.account-connect .settings-field { display: grid; gap: 5px; margin-top: 10px; }
.account-connect .settings-field input, .account-connect .settings-field select { width: 100%; }
.account-connect .button { margin-top: 12px; width: 100%; }
:root[data-theme="dark"] .account-connect { border-color: #355572; background: #122a42; }
:root[data-theme="dark"] .account-connect summary { color: #b7daf8; }
:root[data-theme="dark"] .account-connect p { color: #a0b6cd; }
.page-footer { color: #7f90a3; }
.toast { border-color: #236bc0; background: #102f56; }

.consent-dialog { border-color: #cbddee; box-shadow: 0 25px 80px rgba(6, 24, 49, .25); }
.consent-dialog::backdrop { background: rgba(5, 19, 39, .65); }
.dialog-symbol { color: #1769ed; background: #e7f2ff; }
.consent-dialog h2 { color: #173050; }
.dialog-copy { color: #6a7f98; }
.visitor-card { border-color: #dce8f5; background: #f7faff; }
.visitor-avatar { color: #275c94; background: #dcecff; }
.visitor-card strong { color: #244363; }
.visitor-card div span, .visitor-status { color: #7189a7; }
.requested-permission { color: #255987; background: #eaf4ff; }
.permission-check { background: #2777d2; }
.requested-permission small { color: #6283a7; }
.dialog-actions .button-quiet { border-color: #d6e3f1; }
.remote-viewer { border-color: #d6e3f1; }
.remote-viewer-heading h2 { color: #173050; }
.remote-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.remote-toolbar p { margin: 0; color: #7188a1; font-size: 10px; }
.remote-toolbar-actions { display: flex; gap: 8px; }
.remote-toolbar .button { min-height: 38px; }
.remote-placeholder { color: #e1efff; }
.remote-placeholder > span:last-child, .remote-session-state { color: #7890aa; }
.remote-spinner { border-color: rgba(162, 202, 244, .35); border-top-color: #75c2ff; }
.remote-screen:fullscreen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; }
.remote-screen:fullscreen video { max-height: 100vh; }

.settings-section { scroll-margin-top: 28px; margin-top: 34px; }
.settings-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.settings-heading h2 { margin: 0; color: #18304d; font-size: 24px; letter-spacing: -.7px; }
.settings-heading > div > p:last-child { margin: 6px 0 0; color: #70839a; font-size: 11px; }
.settings-kicker, .settings-card-kicker { margin: 0 0 5px; color: #5785b4; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; }
.settings-local-tag { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #d5e8f4; border-radius: 999px; color: #527b9c; background: #edf7fc; font-size: 9px; font-weight: 700; white-space: nowrap; }
.settings-local-tag span { width: 6px; height: 6px; border-radius: 50%; background: #37a78b; box-shadow: 0 0 0 3px rgba(55, 167, 139, .12); }
.settings-profile, .settings-card { border: 1px solid #dce6f0; border-radius: 13px; background: #fff; box-shadow: 0 12px 30px rgba(18, 43, 82, .055); }
.settings-profile { margin-bottom: 14px; padding: 17px 18px 13px; }
.settings-profile-copy { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.settings-card-icon { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #1769ed; background: #e8f2ff; font-size: 19px; }
.settings-profile-copy h3, .settings-card-heading h3 { margin: 0; color: #203c5a; font-size: 13px; }
.settings-profile-copy p { margin: 4px 0 0; color: #7b8da2; font-size: 10px; }
.settings-profile-controls { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(180px, 1.2fr) auto auto; align-items: end; gap: 9px; }
.settings-field { display: grid; gap: 6px; min-width: 0; }
.settings-field > span { color: #758ba3; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.settings-field select, .settings-field input, .settings-select-row select { width: 100%; min-width: 0; min-height: 39px; padding: 0 10px; border: 1px solid #d8e4ef; border-radius: 7px; color: #244262; background: #f8fbff; font: inherit; font-size: 10px; }
.settings-field input::placeholder { color: #9aacc0; }
.settings-profile-controls .button { min-height: 39px; white-space: nowrap; }
.settings-delete-profile { border: 1px solid #e4eaf1; }
.settings-profile-note { margin: 10px 1px 0; color: #8798aa; font-size: 9px; }
.settings-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: start; gap: 14px; }
.settings-card { min-width: 0; padding: 17px 18px 15px; }
.settings-card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.settings-card-heading .settings-card-icon { width: 32px; height: 32px; }
.settings-card-kicker { margin-bottom: 3px; font-size: 8px; }
.settings-card-heading h3 { font-size: 14px; }
.settings-select-row, .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 9px 0; border-top: 1px solid #edf1f5; }
.settings-select-row > span, .settings-row-copy { display: grid; gap: 4px; min-width: 0; }
.settings-select-row strong, .settings-row-copy strong, .permission-row strong { color: #304c68; font-size: 10px; font-weight: 700; }
.settings-select-row small, .settings-row-copy small, .permission-row small { display: block; color: #8394a8; font-size: 9px; line-height: 1.45; }
.settings-select-row select { flex: 0 0 118px; width: 118px; min-height: 35px; padding-right: 6px; }
.settings-switch { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; width: 36px; height: 21px; cursor: pointer; }
.settings-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.settings-switch > span { position: relative; width: 36px; height: 21px; border: 1px solid #c9d7e5; border-radius: 999px; background: #e9eff5; transition: background .18s ease, border-color .18s ease; }
.settings-switch > span::after { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; content: ''; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(16, 43, 76, .2); transition: transform .18s ease; }
.settings-switch input:checked + span { border-color: #2b83df; background: #2b83df; }
.settings-switch input:checked + span::after { transform: translateX(15px); }
.settings-switch input:focus-visible + span { outline: 3px solid rgba(102, 184, 255, .55); outline-offset: 3px; }
.settings-note { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0; padding: 9px 10px; border-radius: 8px; color: #7187a0; background: #f2f7fc; font-size: 9px; line-height: 1.5; }
.settings-note > span { display: grid; flex: 0 0 auto; place-items: center; width: 14px; height: 14px; border-radius: 50%; color: #216ab2; background: #dbeeff; font-weight: 700; }
.security-icon { color: #18868d; background: #e2f5f3; }
.permission-row { display: grid; grid-template-columns: 82px 1fr; align-items: start; gap: 10px; padding: 12px 0; border-top: 1px solid #edf1f5; }
.permission-row > div { display: grid; gap: 4px; }
.permission-state { display: inline-flex; justify-content: center; padding: 5px 6px; border-radius: 5px; color: #8898aa; background: #f0f3f6; font-size: 7px; font-weight: 800; letter-spacing: .45px; white-space: nowrap; }
.permission-enabled { color: #16826f; background: #e6f6f1; }
.is-unavailable strong { color: #61758c; }
.settings-security-note { color: #557967; background: #edf7f1; }
.settings-security-note > span { color: #fff; background: #3a9b74; }
.sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.settings-field select:focus-visible, .settings-field input:focus-visible, .settings-select-row select:focus-visible { outline: 3px solid rgba(102, 184, 255, .55); outline-offset: 2px; }

@media (max-width: 1120px) {
  .hero-content { width: 57%; padding-right: 27px; }
  .hero-service { font-size: clamp(30px, 3.4vw, 41px); }
}

@media (max-width: 760px) {
  .sidebar { height: 54px; padding: 8px 15px; gap: 0; background: #081323; border-bottom-color: #142a45; }
  .nav-link { color: #9aacbf; }
  .nav-link.is-active { color: #f6faff; }
  .primary-nav { flex: 0 0 auto; }
  .sidebar-bottom { display: flex; flex: 0 0 auto; align-items: center; margin: 0 0 0 5px; }
  .sidebar-utilities { display: flex; gap: 4px; margin: 0; }
  .sidebar-utility { justify-content: center; width: 36px; min-height: 36px; padding: 0; }
  .utility-label, .sidebar-help, .profile-row { display: none; }
  .page-content { padding-top: 14px; }
  .intro-section { min-height: 430px; padding: 0; background-position: 41% center; }
  .hero-content { width: 58%; padding: 82px 23px 62px 0; }
  .hero-wordmark { height: 86px; }
  .hero-service { font-size: clamp(29px, 4.4vw, 36px); }
  .hero-topline { right: 22px; }
  .hero-bottomline { right: 23px; gap: 11px; }
  .work-area { grid-template-columns: 1fr; }
  .card-description { min-height: 0; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-profile-controls { grid-template-columns: 1fr 1fr; }
  .settings-profile-controls .button { width: 100%; }
  .settings-profile-controls .settings-delete-profile[hidden] { display: none; }
}

@media (max-width: 560px) {
  .intro-section { min-height: 520px; background-position: 30% top; }
  .intro-section::before { background: linear-gradient(180deg, rgba(4, 12, 27, .02) 5%, rgba(4, 12, 27, .6) 42%, rgba(4, 12, 27, .95) 76%); }
  .intro-section::after { right: 18px; top: 34px; }
  .hero-content { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; min-height: 520px; padding: 170px 22px 52px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.1px; }
  .intro-section h1 { margin: 5px 0 10px; }
  .hero-wordmark { height: 73px; }
  .hero-service { font-size: clamp(28px, 7.4vw, 35px); }
  .intro-section h1 em { font-size: clamp(19px, 5.4vw, 24px); }
  .hero-actions { gap: 17px; margin-top: 55px; }
  .hero-topline { top: 20px; right: 18px; font-size: 6px; letter-spacing: .9px; }
  .hero-bottomline { bottom: 16px; left: 22px; right: auto; gap: 12px; font-size: 7px; letter-spacing: .8px; }
  .card { padding: 15px; }
  .recent-section { padding: 15px; }
  .settings-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .settings-heading h2 { font-size: 21px; }
  .settings-profile, .settings-card { padding: 14px; }
  .settings-profile-controls { grid-template-columns: 1fr; }
  .settings-select-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .settings-select-row select { flex-basis: auto; width: 100%; }
  .permission-row { grid-template-columns: 78px 1fr; gap: 8px; }
  .remote-toolbar { align-items: flex-start; flex-direction: column; }
  .remote-toolbar-actions { width: 100%; }
  .remote-toolbar-actions .button { flex: 1; }
}

@media (max-width: 380px) {
  .sidebar { padding-right: 8px; padding-left: 8px; }
  .brand { gap: 6px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-mark svg { width: 23px; height: 23px; }
  .brand-copy strong { font-size: 16px; }
  .brand-copy small { display: none; }
  .primary-nav { gap: 0; }
  .nav-link { min-width: 36px; padding-right: 6px; padding-left: 6px; }
  .sidebar-bottom { margin-left: 3px; }
  .sidebar-utilities { gap: 2px; }
  .sidebar-utility { width: 31px; height: 34px; min-height: 34px; }
  .hero-content { padding-right: 16px; padding-left: 16px; }
  .hero-service { font-size: 27px; }
  .intro-section h1 em { font-size: 19px; }
  .hero-bottomline { left: 16px; }
  .hero-actions { gap: 10px; }
  .hero-primary, .hero-secondary { gap: 7px; font-size: 10px; }
  .hero-primary { padding: 0 10px; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #07111f;
  --paper: #0d1b2d;
  --ink: #e8f1fc;
  --muted: #9aadc3;
  --faint: #71859d;
  --line: #253a54;
  --shadow: 0 18px 46px rgba(0, 0, 0, .24);
}
:root[data-theme="dark"] body { color: #e3edf9; background: #07111f; }
:root[data-theme="dark"] .sidebar { background: #060f1d; border-right-color: #142740; }
:root[data-theme="dark"] .prototype-notice { border-color: #274567; color: #adc3dc; background: #10233a; }
:root[data-theme="dark"] .notice-icon { color: #91caff; background: #173759; }
:root[data-theme="dark"] .prototype-notice strong { color: #e2f0ff; }
:root[data-theme="dark"] .notice-label { color: #87a8ca; }
:root[data-theme="dark"] .card { color: #dce9f7; border-color: #263c56; background: #0d1b2d; box-shadow: 0 16px 36px rgba(0, 0, 0, .2); }
:root[data-theme="dark"] .invite-card { border-color: #2868a6; background: linear-gradient(145deg, #102a48 0%, #10223a 62%, #101e32 100%); }
:root[data-theme="dark"] .connect-card { border-color: #237984; background: linear-gradient(145deg, #10333d 0%, #102a36 62%, #10212f 100%); }
:root[data-theme="dark"] .step-number { color: #96caff; background: #173b60; }
:root[data-theme="dark"] .step-number-muted { color: #8de1df; background: #17434b; }
:root[data-theme="dark"] .card-kicker, :root[data-theme="dark"] .code-label-row label, :root[data-theme="dark"] .input-label { color: #8fa9c7; }
:root[data-theme="dark"] .invite-card .card-kicker { color: #91c5ff; }
:root[data-theme="dark"] .connect-card .card-kicker { color: #84d5d7; }
:root[data-theme="dark"] .card h2, :root[data-theme="dark"] .section-heading h2 { color: #e8f2ff; }
:root[data-theme="dark"] .connect-card h2 { color: #d9f3f3; }
:root[data-theme="dark"] .invite-icon { color: #82bdff; background: #15395e; }
:root[data-theme="dark"] .connect-icon { color: #7bd4d6; background: #17414a; }
:root[data-theme="dark"] .card-description { color: #a1b4ca; }
:root[data-theme="dark"] .expires-label { color: #98b1cd; }
:root[data-theme="dark"] .code-box { border-color: #315477; background: #0a1728; }
:root[data-theme="dark"] .invite-card .code-box { border-color: #315e8e; background: rgba(4, 14, 27, .58); }
:root[data-theme="dark"] .code-box output { color: #c8e4ff; }
:root[data-theme="dark"] .copy-button { color: #91c5f6; }
:root[data-theme="dark"] .copy-button:hover { color: #fff; background: #17385b; }
:root[data-theme="dark"] .consent-hint { border-top-color: #243a53; color: #9cb1c8; }
:root[data-theme="dark"] .consent-check { color: #9bd0ff; background: #173759; }
:root[data-theme="dark"] .button-quiet { color: #a2bad4; }
:root[data-theme="dark"] .button-quiet:hover { color: #fff; background: #162b43; }
:root[data-theme="dark"] .input-wrap { border-color: #2a425d; background: #091726; }
:root[data-theme="dark"] .input-wrap:focus-within { border-color: #5d9cdd; }
:root[data-theme="dark"] .connect-card .input-wrap { border-color: #2a6670; background: #0a202b; }
:root[data-theme="dark"] .input-symbol { color: #81afd7; }
:root[data-theme="dark"] .input-wrap input { color: #e4f1ff; }
:root[data-theme="dark"] .input-wrap input::placeholder { color: #7890a9; }
:root[data-theme="dark"] .paste-code-button { color: #91c5f6; }
:root[data-theme="dark"] .paste-code-button:hover { background: #17385b; }
:root[data-theme="dark"] .connect-footnote { color: #91a7bf; }
:root[data-theme="dark"] .settings-profile, :root[data-theme="dark"] .settings-card { border-color: #263d58; background: #0d1b2d; box-shadow: 0 16px 36px rgba(0, 0, 0, .2); }
:root[data-theme="dark"] .settings-heading h2 { color: #eef5ff; }
:root[data-theme="dark"] .settings-heading > div > p:last-child, :root[data-theme="dark"] .settings-profile-copy p { color: #9cafc5; }
:root[data-theme="dark"] .settings-kicker, :root[data-theme="dark"] .settings-card-kicker { color: #83b7e8; }
:root[data-theme="dark"] .settings-local-tag { border-color: #265044; color: #91d8bd; background: #102c2a; }
:root[data-theme="dark"] .settings-card-icon { color: #98ceff; background: #163657; }
:root[data-theme="dark"] .security-icon { color: #88e0db; background: #174147; }
:root[data-theme="dark"] .settings-profile-copy h3, :root[data-theme="dark"] .settings-card-heading h3 { color: #e1edfb; }
:root[data-theme="dark"] .settings-field > span { color: #9bb1cb; }
:root[data-theme="dark"] .settings-field select, :root[data-theme="dark"] .settings-field input, :root[data-theme="dark"] .settings-select-row select { border-color: #2a415d; color: #e1edfb; background: #091727; }
:root[data-theme="dark"] .settings-field input::placeholder { color: #7088a2; }
:root[data-theme="dark"] .settings-profile-controls .button-outline { border-color: #2c4c6b; color: #b7d4f0; background: #10233a; }
:root[data-theme="dark"] .settings-profile-note { color: #91a6bd; }
:root[data-theme="dark"] .settings-select-row, :root[data-theme="dark"] .settings-row, :root[data-theme="dark"] .permission-row { border-top-color: #20364e; }
:root[data-theme="dark"] .settings-select-row strong, :root[data-theme="dark"] .settings-row-copy strong, :root[data-theme="dark"] .permission-row strong { color: #d7e5f5; }
:root[data-theme="dark"] .settings-select-row small, :root[data-theme="dark"] .settings-row-copy small, :root[data-theme="dark"] .permission-row small { color: #91a5bc; }
:root[data-theme="dark"] .settings-note { color: #a3bad3; background: #122741; }
:root[data-theme="dark"] .settings-note > span { color: #b5ddff; background: #1c456b; }
:root[data-theme="dark"] .permission-state { color: #a3b2c3; background: #1c2a3b; }
:root[data-theme="dark"] .permission-enabled { color: #91dfc5; background: #123a36; }
:root[data-theme="dark"] .settings-security-note { color: #b7ddc9; background: #12312c; }
:root[data-theme="dark"] .settings-security-note > span { color: #08231e; background: #6dc6a0; }
:root[data-theme="dark"] .remote-viewer { border-color: #263d58; background: #0d1b2d; }
:root[data-theme="dark"] .remote-viewer-heading h2 { color: #e7f1fd; }
:root[data-theme="dark"] .remote-toolbar p, :root[data-theme="dark"] .remote-session-state { color: #9aadc3; }
:root[data-theme="dark"] .remote-toolbar .button-outline { border-color: #315173; color: #c5ddf5; background: #10243a; }
:root[data-theme="dark"] .remote-toolbar .button-outline:hover { border-color: #4e83b5; background: #163657; }
:root[data-theme="dark"] .consent-dialog { border-color: #2a415d; color: #dfeafb; background: #0d1b2d; }
:root[data-theme="dark"] .consent-dialog h2 { color: #e7f2ff; }
:root[data-theme="dark"] .dialog-copy { color: #a2b4c9; }
:root[data-theme="dark"] .visitor-card { border-color: #2a415d; background: #102138; }
:root[data-theme="dark"] .visitor-card strong { color: #dfedfc; }
:root[data-theme="dark"] .visitor-card div span, :root[data-theme="dark"] .visitor-status { color: #a2b5ca; }
:root[data-theme="dark"] .requested-permission { color: #c7e4ff; background: #153352; }
:root[data-theme="dark"] .requested-permission small { color: #9ebfe0; }
:root[data-theme="dark"] .dialog-actions .button-quiet { border-color: #2a415d; }
:root[data-theme="dark"] .page-footer { color: #8397b0; }

.brand-wordmark { display: block; width: 82px; height: 27px; object-fit: contain; }
.brand-copy small { margin-top: 1px; }
.footer-brand { display: flex; min-width: 0; align-items: center; gap: 10px; }
.footer-wordmark { display: block; flex: 0 0 auto; width: 78px; height: 26px; object-fit: contain; }
.footer-brand > span { white-space: nowrap; }
.footer-right { display: flex; flex: 0 0 auto; align-items: center; gap: 16px; }
.footer-company-logo { display: block; flex: 0 0 auto; width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 3px 9px rgba(235, 178, 28, .2)); }

@media (max-width: 560px) {
  .brand-wordmark { width: 70px; height: 24px; }
  .brand-copy small { display: none; }
  .recent-wordmark { width: 42px; height: 14px; }
  .page-footer { align-items: center; flex-wrap: wrap; }
  .footer-brand { flex: 1 1 100%; gap: 7px; }
  .footer-wordmark { width: 61px; height: 21px; }
  .footer-brand > span { font-size: 6px; letter-spacing: .2px; }
  .footer-right { flex: 1 1 100%; justify-content: flex-end; gap: 10px; }
  .footer-company-logo { width: 56px; height: 56px; }
}

@media (max-width: 380px) {
  .brand-wordmark { width: 62px; height: 21px; }
}
:root[data-theme="dark"] .footer-separator { color: #526a85; }
:root[data-theme="dark"] .toast { color: #edf6ff; }
:root[data-theme="dark"] .sidebar-utility { border-color: #1d3854; color: #c0d4e8; background: #0d1b2d; }
:root[data-theme="dark"] .sidebar-utility:hover { border-color: #3c6b99; background: #142d48; }

@media (min-width: 561px) and (max-width: 760px) {
  .sidebar-utilities { gap: 4px; }
  .sidebar-utility { width: auto; padding: 0 8px; }
  .utility-label { display: inline; font-size: 8px; white-space: nowrap; }
}

@media (prefers-reduced-motion: no-preference) {
  body, .card, .settings-profile, .settings-card, .prototype-notice { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
}

.settings-screen .settings-section { margin-top: 0; }
.settings-heading-actions { display: flex; align-items: center; gap: 10px; }
.settings-exit { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 13px; }
.settings-exit > span { font-size: 15px; line-height: 1; }

@media (max-width: 760px) {
  .settings-heading-actions { width: auto; justify-content: flex-end; }
}

@media (max-width: 560px) {
  .settings-heading-actions { width: 100%; justify-content: space-between; }
}