#root .app-shell {
  --shell-text: 14px;
  --shell-label: 13px;
  --shell-space: 8px;
}
#root .app-shell > :is(.topbar, .primary-rail, .secondary-sidebar, .secondary-opener) {
  line-height: 1.5;
}
#root .app-shell .top-brand {
  min-width: 0;
}
#root .app-shell .top-brand > span {
  min-width: 0;
}
#root .app-shell .top-brand b {
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
#root .app-shell .top-brand small {
  font-size: 13px;
  line-height: 1.5;
}
#root .app-shell .top-context {
  gap: 12px;
}
#root .app-shell .primary-rail nav > button {
  color: #dce7f1;
  background: transparent;
  min-height: 56px;
}
#root .app-shell .primary-rail nav > button small {
  font-size: var(--shell-label);
  line-height: 1.5;
  letter-spacing: 0;
}
#root .app-shell .primary-rail nav > button.active {
  color: #fff;
  background: #344b5c;
  border-color: #61727f;
}
#root .app-shell .primary-rail nav > button:hover {
  color: #fff;
  background: #304959;
}
#root .app-shell .primary-rail nav > button:focus-visible {
  outline: 2px solid #d6e9ff;
  outline-offset: -3px;
}
#root .app-shell .primary-rail .shell-nav-more {
  display: none;
}
#root .app-shell .secondary-sidebar nav {
  align-content: start;
  gap: 4px;
}
#root .app-shell .secondary-sidebar nav button {
  min-height: 44px;
  padding: 10px 12px;
  font-size: var(--shell-text);
  line-height: 1.5;
}
#root .app-shell .secondary-route-label {
  overflow-wrap: anywhere;
}
#root .app-shell .secondary-sidebar header h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
#root .app-shell .breadcrumb {
  min-height: 48px;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
}
#root .app-shell .breadcrumb > button {
  min-width: 44px;
  min-height: 44px;
}
#root .app-shell:not(:has(.executive-cockpit, .assistant-workspace, .research-figure-module, .figure-family-home)) .main-content :is(.page-header h1, .panel-header h2) {
  letter-spacing: 0;
  font-weight: 600;
}
#root .app-shell:not(:has(.executive-cockpit, .assistant-workspace, .research-figure-module, .figure-family-home)) .main-content .page-header h1 {
  font-size: 24px;
  line-height: 1.45;
}
#root .app-shell:not(:has(.executive-cockpit, .assistant-workspace, .research-figure-module, .figure-family-home)) .main-content .panel-header h2 {
  font-size: 18px;
  line-height: 1.5;
}
#root .app-shell:not(:has(.executive-cockpit, .assistant-workspace, .research-figure-module, .figure-family-home)) .main-content :is(.page-description, .panel-header p) {
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 760px) {
  #root .app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  #root .app-shell > .topbar {
    position: relative;
    top: auto;
    min-height: 64px;
    height: auto;
    padding: 12px 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  #root .app-shell .top-brand {
    flex: 1 1 180px;
  }
  #root .app-shell .top-brand b {
    white-space: normal;
  }
  #root .app-shell .top-context {
    min-width: 0;
    max-width: 100%;
    gap: 8px;
    flex-wrap: wrap;
  }
  #root .app-shell > .primary-rail {
    position: fixed;
    z-index: 70;
    inset: auto 0 0;
    width: 100%;
    height: auto;
    max-height: 65dvh;
    overflow-y: auto;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid #61727f;
  }
  #root .app-shell .primary-rail nav {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--shell-nav-count), minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }
  #root .app-shell .primary-rail nav > button {
    width: 100%;
    min-width: 0;
    min-height: 60px;
    padding: 6px 2px;
    gap: 2px;
    flex: initial;
  }
  #root .app-shell .primary-rail nav > button::before {
    display: none;
  }
  #root .app-shell .primary-rail nav > button span {
    width: 24px;
    height: 24px;
  }
  #root .app-shell .primary-rail nav > button small {
    white-space: normal;
  }
  #root .app-shell .primary-rail .writing-preview-label {
    font-size: 11px;
    white-space: normal;
  }
  #root .app-shell .primary-rail[data-shell-menu-open=false] nav > button:nth-of-type(n+5):not(.shell-nav-more) {
    display: none;
  }
  #root .app-shell .primary-rail nav > .shell-nav-more {
    display: grid;
  }
  #root .app-shell .primary-rail[data-shell-menu-open=true] nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #root .app-shell .primary-rail[data-shell-menu-open=true] .shell-nav-more {
    grid-column: 1 / -1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #root .app-shell > .secondary-sidebar {
    grid-column: 1;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    padding: 8px 12px;
  }
  #root .app-shell .secondary-sidebar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    overflow: visible;
    padding: 0;
  }
  #root .app-shell .secondary-sidebar nav button {
    width: auto;
    max-width: 100%;
    min-height: 44px;
    padding: 8px 12px;
  }
  #root .app-shell.secondary-collapsed > .secondary-sidebar {
    display: none;
  }
  #root .app-shell > .secondary-opener {
    display: flex;
    position: relative;
    inset: auto;
    grid-column: 1;
    width: 100%;
    min-height: 44px;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
  }
  #root .app-shell > .secondary-opener::after {
    content: "展开本栏功能";
    font-size: 14px;
  }
  #root .app-shell > .main-content {
    grid-column: 1;
    padding: 0 16px calc(104px + env(safe-area-inset-bottom, 0px));
  }
  #root .app-shell .breadcrumb {
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  #root .app-shell:not(:has(.executive-cockpit, .assistant-workspace, .research-figure-module, .figure-family-home)) .main-content .page-header h1 {
    font-size: 21px;
  }
}