.app-shell { min-height: 100vh; background: var(--color-bg); }

.app-shell__sidebar { position: fixed; z-index: var(--z-sidebar); inset: 0 auto 0 0; width: var(--sidebar-width); background: var(--color-navy-950); color: var(--color-white); transition: width var(--transition); }
.app-shell__main { min-height: 100vh; margin-left: var(--sidebar-width); display: flex; flex-direction: column; transition: margin-left var(--transition); }
.app-shell__topbar { position: sticky; z-index: var(--z-topbar); top: 0; flex: 0 0 var(--topbar-height); }
.app-shell__content { width: 100%; max-width: var(--content-max); margin: 0 auto; flex: 1; padding: var(--space-7) var(--space-8) var(--space-8); }
.app-shell__footer { flex: 0 0 var(--footer-height); }

.sidebar { display: flex; height: 100%; flex-direction: column; overflow: hidden; }
.sidebar__brand { display: flex; min-height: 76px; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar__brand-mark { width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--radius-sm); background: var(--color-white); object-fit: contain; }
.sidebar__brand-fallback { display: none; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--color-teal-600); color: var(--color-white); font-size: 11px; font-weight: 800; }
.sidebar__brand-text { min-width: 0; }
.sidebar__brand-name { color: var(--color-white); font-size: 14px; font-weight: 750; letter-spacing: .01em; }
.sidebar__brand-product { margin-top: 1px; color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.3; }
.sidebar__nav { flex: 1; overflow: auto; padding: var(--space-4) var(--space-3); }
.sidebar__section-label { padding: 10px 12px 7px; color: rgba(255,255,255,.4); font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.sidebar__nav-item { display: flex; min-height: 39px; align-items: center; gap: 11px; width: 100%; margin: 2px 0; padding: 8px 11px; border-radius: var(--radius-sm); color: rgba(255,255,255,.72); font-size: 12px; text-align: left; transition: background var(--transition-fast), color var(--transition-fast); }
.sidebar__nav-item:hover { background: rgba(255,255,255,.08); color: var(--color-white); }
.sidebar__nav-item.is-active { background: rgba(16,165,156,.2); color: var(--color-white); box-shadow: inset 3px 0 0 var(--color-yellow-500); }
.sidebar__nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; color: rgba(255,255,255,.68); }
.sidebar__nav-item.is-active svg { color: var(--color-yellow-500); }
.sidebar__nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__bottom { padding: var(--space-3); border-top: 1px solid rgba(255,255,255,.1); }
.sidebar__terminal { display: flex; align-items: center; gap: var(--space-2); padding: 9px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); background: rgba(255,255,255,.05); }
.sidebar__terminal-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 6px; background: rgba(244,185,66,.14); color: var(--color-yellow-500); }
.sidebar__terminal-copy { min-width: 0; }
.sidebar__terminal-name { overflow: hidden; color: var(--color-white); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__terminal-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: rgba(255,255,255,.5); font-size: 10px; }
.sidebar__status-dot { width: 6px; height: 6px; border-radius: 50%; background: #47cb91; box-shadow: 0 0 0 3px rgba(71,203,145,.12); }
.sidebar__demo-label { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 6px 8px; border: 1px solid rgba(244,185,66,.3); border-radius: var(--radius-pill); color: var(--color-yellow-500); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }

.topbar { display: flex; height: var(--topbar-height); align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-8); border-bottom: 1px solid var(--color-border); background: rgba(255,255,255,.96); box-shadow: var(--shadow-xs); }
.topbar__left, .topbar__right { display: flex; min-width: 0; align-items: center; gap: var(--space-3); }
.topbar__left { flex: 1; }
.topbar__breadcrumbs { display: flex; min-width: 0; align-items: center; gap: 7px; color: var(--color-gray-500); font-size: 12px; }
.topbar__breadcrumbs strong { overflow: hidden; color: var(--color-gray-800); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.topbar__search { position: relative; width: min(280px, 30vw); }
.topbar__search input { width: 100%; min-height: 36px; padding-left: 34px; border-color: var(--color-gray-200); background: var(--color-gray-50); font-size: 12px; }
.topbar__search svg { position: absolute; top: 10px; left: 11px; width: 16px; height: 16px; color: var(--color-gray-500); pointer-events: none; }
.topbar__date { display: flex; align-items: center; gap: 7px; color: var(--color-gray-500); font-size: 11px; white-space: nowrap; }
.topbar__icon-btn { display: grid; position: relative; width: 34px; height: 34px; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-gray-600); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.topbar__icon-btn:hover { border-color: var(--color-border); background: var(--color-gray-50); color: var(--color-navy-800); }
.topbar__notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border: 1px solid var(--color-white); border-radius: 50%; background: var(--color-red-700); }
.topbar__profile { display: flex; align-items: center; gap: 9px; padding-left: 5px; border-left: 1px solid var(--color-border); }
.topbar__avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--color-navy-900); color: var(--color-white); font-size: 11px; font-weight: 750; }
.topbar__profile-copy { line-height: 1.25; }
.topbar__profile-name { color: var(--color-gray-800); font-size: 11px; font-weight: 700; }
.topbar__profile-role { color: var(--color-gray-500); font-size: 10px; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.page-header__eyebrow { margin-bottom: 6px; color: var(--color-teal-700); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.page-header__subtitle { max-width: 720px; margin-top: 8px; color: var(--color-gray-500); font-size: 13px; }
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }

.footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-8); border-top: 1px solid var(--color-border); background: var(--color-white); color: var(--color-gray-500); font-size: 10px; }
.footer__right { text-align: right; }

.app-shell.is-collapsed .app-shell__sidebar { width: var(--sidebar-collapsed-width); }
.app-shell.is-collapsed .app-shell__main { margin-left: var(--sidebar-collapsed-width); }
.app-shell.is-collapsed .sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; }
.app-shell.is-collapsed .sidebar__brand-text, .app-shell.is-collapsed .sidebar__nav-label, .app-shell.is-collapsed .sidebar__section-label, .app-shell.is-collapsed .sidebar__terminal-copy, .app-shell.is-collapsed .sidebar__demo-label { display: none; }
.app-shell.is-collapsed .sidebar__nav { padding-left: 12px; padding-right: 12px; }
.app-shell.is-collapsed .sidebar__nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.app-shell.is-collapsed .sidebar__terminal { justify-content: center; padding-left: 0; padding-right: 0; }
.app-shell.is-collapsed .sidebar__bottom { padding-left: 12px; padding-right: 12px; }

.page-grid { display: grid; gap: var(--space-5); }
.page-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-grid--sidebar { grid-template-columns: minmax(0, 1.65fr) minmax(290px, .85fr); }
.page-grid--wide-side { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
.page-grid--main-side { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); }

@media (max-width: 1260px) {
  .app-shell__content { padding-left: var(--space-6); padding-right: var(--space-6); }
  .topbar { padding-left: var(--space-6); padding-right: var(--space-6); }
  .footer { padding-left: var(--space-6); padding-right: var(--space-6); }
}
.sidebar__terminal-select { width: 100%; min-height: 25px; padding: 0 18px 0 0; border: 0; background: transparent; color: var(--color-white); font-size: 10px; font-weight: 650; }
.sidebar__terminal-select:focus { box-shadow: none; }
.sidebar__terminal-select option { color: var(--color-gray-800); }