/*
  © 2026 Sarbjit Singh · sarbjitbhavra@gmail.com
  TheVaultMind · Personal use only
  Color tokens + fonts now live in theme.css, loaded before this file.
*/

/* ══════════════════════════════════════════════
   RESET
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body {
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  background: var(--bg); color: var(--tx);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a { color: var(--study); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--sans); cursor: pointer; border: none; background: none; color: inherit; transition: transform 80ms ease; }
button:active:not(:disabled) { transform: scale(.97); }
input, textarea, select { font-family: var(--sans); font-size: 14px; color: var(--tx); }
:is(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--int); outline-offset: 2px; border-radius: 3px;
}
.hidden { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: var(--bd2) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 4px; }

/* ══════════════════════════════════════════════
   APP SHELL — flex column fills viewport
   topbar fixed at top, app-body fills rest
══════════════════════════════════════════════ */
.app-shell {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ── TOPBAR ── */
.topbar {
  position: relative;
  height: var(--tbh);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 12px;
  background: var(--bg-s);
  border-bottom: 1px solid var(--bd);
  z-index: 10;
}
.topbar-left  { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 6px; }

.topbar-brand { display: flex; align-items: center; gap: 9px; }
.topbar-kmark { width: 30px; height: 30px; flex-shrink: 0; }

.topbar-btn {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--tx3);
  padding: 5px 9px; border-radius: var(--r);
  transition: color var(--t);
  white-space: nowrap;
}
.topbar-btn:hover { color: var(--tx); }
.topbar-icon-btn { width: 30px; height: 30px; padding: 0; justify-content: center; }
.topbar-btn-ghost {
  border: 1px solid var(--bd2); color: var(--tx2);
}
.topbar-btn-ghost:hover { border-color: var(--bd3); color: var(--tx); }
.topbar-btn-primary {
  background: var(--kb); color: #fff;
  font-weight: 600; font-size: 12.5px;
  padding: 6px 14px; border-radius: var(--r);
}
.topbar-btn-primary:hover { opacity: .85; }
.topbar-btn-primary svg { flex-shrink: 0; }

/* Shortcuts popover */
.topbar-shortcuts-wrap { position: relative; }
.topbar-shortcuts-btn  { font-size: 12px; }
.shortcuts-popover {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg-s); border: 1px solid var(--bd2);
  border-radius: var(--rm); box-shadow: var(--sh2);
  padding: 10px 14px; min-width: 210px; z-index: 200;
  display: flex; flex-direction: column; gap: 7px;
}
.shortcuts-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--tx2); }
.shortcuts-row kbd { font-family: var(--mono); font-size: 11px; background: var(--bg-e); color: var(--tx); border: 1px solid var(--bd2); border-bottom-width: 2px; border-radius: 4px; padding: 2px 7px; white-space: nowrap; }

/* Master timer */
.master-timer { display: flex; align-items: center; gap: 6px; padding: 3px 8px; }
.master-timer-ring { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.master-timer-ring svg { position: absolute; }
.master-timer-text { font-size: 8px; font-family: var(--mono); color: var(--tx2); position: relative; z-index: 1; }
.master-timer-info { display: none; }
.master-timer-total { font-size: 11px; font-weight: 600; color: var(--tx); line-height: 1.2; }
.master-timer-label { font-size: 10px; color: var(--tx3); }

/* ── APP BODY — sidebar + main ── */
.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sw);
  min-width: var(--sw);
  flex-shrink: 0;
  background: var(--bg-s);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #13102a 0%, #0f1520 100%);
  border-right: 1px solid rgba(122,95,196,0.12);
}
.sidebar-nav {
  flex: 1;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}
.nav-group-label {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx3);
  padding: 16px 10px 6px; pointer-events: none;
}
.sidebar-nav > .nav-group-label:first-child { padding-top: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r);
  font-size: 13.5px; font-weight: 400; color: var(--tx2);
  transition: color var(--t);
  width: 100%; text-align: left; letter-spacing: -0.01em;
}
.nav-item::after {
  content: '›'; margin-left: auto; font-weight: 700; font-size: 15px; line-height: 1;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 150ms ease, transform 150ms ease;
}
.nav-item:hover::after, .nav-item.active::after { opacity: .6; transform: translateX(0); }
.nav-item.active::after { opacity: 1; }
.nav-item:hover  { color: var(--tx); }
.nav-item.active { color: var(--kb); font-weight: 600; }
[data-theme="dark"] .nav-item.active { color: #c4aef8; }
.nav-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: .55; }
.nav-icon svg { width: 15px; height: 15px; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-label { flex: 1; }
.nav-badge { background: var(--pub); color: #fff; font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 8px; line-height: 1.4; }
.sidebar-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--bd);
  flex-shrink: 0;
}
.sidebar-copyright { position: relative; display: inline-block; font-size: 10px; color: var(--tx3); margin-bottom: 6px; cursor: pointer; }
/* Custom tooltip (not the native title box). A width-clip typewriter effect needs nowrap, which
   fights wrapping the two names onto separate lines — simpler fade-in instead, wraps naturally. */
.sidebar-copyright::after {
  content: attr(data-credit);
  position: absolute; bottom: 100%; left: 0; margin-bottom: 6px;
  white-space: normal; width: max-content; max-width: 130px;
  font-size: 11px; font-family: var(--mono, monospace); color: var(--tx); line-height: 1.4;
  background: var(--bg-e); border: 1px solid var(--bd2); border-radius: var(--r);
  padding: 6px 9px; box-shadow: var(--sh2, 0 4px 12px rgba(0,0,0,.15));
  opacity: 0; transform: translateY(3px); pointer-events: none; z-index: 20;
  transition: opacity .15s ease, transform .15s ease;
}
.sidebar-copyright:hover::after { opacity: 1; transform: translateY(0); }
.lib-mobile-back, .lib-list-back { display: none; }
.lib-mobile-back, .lib-list-back { width: 100%; box-sizing: border-box; height: auto; text-align: center; padding: 10px; font-size: 13px; background: var(--bg-e); }

/* ── MAIN CONTENT ── */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--bg);
}
[data-theme="dark"] .main-content {
  background: radial-gradient(ellipse at 20% 0%, rgba(122,95,196,0.05) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 100%, rgba(63,149,121,0.04) 0%, transparent 60%),
              var(--bg);
}
.tab-panel { display: none; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
.tab-panel.active { display: flex; animation: fadeUp .25s ease; }

/* ══════════════════════════════════════════════
   CONTENT TOOLBAR — slim per-page action bar
══════════════════════════════════════════════ */
.content-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 16px;
  height: 44px; flex-shrink: 0;
  background: var(--bg-s);
  border-bottom: 1px solid var(--bd);
}
[data-theme="dark"] .content-toolbar {
  background: rgba(17,17,28,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.content-toolbar-left  { display: flex; align-items: flex-end; gap: 14px; min-width: 0; flex: 1 1 auto; }
.content-toolbar-right { display: flex; align-items: flex-start; gap: 7px; flex-shrink: 0; padding-top: 3px; }
.content-toolbar-right .icon-btn, .content-toolbar-right .rss-date-filter { line-height: 1.2; }
.toolbar-page-label { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--tx); letter-spacing: -0.01em; white-space: nowrap; }
.toolbar-page-sub   { font-size: 11px; color: var(--tx3); letter-spacing: -0.01em; }

/* ══════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════ */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-e); border: 1px solid var(--bd2); border-radius: var(--rm); box-shadow: var(--sh2); font-size: 12.5px; color: var(--tx); pointer-events: all; max-width: 320px; animation: toastIn .25s ease; }
.toast.success { border-left: 3px solid var(--int); }
.toast.error   { border-left: 3px solid var(--pub); }
.toast.info    { border-left: 3px solid var(--study); }
.toast-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast-msg  { flex: 1; line-height: 1.4; }
.toast.fade-out { opacity: 0; transform: translateY(4px); transition: all .2s ease; }

/* ══════════════════════════════════════════════
   VAULT BANNER
══════════════════════════════════════════════ */
.vault-banner { position: fixed; top: var(--tbh); left: var(--sw); right: 0; z-index: 9; padding: 6px 16px; background: rgba(63,149,121,.12); border-bottom: 1px solid rgba(63,149,121,.2); font-size: 12px; color: var(--int); }

/* ══════════════════════════════════════════════
   FORM ELEMENTS
══════════════════════════════════════════════ */
.text-input {
  flex: 1; background: var(--bg-i); border: 1px solid var(--bd2);
  border-radius: var(--r); padding: 8px 12px; outline: none;
  transition: border-color var(--t); color: var(--tx);
}
.text-input:focus { border-color: var(--bd3); }
.text-input::placeholder { color: var(--tx3); }
.select-input { flex: 1; background: var(--bg-i); border: 1px solid var(--bd2); border-radius: var(--r); padding: 8px 12px; outline: none; color: var(--tx); appearance: none; cursor: pointer; transition: border-color var(--t); }
.select-input:focus { border-color: var(--bd3); }
.btn-primary { padding: 7px 16px; background: var(--kb); color: #fff; border-radius: var(--r); font-size: 13px; font-weight: 600; transition: opacity var(--t); }
.btn-primary:hover { opacity: .85; }
.btn-primary.sm { padding: 6px 12px; font-size: 12px; }
.btn-ghost { padding: 7px 16px; border: 1px solid var(--bd2); border-radius: var(--r); font-size: 13px; font-weight: 500; color: var(--tx2); transition: background var(--t), color var(--t), border-color var(--t); }
.btn-ghost:hover { background: var(--bg-h); color: var(--tx); border-color: var(--bd3); }
.btn-ghost.sm { padding: 6px 12px; font-size: 12px; }
.icon-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--bd2); border-radius: var(--r); font-size: 12px; font-weight: 500; color: var(--tx2); transition: all var(--t); white-space: nowrap; letter-spacing: -0.01em; background: transparent; }
.icon-btn:hover { background: var(--bg-h); color: var(--tx); border-color: var(--bd3); }
.icon-btn.sm { padding: 4px 9px; font-size: 11.5px; }
.action-link { font-size: 12px; color: var(--tx3); transition: color var(--t); background: none; border: none; cursor: pointer; }
.action-link:hover { color: var(--tx2); }
.generate-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: var(--kb); color: #fff; border-radius: var(--r); font-size: 13px; font-weight: 600; transition: opacity var(--t); }
.generate-btn:hover { opacity: .85; }
.generate-btn:disabled { opacity: .3; cursor: not-allowed; }
.send-btn { width: 36px; height: 36px; border-radius: var(--r); background: var(--kb); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity var(--t); }
.send-btn:hover { opacity: .85; }
.send-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ══════════════════════════════════════════════
   INGEST
══════════════════════════════════════════════ */
.ingest-mode-toggle { display: flex; background: var(--bg-e); border-radius: var(--r); padding: 2px; gap: 2px; flex-shrink: 0; }
.mode-btn { padding: 5px 13px; border-radius: 5px; font-size: 12.5px; font-weight: 500; color: var(--tx2); transition: background var(--t), color var(--t); }
.mode-btn:hover { color: var(--tx); }
.mode-btn.active { background: var(--bg-s); color: var(--tx); box-shadow: var(--sh); }

.ingest-provider-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx2); padding: 4px 11px; border-radius: 20px; border: 1px solid var(--bd2); background: var(--bg-e); cursor: pointer; transition: all var(--t); flex-shrink: 0; }
.ingest-provider-badge:hover { border-color: var(--bd3); color: var(--tx); }
.ipb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--int); flex-shrink: 0; }
.ingest-word-count { font-size: 11.5px; color: var(--tx3); font-family: var(--mono); }

.ingest-mode { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 14px 18px; gap: 10px; overflow: hidden; }

