/* Generated by scripts/build_frontend.mjs. Edit files in apps/rag_backend/ui/styles-src/ instead. */

    :root {
      --bg: #f5f5f7;
      --panel: #ffffff;
      --panel-soft: #fafafc;
      --panel-alt: #ededf2;
      --ink: #1d1d1f;
      --ink-strong: #000000;
      --muted: rgba(0, 0, 0, 0.48);
      --fg2: rgba(0, 0, 0, 0.80);
      --fg3: rgba(0, 0, 0, 0.48);
      --fg4: rgba(0, 0, 0, 0.30);
      --line: rgba(0, 0, 0, 0.10);
      --line-soft: rgba(0, 0, 0, 0.06);
      --line-strong: rgba(0, 0, 0, 0.20);
      --accent: #0071e3;
      --accent-hover: #0077ed;
      --accent-active: #006edb;
      --accent-soft: rgba(0, 113, 227, 0.08);
      --accent-ring: rgba(0, 113, 227, 0.24);
      --link-light: #0066cc;
      --link-dark: #2997ff;
      --good: #1a7f4b;
      --good-soft: rgba(26, 127, 75, 0.10);
      --warn: #b45309;
      --warn-soft: rgba(180, 83, 9, 0.10);
      --danger: #c0392b;
      --danger-soft: rgba(192, 57, 43, 0.08);
      --shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px;
      --shadow-card: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px;
      --shadow-pop: rgba(0, 0, 0, 0.30) 0px 20px 60px;
      --shadow-soft: rgba(0, 0, 0, 0.12) 0px 8px 40px;
      --r-micro: 5px;
      --r-sm: 8px;
      --r-md: 11px;
      --r-lg: 12px;
      --r-xl: 16px;
      --r-xxl: 18px;
      --r-pill: 980px;
      --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
      --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      --ease: cubic-bezier(0.4, 0, 0.2, 1);
      --dur-fast: 0.12s;
      --dur-base: 0.15s;
      --dur-slow: 0.3s;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; overflow: hidden; }
    body {
      margin: 0;
      font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 17px;
      line-height: 1.47;
      letter-spacing: -0.374px;
      color: var(--ink);
      background: var(--bg);
    }
    .wrap {
      display: flex;
      height: 100%;
      overflow: hidden;
      max-width: none;
      margin: 0;
      padding: 0;
    }

/* ── Scrollbar — 淺色模式 ── */
.chat-history,
.conversation-panel-body,
.conversation-list,
#retrievalResult,
#detail,
#adminPanel,
.admin-tab-pane,
.admin-json-preview,
.account-session-list,
.account-security-modal,
.governance-popup-body,
.citation-popup-body,
.sidebar-nav,
.main-content,
.page-shell {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.chat-history::-webkit-scrollbar,
.conversation-panel-body::-webkit-scrollbar,
.conversation-list::-webkit-scrollbar,
#retrievalResult::-webkit-scrollbar,
#detail::-webkit-scrollbar,
#adminPanel::-webkit-scrollbar,
.admin-tab-pane::-webkit-scrollbar,
.admin-json-preview::-webkit-scrollbar,
.account-session-list::-webkit-scrollbar,
.account-security-modal::-webkit-scrollbar,
.governance-popup-body::-webkit-scrollbar,
.citation-popup-body::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.page-shell::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.chat-history::-webkit-scrollbar-track,
.conversation-panel-body::-webkit-scrollbar-track,
.conversation-list::-webkit-scrollbar-track,
#retrievalResult::-webkit-scrollbar-track,
#detail::-webkit-scrollbar-track,
#adminPanel::-webkit-scrollbar-track,
.admin-tab-pane::-webkit-scrollbar-track,
.admin-json-preview::-webkit-scrollbar-track,
.account-session-list::-webkit-scrollbar-track,
.account-security-modal::-webkit-scrollbar-track,
.governance-popup-body::-webkit-scrollbar-track,
.citation-popup-body::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track,
.page-shell::-webkit-scrollbar-track {
  background: transparent;
}

.chat-history::-webkit-scrollbar-thumb,
.conversation-panel-body::-webkit-scrollbar-thumb,
.conversation-list::-webkit-scrollbar-thumb,
#retrievalResult::-webkit-scrollbar-thumb,
#detail::-webkit-scrollbar-thumb,
#adminPanel::-webkit-scrollbar-thumb,
.admin-tab-pane::-webkit-scrollbar-thumb,
.admin-json-preview::-webkit-scrollbar-thumb,
.account-session-list::-webkit-scrollbar-thumb,
.account-security-modal::-webkit-scrollbar-thumb,
.governance-popup-body::-webkit-scrollbar-thumb,
.citation-popup-body::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
.page-shell::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 980px;
}

