/* app.css — core styles (tokens, layout, cards, tabs, etc.) */
/* diary.css and onboarding.css have been extracted to separate files */
:root {
      /* ─── Surface (3 levels) — near-monochrome ───────────────────────
       * Pure white canvas → white surface → cool light-gray warm surface.
       * Minimal palette: gray scale only, no cream/warm tints. */
      --bg: #ffffff;
      --surface: #ffffff;
      --surface-warm: #f6f6f7;   /* Light gray — button bg, subtle surfaces */

      /* ─── Foreground ramp (4 levels) — neutral gray scale ──────────── */
      --fg: #18181b;             /* Near-black — primary text */
      --fg-2: #3f3f46;           /* Dark gray — emphasized secondary text */
      --muted: #71717a;          /* Mid gray — secondary body text */
      --meta: #a1a1aa;           /* Light gray — tertiary text, metadata */

      /* ─── Border (2 levels) — hairline, low-contrast ───────────────── */
      --border: #f2f2f3;         /* Hairline — standard card borders */
      --border-soft: #e4e4e7;    /* Light gray — dividers, emphasized borders */

      /* ─── Accent ──────────────────────────────────────────────────────
       * Desaturated terracotta — the ONLY chromatic color, used sparingly
       * for primary CTA and highest-signal moments. Everywhere else is
       * monochrome. */
      --accent: #b5715c;
      --accent-on: #ffffff;
      --accent-hover: color-mix(in oklab, var(--accent), black 8%);
      --accent-active: color-mix(in oklab, var(--accent), black 14%);

      /* ─── Semantic (desaturated) ──────────────────────────────────────
       * Focus Blue reserved for accessibility (input focus rings). */
      --success: #4d8b6a;
      --warn: #a0802e;
      --danger: #b0564f;         /* Desaturated red — serious without alarm */

      /* ─── Typography ────────────────────────────────────────────────── */
      --font-display: "STKaiti", "KaiTi", "楷体", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, -apple-system, sans-serif;
      --font-body: "STKaiti", "KaiTi", "楷体", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, -apple-system, sans-serif;
      --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, ui-monospace, Menlo, monospace;

      /* Type scale — DESIGN.md §3 Typography Rules.
       * 64px hero → 52px section → 36px sub → 32px card → 25px small */
      --text-xs: 10px;           /* Overline — uppercase labels at smallest scale */
      --text-sm: 14px;           /* Caption — metadata, descriptions */
      --text-base: 16px;         /* Body Standard */
      --text-lg: 20px;           /* Body Large — intro paragraphs */
      --text-xl: 25px;           /* Sub-heading Small */
      --text-2xl: 32px;          /* Sub-heading — card titles, feature names */
      --text-3xl: 52px;          /* Section Heading */
      --text-4xl: 64px;          /* Display / Hero — maximum impact, book-title presence */

      --leading-body: 1.6;       /* Relaxed — closer to a book than a dashboard */
      --leading-tight: 1.1;      /* Tight headings — serif letterforms breathe naturally */
      --tracking-display: -0.025em;

      /* ─── Spacing ─────────────────────────────────────────────────────
       * 8px base unit per DESIGN.md §5. Card internal padding ~24–32px. */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-12: 48px;

      --section-y-desktop: 96px; /* Editorial pacing — generous like a magazine spread */
      --section-y-tablet: 64px;
      --section-y-phone: 48px;

      /* ─── Radius (tightened for a cleaner, flatter look) ──────────────
       * Standard 8px, primary 10px, featured 12px. Keeps a soft edge
       * without the heavy rounded "card" feel. */
      --radius-sm: 8px;          /* Standard buttons, cards */
      --radius-md: 10px;         /* Primary buttons, inputs, nav */
      --radius-lg: 12px;         /* Featured containers, video players */
      --radius-pill: 9999px;     /* Chip-like elements (use sparingly) */

      /* ─── Elevation — flat, hairline borders do the work ─────────────
       * Minimal design: no halo rings, no drop shadows. Containment is
       * 1px hairline borders only. */
      --elev-flat: none;
      --elev-ring: none;                          /* No border-like halo */
      --elev-raised: 0 1px 2px rgba(24, 24, 27, 0.04); /* Barely-there lift */

      /* ─── Focus ring ──────────────────────────────────────────────────
       * Focus Blue (#3898ec) is the ONLY cool color in the Claude system.
       * Reserved exclusively for accessibility / keyboard focus. */
      --focus-ring: 0 0 0 3px rgba(56, 152, 236, 0.3);

      /* ─── Motion ──────────────────────────────────────────────────────
       * Short, purposeful transitions. The editorial warmth doesn't need
       * animation energy — interactions should feel calm. */
      --motion-fast: 150ms;
      --motion-base: 200ms;
      --ease-standard: cubic-bezier(0.2, 0, 0, 1);

      /* ─── Layout ──────────────────────────────────────────────────────
       * 1200px container, editorial layout. Hero is centered, feature
       * sections use 2–3 column card grids. */
      --container-max: 1200px;
      --container-gutter-desktop: 24px;
      --container-gutter-tablet: 16px;
      --container-gutter-phone: 12px;
      --recommendation-card-min: 340px;
      --recommendation-card-max: 370px;
      --recommendation-grid-max: 1142px;
      --page-gutter: clamp(128px, 8vw, 160px);
    }

    @media (min-width: 1784px) {
      :root { --recommendation-grid-max: 1528px; }
    }

    @media (min-width: 2234px) {
      :root { --recommendation-grid-max: 1914px; }
    }

    * { box-sizing: border-box; }
    html { min-width: 0; background: var(--bg); }
    body { margin: 0; color: var(--fg); background: var(--bg); font-family: var(--font-body); line-height: var(--leading-body); }
    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; }
    button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    a { color: inherit; text-decoration: none; }
    .app-shell { min-height: 100vh; overflow-x: clip; }
    .topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, 560px) auto; align-items: center; gap: var(--space-4); padding: var(--space-4) clamp(var(--space-4), 3vw, var(--space-8)); background: color-mix(in oklab, var(--bg), transparent 6%); border-bottom: 1px solid var(--border-soft); backdrop-filter: blur(18px); }
    .top-left { display: flex; align-items: center; gap: var(--space-4); min-width: 0; justify-self: start; }
    .brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
    .brand-copy { display: grid; gap: 3px; min-width: 0; }
    .brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--fg); color: var(--surface); box-shadow: var(--elev-ring); font-family: var(--font-display); font-size: var(--text-xl); }
    .brand-title { display: block; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
    .brand-sub { display: block; color: var(--muted); font-size: var(--text-sm); line-height: 1.2; white-space: nowrap; }
    .search { width: min(100%, 560px); justify-self: center; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid var(--border-soft); background: var(--surface); border-radius: var(--radius-pill); box-shadow: var(--elev-ring); overflow: hidden; }
    .search input { width: 100%; border: 0; background: transparent; padding: 13px var(--space-5); color: var(--fg); }
    .search button { border: 0; margin: var(--space-1); border-radius: var(--radius-pill); background: var(--fg); color: var(--surface); padding: 10px var(--space-5); }
    .nav-actions, .top-actions { display: flex; align-items: center; gap: var(--space-2); }
    .top-actions { justify-self: end; }
    .nav-actions button, .top-actions button { flex: 0 0 auto; white-space: nowrap; }
    .nav-action { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 var(--space-3); }
    .nav-action svg { width: 17px; height: 17px; stroke-width: 1.9; }
    .nav-action-text { line-height: 1; }
    .backend-status-pill { min-height: 38px; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); box-shadow: var(--elev-ring); font-size: 13px; }
    .gh-star { flex-shrink: 0; display: inline-flex; align-items: stretch; min-height: 38px; padding: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); overflow: hidden; background: var(--surface); color: var(--fg); box-shadow: var(--elev-ring); font-size: 13px; font-weight: 650; }
    .gh-star:hover { border-color: var(--border-soft); background: var(--surface-warm); }
    .gh-star-left, .gh-star-count { display: inline-flex; align-items: center; justify-content: center; }
    .gh-star-left { gap: 7px; padding: 0 var(--space-4); background: var(--fg); color: var(--surface); }
    .gh-star-mark { width: 16px; height: 16px; flex: 0 0 auto; }
    .gh-star-count { min-width: 44px; padding: 0 var(--space-3); border-left: 1px solid var(--border-soft); background: var(--surface); color: var(--fg-2); font-family: var(--font-mono); font-size: 12px; }
    .gh-star-count[hidden] { display: none; }
    .top-message-btn { position: relative; width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface); color: var(--fg); box-shadow: var(--elev-ring); }
    .top-message-btn:hover, .backend-status-pill:hover { background: var(--surface-warm); color: var(--fg); }
    .top-message-btn svg { width: 18px; height: 18px; stroke-width: 1.8; }
    .message-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }
    .message-dot[hidden] { display: none; }
    [hidden] { display: none !important; }
    :root { --side-drawer-width: 312px; --topbar-height: 75px; }
    .fatal-banner { transition: transform var(--motion-base) var(--ease-standard), margin var(--motion-base) var(--ease-standard), width var(--motion-base) var(--ease-standard); }
    /* 结构动画：所有页面统一过渡 */
    #homePage, #customFilterPage, #poolAllPage, #poolFilterPage,
    #observabilityPage, #poolExplorePage, #settingsPage,
    #xhsFeedPage, #zhihuFeedPage, #biliFeedPage, #youtubeFeedPage,
    #v2exFeedPage, #xiaoyuzhouFeedPage,
    #delightPage, #savedPage, #watchLaterPage, #profilePage,
    #diaryPage, #clonePage, #selfEvolutionPage,
    #libraryPage, #readArchivePage, #chatPage {
      transition: margin var(--motion-base) var(--ease-standard), width var(--motion-base) var(--ease-standard);
    }
    .icon-btn, .pill-btn { border: 1px solid var(--border-soft); background: var(--surface); color: var(--fg-2); border-radius: var(--radius-pill); min-height: 40px; padding: 0 var(--space-4); box-shadow: var(--elev-ring); }
    .pill-btn:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
    .icon-btn { min-width: 40px; padding: 0; }
    .nav-compact { min-width: 64px; padding-inline: var(--space-3); }
    .side-drawer-btn svg { width: 20px; height: 20px; stroke-width: 2; }
    .side-drawer { position: fixed; inset: var(--topbar-height) auto 0 0; z-index: 15; width: var(--side-drawer-width); pointer-events: none; }
    .side-drawer-scrim { display: none; }
    .side-drawer-panel { width: var(--side-drawer-width); height: 100%; display: grid; align-content: start; gap: 0; padding: 18px var(--space-4); overflow: auto; background: var(--bg); color: var(--fg); border-right: 1px solid var(--border-soft); box-shadow: 1px 0 0 var(--border); transform: translateX(-100%); transition: transform var(--motion-base) var(--ease-standard); pointer-events: auto; }
    .side-drawer.is-open .side-drawer-panel { transform: translateX(0); }
    /* Push (not overlay): content yields the full drawer width and re-centers
       in the remaining space, so the drawer never covers the content. */
    body.side-drawer-open #homePage, body.side-drawer-open #customFilterPage, body.side-drawer-open #poolAllPage, body.side-drawer-open #poolFilterPage,
    body.side-drawer-open #observabilityPage, body.side-drawer-open #poolExplorePage, body.side-drawer-open #settingsPage,
    body.side-drawer-open #xhsFeedPage, body.side-drawer-open #zhihuFeedPage, body.side-drawer-open #biliFeedPage, body.side-drawer-open #youtubeFeedPage,
    body.side-drawer-open #v2exFeedPage, body.side-drawer-open #xiaoyuzhouFeedPage,
    body.side-drawer-open #delightPage, body.side-drawer-open #savedPage, body.side-drawer-open #watchLaterPage, body.side-drawer-open #profilePage,
    body.side-drawer-open #diaryPage, body.side-drawer-open #clonePage, body.side-drawer-open #selfEvolutionPage,
    body.side-drawer-open #libraryPage, body.side-drawer-open #readArchivePage, body.side-drawer-open #chatPage,
    body.side-drawer-open .fatal-banner { margin-left: var(--side-drawer-width); width: calc(100% - var(--side-drawer-width)); max-width: none; }
    .side-drawer-nav { display: grid; gap: 4px; padding: 0 0 var(--space-4); border-bottom: 1px solid var(--border-soft); }
    .side-drawer-nav .nav-action { width: 100%; min-height: 40px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--fg-2); box-shadow: none; text-align: left; }
    .side-drawer-nav .nav-action:hover { background: var(--surface-warm); color: var(--fg); }
    .nav-glyph { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-warm); color: var(--fg-2); font-size: 13px; }
    .side-drawer-nav .nav-action:nth-child(-n + 4) .nav-glyph { background: var(--surface-warm); color: var(--fg-2); }
    .side-section { display: grid; gap: var(--space-3); padding: var(--space-4) 2px; border-bottom: 1px solid var(--border-soft); }
    .side-section h3 { color: var(--fg); font-size: 16px; letter-spacing: -0.01em; }
    .side-section p { margin: 0; color: var(--muted); }
    .side-section .eyebrow { color: var(--muted); }
    .side-drawer-actions { display: grid; gap: var(--space-2); }
    .side-drawer-actions .pill-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; }
    .side-runtime-panel, .side-activity-section { border-bottom-color: var(--border-soft); }
    .side-drawer .hero-status-grid, .side-drawer .metric { background: transparent; border-color: var(--border-soft); }
    .side-drawer .hero-status-grid { padding: 0; border: 0; }
    .side-drawer .hero-status-grid span, .side-drawer .hero-topics { color: var(--muted); }
    .side-drawer .hero-status-grid strong, .side-drawer .hero-topics span, .side-drawer .metric strong { color: var(--fg); }
    .side-drawer .metric-row { gap: var(--space-2); }
    .side-drawer .metric { padding: 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); }
    .side-drawer .activity-list { gap: var(--space-2); margin-top: 0; }
    .side-drawer .activity-item { position: relative; padding: 0 0 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--muted); }
    .side-drawer .activity-item::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--meta); opacity: 0.9; }
    .side-drawer .drawer-actions { margin-top: 0; }
    .side-drawer .small-btn { background: var(--surface); border-color: var(--border-soft); color: var(--fg-2); }
    .pill-btn.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-on); }
    .pill-btn.dark { background: var(--fg); color: var(--surface); border-color: var(--fg); }
    .badge-dot { display: inline-flex; width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--success); margin-right: var(--space-2); }
    /* 旧版桌面约束布局（被下方 改版 v3 满宽布局覆盖，保留作为后备） */
    #homePage, #customFilterPage, #poolAllPage, #poolFilterPage,
    #observabilityPage, #poolExplorePage, #settingsPage,
    #xhsFeedPage, #zhihuFeedPage, #biliFeedPage, #youtubeFeedPage,
    #v2exFeedPage, #xiaoyuzhouFeedPage,
    #delightPage, #savedPage, #watchLaterPage, #profilePage,
    #diaryPage, #clonePage, #selfEvolutionPage,
    #libraryPage, #readArchivePage, #chatPage {
      width: min(100%, calc(var(--recommendation-grid-max) + var(--page-gutter) + var(--page-gutter))); margin: 0 auto; padding: var(--space-6) var(--page-gutter) var(--section-y-tablet);
    }
    body.chat-page-open { overflow-y: hidden; }
    body.chat-page-open .app-shell { height: calc(100vh - var(--topbar-height)); overflow: hidden; }
    .main-col { min-width: 0; }
    @media (min-width: 1181px) {
	      #homePage, #customFilterPage, #poolAllPage, #poolFilterPage,
	      #observabilityPage, #poolExplorePage, #settingsPage,
	      #xhsFeedPage, #zhihuFeedPage, #biliFeedPage, #youtubeFeedPage,
	      #v2exFeedPage, #xiaoyuzhouFeedPage,
	      #delightPage, #savedPage, #watchLaterPage, #profilePage,
	      #diaryPage, #clonePage, #selfEvolutionPage,
	      #libraryPage, #readArchivePage, #chatPage { display: block; }
	      .main-col { display: block; min-width: 0; }
      .delight { width: 100%; max-width: var(--recommendation-grid-max); margin-inline: auto; }
      [data-od-id="recommendations"] { width: 100%; min-width: 0; margin-top: var(--space-6); }
      [data-od-id="recommendations"] .section-head,
      [data-od-id="recommendations"] .filter-row,
      [data-od-id="recommendations"] .load-row { width: 100%; max-width: var(--recommendation-grid-max); margin-inline: auto; }
    }
    .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: var(--space-8); padding: clamp(var(--space-8), 5vw, var(--space-12)); border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-raised); overflow: hidden; align-items: stretch; }
    .hero-copy { min-width: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
    .eyebrow { color: var(--muted); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
    h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); margin: 0; line-height: var(--leading-tight); }
    h1 { font-size: clamp(36px, 5vw, var(--text-4xl)); max-width: 820px; }
    h2 { font-size: clamp(28px, 3vw, var(--text-3xl)); }
    h3 { font-size: var(--text-xl); }
    .lead { max-width: 720px; color: var(--muted); font-size: var(--text-lg); margin: var(--space-4) 0 0; }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-top: var(--space-6); align-self: end; }
    .hero-actions .pill-btn { display: inline-flex; align-items: center; justify-content: center; }
    .hero-panel { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-warm); color: var(--fg); }
    .hero-panel p { margin: 0; color: var(--muted); }
    .hero-status-grid { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border-soft); }
    .hero-status-grid div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; min-width: 0; }
    .hero-status-grid span, .hero-topics { color: var(--muted); font-size: var(--text-sm); }
    .hero-status-grid strong, .hero-topics span { min-width: 0; color: var(--fg); font-weight: 650; overflow-wrap: anywhere; }
    .hero-topics { padding-top: var(--space-1); }
    .metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
    .metric { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-soft); }
    .metric strong { display: block; color: var(--fg); font-family: var(--font-mono); font-size: var(--text-lg); }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin: var(--space-12) 0 var(--space-6); }
    .section-head p { margin: var(--space-1) 0 0; color: var(--muted); }
    .recommendation-actions { align-items: center; }
    .reshuffle-toggle { min-height: 40px; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3) 0 6px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font-size: 13px; white-space: nowrap; box-shadow: var(--elev-ring); cursor: pointer; user-select: none; }
    .reshuffle-toggle input { position: absolute; opacity: 0; pointer-events: none; }
    .reshuffle-switch { position: relative; width: 34px; height: 20px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--surface-warm); box-shadow: inset 0 0 0 1px var(--border-soft); transition: background var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
    .reshuffle-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--elev-ring); transition: transform var(--motion-fast) var(--ease-standard); }
    .reshuffle-toggle input:checked + .reshuffle-switch { background: var(--fg); box-shadow: inset 0 0 0 1px var(--border-soft); }
    .reshuffle-toggle input:checked + .reshuffle-switch::after { transform: translateX(14px); }
    .reshuffle-toggle input:focus-visible + .reshuffle-switch { box-shadow: var(--focus-ring); }
    .reshuffle-toggle:has(input:disabled) { opacity: 0.48; cursor: not-allowed; }
    .filter-row { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); margin-bottom: var(--space-2); scrollbar-width: thin; }
    .chip { white-space: nowrap; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface); color: var(--fg-2); padding: 8px var(--space-4); }
    .chip.is-active { background: var(--fg); color: var(--surface); border-color: var(--fg); }
    .delight { display: grid; grid-template-columns: minmax(280px, 40%) minmax(0, 1fr); gap: var(--space-5); align-items: stretch; margin-top: var(--space-8); padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-warm); overflow: hidden; }
    .delight .thumb { width: 100%; aspect-ratio: 16 / 9; min-height: 0; align-self: center; border-radius: var(--radius-md); box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg), transparent 92%); cursor: pointer; }
    .delight .thumb:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 0 0 1px color-mix(in oklab, var(--fg), transparent 88%); }
    .delight .thumb::after { display: none; }
    .delight .thumb img, .delight .thumb video, .delight .thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
    .delight-body { min-width: 0; min-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-3); align-self: stretch; }
    .delight-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
    .delight-meta .eyebrow { margin: 0; }
    .delight-queue-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 6px; }
    .delight-nav { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; line-height: 1; }
    .icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface); color: var(--fg-2); }
    .delight-nav .icon-btn { width: 26px; height: 26px; font-size: 14px; }
    .delight-queue-tools .ghost-danger { height: 26px; min-height: 26px; padding: 0 9px; font-size: 12px; line-height: 1; }
    .thumb { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--surface-warm); position: relative; overflow: hidden; }
    .thumb::before { content: ""; position: absolute; inset: 18% 22%; border: 1px solid color-mix(in oklab, var(--fg), transparent 88%); border-radius: var(--radius-lg); }
    .thumb::after { content: ""; position: absolute; width: 38px; height: 38px; left: 50%; top: 50%; translate: -50% -50%; border-radius: var(--radius-pill); background: var(--surface); clip-path: polygon(36% 25%, 76% 50%, 36% 75%); }
    .delight .thumb::before { inset: 0; border: 0; border-radius: inherit; background: var(--surface-warm); }
    .thumb.has-image::before { display: none; }
    .thumb.has-image::after { background: color-mix(in oklab, var(--surface), transparent 4%); box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg), transparent 88%); }
    .delight-copy { min-width: 0; align-self: start; }
    .delight-copy h3 { max-width: 760px; overflow-wrap: normal; word-break: normal; text-wrap: pretty; }
    .delight-copy p { margin: var(--space-2) 0 0; color: var(--muted); max-width: 720px; }
    .delight-chat-turns { display: grid; gap: 8px; margin-top: var(--space-3); max-height: 220px; overflow: auto; padding-right: 2px; }
    .delight-chat-turns[hidden] { display: none; }
    .delight-turn-bubble { width: fit-content; max-width: min(100%, 520px); border: 1px solid var(--border); border-radius: 14px; padding: 8px 10px; font-size: 13px; line-height: 1.45; background: var(--surface); color: var(--fg-2); }
    .delight-turn-bubble.is-user { justify-self: end; background: var(--surface); border-color: var(--border-soft); }
    .delight-turn-bubble.is-assistant { justify-self: start; background: color-mix(in oklab, var(--surface), var(--surface-warm) 55%); }
    .delight-turn-bubble.is-thinking { color: var(--muted); font-style: italic; }
    .delight-turn-bubble.is-error { color: var(--danger); border-color: color-mix(in oklab, var(--danger), var(--border-soft) 68%); }
    .delight-actions { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
    .delight-main-actions, .delight-feedback-actions { min-width: 0; align-items: center; }
    .delight-main-actions { order: 2; flex: 0 0 212px; display: grid; grid-template-columns: 116px 88px; gap: var(--space-2); transition: grid-template-columns var(--motion-base) var(--ease-standard), gap var(--motion-base) var(--ease-standard), flex-basis var(--motion-base) var(--ease-standard); }
    .delight-main-actions.is-composing { flex: 1 1 260px; grid-template-columns: minmax(0, 1fr) 38px; gap: var(--space-2); }
    .delight-main-actions [data-delight="view"] { grid-column: 1; grid-row: 1; }
    .delight-main-actions .chat-action { grid-column: 2; grid-row: 1; }
    .delight-main-actions .small-btn { min-height: 40px; border-radius: var(--radius-pill); font-weight: 650; letter-spacing: 0.01em; }
    .delight-main-actions .small-btn:first-child { width: 100%; padding: 0 18px; background: var(--accent); border-color: var(--accent); color: var(--accent-on); transition: max-width var(--motion-base) var(--ease-standard), opacity var(--motion-base) var(--ease-standard), padding var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard); }
    .delight-main-actions .small-btn:last-child { width: 100%; min-width: 0; padding: 0 14px; background: var(--fg); border-color: var(--fg); color: var(--surface); }
    .delight-main-actions.is-composing [data-delight="view"] { max-width: 0; padding-inline: 0; border-color: transparent; opacity: 0; overflow: hidden; pointer-events: none; }
    .delight-main-actions.is-composing .comment-field { max-width: 100%; opacity: 1; transform: translateX(0); pointer-events: auto; }
    .delight-main-actions .chat-action.is-send { width: 38px; min-width: 38px; padding: 0; }
    .delight-main-actions .chat-action.is-send svg { width: 17px; height: 17px; stroke-width: 2.2; }
    .delight-feedback-actions.card-feedback-icons { order: 1; flex: 0 0 auto; justify-self: auto; justify-content: center; max-width: none; width: auto; height: 40px; min-height: 40px; padding: 3px 8px; gap: 6px; }
    .delight-actions .small-btn { min-width: 0; }
    .delight-feedback-actions .feedback-icon-btn { flex: 0 0 26px; width: 26px; height: 26px; min-height: 26px; }
    .delight-feedback-actions .feedback-icon-btn svg { width: 14px; height: 14px; }
    .delight-feedback-actions .feedback-separator { font-size: 12px; transform: none; }
    .small-btn.ghost-danger { color: var(--danger); background: color-mix(in oklab, var(--danger), var(--surface) 92%); border-color: color-mix(in oklab, var(--danger), var(--border-soft) 70%); }
    .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--recommendation-card-min)), var(--recommendation-card-max))); justify-content: center; gap: var(--space-4); max-width: var(--recommendation-grid-max); margin-inline: auto; }
    .video-card { min-width: 0; display: grid; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--elev-ring); transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), opacity var(--motion-base) var(--ease-standard); }
    .video-card:hover { transform: translateY(-2px); box-shadow: var(--elev-raised); }
    .video-card.is-removing { opacity: 0; transform: translateY(6px) scale(0.98); pointer-events: none; }
    .cover { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-warm); }
    .cover[data-platform="youtube"],
    .cover[data-platform="douyin"],
    .cover[data-platform="xiaohongshu"],
    .cover[data-platform="twitter"],
    .cover[data-platform="zhihu"] { background: var(--surface-warm); }
    .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cover.is-text-card { display: flex; align-items: flex-start; justify-content: flex-start; min-height: 132px; padding: var(--space-3) calc(var(--space-3) + 76px) var(--space-3) var(--space-3); text-align: left; }
    .cover-text { margin: 0; color: var(--fg-2); font-size: var(--text-sm); line-height: 1.55; font-weight: 550; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
    .platform { position: absolute; right: var(--space-2); top: var(--space-2); border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border-soft); color: var(--muted); padding: 3px 9px; font-size: 11px; font-weight: 500; }
    .video-title { font-family: var(--font-body); font-weight: 550; font-size: var(--text-base); line-height: 1.35; margin: 0; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .video-meta { color: var(--muted); font-size: var(--text-sm); margin: 0; }
    .reason { --reason-line-height: 1.5; --reason-lines: 4; color: var(--fg-2); font-size: var(--text-sm); line-height: var(--reason-line-height); margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--border); display: block; overflow: hidden; cursor: pointer; }
    .reason-text { display: -webkit-box; -webkit-line-clamp: var(--reason-lines); -webkit-box-orient: vertical; max-height: calc(1em * var(--reason-line-height) * var(--reason-lines)); overflow: hidden; }
    .reason:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .reason.is-expanded { overflow: visible; }
    .reason.is-expanded .reason-text { display: block; -webkit-line-clamp: unset; max-height: none; overflow: visible; }
    .card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .video-card .card-actions { display: grid; grid-template-columns: auto minmax(96px, auto); align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 0; transition: grid-template-columns var(--motion-base) var(--ease-standard), gap var(--motion-base) var(--ease-standard); }
    .video-card .card-actions.is-composing { grid-template-columns: minmax(0, 1fr) 38px; gap: var(--space-2); }
    .card-feedback-icons { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; max-width: 220px; padding: 3px 7px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--bg); opacity: 1; transform: scale(1); overflow: hidden; transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard), max-width var(--motion-base) var(--ease-standard), padding var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard); }
    .card-actions.is-composing .card-feedback-icons { max-width: 0; padding-inline: 0; border-color: transparent; opacity: 0; transform: scale(0.9); pointer-events: none; }
    .comment-field { grid-column: 1; grid-row: 1; min-width: 0; max-width: 0; opacity: 0; transform: translateX(8px); pointer-events: none; overflow: hidden; transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard), max-width var(--motion-base) var(--ease-standard); }
    .card-actions.is-composing .comment-field { max-width: 100%; opacity: 1; transform: translateX(0); pointer-events: auto; }
    .comment-field input { display: block; width: 100%; height: 38px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--bg); color: var(--fg); padding: 0 var(--space-4); min-width: 0; appearance: none; }
    .comment-field input:focus-visible { border-color: color-mix(in oklab, var(--accent), var(--border-soft) 45%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent), transparent 35%); }
    .feedback-icon-btn { width: 32px; height: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); }
    .feedback-icon-btn svg { width: 16px; height: 16px; stroke-width: 2; }
    .feedback-icon-btn:hover { background: var(--surface); color: var(--fg); }
    .feedback-icon-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
    .feedback-separator { color: var(--meta); font-size: 13px; line-height: 1; transform: translateY(-1px); }
    .small-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border: 1px solid var(--border-soft); background: var(--surface); color: var(--fg-2); border-radius: var(--radius-pill); padding: 7px var(--space-3); font-size: var(--text-sm); white-space: nowrap; }
    .video-card .small-btn { width: auto; min-height: 38px; padding: 0 var(--space-4); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-on); font-size: 13px; font-weight: 650; transition: width var(--motion-base) var(--ease-standard), min-width var(--motion-base) var(--ease-standard), padding var(--motion-base) var(--ease-standard), background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
    .video-card .small-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on); }
    .video-card .chat-action.is-send { width: 38px; min-width: 38px; padding: 0; }
    .video-card .chat-action.is-send svg { width: 17px; height: 17px; stroke-width: 2.2; }

