/* ============================================================
   Lumen Reader — Design Tokens
   ============================================================ */
:root {
  --font-serif: "Newsreader", ui-serif, Georgia, serif;
  --font-sans: "Geist", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 4.25rem;

  --lh-tight: 1.18;
  --lh-snug: 1.32;
  --lh-normal: 1.45;
  --lh-relaxed: 1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.018em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.14em;

  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --bw: 1px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 220ms;

  --reader-measure: 66ch;
  --marketing-max: 1180px;
  --reader-sidebar: 260px;
  --reader-list: 380px;

  /* COLORS — LIGHT */
  --page: #FBF7F0;
  --surface: #FFFCF6;
  --surface-2: #F4EFE5;
  --hover: #F1ECDF;
  --pressed: #E9E3D2;
  --selected: #ECE5D2;
  --border: #E8E2D6;
  --border-strong: #D8D0BE;
  --ink: #1B1A17;
  --ink-2: #423E36;
  --ink-3: #6E695D;
  --ink-4: #948E80;
  --accent: #1E5F66;
  --accent-hover: #174E54;
  --accent-soft: #DFEDED;
  --accent-warm: #C9892B;
  --accent-warm-soft: #F4E6CB;
  --success: #2F6E47;
  --warning: #B07415;
  --danger: #A4442E;
  --danger-soft: #F4DAD2;
  --shadow-1: 0 1px 2px rgba(27,26,23,0.06), 0 2px 8px rgba(27,26,23,0.04);
  --shadow-2: 0 8px 24px rgba(27,26,23,0.08), 0 2px 6px rgba(27,26,23,0.05);
  --ring: 0 0 0 2px var(--page), 0 0 0 4px var(--accent);
  color-scheme: light;
}

[data-theme="dark"] {
  --page: #14130F;
  --surface: #1C1B17;
  --surface-2: #232220;
  --hover: #26241F;
  --pressed: #2E2B26;
  --selected: #2A2823;
  --border: #2A2823;
  --border-strong: #3C3A33;
  --ink: #F2EFE8;
  --ink-2: #C7C2B6;
  --ink-3: #8F8A7E;
  --ink-4: #6A6558;
  --accent: #5FA9AE;
  --accent-hover: #7BBEC3;
  --accent-soft: #1F3537;
  --accent-warm: #E0A04D;
  --accent-warm-soft: #3B2F1A;
  --success: #6FB585;
  --warning: #D9A45A;
  --danger: #D87864;
  --danger-soft: #3B231D;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
  --ring: 0 0 0 2px var(--page), 0 0 0 4px var(--accent);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #14130F; --surface: #1C1B17; --surface-2: #232220;
    --hover: #26241F; --pressed: #2E2B26; --selected: #2A2823;
    --border: #2A2823; --border-strong: #3C3A33;
    --ink: #F2EFE8; --ink-2: #C7C2B6; --ink-3: #8F8A7E; --ink-4: #6A6558;
    --accent: #5FA9AE; --accent-hover: #7BBEC3; --accent-soft: #1F3537;
    --accent-warm: #E0A04D; --accent-warm-soft: #3B2F1A;
    --success: #6FB585; --warning: #D9A45A; --danger: #D87864; --danger-soft: #3B231D;
    --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
    --shadow-2: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
    color-scheme: dark;
  }
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-soft); color: var(--ink); }

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */
.display, h1.display {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-5xl); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); font-variation-settings: "opsz" 72;
  color: var(--ink); text-wrap: balance; margin: 0;
}
h1, .h1 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-4xl); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); font-variation-settings: "opsz" 48;
  color: var(--ink); text-wrap: balance; margin: 0;
}
h2, .h2 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-3xl); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug); font-variation-settings: "opsz" 32;
  color: var(--ink); text-wrap: balance; margin: 0;
}
h3, .h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-2xl); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug); font-variation-settings: "opsz" 28;
  color: var(--ink); margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--fs-xl); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug); color: var(--ink); margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--fs-lg); line-height: var(--lh-snug);
  color: var(--ink); margin: 0;
}
p, .body {
  font-family: var(--font-sans); font-size: var(--fs-base);
  line-height: var(--lh-relaxed); color: var(--ink-2); margin: 0 0 1em;
}
.lede {
  font-family: var(--font-serif); font-size: var(--fs-xl);
  line-height: var(--lh-normal); color: var(--ink-2);
  font-variation-settings: "opsz" 22;
}
.eyebrow {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--ink-3);
}
.meta, .mono {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0; color: var(--ink-3); font-feature-settings: "tnum";
}
a {
  color: var(--accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; }
code {
  background: var(--surface-2); padding: 0.12em 0.4em;
  border-radius: var(--r-sm); border: 1px solid var(--border);
}
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-7) 0; }

.surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.muted { color: var(--ink-3); }
.warm { color: var(--accent-warm); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ============================================================
   APP SHELL
   ============================================================ */
html, body, #root { height: 100%; }
body { overflow: hidden; }

.shell { display: flex; flex-direction: column; height: 100vh; background: var(--page); }
.shell-body { flex: 1; min-height: 0; overflow: hidden; display: flex; }

.appbar {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--page) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  z-index: 6; flex-shrink: 0;
}
.appbar-left { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.appbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.appbar-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.appbar-brand .word {
  font-family: var(--font-serif); font-size: 19px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink);
}

.mode-tabs { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border); flex-shrink: 0; }
.mode-tab {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 5px 12px; border: 0; background: transparent; color: var(--ink-2);
  border-radius: 6px; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.mode-tab:hover { color: var(--ink); }
.mode-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

.capture-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 6px 8px 6px 11px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out);
}
.capture-btn:hover { background: var(--hover); }
.capture-btn.is-open { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.capture-btn kbd {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px; color: var(--ink-3);
}
.capture-btn.is-open kbd { background: var(--surface); border-color: transparent; color: var(--accent); }

/* ============================================================
   READER
   ============================================================ */
.reader {
  display: flex;
  flex: 1; min-height: 0; background: var(--page);
}
.reader.left-collapsed .sidebar { overflow: hidden; padding: 0; border-right: 0; min-width: 0; }
.reader.middle-collapsed .middle { overflow: hidden; min-width: 0; border-right: none; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  padding: 14px 10px 10px; gap: 10px;
  overflow-y: auto; background: var(--page);
  flex-shrink: 0; transition: width var(--t-base) var(--ease-in-out);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 14px; border-bottom: 1px solid var(--border);
}
.sidebar-brand .brand-name {
  font-family: var(--font-serif); font-size: 20px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink);
}
.sidebar-brand .brand-meta {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); font-feature-settings: 'tnum';
}
.sidebar-section { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 6px;
}
.eyebrow {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em;
}