.chat-window { flex: 1; min-height: 0; overflow-y: auto; border-radius: var(--rm); background: var(--bg-s); border: 1px solid var(--bd); padding: 16px; scroll-behavior: smooth; }
.chat-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center; }
.chat-empty-icon { width: 52px; height: 52px; border-radius: var(--rl); background: color-mix(in srgb, var(--kb) 12%, transparent); border: 1px solid color-mix(in srgb, var(--kb) 30%, transparent); display: flex; align-items: center; justify-content: center; color: var(--kb); margin-bottom: 4px; }
.chat-empty-title { font-family: var(--serif); font-style: italic; font-size: 19px; font-weight: 400; color: var(--tx); letter-spacing: -0.01em; }
.chat-empty-body { font-size: 13px; color: var(--tx2); max-width: 340px; line-height: 1.65; }
.chat-message { display: flex; gap: 9px; margin-bottom: 14px; }
.chat-message.user { flex-direction: row-reverse; }
.chat-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.chat-message.user .chat-avatar { background: var(--bg-e); color: var(--tx2); }
.chat-message.assistant .chat-avatar { background: var(--ink); color: #fff; }
.chat-bubble { max-width: 78%; padding: 9px 13px; border-radius: var(--rm); font-size: 13px; line-height: 1.7; }
.chat-message.user .chat-bubble { background: var(--bg-e); border: 1px solid var(--bd2); border-radius: var(--rm) 4px var(--rm) var(--rm); }
.chat-message.assistant .chat-bubble { background: var(--bg-s); border: 1px solid var(--bd); border-radius: 4px var(--rm) var(--rm) var(--rm); }
.chat-bubble p { margin-bottom: .5em; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble code { font-family: var(--mono); font-size: 12px; background: var(--bg-e); padding: 1px 5px; border-radius: 3px; }
.chat-thinking { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
.chat-thinking span { width: 5px; height: 5px; border-radius: 50%; background: var(--tx3); animation: blink 1.2s ease-in-out infinite; }
.chat-thinking span:nth-child(2) { animation-delay: .2s; }
.chat-thinking span:nth-child(3) { animation-delay: .4s; }
.chat-input-row { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.chat-input { flex: 1; background: var(--bg-i); border: 1px solid var(--bd2); border-radius: var(--rm); padding: 9px 13px; resize: none; outline: none; line-height: 1.5; max-height: 160px; overflow-y: auto; transition: border-color var(--t); }
.chat-input:focus { border-color: var(--bd3); }
.chat-actions { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }

.paste-area-wrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.paste-input { width: 100%; height: 100%; background: var(--bg-i); border: 1px solid var(--bd2); border-radius: var(--rm); padding: 14px 16px; resize: none; outline: none; line-height: 1.75; transition: border-color var(--t); overflow-y: auto; }
.paste-input:focus { border-color: var(--bd3); }
.paste-stats { position: absolute; bottom: 10px; right: 14px; font-size: 11px; color: var(--tx3); font-family: var(--mono); pointer-events: none; }
.paste-actions { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }

/* Upload */
.upload-drop-zone { flex: 1; border: 2px dashed var(--bd2); border-radius: var(--rm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px; text-align: center; transition: border-color var(--t), background var(--t); }
.upload-drop-zone.drag-over { border-color: var(--int); background: rgba(63,149,121,.06); }
.upload-drop-icon { color: var(--tx3); display: flex; align-items: center; justify-content: center; }
.upload-drop-title { font-size: 14px; font-weight: 600; color: var(--tx); }
.upload-drop-body { font-size: 12.5px; color: var(--tx2); }
.upload-preview { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.upload-preview-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.upload-progress { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: var(--bg-e); border-radius: var(--r); }
.upload-progress-spinner { width: 20px; height: 20px; border: 2px solid var(--bd2); border-top-color: var(--int); border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; margin-top: 2px; }
.upload-step { font-size: 12px; color: var(--tx3); padding: 2px 0; }
.upload-step.active { color: var(--tx); font-weight: 500; }
.upload-step.done { color: var(--int); }

/* ══════════════════════════════════════════════
   PROCESSING OVERLAY
══════════════════════════════════════════════ */
.proc-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.80); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; }
.proc-card { background: var(--bg-s); border: 1px solid var(--bd2); border-radius: var(--rl); padding: 28px; width: 420px; max-width: calc(100vw - 32px); box-shadow: var(--sh2); display: flex; flex-direction: column; gap: 20px; }
[data-theme="dark"] .proc-card {
  background: linear-gradient(145deg, #13102a 0%, #0f1520 100%);
  border: 1px solid rgba(122,95,196,0.2);
  box-shadow: 0 20px 60px rgba(0,0,0,.8), 0 0 0 1px rgba(122,95,196,0.1);
}
.proc-header { display: flex; align-items: center; gap: 14px; }
.proc-logo-wrap { width: 40px; height: 40px; border-radius: var(--rm); background: var(--bg-e); border: 1px solid var(--bd2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.proc-title { font-size: 16px; font-weight: 700; color: var(--tx); letter-spacing: -0.02em; }
.proc-subtitle { font-size: 12px; color: var(--tx2); margin-top: 2px; min-height: 16px; }
.proc-angles { display: flex; flex-direction: column; gap: 10px; }
.proc-angle { display: flex; align-items: center; gap: 10px; }
.proc-angle-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.proc-angle-info { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.proc-angle-name { font-size: 12px; font-weight: 600; color: var(--tx); }
.proc-bar-track { height: 3px; background: var(--bg-e); border-radius: 3px; overflow: hidden; }
.proc-bar { height: 100%; width: 0%; border-radius: 3px; transition: width .6s cubic-bezier(.16,1,.3,1); }
.proc-bar-indeterminate { width: 40%; background: var(--pub); animation: proc-bar-slide 1.2s ease-in-out infinite; }
@keyframes proc-bar-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.proc-angle-status { font-size: 11px; color: var(--tx3); width: 64px; text-align: right; font-family: var(--mono); flex-shrink: 0; }
.proc-cancel-btn { align-self: center; font-size: 12.5px; color: var(--tx3); padding: 5px 18px; border: 1px solid var(--bd2); border-radius: var(--r); transition: background var(--t), color var(--t); }
.proc-cancel-btn:hover { background: var(--bg-h); color: var(--tx); }

/* ══════════════════════════════════════════════
   STUDIO
══════════════════════════════════════════════ */
.studio-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 40px; }
.studio-empty-icon { width: 56px; height: 56px; border-radius: var(--rl); background: color-mix(in srgb, var(--kb) 12%, transparent); border: 1px solid color-mix(in srgb, var(--kb) 30%, transparent); display: flex; align-items: center; justify-content: center; color: var(--kb); }
.studio-empty-title { font-family: var(--serif); font-style: italic; font-size: 20px; font-weight: 400; color: var(--tx); letter-spacing: -0.01em; }
.studio-empty-body { font-size: 13px; color: var(--tx2); max-width: 320px; line-height: 1.65; }
.save-progress { padding: 10px 16px; background: var(--bg-e); border-bottom: 1px solid var(--bd); font-size: 12px; color: var(--tx2); display: flex; flex-direction: column; gap: 4px; }

.studio-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.studio-split { display: flex; flex: 1; overflow: hidden; min-height: 0; }

/* Left angle nav */
.angle-nav {
  width: 180px; flex-shrink: 0;
  background: var(--bg-s); border-right: 1px solid var(--bd);
  display: flex; flex-direction: column;
  padding: 12px 12px; overflow-y: auto; gap: 3px;
}
.lib-cat-col  { width: 150px; }
.lib-list-col { width: 280px; }
.lib-split .angle-panels { display: none; }
#tab-library.lib-reading .angle-panels { display: block; }
.angle-nav-section {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx3);
  padding: 16px 10px 6px; pointer-events: none; flex-shrink: 0;
}
.angle-nav-section:first-child { padding-top: 4px; }
.angle-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r);
  font-size: 13.5px; font-weight: 400; color: var(--tx2);
  transition: color var(--t);
  width: 100%; text-align: left; flex-shrink: 0;
}
.angle-nav-item::after {
  content: '›'; margin-left: auto; font-weight: 700; font-size: 13px; line-height: 1;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 150ms ease, transform 150ms ease;
}
.angle-nav-item:hover::after, .angle-nav-item.active::after { opacity: .6; transform: translateX(0); }
.angle-nav-item.active::after { opacity: 1; }
.angle-nav-item:hover  { color: var(--tx); }
.angle-nav-item.active { color: var(--kb); font-weight: 600; }
.angle-nav-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; opacity: .65; }
.angle-nav-item.active .angle-nav-dot { opacity: 1; }
.angle-nav-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Source item — same row style as angles, just bolder + a bottom rule to mark it as the boundary before AI output */
.angle-nav-item.source-item {
  font-weight: 700; color: var(--tx);
  margin-bottom: 7px; position: relative;
}
.angle-nav-item.source-item::before {
  content: ''; position: absolute; left: 9px; right: 9px; bottom: -4px;
  height: 1px; background: var(--bd2);
}
.angle-nav-time { font-size: 10px; color: var(--tx3); font-family: var(--mono); flex-shrink: 0; }

/* Mini reading summary */
.angle-nav-reading { margin-top: auto; border-top: 1px solid var(--bd); padding-top: 6px; display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.angle-nav-read-row { display: flex; justify-content: space-between; align-items: center; padding: 0 9px; }
.angle-nav-read-label { font-size: 10px; color: var(--tx3); }
.angle-nav-read-val { font-size: 11px; font-family: var(--mono); color: var(--tx2); font-weight: 600; }
.anav-bar-wrap { height: 3px; background: var(--bg-e); border-radius: 2px; margin: 0 9px; overflow: hidden; }
.anav-bar-fill { height: 100%; border-radius: 2px; background: var(--int); transition: width .5s ease; }

/* Mobile select */
.angle-mobile-select { display: none; }

/* Angle content panels */
.angle-panels { flex: 1; overflow: hidden; position: relative; }
.angle-panel { display: none; flex-direction: column; height: 100%; padding: 12px 18px 14px; gap: 9px; overflow-y: auto; }
.angle-panel.active { display: flex; }
.angle-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-shrink: 0; padding-bottom: 10px; border-bottom: 1px solid var(--bd); }
.angle-panel-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.angle-label { font-family: var(--serif); font-style: italic; font-size: 20px; font-weight: 400; letter-spacing: -0.01em; color: var(--tx); line-height: 1.2; }
.angle-desc { font-size: 12px; color: var(--tx3); letter-spacing: -0.01em; }
.angle-panel-actions { display: flex; gap: 5px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; padding-top: 3px; }
.angle-title-row { flex-shrink: 0; }
.angle-title-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--bd2); padding: 6px 0; font-family: var(--serif); font-size: 19px; font-weight: 400; color: var(--tx); outline: none; transition: border-color var(--t); letter-spacing: -0.005em; }
.angle-title-input:focus { border-bottom-color: var(--bd3); }
.angle-title-input::placeholder { color: var(--tx3); font-weight: 400; }
.angle-body { flex: 1; min-height: 0; background: var(--bg-i); border: 1px solid var(--bd2); border-radius: var(--rm); padding: 14px 16px; resize: none; outline: none; font-size: 13px; line-height: 1.8; font-family: var(--mono); transition: border-color var(--t); overflow-y: auto; }
.angle-body:focus { border-color: var(--bd3); }

/* Reading progress */
.reading-progress-bar-wrap { flex-shrink: 0; height: 20px; display: flex; align-items: center; gap: 8px; }
.reading-progress-bar { flex: 1; height: 4px; background: var(--bg-e); border-radius: 2px; overflow: hidden; position: relative; }
.reading-progress-bar-fill { height: 100%; width: 0%; border-radius: 2px; background: var(--pub); transition: width .4s ease, background .3s ease; }
.reading-progress-pct { font-size: 10.5px; font-family: var(--mono); color: var(--tx3); flex-shrink: 0; width: 28px; text-align: right; }

/* Domain pills */
.domain-pills { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; align-items: center; padding: 10px 0 14px; margin-bottom: 6px; border-bottom: 1px solid var(--bd); }
.domain-pill { font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 18px; border: 1.5px solid var(--bd2); color: var(--tx2); background: var(--bg-e); cursor: pointer; transition: all var(--t); }
.domain-pill:hover { border-color: var(--bd3); color: var(--tx); transform: translateY(-1px); }
.domain-pill.active { background: var(--kb); color: #fff; border-color: var(--kb); }
.domain-pills-label { font-size: 11.5px; color: var(--tx3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.domain-pill-more { border-style: dashed; background: transparent; color: var(--tx3); font-weight: 700; }
.domain-pill-more:hover { color: var(--tx); border-color: var(--tx3); }

/* Original source badge */
.original-source-badge { font-size: 11px; color: var(--tx3); }
.fetch-article-status { font-size: 11px; color: var(--tx3); }

/* Download menu */
.download-menu { position: relative; }
.download-dropdown { position: absolute; top: calc(100% + 4px); right: 0; background: var(--bg-s); border: 1px solid var(--bd2); border-radius: var(--rm); box-shadow: var(--sh2); min-width: 160px; z-index: 100; overflow: hidden; display: flex; flex-direction: column; }
.download-dropdown button { padding: 9px 14px; font-size: 12.5px; color: var(--tx2); text-align: left; border-radius: 0; transition: background var(--t); }
.download-dropdown button:hover { background: var(--bg-h); color: var(--tx); }

/* Refine panel */
.refine-panel { flex-shrink: 0; background: var(--bg-e); border: 1px solid var(--bd2); border-radius: var(--rm); overflow: hidden; display: flex; flex-direction: column; }
.refine-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--bd); }
.refine-title { font-size: 12.5px; font-weight: 600; color: var(--tx); }
.refine-close { font-size: 14px; color: var(--tx3); transition: color var(--t); }
.refine-close:hover { color: var(--tx); }
.refine-win { max-height: 200px; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.refine-empty { font-size: 12px; color: var(--tx3); line-height: 1.55; }
.refine-msg { font-size: 12.5px; padding: 8px 12px; border-radius: var(--r); line-height: 1.6; }
.refine-msg.user { background: var(--bg-h); color: var(--tx2); }
.refine-msg.ai { background: var(--bg-s); border: 1px solid var(--bd); color: var(--tx); }
.refine-input-row { display: flex; gap: 7px; padding: 8px 10px; border-top: 1px solid var(--bd); align-items: flex-end; }
.refine-inp { flex: 1; background: var(--bg-s); border: 1px solid var(--bd2); border-radius: var(--r); padding: 7px 10px; resize: none; outline: none; font-size: 12.5px; line-height: 1.5; color: var(--tx); transition: border-color var(--t); }
.refine-inp:focus { border-color: var(--bd3); }
.refine-btn { font-size: 11.5px; color: var(--kb); border-color: var(--kb) !important; }

/* Markdown preview */
.md-preview { flex: 1; min-height: 0; overflow-y: auto; background: var(--bg-i); border: 1px solid var(--bd2); border-radius: var(--rm); padding: 16px 18px; line-height: 1.8; color: var(--tx); font-family: var(--sans); }
.md-preview .md-h1 { font-size: 20px; font-weight: 800; color: var(--tx); margin: 0 0 14px; line-height: 1.3; letter-spacing: -0.03em; }
.md-preview .md-h2 { font-size: 14px; font-weight: 700; color: var(--tx); margin: 20px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--bd2); letter-spacing: -0.01em; }
.md-preview .md-h3 { font-size: 13px; font-weight: 600; color: var(--tx); margin: 14px 0 6px; }
.md-preview .md-p  { font-size: 13px; color: var(--tx2); margin-bottom: 10px; line-height: 1.75; }
.md-preview .md-ul, .md-preview .md-ol { padding-left: 20px; margin-bottom: 10px; }
.md-preview .md-li { font-size: 13px; color: var(--tx2); margin-bottom: 4px; line-height: 1.65; }
.md-preview strong { color: var(--tx); font-weight: 700; }
.md-preview em { color: var(--tx2); font-style: italic; }
.md-preview .md-code { font-family: var(--mono); font-size: 12px; background: var(--bg-e); padding: 1px 5px; border-radius: 3px; color: var(--tx); border: 1px solid var(--bd2); }
.md-preview .md-pre { background: var(--bg-e); border: 1px solid var(--bd2); border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px; overflow-x: auto; }
.md-preview .md-pre code { font-family: var(--mono); font-size: 12px; color: var(--tx); background: none; padding: 0; border: none; }
.md-preview .md-bq { border-left: 3px solid var(--bd3); padding-left: 12px; color: var(--tx2); margin-bottom: 10px; font-style: italic; }
.md-preview .md-hr { border: none; border-top: 1px solid var(--bd2); margin: 16px 0; }
.md-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 13px; }
.md-td { padding: 7px 12px; border: 1px solid var(--bd2); color: var(--tx2); vertical-align: top; }
.md-table tr:first-child .md-td { background: var(--bg-e); color: var(--tx); font-weight: 600; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; }
.md-table tr:not(:first-child):nth-child(even) .md-td { background: var(--bg-s); }
.md-table tr:not(:first-child):hover .md-td { background: var(--bg-h); }
.cost-row-high .md-td { background: color-mix(in srgb, var(--pub) 14%, transparent) !important; }
.cost-row-mid  .md-td { background: color-mix(in srgb, var(--study) 10%, transparent) !important; }
.cost-row-high:hover .md-td { background: color-mix(in srgb, var(--pub) 22%, transparent) !important; }
.cost-row-mid:hover  .md-td { background: color-mix(in srgb, var(--study) 18%, transparent) !important; }

/* ══════════════════════════════════════════════
   RSS
══════════════════════════════════════════════ */
.rss-stats-strip { display: flex; align-items: flex-end; flex-shrink: 0; }
.rss-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0 10px; }
.rss-stat:first-child { padding-left: 0; }
.rss-stat-num { font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--tx); line-height: 1; letter-spacing: -0.03em; }
.rss-stat-ok   { color: var(--int) !important; }
.rss-stat-warn { color: var(--pub) !important; }
.rss-stat-label { font-size: 10px; color: var(--tx3); line-height: 1.2; }
.rss-stat-div { width: 1px; height: 24px; background: var(--bd2); flex-shrink: 0; align-self: center; }
.rss-stat-refreshed { align-self: center; margin-right: 12px; font-size: 11.5px; line-height: 1.2; color: var(--tx3); white-space: nowrap; }