/* ── 小红书风格推荐卡片 ──────────────────────────────── */
.card-grid.is-minimal {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 100%;
}
.video-card.is-minimal {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
}
.video-card.is-minimal:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-color: #e0e0e0; }
.video-card.is-minimal .video-card-cover {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-warm, #f5f5f5);
}
.video-card.is-minimal .video-card-cover img {
  width: 100%;
  display: block;
}
.video-card.is-minimal .video-card-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0;
  font-family: "STKaiti", "KaiTi", "楷体", serif;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.video-card.is-minimal .video-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #999;
  margin-top: 4px;
  font-family: "STKaiti", "KaiTi", "楷体", serif;
}
.video-card.is-minimal .video-card-author {
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.video-card.is-minimal .video-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 3px;
  background: #f0f0f0;
  color: #666;
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
}
.video-card.is-minimal .video-card-reason {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
  margin: 6px 0 0;
  font-family: "STKaiti", "KaiTi", "楷体", serif;
  font-style: italic;
  padding-left: 8px;
  border-left: 2px solid #e0e0e0;
}
.video-card.is-minimal .video-card-stats {
  font-size: 12px;
  color: #aaa;
  margin: 4px 0 0;
  font-family: "STKaiti", "KaiTi", "楷体", serif;
}
.video-card.is-minimal .video-card-actions {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 4px;
}
.video-card.is-minimal .video-card-actions .feedback-icon-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #bbb;
}
.video-card.is-minimal .video-card-actions .feedback-icon-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}
.video-card.is-minimal .video-card-actions .feedback-icon-btn:hover {
  background: transparent;
  color: #666;
}
.video-card.is-minimal .video-card-actions .feedback-icon-btn[aria-pressed="true"] {
  color: var(--gold);
  background: transparent;
}
.video-card.is-minimal .video-card-actions .watch-later-btn[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold); }
.video-card.is-minimal .video-card-actions .favorite-btn[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold); }
/* 响应式：三列 → 两列 → 单列 */
@media (max-width: 900px) {
  .card-grid.is-minimal { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 620px) {
  .card-grid.is-minimal { grid-template-columns: 1fr; gap: 12px; }
}
    .composer-cancel { display: none; }
    .small-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
    .small-btn:disabled, .icon-btn:disabled { cursor: not-allowed; opacity: 0.42; }
    .delight-queue-tools .icon-btn,
    .delight-queue-tools .small-btn.ghost-danger { height: 32px; min-height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
    .delight-queue-tools .icon-btn { width: 32px; min-width: 32px; padding: 0; }
    .delight-queue-tools .small-btn.ghost-danger { width: auto; padding: 0 11px; font-size: 12px; }
    .chat-input input, .settings-field input, .settings-field select, .settings-field textarea { border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); color: var(--fg); padding: 10px var(--space-3); min-width: 0; }
    .status-line { min-height: 20px; color: var(--muted); font-size: 13px; margin: 0; }
    .status-line:empty { display: none; }
    .rail { min-width: 0; display: grid; gap: var(--space-5); align-content: start; order: 2; }
    .panel { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-6); box-shadow: var(--elev-ring); }
    .panel, .video-card, .activity-item, .profile-item, .message-item { overflow-wrap: anywhere; }
    .panel h3 { margin-bottom: var(--space-3); }
    .kv { display: grid; gap: var(--space-3); }
    .kv-row { min-width: 0; display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border); color: var(--muted); }
    .kv-row strong { min-width: 0; max-width: 60%; color: var(--fg); font-family: var(--font-mono); text-align: right; overflow-wrap: anywhere; }
    .activity-list, .profile-list, .message-list { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
    .activity-item, .profile-item, .message-item, .chat-bubble { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); padding: var(--space-3); }
    .activity-item p, .profile-item p, .message-item p { margin: 0; }
    .message-list { gap: 12px; }
    .message-item { display: grid; gap: 8px; padding: 18px 20px; border-color: var(--border-soft); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px color-mix(in oklab, var(--border-soft), transparent 35%), rgba(24, 24, 27, 0.03) 0 1px 2px; }
    .message-item.is-interest-probe { background: color-mix(in oklab, var(--surface), #f3b15f 8%); border-color: color-mix(in oklab, var(--accent), var(--border-soft) 62%); }
    .message-item.is-challenge-probe { background: color-mix(in oklab, var(--surface), #8b5cf6 8%); border-color: color-mix(in oklab, #7c3aed, var(--border-soft) 68%); }
    .message-item.is-avoidance-probe { background: color-mix(in oklab, var(--surface), #60a5fa 8%); border-color: color-mix(in oklab, #2563eb, var(--border-soft) 68%); }
    .message-item.is-challenge-probe .eyebrow,
    .message-item.is-challenge-probe h3 { color: #6d28d9; }
    .message-item.is-avoidance-probe .eyebrow,
    .message-item.is-avoidance-probe h3 { color: #1d4ed8; }
    .message-item .eyebrow { margin: 0; }
    .message-item h3 { margin: -2px 0 0; font-size: 22px; line-height: 1.18; }
    .message-item .video-meta { line-height: 1.45; }
    .message-item .profile-chip-row { gap: 7px; }
    .message-item .profile-chip-row .chip { padding: 6px 12px; border-color: color-mix(in oklab, var(--border-soft), transparent 22%); background: color-mix(in oklab, var(--bg), var(--surface) 28%); color: var(--muted); font-size: 14px; line-height: 1.25; }
    .message-note { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); }
    .probe-kind-copy { color: var(--muted); font-weight: 650; }
    .message-item.is-challenge-probe .probe-kind-copy { color: #6d28d9; }
    .message-item.is-avoidance-probe .probe-kind-copy { color: #1d4ed8; }
    .message-note.is-success { min-height: 38px; display: flex; align-items: center; border: 1px solid color-mix(in oklab, var(--accent), var(--border) 58%); background: color-mix(in oklab, var(--accent), var(--surface) 88%); color: var(--fg); }
    .message-item.is-resolved { border-color: color-mix(in oklab, var(--accent), var(--border) 64%); background: color-mix(in oklab, var(--surface), var(--accent) 4%); }
    .message-item.is-resolving .message-card-actions { opacity: 0.72; pointer-events: none; }
    .message-item.is-dismissing { opacity: 0; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; overflow: hidden; pointer-events: none; }
    .message-card-actions { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 2px; }
    .message-card-actions.is-result { justify-content: stretch; }
    .message-action-result { min-height: 38px; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 var(--space-3); border: 1px solid color-mix(in oklab, var(--accent), var(--border) 58%); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--accent), var(--surface) 88%); color: var(--fg); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .message-card-actions .card-feedback-icons { grid-column: auto; grid-row: auto; flex: 0 0 auto; max-width: none; padding: 3px 7px; gap: 10px; }
    .message-primary-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; }
    .message-primary-actions .small-btn { min-height: 38px; padding: 0 var(--space-4); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-on); font-size: 13px; font-weight: 650; }
    .message-primary-actions .small-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on); }
    .message-primary-actions .small-btn.secondary { border-color: var(--border-soft); background: var(--surface); color: var(--fg-2); }
    .message-primary-actions .small-btn.secondary:hover { background: var(--surface-warm); border-color: var(--border-soft); color: var(--fg); }
    .message-item .inline-chat-area { display: grid; gap: 10px; margin-top: 2px; }
    .message-item .inline-chat-turns { display: grid; gap: 8px; }
    .message-item .inline-chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }
    .message-item .inline-chat-input { width: 100%; min-width: 0; min-height: 42px; max-height: 120px; resize: vertical; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg); color: var(--fg); padding: 10px 12px; font: inherit; line-height: 1.45; }
    .message-item .inline-chat-input:focus-visible { outline: none; border-color: color-mix(in oklab, var(--accent), var(--border-soft) 42%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent), transparent 38%); }
    .message-item .inline-chat-send,
    .message-item .inline-chat-cancel { min-height: 42px; border-radius: var(--radius-pill); padding: 0 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
    .message-item .inline-chat-send { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-on); }
    .message-item .inline-chat-cancel { border: 1px solid var(--border-soft); background: var(--surface); color: var(--fg-2); }
    .message-item .inline-chat-send:disabled,
    .message-item .inline-chat-cancel:disabled,
    .message-item .inline-chat-input:disabled { opacity: 0.62; cursor: default; }
    .message-item .inline-chat-bubble { width: fit-content; max-width: 92%; padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-soft); background: var(--bg); color: var(--fg-2); font-size: var(--text-sm); line-height: 1.45; }
    .message-item .inline-chat-bubble.user { justify-self: end; background: var(--surface-warm); color: var(--fg); }
    .message-item .inline-chat-bubble.thinking { color: var(--muted); animation: pulse 1.5s ease-in-out infinite; }
    .message-item .inline-chat-reply { justify-self: start; background: var(--surface); color: var(--fg); }
    .message-item .inline-chat-bubble.error { border-color: color-mix(in oklab, var(--danger), var(--border-soft) 55%); background: color-mix(in oklab, var(--danger), var(--surface) 90%); color: var(--danger); }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
    .message-chat-view { display: grid; grid-template-rows: auto auto auto auto minmax(160px, 1fr) auto; gap: var(--space-3); min-height: calc(100vh - 48px); }
    .message-chat-view[hidden] { display: none; }
    .message-chat-head { align-items: center; margin-bottom: 0; }
    .message-chat-head .small-btn { min-height: 34px; }
    #messagesDrawer.is-chatting #messagesHead,
    #messagesDrawer.is-chatting #messageList { display: none; }
    #messageChatTitle { margin: 0; max-width: none; font-size: clamp(34px, 6vw, 44px); line-height: 1.12; text-wrap: balance; }
    #messageChatContext { align-self: start; margin: 0; width: 100%; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
    #messageChatLog { align-content: start; min-height: 0; }
    #messageChatLog .chat-bubble { max-width: min(100%, 560px); }
    #messageChatLog .chat-bubble.user { justify-self: end; margin-left: 0; }
    #messageChatLog .chat-bubble.agent { justify-self: start; margin-right: 0; }
    @media (max-width: 520px) { .message-card-actions { align-items: stretch; flex-direction: column; } .message-card-actions .card-feedback-icons, .message-primary-actions { width: 100%; justify-content: center; } .message-primary-actions .small-btn { flex: 1; } }
    .profile-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .profile-section-title { margin: var(--space-3) 0 var(--space-2); color: var(--fg); font-size: var(--text-base); font-weight: 700; }
    .content-page { width: 100%; max-width: min(1120px, var(--recommendation-grid-max)); margin-inline: auto; }