.sidebar-row, .feed-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2);
  user-select: none; transition: background var(--t-fast) var(--ease-out);
}
.sidebar-row .label, .feed-row .label {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-row .count, .feed-row .count, .folder-head .count {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  font-feature-settings: 'tnum';
}
.sidebar-row:hover, .feed-row:hover, .folder-head-main:hover { background: var(--hover); }
.sidebar-row[data-active="true"] { background: var(--accent-soft); color: var(--accent); }
.sidebar-row[data-active="true"] svg { color: var(--accent); }
.feed-row.is-active { background: var(--selected); color: var(--ink); }
.folder-head-main.is-active { background: var(--selected); }
.folder-head-main.is-active .folder-name { color: var(--ink); }

.folder { display: flex; flex-direction: column; gap: 2px; }
.folder-head {
  display: flex; align-items: center; color: var(--ink-3); position: relative;
}
.folder-head-main {
  display: flex; align-items: center; gap: 6px; flex: 1;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.folder-menu-wrap { position: relative; flex-shrink: 0; padding-right: 4px; }
.folder-name {
  flex: 1; font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3);
}
.folder-feeds { display: flex; flex-direction: column; gap: 1px; padding-left: 8px; }
.folder-chevron { display: flex; align-items: center; flex-shrink: 0; cursor: pointer; }

/* Feed row with inline menu */
.feed-row-wrap {
  position: relative; display: flex; align-items: center;
}
.feed-row-wrap .feed-row { flex: 1; min-width: 0; }
.feed-menu-wrap { position: relative; flex-shrink: 0; padding-right: 4px; }

/* Drag-and-drop */
.folder-head-main { cursor: grab; }
.folder-head-main:active { cursor: grabbing; }
.feed-row-wrap[draggable="true"] { cursor: grab; }
.feed-row-wrap[draggable="true"]:active { cursor: grabbing; }
.feed-row-wrap[draggable="true"] .feed-row { cursor: grab; }
.feed-row-wrap.is-dragging { opacity: 0.35; }
.feed-row-wrap.drop-above { box-shadow: 0 -2px 0 0 var(--accent); border-radius: 0; }
.feed-row-wrap.drop-below { box-shadow: 0 2px 0 0 var(--accent); border-radius: 0; }
.folder.drop-above { box-shadow: 0 -2px 0 0 var(--accent); border-radius: 0; }
.folder.drop-below { box-shadow: 0 2px 0 0 var(--accent); border-radius: 0; }
.folder-head.drop-into .folder-head-main { background: var(--accent-soft); border-radius: 8px; }

/* Hover-revealed buttons */
.hover-reveal {
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-out);
}
.feed-row-wrap:hover .hover-reveal,
.folder-head:hover .hover-reveal,
.collection:hover .hover-reveal { opacity: 1; pointer-events: auto; }

/* Dropdown menu */
.feed-menu {
  position: absolute; right: 0; top: calc(100% + 2px); z-index: 50;
  min-width: 190px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
  padding: 4px; display: flex; flex-direction: column; gap: 1px;
}
.menu-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; font-family: var(--font-sans); font-size: 13px;
  color: var(--ink); background: transparent; border: 0;
  border-radius: 6px; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.menu-item:hover { background: var(--hover); }
.menu-item-danger { color: var(--danger); }
.menu-item-danger:hover { background: var(--danger-soft); color: var(--danger); }

.menu-confirm {
  padding: 8px 10px; display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-2);
}
.menu-confirm-title { font-weight: 500; color: var(--ink); }
.menu-confirm-btns { display: flex; gap: 6px; }
.menu-confirm-stack { display: flex; flex-direction: column; gap: 6px; }
.menu-confirm-option { display: flex; flex-direction: column; gap: 3px; }
.menu-confirm-note { font-size: 11px; color: var(--ink-3); padding-left: 2px; }
.menu-danger-btn.full, .menu-cancel-btn.full { width: 100%; text-align: left; }
.menu-danger-btn {
  padding: 4px 10px; font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: #FBF7F0; background: var(--danger); border: 0;
  border-radius: var(--r-sm); cursor: pointer;
  transition: opacity var(--t-fast);
}
.menu-danger-btn:hover { opacity: 0.85; }
.menu-cancel-btn {
  padding: 4px 10px; font-family: var(--font-sans); font-size: 12px;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.menu-cancel-btn:hover { background: var(--hover); }

.menu-chips {
  padding: 4px 6px; display: flex; flex-wrap: wrap; gap: 4px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.menu-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; font-family: var(--font-sans); font-size: 11px;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.menu-chip:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

/* Inline editing inputs */
.inline-input {
  flex: 1; font-family: var(--font-sans); font-size: 13px;
  padding: 4px 8px; border: 1px solid var(--accent);
  border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); outline: none; min-width: 0;
}
.inline-input:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
.folder-name-input {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 6px;
}
.inline-select {
  flex: 1; font-family: var(--font-sans); font-size: 13px;
  padding: 4px 6px; border: 1px solid var(--accent);
  border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); outline: none; min-width: 0;
}

/* Feed confirm row */
.feed-confirm {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; font-family: var(--font-sans); font-size: 12px; color: var(--ink-2);
}

/* Sidebar add buttons */
.sidebar-add-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin-top: 2px;
  font-family: var(--font-sans); font-size: 12px;
  color: var(--ink-3); background: transparent; border: 0;
  border-radius: 8px; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.sidebar-add-btn:hover { background: var(--hover); color: var(--ink); }
.sidebar-new-input { margin: 6px 10px; width: calc(100% - 20px); }

/* Sources section add-source button & dropdown */
.sources-add-wrap { position: relative; }
.sources-add-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--accent); cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.sources-add-btn:hover {
  background: color-mix(in oklab, var(--accent-soft) 55%, var(--accent) 45%);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
}

/* Col resize handles */
.col-resize-handle {
  width: 4px; flex-shrink: 0;
  cursor: col-resize; z-index: 10;
  background: transparent;
  transition: background var(--t-fast) var(--ease-out);
}
.col-resize-handle:hover { background: color-mix(in oklab, var(--accent) 28%, transparent); }

/* Collection CRUD */
.collection-menu-wrap {
  position: absolute; top: 8px; right: 8px; z-index: 2;
}
.collection-edit-form {
  display: flex; flex-direction: column; gap: 8px; padding: 4px 0;
}
.collection-add-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 200px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  background: transparent; color: var(--ink-3);
  font-family: var(--font-sans); font-size: 13px; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.collection-add-card:hover { background: var(--hover); color: var(--ink); border-color: var(--accent); }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.icon-btn {
  background: transparent; border: 0;
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn.small { width: 22px; height: 22px; }
.icon-btn.is-active { color: var(--accent); background: var(--accent-soft); }


/* ============================================================
   TOP BAR + MIDDLE COLUMN
   ============================================================ */
.middle {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden; background: var(--page);
  flex-shrink: 0; transition: width var(--t-base) var(--ease-in-out);
}
.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--page) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  position: sticky; top: 0; z-index: 5;
}
.topbar-menu { display: inline-flex; flex-shrink: 0; }
.topbar-refresh { flex-shrink: 0; margin-left: auto; }
.topbar-title {
  font-family: var(--font-serif); font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink); margin: 0;
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-row { display: flex; gap: 6px; }
.chip {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--ink-2); cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.chip:hover { background: var(--hover); }
.chip.on { background: var(--ink); color: var(--page); border-color: var(--ink); }

.search-wrap { position: relative; width: 100%; display: flex; align-items: center; }
.search-wrap svg { position: absolute; left: 11px; color: var(--ink-3); }
.search-wrap input {
  width: 100%; font-family: var(--font-sans); font-size: 13px;
  padding: 7px 12px 7px 34px; border: 1px solid var(--border-strong);
  background: var(--surface); border-radius: var(--r-md); color: var(--ink);
}
.search-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-wrap kbd {
  position: absolute; right: 10px; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 4px;
}

.list-search-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 7px; border-bottom: 1px solid var(--border);
  background: var(--page); flex-shrink: 0;
}
.list-search-bar .search-wrap { flex: 1; min-width: 0; }

/* ============================================================
   ARTICLE LIST
   ============================================================ */