.rss-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr; overflow: hidden; }
.rss-feeds-panel { border-right: 1px solid var(--bd); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--bg-s); }
.rss-articles-panel { overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; background: var(--bg); }
.rss-panel-title { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding-bottom: 4px; }
.add-feed-btn { font-size: 11px; font-weight: 600; color: var(--tx2); padding: 2px 8px; border-radius: var(--r); border: 1px solid var(--bd2); transition: background var(--t); }
.add-feed-btn:hover { background: var(--bg-h); color: var(--tx); }
.rss-panel-title-btns { display: flex; gap: 4px; }
.add-feed-btn.icon-only { padding: 2px 7px; line-height: 1; }
.feeds-list { display: flex; flex-direction: column; gap: 1px; }
.rss-group { margin-bottom: 8px; }
.rss-group-toggle { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: var(--r); cursor: pointer; transition: background var(--t); width: 100%; text-align: left; }
.rss-group-toggle:hover { background: var(--bg-h); }
.rss-group-chevron { font-size: 9px; color: var(--tx3); transition: transform var(--t); }
.rss-group.collapsed .rss-group-chevron { transform: rotate(-90deg); }
.rss-group-name { font-size: 10.5px; font-weight: 700; color: var(--tx2); letter-spacing: .04em; flex: 1; }
.rss-group-count { font-size: 9.5px; color: var(--tx3); font-family: var(--mono); }
.rss-group-body { display: flex; flex-direction: column; gap: 1px; padding-left: 4px; }
.rss-group.collapsed .rss-group-body { display: none; }
.feed-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r); cursor: pointer; transition: color var(--t); position: relative; }
.feed-item:hover { color: var(--tx); }
.feed-item.active .feed-name { color: var(--kb); font-weight: 600; }
.feed-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--int); flex-shrink: 0; }
.feed-dot.paywall { background: var(--pub); }
.feed-name { flex: 1; font-size: 12.5px; font-weight: 400; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-remove { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--tx3); border-radius: 3px; transition: background var(--t), color var(--t); }
.feed-remove:hover { background: rgba(176,106,63,.12); color: var(--pub); }
.feed-angles-btn { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--tx3); border-radius: 3px; flex-shrink: 0; margin-right: 2px; opacity: 0; transition: opacity var(--t), background var(--t), color var(--t); }
.feed-item:hover .feed-angles-btn, .feed-angles-btn.active { opacity: 1; }
.feed-angles-btn.active { color: var(--frameworks); }
.feed-angles-btn:hover { background: var(--bg-hl); color: var(--frameworks); }
.feed-angles-picker { position: absolute; top: 100%; right: 8px; z-index: 20; background: var(--bg-s); border: 1px solid var(--bd2); border-radius: var(--r); box-shadow: var(--sh2); padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 170px; cursor: default; }
.feed-angles-picker label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx); white-space: nowrap; }
.feed-angles-reset { margin-top: 4px; font-size: 11px; color: var(--tx3); text-align: left; padding: 2px 0; }
.feed-angles-reset:hover { color: var(--pub); }
.add-feed-form { display: flex; flex-direction: column; gap: 7px; padding: 8px; border: 1px solid var(--bd2); border-radius: var(--r); background: var(--bg-e); }
.add-feed-form-btns { display: flex; gap: 6px; justify-content: flex-end; }
.rss-note { font-size: 10.5px; color: var(--tx3); line-height: 1.5; }
.rss-refresh-menu { display: flex; }
.rss-date-dropdown label { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 12.5px; color: var(--tx2); cursor: pointer; transition: background var(--t); }
.rss-date-dropdown label:hover { background: var(--bg-h); color: var(--tx); }
.rss-date-dropdown input[type="radio"] { accent-color: var(--kb); margin: 0; }
.rss-refresh-menu .icon-btn:first-child { border-radius: var(--r) 0 0 var(--r); border-right: none; }
.rss-refresh-menu .icon-btn.icon-only { border-radius: 0 var(--r) var(--r) 0; padding: 6px 8px; }
.rss-feed-search-input { -webkit-appearance: none; appearance: none; font-size: 11.5px; padding: 6px 10px; margin: 8px 0; border-radius: var(--r); border: 1px solid var(--bd2); color: var(--tx); background: var(--bg-e); width: 100%; box-sizing: border-box; }
.rss-filter-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; margin-bottom: 8px; flex-shrink: 0; overflow-x: auto; overflow-y: hidden; height: 26px; }
.rss-date-filter { -webkit-appearance: none; appearance: none; font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: var(--r); border: 1px solid var(--bd2); color: var(--tx2); background: var(--bg-e); flex-shrink: 0; }
.rss-filter-chip { box-sizing: border-box; flex-shrink: 0; height: 26px; font-size: 11.5px; font-weight: 500; padding: 0 11px; border-radius: 16px; border: 1px solid var(--bd2); color: var(--tx2); background: var(--bg-e); cursor: pointer; transition: all var(--t); }
.rss-filter-chip:hover { border-color: var(--bd3); color: var(--tx); }
.rss-filter-chip.active { background: var(--kb); border-color: var(--kb); color: #fff; }
.rss-articles-list { display: flex; flex-direction: column; gap: 8px; }
.rss-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 60px 20px; font-size: 13px; color: var(--tx3); text-align: center; }
/* .rss-article-card, .rss-article-thumb, .rss-article-body and friends,
   .rss-read-link, .rss-generate-btn now live in css/rss.css */