.chat-history::-webkit-scrollbar-thumb:hover,
.conversation-panel-body::-webkit-scrollbar-thumb:hover,
.conversation-list::-webkit-scrollbar-thumb:hover,
#retrievalResult::-webkit-scrollbar-thumb:hover,
#detail::-webkit-scrollbar-thumb:hover,
#adminPanel::-webkit-scrollbar-thumb:hover,
.admin-tab-pane::-webkit-scrollbar-thumb:hover,
.admin-json-preview::-webkit-scrollbar-thumb:hover,
.account-session-list::-webkit-scrollbar-thumb:hover,
.account-security-modal::-webkit-scrollbar-thumb:hover,
.governance-popup-body::-webkit-scrollbar-thumb:hover,
.citation-popup-body::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover,
.page-shell::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
}
    /* ── Sidebar ── */
    .sidebar {
      width: 220px;
      flex-shrink: 0;
      background: #ffffff;
      border-right: 1px solid rgba(0, 0, 0, 0.10);
      display: flex;
      flex-direction: column;
      padding: 28px 12px 20px;
      overflow: hidden;
      transition: width 240ms var(--ease), padding 240ms var(--ease);
    }
    .sidebar-brand-text {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .sidebar-toggle {
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      padding: 0;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      transition: background var(--dur-fast), color var(--dur-fast);
    }
    .sidebar-toggle:hover {
      background: rgba(0, 0, 0, 0.06);
      color: var(--ink);
    }
    .sidebar.is-collapsed {
      width: 52px;
      padding: 20px 8px;
      align-items: center;
    }
    .sidebar.is-collapsed .sidebar-brand {
      margin: 0 0 8px;
      justify-content: center;
    }
    .sidebar.is-collapsed .sidebar-brand-icon,
    .sidebar.is-collapsed .sidebar-brand-text,
    .sidebar.is-collapsed .sidebar-nav,
    .sidebar.is-collapsed .sidebar-footer,
    .sidebar.is-collapsed .sidebar-meta,
    .sidebar.is-collapsed .governance-mini-links {
      display: none;
    }
    .sidebar.is-collapsed .sidebar-toggle {
      margin-left: 0;
      width: 36px;
      height: 36px;
    }
    .sidebar-brand {
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 18px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.28px;
      margin: 0 6px 24px;
    }
    .sidebar-nav {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
    }
    .sidebar-tab {
      display: flex;
      align-items: center;
      padding: 9px 12px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--ink);
      font-size: 15px;
      font-family: inherit;
      letter-spacing: -0.374px;
      cursor: pointer;
      text-align: left;
      font-weight: 400;
      transition: background 0.12s, color 0.12s;
    }
    .sidebar-tab:hover { background: rgba(0, 0, 0, 0.04); color: var(--ink); }
    .sidebar-tab:focus-visible,
    .mobile-nav-tab:focus-visible,
    .hero-reveal-btn:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .sidebar-tab.active {
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 600;
    }
    .sidebar-meta {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding-top: 14px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    .sidebar-meta .pill {
      font-size: 11px;
      padding: 3px 8px;
      line-height: 1.5;
      background: #f5f5f7;
    }
    /* ── Main content ── */
    .main-content {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      background: var(--bg);
      padding: 20px;
      display: flex;
      flex-direction: column;
    }
    .skip-link {
      position: absolute;
      left: 16px;
      top: -48px;
      z-index: 2000;
      padding: 10px 14px;
      border-radius: 10px;
      background: var(--accent);
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      transition: top var(--dur-fast) var(--ease);
    }
    .skip-link:focus {
      top: 16px;
    }
    .page-shell {
      --hero-progress: 0;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .mobile-topbar {
      display: none;
    }
    .mobile-topbar-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .mobile-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .mobile-brand-copy {
      display: grid;
      min-width: 0;
    }
    .mobile-brand-copy strong {
      font-family: var(--font-display);
      font-size: 15px;
      line-height: 1.2;
    }
    .mobile-brand-copy span {
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mobile-topbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .mobile-action-btn {
      width: auto;
      min-width: 44px;
      padding: 9px 12px;
      text-align: center;
    }
    .mobile-nav {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: none;
    }
    .mobile-nav::-webkit-scrollbar {
      display: none;
    }
    .mobile-nav-tab {
      flex: 0 0 auto;
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.8);
      color: var(--ink);
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }
    .mobile-nav-tab.active {
      background: var(--accent);
      color: #fff;
      border-color: transparent;
    }
    .hero-reveal-btn {
      position: fixed;
      top: 18px;
      right: 20px;
      z-index: 1200;
      width: 28px;
      height: 28px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: rgba(255, 255, 255, 0.92);
      color: var(--ink);
      font-size: 16px;
      line-height: 28px;
      text-align: center;
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(12px);
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
      transition: opacity 160ms var(--ease), transform 160ms var(--ease);
    }
    .page-shell.is-hero-hidden .hero-reveal-btn {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .page-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
      gap: 18px;
      padding: 28px 32px;
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: var(--shadow-soft);
      transform-origin: top center;
      opacity: calc(1 - (var(--hero-progress) * 0.34));
      transform: translateY(calc(var(--hero-progress) * -14px)) scale(calc(1 - (var(--hero-progress) * 0.028)));
      gap: calc(18px - (var(--hero-progress) * 8px));
      padding:
        calc(28px - (var(--hero-progress) * 12px))
        calc(32px - (var(--hero-progress) * 10px));
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.82), transparent 42%),
        linear-gradient(135deg, rgba(0, 113, 227, 0.14), rgba(255, 255, 255, 0.94));
      transition:
        max-height 180ms var(--ease),
        margin 180ms var(--ease),
        border-width 180ms var(--ease),
        opacity 180ms var(--ease),
        transform 180ms var(--ease),
        padding 180ms var(--ease),
        gap 180ms var(--ease);
      max-height: 420px;
      overflow: clip;
    }
    body[data-page="data"] .page-hero {
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.78), transparent 40%),
        linear-gradient(135deg, rgba(5, 150, 105, 0.12), rgba(255, 255, 255, 0.94));
    }
    body[data-page="admin"] .page-hero {
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.8), transparent 42%),
        linear-gradient(135deg, rgba(180, 83, 9, 0.12), rgba(255, 255, 255, 0.94));
    }
    .page-hero-copy {
      display: grid;
      gap: 12px;
      align-content: start;
    }
    .page-eyebrow {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .page-summary {
      max-width: 760px;
      font-size: 16px;
      line-height: 1.7;
      color: var(--fg2);
      max-height: calc(140px * (1 - (var(--hero-progress) * 0.9)));
      opacity: calc(1 - (var(--hero-progress) * 1.1));
      overflow: hidden;
      transition: opacity 180ms var(--ease), max-height 180ms var(--ease);
    }
    .page-hero-meta {
      display: grid;
      gap: 12px;
      align-content: start;
      max-height: calc(280px * (1 - var(--hero-progress)));
      opacity: calc(1 - (var(--hero-progress) * 1.25));
      overflow: hidden;
      transition: opacity 180ms var(--ease), max-height 180ms var(--ease);
    }
    .page-stat-card {
      display: grid;
      gap: 6px;
      padding: 18px 20px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.76);
      border: 1px solid rgba(255, 255, 255, 0.82);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      backdrop-filter: blur(12px);
    }
    .page-stat-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .page-stat-value {
      font-family: var(--font-display);
      font-size: 19px;
      line-height: 1.25;
      color: var(--ink);
    }
    .page-stat-card p {
      font-size: 14px;
      line-height: 1.6;
      color: var(--fg2);
    }
    .page-shell.is-hero-collapsed .page-hero {
      box-shadow: rgba(0, 0, 0, 0.10) 0px 8px 24px;
    }
    .page-hero {
      transition:
        max-height 480ms var(--ease),
        opacity 400ms var(--ease),
        transform 400ms var(--ease),
        padding 480ms var(--ease),
        margin 480ms var(--ease),
        border-width 480ms var(--ease),
        gap 480ms var(--ease);
    }
    .page-shell.is-hero-hidden .page-hero {
      max-height: 0;
      opacity: 0;
      transform: translateY(-24px) scale(0.98);
      padding-top: 0;
      padding-bottom: 0;
      margin: 0;
      border-width: 0;
      gap: 0;
      pointer-events: none;
      box-shadow: none;
    }
    .panel {
      background: var(--panel);
      border-radius: 12px;
      box-shadow: var(--shadow);
    }
    h1 {
      margin: 0 0 8px;
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 34px;
      font-weight: 600;
      line-height: 1.07;
      letter-spacing: -0.28px;
    }
    p {
      margin: 0;
      color: rgba(0, 0, 0, 0.8);
      line-height: 1.47;
      letter-spacing: -0.374px;
    }
    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }
    .pill {
      padding: 6px 14px;
      border-radius: 980px;
      background: #f5f5f7;
      font-size: 13px;
      color: rgba(0, 0, 0, 0.8);
      letter-spacing: -0.12px;
    }
    .stack {
      display: grid;
      gap: 18px;
    }
    .panel {
      padding: 20px 24px;
    }
    .panel.primary {
      background: #ffffff;
    }
    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .section-title-flush {
      flex-shrink: 0;
      margin-bottom: 0;
    }
    .section-title-tight {
      margin-bottom: 10px;
    }
    .inline-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .compact-control {
      padding: 6px 12px;
      font-size: 13px;
    }
    .status-row {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 8px;
    }
    .dev-subtitle {
      margin-top: 8px;
    }
    h2 {
      margin: 0;
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 21px;
      font-weight: 600;
      line-height: 1.19;
      letter-spacing: 0.231px;
    }
    .subtitle {
      margin-bottom: 16px;
      font-size: 14px;
      color: var(--muted);
      letter-spacing: -0.224px;
    }
    .status {
      color: var(--good);
      font-weight: 600;
      font-size: 13px;
    }
    .controls {
      display: grid;
      gap: 12px;
      margin-bottom: 16px;
    }
    .control-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .control-grid.compact {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .field {
      display: grid;
      gap: 6px;
    }
    .field label {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
      letter-spacing: -0.12px;
    }
    .row {
      display: flex;
      gap: 10px;
    }
    input, select, button, textarea {
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 11px;
      font: inherit;
      letter-spacing: -0.374px;
    }
    input, select, textarea {
      width: 100%;
      padding: 10px 14px;
      background: #fafafc;
      color: var(--ink);
    }
    input:focus, select:focus, textarea:focus {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
      border-color: transparent;
    }
    textarea {
      resize: vertical;
      min-height: 132px;
      line-height: 1.7;
    }
    button {
      padding: 8px 15px;
      background: var(--accent);
      color: #fff;
      cursor: pointer;
      font-weight: 400;
      border-color: transparent;
      border-radius: 8px;
    }
    button:hover { background: var(--accent-hover); }
    button:active { background: var(--accent-active); }
    button.secondary {
      background: #f5f5f7;
      color: var(--ink);
      border-color: rgba(0, 0, 0, 0.12);
    }
    button.secondary:hover { background: #ededf2; }
    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .card-list, .detail-list {
      display: grid;
      gap: 12px;
    }
    @media (max-width: 1100px) {
      .page-hero {
        grid-template-columns: 1fr;
        padding: 24px;
      }
      .page-summary {
        max-width: none;
      }
    }
    @media (max-width: 760px) {
      html, body {
        overflow: auto;
        overflow-x: hidden;
      }
      .sidebar {
        display: none;
      }
      .wrap {
        display: block;
        height: auto;
        min-height: 100%;
      }
      .main-content {
        overflow: visible;
        min-height: 100dvh;
        padding: 12px;
        padding-top: calc(68px + env(safe-area-inset-top));
      }
      .mobile-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        display: grid;
        gap: 0;
        padding: max(8px, calc(env(safe-area-inset-top) + 6px)) 12px 8px;
        border-radius: 0 0 14px 14px;
        background: var(--panel);
        box-shadow: var(--shadow-soft);
      }
      .mobile-brand-copy span {
        display: none;
      }
      .mobile-nav {
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        overflow-x: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        visibility: hidden;
        transition: max-height 240ms cubic-bezier(0.4, 0, 0.2, 1),
                    margin-top 200ms cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
                    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 240ms;
        margin-top: 0;
      }
      .mobile-topbar.is-nav-open .mobile-nav {
        display: flex;
        max-height: 480px;
        margin-top: 10px;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
        transition-delay: 0s;
      }
      .mobile-nav-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-top: 1px solid var(--line);
        padding: 6px 0 8px;
      }
      .mobile-action-btn {
        height: 40px;
        min-width: 40px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
      }
      .mobile-nav-tab {
        width: 100%;
        flex: 0 0 auto;
        min-height: 48px;
        padding: 12px 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--line);
        background: transparent;
        font-size: 15px;
        text-align: left;
        white-space: normal;
      }
      .mobile-nav-tab.active {
        box-shadow: inset 4px 0 0 var(--accent);
        color: var(--accent);
      }
      .mobile-nav-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-top: 1px solid var(--line);
        margin-top: 4px;
      }
      .mobile-nav-link {
        width: 100%;
        min-height: 44px;
        padding: 12px 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--line);
        background: transparent;
        font-size: 13px;
        color: var(--muted);
        text-align: left;
      }
      .mobile-nav-link + .mobile-nav-link {
        border-left: none;
      }
      .page-shell {
        gap: 12px;
      }
      .hero-reveal-btn {
        display: none;
      }
      .page-hero {
        padding: 18px 16px;
        border-radius: 16px;
      }
      h1 {
        font-size: 26px;
      }
      .page-summary {
        font-size: 14px;
      }
      .page-hero-meta {
        grid-template-columns: 1fr;
      }
      .panel {
        padding: 14px 16px;
      }
      .control-grid {
        grid-template-columns: 1fr;
      }
      .control-grid.compact {
        grid-template-columns: 1fr;
      }
    }
    /* 內容細節捲動區 */
    #detail {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }
    .panel.primary {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      padding-bottom: 0;
    }
    .chat-history {
      flex: 1;
      overflow-y: auto;
      padding: 4px 6px 12px 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      scroll-behavior: smooth;
    }
    .conversation-panel {
      flex-shrink: 0;
      margin: 0 0 14px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel-soft);
      overflow: hidden;
    }
    .conversation-panel.is-open {
      display: flex;
      flex-direction: column;
    }
    .conversation-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 10px;
      cursor: pointer;
      outline: none;
    }
    .conversation-panel-header:focus-visible {
      box-shadow: 0 0 0 3px var(--accent-ring);
      border-radius: 10px;
    }
    .conversation-panel-header h3::after {
      content: '▾';
      display: inline-block;
      margin-left: 8px;
      color: var(--muted);
      font-size: 12px;
      transform: rotate(-90deg);
      transition: transform var(--dur-base);
    }
    .conversation-panel-header.open h3::after {
      transform: rotate(0deg);
    }
    .conversation-panel-body {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 300ms var(--ease), opacity 200ms var(--ease);
      overscroll-behavior: contain;
      padding-right: 2px;
    }
    .conversation-panel.is-open .conversation-panel-body {
      max-height: 310px;
      overflow-y: auto;
      opacity: 1;
    }
    .conversation-panel-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .conversation-panel-actions .secondary {
      padding: 6px 10px;
      font-size: 13px;
      line-height: 1.2;
    }
    .conversation-panel-actions .icon-button {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-size: 16px;
      font-weight: 700;
    }
    .conversation-panel-header h3 {
      margin: 0;
      font-size: 15px;
      line-height: 1.35;
      letter-spacing: -0.224px;
    }
    .conversation-panel-header p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
      letter-spacing: -0.12px;
    }
    .conversation-list {
      display: grid;
      gap: 6px;
    }
    .conversation-list .empty {
      font-size: 13px;
      padding: 10px 12px;
    }
    .conv-item {
      display: block;
      width: 100%;
      text-align: left;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--line-soft);
      background: var(--panel);
      cursor: pointer;
      transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
      font-family: inherit;
    }
    .conv-item:hover {
      background: var(--panel-alt);
    }
    .conv-item.active {
      border-color: var(--accent-ring);
      background: var(--accent-soft);
      box-shadow: inset 0 0 0 1px var(--accent-ring);
    }
    .conv-item-title {
      color: var(--ink);
      font-size: 13px;
      letter-spacing: -0.12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .conv-item.active .conv-item-title {
      color: var(--accent);
      font-weight: 600;
    }
    .conv-item-date {
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
    }
    .chat-input-area {
      flex-shrink: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      padding: 14px 24px 20px;
      margin: 0 -24px -0px;
      background: #ffffff;
      border-radius: 0 0 12px 12px;
    }
    .chat-input-area .advanced-panel {
      margin-bottom: 10px;
    }
    .chat-input-area .advanced-toggle {
      margin-bottom: 8px;
    }
    .chat-input-area .ask-filters {
      margin-bottom: 10px;
    }
    /* 打字機游標 */
    .typing-cursor {
      display: inline-block;
      width: 2px;
      height: 1em;
      background: var(--accent);
      margin-left: 2px;
      vertical-align: text-bottom;
      animation: cursor-blink 0.7s steps(1) infinite;
    }
    @keyframes cursor-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .doc-list {
      display: grid;
      gap: 8px;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding-right: 4px;
    }
    .doc-item, .chat-card, .result-card, .detail-card {
      border: none;
      border-radius: 8px;
      padding: 14px 16px;
      background: #f5f5f7;
    }
    .doc-item {
      cursor: pointer;
      transition: background 0.1s;
    }
    .doc-item:hover { background: #ededf2; }
    .doc-item.active {
      background: rgba(0, 113, 227, 0.08);
      box-shadow: inset 0 0 0 1.5px var(--accent);
    }
    .doc-item h3, .detail-card h3, .result-card h3 {
      margin: 0 0 8px;
      font-size: 15px;
      line-height: 1.45;
      letter-spacing: -0.224px;
    }
    .detail-card h3 {
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 21px;
      letter-spacing: 0.231px;
    }
    .sub, .mini {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: -0.12px;
    }
    .mini {
      margin-top: 8px;
    }
    .chat-card.user {
      background: #f5f5f7;
    }
    .chat-card.assistant {
      background: #ffffff;
      box-shadow: var(--shadow);
    }
    .chat-meta, .result-meta, .chunk-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: -0.12px;
    }
    .answer-text, .chunk-text, .excerpt {
      white-space: pre-wrap;
      word-break: break-word;
      line-height: 1.72;
      letter-spacing: -0.374px;
    }
    .markdown {
      line-height: 1.75;
      letter-spacing: -0.374px;
    }
    .markdown h1, .markdown h2, .markdown h3, .markdown h4 {
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin: 0 0 10px;
      line-height: 1.14;
    }
    .markdown h1 { font-size: 24px; letter-spacing: -0.28px; }
    .markdown h2 { font-size: 21px; letter-spacing: 0.231px; }
    .markdown h3 { font-size: 17px; letter-spacing: -0.374px; }
    .markdown h4 { font-size: 15px; letter-spacing: -0.224px; }
    .markdown p {
      margin: 0 0 12px;
      color: var(--ink);
    }
    .markdown ul, .markdown ol {
      margin: 0 0 12px 20px;
      padding: 0;
    }
    .markdown li {
      margin-bottom: 6px;
    }
    .markdown code {
      padding: 2px 6px;
      border-radius: 5px;
      background: #f5f5f7;
      color: var(--ink);
      font-size: 14px;
    }
    .markdown pre {
      margin: 0 0 12px;
      padding: 14px 16px;
      border-radius: 8px;
      background: #f5f5f7;
      overflow: auto;
      white-space: pre-wrap;
    }
    .markdown pre code {
      padding: 0;
      background: transparent;
    }
    .markdown hr {
      border: none;
      border-top: 1px solid var(--line);
      margin: 12px 0;
    }
    .markdown blockquote {
      margin: 0 0 12px;
      padding: 8px 0 8px 12px;
      border-left: 3px solid rgba(0, 0, 0, 0.12);
      color: var(--muted);
    }
    .md-table-wrap {
      overflow-x: auto;
      margin: 8px 0 12px;
    }
    .md-table {
      border-collapse: collapse;
      width: 100%;
      font-size: 14px;
      line-height: 1.5;
    }
    .md-table th, .md-table td {
      border: 1px solid var(--line);
      padding: 7px 12px;
      text-align: left;
      vertical-align: top;
    }
    .md-table th {
      background: var(--panel-soft);
      font-weight: 600;
      white-space: nowrap;
    }
    .md-table tbody tr:nth-child(even) td {
      background: rgba(0, 0, 0, 0.018);
    }
    .citation-list, .result-list, .judgment-links {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }
    .citation, .chunk {
      border-radius: 8px;
      padding: 12px 14px;
      background: #f5f5f7;
    }
    .kv {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }
    .kv div {
      border-radius: 8px;
      padding: 10px 12px;
      background: #f5f5f7;
    }
    .kv strong {
      display: block;
      margin-bottom: 4px;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: -0.12px;
    }
    .empty, .note {
      padding: 16px;
      border-radius: 8px;
      color: var(--muted);
      background: #f5f5f7;
      line-height: 1.65;
      letter-spacing: -0.224px;
    }
    .note {
      font-size: 14px;
    }
    .score {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 9px;
      border-radius: 980px;
      background: var(--accent-soft);
      color: var(--accent);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: -0.12px;
    }
    .reason {
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 8px;
      background: #f5f5f7;
      color: rgba(0, 0, 0, 0.8);
      font-size: 13px;
      line-height: 1.6;
      letter-spacing: -0.12px;
    }
    .reason strong {
      color: var(--ink);
    }
    .citation-mark {
      cursor: help;
      color: var(--accent);
      font-weight: 600;
      border-bottom: 1px dotted rgba(0, 113, 227, 0.5);
    }
    .external-link {
      color: #0066cc;
      text-decoration: none;
      font-weight: 600;
      letter-spacing: -0.224px;
    }
    .external-link:hover {
      text-decoration: underline;
    }
    code {
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    }
    /* 問題輸入區 */
    .ask-bar {
      display: flex;
      gap: 10px;
      align-items: stretch;
      margin-bottom: 14px;
    }
    .ask-bar textarea {
      flex: 1;
      min-height: 80px;
      max-height: 220px;
      resize: none;
      overflow-y: auto;
      line-height: 1.65;
      font-size: 15px;
    }
    .ask-bar textarea:disabled {
      cursor: not-allowed;
      background: var(--panel-alt);
      color: var(--muted);
    }
    .ask-bar-send {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex-shrink: 0;
      width: 120px;
    }
    .ask-bar-send button {
      width: 100%;
      flex: 1;
    }
    .ask-filters {
      display: flex;
      gap: 10px;
      margin-bottom: 14px;
      flex-wrap: wrap;
      align-items: center;
    }
    .ask-filters select {
      width: auto;
      min-width: 180px;
    }
    .ask-filters .filter-label {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
      letter-spacing: -0.12px;
    }
    /* 進階設定收合 */
    .advanced-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--muted);
      cursor: pointer;
      user-select: none;
      margin-bottom: 10px;
      letter-spacing: -0.224px;
    }
    .advanced-toggle:hover { color: var(--accent); }
    .advanced-toggle::before {
      content: '▶';
      display: inline-block;
      transition: transform 0.15s;
      font-size: 10px;
    }
    .advanced-toggle.open::before { transform: rotate(90deg); }
    .advanced-panel {
      display: none;
      padding: 14px 16px;
      border-radius: 8px;
      background: #f5f5f7;
      margin-bottom: 14px;
    }
    .advanced-panel.open { display: block; }
    .chat-newtopic-tip {
      margin: 8px 0 4px;
      padding: 8px 14px;
      border-radius: 8px;
      background: #fff8e7;
      border: 1px solid #ffe08a;
      color: #7a5c00;
      font-size: 13px;
      line-height: 1.5;
    }
    /* RAG 工具區收合 */
    .dev-section summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--muted);
      padding: 8px 0 4px;
      user-select: none;
      letter-spacing: -0.224px;
    }
    .dev-section summary:hover { color: var(--accent); }
    .dev-section summary::before {
      content: '▶';
      font-size: 11px;
      transition: transform 0.2s var(--ease);
    }
    .dev-section[open] summary::before { transform: rotate(90deg); }
    .dev-section summary h2 {
      font-size: 15px;
      color: var(--muted);
      font-weight: 600;
    }
    .dev-section-body {
      overflow: hidden;
      max-height: 0;
      transition: max-height 300ms var(--ease);
    }
    .dev-section[open] .dev-section-body {
      max-height: 800px;
    }
    .dev-query-field {
      margin: 10px 0 6px;
    }
    #retrievalResult {
      max-height: 320px;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    @media (max-width: 760px) {
      .chat-history {
        padding: 4px 0 8px;
      }
      .chat-input-area {
        position: sticky;
        bottom: 0;
        margin: 0 -16px;
        border-radius: 0;
        padding: 10px 16px;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
        z-index: 10;
      }
      .ask-bar {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 0;
      }
      .ask-bar textarea {
        min-height: 52px;
        max-height: 130px;
      }
      .ask-bar-send {
        width: 100%;
        flex-direction: row;
        gap: 8px;
      }
      .ask-bar-send button {
        flex: 1;
        min-height: 44px;
      }
      .ask-filters {
        flex-direction: column;
        gap: 6px;
        margin-bottom: 10px;
      }
      .ask-filters select {
        width: 100%;
        min-width: 0;
      }
      .ask-filters .filter-label {
        display: none;
      }
      .conversation-panel-actions .icon-button {
        width: 44px;
        height: 44px;
      }
      .kv {
        grid-template-columns: 1fr;
      }
    }
    /* 分頁切換：預設顯示 main，資料總覽時顯示 aside */
    .layout {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .layout main {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .layout aside {
      display: none;
    }
    .layout.show-data main {
      display: none;
    }
    /* 資料總覽全頁：兩欄並排，撐滿高度 */
    .layout.show-data aside {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 18px;
      align-items: stretch;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    /* 資料總覽的兩個 panel 各自內部捲動 */
    .layout.show-data aside > .panel {
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }
    /* 載入中動畫 */
    .thinking-card {
      border: none;
      border-radius: 8px;
      padding: 20px 24px;
      background: #ffffff;
      box-shadow: var(--shadow);
    }
    .thinking-label {
      font-size: 14px;
      color: var(--muted);
      letter-spacing: -0.224px;
      margin-bottom: 12px;
    }
    .thinking-label span {
      color: var(--accent);
      font-weight: 600;
    }
    .thinking-dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .thinking-dots i {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      opacity: 0.3;
      animation: dot-pulse 1.4s ease-in-out infinite;
    }
    .thinking-dots i:nth-child(2) { animation-delay: 0.2s; }
    .thinking-dots i:nth-child(3) { animation-delay: 0.4s; }
    @keyframes dot-pulse {
      0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
      40% { opacity: 1; transform: scale(1.3); }
    }
    .thinking-steps {
      margin-top: 14px;
      display: grid;
      gap: 6px;
    }
    .thinking-step {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--muted);
      letter-spacing: -0.12px;
    }
    .thinking-step.done { color: var(--good); }
    .thinking-step.active { color: var(--ink); font-weight: 600; }
    .thinking-step::before {
      content: '○';
      font-size: 11px;
      flex-shrink: 0;
    }
    .thinking-step.done::before { content: '✓'; }
    .thinking-step.active::before { content: '●'; color: var(--accent); }
    .thinking-cancel-row {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
    }
    .thinking-cancel-btn {
      background: transparent;
      border: 1px solid rgba(0,0,0,0.14);
      border-radius: 6px;
      padding: 4px 12px;
      font-size: 12px;
      color: var(--muted);
      cursor: pointer;
      letter-spacing: -0.12px;
      transition: background 0.1s, color 0.1s;
    }
    .thinking-cancel-btn:hover { background: #f5f5f7; color: var(--ink); }
    .typing-skip-hint {
      margin-top: 8px;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: -0.12px;
      opacity: 0.6;
    }
    /* Citation popup */
    .citation-popup-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(3px);
    }
    .citation-popup-overlay.open { display: flex; }
    .citation-popup {
      background: #ffffff;
      border-radius: 12px;
      padding: 24px 28px;
      max-width: 620px;
      width: calc(100% - 32px);
      max-height: 72vh;
      overflow-y: auto;
      box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 60px;
    }
    .citation-popup-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 6px;
    }
    .citation-popup-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--accent);
      letter-spacing: -0.12px;
    }
    .citation-popup-close {
      background: #f5f5f7;
      border: none;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      padding: 0;
      cursor: pointer;
      font-size: 14px;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .citation-popup-close:hover { background: #ededf2; color: var(--ink); }
    .citation-popup-title {
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 17px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 14px;
      letter-spacing: -0.374px;
      line-height: 1.35;
    }
    .citation-popup-body {
      font-size: 15px;
      line-height: 1.75;
      color: var(--ink);
      white-space: pre-wrap;
      word-break: break-word;
      letter-spacing: -0.374px;
    }
    /* Expandable citation excerpt */
    .citation-excerpt {
      display: none;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      font-size: 14px;
      line-height: 1.65;
      color: rgba(0, 0, 0, 0.8);
      white-space: pre-wrap;
      word-break: break-word;
      letter-spacing: -0.224px;
    }
    .citation-excerpt.open { display: block; }
    .citation-toggle {
      display: inline-block;
      margin-top: 8px;
      font-size: 13px;
      color: var(--accent);
      cursor: pointer;
      letter-spacing: -0.224px;
      user-select: none;
    }
    .citation-toggle:hover { text-decoration: underline; }
    @media (max-width: 760px) {
      /* RAG 內容總覽篩選列：合併成一行 */
      .controls {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
        margin-bottom: 12px;
      }
      .controls .row {
        display: contents;
      }
      #searchInput {
        flex: 2;
        min-width: 0;
      }
      #typeFilter {
        flex: 1;
        min-width: 0;
      }
      #clearButton {
        flex-shrink: 0;
        white-space: nowrap;
      }
      #docCount {
        display: none;
      }
      .citation-popup-overlay {
        align-items: center;
      }
      .citation-popup {
        width: calc(100% - 40px);
        max-width: 420px;
        max-height: 80vh;
        border-radius: 16px;
        margin: 0;
        padding: 20px;
      }
      .citation-popup-close {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        flex-shrink: 0;
      }
    }
    /* ── Sidebar footer ── */
    .sidebar-footer {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-top: 14px;
      border-top: 1px solid rgba(0,0,0,0.08);
      margin-top: auto;
    }
    .sidebar-user {
      font-size: 12px;
      color: var(--muted);
      padding: 0 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sidebar-logout-btn {
      width: 100%;
      padding: 7px 12px;
      font-size: 13px;
      font-family: inherit;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 8px;
      cursor: pointer;
      color: var(--muted);
      text-align: left;
      transition: background 0.12s;
    }
    .sidebar-logout-btn:hover { background: rgba(0,0,0,0.04); color: var(--ink); }
    /* ── Hide sidebar on auth page ── */
    body[data-page="auth"] .sidebar { display: none !important; }
    body[data-page="auth"] .main-content {
      flex: 1;
      padding: 0;
      overflow: hidden;
    }
    body[data-page="auth"] .wrap { overflow: hidden; }

    /* ── Auth panel: full-page split layout ── */
    .auth-panel {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      flex: 1;
      overflow: hidden;
      background: #0a0806;
    }

    /* ── Left hero panel ── */
    .auth-hero {
      flex: 1;
      min-width: 0;
      background-image:
        linear-gradient(rgba(200, 155, 60, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 155, 60, 0.07) 1px, transparent 1px);
      background-size: 40px 40px;
      display: flex;
      align-items: center;
      padding: 64px;
      position: relative;
      overflow: hidden;
    }
    /* Scanline sweep */
    .auth-hero::before {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 200px;
      background: linear-gradient(to bottom, transparent, rgba(200, 155, 60, 0.055) 50%, transparent);
      animation: auth-scanline 7s linear infinite;
      pointer-events: none;
      z-index: 0;
    }
    @keyframes auth-scanline {
      0%   { transform: translateY(-200px); }
      100% { transform: translateY(100vh); }
    }
    /* Mouse radial gradient */
    .auth-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(200, 155, 60, 0.09), transparent 65%);
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      transition: opacity 0.4s;
    }
    .auth-hero.js-mouse-active::after { opacity: 1; }
    .auth-hero-inner {
      max-width: 480px;
      width: 100%;
      position: relative;
      z-index: 1;
    }

    /* ── Demo chat (background decoration) ── */
    .auth-demo {
      position: absolute;
      bottom: 220px;
      right: 48px;
      width: 640px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      opacity: 0.28;
      pointer-events: none;
      z-index: 0;
    }
    .auth-demo .auth-demo-bubble {
      font-size: 25px;
      padding: 18px 26px;
      min-height: 72px;
    }
    .auth-demo .auth-demo-avatar {
      width: 52px;
      height: 52px;
      min-width: 52px;
      font-size: 24px;
      margin-top: 6px;
    }
    .auth-demo .auth-demo-caret {
      width: 4px;
      height: 26px;
    }
    .auth-demo-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .auth-demo-row--user { justify-content: flex-end; }
    .auth-demo-bubble {
      font-size: 12.5px;
      line-height: 1.6;
      padding: 9px 13px;
      min-height: 36px;
      max-width: 84%;
      word-break: break-all;
    }
    .auth-demo-bubble--user {
      background: rgba(200, 155, 60, 0.1);
      border: 1px solid rgba(200, 155, 60, 0.18);
      border-radius: 14px 14px 4px 14px;
      color: rgba(240, 235, 227, 0.72);
    }
    .auth-demo-bubble--ai {
      background: rgba(255, 240, 210, 0.03);
      border: 1px solid rgba(255, 240, 210, 0.07);
      border-radius: 4px 14px 14px 14px;
      color: rgba(240, 235, 227, 0.6);
    }
    .auth-demo-avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      min-width: 26px;
      background: rgba(200, 155, 60, 0.15);
      border-radius: 50%;
      font-size: 12px;
      color: #c89b3c;
      margin-top: 3px;
    }
    .auth-demo-caret {
      display: inline-block;
      width: 2px;
      height: 13px;
      background: #c89b3c;
      margin-left: 2px;
      vertical-align: middle;
      border-radius: 1px;
      animation: auth-caret-blink 0.75s step-end infinite;
    }
    .auth-demo-caret.hidden { display: none; }
    @keyframes auth-caret-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .auth-hero-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 32px;
    }
    .auth-hero-logo-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      background: #c89b3c;
      border-radius: 10px;
      color: #0a0806;
      flex-shrink: 0;
    }
    .auth-hero-logo-name {
      font-size: 17px;
      font-weight: 700;
      color: #f0ebe3;
      letter-spacing: -0.3px;
    }
    .auth-hero-logo-name--lg { font-size: x-large; }
    .auth-hero-logo-sub {
      font-size: 10px;
      font-weight: 600;
      color: rgba(200, 155, 60, 0.65);
      letter-spacing: 1.8px;
      margin-top: 2px;
    }
    .auth-hero-badge {
      display: inline-flex;
      align-items: center;
      padding: 5px 14px;
      border: 1px solid rgba(200, 155, 60, 0.3);
      border-radius: 980px;
      font-size: 12px;
      color: rgba(240, 235, 227, 0.6);
      margin-bottom: 32px;
    }
    .auth-hero-headline {
      font-size: clamp(34px, 3.6vw, 52px);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -1.5px;
      color: #f0ebe3;
      margin: 0 0 20px;
    }
    .auth-hero-accent { color: #c89b3c; }
    .auth-hero-desc {
      font-size: 15px;
      line-height: 1.75;
      color: rgba(240, 235, 227, 0.5);
      margin: 0 0 40px;
      white-space: nowrap;
    }
    .auth-hero-features {
      list-style: none;
      margin: 0 0 44px;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .auth-hero-feat {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 14px;
      color: rgba(240, 235, 227, 0.75);
    }
    .auth-hero-feat-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      min-width: 34px;
      background: rgba(200, 155, 60, 0.14);
      border-radius: 8px;
      font-size: 15px;
      color: #c89b3c;
    }
    .auth-hero-quote {
      margin: 0;
      padding: 0;
      border: none;
      font-size: 13px;
      font-style: italic;
      color: rgba(240, 235, 227, 0.3);
      line-height: 1.65;
    }
    .auth-hero-quote cite {
      display: block;
      margin-top: 6px;
      font-style: normal;
      font-size: 12px;
      color: rgba(240, 235, 227, 0.2);
    }

    /* ── Right form panel (always dark) ── */
    .auth-box {
      flex: 1;
      max-width: 50%;
      background: rgba(15, 13, 11, 0.02);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-left: 1px solid rgba(255, 240, 210, 0.07);
      padding: 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow-y: auto;
    }
    .auth-box > * {
      width: 100%;
      max-width: 360px;
    }
    .auth-brand {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.5px;
      margin-bottom: 6px;
      color: #f0ebe3;
    }
    .auth-subtitle {
      font-size: 14px;
      color: rgba(240, 235, 227, 0.45);
      margin: 0 0 32px;
    }
    .auth-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 28px;
      background: #1e1a16;
      border-radius: 10px;
      padding: 4px;
    }
    .auth-tabs--hidden { display: none; }
    .auth-tab {
      flex: 1;
      padding: 9px;
      border: none;
      background: transparent;
      border-radius: 8px;
      font-size: 14px;
      font-family: inherit;
      font-weight: 500;
      cursor: pointer;
      color: rgba(240, 235, 227, 0.45);
      transition: background 0.15s, color 0.15s;
    }
    .auth-tab.active {
      background: rgba(200, 155, 60, 0.16);
      color: #c89b3c;
    }
    /* Input overrides for always-dark auth box */
    .auth-box label {
      color: rgba(240, 235, 227, 0.6) !important;
    }
    .auth-box input {
      background: #1a1612 !important;
      color: #f0ebe3 !important;
      border-color: rgba(255, 240, 210, 0.1) !important;
      border-radius: 10px;
    }
    .auth-box input::placeholder {
      color: rgba(240, 235, 227, 0.25) !important;
    }
    .auth-box input:focus {
      outline: none !important;
      border-color: rgba(200, 155, 60, 0.5) !important;
      box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.12) !important;
    }
    .auth-error {
      min-height: 18px;
      margin-top: 10px;
    }
    .auth-error:empty { display: block; }
    .auth-error .panel-state,
    .admin-login-error .panel-state {
      margin-top: 0;
    }
    .auth-box .field {
      margin-bottom: 16px;
    }
    .auth-box .field:last-of-type {
      margin-bottom: 0;
    }
    .auth-submit-btn {
      width: 100%;
      margin-top: 24px;
      padding: 14px;
      font-size: 15px;
      font-family: inherit;
      background: linear-gradient(135deg, #c89b3c 0%, #a07830 100%);
      color: #0d0b09;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 700;
      box-shadow: 0 4px 20px rgba(200, 155, 60, 0.28);
      transition: background 0.15s, opacity 0.15s;
    }
    .auth-submit-btn:hover {
      background: linear-gradient(135deg, #d4a842 0%, #b08a38 100%);
    }
    .auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .auth-governance-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 28px;
    }
    .auth-governance-links span {
      color: rgba(240, 235, 227, 0.2);
      font-size: 12px;
    }
    .auth-governance-links button {
      background: none;
      border: none;
      padding: 0;
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
      color: rgba(200, 155, 60, 0.55);
      transition: color 0.15s;
    }
    .auth-governance-links button:hover {
      background: none;
      color: #c89b3c;
    }
    .field-hint { font-weight: 400; color: rgba(240, 235, 227, 0.35); font-size: 12px; }

    /* ── Responsive: tablet ── */
    @media (max-width: 860px) and (min-width: 761px) {
      .auth-hero { display: none; }
      .auth-box {
        width: 100%;
        max-width: 100%;
        border-left: none;
        padding: 48px 36px;
        justify-content: flex-start;
        padding-top: 72px;
      }
    }
    /* ── Responsive: mobile — hero background + floating card ── */
    @media (max-width: 760px) {
      body[data-page="auth"] .main-content {
        overflow-y: auto;
      }
      body[data-page="auth"] .wrap {
        overflow: visible;
      }
      /* Panel: flex column, hero content at top, card starts below hero area */
      .auth-panel {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: 100dvh;
        position: relative;
        overflow-x: hidden;
        padding: 260px 0 max(48px, env(safe-area-inset-bottom));
      }
      /* Full-screen animated background */
      .auth-hero {
        display: flex;
        position: absolute;
        inset: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: max(env(safe-area-inset-top), 44px) 24px 0;
      }
      /* Hero content: logo + badge full-width; headline left, features right */
      .auth-hero-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 16px;
        row-gap: 10px;
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        padding: 0 4px;
      }
      .auth-hero-logo {
        grid-column: 1 / -1;
        margin-bottom: 6px;
      }
      .auth-hero-badge {
        grid-column: 1 / -1;
        justify-self: start;
        font-size: 11px;
        padding: 4px 10px;
        margin-bottom: 0;
        margin-left: 3vw;
      }
      .auth-hero-headline {
        grid-column: 1;
        font-size: clamp(22px, 6vw, 28px);
        letter-spacing: -0.8px;
        margin-bottom: 0;
        margin-top: 4vh;
        align-self: start;
      }
      /* Hidden on mobile */
      .auth-hero-desc {
        display: none;
      }
      /* Three features to the right of headline */
      .auth-hero-features {
        grid-column: 2;
        align-self: start;
        gap: 9px;
        margin-bottom: 0;
        margin-top: 8px;
        margin-left: -8px;
      }
      .auth-hero-feat {
        font-size: 12px;
        gap: 7px;
      }
      .auth-hero-feat-icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 12px;
      }
      .auth-hero-quote {
        display: none;
      }
      /* Demo: positioned below the login card */
      .auth-demo {
        position: absolute;
        top: 70vh;
        left: auto;
        right: -16px;
        transform: none;
        bottom: auto;
        width: 110%;
        max-width: 110vw;
        opacity: 0.45;
      }
      .auth-demo .auth-demo-bubble {
        font-size: 18px;
        padding: 10px 18px;
        min-height: 52px;
      }
      .auth-demo .auth-demo-avatar {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 17px;
        margin-top: 4px;
      }
      .auth-demo .auth-demo-caret {
        width: 3px;
        height: 19px;
      }
      /* Floating login card: centered with side margins */
      .auth-box {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
        width: calc(100% - 48px);
        max-width: 360px;
        border-left: none;
        border-radius: 20px;
        background: rgba(15, 13, 11, 0.02);
        border: 1px solid rgba(255, 240, 210, 0.12);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 28px 24px max(28px, env(safe-area-inset-bottom));
        margin: 0;
        justify-content: flex-start;
      }
      .auth-brand {
        font-size: 24px;
      }
      .auth-tab {
        min-height: 44px;
        padding: 10px;
      }
    }
    /* ── Admin-only visibility ── */
    .admin-only { display: none !important; }
    body.admin-logged-in .admin-only { display: flex !important; flex-direction: column; gap: 5px; }
    /* ── Admin login modal ── */
    .admin-login-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
    }
    .admin-login-overlay.open { display: flex; }
    .admin-login-box {
      background: #ffffff;
      border-radius: 16px;
      padding: 32px 36px;
      width: 340px;
      box-shadow: rgba(0,0,0,0.3) 0px 20px 60px;
    }
    .admin-login-box h2 {
      margin: 0 0 6px;
      font-size: 22px;
    }
    .admin-login-box .subtitle {
      margin-bottom: 22px;
      font-size: 14px;
    }
    .admin-login-box .field {
      margin-bottom: 14px;
    }
    .admin-login-box .field label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      margin-bottom: 5px;
    }
    .admin-login-error {
      margin-top: 10px;
      min-height: 18px;
    }
    .admin-notice-bar {
      margin: 14px 0 0;
      display: none;
    }
    .admin-notice-bar:not(:empty) {
      display: block;
    }
    .admin-login-btn {
      width: 100%;
      margin-top: 18px;
      padding: 11px;
      font-size: 15px;
    }
    /* ── Admin panel ── */
    #adminPanel { display: none; overflow-y: auto; }
    .layout.show-admin main,
    .layout.show-admin aside { display: none !important; }
    .layout.show-admin #adminPanel { display: flex; flex-direction: column; min-height: 0; }
    /* Admin sub-tabs */
    .admin-tabs {
      display: flex;
      gap: 2px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 18px;
    }
    .admin-tab-btn {
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 400;
      color: var(--muted);
      cursor: pointer;
      margin-bottom: -1px;
      transition: color 0.1s, border-color 0.1s;
    }
    .admin-tab-btn:hover { color: var(--ink); background: transparent; }
    .admin-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
    .admin-tab-btn:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 8px 8px 0 0;
    }
    .admin-tab-pane { display: none; }
    .admin-tab-pane.active { display: block; }
    .admin-overview-grid {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 14px;
      margin-bottom: 14px;
    }
    .admin-overview-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,248,251,0.98));
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 18px 20px;
      box-shadow: var(--shadow);
      display: grid;
      gap: 14px;
    }
    .admin-overview-card-head {
      display: grid;
      gap: 6px;
    }
    .admin-overview-card h3 {
      margin: 0;
      font-size: 20px;
    }
    .admin-overview-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
    }
    .admin-overview-eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .admin-overview-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .admin-overview-actions .secondary {
      padding: 7px 12px;
      font-size: 13px;
    }
    .admin-overview-list {
      margin: 0;
      padding-left: 18px;
      color: var(--ink);
      display: grid;
      gap: 8px;
      line-height: 1.6;
    }
    /* Role badges */
    .role-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
    .is-hidden { display: none !important; }
    .text-muted,
    .admin-cell-muted {
      color: var(--muted);
      font-size: 12px;
    }
    .admin-cell-nowrap {
      white-space: nowrap;
    }
    .admin-cell-good {
      color: var(--good);
      font-size: 12px;
    }

    /* ── Inline-style 替代品（CSP unsafe-inline 移除後使用） ───────────────── */
    .admin-text-muted     { color: var(--muted); }
    .admin-text-13        { font-size: 13px; }
    .admin-text-12        { font-size: 12px; }
    .admin-text-muted-13  { color: var(--muted); font-size: 13px; }
    .admin-text-muted-12  { color: var(--muted); font-size: 12px; }
    .admin-cell-tight     { white-space: nowrap; }
    .admin-cell-tight-meta { white-space: nowrap; font-size: 12px; color: var(--muted); }
    .admin-cell-wrap      { white-space: normal; }
    .admin-cell-strong    { font-weight: 600; }
    .admin-cell-bold      { font-weight: 500; }
    .admin-cell-error     { font-size: 12px; color: var(--muted); padding-top: 0; }
    .admin-table--small   { font-size: 13px; }

    .admin-cell-max-200 { max-width: 200px; }
    .admin-cell-max-220 { max-width: 220px; }
    .admin-cell-max-240 { max-width: 240px; }
    .admin-cell-max-260 { max-width: 260px; }
    .admin-cell-max-320 { max-width: 320px; }

    /* Conditional colors via modifier classes */
    .is-good   { color: var(--good); }
    .is-warn   { color: var(--warn); }
    .is-danger { color: var(--danger); }
    .admin-pos-feedback { color: var(--good); }
    .admin-neg-feedback { color: var(--danger); }
    .admin-comment-spacer { margin-left: 8px; font-size: 12px; }
    .admin-comment-spacer.admin-text-muted { margin-left: 8px; font-size: 12px; color: var(--muted); }

    .admin-row-highlight { background: rgba(0, 113, 227, 0.04); }
    .admin-badge.zero-hit { background: rgba(192, 57, 43, 0.12); color: #c0392b; }

    /* Embedding coverage progress block */
    .admin-coverage {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
    }
    .admin-coverage-track {
      flex: 1;
      background: var(--line);
      border-radius: 4px;
      height: 10px;
      overflow: hidden;
    }
    .admin-coverage-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.4s;
      background: var(--accent);
    }
    .admin-coverage-fill.is-good   { background: var(--good); }
    .admin-coverage-fill.is-warn   { background: var(--warn); }
    .admin-coverage-fill.is-danger { background: var(--danger); }
    .admin-coverage-pct {
      white-space: nowrap;
      font-weight: 600;
    }
    .admin-coverage-pct.is-good   { color: var(--good); }
    .admin-coverage-pct.is-warn   { color: var(--warn); }
    .admin-coverage-pct.is-danger { color: var(--danger); }
    .admin-coverage-meta {
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
    }
    .admin-coverage-meta-warn { color: var(--warn); margin-left: 6px; }

    /* Query type breakdown bar (renderAdminOverview) */
    .admin-qt-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
    }
    .admin-qt-label {
      width: 72px;
      color: var(--muted);
      text-align: right;
    }
    .admin-qt-track {
      flex: 1;
      background: var(--line);
      border-radius: 4px;
      height: 8px;
      overflow: hidden;
    }
    .admin-qt-fill {
      background: var(--accent);
      height: 100%;
      border-radius: 4px;
    }
    .admin-qt-count { width: 40px; color: var(--muted); }

    /* Last ingest summary */
    .admin-ingest-grid {
      display: grid;
      gap: 6px;
      font-size: 13px;
    }
    .admin-ingest-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }
    .admin-ingest-label { color: var(--muted); }
    .admin-ingest-value-strong { font-weight: 600; }

    /* RAG quality query-type-percent table */
    .qt-bar-cell { min-width: 120px; }
    .qt-bar-track {
      background: var(--line);
      border-radius: 3px;
      height: 8px;
    }
    .qt-bar-fill {
      background: var(--accent, #0071e3);
      height: 8px;
      border-radius: 3px;
    }
    .qt-pct-cell {
      font-size: 13px;
      color: var(--muted);
    }

    .admin-table-scroll { overflow-x: auto; }
    .admin-table-min-360 { min-width: 360px; }

    .admin-zero-rewritten {
      font-size: 12px;
      color: var(--muted);
      margin-top: 3px;
    }

    /* Audit log change diff */
    .admin-audit-change {
      font-size: 12px;
      line-height: 1.7;
    }
    .admin-audit-before {
      color: var(--muted);
      text-decoration: line-through;
    }
    .admin-audit-after { font-weight: 500; }

    /* Chart label flex */
    .admin-chart-label--flex { flex: 1; }
    .admin-chart-labels-row { display: flex; gap: 3px; }

    .admin-filter-action {
      padding: 5px 12px;
      font-size: 13px;
    }
    .filter-bar-wrap {
      gap: 8px;
      flex-wrap: wrap;
    }
    .filter-label-muted,
    .empty-small {
      font-size: 13px;
      color: var(--muted);
    }
    .grid-span-all {
      grid-column: 1 / -1;
    }
    .panel-spaced-sm {
      margin-top: 12px;
    }
    .panel-spaced-md {
      margin-top: 18px;
    }
    .panel-spaced-rag {
      margin-top: 16px;
    }
    .panel-heading-compact {
      font-size: 17px;
    }
    .admin-chart-labels {
      display: flex;
      gap: 3px;
      margin-top: 4px;
    }
    .admin-filter-input {
      padding: 5px 10px;
      font-size: 13px;
      border: 1px solid var(--line);
      border-radius: 6px;
      flex: 1;
      min-width: 160px;
      font-family: inherit;
      background: var(--panel);
      color: var(--ink);
    }
    .admin-filter-input--compact {
      min-width: 140px;
    }
    .admin-filter-select {
      font-size: 13px;
    }
    .doc-list-spaced {
      margin-top: 12px;
    }
    .accounts-toolbar-title {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
    }
    .admin-row-action {
      padding: 3px 8px;
      font-size: 12px;
      margin-right: 4px;
    }
    .admin-form-select {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      font-size: 15px;
      font-family: inherit;
      background: var(--panel);
      color: var(--ink);
    }
    .role-super_admin { background: #fef3c7; color: #92400e; }
    .role-admin { background: #dbeafe; color: #1e40af; }
    .role-viewer { background: #f3f4f6; color: #374151; }
    /* User management */
    .accounts-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .accounts-toolbar--mt { margin-top: 32px; }
    .btn-primary { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-family: inherit; cursor: pointer; font-weight: 500; }
    .btn-primary:hover { background: #0063c9; }
    .btn-danger { color: #c0392b; }
    .btn-danger-solid { background: #c0392b; }
    .btn-danger-solid:hover { background: #a93226; }
    /* Modals */
    .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 300; align-items: center; justify-content: center; }
    .modal-overlay.open { display: flex; }
    .modal-box { background: #fff; padding: 32px; border-radius: 14px; width: 360px; box-shadow: var(--shadow); }
    .modal-box h2 { margin: 0 0 4px; font-size: 20px; }
    .modal-box .subtitle { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
    .modal-actions { display: flex; gap: 8px; margin-top: 20px; justify-content: flex-end; }
    /* Stat cards */
    .admin-stat-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      margin-bottom: 18px;
    }
    .admin-stat-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px 18px;
      box-shadow: var(--shadow);
    }
    .admin-stat-label {
      font-size: 11px;
      color: var(--muted);
      font-weight: 600;
      letter-spacing: -0.12px;
      margin-bottom: 5px;
      text-transform: uppercase;
    }
    .admin-stat-value {
      font-size: 28px;
      font-weight: 600;
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
      letter-spacing: -0.5px;
      line-height: 1.1;
    }
    .admin-stat-sub {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
    }
    /* Bar chart */
    .admin-chart {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 90px;
    }
    .admin-chart-bar-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      justify-content: flex-end;
    }
    .admin-chart-bar {
      width: 100%;
      background: var(--accent);
      border-radius: 2px 2px 0 0;
      min-height: 2px;
      opacity: 0.75;
      transition: opacity 0.1s;
      cursor: default;
    }
    .admin-chart-bar:hover { opacity: 1; }
    .admin-chart-label {
      font-size: 9px;
      color: var(--muted);
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      max-width: 100%;
      margin-top: 3px;
    }
    .token-dashboard-grid--tables {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 14px;
      align-items: start;
    }
    .token-table-drawer {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel);
      overflow: hidden;
    }
    .token-table-drawer > summary {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      cursor: pointer;
      font-size: 17px;
      font-weight: 600;
      color: var(--ink);
      list-style: none;
      user-select: none;
    }
    .token-table-drawer > summary::-webkit-details-marker { display: none; }
    .token-table-drawer > summary::before {
      content: '›';
      display: inline-block;
      font-size: 16px;
      line-height: 1;
      transition: transform 0.15s;
      color: var(--muted);
    }
    .token-table-drawer[open] > summary::before {
      transform: rotate(90deg);
    }
    .token-table-drawer > div {
      padding: 0 16px 14px;
    }
    @media (min-width: 761px) {
      .token-table-drawer > summary {
        pointer-events: none;
        cursor: default;
      }
      .token-table-drawer > summary::before {
        display: none;
      }
    }
    .token-price-drawer {
      margin-bottom: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      overflow: hidden;
    }
    .token-price-drawer > summary {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink);
      list-style: none;
      user-select: none;
    }
    .token-price-drawer > summary::-webkit-details-marker { display: none; }
    .token-price-drawer > summary::before {
      content: '›';
      display: inline-block;
      font-size: 14px;
      line-height: 1;
      transition: transform 0.15s;
      color: var(--muted);
    }
    .token-price-drawer[open] > summary::before {
      transform: rotate(90deg);
    }
    .token-price-drawer > summary:hover { background: var(--hover); }
    .token-price-drawer .token-price-editor {
      padding: 0 14px 12px;
    }
    .token-chart-panel {
      padding: 14px;
      margin-bottom: 14px;
    }
    .token-price-editor {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }
    .token-price-row {
      display: grid;
      grid-template-columns: minmax(110px, 1fr) minmax(92px, 0.8fr) minmax(92px, 0.8fr);
      gap: 8px;
      align-items: end;
    }
    .token-price-model {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--ink);
      font-size: 12px;
      font-weight: 600;
      padding-bottom: 7px;
    }
    .token-price-row label {
      display: grid;
      gap: 3px;
      color: var(--muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .token-price-row input {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--panel);
      color: var(--ink);
      font: inherit;
      font-size: 12px;
      padding: 6px 7px;
    }
    .token-price-row input::-webkit-inner-spin-button,
    .token-price-row input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .token-price-row input[type=number] { -moz-appearance: textfield; appearance: textfield; }
    .token-usage-chart {
      height: 180px;
      display: flex;
      align-items: flex-end;
      gap: 3px;
      padding: 12px 4px 0;
      border-bottom: 1px solid var(--line);
      overflow: hidden;
    }
    .token-chart-bar-wrap {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: flex-end;
      min-width: 3px;
    }
    .token-chart-bar {
      width: 100%;
      min-height: 2px;
      border-radius: 2px 2px 0 0;
      background: linear-gradient(180deg, #0071e3 0%, #35c2ff 100%);
      opacity: 0.82;
    }
    .token-chart-bar:hover { opacity: 1; }
    .token-table td:not(:first-child),
    .token-table th:not(:first-child) {
      text-align: right;
    }
    /* Admin data table */
    .admin-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .admin-table th {
      text-align: left;
      padding: 8px 12px;
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      border-bottom: 1px solid var(--line);
      letter-spacing: -0.12px;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .admin-table td {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      vertical-align: top;
      line-height: 1.5;
    }
    .admin-table tr:last-child td { border-bottom: none; }
    .admin-table tr.expandable { cursor: pointer; }
    .admin-table tr.expandable:hover td { background: rgba(0,113,227,0.03); }
    .admin-table tr.detail-row td { padding: 0; background: #fafafc; }
    .admin-detail-box {
      padding: 14px 16px;
      display: grid;
      gap: 10px;
    }
    .admin-turn-card {
      background: #ffffff;
      border-radius: 8px;
      padding: 12px 14px;
      border: 1px solid rgba(0,0,0,0.08);
    }
    .admin-turn-card.user-turn { background: #f5f5f7; }
    .admin-turn-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .admin-turn-role {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .admin-turn-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .admin-badge-list {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      max-width: 100%;
    }
    .admin-badge {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      padding: 2px 7px;
      border-radius: 4px;
      background: rgba(0,113,227,0.08);
      color: var(--accent);
      font-weight: 500;
      white-space: nowrap;
    }
    .admin-badge.llm { background: rgba(0,113,227,0.12); color: #0057b8; }
    .admin-badge.neutral { background: #f5f5f7; color: var(--muted); }
    .admin-badge.time { background: rgba(26,127,75,0.08); color: #1a7f4b; }
    .admin-badge[data-tooltip] {
      cursor: help;
      position: relative;
    }
    .admin-badge[data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      background: #1c1c1e;
      color: #fff;
      font-size: 11px;
      line-height: 1.5;
      padding: 5px 9px;
      border-radius: 5px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.12s ease;
      z-index: 200;
    }
    .admin-badge[data-tooltip]:hover::after {
      opacity: 1;
    }
    .admin-turn-content {
      font-size: 13px;
      line-height: 1.6;
      color: var(--ink);
      white-space: pre-wrap;
      word-break: break-word;
    }
    .admin-turn-rewrite {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid rgba(0,0,0,0.06);
    }
    .admin-turn-rewrite strong { color: var(--ink); }
    .admin-pagination {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
      margin-top: 14px;
      font-size: 13px;
      color: var(--muted);
    }
    .admin-pagination button {
      padding: 5px 12px;
      font-size: 13px;
    }
    .rating-good { color: #1a7f4b; font-weight: 600; }
    .rating-bad  { color: #b45309; font-weight: 600; }
    /* Retrieval snapshot in session detail */
    .admin-retrieval {
      margin-top: 10px;
      border-top: 1px solid rgba(0,0,0,0.07);
      padding-top: 8px;
    }
    .admin-retrieval-summary {
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      cursor: pointer;
      user-select: none;
      list-style: none;
      padding: 2px 0;
    }
    .admin-retrieval-summary::-webkit-details-marker { display: none; }
    .admin-retrieval-summary::before { content: '▸ '; }
    details[open] .admin-retrieval-summary::before { content: '▾ '; }
    .admin-retrieval-list {
      margin-top: 8px;
      display: grid;
      gap: 6px;
    }
    .admin-json-preview {
      margin: 8px 0 0;
      padding: 10px;
      max-height: 220px;
      overflow: auto;
      border: 1px solid var(--line-soft);
      border-radius: 8px;
      background: var(--panel-soft);
      color: var(--fg2);
      font-family: var(--font-mono);
      font-size: 11px;
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .admin-chunk {
      background: #fafafc;
      border-radius: 6px;
      padding: 8px 10px;
      border: 1px solid rgba(0,0,0,0.06);
    }
    .admin-chunk-head {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 4px;
    }
    .admin-chunk-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 3px;
    }
    .admin-chunk-excerpt {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: break-word;
    }
    /* Feedback inline in session turn */
    .admin-turn-feedback {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px solid rgba(0,0,0,0.07);
      flex-wrap: wrap;
    }
    /* Cross-link buttons */
    .admin-link-btn {
      background: transparent;
      border: 1px solid var(--accent);
      border-radius: 6px;
      color: var(--accent);
      font-size: 12px;
      padding: 3px 8px;
      cursor: pointer;
      font-family: inherit;
      margin-left: auto;
      white-space: nowrap;
      transition: background 0.1s;
    }
    .admin-link-btn:hover { background: var(--accent-soft); }
    .feedback-filter-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
      align-items: center;
    }
    .feedback-filter-bar select { width: auto; padding: 6px 10px; font-size: 13px; }
    /* Per-turn feedback bar */
    .feedback-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(0,0,0,0.07);
    }
    .feedback-bar-label {
      font-size: 12px;
      color: var(--muted);
    }
    .feedback-btn {
      background: transparent;
      border: 1px solid rgba(0,0,0,0.12);
      border-radius: 6px;
      padding: 3px 10px;
      font-size: 16px;
      cursor: pointer;
      color: var(--ink);
      line-height: 1.4;
      transition: background 0.1s, border-color 0.1s;
    }
    .feedback-btn:hover { background: #f5f5f7; border-color: rgba(0,0,0,0.2); }
    .feedback-btn.selected-good { background: rgba(26,127,75,0.10); border-color: #1a7f4b; }
    .feedback-btn.selected-bad  { background: rgba(180,83,9,0.10);  border-color: #b45309; }
    .chat-error-actions {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(0,0,0,0.07);
    }
    .chat-retry-btn {
      font-size: 13px;
      padding: 5px 14px;
    }
    .feedback-comment-area {
      margin-top: 8px;
      display: none;
    }
    .feedback-comment-area.is-visible {
      display: block;
    }
    .feedback-comment-area textarea {
      min-height: 60px;
      font-size: 13px;
      padding: 8px 10px;
    }
    .feedback-comment-area .row {
      margin-top: 6px;
    }
    .feedback-action-btn {
      padding: 5px 12px;
      font-size: 13px;
    }
    .feedback-submitted {
      font-size: 13px;
      color: var(--good);
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(0,0,0,0.07);
    }
    .excerpt-spaced {
      margin-top: 10px;
    }
    /* ── Overview panel drawers (collapse on mobile) ── */
    .mobile-panel-drawer > .mobile-panel-summary {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      user-select: none;
      cursor: pointer;
      padding: 0;
    }
    .mobile-panel-drawer > .mobile-panel-summary::-webkit-details-marker { display: none; }
    .mobile-panel-drawer > .mobile-panel-summary::before {
      content: '›';
      display: inline-block;
      font-size: 16px;
      line-height: 1;
      transition: transform 0.15s;
      color: var(--muted);
    }
    .mobile-panel-drawer[open] > .mobile-panel-summary::before {
      transform: rotate(90deg);
    }
    @media (min-width: 761px) {
      .mobile-panel-drawer > .mobile-panel-summary {
        pointer-events: none;
        cursor: default;
      }
      .mobile-panel-drawer > .mobile-panel-summary::before {
        display: none;
      }
    }
    @media (max-width: 1200px) {
      .admin-overview-grid { grid-template-columns: 1fr; }
      #adminStatGrid      { grid-template-columns: repeat(5, 1fr); }
      #ragQualityStatGrid { grid-template-columns: repeat(4, 1fr); }
      #tokenUsageStatGrid { grid-template-columns: repeat(5, 1fr); }
      .layout.show-data aside {
        grid-template-columns: 1fr;
        overflow-y: auto;
        align-items: start;
      }
      .layout.show-data aside > .panel {
        min-height: 0;
        overflow: visible;
      }
      .doc-list { max-height: 400px; flex: unset; }
      #detail { flex: unset; overflow-y: visible; }
      .control-grid, .control-grid.compact, .kv {
        grid-template-columns: 1fr 1fr;
      }
      .ask-bar-send { width: auto; }
    }
    @media (max-width: 760px) {
      .sidebar { display: none; }
      .control-grid, .control-grid.compact, .kv, .row {
        grid-template-columns: 1fr;
        display: grid;
      }
      .section-title {
        align-items: flex-start;
      }
      .ask-bar { flex-direction: column; }
      .ask-bar-send { width: 100%; flex-direction: row; }
      .admin-tabs {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 4px;
      }
      .admin-tab-btn {
        flex: 0 0 auto;
      }
      .feedback-filter-bar {
        flex-wrap: wrap;
        align-items: stretch;
      }
      .feedback-filter-bar select,
      .feedback-filter-bar input {
        width: 100%;
      }
      .feedback-filter-bar .admin-filter-input,
      .feedback-filter-bar .admin-filter-input--compact {
        min-width: 0;
        flex: 0 0 100%;
      }
      .feedback-filter-bar .admin-filter-select {
        flex: 1;
        min-width: 0;
        width: auto;
      }
      .admin-filter-action {
        flex: 0 0 auto;
      }
      #tokenStartDateInput,
      #tokenEndDateInput {
        flex: 0 0 calc(50% - 4px);
        min-width: 0;
      }
      .token-price-row {
        grid-template-columns: 1fr 1fr;
      }
      .token-price-model {
        grid-column: 1 / -1;
      }
      .admin-overview-card {
        padding: 16px;
      }
      .admin-overview-grid {
        display: none;
      }
      .admin-overview-actions .secondary {
        width: 100%;
      }
      .admin-stat-grid {
        grid-template-columns: repeat(5, 1fr);
      }
      #adminPanel {
        overflow-x: hidden;
      }
      #adminStatGrid,
      #ragQualityStatGrid,
      #tokenUsageStatGrid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
      }
      #adminStatGrid      { grid-template-columns: repeat(5, 140px); }
      #ragQualityStatGrid { grid-template-columns: repeat(4, 140px); }
      #tokenUsageStatGrid { grid-template-columns: repeat(5, 140px); }
      .admin-pagination {
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .admin-pagination:not(:empty) {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 16px max(14px, env(safe-area-inset-bottom));
        background: var(--panel);
        box-shadow: 0 -6px 16px rgba(0,0,0,0.10);
        z-index: 150;
        border-radius: 0;
      }
      .admin-tab-pane.active {
        padding-bottom: 72px;
      }
      .admin-table--stacked,
      .admin-table--stacked thead,
      .admin-table--stacked tbody,
      .admin-table--stacked tr,
      .admin-table--stacked th,
      .admin-table--stacked td {
        display: block;
      }
      .admin-table--stacked thead {
        display: none;
      }
      .admin-table--stacked tbody {
        display: grid;
        gap: 12px;
      }
      .admin-table--stacked tr {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel);
        padding: 10px 12px;
      }
      .admin-table--stacked td {
        padding: 0;
        border: 0;
        display: grid;
        gap: 4px;
        margin-top: 10px;
        text-align: left !important;
        white-space: normal !important;
      }
      .admin-table--stacked td:first-child {
        margin-top: 0;
      }
      .admin-table--stacked td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
      }
      .admin-table--stacked tr.detail-row {
        padding: 0;
        border: 0;
        background: transparent;
      }
      .admin-table--stacked tr.detail-row td {
        margin-top: 0;
      }
      .admin-table--stacked tr.detail-row td::before {
        content: none;
      }
      /* Sessions: compact card list, title + user only */
      .admin-table--sessions tbody {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .admin-table--sessions tr.expandable {
        padding: 10px 12px;
      }
      .admin-table--sessions tr.expandable td:not([data-label="對話標題／首問"]):not([data-label="用戶"]) {
        display: none;
      }
      .admin-table--sessions tr.expandable td[data-label="對話標題／首問"]::before,
      .admin-table--sessions tr.expandable td[data-label="用戶"]::before {
        display: none;
      }
      .admin-table--sessions tr.expandable td {
        margin-top: 4px;
      }
      .admin-table--sessions tr.expandable td:first-child {
        margin-top: 0;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.45;
      }
      .admin-table--sessions tr.detail-row:not(.is-hidden) {
        grid-column: 1 / -1;
        padding: 0;
        border: 0;
        background: transparent;
        border-radius: 0;
      }
      /* Feedback: collapsed by default, expand on click */
      .admin-table--feedback tr.expandable:not(.is-expanded) td:not([data-label="評分"]):not([data-label="問題"]) {
        display: none;
      }
      .admin-table--feedback tr.expandable td[data-label="評分"] {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .admin-table--feedback tr.expandable td[data-label="評分"]::after {
        content: '›';
        font-size: 18px;
        color: var(--muted);
        transition: transform 0.15s;
        margin-top: 0;
      }
      .admin-table--feedback tr.expandable.is-expanded td[data-label="評分"]::after {
        transform: rotate(90deg);
      }
      .admin-table--feedback tr.expandable td[data-label="評分"]::before,
      .admin-table--feedback tr.expandable td[data-label="問題"]::before {
        display: none;
      }
      /* Documents: collapsed — title left, status+arrow right on same line */
      .admin-table--documents tr.expandable:not(.is-expanded) td:not([data-label="標題"]):not([data-label="狀態"]) {
        display: none;
      }
      .admin-table--documents tr.expandable:not(.is-expanded) {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .admin-table--documents tr.expandable:not(.is-expanded) td[data-label="標題"] {
        flex: 1;
        min-width: 0;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 0;
      }
      .admin-table--documents tr.expandable:not(.is-expanded) td[data-label="狀態"] {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0;
        padding-left: 6px;
      }
      .admin-table--documents tr.expandable:not(.is-expanded) td[data-label="狀態"]::after {
        content: '›';
        font-size: 18px;
        color: var(--muted);
        transition: transform 0.15s;
        flex-shrink: 0;
      }
      .admin-table--documents tr.expandable td[data-label="標題"]::before,
      .admin-table--documents tr.expandable td[data-label="狀態"]::before {
        display: none;
      }
      /* Expanded: block layout, arrow on title td */
      .admin-table--documents tr.expandable.is-expanded td[data-label="標題"] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
      }
      .admin-table--documents tr.expandable.is-expanded td[data-label="標題"]::after {
        content: '›';
        font-size: 18px;
        color: var(--muted);
        flex-shrink: 0;
        transform: rotate(90deg);
        transition: transform 0.15s;
      }
      /* Turns: collapsed shows 使用者問題 + 回覆摘要 only */
      .admin-table--turns tr.expandable:not(.is-expanded) td:not([data-label="使用者問題"]):not([data-label="回覆摘要"]) {
        display: none;
      }
      .admin-table--turns tr.expandable td[data-label="使用者問題"] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        max-width: none !important;
      }
      .admin-table--turns tr.expandable td[data-label="使用者問題"]::after {
        content: '›';
        font-size: 18px;
        color: var(--muted);
        flex-shrink: 0;
        transition: transform 0.15s;
      }
      .admin-table--turns tr.expandable.is-expanded td[data-label="使用者問題"]::after {
        transform: rotate(90deg);
      }
      .admin-table--turns tr.expandable td[data-label="使用者問題"]::before,
      .admin-table--turns tr.expandable td[data-label="回覆摘要"]::before {
        display: none;
      }
      /* Expanded: action button on same line */
      .admin-table--documents tr.expandable.is-expanded td[data-label="操作"] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }
      .admin-table--documents tr.expandable.is-expanded td[data-label="操作"]::before {
        flex: 0 0 100%;
      }
      /* Users: collapsed shows 帳號 + 角色 only */
      .admin-table--users tr.expandable:not(.is-expanded) td:not([data-label="帳號"]):not([data-label="角色"]) {
        display: none;
      }
      .admin-table--users tr.expandable td[data-label="帳號"] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        font-weight: 500;
      }
      .admin-table--users tr.expandable td[data-label="帳號"]::after {
        content: '›';
        font-size: 18px;
        color: var(--muted);
        flex-shrink: 0;
        transition: transform 0.15s;
      }
      .admin-table--users tr.expandable.is-expanded td[data-label="帳號"]::after {
        transform: rotate(90deg);
      }
      .admin-table--users tr.expandable td[data-label="帳號"]::before,
      .admin-table--users tr.expandable td[data-label="角色"]::before {
        display: none;
      }
      /* Expanded: action buttons on one row */
      .admin-table--users tr.expandable.is-expanded td[data-label="操作"] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
      }
      .admin-table--users tr.expandable.is-expanded td[data-label="操作"]::before {
        flex: 0 0 100%;
      }
      .admin-table--users tr.expandable.is-expanded td[data-label="操作"] button {
        margin-right: 0 !important;
      }
      /* Audit: two search inputs on same row */
      #paneAuditLogs .feedback-filter-bar .admin-filter-input,
      #paneAuditLogs .feedback-filter-bar .admin-filter-input--compact {
        flex: 1;
        min-width: 0;
      }
      /* Audit: collapsed shows 動作 + 操作者 only */
      .admin-table--audit tr.expandable:not(.is-expanded) td:not([data-label="動作"]):not([data-label="操作者"]) {
        display: none;
      }
      .admin-table--audit tr.expandable td[data-label="動作"] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
      }
      .admin-table--audit tr.expandable td[data-label="動作"]::after {
        content: '›';
        font-size: 18px;
        color: var(--muted);
        flex-shrink: 0;
        transition: transform 0.15s;
      }
      .admin-table--audit tr.expandable.is-expanded td[data-label="動作"]::after {
        transform: rotate(90deg);
      }
      .admin-table--audit tr.expandable td[data-label="動作"]::before,
      .admin-table--audit tr.expandable td[data-label="操作者"]::before {
        display: none;
      }
      .token-dashboard-grid--tables {
        grid-template-columns: 1fr;
      }
      .token-price-row {
        grid-template-columns: 1fr;
      }
      .token-price-model {
        padding-bottom: 0;
      }
      .modal-box {
        width: min(360px, calc(100% - 24px));
        padding: 24px 20px;
      }
    }
    /* ── Sidebar brand icon ── */
    .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sidebar-brand-icon {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      background: var(--accent);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .sidebar-brand-icon svg { display: block; }
    /* ── Dark mode toggle ── */
    .dark-toggle-btn {
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 7px 12px;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      color: var(--muted);
      text-align: left;
      width: 100%;
      transition: background var(--dur-fast);
    }
    .dark-toggle-btn:hover { background: rgba(0,0,0,0.04); color: var(--ink); }

    /* ── Account security center ── */
    .account-security-modal {
      width: min(760px, calc(100vw - 32px));
      max-height: min(86vh, 860px);
      overflow-y: auto;
    }
    .account-security-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 18px;
    }
    .account-security-section {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px;
      background: var(--panel-soft);
      margin-top: 12px;
    }
    .account-security-section h3,
    .account-section-title h3 {
      margin: 0 0 12px;
      font-size: 15px;
      line-height: 1.35;
      letter-spacing: -0.01em;
    }
    .account-section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }
    .account-profile-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .account-password-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .account-password-grid + .secondary {
      display: block;
      width: 100%;
      margin-top: 16px;
      box-sizing: border-box;
    }
    .account-profile-grid > div {
      border: 1px solid var(--line-soft);
      border-radius: 10px;
      background: var(--panel);
      padding: 12px;
    }
    .account-profile-grid span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 4px;
    }
    .account-profile-grid strong {
      display: block;
      color: var(--ink);
      font-size: 15px;
      word-break: break-word;
    }
    .account-field-row {
      margin-top: 14px;
    }
    .account-inline-control {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .account-inline-control input {
      flex: 1;
      min-width: 0;
    }
    .account-session-list {
      display: grid;
      gap: 8px;
      max-height: 280px;
      overflow-y: auto;
      margin-bottom: 12px;
    }
    .account-session-card {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: var(--panel);
      padding: 12px;
    }
    .account-session-card.is-current {
      border-color: var(--accent-ring);
      background: var(--accent-soft);
    }
    .account-session-status {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
    }
    .account-session-meta {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.55;
      word-break: break-word;
    }
    .account-danger-zone {
      border-color: rgba(192, 57, 43, 0.22);
      background: var(--danger-soft);
    }
    .account-danger-zone p {
      margin: 0 0 12px;
      color: var(--fg2);
      font-size: 13px;
      line-height: 1.7;
    }
    @media (max-width: 760px) {
      .account-security-modal {
        width: calc(100vw - 24px);
        padding: 22px 18px;
      }
      .account-profile-grid {
        grid-template-columns: 1fr;
      }
      .account-inline-control {
        align-items: stretch;
        flex-direction: column;
      }
      .account-section-title {
        align-items: flex-start;
        flex-direction: column;
      }
    }
    /* ── Chat empty state ── */
    .chat-empty-state {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
      padding: 20px 0;
    }
    .chat-empty-logo {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--accent);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }
    .chat-empty-heading {
      text-align: center;
    }
    .chat-empty-heading h3 {
      margin: 0 0 6px;
      font-family: var(--font-display);
      font-size: 21px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: 0.231px;
    }
    .chat-empty-heading p {
      margin: 0;
      font-size: 14px;
      color: var(--muted);
      letter-spacing: -0.224px;
    }
    .chat-empty-suggestions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      width: 100%;
      max-width: 420px;
    }
    .chat-empty-card {
      background: #f5f5f7;
      border: none;
      border-radius: 10px;
      padding: 14px 18px;
      text-align: left;
      cursor: pointer;
      font-family: inherit;
      font-size: 14px;
      color: var(--ink);
      letter-spacing: -0.224px;
      line-height: 1.5;
      transition: background var(--dur-fast);
    }
    .chat-empty-card:hover { background: var(--panel-alt); }
    .panel-state {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px 18px;
      border-radius: 14px;
      background: #f5f5f7;
      border: 1px solid rgba(0, 0, 0, 0.06);
      color: var(--ink);
    }
    .panel-state--fill {
      min-height: 100%;
    }
    .panel-state--compact {
      padding: 12px 14px;
      border-radius: 12px;
    }
    .panel-state--loading {
      background: rgba(0, 113, 227, 0.06);
      border-color: rgba(0, 113, 227, 0.12);
    }
    .panel-state--error {
      background: rgba(192, 57, 43, 0.08);
      border-color: rgba(192, 57, 43, 0.14);
    }
    .panel-state--success {
      background: rgba(26, 127, 75, 0.08);
      border-color: rgba(26, 127, 75, 0.14);
    }
    .panel-state-icon {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.72);
      color: var(--accent);
      flex-shrink: 0;
    }
    .panel-state--error .panel-state-icon { color: var(--danger); }
    .panel-state--success .panel-state-icon { color: var(--good); }
    .panel-state-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .panel-state-title {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
    }
    .panel-state-body {
      margin: 0;
      font-size: 13px;
      line-height: 1.6;
      color: var(--muted);
    }
    /* ── Governance modal links ── */
    .governance-mini-links,
    .auth-governance-links {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .governance-mini-links {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
      flex-wrap: wrap;
    }
    .auth-governance-links {
      justify-content: center;
      margin-top: 18px;
      color: var(--muted);
    }
    .governance-mini-links button,
    .auth-governance-links button {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--accent);
      text-decoration: none;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
    }
    .governance-mini-links button:hover,
    .auth-governance-links button:hover {
      text-decoration: underline;
    }

    /* ── Governance modal content ── */
    .governance-popup {
      width: min(720px, calc(100vw - 32px));
      padding: 18px;
      background: #fff;
    }
    .governance-popup .citation-popup-header {
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
    }
    .governance-popup .citation-popup-title {
      font-size: 22px;
      line-height: 1.32;
      margin: 0 0 8px;
      letter-spacing: -0.03em;
    }
    .governance-popup-body {
      max-height: min(62vh, 620px);
      overflow-y: auto;
      padding: 0;
      background: transparent;
    }
    .governance-popup-content {
      display: grid;
      gap: 5px;
    }
    .governance-popup-section {
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fafafc;
    }
    .governance-popup-section h3 {
      margin: 0 0 2px;
      color: var(--ink);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.35;
    }
    .governance-popup-section p {
      margin: 0;
      color: color-mix(in srgb, var(--ink) 72%, var(--muted));
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0.01em;
    }
    @media (max-width: 760px) {
      .governance-popup {
        width: calc(100vw - 24px);
        padding: 20px;
      }
      .governance-popup .citation-popup-title {
        font-size: 20px;
      }
      .governance-popup-section {
        padding: 14px;
      }
    }
/*
 * AskAny Legal AI — Warm Obsidian Dark Mode
 * 套用方式：見本檔末尾「HOW TO APPLY」說明
 * 替換 apps/rag_backend/ui/styles-src/dark.css
 *
 * 色彩設計：
 *   背景   #0d0b09  暖炭黑
 *   面板   #161310  深棕黑
 *   次面板 #1e1a16  炭棕
 *   文字   #f0ebe3  暖米白
 *   Accent #c89b3c  琥珀金
 *   邊框   rgba(255,240,210,0.08) 暖調細線
 */

/* ── CSS token overrides ── */
[data-theme="dark"] {
  --bg:           #0d0b09;
  --panel:        #161310;
  --panel-soft:   #1e1a16;
  --panel-alt:    #272219;
  --ink:          #f0ebe3;
  --ink-strong:   #f8f4ee;
  --muted:        rgba(240, 235, 227, 0.45);
  --fg2:          rgba(240, 235, 227, 0.80);
  --fg3:          rgba(240, 235, 227, 0.45);
  --fg4:          rgba(240, 235, 227, 0.28);
  --line:         rgba(255, 240, 210, 0.08);
  --line-soft:    rgba(255, 240, 210, 0.05);
  --line-strong:  rgba(255, 240, 210, 0.16);
  --accent:       #c89b3c;
  --accent-hover: #d4a842;
  --accent-active:#b88a30;
  --accent-soft:  rgba(200, 155, 60, 0.12);
  --accent-ring:  rgba(200, 155, 60, 0.30);
  --link-light:   #c89b3c;
  --link-dark:    #d4a842;
  --good:         #4a9e6b;
  --good-soft:    rgba(74, 158, 107, 0.15);
  --warn:         #d4883c;
  --warn-soft:    rgba(212, 136, 60, 0.15);
  --danger:       #c0392b;
  --danger-soft:  rgba(192, 57, 43, 0.12);
  --shadow:       rgba(0, 0, 0, 0.65) 3px 5px 30px 0px;
  --shadow-card:  rgba(0, 0, 0, 0.65) 3px 5px 30px 0px;
  --shadow-pop:   rgba(0, 0, 0, 0.75) 0px 20px 60px;
  --shadow-soft:  rgba(0, 0, 0, 0.40) 0px 8px 40px;
}

/* ── Body & root ── */
[data-theme="dark"] body {
  background: #0d0b09;
  color: #f0ebe3;
}

/* ── Sidebar ── */
[data-theme="dark"] .sidebar {
  background: #0f0c09;
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .sidebar-tab {
  color: rgba(240, 235, 227, 0.80);
}
[data-theme="dark"] .sidebar-tab:hover {
  background: rgba(200, 155, 60, 0.07);
  color: #f0ebe3;
}
[data-theme="dark"] .sidebar-tab.active {
  background: rgba(200, 155, 60, 0.12);
  color: #c89b3c;
}
[data-theme="dark"] .sidebar-brand {
  color: #f0ebe3;
}
[data-theme="dark"] .sidebar-brand-icon {
  background: linear-gradient(135deg, #c89b3c 0%, #7a5c1e 100%);
}
[data-theme="dark"] .sidebar-user {
  color: rgba(240, 235, 227, 0.45);
}
[data-theme="dark"] .sidebar-logout-btn {
  border-color: rgba(255, 240, 210, 0.08);
  color: rgba(240, 235, 227, 0.45);
}
[data-theme="dark"] .sidebar-logout-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f0ebe3;
}
[data-theme="dark"] .dark-toggle-btn {
  border-color: rgba(255, 240, 210, 0.08);
  color: rgba(240, 235, 227, 0.45);
}
[data-theme="dark"] .dark-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f0ebe3;
}
[data-theme="dark"] .conv-item {
  color: #f0ebe3;
  border-color: rgba(255, 240, 210, 0.06);
}
[data-theme="dark"] .conv-item:hover {
  background: rgba(200, 155, 60, 0.07);
}
[data-theme="dark"] .conv-item.active {
  background: rgba(200, 155, 60, 0.12);
  box-shadow: inset 0 0 0 1.5px rgba(200, 155, 60, 0.40);
}
[data-theme="dark"] .conv-item-title {
  color: rgba(240, 235, 227, 0.80);
}
[data-theme="dark"] .conv-item.active .conv-item-title {
  color: #c89b3c;
}
[data-theme="dark"] .conv-item-date {
  color: rgba(240, 235, 227, 0.35);
}
[data-theme="dark"] .sidebar-meta {
  border-top-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .governance-mini-links button,
[data-theme="dark"] .auth-governance-links button {
  color: #c89b3c;
}

/* ── Main content ── */
[data-theme="dark"] .main-content {
  background: #0d0b09;
}

/* ── Page hero ── */
[data-theme="dark"] .page-hero {
  border-color: rgba(255, 240, 210, 0.08);
  background:
    radial-gradient(circle at top left, rgba(200, 155, 60, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(22, 19, 16, 0.97), rgba(13, 11, 9, 0.99));
}
[data-theme="dark"] body[data-page="data"] .page-hero {
  background:
    radial-gradient(circle at top left, rgba(74, 158, 107, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(22, 19, 16, 0.97), rgba(9, 18, 13, 0.99));
}
[data-theme="dark"] body[data-page="admin"] .page-hero {
  background:
    radial-gradient(circle at top left, rgba(200, 155, 60, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(22, 19, 16, 0.97), rgba(20, 14, 6, 0.99));
}
[data-theme="dark"] .page-eyebrow {
  color: #c89b3c;
}
[data-theme="dark"] .page-summary {
  color: rgba(240, 235, 227, 0.75);
}
[data-theme="dark"] .page-stat-card {
  background: rgba(22, 19, 16, 0.80);
  border-color: rgba(255, 240, 210, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .page-stat-value {
  color: #f0ebe3;
}
[data-theme="dark"] .page-stat-card p {
  color: rgba(240, 235, 227, 0.65);
}

/* ── Nav controls ── */
[data-theme="dark"] .skip-link {
  color: #f0ebe3;
}
[data-theme="dark"] .mobile-topbar {
  background: #161310;
  border: 1px solid rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .mobile-brand-copy strong {
  color: #f0ebe3;
}
[data-theme="dark"] .mobile-brand-copy span {
  color: rgba(240, 235, 227, 0.45);
}
[data-theme="dark"] .mobile-nav-tab {
  background: #1e1a16;
  color: #f0ebe3;
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .mobile-nav-tab.active {
  background: #c89b3c;
  color: #0d0b09;
}
[data-theme="dark"] .mobile-nav-link {
  background: #1e1a16;
  border-color: rgba(255, 240, 210, 0.08);
  color: #c89b3c;
}
[data-theme="dark"] .hero-reveal-btn {
  background: rgba(22, 19, 16, 0.92);
  color: #f0ebe3;
  border-color: rgba(255, 240, 210, 0.08);
}

/* ── Panels ── */
[data-theme="dark"] .panel {
  background: #161310;
  border: 1px solid rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .panel.primary {
  background: #161310;
}
[data-theme="dark"] h1, [data-theme="dark"] h2 {
  color: #f0ebe3;
}
[data-theme="dark"] p {
  color: rgba(240, 235, 227, 0.78);
}
[data-theme="dark"] .subtitle {
  color: rgba(240, 235, 227, 0.45);
}

/* ── Form controls ── */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #1e1a16;
  color: #f0ebe3;
  border-color: rgba(255, 240, 210, 0.10);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(240, 235, 227, 0.28);
}
[data-theme="dark"] .field label {
  color: rgba(240, 235, 227, 0.45);
}

/* ── Buttons ── */
[data-theme="dark"] button.secondary {
  background: #1e1a16;
  color: #f0ebe3;
  border-color: rgba(255, 240, 210, 0.12);
}
[data-theme="dark"] button.secondary:hover {
  background: #272219;
}
[data-theme="dark"] .btn-primary {
  background: #c89b3c;
  color: #0d0b09;
}
[data-theme="dark"] .btn-primary:hover {
  background: #d4a842;
}

/* ── Chat ── */
[data-theme="dark"] .chat-card.user {
  background: #1e1a16;
  color: #f0ebe3;
}
[data-theme="dark"] .chat-card.assistant {
  background: #161310;
  border: 1px solid rgba(255, 240, 210, 0.07);
}
[data-theme="dark"] .answer-text {
  color: #f0ebe3;
}
[data-theme="dark"] .chat-meta {
  color: rgba(240, 235, 227, 0.40);
}
[data-theme="dark"] .chat-input-area {
  background: #161310;
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .advanced-panel {
  background: #1e1a16;
}
[data-theme="dark"] .chat-newtopic-tip {
  background: #221a08;
  border-color: #5a3f00;
  color: #d4a842;
}
[data-theme="dark"] .citation-mark {
  color: #c89b3c;
  border-bottom-color: rgba(200, 155, 60, 0.45);
}
[data-theme="dark"] .external-link {
  color: #c89b3c;
}
[data-theme="dark"] .chat-error-actions {
  border-top-color: rgba(255, 240, 210, 0.08);
}

/* ── Thinking card ── */
[data-theme="dark"] .thinking-card {
  background: #161310;
  border: 1px solid rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .thinking-label {
  color: rgba(240, 235, 227, 0.45);
}
[data-theme="dark"] .thinking-cancel-btn {
  border-color: rgba(255, 240, 210, 0.14);
  color: rgba(240, 235, 227, 0.45);
}
[data-theme="dark"] .thinking-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f0ebe3;
}

/* ── Doc / data cards ── */
[data-theme="dark"] .doc-item,
[data-theme="dark"] .chat-card,
[data-theme="dark"] .result-card,
[data-theme="dark"] .detail-card {
  background: #1e1a16;
  color: #f0ebe3;
}
[data-theme="dark"] .doc-item:hover {
  background: #272219;
}
[data-theme="dark"] .doc-item.active {
  background: rgba(200, 155, 60, 0.10);
  box-shadow: inset 0 0 0 1.5px #c89b3c;
}

/* ── Misc tokens ── */
[data-theme="dark"] .citation,
[data-theme="dark"] .chunk {
  background: #1e1a16;
}
[data-theme="dark"] .kv div {
  background: #1e1a16;
}
[data-theme="dark"] .pill {
  background: #1e1a16;
  color: rgba(240, 235, 227, 0.78);
}
[data-theme="dark"] .score {
  background: rgba(200, 155, 60, 0.12);
  color: #c89b3c;
}
[data-theme="dark"] .empty,
[data-theme="dark"] .note {
  background: #1e1a16;
  color: rgba(240, 235, 227, 0.45);
}
[data-theme="dark"] .reason {
  background: #1e1a16;
  color: rgba(240, 235, 227, 0.78);
}

/* ── Citation popup ── */
[data-theme="dark"] .citation-popup {
  background: #161310;
  color: #f0ebe3;
}
[data-theme="dark"] .citation-popup-overlay {
  background: rgba(0, 0, 0, 0.72);
}
[data-theme="dark"] .citation-popup-close {
  background: #1e1a16;
  color: rgba(240, 235, 227, 0.45);
}
[data-theme="dark"] .citation-popup-close:hover {
  background: #272219;
  color: #f0ebe3;
}
[data-theme="dark"] .citation-popup-title {
  color: #f0ebe3;
}
[data-theme="dark"] .citation-popup-body {
  color: #f0ebe3;
  background: #1e1a16;
  border-radius: 8px;
  padding: 14px 16px;
}
[data-theme="dark"] .citation-excerpt {
  color: #f0ebe3;
  border-top-color: rgba(255, 240, 210, 0.08);
}

/* ── Markdown ── */
[data-theme="dark"] .markdown {
  color: #f0ebe3;
}
[data-theme="dark"] .markdown p {
  color: rgba(240, 235, 227, 0.80);
}
[data-theme="dark"] .markdown code,
[data-theme="dark"] code {
  background: #1e1a16;
  color: #f0ebe3;
}
[data-theme="dark"] .markdown pre {
  background: #1e1a16;
}
[data-theme="dark"] .markdown blockquote {
  border-left-color: rgba(200, 155, 60, 0.30);
  color: rgba(240, 235, 227, 0.55);
}

/* ── Chat empty state ── */
[data-theme="dark"] .chat-empty-heading h3 {
  color: #f0ebe3;
}
[data-theme="dark"] .chat-empty-heading p {
  color: rgba(240, 235, 227, 0.45);
}
[data-theme="dark"] .chat-empty-card {
  background: #1e1a16;
  color: #f0ebe3;
}
[data-theme="dark"] .chat-empty-card:hover {
  background: #272219;
}

/* ── Panel states ── */
[data-theme="dark"] .panel-state {
  background: #1e1a16;
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .panel-state--loading {
  background: rgba(200, 155, 60, 0.10);
  border-color: rgba(200, 155, 60, 0.18);
}
[data-theme="dark"] .panel-state--error {
  background: rgba(192, 57, 43, 0.14);
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .panel-state--success {
  background: rgba(74, 158, 107, 0.14);
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .panel-state-icon {
  background: rgba(200, 155, 60, 0.14);
  color: #c89b3c;
}
[data-theme="dark"] .panel-state--error .panel-state-icon {
  color: #ff8d82;
}
[data-theme="dark"] .panel-state--success .panel-state-icon {
  color: #4cd97b;
}
[data-theme="dark"] .panel-state-title {
  color: #f0ebe3;
}
[data-theme="dark"] .panel-state-body {
  color: rgba(240, 235, 227, 0.58);
}

/* ── Auth ── */
[data-theme="dark"] .auth-brand,
[data-theme="dark"] .auth-box h2 {
  color: #f0ebe3;
}
[data-theme="dark"] .auth-subtitle {
  color: rgba(240, 235, 227, 0.45);
}
[data-theme="dark"] .auth-tabs {
  background: #1e1a16;
}
[data-theme="dark"] .auth-tab.active {
  background: rgba(200, 155, 60, 0.14);
  color: #c89b3c;
}
[data-theme="dark"] .auth-tab {
  color: rgba(240, 235, 227, 0.45);
}
[data-theme="dark"] .auth-submit-btn {
  background: linear-gradient(135deg, #c89b3c 0%, #a07830 100%);
  color: #0d0b09;
  border: none;
  box-shadow: 0 4px 20px rgba(200, 155, 60, 0.30);
}
[data-theme="dark"] .auth-submit-btn:hover {
  background: linear-gradient(135deg, #d4a842 0%, #b08a38 100%);
}

/* ── Modals ── */
[data-theme="dark"] .modal-box,
[data-theme="dark"] .admin-login-box {
  background: #161310;
  border: 1px solid rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .auth-box {
  background: rgba(22, 19, 16, 0.02);
  border: 1px solid rgba(255, 240, 210, 0.08);
}

/* ── Account security ── */
[data-theme="dark"] .account-security-section {
  background: #111009;
  border-color: rgba(255, 240, 210, 0.10);
}
[data-theme="dark"] .account-profile-grid > div,
[data-theme="dark"] .account-session-card {
  background: #1a1612;
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .account-session-card.is-current {
  background: rgba(200, 155, 60, 0.14);
  border-color: rgba(200, 155, 60, 0.35);
}
[data-theme="dark"] .account-danger-zone {
  background: rgba(192, 57, 43, 0.12);
  border-color: rgba(255, 107, 107, 0.22);
}
[data-theme="dark"] .btn-danger-solid {
  background: #c0392b;
  color: #fff;
}
[data-theme="dark"] .btn-danger-solid:hover {
  background: #a93226;
}

/* ── Admin ── */
[data-theme="dark"] .admin-tabs {
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .admin-tab-btn {
  color: rgba(240, 235, 227, 0.45);
}
[data-theme="dark"] .admin-tab-btn:hover {
  color: #f0ebe3;
}
[data-theme="dark"] .admin-tab-btn.active {
  color: #c89b3c;
  border-bottom-color: #c89b3c;
}
[data-theme="dark"] .admin-stat-card {
  background: #161310;
  border: 1px solid rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .admin-stat-value {
  color: #f0ebe3;
}

/* ════════════════════════════════════════════════
   SCROLLBAR — Warm Obsidian 深色模式
   取代 base.css 裡的 scrollbar-width: none
   ════════════════════════════════════════════════ */

/* Firefox */
[data-theme="dark"] .chat-history,
[data-theme="dark"] .conversation-panel-body,
[data-theme="dark"] .conversation-list,
[data-theme="dark"] #retrievalResult,
[data-theme="dark"] #detail,
[data-theme="dark"] #adminPanel,
[data-theme="dark"] .admin-tab-pane,
[data-theme="dark"] .admin-json-preview,
[data-theme="dark"] .account-session-list,
[data-theme="dark"] .account-security-modal,
[data-theme="dark"] .governance-popup-body,
[data-theme="dark"] .citation-popup-body,
[data-theme="dark"] .sidebar-nav,
[data-theme="dark"] .main-content,
[data-theme="dark"] .page-shell {
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 155, 60, 0.22) transparent;
}

/* WebKit (Chrome / Safari / Edge) */
[data-theme="dark"] .chat-history::-webkit-scrollbar,
[data-theme="dark"] .conversation-panel-body::-webkit-scrollbar,
[data-theme="dark"] .conversation-list::-webkit-scrollbar,
[data-theme="dark"] #retrievalResult::-webkit-scrollbar,
[data-theme="dark"] #detail::-webkit-scrollbar,
[data-theme="dark"] #adminPanel::-webkit-scrollbar,
[data-theme="dark"] .admin-tab-pane::-webkit-scrollbar,
[data-theme="dark"] .admin-json-preview::-webkit-scrollbar,
[data-theme="dark"] .account-session-list::-webkit-scrollbar,
[data-theme="dark"] .account-security-modal::-webkit-scrollbar,
[data-theme="dark"] .governance-popup-body::-webkit-scrollbar,
[data-theme="dark"] .citation-popup-body::-webkit-scrollbar,
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar,
[data-theme="dark"] .main-content::-webkit-scrollbar,
[data-theme="dark"] .page-shell::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
[data-theme="dark"] .chat-history::-webkit-scrollbar-track,
[data-theme="dark"] .conversation-panel-body::-webkit-scrollbar-track,
[data-theme="dark"] .conversation-list::-webkit-scrollbar-track,
[data-theme="dark"] #retrievalResult::-webkit-scrollbar-track,
[data-theme="dark"] #detail::-webkit-scrollbar-track,
[data-theme="dark"] #adminPanel::-webkit-scrollbar-track,
[data-theme="dark"] .admin-tab-pane::-webkit-scrollbar-track,
[data-theme="dark"] .admin-json-preview::-webkit-scrollbar-track,
[data-theme="dark"] .account-session-list::-webkit-scrollbar-track,
[data-theme="dark"] .account-security-modal::-webkit-scrollbar-track,
[data-theme="dark"] .governance-popup-body::-webkit-scrollbar-track,
[data-theme="dark"] .citation-popup-body::-webkit-scrollbar-track,
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-track,
[data-theme="dark"] .main-content::-webkit-scrollbar-track,
[data-theme="dark"] .page-shell::-webkit-scrollbar-track {
  background: transparent;
}
[data-theme="dark"] .chat-history::-webkit-scrollbar-thumb,
[data-theme="dark"] .conversation-panel-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .conversation-list::-webkit-scrollbar-thumb,
[data-theme="dark"] #retrievalResult::-webkit-scrollbar-thumb,
[data-theme="dark"] #detail::-webkit-scrollbar-thumb,
[data-theme="dark"] #adminPanel::-webkit-scrollbar-thumb,
[data-theme="dark"] .admin-tab-pane::-webkit-scrollbar-thumb,
[data-theme="dark"] .admin-json-preview::-webkit-scrollbar-thumb,
[data-theme="dark"] .account-session-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .account-security-modal::-webkit-scrollbar-thumb,
[data-theme="dark"] .governance-popup-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .citation-popup-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb,
[data-theme="dark"] .main-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .page-shell::-webkit-scrollbar-thumb {
  background: rgba(200, 155, 60, 0.22);
  border-radius: 980px;
}
[data-theme="dark"] .chat-history::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .conversation-panel-body::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .conversation-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] #retrievalResult::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] #detail::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] #adminPanel::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .admin-tab-pane::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .admin-json-preview::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .account-session-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .account-security-modal::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .governance-popup-body::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .citation-popup-body::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .main-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .page-shell::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 155, 60, 0.42);
}
[data-theme="dark"] .admin-overview-card {
  background: linear-gradient(180deg, rgba(22, 19, 16, 0.97), rgba(13, 11, 9, 0.99));
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .admin-overview-card p {
  color: rgba(240, 235, 227, 0.58);
}
[data-theme="dark"] .admin-overview-list {
  color: #f0ebe3;
}
[data-theme="dark"] .admin-table th {
  color: rgba(240, 235, 227, 0.45);
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .admin-table td {
  color: #f0ebe3;
  border-color: rgba(255, 240, 210, 0.06);
}
[data-theme="dark"] .admin-table tr.detail-row td {
  background: #0f0c09;
}
[data-theme="dark"] .admin-table tr.expandable:hover td {
  background: rgba(200, 155, 60, 0.04);
}
[data-theme="dark"] .admin-turn-card {
  background: #161310;
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .admin-turn-card.user-turn {
  background: #1e1a16;
}
[data-theme="dark"] .admin-turn-content {
  color: #f0ebe3;
}
[data-theme="dark"] .admin-turn-header {
  border-bottom-color: rgba(255, 240, 210, 0.06);
}
[data-theme="dark"] .admin-turn-feedback,
[data-theme="dark"] .feedback-bar,
[data-theme="dark"] .feedback-submitted {
  border-top-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .admin-turn-rewrite {
  border-top-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .admin-retrieval {
  border-top-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .admin-retrieval-summary {
  color: #c89b3c;
}
[data-theme="dark"] .admin-json-preview {
  background: #0d0b09;
  border-color: rgba(255, 240, 210, 0.10);
  color: rgba(240, 235, 227, 0.72);
}
[data-theme="dark"] .admin-chunk {
  background: #1e1a16;
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .admin-chunk-title {
  color: #f0ebe3;
}
[data-theme="dark"] .admin-chunk-excerpt {
  color: rgba(240, 235, 227, 0.52);
}
[data-theme="dark"] .admin-badge.neutral {
  background: #272219;
  color: rgba(240, 235, 227, 0.68);
}
[data-theme="dark"] .admin-badge.llm {
  background: rgba(91, 157, 255, 0.18);
  color: #8ab9ff;
}
[data-theme="dark"] .admin-badge.time {
  background: rgba(74, 158, 107, 0.18);
  color: #4cd97b;
}
[data-theme="dark"] .token-price-row input {
  background: #16130f;
  border-color: rgba(240, 235, 227, 0.12);
  color: #f0ebe3;
}
[data-theme="dark"] .admin-notice-bar {
  background: rgba(200, 155, 60, 0.10);
  border-color: rgba(200, 155, 60, 0.22);
  color: #c89b3c;
}

/* ── Role badges ── */
[data-theme="dark"] .role-super_admin {
  background: rgba(200, 155, 60, 0.18);
  color: #c89b3c;
}
[data-theme="dark"] .role-admin {
  background: rgba(96, 165, 250, 0.14);
  color: #60a5fa;
}
[data-theme="dark"] .role-viewer {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(240, 235, 227, 0.65);
}

/* ── Feedback ── */
[data-theme="dark"] .rating-good { color: #4cd97b; }
[data-theme="dark"] .rating-bad  { color: #ffb347; }
[data-theme="dark"] .feedback-btn {
  border-color: rgba(255, 240, 210, 0.14);
  color: #f0ebe3;
}
[data-theme="dark"] .feedback-btn:hover {
  background: rgba(200, 155, 60, 0.08);
  border-color: rgba(200, 155, 60, 0.30);
}

/* ── Dev section ── */
[data-theme="dark"] .dev-section {
  background: #161310;
  border: 1px solid rgba(255, 240, 210, 0.08);
}

/* ── Governance popup ── */
[data-theme="dark"] .governance-popup {
  background: #161310;
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .governance-popup .citation-popup-header,
[data-theme="dark"] .governance-popup-section {
  border-bottom-color: rgba(255, 240, 210, 0.08);
  border-color: rgba(255, 240, 210, 0.08);
}
[data-theme="dark"] .governance-popup-section {
  background: #1e1a16;
}
[data-theme="dark"] .governance-popup-section h3 {
  color: #f0ebe3;
}
[data-theme="dark"] .governance-popup-section p {
  color: rgba(240, 235, 227, 0.64);
}