.article-list { flex: 1; overflow-y: auto; padding: 6px 8px 24px; }
.article-row {
  position: relative; display: grid;
  grid-template-columns: 96px 1fr; gap: 14px;
  padding: 14px 16px; border-radius: var(--r-md); cursor: pointer;
  height: 124px; overflow: hidden;
  transition: background var(--t-fast) var(--ease-out);
  content-visibility: auto;
  contain-intrinsic-size: auto 124px;
}
.article-row + .article-row { border-top: 1px solid var(--border); border-radius: 0; }
.article-row:hover { background: var(--hover); }
.article-row.is-active { background: var(--selected); }
.article-row.is-read .row-title { color: var(--ink-3); font-weight: 400; }
.article-row.is-read .row-dek { color: var(--ink-4); }
.article-row.is-read .row-thumb { opacity: 0.55; }

.row-thumb {
  width: 96px; height: 96px; border-radius: 8px; border: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px;
  flex-shrink: 0;
}
.row-body { min-width: 0; display: flex; flex-direction: column; overflow: hidden; height: 101px; }

.unread-rail {
  position: absolute; left: 2px; top: 20px; bottom: 20px;
  width: 2px; border-radius: 1px; background: var(--accent-warm);
}
.row-meta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  margin-bottom: 6px; font-feature-settings: 'tnum';
  white-space: nowrap; overflow: hidden;
}
.row-meta .feed { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row-meta .time { margin-left: auto; flex-shrink: 0; }
.row-meta .dot-sep:last-of-type { display: none; }
.dot-sep { color: var(--ink-4); flex-shrink: 0; }
.row-title {
  font-family: var(--font-serif); font-size: 16px; font-weight: 500;
  line-height: 1.3; color: var(--ink); margin: 0;
  font-variation-settings: 'opsz' 20; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.row-dek {
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); line-height: 1.45;
  margin: 4px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.row-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; flex-shrink: 0; }
.row-foot .mins { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.save-btn {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-3); padding: 4px; border-radius: 4px;
  transition: color var(--t-fast), background var(--t-fast);
}
.save-btn:hover { color: var(--accent-warm); background: var(--hover); }
.save-btn.is-saved { color: var(--accent-warm); }
.save-btn.is-saved svg { fill: var(--accent-warm); }

/* ============================================================
   READER PANE
   ============================================================ */
.reader-pane { display: flex; flex-direction: column; background: var(--surface); overflow: hidden; flex: 1; min-width: 0; }
.reader-pane.empty-pane { background: var(--page); }
.reader-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  flex-shrink: 0;
}
.reader-toolbar .left, .reader-toolbar .right { display: flex; align-items: center; gap: 6px; }
.reader-current-source {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-2);
}
.reader-nav {
  display: flex; align-items: center; gap: 2px;
  border-left: 1px solid var(--border); margin-left: 2px; padding-left: 8px;
}
.reader-nav .icon-btn:disabled { opacity: 0.3; cursor: default; }
.reader-nav-count {
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-3);
  min-width: 44px; text-align: center; user-select: none;
}
.reader-scroll { flex: 1; overflow-y: auto; }
.reader-article-section { padding: 32px 48px 0; }
.reader-body { max-width: 680px; margin: 0 auto; padding-bottom: 48px; }
.article-divider {
  height: 1px; background: var(--border);
  max-width: 680px; margin: 0 auto;
}
.article-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
  margin-bottom: 18px; font-feature-settings: 'tnum';
}
.article-meta > * { white-space: nowrap; }
.article-meta .feed { color: var(--ink-2); font-weight: 500; }
.article-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 40px; line-height: 1.18; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 14px; font-variation-settings: 'opsz' 48; text-wrap: balance;
}
.article-title a {
  color: inherit; text-decoration: none;
}
.article-title a:hover {
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px; text-decoration-color: var(--border-strong);
}
.article-dek {
  font-family: var(--font-serif); font-size: 20px; line-height: 1.45;
  color: var(--ink-2); margin: 0 0 28px; font-variation-settings: 'opsz' 22;
}
.article-hero {
  height: 280px; border-radius: var(--r-lg); margin: 0 0 32px;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 16px; border: 1px solid var(--border);
}
.hero-caption { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.7); }
.hero-img-blocked {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.55); background: rgba(0,0,0,0.28);
  border-radius: var(--r-sm); padding: 3px 8px; cursor: pointer;
}
.hero-img-blocked:hover { color: rgba(255,255,255,0.8); background: rgba(0,0,0,0.45); }
.reading {
  font-family: var(--font-serif); font-size: 18px; line-height: 1.6;
  color: var(--ink); font-variation-settings: 'opsz' 18;
}
.reading p { margin: 0 0 1.1em; }
.article-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border);
}
.src-link { font-family: var(--font-sans); font-size: 13px; color: var(--accent); text-decoration: none; }
.src-link:hover { text-decoration: underline; color: var(--accent-hover); }

.reader-section-sep {
  display: flex; align-items: center; gap: 16px;
  margin: 0 48px; padding: 28px 0;
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-4);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.reader-section-sep::before,
.reader-section-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.reader-end-cap {
  padding: 32px 48px 48px; text-align: center;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-4);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 6px 12px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: background var(--t-fast) var(--ease-out);
}
.btn-primary { background: var(--accent); color: #FBF7F0; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--hover); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--hover); }
.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #FBF7F0; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ============================================================
   EMPTY STATES
   ============================================================ */
.empty {
  margin: auto; padding: 40px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.empty-title { font-family: var(--font-serif); font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.empty-body { font-family: var(--font-sans); font-size: 13px; color: var(--ink-3); }
.empty kbd {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 4px; color: var(--ink-2); margin: 0 2px;
}
.kbd-hint {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  margin-top: 20px; max-width: 360px;
}
.kbd-hint span {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-4);
}
.kbd-hint kbd {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px; color: var(--ink-3);
}
.empty-pane { display: flex; }

/* ============================================================
   NEW TAB
   ============================================================ */
.newtab { flex: 1; overflow-y: auto; padding: 56px 48px 96px; background: var(--page); }
.newtab-hero { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.greeting-row { margin-bottom: 14px; }
.greeting {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(40px, 5vw, 56px); line-height: 1.1; letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 56; color: var(--ink); margin: 0;
}
.greeting-sub {
  font-family: var(--font-sans); font-size: 14px; color: var(--ink-3);
  display: flex; gap: 10px; justify-content: center; align-items: center;
  margin: 10px 0 28px;
}
.greeting-sub .mono { font-family: var(--font-mono); color: var(--accent-warm); font-weight: 500; white-space: nowrap; }

.newtab-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 4px 6px 4px 14px;
  max-width: 560px; margin: 0 auto; box-shadow: var(--shadow-1);
}
.newtab-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.newtab-search > svg { color: var(--ink-3); flex-shrink: 0; }
.newtab-search input {
  flex: 1; font-family: var(--font-sans); font-size: 15px;
  border: 0; background: transparent; outline: none; padding: 10px 0; color: var(--ink);
}
.newtab-search input::placeholder { color: var(--ink-4); }
.search-scope { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 6px; }
.scope-btn {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  padding: 4px 9px; border: 0; background: transparent; color: var(--ink-3);
  border-radius: 4px; cursor: pointer;
}
.scope-btn.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

.shortcuts-section { max-width: 920px; margin: 0 auto 64px; }
.shortcuts-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding: 0 4px;
}
.shortcuts { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.shortcut {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; cursor: pointer; border: 0; background: transparent; padding: 0; width: 72px;
}
.shortcut-tile {
  width: 56px; height: 56px; border-radius: 14px; color: #FBF7F0;
  font-family: var(--font-serif); font-size: 24px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,0.1);
  transition: transform var(--t-fast) var(--ease-out);
  font-variation-settings: 'opsz' 32;
}
.shortcut:hover .shortcut-tile { transform: translateY(-2px); }
.shortcut-tile.add { background: var(--surface); color: var(--ink-3); border: 1px dashed var(--border-strong); }
.shortcut-name {
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-align: center;
}

.shortcut-wrap { position: relative; width: 72px; }
.shortcut-delete-badge {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--danger); color: var(--surface);
  border: 0; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; font-family: var(--font-sans);
}
.shortcut-confirm {
  position: absolute; top: -6px; right: -6px; z-index: 3;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; white-space: nowrap; box-shadow: var(--shadow-2);
  min-width: 130px;
}
.shortcut-confirm > span { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); }
.shortcuts.is-editing .shortcut-tile-link { cursor: default; }
.shortcuts.is-editing .shortcut-tile-link:hover .shortcut-tile { transform: none; }
.shortcuts.is-editing .shortcut-wrap { cursor: grab; }
.shortcuts.is-editing .shortcut-wrap:active { cursor: grabbing; }