.feed-health-icon { font-size: 10px; color: var(--pub); flex-shrink: 0; cursor: help; }
.lib-unread { border-left: 3px solid var(--int); }
.lib-unread-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--int); margin-right: 4px; vertical-align: middle; }
.rss-progress-list { padding: 8px 16px; background: var(--bg-e); border-bottom: 1px solid var(--bd); font-size: 12px; }
.rss-progress-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.rss-progress-name { width: 140px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rss-prog-bar-wrap { flex: 1; height: 3px; background: var(--bd); border-radius: 2px; overflow: hidden; }
.rss-prog-bar { height: 100%; border-radius: 2px; background: var(--int); transition: width .3s ease; }
.rss-prog-status { width: 60px; text-align: right; font-size: 10.5px; font-family: var(--mono); color: var(--tx3); flex-shrink: 0; }

/* ══════════════════════════════════════════════
   TRACKER
══════════════════════════════════════════════ */
.tracker-view-toggle { display: flex; background: var(--bg-e); border-radius: var(--r); padding: 2px; gap: 1px; }
.tvt-btn { font-size: 12px; font-weight: 500; color: var(--tx2); padding: 4px 10px; border-radius: 4px; transition: background var(--t), color var(--t); }
.tvt-btn.active { background: var(--bg-s); color: var(--tx); box-shadow: var(--sh); }
.tvt-btn:hover { color: var(--tx); }

.tracker-wrap { flex: 1; overflow-y: auto; padding: 0; }
.tracker-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; padding: 14px 16px; }
.tracker-board.list-mode { display: block; padding: 0; }
.tracker-empty { font-size: 13px; color: var(--tx3); padding: 40px; text-align: center; grid-column: 1/-1; }
.tracker-col { background: var(--bg-e); border-radius: var(--rm); overflow: hidden; display: flex; flex-direction: column; }
.tracker-col-header { padding: 10px 14px 8px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--bd); flex-shrink: 0; }
.tracker-col-title { font-size: 12px; font-weight: 700; color: var(--tx); letter-spacing: -0.01em; }
.tracker-col-count { font-size: 10.5px; color: var(--tx3); background: var(--bg-s); padding: 1px 7px; border-radius: 8px; font-family: var(--mono); }
.tracker-col-body { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 7px; min-height: 80px; }
.tracker-card { background: var(--bg-s); border: 1px solid var(--bd); border-radius: var(--r); padding: 10px 12px; cursor: grab; transition: box-shadow var(--t), border-color var(--t), transform var(--t); animation: fadeUp .25s ease; }
.tracker-card:hover { box-shadow: var(--sh); border-color: var(--bd2); transform: translateY(-1px); }
.tracker-card.dragging { opacity: .5; }
.lib-ref { font-family: var(--mono); font-size: 10px; color: var(--tx3); letter-spacing: .03em; }
.lib-reader-in > * {
  animation: fadeUp .6s ease both;
  animation-delay: calc(var(--print-i, 0) * 70ms);
}
.tracker-card-title { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--tx); line-height: 1.4; margin-bottom: 7px; letter-spacing: -0.01em; }
.tracker-card-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.tc-domain { font-size: 9.5px; padding: 2px 7px; border-radius: 10px; background: var(--bg-e); color: var(--tx3); }
.tc-platform { font-size: 9.5px; color: var(--int); font-weight: 500; margin-left: auto; }
.tc-date { font-size: 9.5px; font-family: var(--mono); color: var(--tx3); }
.tracker-btn { box-sizing: border-box; display: inline-flex; align-items: center; height: 26px; line-height: 1.2; font-size: 11px; padding: 0 9px; border: 1px solid var(--bd2); border-radius: 4px; color: var(--tx2); text-decoration: none; transition: all var(--t); margin-top: 8px; }
.lib-reader-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lib-reader-actions .tracker-btn { margin-top: 0; }
.lib-zoom-label { box-sizing: border-box; height: 26px; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--tx3); margin-left: auto; }
.lib-zoom-label input[type="range"] { width: 70px; }
.lib-toolbar-h { box-sizing: border-box; height: 26px; line-height: 1.2; padding: 0 10px !important; }
.tracker-btn:hover { background: var(--bg-h); color: var(--tx); }
.tracker-btn.danger:hover { background: rgba(176,106,63,.1); color: var(--pub); border-color: var(--pub); }
.tracker-btn.primary { background: var(--kb); border-color: var(--kb); color: #fff; }
.tracker-btn.primary:hover { background: var(--kb); opacity: .85; }

/* List view */
.tracker-list-wrap { width: 100%; min-width: 0; overflow-x: auto; }
.tracker-list-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; table-layout: auto; }
.tracker-list-table th { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--bd2); background: var(--bg-s); position: sticky; top: 0; z-index: 2; }
.tracker-list-row td { padding: 10px 16px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
.tracker-list-row:hover td { background: var(--bg-h); }
.tl-title { color: var(--tx); font-weight: 500; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; min-width: 200px; }
.tl-title:hover { color: var(--kb); text-decoration: underline; }
.tl-status { font-size: 10.5px; padding: 2px 8px; border-radius: 4px; font-weight: 600; display: inline-block; }
.tl-status-draft     { background: var(--bg-e); color: var(--tx2); border: 1px solid var(--bd2); }
.tl-status-ready     { background: rgba(63,111,181,.1); color: var(--study); }
.tl-status-published { background: rgba(63,149,121,.1); color: var(--int); }
.tl-domain { display: flex; gap: 4px; flex-wrap: wrap; }
.tl-date { font-family: var(--mono); font-size: 11px; color: var(--tx3); white-space: nowrap; } .tl-platform { font-size: 11.5px; color: var(--tx2); font-weight: 500; white-space: nowrap; }

/* ══════════════════════════════════════════════
   REPORT
══════════════════════════════════════════════ */
.report-layout { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.report-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 40px; }
.report-empty-icon {
  width: 64px; height: 64px; border-radius: var(--rl); margin-bottom: 4px;
  background: color-mix(in srgb, var(--kb) 12%, transparent); border: 1px solid color-mix(in srgb, var(--kb) 30%, transparent);
  color: var(--kb); display: flex; align-items: center; justify-content: center;
}
.report-empty-title { font-size: 16px; font-weight: 700; color: var(--tx); letter-spacing: -0.02em; }
.report-empty-body { font-size: 13px; color: var(--tx2); max-width: 320px; line-height: 1.65; }
.report-section { background: var(--bg-s); border: 1px solid var(--bd); border-radius: var(--rm); padding: 14px 16px; }
.report-section-title { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); margin-bottom: 12px; }
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 520px; }
.table-scroll .md-td { white-space: nowrap; }
.report-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; perspective: 700px; }
.report-stat-card { background: var(--bg-e); border-radius: var(--r); padding: 10px 12px; transition: transform .18s ease, box-shadow .18s ease; }
.report-stat-card:hover { transform: rotateX(6deg) rotateY(-4deg) translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.12); }
@media (prefers-reduced-motion: reduce) { .report-stat-card:hover { transform: none; } }
.report-stat-card.accent { border: 1px solid var(--bd2); }
.report-stat-num { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--tx); letter-spacing: -0.03em; line-height: 1; }
.report-stat-label { font-size: 10.5px; color: var(--tx3); margin-top: 3px; }
.report-stat-sub { font-size: 10px; color: var(--tx3); margin-top: 1px; }

/* Activity calendar */
.cal-day-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.cal-day-label { font-size: 9.5px; color: var(--tx3); text-align: center; font-weight: 500; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-cell { height: 18px; border-radius: 3px; cursor: default; transition: transform var(--t); }
.cal-cell:hover { transform: scale(1.15); }

/* ══════════════════════════════════════════════
   HELP
══════════════════════════════════════════════ */
.help-layout { flex: 1; display: grid; grid-template-columns: 180px 1fr; overflow: hidden; min-height: 0; }
.help-nav { border-right: 1px solid var(--bd); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 1px; background: var(--bg-s); }
.help-search {
  width: 100%; flex: none;
  margin-bottom: 6px; font-size: 12px;
  padding: 5px 9px; border-radius: var(--r);
  border: 1px solid var(--bd2); background: var(--bg-e);
  color: var(--tx); outline: none;
  transition: border-color var(--t), background var(--t);
  font-family: var(--sans);
}
.help-search:focus { border-color: var(--bd3); background: var(--bg-s); }
.help-search::placeholder { color: var(--tx3); font-size: 11.5px; }
.help-nav-btn { text-align: left; padding: 7px 10px; border-radius: var(--r); font-size: 12.5px; color: var(--tx2); transition: color var(--t); width: 100%; font-weight: 400; }
.help-nav-btn:hover { color: var(--tx); }
.help-nav-btn.active { color: var(--kb); font-weight: 600; }
.help-content { overflow-y: auto; padding: 20px 24px; }
.help-content h2 { font-size: 15px; font-weight: 700; color: var(--tx); margin: 20px 0 8px; letter-spacing: -0.01em; }
.help-content h2:first-child { margin-top: 0; }
.help-content p  { font-size: 13px; color: var(--tx2); line-height: 1.7; margin-bottom: 10px; }
.help-content ul, .help-content ol { padding-left: 20px; margin-bottom: 10px; }
.help-content li { font-size: 13px; color: var(--tx2); margin-bottom: 4px; line-height: 1.6; }
.help-content code { font-family: var(--mono); font-size: 12px; background: var(--bg-e); padding: 1px 5px; border-radius: 3px; color: var(--tx); }
.help-content pre.help-tree { font-family: var(--mono); font-size: 12px; background: var(--bg-e); border: 1px solid var(--bd2); border-radius: var(--r); padding: 12px 14px; line-height: 1.7; color: var(--tx2); overflow-x: auto; margin-bottom: 12px; }
.help-content a { color: var(--study); }
.help-content dl.help-faq dt { font-size: 13px; font-weight: 600; color: var(--tx); margin: 14px 0 4px; }
.help-content dl.help-faq dd { font-size: 13px; color: var(--tx2); line-height: 1.65; padding-left: 12px; }
.help-search-result { padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--bd); cursor: pointer; transition: background var(--t); margin-bottom: 8px; }
.help-search-result:hover { background: var(--bg-h); border-color: var(--bd2); }
.hsr-key { font-size: 12px; font-weight: 600; color: var(--tx); margin-bottom: 3px; }
.hsr-snip { font-size: 12px; color: var(--tx2); line-height: 1.55; }