/* 注意：以上 .content-page 的 max-width 约束被下方 改版 v3 的页面 ID 专用规则覆盖 */
    .content-page-head, .profile-page-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
    .content-page-head h2, .profile-page-head h2 { margin-top: var(--space-1); }
    /* 合并标题：隐藏与全局 tab 重复的页面标题/eyebrow/描述文字块，
       保留各页右侧操作按钮（克隆站/聊天/自进化/旅行/专题）。 */
    .content-page-head > div:first-child { display: none; }
    /* 标题块隐藏后，head 只剩右侧操作按钮/切换控件，靠右对齐更合理 */
    .content-page-head { justify-content: flex-end; }
    .profile-page-list { gap: var(--space-4); }
    .profile-page-actions { margin-top: var(--space-5); justify-content: start; }
    .chat-page { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
    .chat-page .content-page-head { margin-bottom: var(--space-5); }
    .chat-page .chat-log { min-height: 0; margin: 0 0 var(--space-4); align-content: start; overflow: auto; }
    .chat-page .chat-input { align-self: end; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--elev-raised); }
    .settings-page .settings-grid { margin-top: 0; }
    #profileDetails { gap: var(--space-4); }
    .profile-layer { display: grid; gap: var(--space-3); }
    .profile-layer-label { margin: var(--space-2) 0 0; padding: var(--space-3) 0 var(--space-1); border-top: 1px solid var(--border-soft); color: var(--muted); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
    .profile-item h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); line-height: 1.25; }
    .profile-item .video-meta { line-height: 1.65; }
    .profile-portrait-block { background: var(--surface); }
    .profile-portrait-copy { display: grid; gap: var(--space-2); }
    .profile-portrait-copy p { margin: 0; }
    .profile-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .profile-chip-list .chip { background: var(--surface); }
    .profile-interest-tree, .profile-card-list, .profile-bars, .profile-context { display: grid; gap: var(--space-2); }
    .profile-domain, .profile-insight, .profile-memory, .profile-context-row { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: var(--space-3); }
    .profile-domain-head, .profile-insight-head, .profile-memory-head, .profile-context-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
    .profile-context-row > span { flex: 0 0 auto; white-space: nowrap; }
    .profile-context-row > strong { min-width: 0; text-align: right; overflow-wrap: anywhere; }
    .profile-domain-title, .profile-insight-title { font-weight: 750; color: var(--fg); }
    .profile-domain-weight, .profile-confidence, .profile-memory-meta { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
    .insight-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
    .profile-insight-evidence { margin-top: var(--space-2); }
    .profile-insight-evidence summary {
      display: inline-flex; align-items: center; gap: 4px;
      list-style: none; cursor: pointer; user-select: none;
      padding: 2px 9px; border: 1px solid var(--border); border-radius: var(--radius-pill, 20px);
      color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs);
    }
    .profile-insight-evidence summary::-webkit-details-marker { display: none; }
    .profile-insight-evidence summary::before { content: "▸"; font-size: 10px; }
    .profile-insight-evidence[open] summary::before { content: "▾"; }
    .profile-insight-evidence summary:hover { border-color: var(--accent, var(--fg)); color: var(--fg); }
    .profile-insight-evidence ul { margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-4); list-style: disc; }
    .profile-insight-evidence li { color: var(--meta); font-size: var(--text-sm); line-height: var(--leading-body, 1.55); padding: 3px 0; border-bottom: 1px dashed var(--border); overflow-wrap: anywhere; }
    .profile-insight-evidence li:last-child { border-bottom: none; }
    .insight-actions .pill-btn { min-height: 28px; padding: 0 var(--space-3); font-size: var(--text-xs); }
    .insight-actions .pill-btn:disabled { opacity: 0.5; cursor: default; }
    .profile-domain .profile-chip-list { margin-top: var(--space-2); }
    .speculative-list { display: grid; gap: var(--space-2); }
    .speculative-item { display: grid; gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: var(--space-3); }
    .speculative-item.is-status-deprecated, .speculative-item.is-status-rejected { opacity: 0.62; }
    .spec-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); }
    .spec-domain { min-width: 0; color: var(--fg); font-weight: 750; overflow-wrap: anywhere; }
    .spec-status, .spec-progress, .spec-confidence-label, .spec-specific-count { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
    .spec-status { padding: 2px 7px; border-radius: var(--radius-pill); background: var(--surface-warm); color: var(--fg-2); font-family: var(--font-body); font-weight: 700; }
    .spec-confidence-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
    .spec-confidence-bar { height: 6px; border-radius: var(--radius-pill); background: var(--surface-warm); overflow: hidden; }
    .spec-confidence-fill { height: 100%; border-radius: inherit; background: var(--accent); }
    .spec-specifics { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .spec-specific-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: var(--radius-pill); background: var(--bg); color: var(--muted); font-size: var(--text-xs); }
    .spec-specific-count { display: inline-grid; min-width: 16px; height: 16px; place-items: center; padding: 0 4px; border-radius: var(--radius-pill); background: var(--surface-warm); color: var(--fg-2); }
    .spec-help { margin: 0; color: var(--meta); font-size: var(--text-xs); }
    .spec-actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
    .spec-actions .probe-btn { min-height: 30px; padding: 5px 11px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--bg); color: var(--fg-2); font-size: var(--text-xs); font-weight: 700; }
    .spec-actions .probe-btn.is-confirm { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
    .spec-result { margin: 0; color: var(--accent); font-size: var(--text-sm); }
    .profile-meter { display: grid; gap: var(--space-1); }
    .profile-style-bars > .profile-meter { padding-inline: var(--space-3); }
    .profile-style-bars > .profile-context-row + .profile-meter { margin-top: var(--space-1); }
    .profile-meter-head { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
    .profile-meter-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-warm); overflow: hidden; }
    .profile-meter-fill { height: 100%; border-radius: inherit; background: var(--accent); }
    .mbti-block { display: grid; gap: var(--space-3); }
    .mbti-type-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
    .mbti-type-label { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 750; line-height: 1; }
    .mbti-confidence { color: var(--muted); font-size: var(--text-sm); }
    .mbti-dimensions { display: grid; gap: var(--space-3); }
    .mbti-axis { display: grid; grid-template-columns: 72px minmax(140px, 1fr) 72px 48px; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
    .mbti-axis-side { color: var(--muted); white-space: nowrap; }
    .mbti-axis-side.is-active { color: var(--fg); font-weight: 750; }
    .mbti-axis-track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--surface-warm); overflow: visible; }
    .mbti-axis-track::before { content: ""; position: absolute; left: 50%; top: -3px; width: 1px; height: 16px; background: var(--border-soft); }
    .mbti-axis-fill { position: absolute; top: 0; left: var(--start); width: var(--width); height: 100%; border-radius: var(--radius-pill); background: var(--accent); }
    .mbti-axis-marker { position: absolute; top: 50%; left: var(--marker); width: 14px; height: 14px; border-radius: 50%; background: var(--fg); border: 2px solid var(--surface); transform: translate(-50%, -50%); box-shadow: var(--elev-ring); }
    .mbti-axis-pct { color: var(--fg); font-family: var(--font-mono); font-size: var(--text-xs); text-align: right; }
    @media (max-width: 560px) { .mbti-axis { grid-template-columns: 48px minmax(96px, 1fr) 48px 40px; } .mbti-axis-side span { display: none; } }
    .drawer-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
    .empty-state { border: 1px dashed var(--border-soft); border-radius: var(--radius-md); padding: var(--space-4); color: var(--muted); background: var(--surface); }
    .card-grid .empty-state { grid-column: 1 / -1; }
    .init-onboarding { grid-column: 1 / -1; width: min(100%, 760px); margin-inline: auto; display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--elev-ring); }
    .init-onboarding-copy { display: grid; gap: var(--space-2); }
    .init-onboarding-copy h3 { font-size: clamp(24px, 3vw, 36px); }
    .init-sources { display: grid; gap: var(--space-2); }
    .init-sources-title { margin: 0; color: var(--fg); font-weight: 750; }
    .init-source-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 10px var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--fg-2); font-size: var(--text-sm); }
    .init-source-row input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent); }
    .init-sources-hint { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
    .init-checklist { list-style: none; display: grid; gap: var(--space-2); padding: 0; margin: 0; }
    .init-checklist li { min-width: 0; padding: 10px var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); }
    .init-row { display: flex; align-items: center; gap: var(--space-2); color: var(--fg); font-size: var(--text-sm); font-weight: 700; }
    .init-mark { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--surface-warm); color: var(--muted); font-weight: 900; }
    .init-ok .init-mark { background: color-mix(in oklab, var(--success), var(--surface) 84%); color: var(--success); }
    .init-missing.init-hard .init-mark { background: color-mix(in oklab, var(--danger), var(--surface) 84%); color: var(--danger); }
    .init-missing.init-soft .init-mark { background: color-mix(in oklab, var(--warn), var(--surface) 84%); color: color-mix(in oklab, var(--warn), black 24%); }
    .init-hint, .init-hint-row { margin: 6px 0 0 30px; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
    .init-progress { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); }
    .init-progress-track { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-warm); }
    .init-progress-fill { height: 100%; border-radius: inherit; background: var(--fg); transition: width var(--motion-base) var(--ease-standard); }
    .init-progress p, .init-reason { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
    .init-reason { padding: 10px var(--space-3); border: 1px solid color-mix(in oklab, var(--danger), var(--border) 65%); border-radius: var(--radius-md); background: color-mix(in oklab, var(--danger), var(--surface) 92%); color: var(--danger); }
    .init-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .inline-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); grid-column: 1 / -1; }
    .inline-row .settings-field { min-width: 0; }
    [data-od-id="profile-rail"] .eyebrow { margin: 0 0 var(--space-2); }
    [data-od-id="profile-rail"] h3 { margin: 0 0 var(--space-3); }
    [data-od-id="profile-rail"] #profilePortrait { margin: 0 0 var(--space-4); line-height: 1.55; }
    [data-od-id="profile-rail"] .profile-chip-row { min-width: 0; margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); column-gap: 6px; row-gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in oklab, var(--surface), var(--bg) 42%); }
    [data-od-id="profile-rail"] .profile-chip-row:empty { display: none; }
    [data-od-id="profile-rail"] .profile-chip-row .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; padding: 3px 7px; font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--fg-2); background: var(--surface); border-color: var(--border-soft); }
    [data-od-id="profile-rail"] .kv { gap: 0; }
    .drawer, .overlay { position: fixed; inset: 0; z-index: 60; display: none; }
    .drawer.is-open, .overlay.is-open { display: block; }
    .scrim { position: absolute; inset: 0; background: color-mix(in oklab, var(--fg), transparent 45%); }
    .drawer-panel { position: absolute; right: 0; top: 0; width: min(560px, 100%); height: 100%; background: var(--bg); padding: var(--space-6); overflow: auto; box-shadow: var(--elev-raised); }
    .modal-panel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(960px, calc(100% - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: var(--bg); border-radius: 16px; padding: var(--space-6); box-shadow: var(--elev-raised); }
    .drawer-head, .modal-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
    .chat-log { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
    .chat-bubble.user { margin-left: 12%; background: var(--surface-warm); }
    .chat-bubble.agent { margin-right: 12%; background: var(--surface); }
    /* RAG citation badge: hint that this answer was grounded in the user's
       crawled library. Kept quiet — hairline top rule, muted text, no chrome. */
    .chat-refs { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; cursor: default; }
    .chat-input { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); position: sticky; bottom: 0; background: var(--bg); padding-top: var(--space-3); }
    .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
    .settings-tabs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-1); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface); }
    .settings-tab { min-height: 38px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted); font-weight: 750; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
    .settings-tab.is-active { background: var(--fg); color: var(--surface); }
    .settings-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
    .settings-panel[hidden] { display: none; }
    .settings-subtabs { grid-column: 1 / -1; display: inline-flex; align-items: center; width: fit-content; margin-top: calc(-1 * var(--space-2)); padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--surface), var(--bg) 45%); }
    .settings-subtab { min-height: 26px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
    .settings-subtab.is-active { background: var(--surface-warm); color: var(--fg); box-shadow: inset 0 0 0 1px var(--border-soft); }
    .settings-subpanel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
    .settings-subpanel[hidden] { display: none; }
    .settings-field { display: grid; gap: var(--space-2); }
    .settings-field.full { grid-column: 1 / -1; }
    .settings-field label { color: var(--muted); font-size: var(--text-sm); }
    .settings-probe-row { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
    .settings-probe-status { flex: 1 1 240px; min-width: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; }
    .settings-probe-status[data-tone="success"] { color: var(--success); }
    .settings-probe-status[data-tone="error"] { color: var(--danger); }
    .settings-section-title { grid-column: 1 / -1; margin: var(--space-2) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-soft); color: var(--fg); font-weight: 750; }
    .settings-panel .settings-section-title:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
    .settings-switch-field { align-items: start; grid-template-columns: minmax(180px, 1fr) auto; gap: var(--space-2) var(--space-4); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--surface), var(--bg) 42%); }
    .settings-switch-field > span:first-child { color: var(--fg); font-weight: 700; }
    .settings-switch-copy { color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
    .settings-toggle-inline { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; box-shadow: none; }
    .settings-note-inline { grid-column: 1 / -1; margin: -6px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
    .source-status-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .source-status-row { min-width: 0; display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--surface), var(--bg) 35%); transition: border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); }
    .source-status-row[data-source-enabled="false"] { background: color-mix(in oklab, var(--surface), var(--bg) 55%); }
    .source-status-row[data-access-tone="warning"] { border-color: color-mix(in oklab, var(--warn), var(--border-soft) 64%); }
    .source-status-row[data-access-tone="danger"] { border-color: color-mix(in oklab, var(--danger), var(--border-soft) 58%); }
    .source-status-row[data-access-tone="pending"], .source-row-unsaved { border-color: color-mix(in oklab, #3898ec, var(--border-soft) 54%); background: color-mix(in oklab, var(--surface), #3898ec 6%); }
    .source-status-head { min-width: 0; display: grid; grid-template-columns: minmax(96px, 1fr) auto; align-items: start; gap: var(--space-2); }
    .source-status-head strong { min-width: 0; color: var(--fg); font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
    .source-status-badges { min-width: 0; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
    .source-source-badge, .source-access-badge { max-width: 100%; display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface); color: var(--fg-2); font-size: 12px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
    .source-source-badge[data-tone="enabled"], .source-access-badge[data-tone="ready"] { border-color: color-mix(in oklab, var(--success), var(--border-soft) 55%); background: color-mix(in oklab, var(--surface), var(--success) 10%); color: color-mix(in oklab, var(--success), var(--fg) 34%); }
    .source-source-badge[data-tone="disabled"], .source-access-badge[data-tone="public"], .source-source-badge[data-tone="muted"], .source-access-badge[data-tone="muted"] { background: color-mix(in oklab, var(--surface), var(--bg) 52%); color: var(--muted); }
    .source-source-badge[data-tone="pending"], .source-access-badge[data-tone="pending"] { border-color: color-mix(in oklab, #3898ec, var(--border-soft) 45%); background: color-mix(in oklab, var(--surface), #3898ec 10%); color: #246aa6; }
    .source-access-badge[data-tone="warning"] { border-color: color-mix(in oklab, var(--warn), var(--border-soft) 48%); background: color-mix(in oklab, var(--surface), var(--warn) 16%); color: color-mix(in oklab, #8a5a00, var(--fg) 18%); }
    .source-access-badge[data-tone="danger"] { border-color: color-mix(in oklab, var(--danger), var(--border-soft) 48%); background: color-mix(in oklab, var(--surface), var(--danger) 10%); color: var(--danger); }
    .source-status-row .src-detail { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; }
    .source-credential-list { grid-column: 1 / -1; display: grid; gap: var(--space-2); }
    .source-credential-row { min-width: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--surface), var(--bg) 42%); overflow: hidden; }
    .source-credential-row summary { cursor: pointer; display: grid; grid-template-columns: minmax(96px, 1fr) auto; align-items: center; gap: var(--space-2); min-width: 0; padding: 10px var(--space-3); color: var(--fg); }
    .source-credential-row summary::-webkit-details-marker { color: var(--meta); }
    .source-credential-row summary strong { min-width: 0; overflow-wrap: anywhere; }
    .source-credential-summary { min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.35; text-align: right; overflow-wrap: anywhere; }
    .source-credential-row[data-available="true"] .source-credential-summary { color: color-mix(in oklab, var(--success), var(--fg) 36%); }
    .source-credential-value { width: calc(100% - 24px); min-height: 92px; margin: 0 var(--space-3) var(--space-3); font-family: var(--font-mono); font-size: 12px; line-height: 1.45; resize: vertical; white-space: pre; }
    .toast { position: fixed; left: 50%; bottom: var(--space-6); translate: -50% 0; z-index: 90; display: none; max-width: min(560px, calc(100% - 32px)); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); background: var(--fg); color: var(--surface); box-shadow: var(--elev-raised); }
    .toast.is-open { display: block; }
    .fatal-banner { display: none; margin: var(--space-4) clamp(var(--space-4), 3vw, var(--space-8)) 0; padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in oklab, var(--danger), var(--border-soft) 55%); border-radius: var(--radius-md); background: color-mix(in oklab, var(--danger), var(--surface) 92%); color: var(--fg); }
    .fatal-banner.is-open { display: block; }
    .load-row { display: flex; justify-content: center; margin-top: var(--space-8); }
    .mobile-menu-btn, .mobile-menu, .mobile-back-btn { display: none; }
    .mobile-menu.is-open { position: fixed; inset: 0; z-index: 70; display: block; background: var(--bg); }
    .mobile-menu-panel { height: 100%; overflow: auto; padding: var(--space-5); display: grid; align-content: start; gap: var(--space-4); }
    .mobile-menu-head, .mobile-summary-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
    .mobile-menu-head h2 { font-size: clamp(30px, 8vw, 44px); }
    .mobile-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--elev-ring); }
    .mobile-search input { min-width: 0; border: 0; background: transparent; padding: 0 var(--space-2); color: var(--fg); }
    .mobile-menu-list { display: grid; gap: var(--space-2); }
    .mobile-menu-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; text-align: left; padding: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface); color: var(--fg); box-shadow: var(--elev-ring); }
    .mobile-menu-item::after { content: "›"; color: var(--meta); font-size: 24px; line-height: 1; }
    .mobile-menu-item span { font-weight: 750; }
    .mobile-menu-item small { grid-column: 1; color: var(--muted); font-size: var(--text-sm); }
    .mobile-summary-card { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--elev-ring); }
    .mobile-summary-card h3, .mobile-summary-card p { margin: 0; }
    .mobile-summary-card .profile-chip-row { min-width: 0; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in oklab, var(--surface), var(--bg) 42%); }
    .mobile-summary-card .profile-chip-row:empty { display: none; }
    .mobile-summary-card .profile-chip-row .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding: 3px 7px; font-size: 13px; color: var(--fg-2); background: var(--surface); border-color: var(--border-soft); }
    .mobile-summary-card .activity-list { margin-top: 0; }

    @media (max-width: 1180px) {
      .topbar { grid-template-columns: minmax(180px, auto) minmax(220px, 1fr) auto; }
      .brand-sub, #statusLabel, .gh-star-copy { display: none; }
      .backend-status-pill { width: 38px; padding: 0; justify-content: center; }
      .backend-status-pill .badge-dot { margin-right: 0; }
      .gh-star-left { padding: 0 11px; }
      .gh-star-count { min-width: 38px; padding: 0 9px; }
      #homePage, #customFilterPage, #poolAllPage, #poolFilterPage,
	      #observabilityPage, #poolExplorePage, #settingsPage,
	      #xhsFeedPage, #zhihuFeedPage, #biliFeedPage, #youtubeFeedPage,
	      #v2exFeedPage, #xiaoyuzhouFeedPage,
	      #delightPage, #savedPage, #watchLaterPage, #profilePage,
	      #diaryPage, #clonePage, #selfEvolutionPage,
	      #libraryPage, #readArchivePage, #chatPage { display: block; }
	      .main-col { display: grid; }
	      .card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--recommendation-card-min)), var(--recommendation-card-max))); }
	    }
	    @media (max-width: 820px) {
      body.mobile-menu-open { overflow: hidden; }
      body.side-drawer-open #homePage, body.side-drawer-open #customFilterPage, body.side-drawer-open #poolAllPage, body.side-drawer-open #poolFilterPage,
	      body.side-drawer-open #observabilityPage, body.side-drawer-open #poolExplorePage, body.side-drawer-open #settingsPage,
	      body.side-drawer-open #xhsFeedPage, body.side-drawer-open #zhihuFeedPage, body.side-drawer-open #biliFeedPage, body.side-drawer-open #youtubeFeedPage,
	      body.side-drawer-open #v2exFeedPage, body.side-drawer-open #xiaoyuzhouFeedPage,
	      body.side-drawer-open #delightPage, body.side-drawer-open #savedPage, body.side-drawer-open #watchLaterPage, body.side-drawer-open #profilePage,
	      body.side-drawer-open #diaryPage, body.side-drawer-open #clonePage, body.side-drawer-open #selfEvolutionPage,
	      body.side-drawer-open #libraryPage, body.side-drawer-open #readArchivePage, body.side-drawer-open #chatPage,
	      body.side-drawer-open .fatal-banner { transform: none; }
      .side-drawer { display: none; }
      .topbar { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-3); gap: var(--space-3); }
      .topbar .search, .topbar .nav-actions, .topbar .top-actions, .side-drawer-btn { display: none; }
      .top-left { display: contents; }
      .mobile-menu-btn { display: inline-grid; place-items: center; }
      .mobile-menu-btn svg { width: 20px; height: 20px; stroke-width: 2; }
      .brand { gap: var(--space-2); }
      .brand-mark { width: 38px; height: 38px; }
      .brand-title { font-size: var(--text-lg); }
      .brand-sub { display: none; }
      #homePage, #customFilterPage, #poolAllPage, #poolFilterPage,
	      #observabilityPage, #poolExplorePage, #settingsPage,
	      #xhsFeedPage, #zhihuFeedPage, #biliFeedPage, #youtubeFeedPage,
	      #v2exFeedPage, #xiaoyuzhouFeedPage,
	      #delightPage, #savedPage, #watchLaterPage, #profilePage,
	      #diaryPage, #clonePage, #selfEvolutionPage,
	      #libraryPage, #readArchivePage, #chatPage { display: block; padding: var(--space-4) var(--space-3) var(--section-y-phone); }
	      /* 推荐流页面在移动端也无需 top padding */
	      #xhsFeedPage, #zhihuFeedPage, #biliFeedPage, #youtubeFeedPage,
	      #v2exFeedPage, #xiaoyuzhouFeedPage { padding-top: 0; }
	      body.chat-page-open { overflow-y: hidden; }
	      body.chat-page-open .app-shell { height: calc(100vh - var(--topbar-height)); padding-block: var(--space-4); overflow: hidden; }
      .hero { display: none; }
      .main-col { display: grid; gap: var(--space-5); }
      .delight { grid-template-columns: 1fr; margin-top: 0; }
      .delight-body { align-items: start; }
      .delight-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
      .delight-main-actions { flex-basis: 212px; grid-template-columns: 116px 88px; }
      .delight-feedback-actions { width: 128px; }
      .settings-grid, .settings-panel, .settings-subpanel, .inline-row { grid-template-columns: 1fr; }
      .source-status-list { grid-template-columns: 1fr; }
      .source-status-head { grid-template-columns: 1fr; }
      .source-status-badges { justify-content: flex-start; }
      .source-credential-row summary { grid-template-columns: 1fr; align-items: start; }
      .source-credential-summary { text-align: left; }
      .card-grid { grid-template-columns: 1fr; }
      .section-head { align-items: stretch; flex-direction: column; margin-top: 0; }
      .recommendation-actions { justify-content: space-between; }
      .drawer, .overlay { z-index: 80; }
      .drawer .scrim, .overlay .scrim { display: none; }
      .drawer-panel, .modal-panel { position: fixed; inset: 0; left: 0; top: 0; translate: none; width: 100%; height: 100%; max-height: none; border-radius: 0; padding: var(--space-5); overflow: auto; }
      .mobile-back-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; width: auto; }
      .drawer-head, .modal-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
      .drawer-head h2, .modal-head h2 { font-size: clamp(28px, 7vw, 40px); }
      .chat-input { grid-template-columns: minmax(0, 1fr) auto; }
      .settings-tabs { overflow-x: auto; grid-template-columns: repeat(6, minmax(92px, 1fr)); }
      .content-page, .profile-page { max-width: 100%; }
      .content-page-head, .profile-page-head { align-items: start; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
      .chat-page { height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
      .chat-page .chat-log { min-height: 0; }
      #profileDetails, .profile-layer, .profile-item, .profile-domain, .profile-insight, .profile-memory, .speculative-item, .mbti-block { min-width: 0; max-width: 100%; }
      .profile-domain-head, .profile-insight-head, .profile-memory-head, .profile-context-row { align-items: start; }
      .profile-context-row { display: grid; grid-template-columns: 1fr; }
      .profile-context-row > span { white-space: normal; }
      .profile-context-row > strong { text-align: left; }
      .spec-header, .spec-confidence-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
      .spec-status, .spec-progress, .spec-confidence-label, .spec-specific-count, .profile-domain-weight, .profile-confidence, .profile-memory-meta { white-space: normal; }
      .spec-actions { flex-wrap: wrap; }
    }
    @media (max-width: 620px) {
      .delight-actions { flex-wrap: wrap; justify-content: stretch; }
      .delight-main-actions { flex: 1 1 212px; grid-template-columns: minmax(116px, 1fr) 88px; }
      .delight-feedback-actions { flex: 0 0 128px; margin-left: auto; }
      .delight-main-actions .small-btn:last-child { min-width: 0; }
    }
    @media (max-width: 430px) {
      .topbar { padding: var(--space-3); gap: var(--space-3); }
      #homePage, #customFilterPage, #poolAllPage, #poolFilterPage,
	      #observabilityPage, #poolExplorePage, #settingsPage,
	      #xhsFeedPage, #zhihuFeedPage, #biliFeedPage, #youtubeFeedPage,
	      #v2exFeedPage, #xiaoyuzhouFeedPage,
	      #delightPage, #savedPage, #watchLaterPage, #profilePage,
	      #diaryPage, #clonePage, #selfEvolutionPage,
	      #libraryPage, #readArchivePage, #chatPage { padding: var(--space-4) var(--space-3) var(--section-y-phone); }
	      /* 推荐流页面在移动端也无需 top padding */
	      #xhsFeedPage, #zhihuFeedPage, #biliFeedPage, #youtubeFeedPage,
	      #v2exFeedPage, #xiaoyuzhouFeedPage { padding-top: 0; }
	      body.chat-page-open .app-shell { padding-block: var(--space-4); }
      .brand-title { font-size: var(--text-lg); }
      .hero { border-radius: var(--radius-lg); padding: var(--space-5); }
      .delight { padding: 20px; border-radius: var(--radius-lg); }
      .delight-meta { align-items: center; flex-direction: row; }
      .delight-queue-tools { justify-content: end; margin-left: auto; }
      .delight-actions { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
      .delight-actions.is-composing { gap: 0; }
      .delight-main-actions { order: 2; flex: 1 1 auto; grid-template-columns: minmax(72px, .82fr) minmax(76px, .88fr); gap: 6px; transition: none; }
      .delight-feedback-actions.card-feedback-icons { order: 1; flex: 0 0 auto; width: auto; max-width: none; height: 40px; min-height: 40px; margin-left: 0; align-self: center; justify-content: center; padding: 3px 8px; transition: none; }
      .delight-actions .delight-main-actions .small-btn,
      .delight-actions .delight-main-actions [data-delight="view"],
      .delight-actions .delight-main-actions .comment-field,
      .delight-actions .delight-main-actions .chat-action,
      .delight-actions .delight-feedback-actions.card-feedback-icons { transition: none; }
      .delight-main-actions .small-btn { width: 100%; padding-inline: 10px; }
      .delight-main-actions [data-delight="view"] { padding-inline: 10px; }
      .delight-actions.is-composing .delight-feedback-actions.card-feedback-icons { display: none; }
      .delight-main-actions.is-composing { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) 38px 38px; align-items: center; min-height: 38px; }
      .delight-main-actions.is-composing .comment-field { grid-column: 1; grid-row: 1; align-self: center; }
      .delight-main-actions.is-composing .comment-field input { height: 38px; }
      .delight-main-actions.is-composing .composer-cancel { display: inline-flex; grid-column: 2; grid-row: 1; width: 38px; min-width: 38px; padding: 0; align-self: center; background: var(--surface); border-color: var(--border-soft); color: var(--fg-2); font-size: 22px; line-height: 1; }
      .delight-main-actions.is-composing .chat-action { grid-column: 3; grid-row: 1; width: 38px; min-width: 38px; align-self: center; }
      .delight-main-actions.is-composing .small-btn { width: auto; min-height: 38px; }
      .metric-row { grid-template-columns: 1fr; }
      .video-card .card-actions.is-composing { grid-template-columns: minmax(0, 1fr) 38px 38px; gap: var(--space-2); }
      .video-card .card-actions.is-composing .composer-cancel { display: inline-flex; grid-column: 2; grid-row: 1; width: 38px; min-width: 38px; padding: 0; background: var(--surface); border-color: var(--border-soft); color: var(--fg-2); font-size: 22px; line-height: 1; }
      .video-card .card-actions.is-composing .chat-action { grid-column: 3; grid-row: 1; }
      .card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .small-btn { width: 100%; }
      .mobile-back-btn, .mobile-search .pill-btn, .mobile-summary-head .small-btn { width: auto; }
      .delight-feedback-actions .feedback-icon-btn { flex: 0 0 26px; width: 26px; height: 26px; min-height: 26px; }
    }

/* Open Design inspection overrides preserved from the original prototype. */
[data-od-id="path-0-1-0-0-0-1"] { font-size: 30px !important }
[data-od-id="hero"] { font-size: 16px !important }
[data-od-id="path-0-1-0-0-1-1"] { font-size: 20px !important }

/* ── Saved pages (稍后再看 / 收藏) ───────────────────────────── */
/* Count badge hugs its label (was margin-left:auto, which flung it to the far
   right of the 264px nav item and left a big gap after short labels). */
.nav-count-badge { margin-left: 2px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; border-radius: 9px; background: var(--accent, #c8553d); color: #fff; }
.saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4, 16px); }
.saved-page .saved-card { cursor: default; }
.saved-card-actions { display: flex; justify-content: flex-end; }
/* Remove is a secondary action — keep it a quiet ghost button, not the loud
   accent pill that `.video-card .small-btn` defaults to (matches mobile's
   subtle ×). Specificity must beat `.video-card .small-btn`. */
.saved-page .saved-card .saved-remove {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--fg-2);
  box-shadow: none;
}
.saved-page .saved-card .saved-remove:hover {
  border-color: var(--accent, #c8553d);
  color: var(--accent, #c8553d);
  background: color-mix(in oklab, var(--surface), var(--accent, #c8553d) 8%);
}
.saved-page .saved-empty { padding: 64px 24px; text-align: center; color: var(--fg-2); }

/* ── Save toggles in the feedback row (稍后再看 = 时钟 / 收藏 = 星星) ──
   Same SVG icon family as like/dislike/dismiss, shown inline in the action
   row. Active state: watch-later clock turns accent; favorite star fills
   gold. State is driven by aria-pressed (no glyph swapping). */
.watch-later-btn[aria-pressed="true"] { color: var(--accent, #c8553d); }
.favorite-btn[aria-pressed="true"] { color: #e8a33d; }
.favorite-btn[aria-pressed="true"] svg { fill: currentColor; }
.nav-glyph svg { width: 16px; height: 16px; }

/* ── Editable profile (Phase 3, desktop) ── */
.profile-edit-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.profile-edit-note { margin-bottom: 14px; }
.edit-field {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}
.edit-field-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.edit-field-label { font-size: 14px; font-weight: 700; color: var(--fg); }

/* ── Reading library page ───────────────────────────────────────── */
.library-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: 0 var(--space-2);
  min-width: 0;
}
.library-toolbar > * { min-width: 0; }
.library-toolbar .library-search { flex: 0 0 280px; }
.library-filters {
  flex: 1 1 0;
  display: flex;
  gap: var(--space-2);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.library-filters::-webkit-scrollbar { display: none; }
.library-status-filters { flex: 0 0 auto; }
.library-count { flex: 0 0 auto; white-space: nowrap; }
.library-filter-btn {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--fg-3);
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
  transition: all 120ms ease-out;
}
.library-filter-btn:hover {
  background: var(--surface-warm);
  color: var(--fg-2);
}
.library-filter-btn.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
#libraryGrid,
#readArchiveGrid {
  padding: var(--space-2) 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
/* 阅读库/已读库卡片：等高 + 底部操作对齐 + 摘要限行 */
.library-page .video-card.is-minimal {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.library-page .video-card.is-minimal .video-card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.library-page .video-card.is-minimal .library-card-actions {
  margin-top: auto;
  padding-top: 8px;
}
/* 已读库：卡片终止于标签区，让标签贴底对齐（与阅读库底部操作一致） */
.read-archive-page .video-card.is-minimal .library-card-tags {
  margin-top: auto;
  padding-top: 8px;
}
.library-page .empty-state {
  padding: 64px 24px;
  text-align: center;
  color: var(--fg-3);
}
.library-page .video-card.is-minimal {
  cursor: pointer;
  transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}
.library-page .video-card.is-minimal:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Status filter buttons */
.library-status-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
}
.library-status-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-3);
  font-size: 13px;
  cursor: pointer;
  border-radius: 12px;
  transition: all 120ms ease-out;
}
.library-status-btn:hover {
  border-color: var(--fg-2);
  color: var(--fg-2);
}
.library-status-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
/* Tags area */
.library-tags {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-2);
}
.library-tags-label {
  font-size: 13px;
  color: var(--fg-3);
  white-space: nowrap;
}
.library-tags-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.library-tags-list::-webkit-scrollbar { display: none; }
.library-tag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 8px;
  background: var(--surface-warm);
  color: var(--fg-2);
  cursor: pointer;
  transition: all 120ms ease-out;
}
.library-tag:hover,
.library-tag.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.library-count {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.library-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}
/* Card tags and status */
.library-card-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
}
.library-card-status.unread {
  color: var(--fg-3);
}
.library-card-status.reading {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.library-card-status.finished {
  color: #22c55e;
  background: color-mix(in srgb, #22c55e 8%, transparent);
}
.library-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
}
.library-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 4px;
  background: var(--surface-warm);
  color: var(--fg-3);
}
.library-card-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.library-card-actions .icon-btn {
  width: auto;
  height: auto;
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-3);
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 120ms ease-out;
}
.library-card-actions .icon-btn:hover {
  border-color: var(--fg-2);
  color: var(--fg-2);
}
/* Tag editor modal */
.tag-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tag-editor {
  background: var(--bg);
  border-radius: 12px;
  padding: 20px;
  min-width: 300px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.tag-editor h3 {
  margin: 0 0 12px;
  font-size: 16px;
}
.tag-editor-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 8px;
}
.tag-editor-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.tag-editor-actions button {
  padding: 6px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.tag-editor-actions .primary {
  background: var(--accent);
  color: #fff;
}
.tag-editor-actions .secondary {
  background: var(--surface-warm);
  color: var(--fg-2);
}

.edit-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent), white 82%);
  border-radius: 999px;
  padding: 2px 9px;
}
.edit-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.edit-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--fg-2);
  background: var(--surface-warm);
}
.edit-chip-remove {
  width: 20px; height: 20px;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--meta);
  font-size: 12px; line-height: 1; cursor: pointer;
}
.edit-chip-remove:hover { background: color-mix(in oklab, var(--danger), white 78%); color: var(--danger); }
.edit-add-row { display: flex; gap: 8px; }
.edit-add-input {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
  font-size: 14px;
}
.edit-text-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
  font-size: 14px; line-height: 1.6;
  resize: vertical;
  margin-bottom: 8px;
}
.edit-drift-hint {
  font-size: 13px;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent), white 86%);
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 8px;
}
.edit-field-actions { display: flex; align-items: center; gap: 12px; }
.edit-reset-btn {
  border: 0; background: transparent;
  color: var(--meta);
  font-size: 13px; text-decoration: underline; cursor: pointer;
}
.edit-reset-btn:hover { color: var(--accent); }
.edit-scalar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.edit-scalar-input { flex: 1; min-width: 0; accent-color: var(--accent); }
.edit-scalar-value {
  min-width: 44px; text-align: right;
  font-size: 13px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ── Embed Mode ──────────────────────────────────── */
.is-embed .topbar,
.is-embed .side-drawer,
.is-embed .side-drawer-btn,
.is-embed .fatal-banner { display: none !important; }
.is-embed { --topbar-height: 0px; }
.is-embed .main-col { max-width: 100%; padding-top: 0; }
.is-embed .recommend-header { margin-top: 0; }

/* ── MindBack-style card mode ────────────────────────────── */
#videoGrid.mindback-mode {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
#videoGrid.mindback-mode .empty-state { grid-column: 1 / -1; }
.video-card.mindback-mode {
  display: block; padding: 0; border-radius: 12px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--elev-raised);
  transition: transform 0.12s, box-shadow 0.12s; cursor: pointer;
}
.video-card.mindback-mode:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-raised);
}
.mindback-cover-wrap {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  overflow: hidden; background: var(--border);
}
.mindback-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.mindback-cover.no-cover { display: none; }
.mindback-origin-link {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  font-size: 10px; padding: 2px 8px;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  color: #fff; border-radius: 6px; text-decoration: none; line-height: 1.6;
}
.mindback-origin-link:hover { background: rgba(0,0,0,0.7); }
.mindback-platform-badge {
  position: absolute; bottom: 6px; left: 6px; z-index: 2;
  font-size: 9px; font-weight: 600; padding: 1px 6px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  color: #fff; border-radius: 4px; line-height: 1.5;
}
.mindback-body { padding: 10px 12px 12px; }
.mindback-title {
  font-size: 13px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 4px;
}
.mindback-author {
  font-size: 11px; color: var(--text-secondary);
  margin-bottom: 6px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}