.shortcut-form {
  width: 220px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow-2);
  align-self: flex-start;
}
.shortcut-form form { display: flex; flex-direction: column; gap: 8px; }
.shortcut-form-input {
  font-family: var(--font-sans); font-size: 13px;
  background: var(--page); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 5px 8px; color: var(--ink);
  outline: none; width: 100%; box-sizing: border-box;
}
.shortcut-form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.shortcut-color-swatches { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
.color-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0; flex-shrink: 0;
  outline-offset: 2px;
}
.color-swatch.is-selected { border-color: var(--ink); }
.shortcut-form-actions { display: flex; gap: 6px; }

.top-sites-banner {
  max-width: 920px; margin: -20px auto 32px;
  background: var(--accent-soft); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-size: 14px; color: var(--ink-2);
}
.top-sites-banner > span { flex: 1; }

.today { max-width: 1180px; margin: 0 auto; }
.today-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 14px; gap: 14px;
}
.today-head .eyebrow { white-space: nowrap; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-2); }
.ghost-link {
  background: 0; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; color: var(--accent); font-weight: 500;
  white-space: nowrap;
}

.magazine { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; }
.mag-featured {
  display: flex; flex-direction: column; gap: 16px; cursor: pointer;
  border-radius: var(--r-lg); transition: background var(--t-fast) var(--ease-out);
  padding: 8px; margin: -8px;
}
.mag-featured:hover { background: var(--hover); }
.mag-cover { height: 280px; border-radius: var(--r-lg); border: 1px solid var(--border); position: relative; }
.cover-tag {
  position: absolute; left: 14px; top: 14px;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.25); padding: 3px 8px; border-radius: 4px;
  backdrop-filter: blur(8px);
}
.mag-text { padding: 0 4px; }
.mag-meta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  margin-bottom: 10px; flex-wrap: wrap;
}
.mag-meta .feed { color: var(--ink-2); }
.mag-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 32px; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 10px; font-variation-settings: 'opsz' 36; text-wrap: balance;
}
.mag-dek {
  font-family: var(--font-serif); font-size: 18px; line-height: 1.4;
  color: var(--ink-2); margin: 0 0 14px; font-variation-settings: 'opsz' 22;
}
.mag-excerpt {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.55;
  color: var(--ink-2); margin: 0 0 16px; font-variation-settings: 'opsz' 18;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mag-foot .save-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); padding: 6px 10px;
}

.mag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mag-card {
  display: flex; flex-direction: column; cursor: pointer;
  border-radius: var(--r-lg); padding: 8px; margin: -8px;
  transition: background var(--t-fast) var(--ease-out);
}
.mag-card:hover { background: var(--hover); }
.mag-card-cover { height: 110px; border-radius: var(--r-md); border: 1px solid var(--border); margin-bottom: 10px; position: relative; }
.img-consent-note {
  position: absolute; right: 10px; bottom: 10px;
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.55); background: rgba(0,0,0,0.28);
  border-radius: var(--r-sm); padding: 3px 8px; cursor: pointer;
}
.img-consent-note:hover { color: rgba(255,255,255,0.8); background: rgba(0,0,0,0.45); }
.mag-card-meta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
  margin-bottom: 4px; min-width: 0;
}
.mag-card-meta .feed { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mag-card-meta .dot-sep, .mag-card-meta .time { flex-shrink: 0; }
.mag-card-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 16px; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--ink); margin: 0 0 8px; font-variation-settings: 'opsz' 18;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mag-card-foot {
  margin-top: auto; padding-top: 6px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
}

.today-folder {
  margin-bottom: 40px;
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}
.today-folder-head {
  padding-bottom: 10px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.today-folder-head .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-2); }
.mag-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}

@keyframes skel-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skel-card {
  height: 190px; border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--surface) 25%, var(--hover) 50%, var(--surface) 75%);
  background-size: 1200px 100%;
  animation: skel-shimmer 1.5s ease-in-out infinite;
}
.skel-line {
  height: 10px; border-radius: 4px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--hover) 50%, var(--surface) 75%);
  background-size: 1200px 100%;
  animation: skel-shimmer 1.5s ease-in-out infinite;
}

/* ============================================================
   DISCOVER
   ============================================================ */
.discover { flex: 1; overflow-y: auto; padding: 56px 48px 96px; background: var(--page); }
.discover-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.discover-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(36px, 4.5vw, 52px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink); margin: 12px 0 14px; font-variation-settings: 'opsz' 56; text-wrap: balance;
}
.discover-sub {
  font-family: var(--font-serif); font-size: 18px; line-height: 1.4;
  color: var(--ink-2); margin: 0 auto 32px; max-width: 50ch; font-variation-settings: 'opsz' 22;
}
.feed-finder {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 6px 6px 6px 14px;
  max-width: 620px; margin: 0 auto; box-shadow: var(--shadow-1);
}
.feed-finder:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.feed-finder > svg { color: var(--ink-3); }
.feed-finder input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: var(--font-sans); font-size: 14px; color: var(--ink); padding: 8px 0;
}
.feed-finder input::placeholder { color: var(--ink-4); }

.finder-result {
  margin: 18px auto 0; max-width: 620px;
  display: flex; align-items: center; gap: 14px;
  background: var(--accent-soft); color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: var(--r-md); padding: 12px 14px; text-align: left;
}
.finder-result-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--accent); color: #FBF7F0;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.finder-result-body { flex: 1; }
.finder-result-title { font-family: var(--font-sans); font-size: 14px; color: var(--ink); }
.finder-result-title .mono { font-family: var(--font-mono); color: var(--accent); font-size: 12px; }
.finder-result-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 3px; }