/* ══════════════════════════════════════════════
   SETTINGS
══════════════════════════════════════════════ */
.keys-layout { flex: 1; overflow-y: auto; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.keys-card { background: var(--bg-s); border: 1px solid var(--bd); border-radius: var(--rl); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.keys-card-header { display: flex; align-items: flex-start; gap: 12px; }
.keys-card-icon { width: 34px; height: 34px; border-radius: var(--rm); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.keys-card-title { font-size: 14px; font-weight: 700; color: var(--tx); letter-spacing: -0.01em; }
.keys-card-sub { font-size: 12px; color: var(--tx2); margin-top: 2px; }
.keys-status { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tx3); }
.keys-status.ok .status-dot { background: var(--int); }
.keys-status.ok .status-text { color: var(--int); }
.keys-status.checking .status-dot { background: #f0c060; animation: pulse-warn 1s ease-in-out infinite; }
.keys-status.checking .status-text { color: #92600a; }
.keys-status.err .status-dot { background: #c0392b; }
.keys-status.err .status-text { color: #c0392b; }
.status-text { font-size: 11.5px; color: var(--tx3); }
.keys-field-group { display: flex; flex-direction: column; gap: 6px; }
.keys-field-header { display: flex; align-items: center; justify-content: space-between; }
.keys-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tx3); }
.keys-input-row { display: flex; gap: 8px; }
.keys-actions { display: flex; gap: 8px; }
.keys-note { font-size: 12px; color: var(--tx3); line-height: 1.55; }
.keys-note code { font-family: var(--mono); font-size: 11px; background: var(--bg-e); padding: 1px 5px; border-radius: 3px; }
.provider-fields { display: flex; flex-direction: column; gap: 12px; }
.drive-setup-steps { border-top: 1px solid var(--bd); padding-top: 12px; }
.setup-step-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tx3); margin-bottom: 8px; }
.setup-steps-list { padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.setup-steps-list li { font-size: 12px; color: var(--tx2); line-height: 1.5; }
.setup-steps-list code { font-family: var(--mono); font-size: 11px; background: var(--bg-e); padding: 1px 4px; border-radius: 3px; }
.export-sections { display: none; flex-direction: column; gap: 16px; padding-top: 16px; }
.keys-card.expanded .export-sections { display: flex; }
.export-section { border-top: 1px solid var(--bd); padding-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.export-section-title { font-size: 12.5px; font-weight: 600; color: var(--tx); display: flex; align-items: center; gap: 8px; }
.about-card { border-style: dashed; background: transparent; }
.about-logo { display: flex; align-items: center; gap: 12px; }
.about-name { font-family: var(--serif); font-size: 16px; font-style: italic; color: var(--tx); letter-spacing: -0.02em; }
.about-version { font-size: 11px; color: var(--tx3); font-family: var(--mono); margin-top: 2px; }
.about-desc { font-size: 13px; color: var(--tx2); line-height: 1.65; }
.about-meta { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--tx3); }

/* ══════════════════════════════════════════════
   MOBILE NAV
══════════════════════════════════════════════ */
.mobile-nav { display: none; }

/* ══════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════ */
@keyframes fadeUp   { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes blink    { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1.1)} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes toastIn  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ctx-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .app-shell { flex-direction: column; }
  .app-body { flex-direction: column; padding-bottom: 60px; }
  .sidebar { display: none; }
  .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: var(--bg-s); border-top: 1px solid var(--bd); z-index: 100; align-items: stretch; }
  .mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; color: var(--tx3); transition: color var(--t); }
  .mobile-nav-item.active { color: var(--kb); }
  .mobile-nav-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
  .mobile-nav-label { font-size: 10px; font-weight: 500; }
  .mobile-badge { position: absolute; top: 8px; right: calc(50% - 16px); background: var(--pub); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 8px; }
  .rss-layout { grid-template-columns: 1fr; }
  .rss-feeds-panel { border-right: none; border-bottom: 1px solid var(--bd); max-height: 180px; }
  /* Mobile is browse/add-feed/read only — no AI calls, since a dropped connection mid-generation
     loses work. Reading the original article (rss-read-link) is unaffected. */
  .rss-generate-btn, .rss-summarize-btn { display: none; }
  .studio-split { flex-direction: column; }
  .angle-nav { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--bd); padding: 4px 8px; }
  .angle-nav-section, .angle-nav-reading { display: none; }
  .angle-nav-item { flex-direction: column; padding: 5px 8px; flex-shrink: 0; font-size: 11px; }
  /* Angle panel header (title + Edit/Copy/Export/Save/Refine) was forced into one
     space-between row regardless of width, wrapping the title mid-word and crowding it
     against the buttons on phone-width screens — stack title above actions instead. */
  .angle-panel-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .angle-label { font-size: 16px; }
  .angle-panel-actions { justify-content: flex-start; }
  /* Library's article list is full cards (title+meta+tags), not icon pills — stack them
     full-width and scroll vertically within a capped strip instead of a truncated horizontal carousel.
     Drill-down flow like a phone app: categories → list → reader, one screen at a time, each with
     its own "back" step, instead of showing all three at once. */
  /* height:auto (not a fixed calc()) so the row can grow with the toolbar above it, but each
     screen inside still needs flex:1 + min-height:0 to get a bounded height to scroll within —
     without min-height:0 a flex child's "auto" height defaults to its content size and never
     triggers its own overflow-y:auto, which is why the category list couldn't scroll. */
  .lib-split { height: auto !important; flex: 1; min-height: 0; flex-direction: column; }
  .lib-cat-col { width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; border-right: none; border-bottom: 1px solid var(--bd); }
  /* Categories should be as tappable as the article list below them — full-width stacked
     rows, not a horizontal strip of tiny chips. */
  #tab-library .lib-cat-col { flex: 1; min-height: 0; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 12px; }
  #tab-library .lib-cat-col .angle-nav-item {
    flex-direction: row; align-items: center; width: 100%; box-sizing: border-box;
    padding: 12px 14px; margin-bottom: 8px; font-size: 14px;
    border: 1px solid var(--bd2); border-radius: var(--rm); background: var(--bg);
  }
  #tab-library .lib-cat-col .angle-nav-item.active { border-color: var(--kb); }
  .lib-list-col { display: none; width: 100%; flex: 1; min-height: 0; flex-direction: column; overflow-x: hidden; overflow-y: auto; max-height: none; border-bottom: 1px solid var(--bd); }
  .lib-split .angle-panels { flex: 1; min-height: 0; width: 100%; overflow-y: auto; }
  .report-domains-grid { grid-template-columns: 1fr !important; }
  /* Category selected: swap categories out for the article list. */
  #tab-library.lib-browsing .lib-cat-col { display: none; }
  #tab-library.lib-browsing .lib-list-col { display: flex; }
  .lib-list-back { display: block; margin-bottom: 10px; }
  /* Article open: get the category/list columns out of the way, and hide the surrounding
     chrome (Library toolbar, bottom tab bar) too — the back button in the reader is the
     only way out, so the reader gets the entire screen like a native reading view. */
  #tab-library.lib-reading .lib-cat-col, #tab-library.lib-reading .lib-list-col { display: none; }
  #tab-library.lib-reading .content-toolbar, #tab-library.lib-reading #library-vault-stat { display: none; }
  body.lib-reading .mobile-nav { display: none; }
  .lib-mobile-back { display: block; margin-bottom: 10px; }
  .library-page { padding: 16px 14px; }
  .library-page .md-h1 { font-size: 20px; line-height: 1.3; }
  .library-page, .library-page .md-body { font-size: 15px; line-height: 1.6; }
  .tracker-board { grid-template-columns: 1fr; }
  .report-stat-cards { grid-template-columns: repeat(2, 1fr); }
  .help-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .help-nav { border-right: none; border-bottom: 1px solid var(--bd); max-height: 200px; overflow-x: auto; flex-direction: row; flex-wrap: nowrap; padding: 6px; }
  .help-search { min-width: 140px; }
  .content-toolbar { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 6px; }
  .ingest-mode { padding: 10px 12px; }
  .keys-layout { padding: 10px 12px; }
  /* Topbar pills (Shortcuts/Vault/Provider/model badge) are fixed-height and nowrap by design —
     on a phone-width screen they don't fit, and the body's overflow:hidden was silently
     clipping whatever ran past the edge instead of letting it wrap or scroll. Scroll instead
     of wrap since the bar's height is fixed (var(--tbh)) and wrapping would break that. */
  .topbar-right { overflow-x: auto; scrollbar-width: none; max-width: 60vw; }
  .topbar-right::-webkit-scrollbar { display: none; }
  .topbar-brand-text { min-width: 0; overflow: hidden; }
}

/* ══════════════════════════════════════════════
   REPORT — TWO TAB TOGGLE
══════════════════════════════════════════════ */
.report-tab-toggle { display: flex; background: var(--bg-e); border-radius: var(--r); padding: 2px; gap: 2px; overflow-x: auto; max-width: 100%; }
.rtt-btn { font-size: 12px; font-weight: 500; color: var(--tx2); padding: 4px 12px; border-radius: 4px; transition: background var(--t), color var(--t); white-space: nowrap; }
.rtt-btn.active { background: var(--bg-s); color: var(--tx); box-shadow: var(--sh); }
.rtt-btn:hover  { color: var(--tx); }

/* ══════════════════════════════════════════════
   REPORT — SHARED COMPONENTS
══════════════════════════════════════════════ */
.report-vault-badge { padding: 7px 16px; font-size: 12px; border-bottom: 1px solid var(--bd); flex-shrink: 0; }
.report-vault-badge.ok   { background: rgba(63,149,121,.08); color: var(--int); }
.report-vault-badge.warn { background: rgba(176,106,63,.08); color: var(--pub); }
.report-vault-badge code { font-family: var(--mono); font-size: 11px; }

.report-summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap: 8px; }

.report-section { background: var(--bg-s); border: 1px solid var(--bd); border-radius: var(--rm); padding: 14px 16px; }
.report-section-title { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); margin-bottom: 12px; }

.report-angle-bars { display: flex; flex-direction: column; gap: 8px; }
.report-bar-row    { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.report-bar-label  { font-size: 12px; color: var(--tx2); width: 90px; flex-shrink: 0; }
.report-bar-track  { flex: 1; height: 5px; background: var(--bg-e); border-radius: 3px; overflow: hidden; }
.report-bar-fill   { height: 100%; border-radius: 3px; transition: width .6s ease; }
.report-bar-pct    { font-size: 11px; font-family: var(--mono); color: var(--tx3); width: 110px; text-align: right; flex-shrink: 0; white-space: nowrap; }
.report-mastery-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bg-e); }
.report-mastery-seg { height: 100%; transition: width .6s ease; }
.report-mastery-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 11.5px; color: var(--tx2); }
.report-mastery-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.report-insight-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--bg-e); border-radius: var(--r); }
.report-insight-card.positive { background: rgba(63,149,121,.08); border: 1px solid rgba(63,149,121,.2); }
.report-insight-card.warning  { background: rgba(176,106,63,.08); border: 1px solid rgba(176,106,63,.2); }
.report-insight-icon { font-size: 15px; flex-shrink: 0; }
.report-insight-text { font-size: 12.5px; color: var(--tx2); line-height: 1.6; }

.report-ai-box { font-size: 13px; color: var(--tx2); line-height: 1.75; }
.report-ai-box h2 { font-size: 13px; font-weight: 700; color: var(--tx); margin: 12px 0 6px; }
.report-ai-box p  { margin-bottom: 8px; }

/* Session log */
/* ── SESSION LOG — shared ── */
.report-session-log  { display: flex; flex-direction: column; }
.report-density-btn  { font-size: 11px; color: var(--tx3); padding: 3px 8px; border: 1px solid var(--bd2); border-radius: var(--r); background: var(--bg-s); cursor: pointer; transition: color var(--t), border-color var(--t); }
.report-density-btn:hover { color: var(--tx); border-color: var(--bd3); }
.report-expand-all-btn { font-size: 11px; color: var(--tx3); padding: 3px 8px; border: 1px solid var(--bd2); border-radius: var(--r); background: var(--bg-s); cursor: pointer; transition: color var(--t), border-color var(--t); }
.report-expand-all-btn:hover { color: var(--tx); border-color: var(--bd3); }

/* ── COMPACT MODE (default) ── */
.density-compact .report-session-card { background: none; border: none; border-bottom: 1px solid var(--bd); border-radius: 0; padding: 0; gap: 0; cursor: pointer; }
.density-compact .report-session-card:first-child { border-top: 1px solid var(--bd); }
.density-compact .report-session-card:hover { background: var(--bg-h); }
.density-compact .session-card-header { display: none; }
.density-compact .session-compact-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; min-height: 36px; }
.density-compact .session-detail { border-left: 2px solid var(--bd2); margin: 0 0 4px 20px; padding: 10px 12px 12px; }
.density-compact .session-detail-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }

/* ── CARD MODE ── */
.density-card .report-session-card { background: var(--bg-s); border: 1px solid var(--bd); border-radius: var(--rm); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; cursor: pointer; transition: border-color var(--t); }
.density-card .report-session-card:hover { border-color: var(--bd3); }
.density-card .session-compact-row { display: none; }
.density-card .session-card-header { display: flex; flex-direction: column; gap: 8px; }
.density-card .session-card-expand-hint { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--tx3); }
.density-card .session-detail { margin-top: 4px; }
.density-card .session-detail-chips { display: none; }

