/* ===================== APP SHELL ===================== */
  .app { display: flex; min-height: 100vh; }

  /* ---- Sidebar ---- */
  .sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--ink-navy);
    color: #EFEFE9;
    display: flex;
    flex-direction: column;
    padding: 28px 20px;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    transition: transform 0.25s ease;
  }

  .brand { display: flex; align-items: center; gap: 12px; padding: 0 4px 28px; border-bottom: 1px solid rgba(239,239,233,0.12); margin-bottom: 24px; }
  .brand-mark {
    width: 42px; height: 42px; border-radius: 9px;
    background: var(--gold); color: var(--ink-navy);
    font-family: var(--font-display); font-weight: 700; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .brand-text .brand-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.15; color: #FBFAF5; }
  .brand-text .brand-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 2px; color: var(--gold-soft); text-transform: uppercase; margin-top: 3px; }

  .nav-group-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(239,239,233,0.4); padding: 0 12px; margin-bottom: 10px; }

  .nav-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 28px; }
  .nav-btn {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    background: transparent; border: none; border-left: 3px solid transparent;
    padding: 11px 12px; border-radius: 0 6px 6px 0;
    color: rgba(239,239,233,0.68);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .nav-btn svg { width: 17px; height: 17px; stroke-width: 1.7; flex-shrink: 0; }
  .nav-btn .nav-index { font-family: var(--font-mono); font-size: 10.5px; color: var(--gold-soft); opacity: 0.7; margin-left: auto; }
  .nav-btn:hover { background: rgba(239,239,233,0.06); color: #FBFAF5; }
  .nav-btn.active { background: rgba(200,155,60,0.14); border-left-color: var(--gold); color: #FBFAF5; }
  .nav-btn.active .nav-index { opacity: 1; }

  .sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(239,239,233,0.12); }
  .sidebar-footer .desk { font-size: 12.5px; color: rgba(239,239,233,0.55); }
  .sidebar-footer .desk strong { display: block; color: #FBFAF5; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }

  .sidebar-backdrop { display: none; }

  /* ---- Main content ---- */
  .main {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-width: 0;
    padding: 32px 40px 60px;
  }

  .topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
  .topbar-title-row { display: flex; align-items: center; gap: 14px; }
  .menu-toggle {
    display: none; background: var(--paper-panel); border: 1px solid var(--line); border-radius: 6px;
    width: 38px; height: 38px; align-items: center; justify-content: center; cursor: pointer;
  }
  .menu-toggle svg { width: 18px; height: 18px; }

  .page-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; }
  .page-title { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--ink-navy); }

  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
    padding: 11px 20px; border-radius: 6px; border: 1px solid transparent;
    cursor: pointer; white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .btn svg { width: 16px; height: 16px; stroke-width: 2; }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--ink-navy); color: #FBFAF5; }
  .btn-primary:hover { background: var(--ink-navy-light); }
  .btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-text); }
  .btn-ghost:hover { border-color: var(--ink-navy); }
  .btn-danger-ghost { background: transparent; border-color: var(--line); color: var(--danger); }
  .btn-danger-ghost:hover { background: var(--danger-bg); border-color: var(--danger); }
  .btn-sm { padding: 7px 12px; font-size: 12.5px; }