.collections { max-width: 1180px; margin: 0 auto; }
.collections-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 28px;
}
.collections-head .muted { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.collection {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden; display: flex; flex-direction: column;
}
.collection-cover { height: 160px; position: relative; }
.collection-name {
  position: absolute; left: 20px; right: 20px; bottom: 18px;
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.01em;
  color: #FBF7F0; font-variation-settings: 'opsz' 28;
  text-shadow: 0 1px 4px rgba(0,0,0,0.75), 0 3px 18px rgba(0,0,0,0.55);
}
.collection-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.collection-tag { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.collection-blurb { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.collection-sources { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.collection-sources li { font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); }
.collection-foot { margin-top: auto; padding-top: 4px; }
.collection-added-btn { opacity: 0.6; cursor: default; }
.collections-head-custom { margin-top: 48px; }
.collection-empty-hint { font-style: italic; color: var(--ink-3); }

.collections-tabs {
  display: flex; gap: 2px; padding: 3px; margin-bottom: 28px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); width: fit-content;
}
.collections-tab {
  padding: 6px 16px; border-radius: calc(var(--r-md) - 2px);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--ink-3); background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  transition: color var(--t-fast) var(--ease-out);
}
.collections-tab:hover { color: var(--ink); }
.collections-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.collections-tab-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 1px 6px; line-height: 1.4;
}
.collections-tab.on .collections-tab-count { background: var(--surface-2); }

/* ============================================================
   CAPTURE POPOVER
   ============================================================ */
.popover-scrim { position: fixed; inset: 0; z-index: 30; background: transparent; }
.capture-popover {
  position: fixed; top: 60px; right: 18px; z-index: 40;
  width: 320px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; overflow: hidden;
}
.cap-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
}
.cap-body { display: flex; align-items: center; gap: 12px; padding: 4px 14px 14px; }
.cap-favicon {
  width: 40px; height: 40px; border-radius: 10px; color: #FBF7F0;
  font-family: var(--font-serif); font-size: 20px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cap-title { font-family: var(--font-sans); font-size: 14px; color: var(--ink); font-weight: 600; }
.cap-host { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.cap-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 0 14px 14px; }
.cap-meta > div { background: var(--surface-2); border-radius: 6px; padding: 6px 8px; text-align: center; }
.cap-meta .mono { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.cap-form { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.cap-label { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); font-weight: 500; }
.cap-select {
  font-family: var(--font-sans); font-size: 13px; padding: 7px 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); color: var(--ink);
}
.cap-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.cap-foot {
  padding: 8px 14px; font-family: var(--font-sans); font-size: 11px; color: var(--ink-3);
  border-top: 1px solid var(--border); background: var(--surface-2);
}
.cap-foot kbd {
  font-family: var(--font-mono); font-size: 10px; background: var(--surface);
  border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; color: var(--ink-2);
}

/* ============================================================
   TOAST
   ============================================================ */
.toast-host {
  position: fixed; top: 20px; right: 20px; z-index: 50;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.toast {
  background: var(--ink); color: var(--page);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.45;
  padding: 12px 18px; border-radius: var(--r-md);
  box-shadow: var(--shadow-2); display: inline-flex; align-items: flex-start; gap: 10px;
  max-width: 320px;
  animation: toast-in 220ms var(--ease-out);
}
.sync-toast { padding-right: 10px; }
.toast-dismiss {
  background: none; border: none; cursor: pointer;
  color: var(--page); opacity: 0.55; padding: 2px;
  display: flex; align-items: center; flex-shrink: 0; margin-left: 4px;
  transition: opacity var(--t-fast) var(--ease-out);
}
.toast-dismiss:hover { opacity: 1; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .middle { flex: 1; width: auto !important; }
  .col-resize-handle { display: none; }
  .reader.middle-collapsed .middle { display: none; }
  .sidebar { display: none; overflow: hidden; padding: 14px 10px 10px; border-right: 1px solid var(--border); }
  .reader.sidebar-open .sidebar {
    display: flex; position: fixed; top: 0; bottom: 0; left: 0;
    width: 260px !important; z-index: 20; box-shadow: var(--shadow-2);
  }
  .reader.left-collapsed .sidebar { display: none; }
  .magazine { grid-template-columns: 1fr; }
  .mag-grid { grid-template-columns: 1fr 1fr; }
  .collections-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .reader-pane { display: none; }
  .reader.reading .middle { display: none; }
  .reader.reading .reader-pane { display: flex; }
  .mode-tab { padding: 5px 9px; font-size: 12px; }
  .newtab, .discover { padding: 32px 20px 64px; }
  .mag-grid { grid-template-columns: 1fr; }
  .collections-grid { grid-template-columns: 1fr; }
  .appbar-brand .word { display: none; }
}

/* ============================================================
   POPUP
   ============================================================ */
.popup-root {
  display: flex;
  flex-direction: column;
  width: 340px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  min-height: 120px;
}

.popup-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--border);
}

.popup-brand {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
}

.popup-body {
  display: flex;
  flex-direction: column;
  padding: var(--s-3) var(--s-4) var(--s-4);
  gap: var(--s-3);
}

.popup-scanning {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.popup-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: popup-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.popup-spinner-sm {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: popup-spin 0.7s linear infinite;
}

@keyframes popup-spin {
  to { transform: rotate(360deg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.is-spinning { animation: spin 0.8s linear infinite; }

.popup-empty {
  margin: var(--s-2) 0;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.popup-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.popup-feed-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-2) 0;
}

.popup-favicon {
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: var(--r-sm);
}

.popup-feed-text {
  flex: 1;
  min-width: 0;
}

.popup-feed-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.popup-candidate-tag {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--accent-warm);
  background: var(--accent-warm-soft);
  border-radius: var(--r-pill);
  padding: 1px 6px;
  white-space: nowrap;
}

.popup-feed-url {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.popup-feed-error {
  font-size: var(--fs-xs);
  color: var(--accent-warm);
  margin-top: var(--s-1);
}

.popup-feed-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.popup-add-btn {
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--surface);
  background: var(--accent);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  transition: background var(--t-fast) var(--ease-out);
  white-space: nowrap;
}

.popup-add-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.popup-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.popup-already {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  white-space: nowrap;
}

.popup-success {
  font-size: var(--fs-xs);
  color: var(--success);
  font-weight: 500;
  white-space: nowrap;
}

.popup-manual {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  border-top: var(--bw) solid var(--border);
  padding-top: var(--s-3);
}

.popup-manual-row {
  display: flex;
  gap: var(--s-2);
}

.popup-url-input {
  flex: 1;
  padding: 5px 10px;
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface-2);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  min-width: 0;
}

.popup-url-input:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.popup-manual-error {
  margin-top: 0;
}

.popup-perm-notice {
  margin: 0 0 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: var(--r-sm);
}
.popup-perm-text {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-2);
  margin: 0 0 8px;
  line-height: 1.5;
}
.popup-perm-btn { width: 100%; }

/* Toolbar hint in new-tab greeting */
.greeting-toolbar-hint {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-4);
  line-height: var(--lh-normal);
}

/* ============================================================
   SIDEBAR SCROLLABLE SECTIONS
   ============================================================ */
.sidebar { overflow: hidden; }

.sidebar-folders-list {
  max-height: 260px;
  overflow-y: auto;
  padding-bottom: var(--s-1);
}
.sidebar-folders-list::-webkit-scrollbar { width: 3px; }
.sidebar-folders-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

.sidebar-tags-list {
  max-height: 200px;
  overflow-y: auto;
  padding-bottom: var(--s-1);
}
.sidebar-tags-list::-webkit-scrollbar { width: 3px; }
.sidebar-tags-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

/* ============================================================
   TAGS SECTION
   ============================================================ */
.sidebar-tags-section { padding-bottom: var(--s-2); }

.tag-row-wrap {
  position: relative; display: flex; align-items: center;
}
.tag-row-wrap .feed-row { flex: 1; min-width: 0; }
.tag-row-wrap[draggable="true"] { cursor: grab; }
.tag-row-wrap[draggable="true"]:active { cursor: grabbing; }
.tag-row-wrap.is-dragging { opacity: 0.35; }
.tag-row-wrap.drop-above { box-shadow: 0 -2px 0 0 var(--accent); border-radius: 0; }
.tag-row-wrap.drop-below { box-shadow: 0 2px 0 0 var(--accent); border-radius: 0; }
.tag-menu-wrap { position: relative; flex-shrink: 0; padding-right: 4px; }

