/* Responsive shell: ≥1024 three columns · 768–1023 collapsible sidebar + overlay inspector · <768 single column + tab bar + bottom sheet */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); }
.app.inspector-open { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--inspector-w); }
.sidebar {
  background: var(--sidebar-bg); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(14px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 1px;
  -webkit-backdrop-filter: saturate(1.6) blur(22px); backdrop-filter: saturate(1.6) blur(22px); scrollbar-width: thin;
}
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; padding-top: env(safe-area-inset-top); }
.outline { flex: 1; overflow-y: auto; padding: 2px 0 140px; outline: none; overscroll-behavior: contain; scroll-padding: 64px 0; }
.inspector { background: var(--surface); border-left: 1px solid var(--line); overflow-y: auto; display: none; overscroll-behavior: contain; }
.app.inspector-open .inspector { display: block; }
.scrim { display: none; }
.tabbar, .fab { display: none; }

/* toolbar: large, light title with the item count beside it */
.toolbar { display: flex; align-items: center; gap: var(--sp-2); padding: 18px 24px 12px 28px; min-height: 68px; background: var(--bg); }
.toolbar .title-wrap { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.toolbar h1 {
  font: 300 var(--fs-title)/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:lang(zh-CN) .toolbar h1 { font-weight: 400; letter-spacing: 0.01em; }
.title-count { font-size: var(--fs-md); color: var(--muted); font-weight: 400; }
.toolbar .menu-btn { display: none; }
.tool-group { display: flex; gap: 2px; padding-left: 4px; }
.search-wrap { position: relative; display: flex; align-items: center; color: var(--muted); }
.search-wrap .ico { position: absolute; left: 9px; pointer-events: none; }
.search-wrap input.search { width: 220px; padding-left: 30px; height: 32px; border-radius: var(--r-md); transition: none; }

@media (max-width: 1023px) {
  .app, .app.inspector-open { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 288px; z-index: 40; transform: translateX(-104%); box-shadow: none; visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); border-right: 0;
    background: color-mix(in srgb, var(--sidebar-bg) 92%, var(--bg));
  }
  .app.sidebar-open .sidebar { transform: none; visibility: visible; box-shadow: var(--e-3); transition: transform var(--dur-slow) var(--ease-out), visibility 0s; }
  .toolbar .menu-btn { display: inline-flex; margin-left: -8px; }
  .toolbar { padding-left: 16px; }
  .inspector { position: fixed; inset: 0 0 0 auto; width: min(400px, 92vw); z-index: 45; box-shadow: var(--e-3); border-left: 0; }
  .app.sidebar-open .scrim, .app.inspector-open .scrim {
    display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 35; animation: fade-in var(--dur) var(--ease) both;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
}

@media (max-width: 767px) {
  .toolbar { padding: 10px 12px 8px 16px; min-height: 56px; gap: 4px; position: sticky; top: 0; }
  .toolbar .search-wrap { display: none; }
  .toolbar h1 { font-size: 24px; }
  .toolbar .title-wrap { flex: 1 1 auto; min-width: 70px; }
  .toolbar .spacer { display: none; }
  .tool-group .icon-btn:nth-child(2) { display: none; }
  .view-opts { flex-wrap: nowrap; }
  .view-opts select { width: 96px; height: 34px; font-size: 12.5px; }
  .view-opts .opt-secondary { display: none; }
  /* inspector = bottom sheet with a drag handle */
  .inspector {
    inset: auto 0 0 0; width: 100%; height: min(88dvh, 760px); border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .outline { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
  .rows, .page { padding: 0 4px; }
  .app { --row-indent: 16px; }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--bar-bg);
    -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
    border-top: 1px solid var(--line); padding: 0 6px env(safe-area-inset-bottom);
  }
  .tabbar button {
    flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 10.5px; font-weight: 500; color: var(--muted); position: relative; transition: transform var(--dur-fast) var(--ease);
  }
  .tabbar button .ico { line-height: 0; }
  .tabbar button.on { color: var(--accent-ink); }
  .tabbar .badge { position: absolute; top: 5px; left: calc(50% + 7px); }
  .fab {
    display: flex; position: fixed; right: 18px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 31; width: 56px; height: 56px;
    border-radius: 18px; background: var(--accent); color: var(--accent-text); align-items: center; justify-content: center;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent), var(--e-2); transition: transform var(--dur-fast) var(--ease);
  }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* auth */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(1200px 600px at 50% -10%, var(--accent-soft), transparent 60%), var(--bg); }
.auth-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: var(--r-xl); padding: 32px 28px 24px; box-shadow: var(--e-3); animation: dialog-in var(--dur-slow) var(--ease-out) both; }
.auth-mark { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.auth-card h1 { margin: 0 0 4px; font: 400 26px/1.2 var(--font-display); letter-spacing: -0.01em; }
.auth-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.auth-card input { height: 40px; }
.auth-card .btn[type=submit] { height: 40px; }
.auth-card .switch { display: flex; gap: 6px; margin-top: 16px; align-items: center; }