/* ── List mode overrides ──────────────────────────────────── */
.card-grid.list-mode { display: block; max-width: 640px; }
.video-card.list-mode { display: block; padding: var(--space-2) var(--space-3); border-radius: 14px; }
.video-card.list-mode:hover { transform: none; box-shadow: var(--elev-raised); }
.video-card.list-mode .cover { display: none; }
.video-card.list-mode .platform { display: none; }
.video-card.list-mode > div { padding: 0; display: block; }
.video-card.list-mode .video-title { font-size: 14px; -webkit-line-clamp: 1; margin-bottom: 2px; }
.video-card.list-mode .video-meta { font-size: 11px; }
.video-card.list-mode .reason { display: none; }
.video-card.list-mode .card-actions { margin-top: 2px; border-top: none; padding: 0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.video-card.list-mode .card-feedback-icons { max-width: none; padding: 0; gap: 2px; border: none; background: none; }
.video-card.list-mode .feedback-icon-btn { width: 28px; height: 28px; min-height: 28px; }
.video-card.list-mode .feedback-icon-btn svg { width: 14px; height: 14px; }
.video-card.list-mode .feedback-separator { display: none; }

/* ── 小红书风格文本卡片 ──────────────────────────────── */
:root {
  --gold: #ffb800;
  --gold-light: #fff8e6;
  --tag-bg: #f0f0f0;
  --tag-text: #666;
  --card-bg: #ffffff;
  --card-hover: #fafafa;
}
.saved-page .content-page-head { margin-bottom: var(--space-5); }
.saved-page .content-page-head h2 { font-size: 18px; font-weight: 600; }
.saved-page .content-page-head .video-meta { font-size: 13px; color: #999; }
.saved-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 24px;
}
/* 收藏 / 稍后再看卡片：与首页 .video-card 同一套观感（封面 + 两行标题 +
   作者/平台），操作按钮默认隐藏、悬停才显形，保持"安静"的默认态。 */
.saved-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--elev-flat, none);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.saved-card:hover { transform: translateY(-2px); box-shadow: var(--elev-raised); }
.saved-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-warm);
  cursor: pointer;
}
.saved-card-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.saved-card-cover.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--fg-3);
  font-family: "STKaiti", "KaiTi", "楷体", serif;
}
.saved-card-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 6px;
  margin: 0;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.saved-card:hover .saved-card-actions,
