:root {
      --bg: #f3f4f8;
      --panel: rgba(255,255,255,.7);
      --card: rgba(255,255,255,.78);
      --line: rgba(18,25,40,.08);
      --ink: #16192a;
      --sub: #6d7388;
      --accent: #2f456f;
      --accent-soft: rgba(47,69,111,.08);
      --chip: #eef1f7;
      --shadow: 0 16px 40px rgba(15, 23, 42, .08);
      --phone-w: 390px;
      --phone-h: 820px;
      --radius: 26px;
      /* 过场动画缓动曲线（之前被引用但未定义，导致动画僵硬）*/
      --ease-smooth: cubic-bezier(.4, 0, .2, 1);
      --ease-elastic: cubic-bezier(.34, 1.36, .42, 1);
      --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; font-family: Inter, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif; color: var(--ink); background:
      radial-gradient(circle at top left, rgba(63,91,140,.07), transparent 26%),
      radial-gradient(circle at bottom right, rgba(28,37,61,.06), transparent 22%),
      var(--bg);
    }

    body {
      min-height: 100vh;
      padding: 24px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .shell {
      width: 100%;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .panel {
      background: var(--panel);
      border: 1px solid rgba(255,255,255,.6);
      box-shadow: var(--shadow);
      border-radius: 28px;
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
    }

    .sidebar, .spec {
      padding: 28px;
      position: sticky;
      top: 24px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .02em;
      color: var(--accent);
      background: var(--accent-soft);
      border-radius: 999px;
      padding: 8px 12px;
      margin-bottom: 18px;
    }

    h1, h2, h3, h4, p { margin: 0; }

    .sidebar h1 {
      font-size: 44px;
      line-height: 1.02;
      letter-spacing: -.04em;
      margin-bottom: 16px;
    }

    .sidebar p.lead {
      color: var(--sub);
      font-size: 15px;
      line-height: 1.75;
      margin-bottom: 20px;
    }

    .stack { display: grid; gap: 14px; }

    .note {
      border-radius: 22px;
      background: rgba(255,255,255,.68);
      border: 1px solid var(--line);
      padding: 16px 16px 14px;
    }

    .note h3 {
      font-size: 14px;
      line-height: 1.35;
      margin-bottom: 8px;
    }

    .note p {
      font-size: 13px;
      line-height: 1.7;
      color: var(--sub);
    }

    .label-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }

    .tag {
      background: rgba(255,255,255,.7);
      border: 1px solid var(--line);
      color: var(--ink);
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
    }

    .viewer { padding: 0; }

    .viewer-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
    }

    .screen-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .screen-tab {
      border: 1px solid var(--line);
      background: rgba(255,255,255,.65);
      border-radius: 999px;
      padding: 9px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--sub);
      cursor: pointer;
      transition: .18s ease;
    }

    .screen-tab.active {
      background: var(--accent);
      color: white;
      border-color: rgba(47,69,111,.55);
    }

    .screen-tab[data-screen="search"] {
      display: none;
    }

    .hint {
      font-size: 12px;
      color: var(--sub);
      line-height: 1.6;
      text-align: right;
      max-width: 180px;
    }

    .phone-wrap {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 0;
    }

    .phone {
      width: var(--phone-w);
      height: var(--phone-h);
      background: linear-gradient(180deg, #f8f8fb 0%, #efeff5 100%);
      border: 8px solid #1a1f39;
      border-radius: 42px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 28px 60px rgba(8,15,40,.18);
    }

    .island {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 88px;
      height: 26px;
      background: #0f1430;
      border-radius: 999px;
      z-index: 9;
    }

    .screen {
      position: absolute;
      inset: 0;
      padding: 56px 18px 92px;
      overflow-y: auto;
      display: none;
      opacity: 1;
      transform: none;
      filter: none;
      transform-origin: 50% 42%;
      transition:
        opacity .34s var(--ease-out-soft),
        transform .42s var(--ease-out-soft),
        filter .34s var(--ease-out-soft);
    }

    .screen.active { display: block; }

    /* 点摘要卡片进入详情：整页从底部上滑覆盖（iOS 模态 push-up），来源页垫在下面保持可见。
       用 #id 提升特异性，盖过通用的 .screen.screen-target-pre 初始态。 */
    /* 1:1 还原 ai-news-digest 原版：整页从屏幕外底部滑入，不淡入，0.38s 同款曲线 */
    #screen-detail.detail-slide-pre {
      transform: translateY(100%);
      opacity: 1; /* 覆盖通用 screen-target-pre 的 opacity:0，原版无淡入、全程不透明 */
      transition: none;
      pointer-events: none;
    }

    /* 关键：上滑期间详情页本身底色是半透明的，下层首页未隐藏会透出造成"虚影"。
       这里补一层与 body 一致的实心底色 #f3f4f8，并把详情页置于来源页之上。
       过场结束后该类移除，恢复原本依赖 body 垫底的渲染，视觉无差别。 */
    #screen-detail.transitioning {
      z-index: 50;
      will-change: transform;
      background-color: #f3f4f8;
      transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .screen.transitioning {
      display: block;
    }

    .screen.screen-exit {
      opacity: 0;
      transform: translateY(-10px) scale(.986);
      filter: blur(6px);
      pointer-events: none;
    }

    .screen::-webkit-scrollbar { width: 0; height: 0; }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      position: sticky;
      top: 0;
      z-index: 3;
      padding-bottom: 10px;
      background: linear-gradient(180deg, rgba(248,248,251,.95) 0%, rgba(248,248,251,.92) 64%, rgba(248,248,251,0) 100%);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .topbar h2 {
      font-size: 24px;
      line-height: 1.1;
      letter-spacing: -.04em;
    }

    .topbar-icon-btn,
    .topbar-spacer {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
    }

    .topbar-icon-btn {
      appearance: none;
      border: 1px solid rgba(18,25,40,.08);
      background: rgba(255,255,255,.78);
      border-radius: 999px;
      color: var(--sub);
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 10px 20px rgba(11,19,38,.08);
      font-size: 15px;
      font-weight: 700;
    }

    #screen-home {
      --home-pull-offset: 0px;
      --home-refresh-indicator-offset: 0px;
      padding: 46px 16px 96px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 18%),
        linear-gradient(180deg, #f7f8fb 0%, #eff1f6 100%);
    }

    .home-topbar {
      position: sticky;
      top: -4px;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
      padding: 0 2px;
      background: transparent;
      pointer-events: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transition: opacity .22s ease, transform .22s ease;
    }

    .home-topbar.is-muted {
      opacity: .64;
      transform: translateY(-2px);
    }

    #screen-home.home-layer-exit {
      opacity: 0;
      transform: scale(.985);
      filter: blur(8px);
      pointer-events: none;
    }

    .screen.screen-target-pre {
      opacity: 0;
      transform: translateY(14px) scale(.988);
      filter: blur(6px);
    }

    .screen.active.primary-screen-pre-enter,
    .screen.transitioning.primary-screen-pre-enter {
      opacity: 0;
      transform: translateY(16px) scale(.988);
      filter: blur(8px);
      pointer-events: none;
    }

    .home-top-icon {
      width: 40px;
      height: 40px;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      color: rgba(20, 24, 38, .82);
      display: grid;
      place-items: center;
      font-size: 19px;
      font-weight: 700;
      box-shadow: none;
      cursor: pointer;
      pointer-events: auto;
      text-shadow: 0 1px 12px rgba(255,255,255,.18);
      transition: opacity .22s ease, transform .22s ease, color .22s ease;
    }

    .home-topbar.is-muted .home-top-icon {
      opacity: .78;
    }

    .home-top-icon:active {
      transform: scale(.96);
    }

    .home-search-back {
      display: none;
      border-radius: 999px;
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(18,25,40,.08);
      box-shadow: 0 10px 22px rgba(13, 20, 34, .10);
      font-size: 18px;
    }

    #screen-home.search-open .home-search-back {
      display: grid;
    }

    #screen-home.search-open #home-settings-trigger {
      display: none;
    }

    #screen-home.search-open {
      overflow: hidden;
    }

    .home-search-entry {
      width: 40px;
      margin-left: auto;
      pointer-events: auto;
      transition: width .28s ease;
    }

    #screen-home.search-open .home-search-entry {
      width: calc(100% - 48px);
    }

    .home-search-inline {
      height: 40px;
      display: flex;
      align-items: center;
      gap: 8px;
      overflow: hidden;
      border-radius: 999px;
      padding: 0;
      background: transparent;
      border: 1px solid transparent;
      box-shadow: none;
      transition: background .24s ease, border-color .24s ease, box-shadow .24s ease, padding .24s ease;
    }

    #screen-home.search-open .home-search-inline {
      padding: 0 8px 0 4px;
      background: rgba(255,255,255,.95);
      border-color: rgba(18,25,40,.06);
      box-shadow: 0 16px 30px rgba(13, 20, 34, .10);
    }

    .home-search-trigger {
      flex-shrink: 0;
    }

    .home-search-input {
      flex: 1;
      width: 0;
      min-width: 0;
      opacity: 0;
      border: none;
      outline: none;
      background: transparent;
      color: var(--ink);
      font-size: 14px;
      font-weight: 500;
      pointer-events: none;
      transition: width .28s ease, opacity .18s ease;
    }

    #screen-home.search-open .home-search-input {
      width: 100%;
      opacity: 1;
      pointer-events: auto;
    }

    .home-search-input::placeholder {
      color: #99a0b2;
    }

    .home-search-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(246,248,252,.16);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .24s ease;
      z-index: 16;
    }

    #screen-home.search-open .home-search-backdrop {
      opacity: 1;
      pointer-events: auto;
    }

    .home-search-layer {
      position: absolute;
      left: 0;
      right: 0;
      top: 88px;
      bottom: 0;
      min-height: 0;
      padding: 12px 16px 120px;
      z-index: 17;
      opacity: 0;
      transform: translateY(-10px);
      pointer-events: none;
      transition: opacity .24s ease, transform .24s ease;
    }

    #screen-home.search-open .home-search-layer {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .home-refresh-indicator {
      position: absolute;
      left: 50%;
      top: 92px;
      z-index: 18;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transform: translate(-50%, calc(-18px + var(--home-refresh-indicator-offset, 0px)));
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.88);
      background: rgba(255,255,255,.94);
      color: #6e768a;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      box-shadow: 0 16px 30px rgba(13, 20, 34, .10);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .24s ease;
    }

    .home-refresh-indicator.show {
      opacity: 1;
    }

    #screen-home.is-refresh-dragging .home-refresh-indicator {
      transition: opacity .12s ease;
    }

    .home-refresh-indicator::before {
      content: '↓';
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: rgba(47,69,111,.08);
      color: var(--accent);
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      flex-shrink: 0;
      transition: transform .2s ease, background .2s ease, color .2s ease;
    }

    .home-refresh-indicator.is-ready::before {
      content: '↑';
      background: rgba(47,69,111,.12);
    }

    .home-refresh-indicator.is-ready {
      color: var(--accent);
    }

    .home-refresh-indicator.is-loading {
      color: var(--accent);
    }

    .home-refresh-indicator.is-loading::before {
      content: '↻';
      animation: home-refresh-spin .9s linear infinite;
    }

    .home-refresh-indicator.is-success {
      color: var(--accent);
    }

    .home-refresh-indicator.is-success::before {
      content: '✓';
      animation: none;
    }

    @keyframes home-refresh-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    #screen-home.search-open .cover-flow {
      filter: blur(5px) brightness(.92) saturate(.94);
      transform: translateY(var(--home-pull-offset, 0px)) scale(.992);
      pointer-events: none;
    }

    .cover-flow {
      transform: translateY(var(--home-pull-offset, 0px));
      transition: filter .24s ease, transform .24s cubic-bezier(.22,1,.36,1);
      will-change: transform;
    }

    #screen-home.is-refresh-dragging .cover-flow {
      transition: none;
    }

    .home-search-panel {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 14px;
      height: 100%;
      min-height: 0;
      max-height: 100%;
      overflow: hidden;
      border-radius: 30px;
      background: rgba(255,255,255,.95);
      border: 1px solid rgba(255,255,255,.88);
      box-shadow: 0 28px 56px rgba(12,18,30,.12);
      padding: 16px 14px 18px;
    }

    .home-search-history {
      display: grid;
      gap: 10px;
    }

    .home-search-section-label {
      font-size: 12px;
      line-height: 1.4;
      color: #8a91a5;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .home-search-history-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .home-search-history-chip {
      appearance: none;
      border: 1px solid rgba(18,25,40,.06);
      background: rgba(246,248,252,.98);
      color: #4d5568;
      border-radius: 999px;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .home-search-results {
      display: none;
      gap: 10px;
      min-height: 0;
      max-height: none;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding-right: 2px;
    }

    .home-search-layer.has-query .home-search-history {
      display: none;
    }

    .home-search-layer.has-query .home-search-panel {
      grid-template-rows: minmax(0, 1fr);
    }

    .home-search-layer.has-query .home-search-results {
      display: grid;
    }

    .search-result-card {
      appearance: none;
      width: 100%;
      border: 1px solid rgba(18,25,40,.06);
      background: rgba(247,249,252,.98);
      border-radius: 18px;
      padding: 12px;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 12px 24px rgba(12,18,30,.06);
    }

    .search-result-meta {
      font-size: 11px;
      line-height: 1.4;
      color: #8d94a7;
      font-weight: 700;
    }

    .search-result-card strong {
      display: block;
      margin-top: 6px;
      font-size: 14px;
      line-height: 1.4;
      color: var(--ink);
      letter-spacing: 0;
    }

    .search-result-card p {
      margin-top: 6px;
      font-size: 12px;
      line-height: 1.5;
      color: #5f6678;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .search-result-empty {
      padding: 16px 4px 4px;
      color: #8890a4;
      font-size: 12px;
      line-height: 1.7;
    }

    .settings-overlay-backdrop {
      position: absolute;
      inset: 0;
      z-index: 18;
      background: rgba(246,248,252,.16);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .24s ease;
    }

    .settings-overlay-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }

    .settings-overlay-panel {
      position: absolute;
      top: 92px;
      left: 16px;
      width: min(calc(100% - 72px), 306px);
      max-height: calc(100% - 188px);
      overflow: hidden;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.88);
      background: rgba(255,255,255,.96);
      box-shadow: 0 24px 48px rgba(11,19,38,.16);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      opacity: 0;
      transform: translateY(-10px);
      pointer-events: none;
      z-index: 19;
      transition: opacity .24s ease, transform .24s ease;
    }

    .settings-overlay-panel.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .settings-panel-view {
      display: none;
    }

    .settings-overlay-panel.mode-root .settings-view-root,
    .settings-overlay-panel.mode-ai-defaults .settings-view-ai-defaults {
      display: block;
    }

    .settings-panel-header,
    .ai-sheet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 14px 14px 10px 16px;
      border-bottom: 1px solid rgba(18,25,40,.06);
    }

    .settings-panel-header-left {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .settings-panel-title,
    .ai-sheet-title {
      font-size: 15px;
      line-height: 1.3;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -.02em;
    }

    .settings-panel-back,
    .settings-panel-close,
    .ai-header-action-btn,
    .ai-sheet-close {
      appearance: none;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(18,25,40,.06);
      border-radius: 999px;
      background: rgba(247,249,252,.96);
      color: #667086;
      display: grid;
      place-items: center;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
    }

    .settings-panel-body {
      padding: 2px 0 10px;
    }

    .settings-item {
      appearance: none;
      width: 100%;
      border: none;
      background: transparent;
      text-align: left;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
    }

    .settings-item + .settings-item {
      border-top: 1px solid rgba(18,25,40,.06);
    }

    .settings-item-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .settings-item-label {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--ink);
    }

    .settings-item-value {
      font-size: 12px;
      line-height: 1.55;
      color: var(--sub);
    }

    .settings-item-chevron {
      color: #9aa2b4;
      font-size: 14px;
      flex-shrink: 0;
    }

    .settings-field,
    .ai-sheet-field {
      display: grid;
      gap: 8px;
      padding: 14px 16px 0;
    }

    .settings-field-label,
    .ai-field-label {
      font-size: 13px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--ink);
    }

    .settings-select,
    .ai-sheet-select,
    .settings-textarea,
    .ai-sheet-textarea {
      width: 100%;
      border: 1px solid rgba(18,25,40,.08);
      border-radius: 18px;
      background: rgba(247,249,252,.98);
      color: var(--ink);
      font-size: 13px;
      line-height: 1.5;
      padding: 12px 14px;
      outline: none;
      font-family: inherit;
      resize: none;
    }

    .settings-textarea,
    .ai-sheet-textarea {
      min-height: 104px;
    }

    .settings-switch-row,
    .ai-sheet-switch-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px;
      margin-top: 14px;
      border-top: 1px solid rgba(18,25,40,.06);
    }

    .settings-switch-row span,
    .ai-sheet-switch-row span {
      font-size: 13px;
      line-height: 1.4;
      font-weight: 700;
      color: var(--ink);
    }

    .settings-switch-row input,
    .ai-sheet-switch-row input {
      width: 18px;
      height: 18px;
      accent-color: var(--accent);
      flex-shrink: 0;
    }

    .settings-restore-btn {
      margin: 16px;
    }

    .screen:not(#screen-home):not(#screen-ai) .topbar {
      min-height: 20px;
      margin-bottom: 12px;
      padding-bottom: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .screen:not(#screen-home):not(#screen-ai) .topbar h2,
    .screen:not(#screen-home):not(#screen-ai) .topbar .topbar-icon-btn,
    .screen:not(#screen-home):not(#screen-ai) .topbar .topbar-spacer {
      display: none;
    }

    #screen-detail {
      padding: 52px 20px 42px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 18%),
        linear-gradient(180deg, #f8f8fb 0%, #f3f4f8 100%);
    }

    #screen-detail .topbar {
      min-height: auto;
      margin: -4px 0 18px;
      padding-bottom: 6px;
      display: flex;
      justify-content: flex-start;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transition: opacity .18s ease, transform .18s ease, background .18s ease;
    }

    #screen-detail.detail-chrome-floating .topbar {
      border-radius: 22px;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #screen-detail.detail-chrome-hidden .topbar {
      opacity: 0;
      transform: translateY(-12px);
      pointer-events: none;
    }

    .detail-topbar-nav {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
      width: 100%;
      gap: 6px;
    }

    .detail-back-btn,
    .detail-top-link {
      appearance: none;
      border: none;
      background: transparent;
      color: #5d667a;
      padding: 0 4px;
      min-height: 32px;
      font-size: 12px;
      line-height: 1.2;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    #screen-detail .detail-back-btn,
    #screen-detail .detail-top-link {
      display: flex;
      min-height: 34px;
      padding: 0 13px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: transparent;
      color: #616a80;
      box-shadow: none;
      white-space: nowrap;
      width: 100%;
    }

    #screen-detail.detail-chrome-floating .detail-back-btn,
    #screen-detail.detail-chrome-floating .detail-top-link {
      border-color: #e1d4bc;
      background: #f3ead8;
      color: #302d27;
      box-shadow: 0 8px 18px rgba(18,25,40,.07);
    }

    #screen-detail .detail-back-btn:active,
    #screen-detail .detail-top-link:active {
      transform: translateY(1px);
    }

    .detail-reading-header {
      margin-bottom: 22px;
      padding: 4px 2px 0;
    }

    .detail-kicker-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }

    .detail-kicker {
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(47,69,111,.06);
      border: 1px solid rgba(18,25,40,.05);
      color: #667086;
      font-size: 11px;
      line-height: 1;
      font-weight: 700;
    }

    .detail-kicker.is-linkable {
      cursor: pointer;
      color: var(--accent, #2f456f);
      background: rgba(47,69,111,.10);
      border-color: rgba(47,69,111,.18);
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }

    .detail-kicker.is-linkable:active {
      transform: translateY(1px);
      background: rgba(47,69,111,.16);
    }

    .detail-reading-title {
      font-size: 31px;
      line-height: 1.12;
      letter-spacing: -.055em;
      color: var(--ink);
      margin: 0;
    }

    .detail-meta-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
      margin-top: 14px;
    }

    .detail-published {
      font-size: 12px;
      color: #8f96a8;
      line-height: 1.6;
    }

    .detail-open-btn {
      appearance: none;
      margin-left: auto;
      min-height: 29px;
      padding: 0 12px;
      border: none;
      border-radius: 999px;
      background: linear-gradient(150deg, #2b3147 0%, #14182a 100%);
      box-shadow: 0 10px 20px rgba(16, 22, 40, .26);
      color: #fff;
      font-size: 12px;
      line-height: 1;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }

    .detail-open-btn[hidden] {
      display: none;
    }

    .detail-open-btn:active {
      transform: translateY(1px);
      box-shadow: 0 6px 14px rgba(16, 22, 40, .24);
    }

    .detail-cover {
      margin: 0 0 22px;
      aspect-ratio: 16 / 9;
      width: 100%;
      overflow: hidden;
      border-radius: 18px;
      background: rgba(18,25,40,.05);
      border: 1px solid rgba(18,25,40,.06);
      box-shadow: 0 18px 36px rgba(18,25,40,.08);
    }

    .detail-cover[hidden] {
      display: none;
    }

    .detail-cover img {
      display: block;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
      object-fit: contain;
      object-position: center;
      background: linear-gradient(180deg, rgba(241,244,249,.94), rgba(227,233,242,.92));
    }

    .detail-reading-content {
      padding: 6px 2px 24px;
    }

    .detail-summary-body {
      min-height: 120px;
    }

    .detail-block {
      margin-top: 22px;
    }

    .detail-block:first-of-type {
      margin-top: 0;
    }

    .detail-block-label {
      margin-bottom: 10px;
      font-size: 12px;
      line-height: 1.4;
      color: #8a91a5;
      font-weight: 700;
      letter-spacing: .01em;
    }

    .detail-overview {
      padding: 18px 18px 16px;
      border-radius: 24px;
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(255,255,255,.88);
      box-shadow: 0 18px 34px rgba(18,25,40,.06);
    }

    .detail-overview p {
      font-size: 15px;
      line-height: 1.9;
      color: #353b4d;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    #screen-detail .body-copy {
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      font-size: 16px;
      line-height: 1.95;
      color: #262b39;
    }

    #screen-detail .body-copy p {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    #screen-detail .body-copy p + p {
      margin-top: 14px;
    }

    .detail-meta-card {
      margin: 0 0 22px;
      padding: 6px 18px;
      border-radius: 20px;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(18,25,40,.06);
      box-shadow: 0 14px 30px rgba(18,25,40,.06);
    }

    .detail-meta-card[hidden] {
      display: none;
    }

    .detail-meta-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 0;
      min-height: 22px;
    }

    .detail-meta-item + .detail-meta-item {
      border-top: 1px solid rgba(18,25,40,.05);
    }

    .detail-meta-ico {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      flex-shrink: 0;
      border-radius: 10px;
      background: rgba(47,69,111,.07);
      color: #59617a;
    }

    .detail-meta-ico svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .detail-meta-key {
      flex-shrink: 0;
      width: 56px;
      font-size: 13px;
      font-weight: 700;
      color: #8a91a5;
    }

    .detail-meta-val {
      flex: 1;
      min-width: 0;
      font-size: 14px;
      font-weight: 600;
      color: #2b3040;
      line-height: 1.5;
      word-break: break-word;
    }

    .detail-meta-link {
      color: #2f6bd8;
      text-decoration: none;
      word-break: break-all;
    }

    .detail-highlights {
      margin: 0 0 22px;
      padding: 18px 18px 16px;
      border-radius: 20px;
      background: linear-gradient(155deg, rgba(43,49,71,.045), rgba(20,24,42,.06));
      border: 1px solid rgba(18,25,40,.06);
    }

    .detail-highlights[hidden] {
      display: none;
    }

    .detail-highlights-title {
      margin: 0 0 12px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -.01em;
      color: var(--ink);
    }

    .detail-highlights-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 11px;
    }

    .detail-highlights-list li {
      position: relative;
      padding-left: 20px;
      font-size: 14.5px;
      line-height: 1.7;
      color: #353b4d;
    }

    .detail-highlights-list li::before {
      content: "";
      position: absolute;
      left: 4px;
      top: 9px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #14182a;
    }

    .detail-section-head {
      margin: 28px 0 12px;
      font-size: 19px;
      line-height: 1.35;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    .detail-section-head:first-child {
      margin-top: 4px;
    }

    .detail-bullets {
      margin: 0 0 4px;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .detail-bullets li {
      position: relative;
      padding-left: 19px;
      font-size: 15.5px;
      line-height: 1.85;
      color: #2b3040;
      overflow-wrap: anywhere;
    }

    .detail-inline-link {
      color: #2f6bd8;
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid rgba(47,107,216,.32);
      word-break: break-all;
    }

    .detail-inline-link:hover {
      border-bottom-color: rgba(47,107,216,.6);
    }

    .detail-bullets li::before {
      content: "";
      position: absolute;
      left: 2px;
      top: 12px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(20,24,42,.4);
    }

    .detail-bullets li strong {
      font-weight: 800;
      color: var(--ink);
    }

    .detail-note {
      margin: 14px 0;
      padding: 12px 16px;
      border-left: 3px solid rgba(20,24,42,.3);
      border-radius: 0 12px 12px 0;
      background: rgba(47,69,111,.05);
      font-size: 14px;
      line-height: 1.8;
      color: #59617a;
      white-space: normal;
    }

    /* 富内容块（ADR-0001 rich_blocks）正文渲染 */
    .detail-block-head {
      margin: 28px 0 12px;
      line-height: 1.35;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    .detail-block-head--l2 { font-size: 19px; }
    .detail-block-head--l3 { font-size: 17px; }

    #screen-detail .body-copy .detail-block-head:first-child {
      margin-top: 4px;
    }

    #screen-detail .body-copy p.detail-block-p {
      white-space: normal;
    }

    .detail-block-figure {
      margin: 18px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .detail-block-img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 16px;
      background: rgba(18,25,40,.04);
    }

    .detail-block-caption {
      font-size: 13px;
      line-height: 1.6;
      color: #8a90a2;
      text-align: center;
      overflow-wrap: anywhere;
    }

    .detail-block-figure--missing {
      padding: 10px 14px;
      border-left: 3px solid rgba(20,24,42,.18);
      border-radius: 0 12px 12px 0;
      background: rgba(47,69,111,.04);
    }

    .detail-block-figure--missing .detail-block-caption {
      text-align: left;
      color: #59617a;
    }

    .detail-block-quote {
      margin: 18px 0;
      padding: 12px 16px;
      border-left: 3px solid rgba(20,24,42,.3);
      border-radius: 0 12px 12px 0;
      background: rgba(47,69,111,.05);
      font-size: 15.5px;
      line-height: 1.85;
      color: #2b3040;
    }

    .detail-block-quote-cite {
      display: block;
      margin-top: 8px;
      font-style: normal;
      font-size: 13px;
      color: #8a90a2;
    }

    .detail-block-list {
      margin: 14px 0;
      padding-left: 22px;
      display: grid;
      gap: 8px;
    }

    .detail-block-list li {
      font-size: 15.5px;
      line-height: 1.85;
      color: #2b3040;
      overflow-wrap: anywhere;
    }

    .detail-block-divider {
      margin: 22px 0;
      border: none;
      border-top: 1px solid rgba(18,25,40,.1);
    }

    .detail-inline-link {
      color: #2f456f;
      text-decoration: underline;
      text-underline-offset: 2px;
      overflow-wrap: anywhere;
    }

    .detail-block-p strong,
    .detail-block-head strong {
      font-weight: 800;
      color: var(--ink);
    }

    .detail-other-card {
      padding: 18px 18px 16px;
      border-radius: 24px;
      background: rgba(255,255,255,.78);
    }

    .detail-other-title {
      font-size: 13px;
      line-height: 1.4;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 10px;
    }

    #screen-ai {
      padding: 58px 16px 18px;
      overflow: hidden;
    }

    .ai-workspace {
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .ai-topbar {
      position: relative;
      z-index: 12;
      margin-bottom: 18px;
      display: grid;
      gap: 10px;
      padding: 4px 2px 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .ai-header-main {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }

    .ai-header-icon-group {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .ai-current-reading-pill {
      appearance: none;
      border: 1px solid rgba(18,25,40,.06);
      background: rgba(255,255,255,.9);
      border-radius: 999px;
      padding: 10px 14px;
      display: grid;
      gap: 3px;
      text-align: left;
      min-width: 0;
      cursor: pointer;
      box-shadow: 0 12px 24px rgba(11,19,38,.08);
    }

    .ai-current-reading-pill.is-hidden {
      display: none;
    }

    .ai-pill-label {
      font-size: 10px;
      line-height: 1.2;
      font-weight: 700;
      color: #8c94a8;
    }

    .ai-pill-value {
      font-size: 13px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ai-top-actions {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0 4px;
      width: 100%;
    }

    .ai-top-link {
      appearance: none;
      border: none;
      background: transparent;
      color: #60697f;
      padding: 0;
      align-items: center;
      justify-content: flex-start;
      min-height: auto;
      display: flex;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
      cursor: pointer;
    }

    .ai-top-link.ai-back-link {
      justify-content: flex-start;
      color: #4f586d;
    }

    .ai-header-main-nav {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: center;
      gap: 0;
      width: 100%;
    }

    .ai-header-main-nav .ai-top-link {
      min-width: 0;
      width: 100%;
      min-height: 32px;
      justify-content: center;
      white-space: nowrap;
      text-align: center;
    }

    .ai-header-main-nav .ai-back-link {
      justify-content: center;
    }

    .ai-header-main-simple {
      grid-template-columns: auto 1fr auto;
      gap: 8px;
    }

    .ai-topbar-spacer {
      min-width: 0;
    }

    .ai-tools-trigger {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 1px solid rgba(18,25,40,.05);
      background: rgba(255,255,255,.56);
      box-shadow: none;
      color: #7c8598;
      font-size: 12px;
    }

    .ai-sidepanel-backdrop {
      position: absolute;
      inset: 0;
      z-index: 23;
      background: rgba(246,248,252,.16);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .24s ease;
    }

    .ai-sidepanel-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }

    .ai-sidepanel {
      position: absolute;
      top: 78px;
      right: 12px;
      bottom: 18px;
      width: min(292px, 75%);
      z-index: 24;
      border-radius: 30px;
      background: rgba(255,255,255,.95);
      border: 1px solid rgba(255,255,255,.88);
      box-shadow: 0 28px 56px rgba(12,18,30,.12);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      opacity: 0;
      transform: translateX(22px);
      pointer-events: none;
      transition: opacity .24s ease, transform .24s ease;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .ai-sidepanel.show {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }

    .ai-sidepanel-header {
      padding: 14px 16px 8px;
      border-bottom: 1px solid rgba(18,25,40,.04);
    }

    .ai-sidepanel-title {
      font-size: 14px;
      line-height: 1.25;
      font-weight: 750;
      color: var(--ink);
    }

    .ai-sidepanel-body {
      padding: 8px 0 10px;
      overflow-y: auto;
    }

    .ai-sidepanel-view {
      display: none;
      height: 100%;
      min-height: 0;
      flex-direction: column;
    }

    .ai-sidepanel.mode-root .ai-sidepanel-view-root,
    .ai-sidepanel.mode-history .ai-sidepanel-view-history,
    .ai-sidepanel.mode-session .ai-sidepanel-view-session,
    .ai-sidepanel.mode-defaults .ai-sidepanel-view-defaults {
      display: flex;
    }

    .ai-sidepanel-subheader {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px 10px;
      border-bottom: 1px solid rgba(18,25,40,.05);
    }

    .ai-sidepanel-back-btn {
      appearance: none;
      border: none;
      background: transparent;
      color: #6d7388;
      padding: 0;
      min-height: 24px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .ai-sidepanel-subtitle {
      font-size: 13px;
      line-height: 1.3;
      font-weight: 800;
      color: var(--ink);
    }

    .ai-sidepanel-subheader-action {
      appearance: none;
      margin-left: auto;
      border: none;
      background: transparent;
      color: #6d7388;
      font-size: 11px;
      line-height: 1.3;
      font-weight: 700;
      cursor: pointer;
    }

    .ai-sidepanel-subheader-action.is-caution {
      color: #875f57;
    }

    .ai-sidepanel-form {
      padding: 12px 12px 14px;
      overflow-y: auto;
      display: grid;
      gap: 12px;
    }

    .ai-sidepanel-field {
      display: grid;
      gap: 6px;
    }

    .ai-sidepanel-field-label {
      font-size: 12px;
      line-height: 1.35;
      font-weight: 700;
      color: #6d7388;
    }

    .ai-sidepanel-select,
    .ai-sidepanel-textarea {
      width: 100%;
      border: 1px solid rgba(18,25,40,.08);
      border-radius: 16px;
      background: rgba(247,249,252,.98);
      color: var(--ink);
      font-size: 12px;
      line-height: 1.5;
      padding: 10px 12px;
      outline: none;
      font-family: inherit;
      resize: none;
    }

    .ai-sidepanel-textarea {
      min-height: 88px;
    }

    .ai-sidepanel-switch-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .ai-sidepanel-switch-row span {
      font-size: 12px;
      line-height: 1.4;
      font-weight: 700;
      color: var(--ink);
    }

    .ai-sidepanel-switch-controls {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .ai-sidepanel-switch-controls input {
      width: 18px;
      height: 18px;
      accent-color: var(--accent);
      flex-shrink: 0;
    }

    .ai-sidepanel-action-btn {
      appearance: none;
      width: 100%;
      border: none;
      border-radius: 16px;
      background: rgba(47,69,111,.08);
      color: var(--accent);
      padding: 11px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .ai-sidepanel-item {
      appearance: none;
      width: 100%;
      border: none;
      background: transparent;
      color: var(--ink);
      text-align: left;
      padding: 12px 16px;
      display: grid;
      gap: 4px;
      cursor: pointer;
    }

    .ai-sidepanel-item + .ai-sidepanel-item {
      border-top: 1px solid rgba(18,25,40,.04);
    }

    .ai-sidepanel-item-label {
      font-size: 13px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--ink);
    }

    .ai-sidepanel-item-value {
      font-size: 11px;
      line-height: 1.5;
      color: #8e96a8;
    }

    .ai-sidepanel-item.is-hidden {
      display: none;
    }

    .ai-sidepanel-item.is-caution {
      color: #875f57;
      background: rgba(159, 104, 86, .04);
    }

    .ai-inline-confirm {
      margin: 0 12px 10px;
      padding: 10px 10px 10px 12px;
      display: grid;
      gap: 8px;
      border: 1px solid rgba(159, 104, 86, .14);
      border-radius: 14px;
      background: rgba(255, 249, 246, .96);
      box-shadow: 0 10px 24px rgba(18,25,40,.08);
    }

    .ai-sidepanel-item + .ai-inline-confirm {
      margin-top: -2px;
    }

    .ai-inline-confirm-subheader {
      margin-top: 8px;
    }

    .ai-inline-confirm-history-row {
      margin: -2px 10px 8px 16px;
    }

    .ai-inline-confirm-message {
      font-size: 12px;
      line-height: 1.35;
      font-weight: 700;
      color: #7c554c;
    }

    .ai-inline-confirm-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .ai-inline-confirm-cancel,
    .ai-inline-confirm-ok {
      appearance: none;
      min-height: 32px;
      border: none;
      border-radius: 10px;
      font-size: 12px;
      line-height: 1;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
    }

    .ai-inline-confirm-cancel {
      background: rgba(47,69,111,.08);
      color: #5f6b82;
    }

    .ai-inline-confirm-ok {
      background: #8f5e50;
      color: #fff8f3;
    }

    .ai-inline-confirm.is-busy {
      opacity: .72;
      pointer-events: none;
    }

    .ai-sidepanel-history-list {
      padding: 8px 0 10px;
      overflow-y: auto;
      display: grid;
      gap: 0;
    }

    .ai-history-thread-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: stretch;
    }

    .ai-history-thread-row + .ai-history-thread-row {
      border-top: 1px solid rgba(18,25,40,.04);
    }

    .ai-history-thread-row.is-active {
      background: rgba(47,69,111,.06);
    }

    .ai-history-thread {
      appearance: none;
      width: 100%;
      border: none;
      background: transparent;
      text-align: left;
      padding: 12px 16px;
      display: grid;
      gap: 6px;
      cursor: pointer;
    }

    .ai-history-thread.is-active {
      background: transparent;
    }

    .ai-history-thread-title {
      font-size: 13px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--ink);
    }

    .ai-history-thread-preview {
      font-size: 11px;
      line-height: 1.55;
      color: #8e96a8;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .ai-history-thread-time {
      font-size: 10px;
      line-height: 1.4;
      color: #9aa2b4;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .ai-history-thread-delete {
      appearance: none;
      align-self: center;
      margin-right: 10px;
      border: none;
      background: transparent;
      color: #875f57;
      font-size: 11px;
      line-height: 1.3;
      font-weight: 700;
      cursor: pointer;
      padding: 8px 6px;
      border-radius: 10px;
    }

    .ai-history-thread-delete:hover {
      background: rgba(159, 104, 86, .08);
    }

    .ai-sidepanel-divider {
      height: 1px;
      margin: 4px 16px;
      background: rgba(18,25,40,.05);
    }

    .floating-ai-menu {
      position: absolute;
      right: 12px;
      bottom: 108px;
      z-index: 14;
      display: none;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      overflow: visible;
      cursor: grab;
      user-select: none;
      touch-action: none;
      transition: opacity .24s ease, transform .24s ease, filter .24s ease;
    }

    .floating-ai-menu.show {
      display: flex;
    }

    .floating-ai-menu.dragging {
      cursor: grabbing;
      transform: scale(1.02);
    }

    .floating-ai-menu.transition-out {
      opacity: 0;
      transform: translateY(10px) scale(.96);
      filter: blur(6px);
      pointer-events: none;
    }

    .floating-ai-menu-trigger {
      appearance: none;
      width: 40px;
      height: 40px;
      padding: 0;
      border: none;
      border-radius: 999px;
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(255,255,255,.82);
      box-shadow: 0 16px 30px rgba(11,19,38,.14);
      color: var(--accent);
      display: grid;
      place-items: center;
      cursor: pointer;
      font-size: 14px;
      font-weight: 800;
    }

    .floating-ai-menu .ai-sidepanel {
      top: 50%;
      left: calc(100% + 8px);
      right: auto;
      bottom: auto;
      width: 188px;
      max-height: calc(100% - 48px);
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.88);
      background: rgba(255,255,255,.95);
      box-shadow: 0 16px 30px rgba(11,19,38,.14);
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transform: translate(12px, -50%);
      transform-origin: left center;
      transition: opacity .24s ease, transform .24s ease;
    }

    .floating-ai-menu.expand-left .ai-sidepanel {
      left: auto;
      right: calc(100% + 8px);
      transform: translate(-12px, -50%);
      transform-origin: right center;
    }

    .floating-ai-menu .ai-sidepanel.show {
      opacity: 1;
      pointer-events: auto;
      transform: translate(0, -50%);
    }

    .floating-ai-menu.expand-left .ai-sidepanel.show {
      transform: translate(0, -50%);
    }

    .ai-session-sheet-backdrop {
      position: absolute;
      inset: 0;
      z-index: 24;
      background: rgba(10,14,24,.18);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease;
    }

    .ai-session-sheet-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }

    .ai-session-sheet {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 25;
      border-radius: 28px 28px 22px 22px;
      border: 1px solid rgba(255,255,255,.9);
      background: rgba(255,255,255,.96);
      box-shadow: 0 26px 50px rgba(11,19,38,.18);
      opacity: 0;
      transform: translateY(24px);
      pointer-events: none;
      transition: opacity .24s ease, transform .24s ease;
      overflow: hidden;
    }

    .ai-session-sheet.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .ai-sheet-handle {
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: rgba(18,25,40,.12);
      margin: 10px auto 0;
    }

    .ai-sheet-body {
      padding-bottom: 12px;
      max-height: 60vh;
      overflow-y: auto;
    }

    .ai-sheet-group {
      margin-top: 10px;
      border-top: 1px solid rgba(18,25,40,.06);
      padding-top: 2px;
    }

    .ai-sheet-switch-row {
      align-items: flex-start;
      margin-top: 0;
      border-top: none;
    }

    .ai-sheet-switch-controls {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .ai-sheet-follow-btn {
      appearance: none;
      border: 1px solid rgba(18,25,40,.06);
      background: rgba(247,249,252,.98);
      color: #6d7388;
      border-radius: 999px;
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .ai-sheet-follow-btn.is-active {
      color: var(--accent);
      background: rgba(47,69,111,.08);
      border-color: rgba(47,69,111,.12);
    }

    .ai-session-action .settings-item-label {
      font-size: 13px;
    }

    .icon-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.7);
      display: grid;
      place-items: center;
      cursor: pointer;
      color: var(--sub);
      font-size: 13px;
      font-weight: 700;
    }

    .hero-card, .section-card, .list-card, .message-card, .mini-card, .meta-card, .record-card {
      background: var(--card);
      border: 1px solid rgba(255,255,255,.72);
      box-shadow: 0 16px 30px rgba(19,27,47,.06);
      border-radius: var(--radius);
    }

    .hero-card {
      padding: 18px;
      margin-bottom: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(246,247,252,.86) 100%);
    }

    .hero-head, .row-between, .source-row, .action-row, .filter-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--chip);
      color: var(--sub);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .01em;
      border: 1px solid rgba(18,25,40,.05);
    }

    .hero-title {
      font-size: 19px;
      line-height: 1.15;
      letter-spacing: -.04em;
      margin: 14px 0 12px;
    }

    .muted {
      color: var(--sub);
      font-size: 13px;
      line-height: 1.72;
    }

    .section-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      margin: 18px 2px 10px;
    }

    .section-sub { color: var(--sub); font-size: 12px; margin-top: 4px; }

    .list-card, .message-card, .mini-card, .meta-card, .record-card {
      padding: 14px;
      margin-bottom: 12px;
    }

    .card-short {
      font-size: 16px;
      line-height: 1.25;
      letter-spacing: -.03em;
      margin: 10px 0 10px;
    }

    .button-link, .ghost-btn, .primary-btn, .source-btn {
      appearance: none;
      border: none;
      cursor: pointer;
      border-radius: 999px;
      font-weight: 700;
      letter-spacing: .01em;
      transition: .16s ease;
    }

    .button-link {
      background: transparent;
      color: var(--accent);
      padding: 0;
      font-size: 13px;
    }

    .primary-btn {
      background: var(--accent);
      color: white;
      padding: 10px 16px;
      font-size: 13px;
    }

    .ghost-btn {
      background: rgba(255,255,255,.8);
      border: 1px solid var(--line);
      color: var(--ink);
      padding: 10px 14px;
      font-size: 13px;
    }

    .source-btn {
      background: rgba(47,69,111,.08);
      color: var(--accent);
      padding: 10px 12px;
      font-size: 12px;
    }

    .bottom-bar {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      z-index: 10;
      height: 78px;
      border-radius: 28px;
      background: rgba(255,255,255,.90);
      border: 1px solid rgba(255,255,255,.92);
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      align-items: center;
      padding: 10px 8px 12px;
      box-shadow: 0 18px 36px rgba(12, 18, 30, .12);
      transition: transform .24s ease, opacity .24s ease;
      will-change: transform, opacity;
    }

    .bottom-bar.is-hidden {
      transform: translateY(18px);
      opacity: .06;
      pointer-events: none;
    }

    .bottom-bar.is-gone {
      opacity: 0;
      transform: translateY(40px);
      visibility: hidden;
      pointer-events: none;
    }

    .tab-btn {
      border: none;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #8c93a8;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .tab-btn .dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(47,69,111,.12);
      position: relative;
    }

    /* 图标：未选中=描边（outline），选中=实心黑色填充 */
    .tab-ico {
      display: grid;
      place-items: center;
      height: 24px;
    }
    .tab-ico svg {
      width: 23px;
      height: 23px;
      fill: none;
      stroke: #9aa0b0;
      stroke-width: 1.7;
      stroke-linejoin: round;
      stroke-linecap: round;
      transition: fill .18s ease, stroke .18s ease;
    }

    .tab-btn.active {
      color: #14182a;
    }

    .tab-btn.active .tab-ico svg {
      fill: #14182a;
      stroke: none;
    }

    .tab-btn.active .dot {
      background: rgba(47,69,111,.18);
      box-shadow: inset 0 0 0 5px rgba(47,69,111,.84);
    }

    .center-plus-tab {
      appearance: none;
      border: none;
      background: transparent;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      justify-self: center;
      align-self: center;
      transform: translateY(-6px);
      cursor: pointer;
      position: relative;
      z-index: 12;
    }

    .center-plus-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(150deg, #2b3147 0%, #14182a 100%);
      color: #fff;
      font-size: 28px;
      line-height: 1;
      font-weight: 300;
      border: none;
      box-shadow: 0 12px 26px rgba(16, 22, 40, .34);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }

    .center-plus-tab:hover .center-plus-icon,
    .center-plus-tab.menu-open .center-plus-icon,
    .center-plus-tab.active .center-plus-icon {
      transform: translateY(-2px) scale(1.03);
      box-shadow:
        0 20px 36px rgba(16, 22, 40, .42),
        inset 0 1px 0 rgba(255,255,255,.18);
    }

    .record-menu-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(10, 14, 24, .18);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease;
      z-index: 18;
    }

    .record-menu-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }

    .record-menu-sheet {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 19;
      opacity: 0;
      transform: translateY(28px);
      pointer-events: none;
      transition: opacity .24s ease, transform .24s ease;
    }

    .record-menu-sheet.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .record-menu-group {
      overflow: hidden;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.82);
      background: rgba(255,255,255,.96);
      box-shadow: 0 20px 40px rgba(11,19,38,.18);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
    }

    .record-menu-option,
    .record-menu-cancel {
      appearance: none;
      width: 100%;
      border: none;
      background: transparent;
      text-align: center;
      color: var(--ink);
      font-size: 17px;
      line-height: 1.2;
      padding: 18px 16px;
      cursor: pointer;
    }

    .record-menu-option {
      background: rgba(255,255,255,.98);
    }

    .record-menu-option + .record-menu-option {
      border-top: 1px solid rgba(18,25,40,.08);
    }

    .record-menu-cancel {
      margin-top: 10px;
      border-radius: 20px;
      background: rgba(255,255,255,.98);
      border: 1px solid rgba(255,255,255,.82);
      font-weight: 700;
      box-shadow: 0 16px 28px rgba(11,19,38,.12);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
    }

    .search-box {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      color: var(--sub);
      margin-bottom: 12px;
      font-size: 13px;
      cursor: text;
    }

    .search-icon {
      font-size: 14px;
      line-height: 1;
      color: #8b93a7;
      flex-shrink: 0;
    }

    .search-box input {
      flex: 1;
      min-width: 0;
      border: none;
      outline: none;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
    }

    .search-box input::placeholder {
      color: #98a0b3;
    }

    #record-search-box,
    #library-search-box {
      cursor: pointer;
    }

    #record-search-box input,
    #library-search-box input {
      pointer-events: none;
      caret-color: transparent;
    }

    #screen-record.search-open #record-search-box,
    #screen-library.search-open #library-search-box {
      background: rgba(255,255,255,.96);
      border-color: rgba(18,25,40,.08);
      box-shadow: 0 14px 28px rgba(13,20,34,.10);
    }

    #screen-record.search-open #record-search-box input,
    #screen-library.search-open #library-search-box input {
      pointer-events: auto;
      caret-color: var(--ink);
    }

    .panel-search-backdrop {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(246,248,252,.16);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .24s ease;
      z-index: 16;
    }

    #screen-record.search-open .panel-search-backdrop,
    #screen-library.search-open .panel-search-backdrop {
      opacity: 1;
      pointer-events: auto;
    }

    .panel-search-layer {
      position: absolute;
      left: 0;
      right: 0;
      top: 102px;
      bottom: 0;
      padding: 12px 16px 120px;
      z-index: 17;
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity .24s ease, transform .24s ease;
    }

    #screen-record.search-open .panel-search-layer,
    #screen-library.search-open .panel-search-layer {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .panel-search-panel {
      display: grid;
      gap: 14px;
      max-height: 100%;
      overflow: hidden;
      border-radius: 30px;
      background: rgba(255,255,255,.95);
      border: 1px solid rgba(255,255,255,.88);
      box-shadow: 0 28px 56px rgba(12,18,30,.12);
      padding: 16px 14px 18px;
    }

    #record-search-layer .panel-search-header,
    #library-search-layer .panel-search-header {
      display: none;
    }

    .panel-search-header {
      height: 40px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px 0 12px;
      border-radius: 999px;
      background: rgba(247,249,252,.98);
      border: 1px solid rgba(18,25,40,.06);
    }

    .panel-search-input {
      flex: 1;
      min-width: 0;
      border: none;
      outline: none;
      background: transparent;
      color: var(--ink);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
      font-family: inherit;
    }

    .panel-search-input::placeholder {
      color: #99a0b2;
    }

    .panel-search-cancel {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
      padding: 0;
      cursor: pointer;
      flex-shrink: 0;
    }

    .panel-search-history {
      display: grid;
      gap: 10px;
    }

    .panel-search-section-label {
      font-size: 12px;
      line-height: 1.4;
      color: #8a91a5;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .panel-search-history-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .panel-search-history-chip {
      appearance: none;
      border: 1px solid rgba(18,25,40,.06);
      background: rgba(246,248,252,.98);
      color: #4d5568;
      border-radius: 999px;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .panel-search-results {
      display: none;
      gap: 10px;
      max-height: min(58vh, 520px);
      overflow-y: auto;
      padding-right: 2px;
    }

    .panel-search-layer.has-query .panel-search-history {
      display: none;
    }

    .panel-search-layer.has-query .panel-search-results {
      display: grid;
    }

    #screen-record.search-open .record-view-switch,
    #screen-record.search-open .record-feed,
    #screen-library.search-open .library-directory-view,
    #screen-library.search-open .library-source-view {
      filter: blur(5px) brightness(.92) saturate(.94);
      transform: scale(.992);
      pointer-events: none;
      transition: filter .24s ease, transform .24s ease;
    }

    .library-search-results {
      display: none;
      gap: 12px;
      padding-bottom: 8px;
    }

    #screen-library.is-searching .library-directory-view,
    #screen-library.is-searching .library-source-view {
      display: none;
    }

    #screen-library.is-searching .library-search-results {
      display: grid;
    }

    #screen-library.is-searching .library-back-btn {
      visibility: visible;
    }

    .library-search-empty,
    .record-search-empty {
      display: none;
      padding: 8px 4px 2px;
      font-size: 12px;
      line-height: 1.6;
      color: #8b93a7;
    }

    .library-search-empty.show,
    .record-search-empty.show {
      display: block;
    }

    #screen-library {
      padding: 52px 16px 30px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 18%),
        linear-gradient(180deg, #f8f8fb 0%, #eef1f6 100%);
    }

    #screen-library .topbar {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr) 24px;
      align-items: center;
      gap: 10px;
      position: relative;
      top: auto;
      z-index: 18;
      min-height: auto;
      margin-bottom: 14px;
      margin-left: 2px;
      margin-right: 2px;
      padding-bottom: 0;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #screen-library.is-source-view .topbar {
      position: sticky;
      top: 0;
      z-index: 3;
      margin-bottom: 18px;
      padding-bottom: 10px;
      background: linear-gradient(180deg, rgba(248,248,251,.96) 0%, rgba(248,248,251,.9) 74%, rgba(248,248,251,0) 100%);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .library-topbar-copy {
      display: none;
    }

    .library-topbar-subtitle {
      display: none;
    }

    .library-back-btn {
      appearance: none;
      border: none;
      background: transparent;
      padding: 0;
      color: #4f586d;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      min-height: 32px;
      display: flex;
      align-items: center;
      visibility: visible;
    }

    #screen-library .topbar .search-box {
      width: 100%;
      min-width: 0;
      margin-bottom: 0;
    }

    .library-topbar-spacer {
      min-height: 32px;
      display: none;
    }

    #screen-library .topbar {
      grid-template-columns: 56px minmax(0, 1fr);
    }

    .record-topbar {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr) 72px;
      align-items: center;
      gap: 10px;
    }

    .record-topbar h2 {
      text-align: center;
    }

    #screen-record .topbar {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      position: relative;
      top: auto;
      z-index: 18;
      min-height: auto;
      margin-bottom: 14px;
      padding-bottom: 0;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #screen-record .topbar h2 {
      display: none;
    }

    #screen-record .topbar .search-box {
      width: 100%;
      min-width: 0;
      margin-bottom: 0;
    }

    .record-back-btn {
      appearance: none;
      border: none;
      background: transparent;
      padding: 0;
      color: #4f586d;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      min-height: 32px;
      display: flex;
      align-items: center;
    }

    .panel-search-back-btn {
      appearance: none;
      display: none;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 1px solid rgba(18,25,40,.08);
      border-radius: 999px;
      background: rgba(255,255,255,.96);
      color: rgba(20,24,38,.84);
      box-shadow: 0 10px 22px rgba(13,20,34,.10);
      font-size: 18px;
      line-height: 1;
      font-weight: 800;
      cursor: pointer;
      place-items: center;
    }

    #screen-record.search-open .record-back-btn,
    #screen-library.search-open .library-back-btn {
      display: none;
    }

    #screen-record.search-open .record-search-back,
    #screen-library.search-open .library-search-back {
      display: grid;
    }

    .library-directory-view {
      display: block;
    }

    .library-source-view {
      display: none;
    }

    #screen-library.is-source-view .library-directory-view {
      display: none;
    }

    #screen-library.is-source-view .library-source-view {
      display: block;
    }

    .library-directory-note,
    .library-source-hero {
      padding: 16px;
      border-radius: 24px;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(255,255,255,.84);
      box-shadow: 0 16px 30px rgba(18,25,40,.08);
      margin-bottom: 14px;
    }

    .library-directory-note strong,
    .library-source-hero strong {
      display: block;
      font-size: 15px;
      line-height: 1.35;
      color: var(--ink);
    }

    .library-directory-note p,
    .library-source-hero p {
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.72;
      color: var(--sub);
    }

    .library-section-heading {
      margin: 16px 2px 10px;
      font-size: 12px;
      line-height: 1.4;
      color: #7d8598;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .library-platform-list,
    .library-item-list {
      display: grid;
      gap: 12px;
    }

    .library-empty {
      padding: 28px 18px;
      border-radius: 22px;
      background: rgba(255,255,255,.7);
      border: 1px dashed rgba(18,25,40,.14);
      text-align: center;
      font-size: 13px;
      line-height: 1.7;
      color: var(--sub);
    }

    /* 头像/图标槽位：后端给图就显示图，没有就显示首字母占位，位置永远保留 */
    .library-icon-slot {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 16px;
      background: linear-gradient(150deg, rgba(47,69,111,.16), rgba(47,69,111,.06));
      color: var(--accent);
      font-weight: 800;
      letter-spacing: -.01em;
    }

    .library-icon-slot.has-img {
      background: #eef1f6;
    }

    .library-icon-slot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .library-icon-slot--platform {
      width: 46px;
      height: 46px;
      border-radius: 15px;
      font-size: 18px;
    }

    .library-icon-slot--source {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 15px;
    }

    .library-icon-slot--source.is-placeholder,
    .library-icon-slot--hero.is-placeholder {
      border-radius: 50%;
    }

    .library-icon-slot--hero {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      font-size: 20px;
    }

    .library-chevron {
      flex: 0 0 auto;
      width: 9px;
      height: 9px;
      border-right: 2px solid rgba(18,25,40,.26);
      border-bottom: 2px solid rgba(18,25,40,.26);
      transform: rotate(-45deg);
    }

    .library-platform-card {
      border-radius: 26px;
      background: rgba(255,255,255,.74);
      border: 1px solid rgba(255,255,255,.76);
      box-shadow: 0 14px 28px rgba(18,25,40,.06);
      overflow: hidden;
    }

    .library-platform-button,
    .library-source-button,
    .library-item-button {
      appearance: none;
      width: 100%;
      border: none;
      background: transparent;
      text-align: left;
      cursor: pointer;
      color: var(--ink);
    }

    .library-platform-button {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 15px 16px;
    }

    .library-platform-main {
      flex: 1 1 auto;
      min-width: 0;
    }

    .library-platform-name,
    .library-source-name,
    .library-item-title {
      font-size: 16px;
      line-height: 1.35;
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    .library-platform-kind {
      margin-top: 3px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--sub);
      font-weight: 600;
    }

    .library-platform-stat {
      flex: 0 0 auto;
      display: flex;
      align-items: baseline;
      gap: 2px;
      color: var(--accent);
    }

    .library-platform-count {
      font-size: 19px;
      font-weight: 800;
      letter-spacing: -.02em;
    }

    .library-platform-count-label {
      font-size: 11px;
      font-weight: 700;
      color: #8790a4;
    }

    .library-platform-chevron {
      transform: rotate(45deg);
      transition: transform .22s ease;
    }

    .library-platform-card.is-expanded .library-platform-chevron {
      transform: rotate(-135deg);
    }

    .library-source-list {
      display: none;
      gap: 10px;
      padding: 2px 14px 14px;
    }

    .library-platform-card.is-expanded .library-source-list {
      display: grid;
    }

    .library-source-list-head {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .02em;
      color: #8790a4;
      padding: 2px 2px 4px;
    }

    .library-source-button {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 13px;
      border-radius: 20px;
      background: rgba(247,249,252,.98);
      border: 1px solid rgba(18,25,40,.06);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    }

    .library-source-main {
      flex: 1 1 auto;
      min-width: 0;
    }

    .library-source-meta,
    .library-item-meta {
      margin-top: 5px;
      font-size: 11px;
      line-height: 1.6;
      color: #8790a4;
      font-weight: 600;
    }

    .library-item-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .library-item-meta .sep {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #c2c8d4;
    }

    .library-source-type {
      flex: 0 0 auto;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(47,69,111,.08);
      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
    }

    .library-source-button .library-chevron {
      width: 8px;
      height: 8px;
    }

    .library-source-hero {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .library-source-hero-main {
      flex: 1 1 auto;
      min-width: 0;
    }

    .library-source-hero p {
      margin-top: 6px;
    }

    .library-item-button {
      display: flex;
      align-items: flex-start;
      gap: 13px;
      padding: 13px;
      border-radius: 22px;
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(255,255,255,.82);
      box-shadow: 0 14px 28px rgba(18,25,40,.06);
    }

    .library-item-thumb {
      flex: 0 0 auto;
      width: 92px;
      height: 64px;
      border-radius: 14px;
      overflow: hidden;
      background: #e9edf3;
    }

    .library-item-thumb.is-empty {
      background: linear-gradient(150deg, #e6eaf1, #f2f4f8);
    }

    .library-item-thumb-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .library-item-main {
      flex: 1 1 auto;
      min-width: 0;
    }

    .library-item-title {
      font-size: 15px;
    }

    .library-item-summary {
      margin-top: 7px;
      font-size: 12px;
      line-height: 1.6;
      color: #596175;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .library-source-platform {
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(47,69,111,.08);
      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .cover-flow {
      position: relative;
      min-height: auto;
      padding-bottom: 12px;
      margin-top: -6px;
    }

    .cover-stage {
      position: relative;
      display: grid;
      gap: 14px;
      height: auto;
      overflow: visible;
      border-radius: 0;
    }

    .story-card {
      position: relative;
      height: 278px;
      border-radius: 34px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.84);
      background: #dde3ed;
      box-shadow: 0 18px 34px rgba(15,23,42,.14);
      cursor: pointer;
    }

    .story-photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.02);
      background: #d9dde6;
    }

    .story-photo-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        linear-gradient(145deg, rgba(47,69,111,.18), rgba(231,72,62,.10)),
        linear-gradient(180deg, #eef2f8, #d8dee9);
      color: rgba(47,69,111,.72);
      font-size: 13px;
      font-weight: 800;
    }

    .story-photo-placeholder span {
      max-width: 72%;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(255,255,255,.78);
      text-align: center;
    }

    .live-status-card {
      cursor: default;
    }

    .story-card[data-tone="2"] .story-photo { object-position: center 18%; filter: saturate(.95); }
    .story-card[data-tone="3"] .story-photo { object-position: center 30%; filter: saturate(.92); }
    .story-card[data-tone="4"] .story-photo { object-position: center 42%; filter: saturate(.88); }
    .story-card[data-tone="5"] .story-photo { object-position: center 54%; filter: saturate(.84); }
    .story-card[data-tone="6"] .story-photo { object-position: center 66%; filter: saturate(.81); }
    .story-card[data-tone="7"] .story-photo { object-position: center 78%; filter: saturate(.78); }
    .story-card[data-tone="8"] .story-photo { object-position: center 22%; filter: saturate(.90); }
    .story-card[data-tone="9"] .story-photo { object-position: center 46%; filter: saturate(.84); }
    .story-card[data-tone="10"] .story-photo { object-position: center 70%; filter: saturate(.79); }

    .story-overlay,
    .story-highlight {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .story-overlay {
      background:
        linear-gradient(180deg, rgba(8,12,20,.06) 0%, rgba(8,12,20,.28) 46%, rgba(8,12,20,.74) 100%),
        radial-gradient(circle at 78% 18%, rgba(255,255,255,.16), transparent 20%);
    }

    .story-highlight {
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
      opacity: .58;
    }

    .story-chip {
      position: absolute;
      display: none;
      top: 16px;
      left: 16px;
      z-index: 3;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.22);
      border: 1px solid rgba(255,255,255,.24);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .story-body {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      z-index: 4;
      border-radius: 26px;
      padding: 16px 16px 14px;
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,249,252,.91));
      border: 1px solid rgba(255,255,255,.97);
      box-shadow: 0 18px 34px rgba(15,23,42,.16);
    }

    .story-source {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }

    .story-source span {
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.68);
      border: 1px solid rgba(18,25,40,.06);
      color: #667086;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
    }

    .story-title {
      font-size: 24px;
      line-height: 1.06;
      letter-spacing: -.04em;
      color: #131827;
      font-weight: 800;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .story-summary {
      font-size: 13px;
      line-height: 1.66;
      color: #50596f;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .story-meta {
      display: none;
      flex-wrap: wrap;
      gap: 8px;
    }

    .story-meta span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 11px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      background: rgba(47,69,111,.08);
      color: var(--accent);
    }

    /* ============================================================
       首页改版（v2）：精选大卡（底部毛玻璃叠字）+ 横向白卡列表
       由 renderHomeFeed() 注入，接入真实后端 feed 数据
       ============================================================ */
    .home-feed-v2 {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .feature-card {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      cursor: pointer;
      box-shadow:
        0 20px 44px rgba(12, 18, 30, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
      transition: transform .25s var(--ease-elastic), box-shadow .25s var(--ease-smooth);
    }
    .feature-card:active {
      transform: scale(0.985);
      box-shadow: 0 10px 24px rgba(12, 18, 30, 0.12);
    }

    .feature-media {
      height: 300px;
      background:
        radial-gradient(130% 110% at 22% 14%, rgba(255,255,255,0.24), transparent 52%),
        linear-gradient(155deg, #2b3658 0%, #4a3b63 52%, #7d4a52 100%);
    }
    .feature-photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .feature-glass {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 64px 20px 20px;
      /* 仅底部渐变压暗，图片整体保持可见，文字叠在暗部上（图三样式） */
      background: linear-gradient(180deg,
        rgba(10,14,24,0) 0%,
        rgba(10,14,24,0.18) 38%,
        rgba(10,14,24,0.62) 74%,
        rgba(10,14,24,0.86) 100%);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      /* 玻璃层需自带底部圆角 */
      border-radius: 0 0 28px 28px;
    }
    .feature-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      font-weight: 800;
      color: rgba(255,255,255,0.92);
      margin-bottom: 9px;
      text-shadow: 0 1px 3px rgba(0,0,0,0.45);
    }
    .feature-meta .sep {
      width: 3px; height: 3px; border-radius: 50%;
      background: rgba(255,255,255,0.6);
    }
    .feature-title {
      font-size: 23px;
      line-height: 1.2;
      letter-spacing: -.035em;
      font-weight: 850;
      color: #ffffff;
      margin-bottom: 8px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.5);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .feature-sub {
      font-size: 13px;
      line-height: 1.55;
      color: rgba(255,255,255,0.88);
      text-shadow: 0 1px 4px rgba(0,0,0,0.45);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .feed-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .feed-row {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 15px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(18, 25, 40, 0.05);
      box-shadow: 0 8px 20px rgba(12, 18, 30, 0.06);
      cursor: pointer;
      transition: transform .18s var(--ease-elastic), box-shadow .2s var(--ease-smooth);
    }
    .feed-row:active {
      transform: scale(0.99);
      box-shadow: 0 4px 12px rgba(12, 18, 30, 0.05);
    }
    .feed-row-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .feed-row-kicker {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 11px;
      font-weight: 700;
      color: #8b90a2;
      margin-bottom: 7px;
    }
    .feed-row-kicker .sep {
      width: 3px; height: 3px; border-radius: 50%;
      background: #c8ccd6;
    }
    .feed-row-title {
      font-size: 15.5px;
      line-height: 1.34;
      letter-spacing: -.02em;
      font-weight: 750;
      color: #131726;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .feed-row-summary {
      margin-top: 6px;
      font-size: 12.5px;
      line-height: 1.5;
      color: #6b7184;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .feed-row-thumb {
      width: 96px;
      height: 96px;
      border-radius: 18px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: 0 6px 14px rgba(12, 18, 30, 0.12);
    }
    .feed-row-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .feed-row-thumb .play-badge {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 18px;
      text-shadow: 0 1px 4px rgba(0,0,0,0.4);
      z-index: 2;
    }
    .tone-1 { background: linear-gradient(150deg, #3a4a73 0%, #6a4d77 100%); }
    .tone-2 { background: linear-gradient(150deg, #46618a 0%, #8c6f53 100%); }
    .tone-3 { background: linear-gradient(150deg, #5a5670 0%, #94545a 100%); }
    .tone-4 { background: linear-gradient(150deg, #2f4a52 0%, #4e6f6a 100%); }
    .tone-5 { background: linear-gradient(150deg, #5b3f63 0%, #b56b5f 100%); }

    .home-search {
      margin-bottom: 16px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
    }

    .home-card {
      padding: 16px 16px 15px;
    }

    .home-feature-card {
      padding: 14px;
    }

    .home-feature-grid {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr) 38px;
      gap: 12px;
      align-items: start;
    }

    .home-cover {
      position: relative;
      height: 110px;
      border-radius: 18px;
      overflow: hidden;
      padding: 12px;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    }

    .home-cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
      pointer-events: none;
    }

    .podcast-cover {
      background: linear-gradient(135deg, #596a93 0%, #2f456f 100%);
    }

    .video-cover {
      background: linear-gradient(135deg, #7b5b55 0%, #42313d 100%);
    }

    .doc-cover {
      background: linear-gradient(135deg, #73816c 0%, #445243 100%);
    }

    .home-cover-type,
    .home-cover-brand {
      position: relative;
      z-index: 1;
    }

    .home-cover-type {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .03em;
      opacity: .9;
    }

    .home-cover-brand {
      font-size: 12px;
      line-height: 1.35;
      font-weight: 600;
      opacity: .96;
    }

    .home-feature-body {
      min-width: 0;
    }

    .home-title {
      font-size: 20px;
      line-height: 1.18;
      letter-spacing: -.045em;
      margin: 0 0 8px;
      color: var(--ink);
    }

    .home-copy {
      color: #454c61;
      font-size: 13px;
      line-height: 1.65;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .home-action-btn {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid rgba(18,25,40,.08);
      background: rgba(47,69,111,.06);
      color: var(--accent);
      display: grid;
      place-items: center;
      font-size: 20px;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .home-duration {
      margin-top: 12px;
      font-size: 12px;
      color: #8f96a8;
      line-height: 1.5;
      font-weight: 600;
    }

    .home-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 11px;
      color: #9097aa;
      font-weight: 600;
      letter-spacing: .01em;
      margin-bottom: 8px;
    }

    .floating-continue {
      position: absolute;
      right: 12px;
      bottom: 108px;
      z-index: 14;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: auto;
      overflow: visible;
      cursor: grab;
      user-select: none;
      touch-action: none;
      transition: opacity .24s ease, transform .24s ease, filter .24s ease;
    }

    .floating-continue.show {
      display: flex;
    }

    .floating-continue.transition-out {
      opacity: 0;
      transform: translateY(10px) scale(.96);
      filter: blur(6px);
      pointer-events: none;
    }

    .floating-continue.dragging {
      cursor: grabbing;
      transform: scale(1.02);
    }

    .floating-scroll-top-btn {
      appearance: none;
      display: none;
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      margin-left: -19px;
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid rgba(18,25,40,.05);
      background: #ffffff;
      color: var(--ink);
      box-shadow: 0 8px 20px rgba(11,19,38,.12), inset 0 1px 0 rgba(255,255,255,.9);
      line-height: 0;
      cursor: pointer;
      place-items: center;
      pointer-events: auto;
      animation: floating-scroll-top-in .18s ease both;
    }

    .floating-scroll-top-icon {
      width: 17px;
      height: 17px;
      display: block;
    }

    .floating-continue.show-scroll-top .floating-scroll-top-btn {
      display: grid;
    }

    .floating-scroll-top-btn:active {
      transform: translateY(1px) scale(.98);
    }

    @keyframes floating-scroll-top-in {
      from {
        opacity: 0;
        transform: translateY(8px) scale(.92);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .floating-continue-trigger {
      appearance: none;
      width: 40px;
      height: 40px;
      padding: 0;
      border: none;
      border-radius: 999px;
      background: var(--ink);
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 14px 28px rgba(11,19,38,.28), inset 0 1px 0 rgba(255,255,255,.12);
      flex-shrink: 0;
      transition: transform .18s ease;
    }

    .floating-continue.is-expanded .floating-continue-trigger {
      transform: scale(.96);
    }

    .floating-continue-trigger:active {
      transform: scale(.94);
    }

    .floating-continue-trigger-grid {
      display: block;
      line-height: 0;
      color: #ffffff;
    }

    .floating-continue-trigger-grid svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .floating-continue-panel {
      position: absolute;
      top: 50%;
      left: calc(100% + 6px);
      display: flex;
      align-items: stretch;
      gap: 0;
      width: 132px;
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      padding: 0;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0);
      background: rgba(255,255,255,0);
      box-shadow: none;
      transform: translate(10px, -50%) scale(.97);
      transform-origin: left center;
      pointer-events: none;
      transition:
        max-width .24s ease,
        opacity .18s ease,
        padding .24s ease,
        transform .24s ease,
        border-color .24s ease,
        background .24s ease,
        box-shadow .24s ease;
    }

    .floating-continue.expand-left .floating-continue-panel {
      left: auto;
      right: calc(100% + 6px);
      transform: translate(-10px, -50%) scale(.97);
      transform-origin: right center;
    }

    .floating-continue.is-expanded .floating-continue-panel {
      max-width: 132px;
      opacity: 1;
      padding: 0;
      border-color: rgba(255,255,255,0);
      background: rgba(255,255,255,0);
      box-shadow: none;
      transform: translate(0, -50%) scale(1);
      pointer-events: auto;
    }

    .floating-continue.expand-left.is-expanded .floating-continue-panel {
      transform: translate(0, -50%) scale(1);
    }

    .floating-continue.mode-quick-ask .floating-continue-panel {
      width: 190px;
    }

    .floating-continue.mode-quick-ask.is-expanded .floating-continue-panel {
      max-width: 190px;
    }

    .floating-continue-main {
      appearance: none;
      border: none;
      background: transparent;
      padding: 10px 12px;
      width: 100%;
      min-width: 0;
      text-align: left;
      cursor: pointer;
      flex: 1;
      min-height: 42px;
    }

    .floating-continue-view {
      display: block;
      width: 100%;
    }

    .floating-continue-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      padding: 6px;
      width: 100%;
      justify-items: center;
    }

    .floating-continue-action {
      appearance: none;
      width: fit-content;
      max-width: 100%;
      border: none;
      background: #ffffff;
      border-radius: 14px;
      border: 1px solid rgba(18,25,40,.05);
      box-shadow: 0 8px 20px rgba(11,19,38,.12), inset 0 1px 0 rgba(255,255,255,.9);
      padding: 8px 12px;
      cursor: pointer;
      text-align: left;
      min-height: 34px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .floating-continue-action:active {
      transform: scale(.985);
    }

    .floating-continue-icon {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      display: grid;
      place-items: center;
      line-height: 0;
      color: var(--ink);
    }

    .floating-continue-icon svg {
      width: 16px;
      height: 16px;
      display: block;
    }

    .floating-quickask-entry {
      width: fit-content;
      max-width: 100%;
      display: none;
    }

    .floating-continue.can-quick-ask .floating-quickask-entry {
      display: block;
    }

    .floating-continue.mode-quick-ask .floating-quickask-entry {
      width: 100%;
    }

    .floating-quickask-toggle {
      display: flex;
    }

    .floating-quickask-inline {
      display: none;
      align-items: center;
      gap: 6px;
      width: 100%;
      padding: 0;
    }

    .floating-continue.mode-quick-ask .floating-quickask-toggle {
      display: none;
    }

    .floating-continue.mode-quick-ask .floating-quickask-inline {
      display: flex;
    }

    .floating-quickask-inline {
      align-items: center;
      gap: 6px;
      min-width: 0;
      max-width: 100%;
      background: #ffffff;
      border: 1px solid rgba(18,25,40,.05);
      border-radius: 14px;
      box-shadow: 0 8px 20px rgba(11,19,38,.12), inset 0 1px 0 rgba(255,255,255,.9);
      padding: 4px;
    }

    .floating-quickask-textarea {
      flex: 1;
      min-width: 0;
      min-height: 18px;
      max-height: 56px;
      padding: 5px 9px;
      border-radius: 10px;
      border: none;
      outline: none;
      resize: none;
      background: rgba(247,249,252,.96);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
      color: var(--ink);
      font-size: 12px;
      line-height: 1.4;
      font-family: inherit;
    }

    .floating-quickask-textarea:focus {
      border-color: rgba(47,69,111,.18);
    }

    .floating-quickask-textarea::placeholder {
      color: #98a0b3;
    }

    .floating-quickask-send {
      appearance: none;
      flex-shrink: 0;
      border: none;
      border-radius: 999px;
      background: var(--accent);
      color: white;
      min-height: 28px;
      padding: 0 11px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      justify-self: end;
    }

    .floating-quickask-send:disabled {
      opacity: .42;
      cursor: default;
      pointer-events: none;
    }

    .floating-continue-text {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .floating-continue-main .floating-continue-text,
    .floating-quickask-entry .floating-continue-text {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .floating-continue-main .floating-continue-text span,
    .floating-quickask-entry .floating-continue-text span {
      display: none;
    }

    .floating-continue-main .floating-continue-text strong,
    .floating-quickask-entry .floating-continue-text strong {
      padding: 0;
      border: none;
      background: transparent;
      font-size: 14px;
      line-height: 1.3;
      color: var(--ink);
      font-weight: 800;
      letter-spacing: .01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
    }

    .floating-quickask-backdrop {
      position: absolute;
      inset: 0;
      z-index: 13;
      background: rgba(246,248,252,.08);
      display: none;
      pointer-events: none;
    }

    .floating-quickask-backdrop.show {
      display: block;
      pointer-events: auto;
    }

    .floating-quickask-keyboard {
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 0;
      z-index: 27;
    }

    .search-fake-keyboard {
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 0;
      z-index: 27;
    }

    .phone.search-keyboard-open .home-search-layer,
    .phone.search-keyboard-open .panel-search-layer {
      bottom: 246px;
      padding-bottom: 12px;
    }

    .floating-continue-text strong {
      display: block;
      font-size: 11px;
      line-height: 1.2;
      color: #8b93a7;
      font-weight: 700;
    }

    .floating-continue-text span {
      display: block;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(47,69,111,.08);
      border: 1px solid rgba(18,25,40,.05);
      font-size: 13px;
      line-height: 1.45;
      color: var(--ink);
      font-weight: 700;
      white-space: normal;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .detail-meta {
      margin-bottom: 8px;
    }

    .detail-title {
      font-size: 26px;
      line-height: 1.12;
      letter-spacing: -.05em;
      margin: 0 0 10px;
      color: var(--ink);
    }

    .detail-published {
      font-size: 12px;
      color: #8f96a8;
      line-height: 1.6;
    }

    .record-notion {
      margin-top: 14px;
      padding: 14px;
      border-radius: 18px;
      background: rgba(47,69,111,.05);
      border: 1px solid rgba(18,25,40,.05);
    }

    .record-notion strong {
      display: block;
      font-size: 14px;
      line-height: 1.3;
      color: var(--ink);
    }

    .record-notion p {
      margin-top: 6px;
      font-size: 12px;
      line-height: 1.6;
      color: var(--sub);
    }

    .record-feed {
      padding-bottom: 18px;
    }

    /* 瀑布流（原始布局）：双列网格 */
    .record-feed.view-masonry {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    /* 朋友圈 / 时间轴：单列 + 左侧日期轴 */
    .record-feed.view-timeline {
      display: flex;
      flex-direction: column;
    }

    /* 分组：吸顶分组 + 组内双列 */
    .record-feed.view-grouped {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* 视图切换段控 */
    .record-view-switch {
      display: inline-flex;
      align-self: flex-start;
      gap: 2px;
      margin-bottom: 14px;
      padding: 3px;
      border-radius: 999px;
      background: rgba(47,69,111,.08);
      border: 1px solid rgba(255,255,255,.6);
    }

    .record-view-tab {
      appearance: none;
      border: none;
      background: transparent;
      padding: 7px 16px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .01em;
      color: #6b7488;
      cursor: pointer;
      transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    }

    .record-view-tab.active {
      background: #fff;
      color: var(--accent);
      box-shadow: 0 6px 16px rgba(18,25,40,.12);
    }

    /* 时间轴行：左侧固定宽度日期轴 + 右侧卡片 */
    .record-timeline-row {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr);
      gap: 10px;
      padding-bottom: 16px;
    }

    .record-timeline-rail {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 4px;
    }

    /* 贯穿竖线 */
    .record-timeline-rail::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: -16px;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
      background: rgba(47,69,111,.14);
    }

    .record-timeline-row:last-child .record-timeline-rail::before {
      bottom: auto;
      height: 22px;
    }

    .record-timeline-date {
      position: relative;
      z-index: 1;
      font-size: 12px;
      font-weight: 800;
      color: var(--ink);
      line-height: 1.1;
    }

    .record-timeline-weekday {
      position: relative;
      z-index: 1;
      margin-top: 2px;
      font-size: 10px;
      font-weight: 600;
      color: #9097aa;
    }

    .record-timeline-dot {
      position: relative;
      z-index: 1;
      margin-top: 8px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid #fff;
      box-shadow: 0 0 0 3px rgba(47,69,111,.12);
    }

    .record-timeline-dot.is-quiet {
      margin-top: 6px;
      width: 7px;
      height: 7px;
      background: rgba(47,69,111,.32);
      box-shadow: none;
    }

    /* 分组分区 */
    .record-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .record-group-header {
      position: sticky;
      top: 0;
      z-index: 4;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 2px 8px 4px;
      background: linear-gradient(180deg, rgba(244,246,251,.96) 60%, rgba(244,246,251,0));
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .record-group-title {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    /* 分组「当天多条」→ 竖卡一行平铺，按条数平均分屏宽（2 条更宽、3~4 条更窄） */
    .record-group-row {
      display: flex;
      align-items: stretch;
      gap: 10px;
    }

    .record-group-row > .record-note {
      flex: 1 1 0;
      min-width: 0;
      border-radius: 16px;
    }

    /* 行内竖卡：内容撑开、底栏时间贴底，保证一行里各卡时间对齐 */
    .record-group-row > .record-note .record-note-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 9px 9px 10px;
    }

    .record-group-row > .record-note-text {
      min-height: 0;
    }

    /* ≥4 条：横向滑动。卡片固定约 1/3 屏宽（3 张刚好占满），第 4 张露出一角提示可滑。 */
    .record-group-row.is-scroll {
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      -ms-overflow-style: none;
      scrollbar-width: none;
      margin: 0 -2px;
      padding: 0 2px 2px;
      cursor: grab;
    }

    /* 鼠标拖拽中：抓手光标 + 关闭文本选中，避免拖动顺手选中卡片文字 */
    .record-group-row.is-scroll.is-dragging {
      cursor: grabbing;
      user-select: none;
    }

    .record-group-row.is-scroll::-webkit-scrollbar {
      display: none;
    }

    .record-group-row.is-scroll > .record-note {
      flex: 0 0 calc((100% - 44px) / 3);
      scroll-snap-align: start;
    }

    .record-group-row .record-note-thumb {
      aspect-ratio: 1 / 1;
    }

    .record-group-row .record-note-tag {
      padding: 4px 8px;
      font-size: 10px;
    }

    .record-group-row .record-note-title {
      margin-top: 7px;
      font-size: 12.5px;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .record-group-row .record-note-copy {
      margin-top: 5px;
      font-size: 11px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .record-group-row .record-note-footer.is-time {
      margin-top: 8px;
      justify-content: flex-start;
      font-size: 10.5px;
    }

    .record-group-row .record-note-more {
      top: 5px;
      right: 5px;
      width: 24px;
      height: 24px;
      font-size: 15px;
    }

    /* 时间轴里文字卡不需要固定高度，避免单列下过高 */
    .view-timeline .record-note-text {
      min-height: 0;
    }

    .record-note {
      position: relative;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(255,255,255,.78);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 16px 32px rgba(19,27,47,.08);
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    /* 菜单展开时让卡片允许溢出，避免短卡（如纯文字卡）把 105px 竖排下拉菜单裁掉，
       导致「取消」被遮挡 / 菜单不按可用空间展开。缩略图自身已圆角自裁，不会露出直角。 */
    .record-note.actions-open {
      overflow: visible;
    }

    .record-note-more {
      appearance: none;
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 2;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 999px;
      background: rgba(255,255,255,.82);
      color: #596173;
      display: grid;
      place-items: center;
      font-size: 20px;
      line-height: 1;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(18,25,40,.10);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: background .18s ease, color .18s ease, transform .18s ease;
    }

    .record-note.actions-open .record-note-more {
      background: rgba(255,255,255,.96);
      color: var(--accent);
    }

    /* 竖向下拉菜单：锚定在卡片右上角，宽度自适应窄卡（不再用横排药丸，避免缩小后文字重叠）。 */
    .record-note-actions {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 3;
      width: min(124px, calc(100% - 16px));
      height: 105px;
      opacity: 0;
      transform: translateY(-6px) scale(.96);
      transform-origin: top right;
      pointer-events: none;
      transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1);
    }

    .record-note.actions-open .record-note-actions {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .record-note-actions-panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.78);
      background: rgba(255,255,255,.97);
      box-shadow: 0 14px 30px rgba(18,25,40,.18);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: opacity .16s ease, transform .2s ease;
    }

    .record-note-actions-confirm {
      opacity: 0;
      transform: translateY(6px);
      pointer-events: none;
    }

    .record-note.actions-confirming .record-note-actions-primary {
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
    }

    .record-note.actions-confirming .record-note-actions-confirm {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .record-note-action-edit,
    .record-note-action-danger,
    .record-note-action-cancel {
      appearance: none;
      flex: 1 1 0;
      width: 100%;
      min-width: 0;
      border: none;
      background: transparent;
      font-size: 12.5px;
      line-height: 1;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
    }

    .record-note-actions-panel > button + button {
      border-top: 1px solid rgba(18,25,40,.08);
    }

    .record-note-action-edit { color: var(--accent, #2f6df0); }
    .record-note-action-danger { color: #d83b3b; }
    .record-note-action-cancel { color: #7b8396; }

    @media (prefers-reduced-motion: reduce) {
      .record-note-more,
      .record-note-actions,
      .record-note-actions-panel {
        transition: none;
      }
    }

    .record-note-thumb {
      position: relative;
      aspect-ratio: 1 / 1.18;
      overflow: hidden;
      /* 顶部圆角自带，确保 .record-note.actions-open 解除卡片 overflow 时缩略图上沿仍是圆角 */
      border-radius: 24px 24px 0 0;
    }

    .record-note-thumb-image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .note-thumb-sunset {
      background:
        radial-gradient(circle at top right, rgba(255,210,182,.9), transparent 30%),
        linear-gradient(180deg, #af8d7c 0%, #9d6f70 36%, #5f5572 100%);
    }

    .note-thumb-video {
      background:
        radial-gradient(circle at center, rgba(255,255,255,.16), transparent 34%),
        linear-gradient(135deg, #626b89 0%, #2f3650 100%);
    }

    .note-thumb-book {
      background:
        radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 32%),
        linear-gradient(160deg, #6c7358 0%, #4c5442 100%);
    }

    .record-note-text {
      min-height: 218px;
      background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(242,244,249,.92));
    }

    .record-note-text .record-note-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      padding: 16px 14px 14px;
    }

    .record-note-body {
      padding: 12px 13px 14px;
      min-width: 0;
    }

    .record-note-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(47,69,111,.08);
      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .record-note-title {
      margin-top: 10px;
      font-size: 15px;
      line-height: 1.35;
      letter-spacing: -.03em;
      color: var(--ink);
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .record-note-copy {
      margin-top: 8px;
      color: #535a6c;
      font-size: 12px;
      line-height: 1.68;
      overflow-wrap: anywhere;
    }

    .record-note-footer {
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      color: #9097aa;
      font-size: 11px;
      line-height: 1.4;
      font-weight: 600;
    }

    /* ===== 朋友圈 / 分组特写：横向紧凑卡 ===== */
    .record-note-horizontal {
      border-radius: 18px;
    }

    .record-note-horizontal .record-note-h-top {
      display: flex;
      align-items: stretch;
      gap: 12px;
      padding: 11px 12px 9px;
    }

    .record-note-horizontal.media-right .record-note-h-top {
      flex-direction: row-reverse;
    }

    .record-note-horizontal .record-note-more {
      top: 6px;
      right: 6px;
      width: 26px;
      height: 26px;
      font-size: 16px;
    }

    .record-note-h-media {
      position: relative;
      flex: 0 0 auto;
      width: 76px;
      height: 76px;
      border-radius: 14px;
      overflow: hidden;
    }

    .record-note-h-media .record-note-thumb-image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    /* 文字记录：用 “T” 圆角徽标代替缩略图 */
    .record-note-h-badge {
      display: grid;
      place-items: center;
      font-family: 'Georgia', 'Times New Roman', serif;
      font-size: 28px;
      font-style: italic;
      font-weight: 800;
      color: rgba(47,69,111,.42);
      background: linear-gradient(160deg, rgba(232,236,246,.96), rgba(245,247,251,.96));
    }

    .record-note-h-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 28px; /* 给右上角 ⋯ 按钮让位 */
    }

    .record-note-horizontal .record-note-title {
      margin-top: 0;
      font-size: 14px;
      line-height: 1.32;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .record-note-horizontal .record-note-copy {
      margin-top: 5px;
      font-size: 12px;
      line-height: 1.55;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* 横向卡里的文字记录不需要 218px 最小高度 */
    .record-note-horizontal.record-note-text {
      min-height: 0;
    }

    /* ===== 分组「每天只有一条」大特写 ===== */
    .record-group-single {
      display: block;
    }

    .record-note-feature .record-note-h-top {
      gap: 14px;
      padding: 13px 14px 11px;
    }

    .record-note-feature .record-note-h-media {
      width: 118px;
      height: 118px;
      border-radius: 16px;
    }

    .record-note-feature .record-note-h-badge {
      font-size: 40px;
    }

    .record-note-feature .record-note-title {
      font-size: 15px;
      -webkit-line-clamp: 2;
    }

    .record-note-feature .record-note-copy {
      -webkit-line-clamp: 4;
    }

    /* ===== rich 底栏：类型 | 时间 ……… 心情 · 地点 ===== */
    .record-note-footer.is-rich {
      margin-top: 0;
      padding: 7px 12px 9px;
      border-top: 1px solid rgba(47,69,111,.08);
      flex-wrap: nowrap;
      gap: 6px;
      font-size: 10.5px;
      color: #9097aa;
    }

    .record-note-tag-inline {
      flex: 0 0 auto;
      padding: 0;
      gap: 3px;
      background: transparent;
      color: #6b7488;
      font-size: 10.5px;
    }

    .record-note-foot-time {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    /* 类型与时间之间的竖分隔 */
    .record-note-foot-time::before {
      content: '';
      display: inline-block;
      width: 1px;
      height: 9px;
      margin-right: 6px;
      vertical-align: -1px;
      background: rgba(47,69,111,.16);
    }

    .record-note-foot-spacer {
      flex: 1 1 auto;
    }

    .record-note-foot-mood,
    .record-note-foot-place {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
    }

    .record-note-foot-divider {
      flex: 0 0 auto;
      width: 1px;
      height: 9px;
      background: rgba(47,69,111,.16);
    }

    .rn-ico {
      flex: 0 0 auto;
      width: 12px;
      height: 12px;
      color: #9aa1b3;
    }

    /* ===== time 底栏（分组多条卡，仅时间）===== */
    .record-note-footer.is-time {
      margin-top: 10px;
      justify-content: flex-end;
      color: #9097aa;
      font-size: 11px;
    }

    /* ===== 分组标题日期范围（紧跟标题，灰色小字）===== */
    .record-group-range {
      font-size: 12px;
      font-weight: 600;
      color: #9097aa;
    }

    .record-note-video,
    .record-note-image,
    .record-note-text {
      cursor: pointer;
    }

    .record-note-play {
      position: absolute;
      right: 10px;
      bottom: 10px;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      color: #303750;
      display: grid;
      place-items: center;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 8px 18px rgba(11,19,38,.18);
    }

    .record-note-duration {
      position: absolute;
      left: 8px;
      bottom: 8px;
      padding: 2px 7px;
      border-radius: 999px;
      background: rgba(10,14,24,.62);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .02em;
      font-variant-numeric: tabular-nums;
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }

    /* 朋友圈 / 分组里的小缩略图（一行三张）：播放钮与时长徽标都按比例缩小并贴角，
       避免在窄缩略图里数字显得过大、播放钮与时长重合。 */
    .record-group-row .record-note-play {
      right: 6px;
      bottom: 6px;
      width: 22px;
      height: 22px;
      font-size: 9px;
      box-shadow: 0 4px 10px rgba(11,19,38,.2);
    }

    .record-group-row .record-note-duration {
      left: 6px;
      bottom: 6px;
      padding: 1px 5px;
      font-size: 9px;
      border-radius: 999px;
    }

    /* 朋友圈 / 时间轴里的小横向缩略图（76×76）：播放钮与时长徽标在窄缩略图里
       默认尺寸过大且会重合。这里进一步缩小并贴对角，排除 118px 的分组单日大图
       （.record-note-feature 走默认尺寸即可）。 */
    .record-note-horizontal:not(.record-note-feature) .record-note-h-media .record-note-play {
      right: 5px;
      bottom: 5px;
      width: 19px;
      height: 19px;
      font-size: 8px;
      box-shadow: 0 3px 8px rgba(11,19,38,.22);
    }

    .record-note-horizontal:not(.record-note-feature) .record-note-h-media .record-note-duration {
      left: 5px;
      bottom: 5px;
      padding: 1px 5px;
      font-size: 9px;
      border-radius: 999px;
    }

    .preview-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(10,14,24,.42);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease;
      z-index: 21;
    }

    .preview-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }

    .preview-sheet {
      position: absolute;
      left: 18px;
      right: 18px;
      top: 96px;
      bottom: 108px;
      border-radius: 28px;
      overflow: hidden;
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(255,255,255,.82);
      box-shadow: 0 26px 50px rgba(11,19,38,.2);
      opacity: 0;
      transform: translateY(14px) scale(.98);
      pointer-events: none;
      transition: opacity .24s ease, transform .24s ease;
      z-index: 22;
      display: flex;
      flex-direction: column;
    }

    .preview-sheet.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .preview-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: none;
      background: rgba(255,255,255,.92);
      color: #31384f;
      font-size: 14px;
      font-weight: 700;
      display: grid;
      place-items: center;
      cursor: pointer;
      z-index: 2;
    }

    .preview-media {
      flex: 1;
      min-height: 0;
      background: linear-gradient(135deg, #626b89 0%, #2f3650 100%);
      position: relative;
    }

    .preview-media.preview-image {
      background:
        radial-gradient(circle at top right, rgba(255,210,182,.9), transparent 28%),
        linear-gradient(180deg, #af8d7c 0%, #9d6f70 36%, #5f5572 100%);
    }

    .preview-media.has-media {
      background: #101828;
    }

    .preview-media-image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .preview-media-video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      background: #000;
    }

    /* 只有占位（无真实视频）时才叠一个装饰性 ▶；有真实 <video controls> 时不遮挡播放控件。 */
    .preview-media.preview-video:not(.has-media)::after {
      content: "▶";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(255,255,255,.92);
      font-size: 48px;
      font-weight: 700;
      text-shadow: 0 10px 24px rgba(0,0,0,.24);
    }

    .preview-body {
      padding: 16px 16px 18px;
      overflow-y: auto;
    }

    #screen-ai.active.ai-pre-enter,
    #screen-ai.transitioning.ai-pre-enter,
    #screen-ai.active.ai-layer-exit,
    #screen-ai.transitioning.ai-layer-exit {
      opacity: 0;
      transform: translateY(16px) scale(.988);
      filter: blur(8px);
      pointer-events: none;
    }

    .preview-body strong {
      display: block;
      font-size: 16px;
      line-height: 1.35;
      color: var(--ink);
    }

    .preview-copy {
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.7;
      color: var(--sub);
      white-space: normal;
      /* 只读预览里长串中文/英文/URL 也要换行，避免溢出 */
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .preview-copy p + p {
      margin-top: 10px;
    }

    .preview-sheet.is-text .preview-media {
      display: none;
    }

    .preview-sheet.is-text .preview-body {
      flex: 1;
      padding: 56px 18px 20px;
    }

    .preview-sheet.is-text .preview-body strong {
      font-size: 18px;
      line-height: 1.45;
    }

    .preview-sheet.is-text .preview-copy {
      font-size: 14px;
      line-height: 1.9;
      color: #2b3042;
    }

    /* 文字记录编辑：可见性完全由 can-edit / is-editing 类控制 */
    .preview-edit-input {
      display: none;
      width: 100%;
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(47,69,111,.18);
      background: rgba(255,255,255,.9);
      font: inherit;
      font-size: 14px;
      line-height: 1.8;
      color: #2b3042;
      resize: vertical;
      min-height: 140px;
      box-sizing: border-box;
    }

    .preview-sheet.is-editing .preview-edit-input {
      display: block;
    }

    .preview-edit-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(47,69,111,.12);
    }

    .preview-sheet.is-editing .preview-copy {
      display: none;
    }

    .preview-actions {
      display: none;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
    }

    .preview-sheet.can-edit .preview-actions,
    .preview-sheet.is-editing .preview-actions {
      display: flex;
    }

    .preview-edit-btn,
    .preview-edit-cancel,
    .preview-edit-save {
      appearance: none;
      border: 1px solid rgba(47,69,111,.18);
      background: rgba(255,255,255,.92);
      padding: 8px 18px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    }

    /* 非编辑态显示「编辑」按钮；编辑态显示「取消 / 保存」 */
    .preview-edit-btn {
      display: none;
    }

    .preview-sheet.can-edit:not(.is-editing) .preview-edit-btn {
      display: inline-flex;
    }

    .preview-edit-controls {
      display: none;
      gap: 10px;
    }

    .preview-sheet.is-editing .preview-edit-controls {
      display: flex;
      width: 100%;
      align-items: center;
      gap: 10px;
    }

    .preview-edit-controls-spacer {
      flex: 1 1 auto;
    }

    .preview-edit-save {
      border-color: transparent;
      background: var(--accent);
      color: #fff;
      box-shadow: 0 8px 20px rgba(47,69,111,.22);
    }

    .preview-edit-cancel {
      color: #7b8396;
    }

    /* 图片 / 文字记录没有独立标题：预览里隐藏粗体标题，只留正文。 */
    .preview-sheet.is-caption-only .preview-body strong {
      display: none;
    }

    /* 「更换图片」仅图片记录、编辑态显示，置于编辑工具条左侧。 */
    .preview-edit-replace {
      appearance: none;
      border: 1px solid rgba(47,69,111,.18);
      background: rgba(255,255,255,.92);
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      display: none;
      transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .preview-sheet.is-image.is-editing .preview-edit-replace {
      display: inline-flex;
    }

    .search-empty {
      padding: 18px 2px 8px;
    }

    .search-empty strong {
      display: block;
      font-size: 14px;
      line-height: 1.35;
      color: #6f778d;
      font-weight: 700;
    }

    .search-empty p {
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.7;
      color: #9aa1b3;
    }

    .continue-card {
      background: rgba(255,255,255,.58);
    }

    .inline-source {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .detail-open-btn {
      font-size: 12px;
    }

    .record-cta {
      text-align: center;
      padding: 20px 18px;
      margin-bottom: 14px;
    }

    .record-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin: 14px 0 10px;
    }

    .ai-input-main {
      flex: 1;
      min-width: 0;
    }

    .input-prompt {
      color: var(--ink);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.35;
    }

    .input-sub {
      color: var(--sub);
      font-size: 11px;
      line-height: 1.5;
      margin-top: 4px;
    }

    .input-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .mic-btn {
      background: rgba(47,69,111,.08);
      border: 1px solid rgba(47,69,111,.12);
      color: var(--accent);
      padding: 10px 12px;
      font-size: 12px;
      min-width: 68px;
    }

    .mic-btn.active {
      background: var(--accent);
      color: white;
      border-color: rgba(47,69,111,.45);
    }

    .time-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--sub);
      letter-spacing: .02em;
      margin: 18px 2px 8px;
    }

    .result-group {
      margin-top: 18px;
    }

    .result-label {
      font-size: 12px;
      color: var(--sub);
      margin-bottom: 8px;
      font-weight: 700;
    }

    .result-item {
      padding: 12px 0;
      border-bottom: 1px solid rgba(18,25,40,.06);
    }

    .result-item:last-child { border-bottom: none; }

    .detail-head h3 {
      font-size: 28px;
      line-height: 1.08;
      letter-spacing: -.05em;
      margin-top: 12px;
      margin-bottom: 12px;
    }

    .body-copy {
      font-size: 15px;
      line-height: 1.88;
      color: #2b3042;
      background: rgba(255,255,255,.7);
      border-radius: 20px;
      padding: 16px;
      border: 1px solid var(--line);
      position: relative;
    }

    .body-copy p + p { margin-top: 12px; }

    .selection-menu {
      position: absolute;
      top: 18px;
      left: 20px;
      display: none;
      gap: 8px;
      background: rgba(19,25,43,.95);
      color: white;
      padding: 8px;
      border-radius: 16px;
      box-shadow: 0 14px 28px rgba(5,10,25,.3);
      z-index: 26;
      white-space: nowrap;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .selection-menu.show { display: inline-flex; }

    .selection-menu button {
      appearance: none;
      border: none;
      padding: 7px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,.08);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .selection-menu button:hover {
      background: rgba(255,255,255,.14);
    }

    .text-action-source {
      user-select: text;
      -webkit-user-select: text;
      cursor: text;
    }

    .ai-card-top {
      padding: 15px 16px;
      margin-bottom: 12px;
      background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(245,247,252,.84));
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.76);
    }

    .ai-input {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 14px 14px 16px;
      border-radius: 20px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.82);
      color: var(--sub);
      font-size: 13px;
      margin-top: 12px;
    }

    .ai-chat {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      gap: 10px;
      margin-top: 0;
      padding: 12px 0;
    }

    .ai-chat::before {
      content: "";
      margin-top: auto;
    }

    .ai-message {
      align-self: flex-start;
      max-width: 88%;
      min-width: 0;
      border-radius: 20px;
      border: 1px solid rgba(18,25,40,.06);
      background: rgba(255,255,255,.82);
      padding: 14px;
      color: #2b3042;
      font-size: 14px;
      line-height: 1.75;
      /* 长链接/无空格长串（含无 http 前缀的裸 URL 与 slug）必须在气泡内换行，
         不能撑破固定聊天宽度造成页面横向可拖动。overflow-wrap 会继承到 p/li/标题。 */
      overflow-wrap: anywhere;
    }

    .ai-message.user {
      align-self: flex-end;
      border-color: #e1d4bc;
      background: #f3ead8;
      color: #302d27;
      border-radius: 20px 20px 10px 20px;
      box-shadow: 0 8px 18px rgba(18,25,40,.06);
    }

    .ai-message.assistant {
      align-self: flex-start;
      border-radius: 20px 20px 20px 10px;
    }

    /* Rich markdown rendering for assistant replies */
    .ai-message .ai-rich {
      display: block;
    }

    .ai-message .ai-rich > :first-child {
      margin-top: 0;
    }

    .ai-message .ai-rich > :last-child {
      margin-bottom: 0;
    }

    .ai-message .ai-rich p {
      margin: 0 0 8px;
    }

    .ai-message .ai-rich strong {
      font-weight: 600;
      color: #1f2435;
    }

    .ai-message .ai-rich em {
      font-style: italic;
    }

    .ai-message .ai-rich .ai-md-h {
      font-weight: 600;
      font-size: 14.5px;
      color: #1f2435;
      margin: 10px 0 6px;
    }

    .ai-message .ai-rich .ai-md-list {
      margin: 4px 0 8px;
      padding-left: 20px;
    }

    .ai-message .ai-rich .ai-md-list li {
      margin: 2px 0;
    }

    .ai-message .ai-rich a {
      color: #2f6bd6;
      text-decoration: none;
      word-break: break-all;
    }

    .ai-message .ai-rich a:hover {
      text-decoration: underline;
    }

    .ai-message .ai-rich code {
      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
      font-size: 12.5px;
      background: rgba(18,25,40,.06);
      border-radius: 5px;
      padding: 1px 5px;
    }

    .ai-message .ai-rich .ai-md-quote {
      margin: 6px 0 8px;
      padding: 4px 0 4px 12px;
      border-left: 3px solid rgba(18,25,40,.18);
      color: #5a6175;
    }

    .ai-message .ai-rich .ai-md-pre {
      margin: 6px 0 8px;
      padding: 10px 12px;
      background: rgba(18,25,40,.05);
      border: 1px solid rgba(18,25,40,.08);
      border-radius: 10px;
      overflow-x: auto;
    }

    .ai-message .ai-rich .ai-md-pre code {
      background: none;
      padding: 0;
      font-size: 12.5px;
      line-height: 1.6;
      white-space: pre;
    }

    .ai-message.is-loading {
      color: #667086;
      background: rgba(255,255,255,.62);
      width: auto;
      align-self: flex-start;
      padding: 13px 15px;
    }

    .ai-thinking-indicator {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 32px;
      height: 14px;
      vertical-align: middle;
    }

    .ai-thinking-indicator span {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: rgba(47,69,111,.54);
      animation: ai-thinking-pulse 1.05s ease-in-out infinite;
    }

    .ai-thinking-indicator span:nth-child(2) {
      animation-delay: .14s;
    }

    .ai-thinking-indicator span:nth-child(3) {
      animation-delay: .28s;
    }

    @keyframes ai-thinking-pulse {
      0%, 80%, 100% {
        opacity: .32;
        transform: translateY(0) scale(.82);
      }
      40% {
        opacity: 1;
        transform: translateY(-3px) scale(1);
      }
    }

    .ai-message.is-error {
      border-color: rgba(196,54,45,.24);
      background: rgba(255,238,236,.78);
      color: #8f2f2a;
    }

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

    .ai-attachment-chip {
      display: inline-flex;
      max-width: 100%;
      align-items: center;
      min-height: 26px;
      border-radius: 999px;
      padding: 4px 10px;
      background: rgba(255,255,255,.76);
      border: 1px solid rgba(18,25,40,.08);
      color: #34405a;
      font-size: 12px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .ai-history-empty {
      padding: 14px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.68);
      color: var(--sub);
      font-size: 13px;
    }

    .ai-composer {
      position: relative;
      bottom: auto;
      flex-shrink: 0;
      z-index: 13;
      margin-top: 10px;
      padding: 8px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.9);
      background: rgba(255,255,255,.94);
      box-shadow: 0 12px 28px rgba(11,19,38,.10);
    }

    .ai-composer-row {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      align-items: center;
      gap: 8px;
    }

    .composer-btn {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid rgba(18,25,40,.06);
      background: rgba(47,69,111,.05);
      color: var(--accent);
      font-size: 17px;
      font-weight: 700;
      display: grid;
      place-items: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    .composer-btn.active {
      background: rgba(47,69,111,.12);
      border-color: rgba(47,69,111,.18);
      color: var(--accent);
    }

    .composer-field {
      flex: 1;
      min-height: 44px;
      max-height: 112px;
      padding: 0 14px;
      border-radius: 16px;
      background: rgba(243,244,248,.96);
      color: #8c93a5;
      font-size: 13px;
      line-height: 1.45;
      display: flex;
      align-items: center;
      cursor: text;
      white-space: pre-wrap;
      overflow-y: auto;
      user-select: text;
      outline: none;
    }

    .composer-field:focus {
      box-shadow: 0 0 0 2px rgba(47,69,111,.12);
    }

    .ai-composer.is-active .composer-field {
      background: rgba(255,255,255,.98);
      color: #2b3042;
    }

    .ai-composer.is-voice .composer-field {
      justify-content: center;
      background: rgba(47,69,111,.08);
      color: var(--ink);
      font-weight: 700;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    .ai-composer.is-recording .composer-field {
      background: rgba(47,69,111,.14);
      box-shadow: inset 0 0 0 1px rgba(47,69,111,.10);
      transform: scale(.99);
      cursor: grabbing;
    }

    .ai-composer.is-cancelling .composer-field {
      background: rgba(35,39,52,.12);
      color: #252a38;
    }

    .ai-composer.is-transcribing .composer-field {
      background: rgba(255,255,255,.98);
      box-shadow: inset 0 0 0 1px rgba(47,69,111,.10);
    }

    .voice-wave,
    .voice-transcribing {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-width: 54px;
      height: 22px;
    }

    .voice-wave span {
      width: 4px;
      height: 10px;
      border-radius: 999px;
      background: rgba(47,69,111,.72);
      animation: voice-wave-pulse .82s ease-in-out infinite;
    }

    .voice-wave span:nth-child(2) { animation-delay: .08s; }
    .voice-wave span:nth-child(3) { animation-delay: .16s; }
    .voice-wave span:nth-child(4) { animation-delay: .24s; }

    .voice-transcribing span {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: rgba(47,69,111,.52);
      animation: voice-transcribe-pulse .95s ease-in-out infinite;
    }

    .voice-transcribing span:nth-child(2) { animation-delay: .14s; }
    .voice-transcribing span:nth-child(3) { animation-delay: .28s; }

    .voice-cancel-mark {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      background: rgba(22,25,42,.12);
      color: #252a38;
      font-size: 18px;
      line-height: 1;
      font-weight: 900;
    }

    @keyframes voice-wave-pulse {
      0%, 100% { transform: scaleY(.7); opacity: .48; }
      50% { transform: scaleY(1.55); opacity: 1; }
    }

    @keyframes voice-transcribe-pulse {
      0%, 80%, 100% { transform: scale(.82); opacity: .35; }
      40% { transform: scale(1); opacity: 1; }
    }

    .ai-composer.is-active:not(.is-voice) .composer-field.text-mode::after {
      content: "";
      display: inline-block;
      width: 1px;
      height: 16px;
      background: rgba(47,69,111,.45);
      margin-left: 6px;
      animation: blink-caret 1s steps(1, end) infinite;
      vertical-align: middle;
    }

    @keyframes blink-caret {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }

    .ai-composer:not(.is-active) .composer-send,
    .ai-composer:not(.is-active) .ai-add-button,
    .ai-composer.is-voice .composer-send,
    .ai-composer.is-voice .ai-add-button {
      display: none;
    }

    .composer-send {
      min-width: 58px;
      height: 38px;
      padding: 0 14px;
      font-size: 13px;
      border-radius: 999px;
      background: var(--accent);
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 700;
      flex-shrink: 0;
    }

    .composer-send.hidden {
      display: none;
    }

    .ai-fake-keyboard {
      margin-top: 0;
      padding: 0 8px;
      border-radius: 22px 22px 0 0;
      background: linear-gradient(180deg, rgba(230,233,240,.98), rgba(216,221,231,.98));
      border: 1px solid rgba(255,255,255,.92);
      box-shadow: 0 -10px 24px rgba(11,19,38,.08);
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(28px);
      transition: max-height .24s ease, opacity .24s ease, transform .24s ease, padding .24s ease, margin-top .24s ease;
    }

    .ai-fake-keyboard.show {
      max-height: 248px;
      opacity: 1;
      transform: translateY(0);
      padding: 10px 8px 12px;
      margin-top: 8px;
    }

    #ai-fake-keyboard {
      flex-shrink: 0;
    }

    .ai-keyboard-row {
      display: grid;
      gap: 6px;
      margin-top: 6px;
    }

    .ai-keyboard-row:first-child {
      margin-top: 0;
    }

    .ai-keyboard-row.row-1 {
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    .ai-keyboard-row.row-2 {
      grid-template-columns: repeat(9, minmax(0, 1fr));
      padding: 0 14px;
    }

    .ai-keyboard-row.row-3 {
      grid-template-columns: 52px repeat(7, minmax(0, 1fr)) 52px;
    }

    .ai-keyboard-row.row-4 {
      grid-template-columns: 56px 1fr 72px;
    }

    .ai-key {
      appearance: none;
      border: none;
      cursor: pointer;
      height: 34px;
      border-radius: 9px;
      background: rgba(255,255,255,.96);
      color: #394255;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      box-shadow: 0 1px 0 rgba(255,255,255,.76), 0 1px 3px rgba(24,31,46,.12);
    }

    .ai-key.utility {
      background: rgba(198,204,216,.96);
    }

    .ai-key.space {
      background: rgba(255,255,255,.98);
    }

    #screen-compose-text,
    #screen-compose-media,
    #screen-save-destination {
      padding: 56px 16px 18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 16%),
        linear-gradient(180deg, #f7f8fb 0%, #eef1f6 100%);
    }

    #screen-compose-text.compose-keyboard-open,
    #screen-compose-media.compose-keyboard-open {
      overflow: hidden;
    }

    .compose-shell,
    .save-shell {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    #screen-compose-text.compose-keyboard-open .compose-shell,
    #screen-compose-media.compose-keyboard-open .compose-shell {
      height: 100%;
      min-height: 0;
    }
    .compose-topbar {
      display: grid;
      grid-template-columns: 64px 1fr 64px;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .compose-nav-btn,
    .compose-nav-spacer {
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 13px;
      font-weight: 700;
      color: #5e667b;
    }

    .compose-nav-btn {
      appearance: none;
      border: none;
      background: transparent;
      padding: 0;
      cursor: pointer;
    }

    .compose-nav-btn.next {
      justify-content: flex-end;
      color: var(--accent);
    }

    .compose-nav-btn.is-disabled {
      color: #a8afbe;
      pointer-events: none;
    }

    .compose-title {
      text-align: center;
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.01em;
    }

    .compose-editor {
      flex: 1;
      min-height: 320px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.9);
      background: rgba(255,255,255,.94);
      box-shadow: 0 18px 36px rgba(16,24,40,.08);
      padding: 20px 18px;
      color: #2b3042;
      font-size: 17px;
      line-height: 1.8;
      cursor: text;
      overflow-wrap: anywhere;
    }

    #screen-compose-text.compose-keyboard-open .compose-editor {
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .compose-placeholder {
      color: #9aa2b4;
    }

    .compose-placeholder.hidden {
      display: none;
    }

    .compose-text-value,
    .compose-media-caption-value {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      color: #2b3042;
      min-height: 24px;
    }

    .compose-media-preview {
      position: relative;
      height: 290px;
      border-radius: 30px;
      overflow: hidden;
      background:
        radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 24%),
        linear-gradient(135deg, #7b5b55 0%, #42313d 100%);
      box-shadow: 0 18px 34px rgba(16,24,40,.12);
    }

    #screen-compose-media.compose-keyboard-open .compose-media-preview {
      flex: 1 1 auto;
      height: auto;
      min-height: 120px;
    }

    .compose-media-preview.is-camera {
      background:
        radial-gradient(circle at top right, rgba(255,210,182,.78), transparent 28%),
        linear-gradient(180deg, #af8d7c 0%, #9d6f70 36%, #5f5572 100%);
    }

    .compose-media-preview.has-selected-media {
      background: #101828;
    }

    .compose-media-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .compose-media-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #000;
    }

    /* 上传 / 压缩过程态：盖在本地即时预览之上的半透明遮罩 + 转圈 + 文案 */
    .compose-media-loading {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: rgba(10,14,24,.46);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      z-index: 3;
    }

    .compose-media-spinner {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 3px solid rgba(255,255,255,.32);
      border-top-color: #fff;
      animation: compose-media-spin .8s linear infinite;
    }

    .compose-media-loading-text {
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .01em;
      text-align: center;
      padding: 0 18px;
      text-shadow: 0 1px 6px rgba(0,0,0,.4);
    }

    .compose-media-loading.is-error {
      background: rgba(120,30,36,.5);
    }

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

    @media (prefers-reduced-motion: reduce) {
      .compose-media-spinner { animation-duration: 1.6s; }
    }

    .compose-media-badge {
      position: absolute;
      top: 16px;
      left: 16px;
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.22);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .02em;
      border: 1px solid rgba(255,255,255,.24);
    }

    .compose-media-caption {
      margin-top: 14px;
      min-height: 68px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.88);
      background: rgba(255,255,255,.94);
      box-shadow: 0 14px 28px rgba(16,24,40,.08);
      padding: 18px 16px;
      cursor: text;
    }

    #screen-compose-media.compose-keyboard-open .compose-media-caption {
      flex: 0 0 auto;
      max-height: 92px;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .compose-media-caption.is-active {
      border-color: rgba(47,69,111,.16);
      box-shadow: 0 16px 32px rgba(16,24,40,.10);
    }

    .compose-keyboard,
    .ai-fake-keyboard {
      margin-top: 0;
      padding: 0 8px;
      border-radius: 22px 22px 0 0;
      background: linear-gradient(180deg, rgba(230,233,240,.98), rgba(216,221,231,.98));
      border: 1px solid rgba(255,255,255,.92);
      box-shadow: 0 -10px 24px rgba(11,19,38,.08);
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(28px);
      transition: max-height .24s ease, opacity .24s ease, transform .24s ease, padding .24s ease, margin-top .24s ease;
    }

    .compose-keyboard.show,
    .ai-fake-keyboard.show {
      max-height: 248px;
      opacity: 1;
      transform: translateY(0);
      padding: 10px 8px 12px;
      margin-top: 8px;
    }

    .compose-keyboard {
      flex-shrink: 0;
    }

    .compose-keyboard-row,
    .ai-keyboard-row {
      display: grid;
      gap: 6px;
      margin-top: 6px;
    }

    .compose-keyboard-row:first-child,
    .ai-keyboard-row:first-child {
      margin-top: 0;
    }

    .compose-keyboard-row.row-1,
    .ai-keyboard-row.row-1 {
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    .compose-keyboard-row.row-2,
    .ai-keyboard-row.row-2 {
      grid-template-columns: repeat(9, minmax(0, 1fr));
      padding: 0 14px;
    }

    .compose-keyboard-row.row-3,
    .ai-keyboard-row.row-3 {
      grid-template-columns: 52px repeat(7, minmax(0, 1fr)) 52px;
    }

    .compose-keyboard-row.row-4,
    .ai-keyboard-row.row-4 {
      grid-template-columns: 56px 1fr 72px;
    }

    .compose-key,
    .ai-key {
      height: 34px;
      border-radius: 9px;
      background: rgba(255,255,255,.96);
      color: #394255;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      box-shadow: 0 1px 0 rgba(255,255,255,.76), 0 1px 3px rgba(24,31,46,.12);
    }

    .compose-key {
      appearance: none;
      border: none;
      cursor: pointer;
    }

    .compose-key.utility,
    .ai-key.utility {
      background: rgba(198,204,216,.96);
    }

    .compose-key.space,
    .ai-key.space {
      background: rgba(255,255,255,.98);
    }

    .save-options {
      display: grid;
      gap: 12px;
      margin-top: 10px;
    }

    .save-option {
      appearance: none;
      border: 1px solid rgba(255,255,255,.88);
      background: rgba(255,255,255,.94);
      border-radius: 24px;
      padding: 18px 16px;
      text-align: left;
      box-shadow: 0 16px 32px rgba(16,24,40,.08);
      cursor: pointer;
    }

    .save-option strong {
      display: block;
      font-size: 16px;
      line-height: 1.35;
      color: var(--ink);
    }

    .save-option span {
      display: block;
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.7;
      color: var(--sub);
    }

    .save-option.is-disabled {
      opacity: .58;
      pointer-events: none;
    }

    .save-status {
      min-height: 24px;
      margin-top: 14px;
      font-size: 12px;
      color: #7f879a;
      line-height: 1.6;
    }

    .save-status.is-saving {
      color: var(--accent);
      font-weight: 700;
    }

    .record-feed .record-note {
      transition: transform .26s ease, opacity .26s ease, box-shadow .26s ease, background-color .6s ease;
    }

    .record-note.is-inserting {
      opacity: 0;
      transform: translateY(-16px) scale(.98);
    }

    .record-note.just-added {
      box-shadow: 0 18px 40px rgba(47,69,111,.16), 0 0 0 2px rgba(47,69,111,.14);
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,246,255,.94));
    }

    .global-toast {
      position: absolute;
      left: 50%;
      bottom: 34px;
      transform: translate(-50%, 12px);
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(17,24,39,.88);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .01em;
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease;
      z-index: 28;
      white-space: nowrap;
    }

    .global-toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .composer-meta {
      display: none;
    }

    .composer-hint {
      font-size: 11px;
      color: #98a0b3;
      line-height: 1.5;
    }

    .voice-hold {
      font-size: 11px;
      color: var(--accent);
      font-weight: 700;
      white-space: nowrap;
    }

    .bubble {
      border-radius: 18px 18px 18px 8px;
      background: rgba(255,255,255,.82);
      border: 1px solid var(--line);
      padding: 14px;
      margin-bottom: 10px;
    }

    .bubble.user {
      border-radius: 18px 18px 8px 18px;
      background: rgba(47,69,111,.08);
    }

    ul.clean {
      padding-left: 18px;
      margin: 0;
      color: var(--sub);
      display: grid;
      gap: 8px;
      font-size: 13px;
      line-height: 1.6;
    }

    .record-image {
      height: 132px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(119,146,190,.35), rgba(199,206,220,.65));
      margin-bottom: 12px;
      position: relative;
      overflow: hidden;
    }

    .record-image::after {
      content: "";
      position: absolute;
      inset: 14px;
      border-radius: 16px;
      border: 1px dashed rgba(255,255,255,.72);
    }

    .spec h2 {
      font-size: 28px;
      line-height: 1.08;
      letter-spacing: -.04em;
      margin-bottom: 10px;
    }

    .spec .intro {
      color: var(--sub);
      font-size: 14px;
      line-height: 1.75;
      margin-bottom: 20px;
    }

    .spec-block {
      padding: 18px 18px 16px;
      background: rgba(255,255,255,.68);
      border: 1px solid var(--line);
      border-radius: 22px;
      margin-bottom: 12px;
    }

    .spec-block h3 {
      font-size: 14px;
      margin-bottom: 10px;
    }

    .spec-block p, .spec-block li {
      font-size: 13px;
      color: var(--sub);
      line-height: 1.72;
    }

    .spec-block ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }

    .spec-mini-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .spec-mini {
      padding: 12px 12px 10px;
      border-radius: 18px;
      background: rgba(47,69,111,.05);
      border: 1px solid rgba(18,25,40,.05);
    }

    .spec-mini h4 {
      font-size: 12px;
      margin-bottom: 6px;
    }

    .spec-mini p {
      font-size: 12px;
      color: var(--sub);
      line-height: 1.65;
    }

    .footer-note {
      margin-top: 14px;
      font-size: 12px;
      color: var(--sub);
      line-height: 1.7;
    }

    @media (max-width: 1280px) {
      .shell { justify-content: center; }
      .sidebar, .spec { position: static; }
      .phone-wrap { justify-content: center; }
    }

    @media (max-width: 560px) {
      html, body { min-height: 100dvh; }
      body { padding: 12px; overflow: hidden; }
      .shell,
      .viewer,
      .phone-wrap { width: 100%; }
      .viewer { padding: 0; }
      .sidebar, .spec { padding: 18px; }
      .phone {
        width: 100%;
        max-width: var(--phone-w);
        height: calc(100dvh - 24px);
        max-height: var(--phone-h);
      }
      .viewer-top { flex-direction: column; align-items: flex-start; }
      .hint { max-width: none; text-align: left; }
      .spec-mini-grid { grid-template-columns: 1fr; }
    }

    @supports not (height: 100dvh) {
      @media (max-width: 560px) {
        html, body { min-height: 100vh; }
        .phone { height: calc(100vh - 24px); }
      }
    }
  

    /* final direct-selector overrides for the small refinement pack */
    #settings-overlay-backdrop {
      background: rgba(246,248,252,.16) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      transition: opacity .24s ease !important;
    }

    #settings-overlay-panel {
      border-radius: 30px !important;
      background: rgba(255,255,255,.95) !important;
      border: 1px solid rgba(255,255,255,.88) !important;
      box-shadow: 0 28px 56px rgba(12,18,30,.12) !important;
      transform: translateY(-10px);
      transition: opacity .24s ease, transform .24s ease !important;
    }

    #settings-overlay-panel .settings-panel-header {
      padding: 12px 12px 8px 16px !important;
      border-bottom: 1px solid rgba(18,25,40,.04) !important;
    }

    #settings-overlay-panel .settings-panel-title {
      font-size: 14px !important;
      font-weight: 750 !important;
    }

    #settings-overlay-panel .settings-panel-close,
    #settings-overlay-panel .settings-panel-back {
      width: 28px !important;
      height: 28px !important;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #98a0b3 !important;
    }

    #settings-overlay-panel .settings-panel-body {
      padding: 0 0 8px !important;
    }

    #settings-overlay-panel .settings-item {
      padding: 12px 16px !important;
    }

    #settings-overlay-panel .settings-item + .settings-item {
      border-top: 1px solid rgba(18,25,40,.04) !important;
    }

    #settings-overlay-panel .settings-item-label {
      font-size: 13px !important;
    }

    #settings-overlay-panel .settings-item-value {
      font-size: 11px !important;
      color: #8e96a8 !important;
    }

    #settings-overlay-panel .settings-item-chevron {
      font-size: 13px !important;
      color: #a0a7b8 !important;
    }

    #settings-overlay-panel .settings-field {
      padding: 12px 16px 0 !important;
    }

    #settings-overlay-panel .settings-select,
    #settings-overlay-panel .settings-textarea {
      border: 1px solid rgba(18,25,40,.05) !important;
      background: rgba(247,249,252,.92) !important;
    }

    #settings-overlay-panel .settings-switch-row {
      padding: 14px 16px !important;
      margin-top: 12px !important;
      border-top: 1px solid rgba(18,25,40,.04) !important;
    }

    #settings-overlay-panel .settings-restore-btn {
      margin: 14px 16px 16px !important;
    }

    #screen-ai .ai-topbar {
      margin-bottom: 14px !important;
      gap: 8px !important;
      /* 单列撑满整条顶栏宽度，避免 nav 靠左、右侧留空导致左右不对称 */
      grid-template-columns: minmax(0, 1fr) !important;
    }

    #screen-ai .ai-header-main {
      gap: 8px !important;
      align-items: center !important;
    }

    #screen-ai .ai-header-icon-group {
      gap: 6px !important;
    }

    #ai-back-button {
      font-size: 12px !important;
      font-weight: 700 !important;
      color: #5d667a !important;
    }

    #ai-current-reading-link {
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      min-height: 30px !important;
      height: 30px !important;
      padding: 0 10px !important;
      background: rgba(255,255,255,.72) !important;
      border: 1px solid rgba(18,25,40,.05) !important;
      box-shadow: none !important;
      border-radius: 999px !important;
      text-align: left !important;
    }

    #screen-ai .ai-pill-label {
      font-size: 10px !important;
      line-height: 1 !important;
      font-weight: 600 !important;
      color: #98a0b3 !important;
      white-space: nowrap !important;
    }

    #ai-current-reading-value {
      max-width: 120px !important;
      font-size: 12px !important;
      line-height: 1 !important;
      font-weight: 600 !important;
      color: #5d667a !important;
    }

    #ai-new-conversation-button {
      width: auto !important;
      min-width: max-content !important;
      height: 28px !important;
      padding: 0 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 999px !important;
      border: 1px solid rgba(18,25,40,.05) !important;
      background: rgba(255,255,255,.56) !important;
      box-shadow: none !important;
      color: #6c7487 !important;
      font-size: 11px !important;
      font-weight: 600 !important;
    }

    #ai-session-settings-button {
      width: 28px !important;
      min-width: 28px !important;
      height: 28px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(18,25,40,.05) !important;
      background: rgba(255,255,255,.56) !important;
      box-shadow: none !important;
      color: #7c8598 !important;
      font-size: 12px !important;
    }

    #floating-ai-menu #ai-session-settings-button {
      width: 40px !important;
      min-width: 40px !important;
      height: 40px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255,255,255,.82) !important;
      background: rgba(255,255,255,.96) !important;
      box-shadow: 0 16px 30px rgba(11,19,38,.14) !important;
      color: var(--accent) !important;
      font-size: 14px !important;
    }

    #screen-ai .ai-top-actions {
      gap: 12px !important;
      padding: 0 2px !important;
    }

    #screen-ai .ai-top-actions .ai-top-link {
      font-size: 11px !important;
      font-weight: 600 !important;
      line-height: 1.1 !important;
      color: #959daf !important;
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      min-height: auto !important;
    }

    #screen-ai .ai-chat {
      padding-top: 8px !important;
    }

    #ai-sidepanel #ai-current-reading-link {
      display: grid !important;
      width: 100% !important;
      min-height: 0 !important;
      height: auto !important;
      padding: 12px 16px !important;
      gap: 4px !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }

    #ai-sidepanel #ai-current-reading-value {
      max-width: none !important;
      font-size: 11px !important;
      line-height: 1.5 !important;
      font-weight: 600 !important;
      color: #8e96a8 !important;
    }

    #ai-sidepanel #ai-new-conversation-button {
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      padding: 12px 16px !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      color: var(--ink) !important;
      text-align: left !important;
      font-size: 13px !important;
      font-weight: 700 !important;
    }

    /* === 顶部导航胶囊（阅读页 / AI 页：返回·首页·记录·回看·回到阅读）=== */
    /* 容器改为横向自适应胶囊排布，窄屏可横滑且隐藏滚动条 */
    /* 容器：等分一行、均匀铺满，无横向滚动、无背景框 */
    /* 用 grid 等分列，保证每个胶囊宽度完全一致、左右对称 */
    .detail-topbar-nav {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      align-items: center;
      gap: 6px !important;
      width: 100%;
      overflow: visible !important;
      padding: 0 !important;
      margin: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .ai-header-main-nav,
    #screen-ai .ai-header-main-nav {
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      align-items: center;
      gap: 5px !important;
      width: 100%;
      overflow: visible !important;
      padding: 0 !important;
      margin: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    /* 胶囊：等分（flex:1），文字居中，过长省略 */
    #screen-detail .nav-pill,
    #screen-ai .nav-pill,
    .nav-pill {
      appearance: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0 !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      min-height: 34px !important;
      height: 34px !important;
      padding: 0 4px !important;
      box-sizing: border-box !important;
      border-radius: 999px !important;
      border: 1px solid rgba(18,25,40,.05) !important;
      background: #ffffff !important;
      color: #2c3346 !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      line-height: 1 !important;
      letter-spacing: -.01em;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      cursor: pointer;
      box-shadow: 0 6px 14px rgba(18,25,40,.10), 0 1px 2px rgba(18,25,40,.06) !important;
      -webkit-tap-highlight-color: transparent;
      transition: transform .14s ease, box-shadow .14s ease;
    }

    #screen-detail .nav-pill:active,
    #screen-ai .nav-pill:active {
      transform: translateY(1px);
      box-shadow: 0 4px 10px rgba(18,25,40,.12) !important;
    }

    /* 默认隐藏所有图标——仅返回键保留箭头（按用户要求只留文字） */
    .nav-pill .nav-pill-ico {
      display: none !important;
    }

    #detail-back-button.nav-pill .nav-pill-ico,
    #ai-back-button.nav-pill .nav-pill-ico {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
      margin-right: 3px;
      color: #58607a;
    }

    .nav-pill .nav-pill-ico svg {
      width: 100%;
      height: 100%;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* 返回按钮文字色统一，覆盖旧 !important */
    #detail-back-button.nav-pill,
    #ai-back-button.nav-pill {
      color: #2c3346 !important;
    }

    /* “回到阅读”按钮：与其余胶囊等宽（flex:1），仅缩小其文字以适配，保证整行左右对称 */
    #screen-ai #ai-current-reading-link.nav-pill {
      width: 100% !important;
      min-width: 0 !important;
      padding: 0 4px !important;
    }

    #screen-ai #ai-current-reading-value {
      min-width: 0;
      max-width: 100%;
      font-size: 12px !important;
      letter-spacing: -.01em;
      line-height: 1 !important;
      font-weight: 700 !important;
      color: #2c3346 !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }