/* Templates view */
    .templates-layout {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 18px;
      align-items: start;
    }
    .templates-sidebar {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 10px;
      position: sticky;
      top: 0;
      box-shadow: var(--shadow-sm);
    }
    .type-filter-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      text-align: left;
      padding: 7px 10px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      font-family: 'Lato', sans-serif;
      cursor: pointer;
      transition: all .1s;
    }
    .type-filter-btn:hover { background: var(--surface2); color: var(--text); }
    .type-filter-btn.active { background: var(--brand-dim); color: var(--brand); font-weight: 600; }
    .type-filter-count { font-size: 10px; font-family: 'DM Mono', monospace; opacity: .55; }

    .templates-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
      gap: 10px;
    }
    .template-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: var(--shadow-sm);
      transition: border-color .12s, box-shadow .12s, transform .1s;
    }
    .template-card:hover { border-color: var(--brand-glow); box-shadow: var(--shadow); transform: translateY(-1px); }
    .template-card-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .template-card-title { font-weight: 700; font-size: 13px; color: var(--ink); line-height: 1.3; }
    .template-card-body { font-size: 12px; color: var(--muted); line-height: 1.6; white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
    .template-card-tags { font-size: 10px; color: var(--subtle); font-family: 'DM Mono', monospace; }
    .template-card-actions { display: flex; gap: 5px; padding-top: 6px; border-top: 1px solid var(--border); }

    .ideas-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }
    .ideas-tab {
      border: 1px solid var(--border2);
      background: var(--surface);
      color: var(--muted);
      border-radius: 999px;
      padding: 8px 14px;
      font-size: 12px;
      font-family: 'DM Mono', monospace;
      cursor: pointer;
      transition: all .12s;
    }
    .ideas-tab.active {
      color: var(--brand);
      border-color: var(--brand-glow);
      background: var(--brand-dim);
    }
    .ideas-panel { display: none; }
    .ideas-panel.active { display: block; }
    .ideas-panel-hdr {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .ideas-panel-copy { color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 700px; }
    .ideas-mobile-only { display: none; }
    .ideas-desktop-only { display: inline-flex; }




#notebookEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#notebookEmpty .empty-title,
#notebookEmpty .empty-desc {
  width: 100%;
  margin: 0 auto;
}
/* ── NOTEBOOK ── */
.notebook-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.notebook-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--border2); }
.notebook-card-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.notebook-card-meta { display:flex; gap:8px; align-items:center; }
.notebook-type-badge {
  font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  border:1px solid var(--border2); color:var(--muted); background:var(--surface2); padding:2px 6px; border-radius:999px;
}
.notebook-type-badge.idea { color: var(--brand); border-color: var(--brand-glow); background: var(--brand-dim); }
.notebook-type-badge.article { color: #2563eb; border-color: rgba(37,99,235,.25); background: rgba(37,99,235,.08); }
.notebook-type-badge.note { color: #7c3aed; border-color: rgba(124,58,237,.22); background: rgba(124,58,237,.08); }
.notebook-type-badge.reddit { color: #ea580c; border-color: rgba(234,88,12,.26); background: rgba(234,88,12,.08); }
.notebook-type-badge.hn { color: #b45309; border-color: rgba(180,83,9,.26); background: rgba(180,83,9,.08); }
.notebook-card-age { font-size:10px; color:var(--subtle); font-family:'DM Mono',monospace; }
.notebook-card-body { display:flex; flex-direction:column; gap:4px; }
.notebook-card-title { font-size:13px; font-weight:600; color:var(--ink); }
.notebook-card-excerpt { font-size:12px; color:var(--muted); line-height:1.55; white-space:pre-wrap; }
.notebook-card-footer { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.notebook-card-source-link { font-size:11px; color:var(--brand); text-decoration:none; }
.notebook-card-source-link:hover { text-decoration:underline; }
/* Settings modal tabs */
    .settings-modal-card {
      max-width: 640px;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .settings-modal-hdr { flex-shrink: 0; }
    .settings-modal-body {
      min-height: 320px;
      flex: 1 1 auto;
      min-height: min(440px, calc(88vh - 96px));
      max-height: calc(88vh - 96px);
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 2px;
    }
    .settings-tabs {
      display: flex;
      gap: 2px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
    }
    .settings-tabs::-webkit-scrollbar { display: none; }
    .settings-tab {
      padding: 8px 12px;
      border: none;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      font-family: 'Lato', sans-serif;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: all .12s;
      white-space: nowrap;
      border-radius: 7px 7px 0 0;
    }
    .settings-tab:hover { color: var(--brand); background: var(--brand-dim); }
    .settings-tab.active, .settings-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); background: var(--surface2); }
    .settings-tab:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: -2px; }
    .settings-panel { display: none; min-height: 420px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
    .settings-panel.active { display: block; }
    .settings-panel:focus { outline: none; }
.settings-panel[hidden] { display: none !important; }
    .settings-copy { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0; }
    .settings-copy + .settings-copy { margin-top: 10px; }
    .connection-settings-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; margin-bottom: 14px; }
    .settings-feature-list { display: grid; gap: 8px; margin-top: 14px; }
    .settings-feature-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r2); background:var(--surface); font-size:13px; color:var(--text); }
    .settings-feature-item small { color: var(--subtle); font-size: 11px; font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:.04em; }
    .settings-feature-status { flex-shrink:0; font-family:'DM Mono',monospace; font-size:11px; color:var(--green); background:var(--green-dim); padding:4px 7px; border-radius:999px; }
    .settings-feature-status.is-paused { color:#9a3412; background:rgba(245,158,11,.12); }
    .settings-feature-note { margin-top: 14px; }
    .about-ben-card { display:grid; grid-template-columns:88px 1fr; gap:16px; align-items:start; }
    .about-ben-photo { display:block; width:88px; height:88px; border-radius:20px; object-fit:cover; border:1px solid var(--border2); background:var(--surface3); box-shadow:var(--shadow-sm); }
    .about-ben-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
    .connection-status-line, .connection-token-msg { font-size: 11px; color: var(--subtle); margin-top: 8px; font-family: 'DM Mono', monospace; min-height: 14px; }
    .advanced-connection { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; }
    .advanced-connection summary { cursor: pointer; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; color: var(--ink); }
    .advanced-connection[open] summary { margin-bottom: 10px; }
    .mobile-connection-card { padding: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface2); }
    .mobile-connection-card .conn-helper { color: var(--muted); }

    /* Mobile bottom nav */
    .mobile-tabs { display: none; }

    /* Mobile view header (replaces page-hdr on small screens) */
    .mob-view-hdr { display: none; }

    /* Mobile drawer */
    .mob-backdrop { position: fixed; inset: 0; background: rgba(20,22,42,.5); z-index: 98; display: none; }
    .mob-backdrop.open { display: block; }
    .mob-drawer {
      position: fixed;
      bottom: 60px; left: 0; right: 0;
      max-height: 80vh;
      overflow-y: auto;
      background: var(--surface);
      border-top: 1px solid var(--border2);
      border-radius: 20px 20px 0 0;
      z-index: 99;
      padding: 8px 18px 24px;
      box-shadow: 0 -12px 40px rgba(20,22,42,.18);
      display: none;
    }
    .mob-drawer.open { display: block; animation: drawerUp .25s cubic-bezier(.34,1.1,.64,1); }
    @keyframes drawerUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .mob-drawer-handle {
      width: 36px; height: 4px;
      background: var(--border2);
      border-radius: 2px;
      margin: 10px auto 18px;
    }
    .mob-drawer-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: 17px;
      color: var(--ink);
      margin-bottom: 14px;
    }