@layer shell {
  .app-shell {
    position: relative;
    z-index: 2;
    min-height: var(--viewport-block);
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--viewport-block);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: rgba(250, 251, 248, .68);
    backdrop-filter: blur(20px) saturate(1.05);
    box-shadow: none;
    scrollbar-width: thin;
  }
  .sidebar::after { display: none; }

  .sidebar-head { min-width: 0; display: flex; align-items: center; gap: 6px; }
  .sidebar-head .brand { min-width: 0; flex: 1; }

  .brand {
    min-height: 52px;
    padding: 4px 8px 10px;
    display: flex;
    align-items: center;
    gap: 11px;
  }
  .brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-md);
    color: var(--accent-fg);
    background: var(--accent-bg);
    box-shadow: none;
    font-size: 18px;
  }
  .brand-mark::before,
  .brand-mark i { display: none; }
  .brand strong { display: block; font-family: inherit; font-size: 15px; font-weight: 760; letter-spacing: .02em; }
  .brand small { display: block; margin-top: 1px; color: var(--text-muted); font-size: var(--font-caption); letter-spacing: .03em; }

  .tenant-select-wrap,
  .sidebar-workspace-select { display: grid; gap: 6px; padding: 6px 8px; color: var(--text-muted); font-size: var(--font-caption); }
  .tenant-select-wrap select,
  .sidebar-workspace-select select { width: 100%; }

  .nav-section { display: grid; gap: 2px; }
  .nav-item {
    position: relative;
    min-height: 42px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: transparent;
    box-shadow: none;
    transition: color .16s ease, background .16s ease;
  }
  .nav-item::before { display: none; }
  .nav-item:hover { color: var(--text-primary); background: var(--surface-subtle); transform: none; }
  .nav-item.active { color: var(--text-primary); background: var(--surface-active); box-shadow: none; }
  .nav-item.active::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 15px;
    width: 4px;
    height: 12px;
    border-radius: 999px;
    background: var(--accent-fg);
  }
  .nav-icon { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text-muted); }
  .nav-item.active .nav-icon { color: var(--accent-fg); }
  .nav-item-text { min-width: 0; display: block; }
  .nav-item-text b { display: block; overflow: hidden; color: inherit; font-size: 13px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
  .nav-item-text small { display: none; }

  .nav-disclosure { border-radius: var(--radius-sm); }
  .nav-disclosure > summary {
    min-height: 42px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
  }
  .nav-disclosure > summary:hover { color: var(--text-primary); background: var(--surface-subtle); }
  .nav-disclosure > summary > span { min-width: 0; display: flex; align-items: center; gap: 10px; }
  .nav-disclosure > summary strong { font-size: 13px; font-weight: 680; }
  .nav-disclosure > summary small { max-width: 105px; overflow: hidden; color: var(--text-muted); font-size: var(--font-caption); text-overflow: ellipsis; white-space: nowrap; }
  .nav-disclosure > summary .ui-icon { transition: transform .16s ease; }
  .nav-disclosure[open] > summary .ui-icon:first-child { transform: rotate(90deg); }
  .nav-disclosure-content { margin: 2px 0 7px; padding: 2px 0 2px 8px; }
  .nav-disclosure-content .nav-item { min-height: 38px; }
  .nav-divider { height: 1px; margin: 7px 10px; background: var(--divider); }
  .nav-secondary-disclosure > summary {
    min-height: 38px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--font-caption);
  }
  .nav-secondary-disclosure > summary:hover { color: var(--text-primary); background: var(--surface-subtle); }
  .nav-secondary-disclosure[open] > summary .ui-icon { transform: rotate(90deg); }
  .nav-secondary-content { padding-top: 4px; display: grid; gap: 2px; }

  .workspace-nav-list { display: grid; gap: 2px; max-height: 210px; overflow: auto; }
  .sidebar-create-space { width: 100%; margin-top: 4px; }
  .sidebar-spacer { flex: 1 0 8px; min-height: 8px; }

  .user-card { position: relative; padding: 4px 0 0; }
  .account-menu { position: relative; }
  .account-menu > summary {
    min-height: 52px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: var(--radius-md);
  }
  .account-menu > summary:hover { background: var(--surface-subtle); }
  .avatar { box-shadow: none; }
  .user-meta { min-width: 0; flex: 1; }
  .user-meta strong,
  .user-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-meta strong { font-size: 13px; }
  .user-meta small { margin-top: 1px; color: var(--text-muted); font-size: var(--font-caption); }
  .account-chevron { display: grid; color: var(--text-muted); transition: transform .16s ease; }
  .account-menu[open] .account-chevron { transform: rotate(180deg); }
  .account-menu-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 95;
    padding: 8px;
    display: grid;
    gap: 3px;
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
    box-shadow: var(--elevation-overlay);
  }
  .account-action {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: transparent;
    text-align: left;
  }
  .account-action:hover { color: var(--text-primary); background: var(--surface-subtle); }
  .account-action-danger { color: var(--danger-fg); }
  .account-menu-panel .work-state-control { width: 100%; }
  .account-context-select { padding: 6px 8px 9px; display: grid; gap: 5px; color: var(--text-muted); font-size: var(--font-caption); }
  .account-context-select select { width: 100%; }
  .account-menu-panel .work-state-button { width: 100%; justify-content: flex-start; }
  .account-menu-panel .work-state-chevron { margin-left: auto; }
  .account-menu-panel .work-state-menu {
    position: static;
    width: 100%;
    max-height: min(420px, calc(var(--viewport-block) - 170px));
    margin-top: 4px;
    overflow-y: auto;
  }

  .main {
    min-width: 0;
    position: relative;
    container-name: main-content;
    container-type: inline-size;
  }
  .main:focus { outline: none; }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 35;
    height: var(--topbar);
    padding: 10px clamp(18px, 3vw, 34px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: rgba(247, 248, 245, .76);
    backdrop-filter: blur(18px) saturate(1.04);
    box-shadow: none;
  }
  .topbar::after { display: none; }
  .topbar-leading { min-width: 0; display: flex; align-items: center; gap: 10px; }
  .breadcrumb { min-width: 0; }
  .breadcrumb strong,
  .breadcrumb small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .breadcrumb strong { font-family: inherit; font-size: 15px; font-weight: 720; letter-spacing: 0; }
  .breadcrumb small { margin-top: 1px; color: var(--text-muted); font-size: var(--font-caption); }
  .top-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
  .command-trigger { min-height: 40px; }
  .page { width: min(1480px, 100%); margin: 0 auto; padding: 30px clamp(22px, 4vw, 54px) 88px; }
  .mobile-menu { display: none !important; }
  .mobile-nav-scrim { display: none; }
  .mobile-bottom-nav { display: none; }

  @media (max-width: 1180px) and (min-width: 901px) {
    :root { --sidebar: 224px; }
    .breadcrumb small, .command-trigger kbd { display: none; }
  }

  @media (max-width: 900px) {
    :root { --sidebar: 292px; --topbar: 62px; }
    .app-shell { display: block; }
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      width: min(var(--sidebar), 88vw);
      height: var(--viewport-block);
      padding-top: max(20px, var(--safe-top));
      padding-bottom: max(14px, var(--safe-bottom));
      transform: translateX(-105%);
      visibility: hidden;
      transition: transform .2s ease, visibility 0s linear .2s;
      background: rgba(249,250,247,.97);
      box-shadow: var(--elevation-overlay);
    }
    body.menu-open { overflow: hidden; }
    body.menu-open .sidebar { transform: none; visibility: visible; transition-delay: 0s; }
    .mobile-nav-scrim {
      position: fixed;
      inset: 0;
      z-index: 39;
      width: 100%;
      height: var(--viewport-block);
      display: none;
      border: 0;
      border-radius: 0;
      background: rgba(28, 35, 31, .22);
      backdrop-filter: blur(8px);
    }
    body.menu-open .mobile-nav-scrim { display: block; }
    .mobile-menu { display: grid !important; }
    .topbar {
      min-height: calc(var(--topbar) + var(--safe-top));
      height: auto;
      padding: max(9px, var(--safe-top)) max(12px, var(--safe-right)) 9px max(12px, var(--safe-left));
    }
    .breadcrumb small { display: none; }
    .top-actions { gap: 4px; }
    .command-trigger { display: none; }
    .quick-idea { width: var(--touch-target); min-width: var(--touch-target); height: var(--touch-target); padding: 0; }
    .quick-idea span { display: none; }
    .page {
      padding: 24px max(16px, var(--safe-right)) calc(96px + var(--safe-bottom)) max(16px, var(--safe-left));
    }
    .mobile-bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 34;
      min-height: calc(66px + var(--safe-bottom));
      padding: 6px max(7px, var(--safe-right)) max(6px, var(--safe-bottom)) max(7px, var(--safe-left));
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      background: rgba(250,251,248,.94);
      backdrop-filter: blur(18px);
      box-shadow: none;
    }
    .mobile-bottom-nav .nav-item { min-width: 0; min-height: 52px; padding: 5px 2px; display: grid; justify-items: center; gap: 1px; }
    .mobile-bottom-nav .nav-item::after { display: none; }
    .mobile-bottom-nav .nav-item-text b { font-size: 11px; }
    .account-menu-panel .work-state-menu {
      position: static;
      inset: auto;
      width: 100%;
      max-height: min(360px, calc(var(--viewport-block) - 210px));
    }
  }

  @media (max-width: 560px) {
    .breadcrumb { max-width: 124px; }
    .breadcrumb strong { font-size: 14px; }
  }
}