/* ── COMPACT ROW INTERNALS ── */
.session-tree-arrow { color: var(--tx3); flex-shrink: 0; transition: transform 150ms ease; }
.session-compact-title { font-size: 12.5px; font-weight: 500; color: var(--tx); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-compact-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sct-date  { font-size: 11px; color: var(--tx3); font-family: var(--mono); white-space: nowrap; }
.sct-avg   { font-size: 11px; font-family: var(--mono); font-weight: 600; }
.sct-time, .sct-cost { font-size: 11px; color: var(--tx3); font-family: var(--mono); white-space: nowrap; }

/* ── SESSION BADGES ── */
.session-badge { font-size: 10.5px; padding: 1px 7px; border-radius: 10px; font-family: var(--sans); font-weight: 600; }
.session-badge.good    { background: rgba(63,149,121,.12); color: var(--int); }
.session-badge.warn    { background: rgba(176,106,63,.12); color: var(--pub); }
.session-badge.neutral { background: var(--bg-e); color: var(--tx3); }
.session-obsidian-link { font-size: 10.5px; color: var(--tx3); text-decoration: none; white-space: nowrap; }
.session-obsidian-link:hover { color: var(--tx2); text-decoration: none; }

/* ── CARD MODE HEADER INTERNALS ── */
.report-session-top  { display: flex; flex-direction: column; gap: 4px; }
.report-session-title { font-size: 13px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; }
.report-session-meta  { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11.5px; color: var(--tx3); font-family: var(--mono); }
.session-overall { font-size: 11px; font-family: var(--sans); }
.session-overall-good     { color: var(--int); }
.session-overall-moderate { color: #b07a20; }
.session-overall-poor     { color: var(--pub); }
.session-overall-unread   { color: var(--tx3); }
.report-session-angles { display: flex; flex-wrap: wrap; gap: 4px; }
.report-angle-chip { font-size: 10.5px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--bd2); color: var(--tx3); background: var(--bg-e); }
.report-angle-chip.read { background: var(--bg-hl); color: var(--tx2); border-color: var(--bd2); }
.chip-time { opacity: .7; }

/* ── DETAIL TABLE ── */
.session-detail { overflow-x: auto; }
.session-detail-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 12px; }
.session-detail-table th { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--bd2); }
.session-detail-row td { padding: 7px 10px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
.session-detail-total td { padding: 7px 10px; }
.sd-angle { color: var(--tx2); }
.sd-bar   { width: 120px; }
.sd-bar-track { height: 4px; background: var(--bg-e); border-radius: 2px; }
.sd-bar-fill  { height: 100%; border-radius: 2px; transition: width .4s ease; }
.sd-pct  { font-family: var(--mono); font-size: 11px; color: var(--tx3); text-align: right; }
.sd-time { font-family: var(--mono); font-size: 11px; color: var(--tx3); white-space: nowrap; }
.sd-beh  { font-size: 11px; color: var(--tx2); white-space: nowrap; }


/* ══════════════════════════════════════════════
   PUBLISHING HABITS TAB
══════════════════════════════════════════════ */
.pub-week-chart { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding-top: 20px; }
.pub-week-col   { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.pub-week-count { font-size: 10px; font-family: var(--mono); color: var(--tx3); min-height: 14px; }
.pub-week-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; }
.pub-week-bar   { width: 100%; border-radius: 3px 3px 0 0; min-height: 0; transition: height .4s ease; }
.pub-week-label { font-size: 9.5px; font-family: var(--mono); color: var(--tx3); text-align: center; }

.pub-funnel { display: flex; align-items: center; gap: 12px; }
.pub-funnel-step { flex: 1; background: var(--bg-e); border-radius: var(--rm); padding: 14px; text-align: center; }
.pub-funnel-step.accent { background: rgba(63,149,121,.1); border: 1px solid rgba(63,149,121,.2); }
.pub-funnel-num   { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--tx); letter-spacing: -0.03em; line-height: 1; }
.pub-funnel-step.accent .pub-funnel-num { color: var(--int); }
.pub-funnel-label { font-size: 11px; color: var(--tx3); margin-top: 4px; }
.pub-funnel-arrow { font-size: 18px; color: var(--tx3); flex-shrink: 0; }

.pub-recent-list { display: flex; flex-direction: column; gap: 1px; }
.pub-recent-row  { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bd); }
.pub-recent-row:last-child { border-bottom: none; }
.pub-recent-title    { font-size: 12.5px; font-weight: 500; color: var(--tx); flex: 1; letter-spacing: -0.01em; }
.pub-recent-meta     { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pub-recent-platform { font-size: 11px; color: var(--int); font-weight: 500; }
.pub-recent-date     { font-size: 11px; font-family: var(--mono); color: var(--tx3); }
.pub-recent-link     { font-size: 12px; color: var(--study); }

/* ── RSS feed group label (fix) ── */
.feed-group { margin-bottom: 4px; }
.feed-group-label {
  display: flex; align-items: center; gap: 6px;
  width: 100%; text-align: left;
  padding: 8px 6px; border-radius: var(--r);
  transition: color var(--t); cursor: pointer;
}
.feed-group-label:hover { color: var(--tx); }
.feed-group-arrow { font-size: 9px; color: var(--tx3); flex-shrink: 0; }
.feed-group-name  { font-family: var(--mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; color: var(--tx3); letter-spacing: .08em; flex: 1; }
.feed-group-count { font-size: 10px; color: var(--tx3); white-space: nowrap; }
.feed-group-pie { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.feed-group-statuses { font-size: 10px; white-space: nowrap; }
.feed-group-items { display: flex; flex-direction: column; gap: 2px; padding-left: 4px; }
.feed-group-items.hidden { display: none; }
.group-status-ok  { color: var(--int); font-weight: 500; }
.group-status-err { color: var(--pub); font-weight: 500; }

/* ══════════════════════════════════════════════
   STUDIO TOOLBAR — Save All + .md, Studio only
══════════════════════════════════════════════ */
.studio-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 16px; flex-shrink: 0;
  background: var(--bg-s); border-bottom: 1px solid var(--bd);
  gap: 10px;
}
.studio-toolbar-left  { display: flex; align-items: center; gap: 10px; }
.studio-toolbar-right { display: flex; align-items: center; gap: 7px; }

/* Topbar is now clean — just logo + theme + shortcuts */
.topbar-right { gap: 6px; }

/* Sidebar setup button */
.sidebar-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sidebar-session-left { font-size: 10px; color: var(--tx3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.sidebar-setup-btn {
  font-size: 10.5px; color: var(--tx3);
  padding: 3px 7px; border-radius: var(--r);
  border: 1px solid var(--bd2);
  transition: background var(--t), color var(--t);
  flex-shrink: 0;
}
.sidebar-setup-btn:hover { background: var(--bg-h); color: var(--tx2); }

/* ══════════════════════════════════════════════
   FIRST-TIME WIZARD
══════════════════════════════════════════════ */
.wizard-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.wizard-modal {
  background: var(--bg-s); border: 1px solid var(--bd2);
  border-radius: var(--rl); box-shadow: var(--sh2);
  width: 100%; max-width: 560px; max-height: 90vh;
  overflow-y: auto; position: relative;
  display: flex; flex-direction: column; gap: 0;
  animation: fadeUp .2s ease;
}
.wizard-close {
  position: absolute; top: 14px; right: 14px;
  font-size: 16px; color: var(--tx3); z-index: 1;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: background var(--t), color var(--t);
}
.wizard-close:hover { background: var(--bg-h); color: var(--tx); }
.wizard-header {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--bd);
}
.wizard-brand { font-size: 16px; font-weight: 700; color: var(--tx); letter-spacing: -0.02em; }
.wizard-progress {
  display: flex; gap: 6px; padding: 14px 24px;
  border-bottom: 1px solid var(--bd); align-items: center;
}
.wiz-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-e); border: 1px solid var(--bd2);
  transition: background var(--t), border-color var(--t);
}
.wiz-dot.active { background: var(--kb); border-color: var(--kb); }
.wiz-dot.done   { background: var(--int); border-color: var(--int); }
[data-theme="dark"] .wiz-dot.active { background: linear-gradient(135deg, #7a5fc4, #5b4fa0); border-color: #7a5fc4; }
.wizard-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 18px; }

/* Step header */
.wiz-step-header { display: flex; flex-direction: column; gap: 4px; }
.wiz-step-num    { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); }
.wiz-step-title  { font-size: 18px; font-weight: 800; color: var(--tx); letter-spacing: -0.02em; }
.wiz-step-sub    { font-size: 13px; color: var(--tx2); line-height: 1.6; }
.wiz-optional    { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--int); background: rgba(63,149,121,.1); padding: 2px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }

/* Provider grid */
.wiz-provider-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.wiz-provider-card {
  padding: 12px 14px; border: 1px solid var(--bd2); border-radius: var(--rm);
  cursor: pointer; transition: border-color var(--t), background var(--t);
  display: flex; flex-direction: column; gap: 5px;
}
.wiz-provider-card:hover { border-color: var(--bd3); background: var(--bg-h); }
.wiz-provider-card.selected { border-color: var(--kb); border-width: 2px; background: var(--bg-hl); }
[data-theme="dark"] .wiz-provider-card.selected {
  border-color: #7a5fc4;
  background: rgba(122,95,196,0.12);
  box-shadow: 0 0 0 3px rgba(122,95,196,0.1);
}
.wiz-provider-top  { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.wiz-provider-name { font-size: 13px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; }
.wiz-provider-desc { font-size: 11.5px; color: var(--tx2); line-height: 1.4; }
.wiz-badge {
  font-size: 9.5px; font-weight: 600; padding: 2px 6px; border-radius: 8px;
  background: rgba(63,149,121,.12); color: var(--int); white-space: nowrap; flex-shrink: 0;
}

/* Key input area */
.wiz-key-input {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; background: var(--bg-e); border-radius: var(--rm);
  border: 1px solid var(--bd2);
}
.wiz-key-note { font-size: 12px; color: var(--tx3); line-height: 1.55; }
.wiz-key-note code { font-family: var(--mono); font-size: 11px; background: var(--bg-s); padding: 1px 5px; border-radius: 3px; }

/* Vault area */
.wiz-vault-area { display: flex; flex-direction: column; gap: 12px; }
.wiz-vault-preview { background: var(--bg-e); border-radius: var(--rm); padding: 14px 16px; border: 1px solid var(--bd2); }
.wiz-vault-preview-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); margin-bottom: 8px; }
.wiz-vault-tree { font-family: var(--mono); font-size: 11.5px; color: var(--tx2); line-height: 1.75; white-space: pre; overflow-x: auto; }
.wiz-vault-connected { font-size: 13px; color: var(--int); font-weight: 500; padding: 10px 14px; background: rgba(63,149,121,.08); border: 1px solid rgba(63,149,121,.2); border-radius: var(--r); }

/* Summary step */
.wiz-summary { display: flex; flex-direction: column; gap: 8px; }
.wiz-summary-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--rm); background: var(--bg-e); border: 1px solid var(--bd2); }
.wiz-summary-row.ok      { background: rgba(63,149,121,.07); border-color: rgba(63,149,121,.2); }
.wiz-summary-row.warn    { background: rgba(176,106,63,.07); border-color: rgba(176,106,63,.2); }
.wiz-summary-row.neutral { background: var(--bg-e); }
.wiz-summary-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.wiz-summary-row.ok   .wiz-summary-icon { color: var(--int); }
.wiz-summary-row.warn .wiz-summary-icon { color: var(--pub); }
.wiz-summary-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); margin-bottom: 2px; }
.wiz-summary-value { font-size: 13px; color: var(--tx); }

