.app-shell { min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); transition: grid-template-columns var(--motion-medium) var(--ease); }
.app-sidebar { position: sticky; top: 0; z-index: var(--z-nav); height: 100dvh; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); background: #f1f3f6; }
.brand-row { min-height: var(--topbar-height); display: flex; align-items: center; gap: var(--space-2); padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.brand { min-width: 0; display: flex; align-items: center; gap: 12px; flex: 1; }
.brand-mark { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--accent-700); font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.brand-copy { min-width: 0; display: flex; flex-direction: column; white-space: nowrap; }
.brand-copy strong { font-size: 14px; }
.brand-copy small { display: none; color: var(--ink-600); font-size: 11px; }
.sidebar-toggle { width: 32px; min-height: 32px; flex-basis: 32px; font-size: 15px; }
.side-nav { min-height: 0; overflow-y: auto; padding: 10px 8px; scrollbar-width: thin; }
.side-nav a { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; color: var(--ink-600); font-size: 13px; font-weight: 500; white-space: nowrap; }
.nav-icon { width: 18px; flex: 0 0 18px; text-align: center; color: var(--ink-500); font-size: 14px; }
.nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-chevron { margin-left: auto; color: var(--ink-500); font-size: 12px; }
.side-nav a:hover { color: var(--ink-950); background: rgba(255,255,255,.72); }
.side-nav a.active { color: var(--accent-700); background: var(--accent-100); box-shadow: inset 3px 0 0 var(--accent-600), var(--shadow-sm); }
.side-nav a.active .nav-icon { color: var(--accent-700); }
.nav-label { margin: 12px 8px 4px; color: var(--ink-500); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.sidebar-footer { min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--line); color: var(--ink-600); font-size: 12px; white-space: nowrap; }
.footer-status-label { overflow: hidden; text-overflow: ellipsis; }
.footer-switch { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 4px; color: var(--ink-500); font-weight: 600; }
.footer-switch:hover { color: var(--accent-700); }
.connection-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #3b9b72; box-shadow: 0 0 0 3px var(--success-100); }
.workspace, #route-content, .view-stack, .collection-shell { min-width: 0; max-width: 100%; }
.topbar { min-height: var(--topbar-height); position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 12px clamp(18px, 3vw, 40px); border-bottom: 1px solid rgba(203,211,223,.82); background: color-mix(in srgb, var(--canvas) 91%, transparent); backdrop-filter: blur(16px); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent-600); pointer-events: none; }
.route-heading { min-width: 0; }
.route-back { min-height: 30px; margin: 0 0 3px -8px; padding: 4px 8px; font-size: 12px; }
.route-heading p { margin: 0 0 2px; color: var(--ink-500); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.route-heading h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-records .route-heading { display: flex; align-items: center; gap: var(--space-2); }
.topbar-records .route-heading p { display: none; }
.topbar-records .route-heading h1 { font-size: clamp(21px, 2vw, 27px); }
.topbar-records .route-back { margin: 0; }
.topbar-actions { min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.desktop-search { width: min(28vw, 310px); height: 44px; display: flex; align-items: center; gap: var(--space-2); padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-500); background: var(--surface); }
.desktop-search:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100); }
.desktop-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; }
.desktop-search-results { position: fixed; z-index: var(--z-surface); top: calc(var(--topbar-height) - 4px); right: clamp(18px, 3vw, 40px); width: min(520px, calc(100vw - 36px)); max-height: min(70dvh, 700px); overflow: auto; padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); }
.mobile-search-button { display: none; }
#main-content { min-width: 0; padding: clamp(18px, 3vw, 40px); padding-bottom: calc(clamp(24px, 4vw, 56px) + var(--safe-bottom)); }
#route-content { transition: opacity var(--motion-medium) var(--ease); }
#route-content.route-pending { opacity: .55; }
.route-title-row { min-width: 0; display: flex; align-items: center; gap: 10px; }
.route-title-row h1 { min-width: 0; }
.route-busy { width: 14px; height: 14px; flex: 0 0 14px; border: 2px solid var(--line-strong); border-top-color: var(--brand-600); border-radius: 50%; animation: route-busy-spin .9s linear infinite; }
.route-busy[hidden] { display: none; }
@keyframes route-busy-spin { to { transform: rotate(360deg); } }
.bottom-nav { display: none; }
.app-shell.sidebar-collapsed { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }
.sidebar-collapsed .brand-copy, .sidebar-collapsed .nav-text, .sidebar-collapsed .nav-chevron, .sidebar-collapsed .nav-label, .sidebar-collapsed .footer-status-label, .sidebar-collapsed .footer-switch { display: none; }
.sidebar-collapsed .brand-row { padding-inline: 12px; justify-content: center; }
.sidebar-collapsed .brand { flex: 0 0 auto; }
.sidebar-collapsed .sidebar-toggle { position: absolute; right: -15px; top: 24px; box-shadow: var(--shadow-sm); background: white; }
.sidebar-collapsed .side-nav { padding-inline: 10px; }
.sidebar-collapsed .side-nav a { justify-content: center; padding-inline: 0; }