.tag-ai-badge {
  display: inline-flex; align-items: center;
  color: var(--accent); opacity: 0.7; flex-shrink: 0; margin-left: 2px;
}

.tags-no-key-note {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 10px 8px;
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-3);
  line-height: 1.4;
}
.tags-no-key-note svg { flex-shrink: 0; color: var(--accent); opacity: 0.7; }

.link-btn {
  background: none; border: none; padding: 0;
  color: var(--accent); cursor: pointer; font: inherit; font-size: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: var(--accent-hover); }

.tags-empty { padding: 0 2px; }

/* ============================================================
   TAGS AI PROGRESS (inline sidebar indicator)
   ============================================================ */
.tags-ai-progress {
  margin: 2px 10px 8px;
  padding: 7px 9px 6px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-sm);
}
.tags-ai-progress-label {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-size: 11px;
  color: var(--accent); font-weight: 500;
  margin-bottom: 5px;
  animation: tags-ai-pulse 1.8s ease-in-out infinite;
}
.tags-ai-progress-track {
  height: 3px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: var(--r-pill); overflow: hidden;
}
.tags-ai-progress-fill {
  height: 100%; background: var(--accent);
  border-radius: var(--r-pill);
  transition: width 280ms var(--ease-out);
  min-width: 4px;
}
@keyframes tags-ai-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
[data-theme="dark"] .tags-ai-progress {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ============================================================
   MODAL (shared by Settings and Tag Prompt Editor)
   ============================================================ */
.modal-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(27, 26, 23, 0.4);
  backdrop-filter: blur(2px);
  animation: modal-scrim-in var(--t-base) var(--ease-out);
}
@keyframes modal-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
[data-theme="dark"] .modal-scrim { background: rgba(0, 0, 0, 0.6); }

.modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 70;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  animation: modal-in var(--t-base) var(--ease-out);
  overflow: hidden;
}
.modal-wide { width: min(660px, calc(100vw - 32px)); }

@keyframes modal-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title {
  font-family: var(--font-serif); font-size: 20px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
.modal-body {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 24px;
}
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: var(--surface-2); flex-shrink: 0;
}

/* ============================================================
   SETTINGS MODAL
   ============================================================ */
.settings-section {
  display: flex; flex-direction: column; gap: 16px;
}
.settings-section-head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--border); padding-bottom: 12px;
}
.settings-hint {
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-3);
  line-height: 1.55; margin: 0;
}
.settings-field {
  display: flex; flex-direction: column; gap: 7px;
}
.settings-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em;
}
.settings-label-optional {
  font-weight: 400; color: var(--ink-4); text-transform: none; letter-spacing: 0;
  font-size: 11px; margin-left: 4px;
}
.settings-field-note {
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-3);
  margin: 0; line-height: 1.5;
}
.settings-field-note a { font-size: 11px; }

.settings-provider-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.settings-provider-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; flex: 1;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.settings-provider-tab:hover { background: var(--hover); }
.settings-provider-tab.on {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.provider-badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 400;
  padding: 2px 6px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--ink-3); white-space: nowrap;
}
.provider-badge.free { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.settings-input {
  width: 100%; font-family: var(--font-sans); font-size: 13px;
  padding: 8px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--surface-2);
  color: var(--ink); outline: none;
  transition: border-color var(--t-fast) var(--ease-out);
}
.settings-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.settings-input::placeholder { color: var(--ink-4); }

.settings-select {
  font-family: var(--font-sans); font-size: 13px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 8px 12px; padding-right: 30px;
  outline: none; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color var(--t-fast) var(--ease-out);
}
.settings-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.settings-textarea {
  width: 100%; font-family: var(--font-sans); font-size: 13px;
  padding: 8px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--surface-2);
  color: var(--ink); outline: none; resize: vertical; min-height: 80px;
  line-height: 1.5;
  transition: border-color var(--t-fast) var(--ease-out);
}
.settings-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.settings-textarea::placeholder { color: var(--ink-4); }

.settings-key-row {
  display: flex; gap: 8px; align-items: center;
}
.settings-key-input-wrap {
  flex: 1; position: relative;
}
.settings-key-input-wrap .settings-input { padding-right: 36px; }
.settings-key-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
}

.settings-model-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.settings-error {
  font-family: var(--font-mono); font-size: 11px; color: var(--danger);
}
.settings-model-picker {
  display: flex; flex-direction: column; gap: 6px; margin-top: 4px;
}
.settings-model-list {
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  max-height: 200px; overflow-y: auto;
  background: var(--surface-2);
}
.settings-model-list::-webkit-scrollbar { width: 4px; }
.settings-model-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
.settings-model-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 12px; border: 0; background: transparent; text-align: left;
  cursor: pointer; font-family: var(--font-sans); font-size: 12px; color: var(--ink);
  transition: background var(--t-fast) var(--ease-out);
  border-bottom: 1px solid var(--border);
}
.settings-model-item:last-child { border-bottom: 0; }
.settings-model-item:hover { background: var(--hover); }
.settings-model-item.on { background: var(--accent-soft); color: var(--accent); }
.model-name { font-weight: 500; flex-shrink: 0; }
.model-badge {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink-3);
  flex-shrink: 0;
}
.model-badge.free { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.model-badge.selected { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 600; }
.model-id {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-4);
  margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}

/* Multi-model priority list */
.settings-model-priority {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-2); overflow: hidden;
}
.model-priority-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--border);
  font-family: var(--font-sans); font-size: 12px; color: var(--ink);
}
.model-priority-row:last-child { border-bottom: 0; }
.model-priority-rank {
  width: 18px; text-align: center; flex-shrink: 0;
  font-variant-numeric: tabular-nums; font-size: 11px;
  color: var(--ink-3); font-weight: 600;
}
.model-priority-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-priority-actions {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.model-priority-actions .icon-btn { opacity: 0.55; }
.model-priority-actions .icon-btn:hover:not(:disabled) { opacity: 1; }
.model-priority-actions .icon-btn:disabled { opacity: 0.2; cursor: not-allowed; }

.settings-no-models {
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-3);
  padding: 8px 10px; background: var(--surface-2);
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  margin-bottom: 10px; text-align: center;
}

.settings-selected-model {
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-3);
  padding: 6px 10px; background: var(--surface-2); border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.settings-selected-model code { font-size: 11px; color: var(--accent); background: var(--accent-soft); padding: 1px 5px; border-radius: 4px; }

.settings-name-row {
  display: flex; gap: 10px; align-items: center;
}
.settings-name-row .settings-input { flex: 1; }