.saved-card:focus-within .saved-card-actions { opacity: 1; transform: none; }
.saved-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
}
.saved-card-action:hover { background: rgba(0, 0, 0, 0.66); }
.saved-card-action.is-remove:hover { background: var(--accent, #b5715c); }
.saved-card-action svg { width: 13px; height: 13px; }
.saved-card-action:disabled { opacity: 0.45; cursor: not-allowed; }
.saved-card-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.saved-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg);
  font-family: "STKaiti", "KaiTi", "楷体", serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.saved-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 0;
}
.saved-card-author {
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.saved-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 3px;
  background: var(--surface-warm);
  color: var(--fg-2);
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
}
.saved-page .saved-empty { padding: 64px 24px; text-align: center; color: #999; font-size: 14px; }
/* 响应式 */
@media (max-width: 1180px) {
  .saved-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 620px) {
  .saved-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* 收藏 / 稍后再看 已各自独立成页（/web/saved、/web/watchLater），
   原来的页内标签导航下线；标题里的数字徽章样式保留。 */
.saved-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #f0f0f0;
  color: #999;
  font-size: 10px;
  line-height: 1;
}
.video-card.list-mode .comment-field { display: none; }
.video-card.list-mode .chat-action { min-height: 28px; font-size: 11px; padding: 0 8px; }
.video-card.list-mode .composer-cancel { display: none; }
.video-card.list-mode .status-line { display: none; }

/* ── 改版 v2 · 顶部标签导航 + 惊喜推荐单卡 ────────────────── */

/* 侧边抽屉已迁移至顶部标签，整体隐藏（保留 DOM 供 JS 绑定） */
.side-drawer { display: none !important; }
.side-drawer-btn { display: none; }

/* 顶部标签导航 */
.tabbar {
  position: sticky;
  top: var(--topbar-height, 64px);
  z-index: 19;
  background: var(--bg);
  border-bottom: 1px solid #f0f0f0;
}
.tab-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: #999;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}
.tab-btn:hover { color: #666; }
.tab-btn.is-active { color: #1a1a1a; font-weight: 500; }
.tab-btn .nav-count-badge { margin-left: 6px; }

/* 筛选下拉菜单：合并自定义筛选 + 池子筛选 */
.filter-dropdown {
  position: relative;
  flex: 0 0 auto;
}
.filter-dropdown-trigger {
  padding-right: 10px;
}
.filter-dropdown-trigger[aria-expanded="true"] {
  color: #1a1a1a;
  font-weight: 500;
}
.filter-dropdown-menu {
  position: fixed;
  z-index: 200;
  min-width: 140px;
  width: max-content;
  padding: 6px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filter-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: #333;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 6px;
}
.filter-dropdown-item:hover {
  background: #f5f5f5;
  color: #1a1a1a;
}
.filter-dropdown-item.is-active {
  background: #eef4ff;
  color: #1a6dff;
  font-weight: 500;
}

/* 聊聊口味页面：模式切换 */
.chat-mode-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #f5f5f5;
  border-radius: 8px;
}
.chat-mode-btn {
  padding: 6px 14px;
  border: 0;
  background: none;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
}
.chat-mode-btn:hover { color: #333; }
.chat-mode-btn.is-active {
  background: #fff;
  color: #1a1a1a;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 对话式推荐结果区域 */
.chat-recommend-results {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}
.chat-recommend-results .card-grid {
  margin-top: 12px;
}

/* 首页运行状态条：通栏细条（背景级，不抢视觉） */
.runtime-strip {
  display: flex;
  align-items: stretch;
  margin-bottom: var(--space-6);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.runtime-summary {
  flex: 0 0 auto;
  align-self: center;
  max-width: 240px;
  padding-right: var(--space-4);
  color: var(--meta);
  font-size: 12px;
  line-height: 1.4;
}
.runtime-item {
  flex: 1 1 0;
  min-width: 92px;
  display: grid;
  gap: 2px;
  padding: 0 var(--space-3);
  border-left: 1px solid var(--border-soft);
}
.runtime-item span { font-size: 11px; color: var(--meta); }
.runtime-item strong { font-size: 14px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 首页底部动态区 */
.activity-section { margin-top: var(--space-8); }
.activity-section-head { margin-bottom: var(--space-4); }
.activity-section .activity-list { display: grid; gap: var(--space-2); }

/* 惊喜推荐：平衡卡（顶部 meta 条 + 左图右文） */
.delight {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  grid-template-areas: "meta meta" "thumb body";
  gap: var(--space-3) var(--space-5);
  margin-top: 0;
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.delight-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}
.delight-meta .eyebrow { margin: 0; }
.delight .thumb { grid-area: thumb; width: 176px; aspect-ratio: 16 / 9; margin-top: 0; align-self: center; border-radius: var(--radius-sm); }
.delight-body { grid-area: body; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); min-height: 0; }
.delight-copy h3 { font-size: var(--text-lg); }
.delight-copy p { margin-top: 0; font-size: var(--text-sm); color: var(--muted); -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.delight-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); }
.delight-main-actions { flex: 0 0 auto; }

@media (max-width: 620px) {
  .delight { grid-template-columns: 1fr; grid-template-areas: "meta" "thumb" "body"; gap: var(--space-3); padding: var(--space-3); }
  .delight .thumb { width: 100%; }
  .delight-copy h3 { font-size: var(--text-base); }
  .delight-feedback-actions { display: none; }
  .runtime-strip { padding: var(--space-2) 0; }
  .runtime-summary { display: none; }
}

/* 活动项通用样式（原仅存在于侧边抽屉上下文） */
.activity-item {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.activity-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.activity-item .eyebrow { margin-bottom: 2px; }
.activity-item h3 { font-size: var(--text-base); margin: 0 0 2px; }

/* ── 改版 v3 · 纯推荐流 + 中等卡片 + 满宽布局 ─────────────── */

/* 满宽布局：去掉两侧巨型留白 + 解除旧 width 限制，内容铺满 */
/* 推荐流/首页类页面（main-col 组） */
#homePage, #customFilterPage, #poolAllPage, #poolFilterPage,
#observabilityPage, #poolExplorePage, #settingsPage,
#xhsFeedPage, #zhihuFeedPage, #biliFeedPage, #youtubeFeedPage,
#v2exFeedPage, #xiaoyuzhouFeedPage {
  width: 100%; max-width: none; padding: var(--space-4) clamp(20px, 3vw, 44px) var(--section-y-tablet);
}
/* 内容页类页面（content-page 组） */
#delightPage, #savedPage, #watchLaterPage, #profilePage,
#diaryPage, #clonePage, #selfEvolutionPage,
#libraryPage, #readArchivePage, #chatPage {
  width: 100%; max-width: none; padding: var(--space-4) clamp(20px, 3vw, 44px) var(--section-y-tablet);
}
/* 推荐流页面：内容由 .observability-body 包裹，自身无需 top padding */
#xhsFeedPage, #zhihuFeedPage, #biliFeedPage, #youtubeFeedPage,
#v2exFeedPage, #xiaoyuzhouFeedPage {
  padding-top: 0;
}
.card-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 1720px; margin-inline: auto; gap: var(--space-4); }

/* 推荐区标题紧凑化（不再是杂志级大标题） */
.section-head { margin: var(--space-5) 0 var(--space-4); }
.section-head h2 { font-size: 20px; }
.section-head .eyebrow { margin: 0 0 4px; }
.section-head p { font-size: 13px; }

/* 状态条与动态区：收进隐藏（保留 DOM 供 JS 绑定，不报错） */
.runtime-strip { display: none; }
.activity-section { display: none; }

/* 惊喜推荐：通栏紧凑横幅，融入推荐流（无边框无圆角） */
.delight {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: none;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) 0;
  border: 0;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid var(--border-soft);
}
.delight .thumb { display: none; }
.delight-meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 104px;
  padding: 0;
  border: 0;
}
.delight-meta .eyebrow { margin: 0; font-size: 11px; }
.delight-meta .delight-queue-tools { margin: 0; }
.delight-meta .delight-nav { gap: 2px; font-size: 11px; color: var(--meta); }
.delight-meta .icon-btn { width: 22px; height: 22px; min-height: 22px; }
.delight-body { display: contents; }
.delight-copy { flex: 1 1 auto; min-width: 0; }
.delight-copy h3 { font-size: var(--text-base); margin: 0; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.delight-copy p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--muted); -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.delight-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.delight-actions .delight-main-actions { flex: 0 0 auto; }
.delight-actions .delight-main-actions .small-btn { min-height: 32px; padding: 0 14px; font-size: 13px; }
.delight-actions .comment-field { display: none; }
.delight-main-actions.is-composing .comment-field { display: block; max-width: none; opacity: 1; transform: none; }
.delight-actions .delight-feedback-actions { order: 2; }
.delight-status, .delight-actions .status-line { display: none; }

/* 中等卡片：理由收窄两行、操作行紧凑 */
.video-card { gap: var(--space-3); padding: var(--space-3); }
.video-card .reason { --reason-lines: 2; font-size: 12px; padding: var(--space-2); }
.video-card .video-title { font-size: 15px; }
.video-card .video-meta { font-size: 12px; }

@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 620px) {
  .delight { flex-wrap: wrap; gap: var(--space-2); }
  .delight-copy h3 { -webkit-line-clamp: 2; }
  .delight-actions { width: 100%; justify-content: space-between; }
  .delight-feedback-actions { display: none; }
}

/* 抽屉已下线，清除 body.side-drawer-open 对主内容的旧偏移 */
body.side-drawer-open #homePage, body.side-drawer-open #customFilterPage, body.side-drawer-open #poolAllPage, body.side-drawer-open #poolFilterPage,
body.side-drawer-open #observabilityPage, body.side-drawer-open #poolExplorePage, body.side-drawer-open #settingsPage,
body.side-drawer-open #xhsFeedPage, body.side-drawer-open #zhihuFeedPage, body.side-drawer-open #biliFeedPage, body.side-drawer-open #youtubeFeedPage,
body.side-drawer-open #v2exFeedPage, body.side-drawer-open #xiaoyuzhouFeedPage,
body.side-drawer-open #delightPage, body.side-drawer-open #savedPage, body.side-drawer-open #watchLaterPage, body.side-drawer-open #profilePage,
body.side-drawer-open #diaryPage, body.side-drawer-open #clonePage, body.side-drawer-open #selfEvolutionPage,
body.side-drawer-open #libraryPage, body.side-drawer-open #readArchivePage, body.side-drawer-open #chatPage,
body.side-drawer-open .fatal-banner {
  margin-left: 0;
  width: 100%;
  max-width: none;
}

/* ── 视图开关组（封面 / 换一批时忽略当前） ────── */
#coverToggle { position: absolute; opacity: 0; pointer-events: none; }
.view-options {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-warm);
}
.opt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: color var(--motion-fast) var(--ease-standard);
}
.opt-toggle::before {
  content: "";
  width: 26px;
  height: 15px;
  border-radius: var(--radius-pill);
  background: var(--surface-warm);
  border: 1px solid var(--border-soft);
  transition: background var(--motion-fast) var(--ease-standard);
}
#coverToggle:checked + .opt-toggle { color: var(--fg); }
#coverToggle:checked + .opt-toggle::before { background: var(--fg); }
#coverToggle:focus-visible + .opt-toggle { box-shadow: var(--focus-ring); }
.view-options .reshuffle-toggle {
  min-height: 30px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 10px;
}

/* 关闭封面 */
body.no-cover .video-card .cover,
body.no-cover .delight .thumb { display: none; }

/* ── 惊喜推荐独立页 ───────────────────────────── */
.delight-page { max-width: 880px; margin-inline: auto; }
.delight-page .delight {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-areas: "meta meta" "thumb body";
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.delight-page .delight-meta {
  grid-area: meta;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}
.delight-page .delight .thumb {
  grid-area: thumb;
  display: block;
  width: 220px;
  aspect-ratio: 16 / 9;
  margin-top: 0;
  align-self: center;
  border-radius: var(--radius-md);
}
.delight-page .delight-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}
.delight-page .delight-copy h3 { font-size: var(--text-xl); }
.delight-page .delight-copy p { font-size: var(--text-sm); -webkit-line-clamp: 3; }
.delight-page .delight-actions { justify-content: space-between; }
.delight-page .delight-actions .comment-field { display: block; }
.delight-page .delight-status { display: block; }
.delight-page .delight-actions .delight-feedback-actions { order: 0; }
.delight-page-note { margin: 0; color: var(--meta); font-size: 12px; }

@media (max-width: 620px) {
  .delight-page .delight { grid-template-columns: 1fr; grid-template-areas: "meta" "thumb" "body"; gap: var(--space-3); padding: var(--space-3); }
  .delight-page .delight .thumb { width: 100%; }
}

/* 推荐区无标题：工具行右对齐 */
[data-od-id="recommendations"] .section-head {
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* 筛选 chips 与工具行合并为一行 */
[data-od-id="recommendations"] .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}
[data-od-id="recommendations"] .filter-row {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-bottom: 0;
  scrollbar-width: thin;
}
[data-od-id="recommendations"] .recommendation-actions {
  flex: 0 0 auto;
}
@media (max-width: 820px) {
  [data-od-id="recommendations"] .section-head { flex-wrap: wrap; }
  [data-od-id="recommendations"] .filter-row { flex-basis: 100%; }
}