/* How-to */
.wiz-howto { background: var(--bg-e); border-radius: var(--rm); padding: 14px 16px; }
.wiz-howto-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); margin-bottom: 10px; }
.wiz-howto-steps { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.wiz-howto-steps li { font-size: 13px; color: var(--tx2); line-height: 1.55; }

/* Footer */
.wiz-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
.wiz-skip { font-size: 12.5px; color: var(--tx3); transition: color var(--t); }
.wiz-skip:hover { color: var(--tx2); }
.wiz-back { font-size: 12.5px; color: var(--tx3); transition: color var(--t); }
.wiz-back:hover { color: var(--tx2); }

@media (max-width: 560px) {
  .wiz-provider-grid { grid-template-columns: repeat(2, 1fr); }
  .wizard-body { padding: 16px 16px 20px; }
  .wizard-header { padding: 16px 16px 14px; }
}

/* ── Topbar icon-only badges — Context/Vault/Provider ──
   Icon/dot only — full detail moved to the native title tooltip so the topbar
   stays a row of quiet glyphs instead of a row of text pills. Shortcuts/theme
   buttons keep their own auto-sized .topbar-btn rule above, since they carry
   a visible label or need to stay square without clipping it. */
.topbar-pill, .topbar-vault-badge, .topbar-provider-badge {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: var(--tx3);
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  cursor: pointer; transition: color var(--t); flex-shrink: 0;
}
.topbar-pill:hover, .topbar-vault-badge:hover, .topbar-provider-badge:hover {
  color: var(--tx);
}
.topbar-vault-badge svg, .topbar-provider-badge svg, .topbar-pill svg { flex-shrink: 0; }
#topbar-vault-name, #ipb-text, #context-tag-text { display: none; }
.topbar-provider-badge .ipb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--int); flex-shrink: 0;
  box-shadow: 0 0 5px rgba(63,149,121,.5);
}
/* Shortcuts OS note */
.shortcuts-popover-os {
  font-size: 10px; color: var(--tx3); padding-top: 4px;
  border-top: 1px solid var(--bd); margin-top: 4px; text-align: center;
}

/* ── No model warning — icon-only amber dot, full text in the title tooltip ── */
.topbar-no-model {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  cursor: pointer; flex-shrink: 0;
}
.topbar-no-model:hover { opacity: .85; }
.topbar-no-model-text { display: none; }
.topbar-no-model-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d97706; flex-shrink: 0;
  animation: pulse-warn 2.5s ease-in-out infinite;
}
@keyframes pulse-warn {
  0%,100% { opacity: 1; }
  50%      { opacity: .7; }
}

/* ── Shortcuts popover section labels ── */
.shortcuts-section-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx3);
  padding: 2px 0; pointer-events: none;
}

/* ── Wizard model selector ── */
.wiz-model-selector { display: flex; flex-direction: column; gap: 12px; }
.wiz-model-header   { display: flex; flex-direction: column; gap: 4px; }
.wiz-model-title    { font-size: 14px; font-weight: 700; color: var(--int); }
.wiz-model-sub      { font-size: 12.5px; color: var(--tx2); }
.wiz-model-list     { display: flex; flex-direction: column; gap: 5px; }
.wiz-model-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r);
  border: 1px solid var(--bd2); cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.wiz-model-row:hover   { border-color: var(--bd3); background: var(--bg-h); }
.wiz-model-row.selected { border-color: var(--kb); border-width: 2px; background: var(--bg-hl); }
.wiz-model-row input[type="radio"] { flex-shrink: 0; accent-color: var(--kb); }
.wiz-model-info  { display: flex; align-items: center; gap: 8px; flex: 1; }
.wiz-model-name  { font-size: 13px; font-weight: 500; color: var(--tx); }
.wiz-model-rec   { font-size: 10px; font-weight: 700; color: var(--int); background: rgba(63,149,121,.1); padding: 2px 7px; border-radius: 10px; }

/* ══════════════════════════════════════════════
   WIZARD WELCOME SCREEN
══════════════════════════════════════════════ */
.wizard-welcome {
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 20px;
  animation: fadeUp .2s ease;
}
.ww-logo {
  display: flex; align-items: center; gap: 11px;
}
.ww-brand {
  font-family: var(--display); font-size: 22px; font-weight: 800;
  color: var(--tx); letter-spacing: -0.03em;
}
.ww-tagline {
  font-size: 15px; color: var(--tx2); letter-spacing: -0.01em;
  font-style: italic; margin-top: -8px;
}
.ww-connector { width: 100%; height: 16px; display: block; margin-bottom: -6px; }
.ww-pillars {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
}
.ww-pillar {
  background: var(--bg-e); border-radius: var(--rm);
  padding: 14px 14px; border: 1px solid var(--bd);
  display: flex; flex-direction: column; gap: 6px;
}
.ww-pillar-icon  { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--rm); margin: 0 auto 8px; }
.ww-pillar:nth-child(1) .ww-pillar-icon { color: var(--pub); background: rgba(176,106,63,.12); }
.ww-pillar:nth-child(2) .ww-pillar-icon { color: var(--kb);  background: rgba(122,95,196,.12); }
.ww-pillar:nth-child(3) .ww-pillar-icon { color: var(--int); background: rgba(63,149,121,.12); }
.ww-pillar-title { font-size: 13px; font-weight: 700; color: var(--tx); letter-spacing: -0.01em; }
.ww-pillar-body  { font-size: 12px; color: var(--tx2); line-height: 1.6; }
.ww-privacy {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--int); font-weight: 500;
  background: rgba(63,149,121,.08); border: 1px solid rgba(63,149,121,.2);
  border-radius: var(--r); padding: 10px 14px; line-height: 1.5;
}
.ww-privacy svg { flex-shrink: 0; margin-top: 1px; }
.ww-actions {
  display: flex; align-items: center; gap: 14px;
}
.ww-cta {
  padding: 10px 28px; font-size: 14px;
}
.ww-howto {
  font-size: 13px; color: var(--tx3);
  transition: color var(--t);
}
.ww-howto:hover { color: var(--tx2); }

@media (max-width: 560px) {
  .ww-pillars { grid-template-columns: 1fr; }
  .wizard-welcome { padding: 20px 16px 18px; }
}

/* ── Topbar brand with tagline ── */
.topbar-brand { align-items: center; }
.topbar-brand-text { display: flex; flex-direction: column; gap: 0px; }
.topbar-name { font-family: var(--serif); font-style: italic; font-size: 16px; font-weight: 400; color: var(--tx); letter-spacing: -0.01em; line-height: 1.1; }
.topbar-tagline { font-size: 9px; color: var(--tx3); letter-spacing: .06em; text-transform: uppercase; font-family: var(--mono); font-weight: 500; white-space: nowrap; }

@media (max-width: 768px) { .topbar-tagline { display: none; } }

/* ── Tracker status filter pills ── */
.tracker-review-due { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--bd); background: rgba(176,106,63,.06); flex-shrink: 0; }
.review-due-label { font-size: 11px; font-weight: 600; color: var(--pub); }
.review-due-list { display: flex; flex-wrap: wrap; gap: 6px; }
.review-due-chip { font-size: 11.5px; padding: 3px 11px; border-radius: 16px; border: 1px solid rgba(176,106,63,.3); color: var(--pub); background: var(--bg-s); cursor: pointer; transition: all var(--t); }
.review-due-chip:hover { background: rgba(176,106,63,.12); }
.tracker-filter-bar { display: flex; gap: 5px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--bd); background: var(--bg-s); flex-shrink: 0; }
.tracker-filter-label { font-size: 11px; color: var(--tx3); margin-right: 4px; }
.tracker-filter-pill { font-size: 11.5px; font-weight: 500; padding: 3px 12px; border-radius: 16px; border: 1px solid var(--bd2); color: var(--tx2); background: var(--bg-e); cursor: pointer; transition: all var(--t); }
.tracker-filter-pill:hover { border-color: var(--bd3); color: var(--tx); }
.tracker-filter-pill.active { background: var(--kb); border-color: var(--kb); color: #fff; }
.tracker-filter-pill.pill-draft.active     { background: var(--bg-e); color: var(--tx2); border-color: var(--bd3); }
.tracker-filter-pill.pill-ready.active    { background: rgba(63,111,181,.15); color: var(--study); border-color: var(--study); }
.tracker-filter-pill.pill-published.active { background: rgba(63,149,121,.15); color: var(--int); border-color: var(--int); }

.keys-section-label { font-size: 13px; font-weight: 700; color: var(--tx); padding: 8px 6px; border-radius: var(--r); transition: background var(--t); }
.keys-section-label:hover { background: var(--bg-h); }
.admin-panel { background: var(--bg-i); border: 1px solid var(--bd2); border-radius: var(--rm); padding: 16px; }
.admin-stats { display: flex; gap: 20px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--bd); }
.admin-stat { display: flex; flex-direction: column; }
.admin-stat-num { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--tx); letter-spacing: -0.02em; line-height: 1; }
.admin-stat-label { font-size: 10.5px; color: var(--tx3); margin-top: 3px; }
.admin-section-title { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tx3); margin-bottom: 8px; }
.admin-add-form { display: flex; flex-direction: column; gap: 8px; }
.admin-code-row { display: flex; gap: 8px; }
.admin-code-row .text-input { flex: 1; }
.admin-unlock-names { font-size: 12px; color: var(--tx3); margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.admin-code-hint { font-size: 11px; color: var(--tx3); margin-top: -2px; }
.admin-add-result { margin-top: 4px; }
.admin-code-reveal { background: rgba(63,149,121,.08); border: 1px solid rgba(63,149,121,.25); border-radius: var(--r); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.admin-code-reveal-label { font-size: 11.5px; color: var(--int); font-weight: 600; }
.admin-code-reveal-value { font-family: var(--mono); font-size: 12px; color: var(--tx); line-height: 1.6; }
.admin-user-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.admin-user-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-s); border: 1px solid var(--bd); border-radius: var(--r); }
.admin-user-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--tx); }
.admin-user-added { font-size: 11px; color: var(--tx3); font-family: var(--mono); }
.admin-user-delete { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--tx3); border-radius: var(--r); transition: all var(--t); flex-shrink: 0; }
.admin-user-delete:hover { background: rgba(209,91,91,.12); color: #d15b5b; }
.admin-empty { font-size: 12px; color: var(--tx3); font-style: italic; padding: 10px 0; }
.admin-save-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.admin-save-hint { font-size: 11px; color: var(--tx3); }
.admin-save-hint code { font-family: var(--mono); font-size: 10.5px; background: var(--bg); padding: 1px 4px; border-radius: 3px; border: 1px solid var(--bd2); }
.admin-howto { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bd); }
.admin-howto-title { font-size: 11px; font-weight: 700; color: var(--tx2); margin-bottom: 6px; }
.admin-howto-steps { padding-left: 18px; font-size: 12px; color: var(--tx2); line-height: 1.8; }

/* ── RSS FETCH PROGRESS BAR ── */
#rss-progress-bar { padding: 8px 0 12px; background: var(--bg); }
.rss-pb-track { height: 3px; background: var(--bg-e); border-radius: 2px; overflow: hidden; }
.rss-pb-fill  { height: 100%; background: var(--int); border-radius: 2px; transition: width 300ms ease; width: 0%; }
.rss-pb-label { font-size: 11px; color: var(--tx3); margin-top: 4px; font-family: var(--mono); display: flex; align-items: center; gap: 6px; }
.rss-pb-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--int); animation: rss-pb-pulse 1.1s ease-in-out infinite; }
#rss-progress-bar.rss-pb-done .rss-pb-label::before { animation: none; background: var(--tx3); opacity: 0.4; }
@keyframes rss-pb-pulse { 0%,100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
#rss-progress-bar.rss-pb-done { opacity: 0; transition: opacity 600ms ease; }

/* ══════════════════════════════════════════════
   URL INGEST
══════════════════════════════════════════════ */
.url-ingest-body { padding: 24px; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.url-ingest-card { background: var(--bg-s); border: 1px solid var(--bd2); border-radius: var(--rm); padding: 24px; display: flex; flex-direction: column; gap: 16px; }

.url-ingest-intro { }
.url-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.url-intro-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx3); }
.url-intro-item svg { flex-shrink: 0; color: var(--tx3); }

.url-input-row { display: flex; gap: 8px; align-items: center; }
.url-inp { flex: 1; font-size: 13px; }