/* --- AI run status -------------------------------------------------- */
.run-status {
  font-family: var(--font-sans); font-size: 12px;
  padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.run-status-ok  { background: var(--surface-2); color: var(--ink-2); }
.run-status-reduced { background: color-mix(in srgb, var(--accent-warm) 8%, transparent); border-color: color-mix(in srgb, var(--accent-warm) 40%, transparent); color: var(--ink-2); }
.run-status-warn { background: var(--warning-soft, color-mix(in srgb, var(--warning) 10%, transparent)); border-color: var(--warning); color: var(--ink-1); }
.run-status-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.run-status-mode { font-weight: 500; }
.run-status-time { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.run-status-counts { color: var(--ink-3); font-size: 11px; }
.run-status-model { font-size: 11px; color: var(--ink-2); }
.run-status-model code { font-size: 10px; background: var(--accent-soft); color: var(--accent); padding: 1px 4px; border-radius: 3px; }
.run-status-failed { font-size: 11px; color: var(--danger); }
.run-status-failed code { font-size: 10px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); padding: 1px 4px; border-radius: 3px; }
.run-status-hint { margin: 4px 0 0; font-size: 11px; color: var(--ink-2); line-height: 1.4; }
[data-theme="dark"] .run-status-warn { background: color-mix(in srgb, var(--warning) 12%, transparent); }
[data-theme="dark"] .run-status-reduced { background: color-mix(in srgb, var(--accent-warm) 10%, transparent); }

/* Tag color swatches (in modal) */
.tag-color-swatches {
  display: flex; gap: 6px; flex-shrink: 0;
}
.tag-color-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  transition: transform var(--t-fast) var(--ease-out);
}
.tag-color-swatch.on { border-color: var(--ink); transform: scale(1.15); }
.tag-color-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   TAG PROMPT EDITOR (fill-in-the-blanks)
   ============================================================ */
.prompt-builder {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.prompt-builder-prefix {
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-3);
}
.prompt-builder-select {
  font-family: var(--font-sans); font-size: 13px;
  padding: 6px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); outline: none; cursor: pointer;
  align-self: flex-start;
}
.prompt-builder-select:focus { border-color: var(--accent); }
.prompt-builder-input { margin-top: 4px; }
.prompt-builder-textarea { margin-top: 4px; }

.prompt-preview-bar {
  display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
}
.prompt-preview-toggle {
  background: none; border: none; padding: 0;
  font-family: var(--font-sans); font-size: 12px;
  color: var(--accent); cursor: pointer; text-align: left;
  text-decoration: underline; text-underline-offset: 2px;
}
.prompt-preview-toggle:hover { color: var(--accent-hover); }
.prompt-preview {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
  background: var(--page); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px;
  white-space: pre-wrap; line-height: 1.6; margin: 0;
}

/* ============================================================
   TAGGING PROGRESS BANNER
   ============================================================ */
/* Feed sync progress — thin accent bar pinned to the top of the viewport */
.sync-progress-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 3px; pointer-events: none;
}
.sync-progress-fill {
  height: 100%; background: var(--accent);
  transition: width 400ms var(--ease-out);
}

.tagging-banner {
  position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
  padding: 10px 18px; display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-2);
  min-width: 280px;
}
.tagging-banner-bar {
  flex: 1; height: 4px; background: var(--border);
  border-radius: 2px; overflow: hidden;
}
.tagging-banner-fill {
  height: 100%; background: var(--accent); border-radius: 2px;
  transition: width var(--t-base) var(--ease-out);
}

/* ============================================================
   ADD FEED MODAL
   ============================================================ */
.modal-add-feed { width: min(560px, calc(100vw - 32px)); }

.modal-head-left {
  display: flex; align-items: center; gap: 8px;
}
.modal-back-btn {
  color: var(--ink-3); flex-shrink: 0;
}
.modal-back-btn:hover { color: var(--ink); }

.add-feed-body { gap: 16px; }
.add-feed-intro {
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-3);
  margin: 0; line-height: var(--lh-normal);
}

/* Platform grid */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.platform-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; padding: 14px 14px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer; text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.platform-tile:hover {
  border-color: var(--ptile-color, var(--accent));
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.platform-tile:active { transform: translateY(0); }
.platform-tile-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--ptile-color, var(--accent));
  color: #FFFCF6;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.platform-tile-name {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--ink); line-height: 1.2;
}
.platform-tile-hint {
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-3);
  line-height: 1.35;
}

/* Platform form */
.platform-form {
  display: flex; flex-direction: column; gap: 16px;
}
.platform-form-hint {
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-3);
  margin: 0; line-height: var(--lh-normal);
}

/* Mode tabs */
.platform-mode-tabs {
  display: flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); align-self: flex-start;
}
.platform-mode-tab {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: var(--ink-3); padding: 5px 12px;
  border-radius: calc(var(--r-md) - 2px);
  transition: background var(--t-fast), color var(--t-fast);
}
.platform-mode-tab:hover { color: var(--ink); }
.platform-mode-tab.on {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-1);
}

/* Platform input field */
.platform-field { display: flex; flex-direction: column; gap: 6px; }
.platform-field-label {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--ink-2);
}
.platform-input-wrap {
  display: flex; align-items: stretch;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.platform-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.input-addon {
  display: flex; align-items: center; padding: 0 10px;
  background: var(--surface-2); border-right: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
  flex-shrink: 0; user-select: none;
}
.platform-url-input {
  flex: 1; padding: 9px 12px;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  background: var(--surface);
  border: none; outline: none;
  border-radius: 0;
}
.platform-url-input::placeholder { color: var(--ink-4); }
.platform-field-hint {
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-3);
  margin: 0; line-height: 1.45;
}

/* Choice list (e.g. Hacker News) */
.platform-choices {
  display: flex; flex-direction: column; gap: 6px;
}
.platform-choice-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px 14px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--r-md); text-align: left; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.platform-choice-row:hover { border-color: var(--border-strong); background: var(--surface); }
.platform-choice-row.is-selected {
  border-color: var(--accent); background: var(--accent-soft);
}
.choice-row-inner {
  display: flex; align-items: center; gap: 10px;
}
.choice-radio {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); flex-shrink: 0;
  background: var(--surface);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.is-selected .choice-radio {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--surface);
}
.choice-label {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink);
}
.choice-url {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  padding-left: 24px; word-break: break-all;
}

/* URL preview */
.feed-url-preview {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.preview-eyebrow {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--ink-4);
}
.preview-url {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  word-break: break-all; line-height: 1.5;
}

/* Error */
.platform-form-error {
  font-family: var(--font-sans); font-size: 12.5px;
  color: var(--danger); margin: 0; line-height: var(--lh-normal);
}

/* Success state */
.feed-added-confirm {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 32px 0;
  text-align: center;
}
.feed-added-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.feed-added-label {
  font-family: var(--font-sans); font-size: 14px; color: var(--ink-2);
  margin: 0;
}

/* Detected feeds section */
.detected-feeds-section { display: flex; flex-direction: column; gap: 10px; }
.detected-feeds-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--ink-4); margin: 0;
}
.detected-feeds-list { display: flex; flex-direction: column; gap: 6px; }
.detected-feed-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.detected-feed-info {
  display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0;
}
.detected-feed-rss { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.detected-feed-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.detected-feed-title {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detected-feed-url {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.detected-feed-err {
  font-family: var(--font-sans); font-size: 11px; color: var(--danger);
}
.detected-divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-4); font-family: var(--font-sans); font-size: 11px;
  margin: 2px 0;
}
.detected-divider::before, .detected-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* btn-success variant (for confirmed quick-add) */
.btn-success {
  background: var(--accent-soft); color: var(--accent); border-color: transparent;
  cursor: default;
}
.btn-success:hover { background: var(--accent-soft); }

/* Dark mode overrides */
[data-theme="dark"] .platform-tile:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] .platform-url-input { background: var(--surface); }

/* ============================================================
   CONSENT SYSTEM
   ============================================================ */

