:root {
  --background: #07111f;
  --surface: #0d1a2b;
  --surface-raised: #122238;
  --surface-hover: #172b45;
  --border: #263a55;
  --text: #edf5ff;
  --muted: #9eb0c7;
  --accent: #38bdf8;
  --accent-dark: #082f49;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .24);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--background);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; scroll-padding-top: 7rem; background: var(--background); }
body { min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; background: radial-gradient(circle at 80% -10%, #123456 0, transparent 32rem), var(--background); color: var(--text); }
body { overflow-wrap: anywhere; }
button, a { touch-action: manipulation; font: inherit; }
button { color: inherit; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 100; top: -5rem; left: 1rem; padding: .8rem 1rem; border-radius: 10px; background: var(--accent); color: #001521; font-weight: 700; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.simulation-banner { position: sticky; z-index: 50; top: 0; min-height: calc(32px + env(safe-area-inset-top)); padding: max(.42rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .42rem max(1rem, env(safe-area-inset-left)); background: #7c2d12; color: #ffedd5; text-align: center; font-size: .82rem; font-weight: 750; letter-spacing: .02em; }
.topbar { position: sticky; z-index: 40; top: 0; display: flex; min-height: calc(70px + env(safe-area-inset-top)); align-items: center; justify-content: space-between; gap: 1rem; padding: max(.65rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .65rem max(1rem, env(safe-area-inset-left)); border-bottom: 1px solid var(--border); background: rgba(7, 17, 31, .94); backdrop-filter: blur(18px); }
.simulation-banner:not([hidden]) + .topbar { top: calc(32px + env(safe-area-inset-top)); min-height: 70px; padding-top: .65rem; }
.connection-panel { position: relative; z-index: 35; display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem max(1rem, env(safe-area-inset-right)) .65rem max(1rem, env(safe-area-inset-left)); border-bottom: 1px solid #9a3412; background: #431407; color: #ffedd5; }
.connection-panel > div { min-width: 0; }
.connection-panel strong, .connection-panel span { display: block; }
.connection-panel strong { font-size: .84rem; }
.connection-panel span { margin-top: .18rem; color: #fed7aa; font-size: .75rem; line-height: 1.35; }
.connection-panel span.offline-truth { color: #fdba74; font-weight: 700; }
.connection-panel .button { flex: none; border-color: #c2410c; background: #7c2d12; }
.connection-actions { display: flex; flex: none; align-items: center; gap: .55rem; }
.update-panel { position: sticky; z-index: 36; top: calc(70px + env(safe-area-inset-top)); display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem max(1rem, env(safe-area-inset-right)) .65rem max(1rem, env(safe-area-inset-left)); border-bottom: 1px solid #0e7490; background: #083344; color: #cffafe; box-shadow: 0 12px 28px rgba(0, 0, 0, .24); }
.simulation-banner:not([hidden]) ~ .update-panel { top: calc(102px + env(safe-area-inset-top)); }
.update-panel strong, .update-panel span { display: block; }
.update-panel span { margin-top: .18rem; color: #a5f3fc; font-size: .75rem; line-height: 1.35; }
.brand { display: inline-flex; min-height: 46px; align-items: center; gap: .75rem; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #2b89ad; border-radius: 12px; background: linear-gradient(145deg, #123753, #082438); color: #7dd3fc; font-size: .78rem; font-weight: 850; letter-spacing: .04em; }
.brand-mark img { width: 100%; height: 100%; border-radius: 11px; object-fit: cover; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1rem; }
.brand small { margin-top: .12rem; color: var(--muted); font-size: .73rem; }
.topbar-actions { display: flex; align-items: center; gap: .55rem; }
.connection-state { color: var(--muted); font-size: .78rem; }
.connection-state.online { color: var(--success); }
.connection-state.offline { color: var(--danger); }
.icon-button, .profile-button, .button { min-height: 44px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-raised); color: var(--text); cursor: pointer; }
.icon-button { flex: 0 0 44px; width: 44px; min-width: 44px; padding: 0; font-size: 1.25rem; }
.profile-button { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .7rem; }
.profile-button > span:first-child { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: var(--accent-dark); color: #7dd3fc; font-size: .76rem; font-weight: 800; }
.profile-button:disabled { cursor: default; opacity: 1; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1rem; text-decoration: none; font-weight: 700; }
.button.primary { border-color: #0ea5e9; background: #0284c7; color: white; }
.button:hover, .icon-button:hover { background: var(--surface-hover); }
.button.primary:hover { background: #0369a1; }

.app-shell { display: grid; min-height: calc(100vh - 70px - env(safe-area-inset-top)); min-height: calc(100dvh - 70px - env(safe-area-inset-top)); grid-template-columns: 248px minmax(0, 1fr); }
.rail { position: sticky; top: calc(70px + env(safe-area-inset-top)); align-self: start; height: calc(100vh - 70px - env(safe-area-inset-top)); height: calc(100dvh - 70px - env(safe-area-inset-top)); overflow-y: auto; padding: 1.2rem .75rem max(1rem, env(safe-area-inset-bottom)); border-right: 1px solid var(--border); background: rgba(9, 22, 38, .76); }
.rail { scrollbar-width: thin; overscroll-behavior: contain; }
.simulation-banner:not([hidden]) ~ .app-shell .rail { top: calc(102px + env(safe-area-inset-top)); height: calc(100vh - 102px - env(safe-area-inset-top)); height: calc(100dvh - 102px - env(safe-area-inset-top)); }
.rail-label { margin: .2rem .65rem .55rem; color: #7890aa; font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.rail-label.secondary { margin-top: 1.35rem; }
.nav-item { position: relative; display: flex; width: 100%; min-height: 46px; align-items: center; gap: .75rem; margin: .15rem 0; padding: .65rem .75rem; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; }
.nav-item > span:first-child { width: 1.3rem; color: #7aa8c2; font-size: 1.05rem; text-align: center; }
.nav-item[data-count]:not([data-count="0"])::after { min-width: 1.35rem; margin-left: auto; padding: .1rem .34rem; border-radius: 999px; background: #0e7490; color: white; content: attr(data-count); font-size: .65rem; font-weight: 800; line-height: 1.2; text-align: center; }
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.active { border-color: #155e75; background: #0c3149; color: white; }
.nav-item.active > span:first-child { color: #67e8f9; }
.rail-boundary { margin-top: 1.5rem; padding: .8rem; border: 1px solid #34465f; border-radius: 12px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.rail-boundary strong, .rail-boundary span { display: block; }
.rail-boundary strong { margin-bottom: .25rem; color: #c9d8ea; }

.workspace { width: 100%; max-width: 1540px; min-width: 0; margin: 0 auto; padding: clamp(1rem, 2.5vw, 2.25rem); }
.workspace { min-height: 100%; }
.status-message { margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid #9a3412; border-radius: 12px; background: #431407; color: #ffedd5; }
.view { animation: reveal .18s ease-out; }
.view[hidden] { display: none; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-heading h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.45rem); letter-spacing: -.035em; }
.page-heading p:not(.eyebrow) { max-width: 50rem; margin: .35rem 0 0; color: var(--muted); }
.eyebrow { margin: 0 0 .35rem; color: #7dd3fc; font-size: .7rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.snapshot-age { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.snapshot-age.stale { color: var(--warning); }
.card { border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(155deg, rgba(19, 38, 61, .94), rgba(11, 26, 44, .94)); box-shadow: var(--shadow); }
.hero { display: flex; min-height: 188px; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); overflow: hidden; background: radial-gradient(circle at 90% 20%, rgba(56, 189, 248, .22), transparent 20rem), linear-gradient(145deg, #122b44, #0b182a); }
.hero h2 { max-width: 55rem; margin: 0; font-size: clamp(1.45rem, 2.6vw, 2.15rem); }
.hero p:not(.eyebrow) { max-width: 60rem; margin: .75rem 0 0; color: #b7c8da; line-height: 1.55; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: .85rem 0; }
.metric { min-height: 104px; padding: 1rem; }
.metric span { display: block; color: var(--muted); font-size: .78rem; }
.metric strong { display: block; margin-top: .45rem; font-size: 1.85rem; }
.content-grid { display: grid; gap: .85rem; margin-bottom: .85rem; }
.content-grid.two-one { grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); }
.panel { min-width: 0; padding: 1.15rem; }
.panel h2 { margin: 0; font-size: 1.1rem; }
.panel h3 { margin: 1.2rem 0 .5rem; font-size: .83rem; color: #cbd9e8; }
.panel > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.status-pill { flex: none; padding: .28rem .55rem; border: 1px solid #3e5875; border-radius: 999px; color: #cbd9e8; font-size: .68rem; font-weight: 750; }
.status-pill.success { border-color: #166534; background: #0d2e24; color: #86efac; }
.status-pill.warning { border-color: #92400e; background: #3a220b; color: #fde68a; }
.status-pill.danger { border-color: #9f1239; background: #3b0d1e; color: #fecdd3; }
.button.danger { border-color: #9f1239; color: #fecdd3; }
.button.danger:hover { background: #3b0d1e; }
.next-step, .boundary-notice { margin-top: 1rem; padding: .8rem; border-left: 3px solid var(--accent); border-radius: 6px 10px 10px 6px; background: rgba(8, 47, 73, .7); color: #d5e9f6; font-size: .84rem; line-height: 1.5; }
.item-list { margin: .7rem 0 0; padding: 0; list-style: none; }
.item-list li { padding: .75rem 0; border-top: 1px solid rgba(59, 82, 111, .66); }
.item-list li:first-child { border-top: 0; }
.item-list strong, .item-list span { display: block; }
.item-list span { margin-top: .22rem; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.empty-state { color: var(--muted); }
.safe-note { color: var(--muted); font-size: .74rem; line-height: 1.45; }
.capability-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .8rem; }
.capability { min-width: 0; padding: .8rem; border: 1px solid #2b405b; border-radius: 12px; background: rgba(8, 20, 35, .65); }
.capability strong, .capability span { display: block; }
.capability strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capability span { margin-top: .25rem; color: var(--muted); font-size: .74rem; }
.card-grid > .card { min-height: 150px; }
.boundary-panel { border-color: #275672; }
.protected-card { max-width: 780px; border-color: #8b5e15; }
.diagnostic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-top: .85rem; }
.diagnostic-grid > div { min-width: 0; padding: .75rem; border: 1px solid #2b405b; border-radius: 11px; background: rgba(8, 20, 35, .65); }
.diagnostic-grid span, .diagnostic-grid strong { display: block; }
.diagnostic-grid span { color: var(--muted); font-size: .69rem; }
.diagnostic-grid strong { margin-top: .3rem; font-size: .83rem; }
.install-steps { margin: 1rem 0 0; padding-left: 1.45rem; color: #cbd9e8; line-height: 1.55; }
.install-steps li { padding: .25rem 0 .25rem .2rem; }
.device-diagnostics-list { margin: .85rem 0 0; }
.device-diagnostics-list > div { display: grid; min-height: 44px; grid-template-columns: minmax(7.5rem, .9fr) minmax(0, 1.4fr); align-items: center; gap: .75rem; border-top: 1px solid rgba(59, 82, 111, .66); }
.device-diagnostics-list > div:first-child { border-top: 0; }
.device-diagnostics-list dt { color: var(--muted); font-size: .75rem; }
.device-diagnostics-list dd { min-width: 0; margin: 0; color: #dceaf7; font-size: .78rem; font-weight: 700; text-align: right; }
.prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 1rem 0; }
.prompt-grid button { min-height: 44px; padding: .65rem .75rem; border: 1px solid #28506c; border-radius: 11px; background: #0a2a40; color: #dff6ff; cursor: pointer; text-align: left; }
.prompt-grid button:hover { background: #103a55; }
.prompt-grid button:disabled, .conversation-form button:disabled, .conversation-form input:disabled { cursor: wait; opacity: .62; }
.conversation-form, .search-form, .lookup-form { margin: 1rem 0 0; }
.conversation-form label, .search-form label, .lookup-form label { display: block; margin-bottom: .45rem; color: #cbd9e8; font-size: .8rem; font-weight: 700; }
.conversation-form > div, .search-form > div, .lookup-form > div { display: flex; gap: .55rem; }
.conversation-form input, .search-form input, .lookup-form input { width: 100%; min-width: 0; min-height: 46px; padding: .7rem .8rem; border: 1px solid #38516d; border-radius: 11px; outline: 0; background: #081625; color: var(--text); font-size: 1rem; }
.conversation-form input:focus, .search-form input:focus, .lookup-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56, 189, 248, .15); }
.conversation-form small, .lookup-form small { display: block; margin-top: .5rem; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.lookup-form { padding: 1rem; }
.quinn-thread { max-height: 31rem; margin: 1rem 0 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.quinn-thread > li { max-width: 92%; margin-top: .65rem; padding: .75rem .85rem; border: 1px solid #2b405b; border-radius: 12px; }
.quinn-thread > li strong, .quinn-thread > li > span { display: block; }
.quinn-thread > li > span { margin-top: .25rem; color: #c4d4e5; font-size: .82rem; line-height: 1.5; }
.quinn-question { margin-left: auto; background: #0c3149; }
.quinn-response { margin-right: auto; background: rgba(8, 20, 35, .72); }
.citation-list { margin: .65rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.result-list { margin: .8rem 0 0; padding: 0; list-style: none; }
.result-list > li { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; border-top: 1px solid rgba(59, 82, 111, .66); }
.result-list > li:first-child { border-top: 0; }
.result-list > li > div { min-width: 0; }
.result-list strong, .result-list span { display: block; }
.result-list span { margin-top: .25rem; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.button.compact { min-height: 44px; padding: .45rem .75rem; font-size: .76rem; }
.detail-list { margin: .75rem 0 0; padding: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; list-style: none; }
.detail-list li + li { margin-top: .22rem; }
.project-workspace { display: grid; min-height: 34rem; grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); gap: .85rem; }
.project-master { align-self: start; max-height: calc(100dvh - 10rem); overflow-y: auto; overscroll-behavior: contain; }
.project-master-list, .hierarchy-list { display: grid; gap: .5rem; margin-top: .85rem; }
.project-select, .hierarchy-select, .task-card { width: 100%; min-height: 52px; padding: .7rem .75rem; border: 1px solid #2b405b; border-radius: 11px; background: rgba(8, 20, 35, .65); color: var(--text); text-align: left; }
.project-select, .hierarchy-select { cursor: pointer; }
.task-card { cursor: default; }
.project-select strong, .project-select span, .hierarchy-select strong, .hierarchy-select span, .task-card strong, .task-card span { display: block; }
.project-select span, .hierarchy-select span, .task-card span { margin-top: .25rem; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.project-select[aria-current="true"], .hierarchy-select[aria-current="true"] { border-color: #0e7490; background: #0c3149; }
.project-detail { min-width: 0; }
.project-back { display: none; margin-bottom: .85rem; }
.project-detail > p { color: var(--muted); line-height: 1.55; }
.progress-track { height: .55rem; margin: 1rem 0; overflow: hidden; border: 1px solid #2b405b; border-radius: 999px; background: #07111f; }
.progress-track > span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #0ea5e9, #22d3ee); transition: width .18s ease-out; }
.hierarchy-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.hierarchy-columns h3 { margin-top: .4rem; }
.mission-summary { margin-bottom: .85rem; padding: .75rem; border: 1px solid rgba(59, 82, 111, .66); border-radius: 11px; background: rgba(9, 25, 42, .5); }
.mission-summary h3 { margin: .2rem 0 .45rem; }
.mission-summary > p:not(.eyebrow) { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.task-state { display: inline-block; margin-top: .45rem; padding: .18rem .38rem; border-radius: 999px; background: #10263d; color: #cbd9e8; font-size: .68rem; }
.task-card .task-relationships { margin-top: .55rem; color: #a5f3fc; font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.printer-provider { margin-bottom: .85rem; }
.printer-card .queue-count { display: block; margin-top: .8rem; color: #e7f7ff; font-size: 1.4rem; font-weight: 800; }
.printer-card .queue-label { color: var(--muted); font-size: .72rem; }
.review-grid .review-card { min-height: 210px; }
.review-card .handoff { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid rgba(59, 82, 111, .66); color: #fde68a; font-size: .76rem; line-height: 1.45; }
.launcher-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.launcher-grid button { display: grid; min-width: 0; min-height: 110px; grid-template-columns: 2.2rem 1fr; grid-template-rows: auto auto; align-content: center; column-gap: .7rem; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(155deg, rgba(19, 38, 61, .94), rgba(11, 26, 44, .94)); color: var(--text); cursor: pointer; text-align: left; }
.launcher-grid button:hover { background: var(--surface-hover); }
.launcher-grid button > span { grid-row: 1 / 3; align-self: center; color: #7dd3fc; font-size: 1.25rem; text-align: center; }
.launcher-grid button strong { align-self: end; }
.launcher-grid button small { align-self: start; margin-top: .2rem; color: var(--muted); }
.noscript { margin: 2rem; padding: 1rem; border: 1px solid var(--danger); }
.bottom-nav { display: none; }
.cloud-editor { margin-top: 1rem; }
.cloud-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.stacked-form { display: grid; gap: .75rem; }
.stacked-form h2, .stacked-form h3 { margin: 0; }
.stacked-form label { display: grid; gap: .35rem; color: #cbd9e8; font-size: .8rem; font-weight: 700; }
.stacked-form input, .stacked-form textarea, .stacked-form select { width: 100%; min-width: 0; min-height: 44px; padding: .65rem .75rem; border: 1px solid #38516d; border-radius: 10px; outline: 0; background: #081625; color: var(--text); font: inherit; }
.stacked-form textarea { min-height: 88px; resize: vertical; }
.stacked-form input:focus, .stacked-form textarea:focus, .stacked-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56, 189, 248, .15); }
.stacked-form :disabled { opacity: .58; cursor: not-allowed; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.task-card .button { align-self: flex-start; margin-top: .25rem; }

@media (max-width: 1099px) {
  .app-shell { grid-template-columns: 88px minmax(0, 1fr); }
  .rail { padding-inline: .45rem; }
  .rail-label, .rail-boundary, .nav-item > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-item { justify-content: center; padding-inline: 0; }
  .nav-item > span:first-child { width: auto; font-size: 1.2rem; }
  .nav-item[data-count]:not([data-count="0"])::after { position: absolute; top: .25rem; right: .12rem; margin-left: 0; }
  .content-grid.two-one { grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 1fr); }
  .project-workspace { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); }
  .hierarchy-columns, .dashboard-grid { grid-template-columns: 1fr; }
  .capability-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diagnostic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cloud-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 719px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .topbar { min-height: calc(62px + env(safe-area-inset-top)); padding-top: max(.45rem, env(safe-area-inset-top)); padding-bottom: .45rem; }
  .simulation-banner:not([hidden]) + .topbar { min-height: 62px; padding-top: .45rem; }
  .brand small, .connection-state, #profile-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .brand-mark { width: 38px; height: 38px; }
  .profile-button { width: 44px; padding: .3rem; justify-content: center; }
  .profile-button > span:first-child { width: 31px; }
  .app-shell { display: block; min-height: calc(100vh - 62px - env(safe-area-inset-top)); min-height: calc(100dvh - 62px - env(safe-area-inset-top)); }
  .rail { display: none; }
  .workspace { padding: 1rem max(1rem, env(safe-area-inset-right)) 1.5rem max(1rem, env(safe-area-inset-left)); }
  .page-heading { display: block; }
  .snapshot-age { display: inline-block; margin-top: .7rem; }
  .hero { min-height: 225px; align-items: stretch; flex-direction: column; justify-content: flex-end; }
  .hero .button { align-self: stretch; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { min-height: 94px; }
  .content-grid.two-one, .capability-grid, .card-grid { grid-template-columns: 1fr; }
  .panel { padding: 1rem; }
  .connection-panel { align-items: stretch; flex-direction: column; }
  .connection-panel .button { flex: 1 1 auto; }
  .connection-actions { width: 100%; }
  .update-panel { top: calc(62px + env(safe-area-inset-top)); align-items: stretch; flex-direction: column; }
  .simulation-banner:not([hidden]) ~ .update-panel { top: calc(94px + env(safe-area-inset-top)); }
  .update-panel .button { flex: 1 1 auto; }
  .diagnostic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prompt-grid { grid-template-columns: 1fr; }
  .conversation-form > div, .search-form > div, .lookup-form > div { align-items: stretch; flex-direction: column; }
  .search-form .button, .conversation-form .button, .lookup-form .button { width: 100%; }
  .result-list > li { align-items: stretch; flex-direction: column; }
  .result-list .button { width: 100%; }
  .project-workspace { display: block; min-height: 0; }
  .project-master { max-height: none; }
  .project-workspace.detail-active .project-master { display: none; }
  .project-detail { display: none; margin-top: .85rem; }
  .project-workspace.detail-active .project-detail { display: block; margin-top: 0; }
  .project-workspace.detail-active .project-back { display: inline-flex; }
  .hierarchy-columns, .dashboard-grid { grid-template-columns: 1fr; }
  .launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .launcher-grid button { grid-template-columns: 1.65rem minmax(0, 1fr); column-gap: .45rem; padding: .85rem; }
  .device-diagnostics-list > div { grid-template-columns: minmax(6.5rem, .9fr) minmax(0, 1.35fr); }
  .bottom-nav { position: fixed; z-index: 45; right: 0; bottom: 0; left: 0; display: grid; min-height: calc(62px + env(safe-area-inset-bottom)); grid-template-columns: repeat(5, 1fr); padding: .25rem max(.25rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(.25rem, env(safe-area-inset-left)); border-top: 1px solid var(--border); background: rgba(7, 17, 31, .97); backdrop-filter: blur(18px); }
  .bottom-nav button { position: relative; display: flex; min-width: 0; min-height: 54px; align-items: center; justify-content: center; flex-direction: column; gap: .1rem; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
  .bottom-nav button > span { font-size: 1rem; }
  .bottom-nav button small { font-size: .64rem; }
  .bottom-nav button[data-count]:not([data-count="0"])::after { position: absolute; top: .2rem; left: calc(50% + .35rem); min-width: 1.2rem; padding: .08rem .28rem; border: 2px solid #07111f; border-radius: 999px; background: #0e7490; color: white; content: attr(data-count); font-size: .58rem; font-weight: 800; line-height: 1.15; text-align: center; }
  .bottom-nav button.active { background: #0c3149; color: #e7f7ff; }
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 500px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .brand small, .connection-state, #profile-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .profile-button { width: 44px; padding: .3rem; justify-content: center; }
  .app-shell { display: block; }
  .rail { display: none; }
  .workspace { padding: .85rem max(1rem, env(safe-area-inset-right)) 1.25rem max(1rem, env(safe-area-inset-left)); }
  .bottom-nav { position: fixed; z-index: 45; right: 0; bottom: 0; left: 0; display: grid; min-height: calc(62px + env(safe-area-inset-bottom)); grid-template-columns: repeat(5, 1fr); padding: .25rem max(.25rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(.25rem, env(safe-area-inset-left)); border-top: 1px solid var(--border); background: rgba(7, 17, 31, .97); backdrop-filter: blur(18px); }
  .bottom-nav button { position: relative; display: flex; min-width: 0; min-height: 54px; align-items: center; justify-content: center; flex-direction: column; gap: .1rem; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
  .bottom-nav button > span { font-size: 1rem; }
  .bottom-nav button small { font-size: .64rem; }
  .bottom-nav button[data-count]:not([data-count="0"])::after { position: absolute; top: .2rem; left: calc(50% + .35rem); min-width: 1.2rem; padding: .08rem .28rem; border: 2px solid #07111f; border-radius: 999px; background: #0e7490; color: white; content: attr(data-count); font-size: .58rem; font-weight: 800; line-height: 1.15; text-align: center; }
  .bottom-nav button.active { background: #0c3149; color: #e7f7ff; }
}

@media (max-width: 370px) {
  .topbar-actions { gap: .28rem; }
  .brand strong { font-size: .9rem; }
  #profile-button { display: none; }
  .metric-grid { grid-template-columns: 1fr; }
  .connection-actions { align-items: stretch; flex-direction: column; }
  .device-diagnostics-list > div { align-items: start; grid-template-columns: 1fr; gap: .2rem; padding: .55rem 0; }
  .device-diagnostics-list dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .card, .capability, .status-pill { border: 1px solid CanvasText; }
  .nav-item.active { outline: 2px solid Highlight; }
}