/* 正式工作台导航沿用 Demo 的克制信息层级，工作区和工具页面样式仍由 workbench.css 管理。 */
:root { --sidebar: 288px; }

.header-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.header-left .brand-lockup { min-width: 0; }
.nav-toggle {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}
.nav-toggle:hover { border-color: #a8c9bf; background: var(--accent-soft); color: var(--accent); }
.nav-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.app-shell.nav-collapsed .nav-toggle svg { transform: scaleX(-1); }

.sidebar {
    flex: 0 0 var(--sidebar);
    width: var(--sidebar);
    transition: width .18s ease, flex-basis .18s ease;
}
.sidebar-fixed { flex: 0 0 auto; padding: 14px 14px 12px; border-bottom: 1px solid #eef1f0; }
.sidebar .sidebar-heading { display: flex; align-items: end; justify-content: space-between; height: auto; margin-bottom: 13px; padding: 0; color: var(--text); letter-spacing: 0; }
.nav-eyebrow { display: block; color: #84918e; font: 700 9px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .14em; }
.sidebar-heading strong { display: block; margin-top: 4px; font-size: 18px; line-height: 1.25; letter-spacing: -.02em; }
.sidebar-heading small { padding: 2px 5px; border-radius: 3px; background: var(--accent-soft); color: var(--accent); font-size: 10px; vertical-align: 3px; }
.nav-side-hint { color: #8b9897; font-size: 10px; font-weight: 400; white-space: nowrap; }
.sidebar .search-box { display: flex; align-items: center; height: 34px; gap: 7px; margin: 0; padding: 0 8px; border-color: #e2e8e7; border-radius: 5px; background: #f9fbfa; color: #8c9998; }
.sidebar .search-box:focus-within { border-color: var(--accent); background: var(--surface); }
.search-icon { width: 15px; height: 15px; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.7; }
.sidebar .search-box input { min-width: 0; font-size: 11px; }
.sidebar .search-box input::placeholder { color: #93a09f; }
.sidebar .search-box kbd { flex: 0 0 auto; padding: 1px 4px; border: 1px solid #e4e9e8; border-radius: 3px; background: var(--surface); color: #8c9998; font: 10px ui-monospace, Consolas, monospace; }
.nav-control-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
.nav-control-heading strong { font-size: 11px; }
.nav-control-heading span { color: #91a09e; font-size: 10px; }
.sort-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.sort-options button { height: 29px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: #687775; font-size: 10px; cursor: pointer; }
.sort-options button:hover { border-color: #a3c4bb; color: var(--accent); }
.sort-options button.active { border-color: #a8ccc1; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.category-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.category-index a { display: flex; align-items: center; justify-content: center; min-width: 0; height: 28px; overflow: hidden; border: 1px solid #e5eae9; border-radius: 4px; background: var(--surface-soft); color: #6d7a78; font-size: 10px; text-decoration: none; white-space: nowrap; }
.category-index a:hover, .category-index a.active { border-color: #bddbd1; background: var(--accent-soft); color: var(--accent); font-weight: 700; }

.sidebar .tool-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 13px 8px 24px; scrollbar-color: #c6d2cf transparent; scrollbar-width: thin; }
.nav-section { scroll-margin-top: 10px; margin-bottom: 19px; padding: 0 5px; }
.nav-section-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.nav-section-heading::before { width: 3px; height: 15px; border-radius: 1px; background: var(--accent); content: ""; }
.nav-section-heading h2 { flex: 1; margin: 0; padding: 0; color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.3; }
.nav-section-count { padding: 2px 5px; border: 1px solid #e0e8e5; border-radius: 3px; color: #81908d; font: 700 9px/1 ui-monospace, Consolas, monospace; }
.nav-section-description { margin: -2px 0 8px 11px; color: #879592; font-size: 10px; line-height: 1.5; }
.nav-tool-list { display: flex; flex-direction: column; gap: 3px; }
.nav-tool-item { display: flex; align-items: center; width: 100%; min-height: 45px; padding: 4px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; }
.nav-tool-item:hover { border-color: #d6e5df; background: #f6faf8; }
.nav-tool-item.active { border-color: #b9d8ce; background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
.sidebar .nav-tool-link { display: flex; flex: 1; align-items: center; min-width: 0; width: auto; overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; }
.sidebar .nav-tool-link:hover, .sidebar .nav-tool-link.active { border: 0; background: transparent; }
.nav-tool-icon { display: grid; flex: 0 0 30px; width: 30px; height: 30px; margin-right: 9px; place-items: center; border: 1px solid #e3ece8; border-radius: 4px; background: #f1f6f3; color: var(--accent); }
.nav-tool-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.nav-tool-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 2px; }
.nav-tool-name { overflow: hidden; color: var(--text); font-size: 11px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.nav-tool-item.active .nav-tool-name { color: #115d55; }
.nav-tool-summary { overflow: hidden; color: #85918e; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.nav-tool-summary.search-category { color: var(--accent); }
.nav-pin { display: grid; flex: 0 0 21px; width: 21px; height: 25px; padding: 0; place-items: center; border: 0; border-radius: 3px; background: transparent; color: #aab6b2; font-size: 17px; cursor: pointer; }
.nav-pin:hover, .nav-pin.pinned { color: var(--accent); }
.nav-popular-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sidebar .nav-popular-link { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 70px; padding: 7px 8px; border: 1px solid #dae8e2; border-radius: 5px; background: #f7faf8; text-align: left; white-space: normal; }
.sidebar .nav-popular-link:hover { border-color: #a6cfc0; background: #f0f8f4; }
.sidebar .nav-popular-link.active { border-color: #91bdb0; background: var(--accent-soft); }
.nav-popular-top { display: flex; align-items: center; gap: 5px; width: 100%; }
.nav-popular-top .nav-tool-icon { flex-basis: 22px; width: 22px; height: 22px; margin: 0; border: 0; background: transparent; }
.nav-popular-rank { margin-left: auto; color: #9cafaa; font: 700 9px ui-monospace, Consolas, monospace; }
.nav-popular-link .nav-tool-name { display: -webkit-box; width: 100%; margin-top: 4px; overflow: hidden; font-size: 10px; line-height: 1.25; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nav-popular-link .nav-tool-summary { margin-top: 3px; color: #7d8d87; font-size: 9px; }
.nav-result-count { margin: 1px 6px 13px; color: var(--muted); font-size: 11px; }
.nav-empty-result { margin: 24px 8px; padding: 17px; border: 1px dashed var(--line-strong); border-radius: 5px; color: var(--muted); font-size: 11px; line-height: 1.7; text-align: center; }
.sidebar-footer { display: flex; flex: 0 0 38px; align-items: center; gap: 6px; padding: 0 14px; border-top: 1px solid var(--line); color: #80908c; font-size: 10px; }
.nav-status-led { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sidebar-footer button { margin-left: auto; padding: 4px 0; border: 0; background: transparent; color: #83918d; font-size: 10px; cursor: pointer; }
.sidebar-footer button:hover { color: var(--accent); text-decoration: underline; }

@media (min-width: 761px) {
    .app-shell.nav-collapsed .sidebar { flex-basis: 0; width: 0; overflow: hidden; border-right: 0; pointer-events: none; }
    .sidebar-fixed, .sidebar-footer, .sidebar .tool-nav { min-width: var(--sidebar); }
}
@media (max-width: 760px) {
    :root { --sidebar: 288px; }
    .app-header { padding: 0 12px; }
    .header-left { gap: 7px; }
    .sidebar { position: fixed; z-index: 30; top: var(--header); bottom: 0; left: 0; width: var(--sidebar); box-shadow: 5px 0 20px rgb(25 45 40 / 10%); transform: translateX(-105%); transition: transform .18s ease; }
    .sidebar.open { transform: translateX(0); }
    .mobile-nav-overlay:not([hidden]) { position: fixed; z-index: 29; inset: var(--header) 0 0; background: rgb(25 45 40 / 20%); }
}