/* ── tabbar 双区：左导航 tab + 右筛选/操作，统一高度 ────── */
.tabbar {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-2) var(--space-4);
  padding: 4px clamp(16px, 3vw, 32px) 0;
}
.tabbar-scroll {
  display: flex;
  align-items: center;
  gap: 2px;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabbar-scroll::-webkit-scrollbar { display: none; }
/* 工具区已隐藏，无全局工具栏 */
.tabbar-tools { display: none; }

.tabbar-tools .filter-row {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabbar-tools .filter-row::-webkit-scrollbar { display: none; }
/* 视图切换 tab */
.view-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border, #e5e5e5);
  margin-bottom: 8px;
  flex: 0 0 100%;
  order: -1;
}
.view-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-text-muted, #888);
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.view-tab:hover { color: var(--color-text, #1c1c1e); }
.view-tab.is-active {
  color: var(--color-text, #1c1c1e);
  border-bottom-color: var(--color-brand, #fb7299);
}
/* 自定义筛选页面内面板 */
.custom-filter-page-panel {
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 12px;
  background: var(--color-surface, #fff);
  padding: 18px 20px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.custom-filter-page-panel .custom-filter-head h2 {
  margin: 2px 0 4px;
  font-size: 18px;
}
.custom-filter-page-panel .custom-filter-head .video-meta {
  margin: 0;
  max-width: 64em;
}
.custom-filter-page-panel .filter-section h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted, #888);
}
.custom-filter-page-panel .filter-section-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.custom-filter-page-panel .filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
  padding: 5px 12px;
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1c1c1e);
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}
.custom-filter-page-panel .filter-checkbox input { margin: 0; accent-color: var(--color-brand, #fb7299); }
.custom-filter-page-panel .filter-checkbox.is-checked {
  background: var(--color-brand-light, #fce4ec);
  border-color: var(--color-brand, #fb7299);
}
.custom-filter-page-panel .custom-keyword-input {
  width: min(420px, 100%);
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 8px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1c1c1e);
  outline: none;
}
.custom-filter-page-panel .custom-keyword-input:focus {
  border-color: var(--color-brand, #fb7299);
}
.custom-filter-page-panel .filter-actions-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border, #e5e5e5);
}
.custom-filter-page-panel .custom-filter-hint {
  font-size: 12px;
  color: var(--color-text-muted, #888);
}

/* 池子总览 */
.pool-all-header {
  max-width: var(--recommendation-grid-max, 1400px);
  margin: 0 auto 16px;
}
.pool-all-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.pool-all-title-area {
  flex-shrink: 0;
}
.pool-all-title-area .eyebrow { margin: 0; font-size: 10px; }
.pool-all-title-area h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.pool-all-stat-cards {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.pool-stat-card {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 6px;
  background: var(--surface, #fff);
}
.pool-stat-card .pool-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text, #1c1c1e);
  line-height: 1.2;
}
.pool-stat-card .pool-stat-label {
  font-size: 10px;
  color: var(--color-text-muted, #888);
}
.pool-stat-card.accent .pool-stat-val { color: #2196f3; }
.pool-stat-card.warn .pool-stat-val { color: #ff5722; }
.pool-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 1;
  min-width: 100px;
}
.pool-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 10px;
  background: var(--surface, #f8f8f8);
  border: 1px solid var(--border, #eee);
  color: var(--color-text, #333);
  line-height: 1.3;
  white-space: nowrap;
}
.pool-status-chip .chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pool-status-chip em {
  font-style: normal;
  font-weight: 650;
  color: var(--color-text, #1c1c1e);
}
.pool-status-chip .chip-pct {
  color: var(--color-text-muted, #999);
  font-size: 9px;
}
.pool-all-actions {
  flex-shrink: 0;
  margin-left: auto;
}
.pool-all-actions .pill-btn { font-size: 11px; padding: 3px 10px; }
/* 池子筛选页的平台筛选条 */
.pool-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.pool-filter-bar .chip {
  font-size: 13px;
  padding: 5px 12px;
  cursor: pointer;
}
/* 池子总览卡片 */
.pool-all-card {
  border-left: 3px solid var(--badge-bg, #888) !important;
}
.pool-all-card .video-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pool-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--badge-bg, #888);
  color: #fff;
  line-height: 1.4;
}
.pool-all-footer {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted, #888);
  padding: 16px 0 32px;
}
.pool-all-sentinel {
  height: 1px;
}
.tabbar-tools .tabbar-actions {
  flex: 0 0 auto;
  align-self: center;
  justify-self: end;
}
/* 非推荐流页面(阅读库/设置等)不展示推荐池工具区——池计数与它们无关 */
body.library-page-open .tabbar-tools,
body.pool-all-page-open .tabbar-tools,
body.custom-filter-page-open .tabbar-tools,
body.saved-page-open .tabbar-tools,
body.settings-page-open .tabbar-tools,
body.profile-page-open .tabbar-tools,
body.chat-page-open .tabbar-tools { display: none; }
/* 惊喜推荐页面需要显示专用工具 */
body.delight-page-open .tabbar-tools { display: flex !important; }
.tabbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tabbar-actions .view-options {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 统一高度与样式：导航 tab / 筛选 chip / 工具按钮 同一视觉行 */
.tab-btn { min-height: 40px; }
.tabbar-tools .view-options { padding: 0; }
/* 按平台页面的筛选条 */
.platform-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  max-width: var(--recommendation-grid-max, 1400px);
  margin-inline: auto;
}
.platform-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.platform-filter-bar .chip {
  font-size: 13px;
  padding: 5px 12px;
  cursor: pointer;
}
/* 筛选 chip 与 tab 按钮完全统一样式 */
.tabbar-tools .filter-row .chip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: #999;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
}
.tabbar-tools .filter-row .chip:hover { color: #666; }
.tabbar-tools .filter-row .chip.is-active {
  background: none;
  color: #1a1a1a;
  font-weight: 500;
  border: none;
}
/* 工具按钮与 tab 按钮统一风格 */
.tabbar-tools .icon-btn {
  min-height: 40px;
  padding: 0 14px;
  border: none;
  background: none;
  color: #999;
  font-size: 14px;
  border-radius: 0;
  box-shadow: none;
}
.tabbar-tools .icon-btn:hover { color: #666; background: none; }
.tabbar-tools .icon-btn.is-active { color: #1a1a1a; }
.tabbar-tools .opt-toggle { min-height: 40px; padding: 0 14px; border: none; background: none; color: #999; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tabbar-tools .view-options .reshuffle-toggle {
  min-height: 40px;
  padding: 0 14px;
  border: none;
  background: none;
  box-shadow: none;
  color: #999;
  font-size: 14px;
}
.tabbar-tools .view-options .reshuffle-switch { width: 24px; height: 14px; }
.tabbar-tools .view-options .reshuffle-switch::after { width: 10px; height: 10px; top: 2px; left: 2px; }
.tabbar-tools .pool-pill { color: #999; font-size: 14px; display: inline-flex; align-items: center; gap: 3px; }
.tabbar-tools .pool-pill strong { font-weight: 400; }
.tabbar-tools .display-mode-btn { font-size: 14px; padding: 0 14px; }
.tabbar-tools .size-mode-btn { font-size: 14px; padding: 0 14px; }

@media (max-width: 900px) {
  .tabbar { gap: 4px; padding: 4px clamp(12px, 2vw, 16px) 0; }
}

/* 可换数量标签 */
.pool-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.pool-pill strong { font-size: 15px; font-weight: 600; color: var(--fg); }

/* ── 阅读友好卡片：信息收敛，hover 出操作 ────────────────── */

/* 反馈图标默认隐藏，hover/聚焦卡片时展开 */
.video-card .card-feedback-icons {
  max-width: 0;
  padding-inline: 0;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}
.video-card:hover .card-feedback-icons,
.video-card:focus-within .card-feedback-icons {
  max-width: 260px;
  padding: 3px 7px;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.video-card .card-actions.is-composing .card-feedback-icons {
  max-width: 0;
  padding-inline: 0;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

/* 理由弱化：无边框浅灰一行，点击展开全文 */
.video-card .reason {
  --reason-lines: 1;
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.video-card .reason-text {
  -webkit-line-clamp: 1;
  max-height: calc(1em * 1.5 * 1);
}
.video-card .reason.is-expanded .reason-text {
  -webkit-line-clamp: unset;
  max-height: none;
}
.video-card .reason:hover { color: var(--fg-2); }

/* 可换标签：内部改为垂直居中，与其他 pill 文字水平线一致 */
.pool-pill { align-items: center; }

/* 聊一聊按钮：默认隐藏，hover/聚焦卡片时显示 */
.video-card .chat-action {
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
}
.video-card:hover .chat-action,
.video-card:focus-within .chat-action {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.video-card .card-actions.is-composing .chat-action { opacity: 1; transform: none; pointer-events: auto; }

/* ── 卡片尺寸调节（小/中/大，网格自适应重排列数） ────────── */
:root { --card-min: 280px; }
body.card-sm { --card-min: 220px; }
body.card-lg { --card-min: 340px; }
.card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr)); }
.card-size-btn.is-active { background: var(--surface-warm); color: var(--fg); }
.tabbar-tools .view-options .display-mode-btn {
  min-width: 0;
  width: auto;
  min-height: 40px;
  height: auto;
  padding: 0 14px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  border: none;
  border-radius: 0;
  background: none;
  color: #999;
  box-shadow: none;
}
.tabbar-tools .view-options .display-mode-btn:hover { color: #666; background: none; }
.tabbar-tools .view-options .display-mode-btn.is-active {
  background: none;
  color: #1a1a1a;
  border: none;
  font-weight: 500;
}
.tabbar-tools .view-options .display-mode-btn.is-active:hover { color: #666; background: none; }
.tabbar-tools .view-options .size-mode-btn { padding: 0 9px; }

/* 好用求 Star：默认隐藏，悬停顶栏时显示 */
.gh-star {
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.topbar:hover .gh-star,
.topbar:focus-within .gh-star {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* ── 阅读库：应用内阅读视图 ─────────────────────────────── */
.article-drawer .drawer-panel { width: min(760px, 94vw); display: flex; flex-direction: column; height: min(92vh, 860px); max-height: 92vh; overflow: hidden; }
.article-reader {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6) var(--space-6);
}
.article-reader-meta {
  margin: 0 0 var(--space-4);
  color: var(--meta);
  font-size: 13px;
}
.article-reader-body {
  max-width: 68ch;
  margin-inline: auto;
  color: var(--fg);
  font-size: 15px;
  line-height: 1.85;
}
.article-reader-body p { margin: 0 0 var(--space-4); }
.article-reader-body p:last-child { margin-bottom: 0; }
/* 阅读进度条 */
.article-reader .reader-progress {
  position: sticky;
  top: 0;
  left: 0;
  height: 3px;
  background: transparent;
  z-index: 5;
  margin: calc(var(--space-4) * -1) calc(var(--space-6) * -1) var(--space-3);
}
.article-reader .reader-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent, #2563eb);
  transition: width .08s linear;
}
/* markdown 正文元素 */
.article-reader-body .md-h1,
.article-reader-body .md-h2,
.article-reader-body .md-h3 { line-height: 1.35; margin: var(--space-5) 0 var(--space-3); font-weight: 650; }
.article-reader-body .md-h1 { font-size: 1.45em; }
.article-reader-body .md-h2 { font-size: 1.28em; }
.article-reader-body .md-h3 { font-size: 1.14em; }
.article-reader-body .md-p { margin: 0 0 var(--space-4); }
.article-reader-body .md-ul,
.article-reader-body .md-ol { margin: 0 0 var(--space-4); padding-left: 1.4em; }
.article-reader-body .md-ul li,
.article-reader-body .md-ol li { margin: 0 0 var(--space-1); }
.article-reader-body .md-quote { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-4); border-left: 3px solid var(--border-soft); color: var(--muted); }
.article-reader-body .md-code { background: var(--bg-soft, #f4f4f5); padding: 1px 5px; border-radius: 5px; font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.article-reader-body .md-pre { margin: 0 0 var(--space-4); padding: var(--space-4); background: var(--bg-soft, #f4f4f5); border-radius: 8px; overflow-x: auto; }
.article-reader-body .md-pre code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; white-space: pre; }
.article-reader-body .md-link { color: var(--accent, #2563eb); text-decoration: none; border-bottom: 1px solid currentColor; }
.article-reader-body .md-hr { border: none; border-top: 1px solid var(--border-soft); margin: var(--space-5) 0; }
.article-reader-placeholder {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.article-reader-actions {
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-soft);
}
.article-reader-actions .small-btn.ghost {
  margin-left: auto;
  background: transparent;
  border-color: var(--border-soft);
  color: var(--muted);
}
.library-card-status {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-warm);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.library-card-status.finished { color: var(--meta); }
.library-card-status.reading { color: var(--fg); border-color: var(--border); }
.library-page .video-card { cursor: pointer; }

/* ── 阅读库满宽 ──────────────────────────────────────────────
   两处上游收窄需要解除：
   1) `.content-page` 的 max-width: min(1120px, …) —— 把整页夹在 1120px；
   2) `.card-grid` 的 max-width: 1720px（改版 v3 满宽段留下的上限）。
   `.layout` 本身已是 100% 宽 + clamp(20px,3vw,44px) 内边距，解除后阅读库
   即铺满可视宽度，列数由 --card-min 自适应。 */
.library-page.content-page {
  max-width: none;
  /* 标题 + 工具栏同行：阅读库顶部压成一行 */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}
.library-page.content-page > .content-page-head { grid-column: 1; margin-bottom: 0; }
.library-page.content-page > .library-toolbar { grid-column: 2; margin-bottom: 0; }
.library-page.content-page > .library-tags,
.library-page.content-page > #libraryGrid,
.library-page.content-page > #readArchiveGrid,
.library-page.content-page > .library-more { grid-column: 1 / -1; }
/* 标题块内部压成一行：eyebrow + 标题横向排列，隐藏说明文字 */
.library-page .content-page-head > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.library-page .content-page-head .eyebrow { margin: 0; }
.library-page .content-page-head h2 { margin: 0; font-size: 18px; }
.library-page .content-page-head .video-meta { display: none; }
.library-page .card-grid { max-width: none; margin-inline: 0; }
/* `.card-grid.is-minimal` 把列数写死成 repeat(3, 1fr)，容器再宽也只有 3 列
   （每张 390px+，视觉上很空）。阅读库改回按 --card-min 自适应列数，
   min(100%, …) 保证窄屏自动退化为单列。 */
.library-page .card-grid.is-minimal {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr));
}
/* 工具栏/标签/网格跟着贴齐左右边缘，并允许 chips 在窄屏换行 */
/* 顶部工具区永远只占一行：搜索框弹性收缩，来源 chips 内部横向滚动，
   状态筛选与计数固定在右侧，不折行。 */
.library-page .library-toolbar {
  flex-wrap: nowrap;
  gap: var(--space-3);
  padding-inline: 0;
}
/* 满宽后来源 chips 变多（10+ 平台）：让 filters 弹性收缩、内部自行折行，
   把状态筛选与计数留在同一行右侧，避免计数被挤到第二行。 */
.library-page .library-filters { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.library-page .library-status-filters { flex: 0 0 auto; }
.library-page .library-count { flex: 0 0 auto; white-space: nowrap; }
.library-page .library-tags { padding-inline: 0; }
.library-page #libraryGrid,
.library-page #readArchiveGrid { padding-inline: 0; }
.library-page .library-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 280px;
  min-width: 160px;
}
.library-page .library-search-input {
  width: 100%;
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--border, #e3e3e6);
  border-radius: 8px;
  background: var(--bg-1, #fff);
  color: var(--fg, #1a1a1a);
  font-size: 14px;
  outline: none;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.library-page .library-search-input:focus {
  border-color: var(--accent, #4b7bec);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4b7bec) 15%, transparent);
}
.library-page .library-search-clear {
  position: absolute;
  right: 6px;
  border: none;
  background: transparent;
  color: var(--fg-3, #9a9aa0);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
}
.library-page .library-search-clear:hover { color: var(--fg, #1a1a1a); }

/* ── 全局统一内容网格：3 列 + 限宽居中 ──────────────────────────
   首页推荐(#videoGrid) / 阅读库(#libraryGrid) / 收藏·稍后再看(#savedList)
   共用同一套列数与容器宽度，消除各页卡片宽度不一致造成的视觉跳变。
   覆盖历史上多处 auto-fill/minmax 与满宽规则，固定为一行三列。 */
.card-grid,
	.saved-grid,
	#libraryGrid {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1180px;
  margin-inline: auto;
}
/* 收藏/稍后再看：无工具条，头部走标准 content-page-head（eyebrow + 标题 + meta 在上），
   3 列卡片在下方，与推荐流页面一致 */
.saved-page.content-page { display: block; }
.saved-page.content-page > .content-page-head { margin-bottom: var(--space-5); }

/* ── 观测面板 ────────────────────────────────────────────── */
.observability-header {
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  padding: 16px 20px;
  margin-bottom: 0;
}
.observability-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.observability-header-inner h2 { margin: 0; font-size: 18px; display: none; }  /* 去重复标题，tab 已定位当前页 */
.observability-subtitle { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); }
.observability-actions { display: flex; gap: 8px; }
.observability-body { max-width: 1200px; margin: 0 auto 16px; padding: 0 16px; }
.observability-loading { text-align: center; padding: 60px 20px; color: var(--text-secondary); font-size: 14px; }

.obs-section {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.obs-section-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.obs-row { display: flex; gap: 16px; margin-bottom: 0; }
.obs-half { flex: 1; margin-bottom: 16px; }

.obs-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.obs-small-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.obs-stat-card {
  background: var(--bg-color, #f8f9fa);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 3px solid #888;
}
.obs-stat-card.accent { border-left-color: #4caf50; }
.obs-stat-card.info { border-left-color: #2196f3; }
.obs-stat-card.warn { border-left-color: #ff9800; }
.obs-stat-card.muted { border-left-color: #9e9e9e; }
.obs-stat-val {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.obs-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* 平台表 */
.obs-platform-table-wrap { overflow-x: auto; }
.obs-platform-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.obs-platform-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.obs-platform-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-color);
}
.obs-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.obs-num.accent { color: #4caf50; font-weight: 600; }
.obs-meta b.accent { color: #4caf50; }
.obs-pct { font-size: 11px; color: var(--text-secondary); margin-left: 4px; }

.obs-platform-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
.obs-pb-bilibili { background: #fb7299; color: #fff; }
.obs-pb-xiaohongshu { background: #ff2442; color: #fff; }
.obs-pb-douyin { background: #111; color: #fff; }
.obs-pb-youtube { background: #ff0000; color: #fff; }
.obs-pb-twitter { background: #1d9bf0; color: #fff; }
.obs-pb-zhihu { background: #0066ff; color: #fff; }
.obs-pb-v2ex { background: #e2e2e2; color: #333; }
.obs-pb-reddit { background: #ff4500; color: #fff; }
.obs-pb-wechat { background: #07c160; color: #fff; }
.obs-pb-xiaoyuzhou { background: #36c8b4; color: #fff; }
.obs-pb-rss { background: #f9a825; color: #fff; }
.obs-pb-user-favorite { background: #9c27b0; color: #fff; }

/* 柱状图 */
.obs-bar-chart, .obs-topic-list { display: flex; flex-direction: column; gap: 6px; }
.obs-bar-row, .obs-topic-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.obs-bar-label {
  width: 100px;
  flex-shrink: 0;
  font-size: 12px;
  text-align: right;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obs-topic-label {
  width: 120px;
  flex-shrink: 0;
  font-size: 12px;
  text-align: right;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obs-bar-track {
  flex: 1;
  height: 16px;
  background: var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  min-width: 60px;
}
.obs-bar-fill {
  height: 100%;
  background: #2196f3;
  border-radius: 8px;
  transition: width 0.3s ease;
  min-width: 2px;
}
.obs-bar-topic { background: #4caf50; }
.obs-bar-val {
  width: 50px;
  flex-shrink: 0;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* 调用方 */
.obs-caller-table-wrap { margin-top: 12px; }
.obs-caller { font-size: 11px; background: var(--bg-color, #f0f0f0); padding: 1px 5px; border-radius: 3px; }

/* 元信息 */
.obs-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); }

/* ── 观测面板 Tab 切换 ──────────────────────────────────── */
.obs-tab-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0;
  overflow-x: auto;
}
.obs-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.obs-tab:hover { color: var(--text-primary); }
.obs-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-color, #4caf50);
}
.obs-tab-content { min-height: 100px; }

/* ── 池子探索 ────────────────────────────────────────────── */
.pex-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.pex-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pex-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.pex-filter-select {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-color, #fff);
  color: var(--text-primary);
  cursor: pointer;
}
.pex-filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pex-filter-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-left: auto;
}
.pex-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  color: #fff;
}
.pex-badge-status {
  background: var(--border-color);
  color: var(--text-secondary);
}
.pex-badge-bilibili { background: #fb7299; color: #fff; }
.pex-badge-xiaohongshu { background: #ff2442; color: #fff; }
.pex-badge-douyin { background: #111; color: #fff; }
.pex-badge-youtube { background: #ff0000; color: #fff; }
.pex-badge-twitter { background: #1d9bf0; color: #fff; }
.pex-badge-zhihu { background: #0066ff; color: #fff; }
.pex-badge-v2ex { background: #e2e2e2; color: #333; }
.pex-badge-reddit { background: #ff4500; color: #fff; }
.pex-badge-wechat { background: #07c160; color: #fff; }
.pex-badge-xiaoyuzhou { background: #36c8b4; color: #fff; }
.pex-badge-rss { background: #f9a825; color: #fff; }

/* ── 小红书推荐流 ──────────────────────────────────────────────────── */
.xhs-feed-meta {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  gap: 12px;
	  margin-bottom: 16px;
	  font-size: 14px;
	  color: var(--text-secondary);
	}
	.feed-meta-count {
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-secondary, #666);
}
.feed-meta-count strong { color: var(--text-primary, #333); }
	/* Floating action button for refresh in bottom-right corner */
	.fab-refresh-btn {
	  position: fixed;
	  bottom: 24px;
	  right: 24px;
	  width: 56px;
	  height: 56px;
	  border-radius: 50%;
	  background: var(--primary-color, #2563eb);
	  color: white;
	  font-size: 24px;
	  border: none;
	  cursor: pointer;
	  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  z-index: 100;
	  transition: transform 0.2s, box-shadow 0.2s;
	}
	.fab-refresh-btn:hover {
	  transform: translateY(-2px);
	  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
	}
	.fab-refresh-btn[hidden] {
	  display: none;
	}
	.xhs-feed-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #ff2442;
  color: #fff;
  letter-spacing: 0.3px;
}
.zhihu-feed-tag {
  background: #0066ff;
}
.bili-feed-tag {
  background: #fb7299;
}
.youtube-feed-tag {
  background: #ff0000;
}
.v2ex-feed-tag {
  background: #1e1e1e;
}
.xiaoyuzhou-feed-tag {
  background: #f5a623;
}

/* Keyword highlight */
.kw-highlight {
  background: #fff3b0;
  color: #333;
  padding: 0 2px;
  border-radius: 2px;
}

/* Feedback buttons */
.video-card-actions {
  display: flex;
  gap: 2px;
  padding: 4px 8px 4px 0;
  align-items: center;
  justify-content: flex-end;
}
.feedback-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0.4;
  transition: all 0.15s;
  line-height: 1;
}
.feedback-btn:hover {
  opacity: 0.8;
  background: var(--hover-bg, #f0f0f0);
}
.feedback-btn.is-active {
  opacity: 1;
}
.feedback-btn.is-active.like-btn {
  background: #e8f5e9;
}
.feedback-btn.is-active.dislike-btn {
  background: #fbe9e7;
}

.interest-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  background: var(--accent-bg, #e8f4fd);
  color: var(--accent, #0066ff);
  cursor: default;
}
.interest-tag small {
  font-size: 10px;
  opacity: 0.6;
}
.interest-tag-platforms {
  display: inline-flex;
  gap: 2px;
  margin-left: 2px;
}
.profile-interest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.profile-view-history {
  min-height: 40px;
}
.view-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.view-history-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--card-bg, #f8f9fa);
  transition: background 0.15s;
}
.view-history-item:hover {
  background: var(--card-hover-bg, #f0f1f3);
}
.view-history-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #222);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-history-link:hover {
  color: var(--accent, #0066ff);
}
.view-history-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary, #666);
}
.view-history-author {
  color: var(--text-secondary, #666);
}
.view-history-topic {
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--tag-bg, #eef0f2);
  color: var(--text-secondary, #666);
  font-size: 10px;
}
.view-history-time {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-tertiary, #999);
  white-space: nowrap;
}
.video-card-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(0,0,0,0.7);
  color: #fff;
  pointer-events: none;
}
.video-card-views {
  font-size: 11px;
  color: var(--text-secondary);
}
.video-card-excerpt {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Self-Evolution Page ===== */
.self-evolution-page {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.self-evo-actions {
  display: flex;
  gap: 8px;
}

.self-evo-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 24px 0;
}

.self-evo-stat-card {
  background: var(--card-color, #fff);
  border: 1px solid var(--border-color, #e4e3dd);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: transform 0.15s ease;
}

.self-evo-stat-card:hover {
  transform: translateY(-2px);
}

.self-evo-stat-card.accent {
  border-color: var(--accent, #9eacea);
  background: linear-gradient(135deg, rgba(158,172,234,0.08), rgba(158,172,234,0.15));
}

.self-evo-stat-card.warn {
  border-color: #faad14;
  background: linear-gradient(135deg, rgba(250,173,20,0.08), rgba(250,173,20,0.15));
}

.self-evo-stat-val {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-color, #1a1b1c);
  line-height: 1.2;
}

.self-evo-stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  margin-top: 4px;
}

.self-evo-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.self-evo-module-card {
  background: var(--card-color, #fff);
  border: 1px solid var(--border-color, #e4e3dd);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.self-evo-module-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.self-evo-module-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.self-evo-module-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.self-evo-module-head h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color, #1a1b1c);
}

.self-evo-module-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
  line-height: 1.5;
}

.self-evo-module-body {
  flex: 1;
  min-height: 100px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(0,0,0,0.02);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-color, #1a1b1c);
  overflow-y: auto;
  max-height: 300px;
}

.self-evo-empty {
  color: var(--text-secondary, #6b7280);
  text-align: center;
  padding: 20px 0;
  margin: 0;
  font-size: 13px;
}

.self-evo-module-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.self-evo-module-actions .pill-btn {
  flex: 1;
  min-width: 100px;
}

/* Detail panel */
.self-evo-detail {
  margin-top: 32px;
  background: var(--card-color, #fff);
  border: 1px solid var(--border-color, #e4e3dd);
  border-radius: 16px;
  padding: 24px;
}

.self-evo-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color, #e4e3dd);
}

.self-evo-detail-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.self-evo-detail-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-color, #1a1b1c);
  max-height: 600px;
  overflow-y: auto;
}

/* Insight report specific */
.insight-summary {
  background: linear-gradient(135deg, rgba(158,172,234,0.1), rgba(158,172,234,0.2));
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.7;
}

.insight-takeaways {
  list-style: none;
  padding: 0;
  margin: 0;
}

.insight-takeaways li {
  padding: 8px 12px;
  margin-bottom: 6px;
  background: rgba(0,0,0,0.03);
  border-radius: 6px;
  font-size: 13px;
  border-left: 3px solid var(--accent, #9eacea);
}

.insight-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.insight-topic-tag {
  padding: 4px 10px;
  background: rgba(158,172,234,0.15);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-color, #1a1b1c);
}

.insight-topic-tag.rising {
  background: rgba(82,196,26,0.15);
}

.insight-topic-tag.declining {
  background: rgba(234,102,104,0.15);
}

/* Knowledge card review */
.card-review {
  text-align: center;
  padding: 20px;
}

.card-review-question {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-color, #1a1b1c);
}

.card-review-answer {
  background: rgba(0,0,0,0.03);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
  display: none;
}

.card-review-answer.show {
  display: block;
}

.card-review-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.card-review-quality {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  justify-content: center;
}

.quality-btn {
  padding: 6px 12px;
  border: 1px solid var(--border-color, #e4e3dd);
  background: var(--card-color, #fff);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}

.quality-btn:hover {
  background: rgba(0,0,0,0.05);
}

.quality-btn.good {
  border-color: #52c41a;
  color: #52c41a;
}

.quality-btn.medium {
  border-color: #faad14;
  color: #faad14;
}

.quality-btn.bad {
  border-color: #ea6668;
  color: #ea6668;
}

/* Knowledge graph */
.graph-entities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.graph-entity {
  padding: 6px 12px;
  background: rgba(158,172,234,0.12);
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.graph-entity:hover {
  background: rgba(158,172,234,0.25);
  border-color: var(--accent, #9eacea);
}

.graph-entity .entity-count {
  font-size: 11px;
  color: var(--text-secondary, #6b7280);
  margin-left: 4px;
}

/* Notifications */
.notification-item {
  padding: 12px;
  margin-bottom: 8px;
  background: rgba(0,0,0,0.02);
  border-radius: 8px;
  border-left: 3px solid var(--accent, #9eacea);
  cursor: pointer;
  transition: background 0.15s ease;
}

.notification-item:hover {
  background: rgba(0,0,0,0.05);
}

.notification-item.high {
  border-left-color: #ea6668;
}

.notification-item.medium {
  border-left-color: #faad14;
}

.notification-item.low {
  border-left-color: #52c41a;
}

.notification-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.notification-body {
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
  line-height: 1.5;
}

.notification-time {
  font-size: 11px;
  color: var(--text-secondary, #6b7280);
  margin-top: 4px;
}

/* Loading state */
.self-evo-loading {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary, #6b7280);
  font-size: 13px;
}

.self-evo-loading::after {
  content: '...';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* Responsive */
@media (max-width: 768px) {
  .self-evolution-page {
    padding: 16px;
  }

  .self-evo-modules {
    grid-template-columns: 1fr;
  }

  .self-evo-status {
    grid-template-columns: repeat(2, 1fr);
  }

  .self-evo-stat-val {
    font-size: 22px;
  }
}

/* ── Clone page ──────────────────────────────────────────────── */
.clone-page .clone-stats-bar {
  display: flex;
  gap: 1.5rem;
  padding: 0.75rem 0;
  font-size: 0.85rem;
  color: var(--fg-3);
}
.clone-page .clone-stat strong {
  color: var(--fg);
  font-weight: 600;
}
.clone-page .clone-filter-bar {
  padding-bottom: 0.75rem;
}
.clone-page .clone-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.clone-page .clone-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 4px;
  background: var(--surface-warm);
  color: var(--fg-3);
}
.clone-page .clone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
.clone-page .clone-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
  overflow: hidden;
}
.clone-page .clone-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.clone-page .clone-card-body {
  flex: 1;
  padding: 0.75rem 0.85rem;
}
.clone-page .clone-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--fg);
  line-height: 1.3;
}
.clone-page .clone-card-desc {
  font-size: 0.8rem;
  color: var(--fg-3);
  margin: 0 0 0.5rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clone-page .clone-card-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--fg-4);
}
.clone-page .clone-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.clone-page .clone-card-tags .clone-tag {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
}
.clone-page .clone-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.85rem;
  background: var(--surface-warm);
  font-size: 0.75rem;
  color: var(--fg-4);
  border-top: 1px solid var(--border);
}
.clone-page .clone-card-category {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.clone-page .clone-status-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  border-radius: 3px;
  margin-bottom: 0.3rem;
}
.clone-page .clone-status-cloning { background: #fef3cd; color: #856404; }
.clone-page .clone-status-failed { background: #fde8e8; color: #c53030; }
.clone-page .clone-status-moved { background: #e0f2fe; color: #0369a1; }
.clone-page .clone-status-archived { background: #f3f4f6; color: #6b7280; }
.clone-page .clone-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--fg-4);
}
.clone-page .clone-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--fg-4);
}
.clone-page .spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: clone-spin 0.6s linear infinite;
  margin: 0 auto 0.5rem;
}
@keyframes clone-spin { to { transform: rotate(360deg); } }

/* ── 旅行预算页面 ─────────────────────────────────────── */
.travel-page { padding: 24px; max-width: 1200px; margin: 0 auto; }
.travel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.travel-header h2 { margin: 0; font-size: 22px; }
.travel-actions { display: flex; gap: 8px; }
.travel-subtabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 2px solid var(--border, #e5e7eb); padding-bottom: 0; }
.travel-subtab { padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: 14px; color: var(--text-secondary, #6b7280); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
.travel-subtab:hover { color: var(--text, #1f2937); }
.travel-subtab.active { color: var(--accent, #3b82f6); border-bottom-color: var(--accent, #3b82f6); font-weight: 600; }
.travel-view { position: relative; }
.travel-loading { text-align: center; padding: 40px; color: var(--text-secondary, #6b7280); }
.travel-doc-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.travel-doc-btn { padding: 5px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 999px; background: var(--surface, #fff); color: var(--text-secondary, #6b7280); font-size: 13px; cursor: pointer; transition: all 120ms ease-out; white-space: nowrap; }
.travel-doc-btn:hover { border-color: var(--text-secondary, #999); color: var(--text-primary, #111); }
.travel-doc-btn.is-active { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent, #3b82f6) 10%, transparent); font-weight: 600; }
.travel-error { text-align: center; padding: 20px; color: #ef4444; }
.travel-alerts { margin-bottom: 16px; }
.travel-alert { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; font-size: 14px; color: #92400e; }
.travel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.travel-flight-card { cursor: default; }
.travel-flight-price { font-size: 24px; font-weight: 700; color: var(--accent, #b5715c); font-family: var(--font-display, serif); margin: 2px 0 0; }
.travel-flight-price.muted { font-size: 15px; font-weight: 400; color: var(--meta, #a1a1aa); }
.travel-flight-meta { font-size: 13px; color: var(--muted, #6b7280); }
.travel-flight-date { font-size: 13px; color: var(--muted, #6b7280); margin-bottom: 6px; }
.travel-flight-child { font-size: 12px; color: var(--success, #10b981); margin-top: 4px; }
.travel-section { margin-bottom: 24px; }
.travel-section h3 { font-size: 16px; margin-bottom: 12px; }
.travel-table-wrap { overflow-x: auto; }
.travel-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.travel-table th, .travel-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border, #e5e7eb); }
.travel-table th { background: var(--bg-secondary, #f9fafb); font-weight: 600; }
.travel-table .travel-note { color: var(--text-secondary, #6b7280); font-size: 13px; }
.travel-doc-content { line-height: 1.7; font-size: 14px; }
.travel-doc-content h2 { font-size: 20px; margin: 24px 0 12px; }
.travel-doc-content h3 { font-size: 17px; margin: 20px 0 10px; }
.travel-doc-content h4 { font-size: 15px; margin: 16px 0 8px; }
.travel-doc-content p { margin: 8px 0; }
.travel-doc-content ul { padding-left: 20px; margin: 8px 0; }
.travel-doc-content blockquote { border-left: 3px solid var(--accent, #3b82f6); padding-left: 12px; color: var(--text-secondary, #6b7280); margin: 12px 0; }
.travel-md-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.travel-md-table th, .travel-md-table td { padding: 8px 10px; border: 1px solid var(--border, #e5e7eb); text-align: left; }
.travel-md-table th { background: var(--bg-secondary, #f9fafb); }

/* 惊喜推荐 topbar 工具 */
.delight-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 36, 66, 0.1);
  font-size: 12px;
  color: #ff2442;
}
.delight-pill strong {
  font-weight: 600;
}

/* ── 健康档案（并入桌面应用，表格/表单配主色调，卡片视图沿用推荐流小白卡）── */
.health-page {
  padding: 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.health-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 20px;
}
.health-tabs::-webkit-scrollbar { height: 0; }
.health-tab {
  padding: 10px 16px;
  font-size: var(--text-sm);
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s;
  margin-bottom: -1px;
}
.health-tab:hover { color: var(--fg); }
.health-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.health-content { min-height: 200px; }
.health-empty { text-align: center; padding: 40px; color: var(--muted); font-size: var(--text-sm); }

.health-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--elev-raised);
}
.health-card h2 {
  font-size: 16px;
  margin: 0 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
}

.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--elev-raised);
}
.stat-card .stat-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.stat-card .stat-value { font-size: 24px; font-weight: 700; font-family: var(--font-display); }
.stat-card .stat-value.danger { color: var(--danger); }
.stat-card .stat-value.warning { color: var(--warn); }
.stat-card .stat-value.success { color: var(--success); }

.health-members { display: flex; gap: 10px; flex-wrap: wrap; }
.health-sm { min-height: 30px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.pill-btn.health-danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger), transparent 70%); background: none; }

.table-wrap { overflow-x: auto; }
.health-page table, .lab-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.health-page th, .health-page td, .lab-table th, .lab-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); }
.health-page th, .lab-table th { background: var(--surface-warm); font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.health-page tbody tr:hover, .lab-table tbody tr:hover { background: var(--surface-warm); }
.lab-table td.abnormal { color: var(--danger); font-weight: 600; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 500; }
.badge-active { background: var(--success, #d1fae5); color: #147a4f; }
.badge-inactive { background: var(--border-soft, #e4e4e7); color: #71717a; }
.badge-resolved { background: #e2e8f0; color: #334155; }
.badge-chronic { background: #fef3c7; color: #92400e; }
.badge-high { background: #fee2e2; color: #991b1b; }
.badge-low { background: #fef3c7; color: #92400e; }
.badge-normal { background: #d1fae5; color: #147a4f; }

.health-success-text { color: var(--success); font-weight: 600; }
.health-danger-text { color: var(--danger); font-weight: 600; }
.health-muted-text { color: var(--muted); font-weight: 600; }
.health-section-title { font-size: 16px; margin: 20px 0 10px; font-family: var(--font-display); }
.health-card-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 6px; }
.health-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.health-entity-card:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.health-is-past { opacity: .7; }
.health-sub { color: var(--meta); font-size: 12px; }
.health-pre { white-space: pre-wrap; font-family: var(--font-body); }

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.page-header h2 { font-size: 18px; margin: 0; font-family: var(--font-display); }
.page-header p { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.section-header h2 { font-size: 18px; margin: 0; font-family: var(--font-display); }

/* 健康页弹窗（沿用应用圆角与阴影） */
.health-modal-overlay { position: fixed; inset: 0; background: rgba(24, 24, 27, 0.5); display: none; align-items: center; justify-content: center; z-index: 200; }
.health-modal-overlay.show { display: flex; }
.health-modal {
  background: var(--bg);
  border-radius: 16px;
  padding: 24px;
  max-width: 640px;
  width: calc(100% - 32px);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(24, 24, 27, 0.25);
}
.health-modal-title { font-size: 16px; margin: 0 0 16px; font-family: var(--font-display); font-weight: 600; }
.health-modal .form-group { margin-bottom: 14px; }
.health-modal .form-group label, .health-modal form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; color: var(--muted); }
.health-modal .form-group input, .health-modal .form-group select, .health-modal .form-group textarea,
.health-modal form input, .health-modal form select, .health-modal form textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border-soft); border-radius: 6px;
  font-size: 13px; background: var(--surface); color: var(--fg); font-family: inherit; box-sizing: border-box;
}
.health-modal .form-group textarea, .health-modal form textarea { min-height: 60px; resize: vertical; }
.health-modal .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.health-modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.health-modal .detail-row { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.health-modal .detail-row .key { color: var(--muted); min-width: 100px; flex-shrink: 0; }
.health-modal .detail-row .val { flex: 1; }
.health-modal .detail p { font-size: 13px; margin: 8px 0; line-height: 1.6; }

.ai-insight { font-size: 13px; line-height: 1.8; color: var(--fg); background: var(--surface-warm); padding: 16px; border-radius: 8px; border-left: 4px solid var(--accent); white-space: pre-wrap; }

.interaction-box { padding: 10px; margin: 8px 0; border-left: 3px solid var(--warn); background: var(--surface-warm); border-radius: 6px; font-size: 13px; }
.interaction-box.major { border-left-color: var(--danger); background: #fdf1f0; }
.interaction-box p { margin: 6px 0 0; }

.timeline { position: relative; padding-left: 8px; }
.timeline-date { font-size: 13px; font-weight: 600; color: var(--muted); margin: 16px 0 8px; padding-left: 32px; }
.timeline-item { position: relative; padding: 10px 0 10px 40px; border-left: 3px solid var(--border-soft); margin-left: 14px; }
.timeline-icon { position: absolute; left: -15px; top: 12px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.timeline-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.timeline-desc { font-size: 13px; color: var(--muted); margin-bottom: 6px; }

/* ── 面试题阅读追踪页面 ─────────────────────────────────────── */
.interview-body { max-width: 1200px; margin: 0 auto 16px; padding: 0 16px; }
.interview-stats { display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.interview-stat-card { flex: 1 1 100px; min-width: 100px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px; text-align: center; }
.interview-stat-value { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.interview-stat-label { font-size: 12px; color: var(--muted); }
.interview-tabs { display: flex; gap: 8px; margin: 16px 0; border-bottom: 1px solid var(--border-soft); padding-bottom: 0; }
.interview-tab-btn { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; cursor: pointer; transition: all .2s; }
.interview-tab-btn:hover { color: var(--text-primary); }
.interview-tab-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.interview-content { min-height: 300px; }
.interview-question-card { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px; margin-bottom: 12px; transition: all .2s; }
.interview-question-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.interview-question-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.interview-question-title { font-size: 15px; font-weight: 600; color: var(--text-primary); flex: 1; line-height: 1.5; }
.interview-question-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.interview-difficulty { font-size: 12px; color: #f59e0b; white-space: nowrap; }
.interview-category { font-size: 11px; padding: 2px 8px; background: var(--bg-hover); border-radius: 4px; color: var(--muted); white-space: nowrap; }
.interview-mastery-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; white-space: nowrap; font-weight: 500; }
.interview-mastery-not_started { background: #f3f4f6; color: #6b7280; }
.interview-mastery-reading { background: #dbeafe; color: #2563eb; }
.interview-mastery-understood { background: #d1fae5; color: #059669; }
.interview-mastery-mastered { background: #fef3c7; color: #d97706; }
.interview-mastery-need_review { background: #fee2e2; color: #dc2626; }
.interview-question-tags { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.interview-question-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.interview-action-btn { padding: 6px 14px; font-size: 12px; border-radius: 6px; border: 1px solid var(--border-soft); background: var(--bg-elevated); color: var(--text-primary); cursor: pointer; transition: all .2s; }
.interview-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.interview-action-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.interview-action-btn.primary:hover { opacity: .9; }
.interview-action-btn.success { background: #10b981; color: #fff; border-color: #10b981; }
.interview-action-btn.warning { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.interview-empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.interview-loading { text-align: center; padding: 48px 16px; color: var(--muted); }

/* ── 全部题目：题库源切换（追踪题库 iq / 岗位题库 kb）─────── */
.interview-bank-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.interview-bank-btn { padding: 6px 14px; font-size: 13px; border-radius: 20px; border: 1px solid var(--border-soft); background: var(--bg-elevated); color: var(--text-primary); cursor: pointer; transition: all .2s; }
.interview-bank-btn:hover { border-color: var(--accent); color: var(--accent); }
.interview-bank-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.interview-bank-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.interview-bank-chip { padding: 3px 10px; font-size: 12px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-hover); color: var(--muted); cursor: pointer; transition: all .2s; }
.interview-bank-chip:hover { color: var(--accent); border-color: var(--accent); }
.interview-bank-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.interview-kb-answer, .interview-kb-want { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.6; color: var(--text-primary); background: var(--bg-hover); white-space: pre-wrap; }
.interview-kb-answer { border-left: 3px solid var(--accent); }
.interview-kb-want { border-left: 3px solid #f59e0b; }
.interview-kb-answer strong, .interview-kb-want strong { display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted); }

/* ── 面试安排区域 ─────────────────────────────────────────── */
.interview-schedule-section { margin: 16px 0; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px; }
.interview-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.interview-section-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.interview-section-badge { font-size: 12px; padding: 2px 10px; background: #fee2e2; color: #dc2626; border-radius: 10px; font-weight: 500; }
.interview-schedule-list { display: flex; flex-direction: column; gap: 10px; }
.interview-schedule-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-hover); border-radius: 8px; border-left: 3px solid var(--accent); transition: all .2s; }
.interview-schedule-card:hover { background: var(--bg-elevated); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.interview-schedule-card.status-done { border-left-color: #9ca3af; opacity: .7; }
.interview-schedule-card.status-progress { border-left-color: #f59e0b; }
.interview-schedule-date { flex-shrink: 0; text-align: center; min-width: 60px; }
.interview-schedule-date .day { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.interview-schedule-date .month { font-size: 11px; color: var(--muted); }
.interview-schedule-info { flex: 1; min-width: 0; }
.interview-schedule-company { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.interview-schedule-role { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.interview-schedule-note { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.interview-schedule-status { flex-shrink: 0; font-size: 11px; padding: 3px 10px; border-radius: 4px; font-weight: 500; }
.status-upcoming { background: #dcfce7; color: #16a34a; }
.status-progress { background: #fef3c7; color: #d97706; }
.status-done { background: #f3f4f6; color: #6b7280; }

/* ── 岗位弹药库区域 ───────────────────────────────────────── */
.interview-ammo-section { margin: 16px 0; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px; }
.interview-ammo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.interview-ammo-card { padding: 14px; background: var(--bg-hover); border-radius: 8px; border: 1px solid var(--border-soft); transition: all .2s; cursor: pointer; }
.interview-ammo-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); transform: translateY(-2px); }
.interview-ammo-company { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.interview-ammo-stats { display: flex; gap: 12px; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.interview-ammo-stat { display: flex; align-items: center; gap: 4px; }
.interview-ammo-stat-value { font-weight: 600; color: var(--text-primary); }
.interview-ammo-files { font-size: 11px; color: var(--muted); line-height: 1.6; }
.interview-ammo-file { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dashed var(--border-soft); }
.interview-ammo-file:last-child { border-bottom: none; }
.interview-ammo-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.interview-ammo-file-date { flex-shrink: 0; color: var(--muted); }

/* ── 弹药库 · 阅读视图 ───────────────────────────────────── */
.interview-ammo-layout {
  display: flex; gap: 12px; align-items: stretch;
  height: calc(100vh - 200px); min-height: 420px;
}
.interview-ammo-companies {
  flex: 0 0 168px; max-width: 20%; min-width: 0; display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--border-soft); border-radius: 12px; padding: 8px;
  background: var(--bg-elevated); height: 100%; overflow-y: auto;
}
.interview-ammo-company-btn {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; background: none; border: none; border-radius: 8px; cursor: pointer;
  font: inherit; color: var(--muted); text-align: left; font-size: 13px;
}
.interview-ammo-company-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.interview-ammo-company-btn.is-active { background: var(--accent); color: #fff; font-weight: 600; }
.interview-ammo-company-btn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.interview-ammo-company-btn-count { flex-shrink: 0; font-size: 10px; background: var(--bg-hover); color: var(--muted); border-radius: 999px; padding: 1px 7px; }
.interview-ammo-company-btn.is-active .interview-ammo-company-btn-count { background: rgba(255,255,255,.25); color: #fff; }
.interview-ammo-files-panel {
  flex: 0 0 320px; max-width: 34%; min-width: 0;
  border: 1px solid var(--border-soft); border-radius: 12px; padding: 6px 0;
  background: var(--bg-elevated); height: 100%; overflow-y: auto;
}
.interview-ammo-reader-status { font-size: 10px; padding: 1px 8px; border-radius: 999px; }
.interview-ammo-reader-status.is-unread { background: var(--bg-hover); color: var(--muted); }
.interview-ammo-reader-status.is-reading { background: rgba(180,83,9,.14); color: var(--warn); }
.interview-ammo-reader-status.is-finished { background: rgba(26,127,78,.14); color: var(--ok); }
.interview-ammo-company-block { margin-bottom: 12px; }
.interview-ammo-company-title { font-size: 13px; font-weight: 600; color: var(--text-primary); padding: 6px 10px; border-bottom: 1px solid var(--border-soft); }
.interview-ammo-cat-label { font-size: 11px; color: var(--muted); padding: 6px 10px 2px; }
.interview-ammo-file-row { display: flex; align-items: center; padding: 0 10px; }
.interview-ammo-file-row.is-current { background: var(--bg-elevated); border-radius: 6px; }
.interview-ammo-file-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 4px;
  background: none; border: none; cursor: pointer; text-align: left; font: inherit;
}
.interview-ammo-file-btn:hover .interview-ammo-file-name { color: var(--accent); }
.interview-ammo-status { flex-shrink: 0; font-size: 10px; padding: 1px 7px; border-radius: 999px; }
.interview-ammo-status.is-unread { background: var(--bg-hover); color: var(--muted); }
.interview-ammo-status.is-reading { background: rgba(180,83,9,.12); color: var(--warn); }
.interview-ammo-status.is-finished { background: rgba(26,127,78,.12); color: var(--ok); }
.interview-ammo-empty-line { padding: 6px 10px; font-size: 11px; color: var(--faint); }

.interview-ammo-reader {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--bg-elevated); max-height: 72vh; display: flex; flex-direction: column; overflow: hidden;
}
.interview-ammo-reader-empty { padding: 48px 20px; text-align: center; color: var(--faint); font-size: 13px; }
.interview-ammo-reader-loading { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.interview-ammo-reader-err { padding: 24px 20px; color: var(--warn); font-size: 13px; }
.interview-ammo-reader-header { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.interview-ammo-reader-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.interview-ammo-reader-meta { font-size: 11px; color: var(--muted); margin: 3px 0 8px; }
.interview-ammo-reader-actions { display: flex; gap: 8px; }
.interview-ammo-reader-actions .pill-btn { padding: 3px 12px; font-size: 12px; }
.interview-ammo-reader-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px; font-size: 13.5px; line-height: 1.75; color: var(--text-primary); }
.interview-ammo-reader-body h1, .interview-ammo-reader-body h2, .interview-ammo-reader-body h3,
.interview-ammo-reader-body h4 { margin: 18px 0 8px; line-height: 1.4; }
.interview-ammo-reader-body h1 { font-size: 19px; border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; }
.interview-ammo-reader-body h2 { font-size: 16px; }
.interview-ammo-reader-body h3 { font-size: 14.5px; }
.interview-ammo-reader-body p { margin: 8px 0; }
.interview-ammo-reader-body ul, .interview-ammo-reader-body ol { margin: 8px 0; padding-left: 22px; }
.interview-ammo-reader-body li { margin: 3px 0; }
.interview-ammo-reader-body blockquote { margin: 10px 0; padding: 6px 12px; border-left: 3px solid var(--accent); background: var(--bg-hover); color: var(--muted); border-radius: 0 6px 6px 0; }
.interview-ammo-reader-body pre { margin: 10px 0; padding: 12px; background: var(--bg-hover); border: 1px solid var(--border-soft); border-radius: 8px; overflow-x: auto; font-size: 12px; line-height: 1.6; }
.interview-ammo-reader-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg-hover); padding: 1px 4px; border-radius: 4px; font-size: 12px; }
.interview-ammo-reader-body pre code { padding: 0; background: none; }
.interview-ammo-reader-body table { border-collapse: collapse; margin: 10px 0; width: 100%; font-size: 12.5px; }
.interview-ammo-reader-body th, .interview-ammo-reader-body td { border: 1px solid var(--border-soft); padding: 5px 9px; text-align: left; }
.interview-ammo-reader-body th { background: var(--bg-hover); font-weight: 600; }
.interview-ammo-reader-body a { color: var(--accent); }
.interview-ammo-reader-body hr { border: none; border-top: 1px solid var(--border-soft); margin: 14px 0; }
@media (max-width: 900px) {
  .interview-ammo-layout { flex-direction: column; height: auto; }
  .interview-ammo-companies { flex: 1 1 auto; max-width: none; max-height: 30vh; flex-direction: row; flex-wrap: wrap; height: auto; }
  .interview-ammo-files-panel { flex: 1 1 auto; max-width: none; max-height: 30vh; height: auto; }
  .interview-ammo-reader { max-height: none; min-height: 50vh; height: auto; }
}

/* ── 公司岗位详情卡片 ─────────────────────────────────────── */
.interview-company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.interview-company-card { padding: 16px; background: var(--bg-hover); border-radius: 10px; border: 1px solid var(--border-soft); transition: all .2s; }
.interview-company-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.interview-company-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.interview-company-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.interview-company-status { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; flex-shrink: 0; }
.interview-company-position { font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.interview-company-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: 11px; color: var(--muted); }
.interview-company-meta-item { display: flex; align-items: center; gap: 3px; }
.interview-company-section { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-soft); }
.interview-company-section-title { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.interview-company-summary { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 6px; }
.interview-company-list { font-size: 11px; color: var(--muted); line-height: 1.7; padding-left: 16px; margin: 0; }
.interview-company-list li { margin-bottom: 2px; }
.interview-company-resume { font-size: 11px; color: var(--muted); background: var(--bg-elevated); padding: 6px 8px; border-radius: 4px; margin-top: 6px; }
.interview-company-resume strong { color: var(--text-primary); }

/* ── 面试页面三级导航布局 ─────────────────────────────────── */
.interview-body { max-width: 1200px; margin: 0 auto 16px; padding: 0 16px; }
.interview-subtabbar { display: flex; gap: 4px; margin: 12px 0 16px; padding: 4px; background: var(--bg-hover); border-radius: 10px; overflow-x: auto; flex-wrap: nowrap; }
.interview-subtab-btn { flex-shrink: 0; padding: 8px 16px; background: none; border: none; border-radius: 8px; color: var(--muted); font-size: 13px; cursor: pointer; transition: all .2s; white-space: nowrap; font-weight: 500; }
.interview-subtab-btn:hover { color: var(--text-primary); background: var(--bg-elevated); }
.interview-subtab-btn.is-active { background: var(--accent); color: #fff; font-weight: 600; }
.interview-content-area { min-height: 400px; }

/* 统计页面样式 */
.interview-stats-page { display: flex; flex-direction: column; gap: 16px; }
.interview-stats-row { display: flex; gap: 12px; flex-wrap: wrap; }
.interview-stat-card { flex: 1 1 120px; min-width: 120px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px; text-align: center; }
.interview-stat-value { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.interview-stat-label { font-size: 12px; color: var(--muted); }
.interview-chart-section { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px; }
.interview-chart-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); }
.interview-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.interview-bar-label { width: 100px; font-size: 12px; color: var(--muted); text-align: right; flex-shrink: 0; }
.interview-bar-track { flex: 1; height: 20px; background: var(--bg-hover); border-radius: 4px; overflow: hidden; }
.interview-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-size: 11px; color: #fff; font-weight: 600; min-width: 30px; }

/* ── 统一三栏页面布局 ─────────────────────────────────────── */
.page-header {
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 20px;
}
.page-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.page-header-inner h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.page-header-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.page-subtabbar {
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  padding: 0 20px;
}
.page-subtabbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 8px 0;
}
/* 期 4：子标签按 A/B/C 三子系统分「备战 / 研习 / 复盘」三段（纯视觉分组，不改行为） */
.page-subtab-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.page-subtab-group + .page-subtab-group {
  margin-left: 8px;
  padding-left: 13px;
  border-left: 1px solid var(--border-color);
}
.page-subtab-group-label {
  flex-shrink: 0;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-secondary);
  opacity: .7;
  user-select: none;
}
.page-subtab-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.page-subtab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.page-subtab-btn.is-active {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
  font-weight: 600;
}
.page-body {
  max-width: 1200px;
  margin: 0 auto 16px;
  padding: 16px;
}
/* 第三栏固定：页面标题栏/子导航栏吸顶到 tabbar 下方，内容在其下方滚动 */
.page-header,
.page-subtabbar {
  position: sticky;
  top: 124px;
  z-index: 18;
}

/* ── 反问话术页面样式 ─────────────────────────────────────── */
.rebuttals-container { padding: 0; }
.rebuttals-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rebuttal-filter-btn {
  padding: 6px 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--surface-color);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.rebuttal-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.rebuttal-filter-btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.rebuttal-group { margin-bottom: 24px; }
.rebuttal-group-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text-color);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}
.rebuttal-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: all 0.2s;
  border-left: 3px solid var(--border-color);
}
.rebuttal-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.rebuttal-card.priority-high { border-left-color: #EA6668; }
.rebuttal-card.priority-mid { border-left-color: #FAAD14; }
.rebuttal-card.priority-low { border-left-color: #52C41A; }
.rebuttal-question {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 8px;
  line-height: 1.5;
}
.rebuttal-purpose {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.4;
}
.rebuttal-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.rebuttal-priority {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.rebuttal-card.priority-high .rebuttal-priority { background: rgba(234,102,104,0.1); color: #EA6668; }
.rebuttal-card.priority-mid .rebuttal-priority { background: rgba(250,173,20,0.1); color: #FAAD14; }
.rebuttal-card.priority-low .rebuttal-priority { background: rgba(82,196,26,0.1); color: #52C41A; }
.rebuttal-company {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(155,187,244,0.15);
  color: var(--accent);
}
.rebuttal-tags {
  font-size: 11px;
  color: var(--text-secondary);
}
.rebuttal-used {
  font-size: 11px;
  color: #52C41A;
}
.rebuttal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.rebuttal-action-btn {
  padding: 4px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.rebuttal-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(155,187,244,0.05);
}

/* ── 对话归档（用户与 AI 对话内容）─────────────────────────── */
.conv-archive-page .library-toolbar { margin-bottom: 12px; }
.conv-archive-list { display: flex; flex-direction: column; gap: 14px; max-width: 880px; }
.conv-card {
  border: 1px solid var(--border, #ececec); border-radius: 12px; background: var(--card-bg, #fff);
  padding: 12px 14px;
}
.conv-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conv-seq {
  flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  background: #f3f0fb; color: #7c5cd6; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.conv-kind { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: #eef2ff; color: #5b54d6; }
.conv-source { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: #f1f5f9; color: #64748b; }
.conv-author-line { font-size: 12px; color: var(--text-secondary, #6b6b6b); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.conv-author { color: var(--text-main, #1c1c1e); font-weight: 600; }
.conv-meta { color: var(--text-muted, #a8a8a8); }
.conv-title { font-size: 15px; font-weight: 600; color: var(--text-main, #1c1c1e); margin: 8px 0 4px; line-height: 1.5; }
.conv-question {
  font-size: 12.5px; color: var(--text-secondary, #6b6b6b); background: #faf9fb;
  border-left: 2px solid #e9e2fb; padding: 7px 10px; border-radius: 6px; margin: 8px 0; line-height: 1.55; word-break: break-word;
}
.conv-link { display: inline-block; font-size: 12px; color: #7c5cd6; text-decoration: none; margin-bottom: 6px; }
.conv-link:hover { text-decoration: underline; }
.conv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.conv-tag { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: #f5f5f5; color: #6b6b6b; }
.conv-detail { margin-top: 8px; border: 1px solid #f0f0f0; border-radius: 8px; }
.conv-detail > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #6b6b6b);
  padding: 8px 10px; background: #fafafa; border-radius: 8px 8px 0 0; list-style: none;
}
.conv-detail > summary::-webkit-details-marker { display: none; }
.conv-detail[open] > summary { border-bottom: 1px solid #f0f0f0; }
.conv-markdown { padding: 10px 12px; font-size: 13px; line-height: 1.7; color: #2b2b2b; overflow-x: auto; }
.conv-analysis { background: #fcfbff; }
/* ── 内容库 v2：编号/分组/状态按钮/链接行 ─────────────────── */
.conv-entry-num {
  flex: 0 0 auto; min-width: 34px; height: 22px; padding: 0 7px; border-radius: 6px;
  background: #e8f7f0; color: #0e9f6e; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.conv-group { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: #fff7ed; color: #c2660a; }
.conv-head-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conv-links { display: flex; gap: 14px; align-items: center; }
.conv-links .conv-link { margin-bottom: 6px; }
.conv-state-btn {
  flex: 0 0 auto; height: 22px; padding: 0 10px; border-radius: 10px; border: 1px solid #e5e7eb;
  background: #fff; color: #9ca3af; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.conv-state-btn[data-state="reading"] { background: #fffbeb; border-color: #f59e0b; color: #b45309; }
.conv-state-btn[data-state="digested"] { background: #ecfdf5; border-color: #10b981; color: #047857; }
.conv-state-btn:hover { border-color: #7c5cd6; color: #7c5cd6; }
.conv-archive-page .library-filters { margin-bottom: 12px; max-width: 880px; }
.conv-markdown :where(h1,h2,h3) { font-size: 15px; margin: 10px 0 6px; }
.conv-markdown :where(p) { margin: 6px 0; }
.conv-markdown :where(blockquote) { margin: 8px 0; padding: 4px 10px; border-left: 3px solid #e5e0f5; color: #555; background: #faf9ff; }
.conv-markdown :where(ul,ol) { padding-left: 20px; margin: 6px 0; }
.conv-markdown :where(code) { background: #f3f3f3; padding: 1px 4px; border-radius: 4px; font-size: 12px; }
.conv-markdown :where(pre) { background: #f6f6f6; padding: 10px; border-radius: 8px; overflow-x: auto; }
.conv-markdown :where(a) { color: #7c5cd6; }

/* ── 乐仔相册：内嵌 /lezai 独立成长分析平台 ─────────────────── */
.lezai-embed {
  height: calc(100vh - var(--topbar-height, 56px) - 16px);
  padding: 0;
  overflow: hidden;
}
.lezai-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}