/* Inline notice strip (shown when consent is declined/revoked) */
.consent-notice {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 2px 10px 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent-warm) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-warm) 25%, transparent);
  border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-2);
  line-height: 1.5;
}
.consent-notice-icon { flex-shrink: 0; color: var(--accent-warm); margin-top: 1px; opacity: 0.8; }
.consent-notice-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.consent-notice-title { font-weight: 600; color: var(--ink); }
.consent-notice-sub { color: var(--ink-3); }
.consent-notice-cta {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-size: 11px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px;
  white-space: nowrap; align-self: flex-start; margin-top: 2px;
}
.consent-notice-cta:hover { color: var(--accent-hover); }
[data-theme="dark"] .consent-notice {
  background: color-mix(in srgb, var(--accent-warm) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-warm) 28%, transparent);
}

/* Full-width banner shown when optional <all_urls> host permission is not yet granted */
.perm-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--accent) 15%, var(--page));
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-2);
}
.perm-banner-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-banner-title { font-weight: 600; font-size: 13px; color: var(--accent); }
.perm-banner-sub { font-size: 12px; color: var(--ink-2); }
[data-theme="dark"] .perm-banner {
  background: color-mix(in srgb, var(--accent) 20%, var(--page));
  border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ArticleReader safe-view gate */
.consent-gate {
  padding: 24px 0 0;
}
.consent-gate-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--accent-warm) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-warm) 22%, transparent);
  border-radius: var(--r-md);
  margin-top: 20px;
}
.consent-gate-banner-icon { flex-shrink: 0; color: var(--accent-warm); margin-top: 1px; opacity: 0.75; }
.consent-gate-banner-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.consent-gate-banner-text {
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.consent-gate-banner-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
[data-theme="dark"] .consent-gate-banner {
  background: color-mix(in srgb, var(--accent-warm) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent-warm) 26%, transparent);
}

/* Reading-limited pill in reader toolbar */
.reading-limited-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent-warm) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-warm) 30%, transparent);
  color: var(--accent-warm); font-family: var(--font-sans);
  font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-base);
}
.reading-limited-badge:hover {
  background: color-mix(in srgb, var(--accent-warm) 18%, transparent);
}
[data-theme="dark"] .reading-limited-badge {
  background: color-mix(in srgb, var(--accent-warm) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent-warm) 32%, transparent);
}

/* Consent modal — terms expander */
.consent-terms-expander { margin-top: 4px; }
.consent-terms-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-family: var(--font-sans); font-size: 12px;
  text-decoration: underline; text-underline-offset: 2px;
  display: inline-flex; align-items: center; gap: 4px;
}
.consent-terms-toggle:hover { color: var(--accent-hover); }
.consent-terms-body {
  margin-top: 10px; padding: 12px 14px;
  max-height: 260px; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.65;
  color: var(--ink-3); white-space: pre-wrap;
}
.consent-terms-body::-webkit-scrollbar { width: 4px; }
.consent-terms-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

/* Consent record note */
.consent-record-note {
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-4);
  line-height: 1.5; margin: 0;
  border-top: 1px solid var(--border); padding-top: 12px;
}

/* Content & Privacy settings section row */
.consent-status-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.consent-status-info { display: flex; flex-direction: column; gap: 2px; }
.consent-status-label {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink);
}
.consent-status-meta {
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-4);
}
.consent-status-on { color: var(--success); }
.consent-status-off { color: var(--accent-warm); }

/* Consent checkbox */
.consent-checkbox-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
}
.consent-checkbox-row:has(.consent-checkbox:checked) {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.consent-checkbox {
  flex-shrink: 0; margin-top: 1px;
  width: 15px; height: 15px; cursor: pointer;
  accent-color: var(--accent);
}
.consent-checkbox-text {
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-2);
  line-height: 1.5; user-select: none;
}

/* Disabled primary button (consent not yet checked) */
.btn-primary:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.btn-primary:disabled:hover { background: var(--accent); }

/* Publisher link in article reader */
.host-link {
  color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-base), border-color var(--t-base);
}
.host-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.article-publisher-link {
  color: var(--ink-4); text-decoration: none;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: color var(--t-base), border-color var(--t-base);
}
.article-publisher-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================
   OPML IMPORT / EXPORT
   ============================================================ */
.settings-opml-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}

.opml-modal { max-width: 540px; }

.opml-modal-body {
  max-height: 420px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.opml-modal-body::-webkit-scrollbar { width: 4px; }
.opml-modal-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

.opml-summary {
  padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.opml-dup { color: var(--ink-3); }

.opml-folder-list {
  display: flex; flex-direction: column; gap: 4px;
}

.opml-folder-group {
  display: flex; flex-direction: column;
}

.opml-folder-name {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.opml-folder-count {
  margin-left: auto;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 1px 7px;
  font-size: 10px; color: var(--ink-3); font-weight: 400;
  text-transform: none; letter-spacing: 0;
}

.opml-feed-row {
  display: flex; align-items: baseline; gap: 7px;
  padding: 5px 4px 5px 16px;
  border-radius: 5px;
  font-family: var(--font-sans);
  transition: background var(--t-fast) var(--ease-out);
}
.opml-feed-row:hover { background: var(--hover); }
.opml-feed-row svg { flex-shrink: 0; color: var(--ink-4); position: relative; top: 1px; }

.opml-feed-name {
  font-size: 13px; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; max-width: 200px;
}

.opml-feed-url {
  font-size: 11px; color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}

[data-theme="dark"] .opml-summary { background: var(--surface-2); }

/* OPML source picker modal */
.opml-source-modal { max-width: 460px; }

.opml-source-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  padding: 0 20px;
}
.opml-source-tab {
  padding: 10px 14px; font-family: var(--font-sans); font-size: 13px;
  font-weight: 500; color: var(--ink-3); background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.opml-source-tab:hover { color: var(--ink); }
.opml-source-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.opml-source-body { padding: 20px; }

.opml-file-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 32px 24px;
  border: 2px dashed var(--border-strong); border-radius: var(--r-lg);
  cursor: pointer; text-align: center;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
  color: var(--ink-3);
}
.opml-file-zone:hover, .opml-file-zone.dragging {
  background: var(--hover); border-color: var(--accent); color: var(--ink);
}
.opml-file-label { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink); }
.opml-file-hint  { font-family: var(--font-sans); font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; }

.opml-url-zone { display: flex; flex-direction: column; gap: 10px; }
.opml-url-row  { display: flex; gap: 8px; align-items: center; }
.opml-url-row .settings-input { flex: 1; }
.opml-url-btn  { white-space: nowrap; flex-shrink: 0; }

.opml-source-msg {
  font-family: var(--font-sans); font-size: 12px; margin: 0; line-height: 1.4;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.opml-source-msg--error { color: var(--danger); }
.opml-source-msg--warn  { color: var(--warning); }
.opml-grant-btn { flex-shrink: 0; }

/* OPML review modal — summary row + selection controls */
.opml-summary-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.opml-summary-row .opml-summary { margin: 0; flex: 1; }

.opml-toggle-all {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: var(--accent); background: none; border: none; cursor: pointer;
  padding: 2px 0; white-space: nowrap;
  transition: opacity var(--t-fast) var(--ease-out);
}
.opml-toggle-all:hover { opacity: 0.75; }

/* Checkbox style shared by folder header + feed row */
.opml-checkbox {
  width: 14px; height: 14px; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
}

.opml-folder-name--check { cursor: pointer; }
.opml-folder-name--check:hover { color: var(--ink); }

.opml-feed-row--check { cursor: pointer; padding-left: 8px; }
.opml-feed-deselected { opacity: 0.4; }