.url-status { font-size: 12px; min-height: 16px; }
.url-status.loading { color: var(--tx3); }
.url-status.error   { color: #c0392b; }

.url-spinner { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--tx3); }
.url-spinner-dots { display: flex; gap: 4px; }
.url-spinner-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--kb); animation: url-pulse 1.2s ease-in-out infinite; }
.url-spinner-dots span:nth-child(2) { animation-delay: .2s; }
.url-spinner-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes url-pulse { 0%,80%,100% { opacity:.2; transform:scale(.8); } 40% { opacity:1; transform:scale(1); } }

.url-preview { background: var(--bg-e); border: 1px solid var(--bd2); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.url-preview-title { font-size: 14px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; line-height: 1.4; }
.url-preview-meta  { font-size: 11.5px; color: var(--tx3); font-family: var(--mono); }
.url-preview-body  { font-size: 12.5px; color: var(--tx2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.url-ingest-footer { display: flex; justify-content: flex-end; }

/* ── ORIGINAL ARTICLE / LIBRARY READER — formatted rendering ──
   Same .md-* markup as the Studio editor preview (see .md-preview above); these rules just
   re-skin it for a "reading page" context instead of an "editing" one. Scoped selectors here
   are declared after .md-preview's so they win at equal specificity. */
.original-article-body { font-size: 13.5px; line-height: 1.75; color: var(--tx2); }
.original-article-body .md-h1 { font-size: 18px; font-weight: 700; color: var(--tx); letter-spacing: -0.02em; margin: 0 0 16px; line-height: 1.3; }
.original-article-body .md-h2 { font-size: 15px; font-weight: 700; color: var(--tx); margin: 20px 0 8px; letter-spacing: -0.01em; }
.original-article-body .md-h3 { font-size: 13.5px; font-weight: 600; color: var(--tx2); margin: 16px 0 6px; }
.original-article-body .md-p  { margin: 0 0 12px; }
.original-article-body .md-li { margin: 4px 0 4px 16px; list-style: disc; }
.original-article-body .md-bq { border-left: 3px solid var(--kb); padding-left: 12px; color: var(--tx3); font-style: italic; margin: 12px 0; }
.original-comprehend { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--bd2); border-radius: 8px; background: var(--bg-s); font-size: 13px; line-height: 1.7; color: var(--tx2); }
.original-comprehend-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tx3); margin-bottom: 8px; }

.library-page {
  max-width: 860px; margin: 0 auto; padding: 48px 72px;
  background: var(--bg-s); border: 1px solid var(--bd2); border-radius: var(--rl);
  box-shadow: var(--sh2);
  font-family: var(--serif); font-size: 16px; line-height: 1.85; color: var(--tx2);
}
.library-page .md-h1 { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.25; margin-bottom: 6px; color: var(--tx); }
.library-page .md-h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; margin: 36px 0 12px; padding-top: 20px; border-top: 1px solid var(--bd2); color: var(--tx); }
.library-page .md-h3 { font-size: 15px; font-weight: 600; color: var(--tx); margin: 16px 0 6px; }
.library-page .md-p  { margin: 0 0 12px; color: var(--tx2); }
.library-page .md-li { margin: 4px 0 4px 16px; list-style: disc; color: var(--tx2); }
.library-page .md-bq { border-left: 3px solid var(--kb); padding-left: 12px; color: var(--tx3); font-style: italic; margin: 12px 0; }
.library-page .tracker-card-meta { font-family: var(--sans); }

/* ── URL INGEST error actions ── */
.url-error-msg     { font-size: 12px; color: #c0392b; margin-bottom: 8px; }
.url-error-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.url-open-link     { font-size: 12px; color: var(--kb); display: flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 600; }
.url-open-link:hover { text-decoration: underline; }
.url-error-hint    { font-size: 12px; color: var(--tx3); }
.url-paste-btn     { font-size: 12px; color: var(--kb); font-weight: 600; text-decoration: underline; cursor: pointer; }
.url-paste-btn:hover { opacity: .8; }

/* ── RSS card — thin/likely-paywalled snippet notice ── */
.rss-paywall-notice { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11px; color: var(--tx3); margin-top: 4px; }
.rss-paywall-fetch  { font-size: 11px; color: var(--kb); font-weight: 600; text-decoration: underline; cursor: pointer; }
.rss-paywall-fetch:hover { opacity: .8; }

/* ── VAULT FILE COUNTS (report) ── */
.vault-counts-summary { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.vault-count-hero { background: var(--bg-e); border: 1px solid var(--bd2); border-radius: var(--r); padding: 10px 16px; min-width: 100px; }
.vault-count-hero-num { font-size: 22px; font-weight: 700; color: var(--tx); font-family: var(--mono); line-height: 1.2; }
.vault-count-hero-label { font-size: 10.5px; color: var(--tx3); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.vault-counts-bars { display: flex; flex-direction: column; gap: 8px; }
.vault-count-row { display: flex; align-items: center; gap: 10px; }
.vault-count-label { font-size: 12px; color: var(--tx2); width: 90px; flex-shrink: 0; }
.vault-count-bar-wrap { flex: 1; height: 8px; background: var(--bg-e); border-radius: 4px; overflow: hidden; }
.vault-count-bar { height: 100%; border-radius: 4px; transition: width .4s ease; min-width: 2px; }
.vault-count-num { font-size: 12px; font-family: var(--mono); color: var(--tx3); width: 28px; text-align: right; flex-shrink: 0; }
.report-vault-loading { font-size: 12px; color: var(--tx3); font-style: italic; }
.report-vault-na { font-size: 12px; color: var(--tx3); }

/* ── AUTH CAPTCHA ── */
.auth-captcha-field { margin-top: 2px; }
.auth-captcha-row { display: flex; gap: 8px; align-items: center; }
.auth-captcha-inp { width: 90px !important; flex-shrink: 0; text-align: center; font-size: 15px; font-weight: 600; font-family: var(--mono); }
/* Remove browser default number input arrows */
.auth-captcha-inp::-webkit-inner-spin-button,
.auth-captcha-inp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.auth-captcha-inp[type=number] { -moz-appearance: textfield; }
.auth-captcha-refresh { width: 34px; height: 34px; border-radius: var(--r); background: var(--bg-e); border: 1px solid var(--bd2); color: var(--tx3); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color var(--t), background var(--t); flex-shrink: 0; }
.auth-captcha-refresh:hover { color: var(--tx); background: var(--bg-h); }
.auth-captcha-hint { font-size: 10.5px; color: var(--tx3); margin-top: 3px; }
.auth-input-error { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192,57,43,.12) !important; }

/* ── DARK MODE VAULT BADGE enhancement ── */
[data-theme="dark"] .topbar-vault-badge {
  background: rgba(63,149,121,.12);
  border-color: rgba(63,149,121,.22);
  color: #6dba9e;
}

/* ── DARK MODE — studio angle panels ── */
[data-theme="dark"] .angle-panel-meta .angle-label { font-weight: 700; letter-spacing: -0.01em; }
[data-theme="dark"] .tab-btn.active {
  background: linear-gradient(135deg, rgba(122,95,196,0.18) 0%, rgba(91,106,191,0.12) 100%);
  border-color: rgba(122,95,196,0.3);
  color: #c4aef8;
}

/* ── DARK MODE — report cards ── */
[data-theme="dark"] .report-stat-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .report-stat-card.accent {
  background: linear-gradient(135deg, rgba(122,95,196,0.15) 0%, rgba(91,106,191,0.08) 100%);
  border-color: rgba(122,95,196,0.2);
}

/* ── DARK MODE — chat window ── */
[data-theme="dark"] .chat-window {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.05);
}
[data-theme="dark"] .chat-bubble { 
  border-radius: 12px;
}
[data-theme="dark"] .chat-message.assistant .chat-bubble {
  background: rgba(122,95,196,0.1);
  border: 1px solid rgba(122,95,196,0.15);
}
[data-theme="dark"] .chat-message.user .chat-bubble {
  background: linear-gradient(135deg, rgba(122,95,196,0.2) 0%, rgba(91,106,191,0.15) 100%);
  border: 1px solid rgba(122,95,196,0.25);
}

/* ── DARK MODE — keys/settings cards ── */
[data-theme="dark"] .keys-card {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
}

/* ── DARK MODE — scrollbar colour matches brand ── */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(122,95,196,0.3); }
[data-theme="dark"] { scrollbar-color: rgba(122,95,196,0.3) transparent; }

/* ── FLASHCARD PANEL — one question at a time, quiz-site style ── */
.flash-ui { padding: 8px 0 16px; max-width: 640px; margin: 0 auto; }
.flash-progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.flash-counter { font-size: 12.5px; color: var(--tx3); letter-spacing: -0.01em; }
.flash-score { font-size: 12.5px; color: var(--tx3); }

.mcq-q-single { display: flex; flex-direction: column; gap: 16px; }
.flash-text { font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--tx); letter-spacing: -0.01em; }
.flash-typewriter::after {
  content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px;
  background: var(--kb); animation: flash-caret .8s step-end infinite;
}
.flash-typewriter.done::after { display: none; }
@keyframes flash-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flash-typewriter::after { display: none; } }

.mcq-opts { display: flex; flex-direction: column; gap: 8px; }
.mcq-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; background: var(--bg-s); border: 1.5px solid var(--bd2); border-radius: var(--rm);
  color: var(--tx2); font-size: 13.5px; cursor: pointer; box-sizing: border-box;
  transition: border-color var(--t), color var(--t);
}
.mcq-opt:hover:not(:has(input:disabled)) { border-color: var(--kb); color: var(--tx); }
.mcq-opt input[type=radio] { accent-color: var(--kb); cursor: pointer; flex-shrink: 0; }
.mcq-opt input[disabled] { cursor: default; }
.mcq-correct { border-color: #3fa66a !important; background: rgba(63,166,106,.12) !important; color: var(--tx) !important; }
.mcq-wrong { border-color: #d15b5b !important; background: rgba(209,91,91,.12) !important; color: var(--tx) !important; }
.mcq-review-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pub); background: rgba(176,106,63,.12); padding: 1px 6px; border-radius: 8px; vertical-align: middle; }
.mcq-next-hint { font-size: 12px; color: var(--tx3); }
.mcq-q-flip-correct, .mcq-q-flip-wrong { animation: mcq-flip-reveal .4s cubic-bezier(.2,.8,.3,1); }
@keyframes mcq-flip-reveal {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .mcq-q-flip-correct, .mcq-q-flip-wrong { animation: none; } }

.flash-done { text-align: center; padding: 40px 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.flash-done-title { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--tx); }
.flash-done-stats { display: flex; gap: 16px; }
.flash-stat-card { background: var(--bg-e); border: 1px solid var(--bd2); border-radius: var(--rm); padding: 14px 22px; }
.flash-stat-num { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--tx); }
.flash-stat-label { font-size: 11px; color: var(--tx3); margin-top: 4px; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .mcq-q-flip-correct, .mcq-q-flip-wrong { animation: none; } }
.rss-loading-cursor, .rss-loading-cursor * { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text x="0" y="14" font-size="14">📡</text><text x="14" y="30" font-size="14">⏳</text></svg>') 4 4, wait !important; }

/* Library reader → PDF: browser print, only the article body survives */
@media print {
  body.printing-library * { visibility: hidden; }
  body.printing-library #library-reader, body.printing-library #library-reader * { visibility: visible; }
  body.printing-library #library-reader { position: absolute; top: 0; left: 0; width: 100%; }
  /* Ancestors clip to viewport with fixed height + overflow — unlock them so print can paginate the full article.
     .lib-split/.angle-panels/.angle-panel are the current Library 3-column ancestors (.tracker-wrap predates that
     redesign and isn't in this chain anymore — left the print output clipped to the on-screen scroll box). */
  body.printing-library { overflow: visible !important; }
  body.printing-library .app-shell, body.printing-library .app-body, body.printing-library .tab-panel,
  body.printing-library .lib-split, body.printing-library .angle-panels, body.printing-library .angle-panel,
  body.printing-library #library-reader-wrap {
    position: static !important; height: auto !important; overflow: visible !important; display: block !important;
  }
}