:root {
    /* Cream theme (default) — StoreClaw 实测 #fafaf8 */
    --bg: #fafaf8;
    --bg-2: #f1f0eb;
    --surface: #ffffff;
    --card: #ffffff;
    --text: #1a1a1a;
    --text-2: #545454;
    --text-3: #8a8a85;
    --text-4: #b8b6b0;
    --border: #ebe9e2;
    --border-strong: #d8d6cd;
    --hover: #f3f2ed;
    --primary: #1a1a1a;
    --primary-fg: #fafaf8;
    --accent: #2a6f4b;
    --accent-soft: #e8efe8;
    --danger: #b94a3a;
    --warn: #b8852b;
    --success: #2a6f4b;
    --link: #2a6f4b;
    --shadow-card: 0 1px 2px rgba(30,30,20,0.04);
    --radius: 10px;
    --radius-sm: 6px;
    --sidebar-w: 248px;
  }
  [data-theme="claude"] {
    /* Claude theme — 暖橙 + 深暖灯色底 */
    --bg: #f5efe2;
    --bg-2: #ebe2cd;
    --surface: #fbf5e8;
    --card: #ffffff;
    --text: #1f1d1a;
    --text-2: #5b574e;
    --text-3: #8c8678;
    --text-4: #b5ae9c;
    --border: #e0d6bd;
    --border-strong: #ccc0a1;
    --hover: #ebe1c8;
    --primary: #c1633d;
    --primary-fg: #fdfaf2;
    --accent: #c1633d;
    --accent-soft: #f4e6dc;
    --danger: #a8412e;
    --warn: #b88130;
    --success: #5c7c4f;
    --link: #c1633d;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0; height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-feature-settings: "kern", "liga";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    letter-spacing: 0.005em;
  }
  #root { height: 100%; }
  .serif { font-family: "Fraunces", "Source Serif Pro", "Songti SC", "STSong", Georgia, serif; font-weight: 600; letter-spacing: -0.015em; }
  .mono { font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; }
  button { font-family: inherit; cursor: pointer; }
  input, textarea, select { font-family: inherit; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

  /* App shell */
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    height: 100%;
    background: var(--bg);
  }
  .main {
    background: var(--bg);
    overflow: auto;
    position: relative;
  }
  .app.nav-collapsed { grid-template-columns: 60px 1fr; }
  .sidebar-rail { padding: 18px 0 14px; align-items: center; }
  .rail-nav { display: flex; flex-direction: column; gap: 4px; align-items: center; width: 100%; }
  .rail-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; align-items: center; }
  .rail-icon {
    width: 38px; height: 38px; border-radius: 9px;
    display: grid; place-items: center;
    border: none; background: transparent; color: var(--text-2);
    cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
  }
  .rail-icon:hover { background: var(--hover); color: var(--text); }
  .rail-icon.active { background: var(--bg-2); color: var(--text); }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    padding: 22px 40px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid transparent;
  }
  .topbar h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .content {
    padding: 4px 40px 60px;
    max-width: 1400px;
  }
  .payoneer-native-page { max-width: 100%; }
  .payoneer-native-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
  .payoneer-table-card { overflow: hidden; }
  .payoneer-table-toolbar { min-height: 62px; padding: 12px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .payoneer-search { display: flex; align-items: center; gap: 7px; width: 220px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-3); background: var(--surface); }
  .payoneer-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 12px; color: var(--text); }
  .payoneer-native-table-wrap { overflow: auto; max-height: calc(100vh - 300px); min-height: 460px; }
  .payoneer-native-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 12px; }
  .payoneer-native-table th { position: sticky; top: 0; z-index: 1; padding: 11px 14px; text-align: left; white-space: pre-line; font-weight: 600; color: var(--text-2); background: var(--bg); border-bottom: 1px solid var(--border); }
  .payoneer-native-table td { max-width: 250px; padding: 11px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--border); color: var(--text-2); }
  .payoneer-native-table tbody tr:hover td { background: var(--hover); color: var(--text); }
  .payoneer-no-results { text-align: center; color: var(--text-3) !important; padding: 44px !important; }
  .payoneer-pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; font-size: 12px; color: var(--text-3); }
  .payoneer-analysis { margin-top: 22px; max-width: 1180px; }
  .payoneer-analysis-head { margin-bottom: 12px; }
  .payoneer-analysis-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
  .account-info-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 16px; }
  .account-info-toolbar { padding: 13px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .account-info-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .account-info-table th { padding: 11px 16px; text-align: left; background: var(--bg); color: var(--text-3); font-size: 11px; font-weight: 600; white-space: nowrap; }
  .account-info-table td { padding: 13px 16px; border-top: 1px solid var(--border); color: var(--text-2); }
  .account-info-table tr:hover td { background: var(--hover); color: var(--text); }
  .settings-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 660px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
  .settings-sidebar { padding: 18px 14px; border-right: 1px solid var(--border); background: var(--bg); display: flex; flex-direction: column; gap: 4px; }
  .settings-nav-item { display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font-size: 15px; text-align: left; }
  .settings-nav-item:hover { background: var(--hover); color: var(--text); }
  .settings-nav-item.active { background: var(--bg-2); color: var(--text); font-weight: 600; }
  .settings-content { min-width: 0; padding: 30px 32px; background: var(--surface); }
  .settings-field-label { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
  .settings-field-hint { margin-top: 5px; font-size: 12px; color: var(--text-3); line-height: 1.55; }
  .settings-list { border-top: 1px solid var(--border); }
  .settings-list-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 2px; border-bottom: 1px solid var(--border); }
  .settings-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }

  /* Sidebar */
  .sidebar {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 22px 14px 14px;
    background: var(--bg);
  }
  .brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 18px;
  }
  .brand-mark {
    font-family: "Fraunces", "Noto Serif SC", Georgia, serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--text);
  }
  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-2);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .nav-item:hover { background: var(--hover); color: var(--text); }
  .nav-item.active {
    background: var(--bg-2);
    color: var(--text);
    font-weight: 500;
  }
  .nav-item svg { flex-shrink: 0; }
  .nav-section-label {
    font-size: 11px;
    color: var(--text-4);
    padding: 16px 10px 6px;
    letter-spacing: 0.04em;
  }
  .sidebar-bottom { margin-top: auto; }
  .invite-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    margin-bottom: 8px;
  }
  .invite-card:hover { background: var(--hover); }
  .invite-title { font-size: 13px; font-weight: 500; color: var(--text); }
  .invite-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
  .user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 8px;
    cursor: pointer;
  }
  .user-row:hover { background: var(--hover); }
  .avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg-2);
    display: grid; place-items: center;
    color: var(--text-2);
    flex-shrink: 0;
  }

  /* Common UI */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
  }
  .btn:hover { background: var(--hover); }
  .btn.primary {
    background: var(--primary);
    color: var(--primary-fg);
    border-color: var(--primary);
  }
  .btn.primary:hover { opacity: 0.9; }
  .btn.ghost { border-color: transparent; background: transparent; }
  .btn.ghost:hover { background: var(--hover); }
  .btn.sm { padding: 6px 12px; font-size: 13px; }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-2);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.12s ease;
  }
  .chip:hover { background: var(--hover); color: var(--text); }
  .chip.active {
    background: var(--text);
    color: var(--primary-fg);
    border-color: var(--text);
  }
  [data-theme="claude"] .chip.active { background: var(--primary); border-color: var(--primary); }

  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
  }

  .input, .textarea, .select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border 0.12s ease, box-shadow 0.12s ease;
  }
  .input:focus, .textarea:focus, .select:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .textarea { resize: vertical; min-height: 80px; }
  .label {
    display: block;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 6px;
    font-weight: 500;
  }
  .field { margin-bottom: 16px; }
  .help { font-size: 12px; color: var(--text-3); margin-top: 6px; }

  /* Streaming text caret */
  .typing-caret::after {
    content: "▍";
    display: inline-block;
    margin-left: 2px;
    color: var(--text);
    animation: blink 1s steps(2) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  /* Loading dots */
  .dot-loader { display: inline-flex; gap: 4px; align-items: center; }
  .dot-loader span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-3);
    animation: bounce 1.2s infinite;
  }
  .dot-loader span:nth-child(2) { animation-delay: 0.15s; }
  .dot-loader span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
  }

  /* Tag pill */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    background: var(--bg-2);
    color: var(--text-2);
    font-weight: 500;
  }
  .tag.green { background: var(--accent-soft); color: var(--success); }
  .tag.red { background: #f7e8e4; color: var(--danger); }
  .tag.amber { background: #f5ecd6; color: var(--warn); }
  [data-theme="claude"] .tag.green { background: #e4eddb; color: #5c7c4f; }

  /* Empty state */
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
    color: var(--text-3);
  }
  .empty-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--bg-2);
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    color: var(--text-3);
  }
  .empty-title {
    font-size: 22px;
    color: var(--text);
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .empty-sub { font-size: 14px; color: var(--text-3); max-width: 420px; }

  /* Fade-in */
  .fade-in { animation: fadeIn 0.25s ease both; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  /* ── Alexa-Ready shared primitives ────────────────────────── */
  /* Thin score progress bar */
  .progress-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-2);
    overflow: hidden;
  }
  .progress-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--text);
    transition: width 0.6s cubic-bezier(.2,.7,.2,1);
  }
  .progress-bar.good > span { background: var(--success); }
  .progress-bar.warn > span { background: var(--warn); }
  .progress-bar.danger > span { background: var(--danger); }

  /* Score pill — number + status word */
  .score-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--card);
  }
  .score-pill .num {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.02em;
    min-width: 22px;
    text-align: center;
  }
  .score-pill.good { background: var(--accent-soft); border-color: transparent; color: var(--success); }
  .score-pill.warn { background: #f5ecd6; border-color: transparent; color: var(--warn); }
  .score-pill.risk { background: #f6e7d9; border-color: transparent; color: #b5662b; }
  .score-pill.danger { background: #f7e8e4; border-color: transparent; color: var(--danger); }

  /* Metric card — compact KPI tile */
  .metric-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .metric-card .metric-label {
    font-size: 12px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .metric-card .metric-value {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.025em;
    line-height: 1.05;
  }
  .metric-card .metric-sub { font-size: 12px; color: var(--text-3); }

  /* Risk row — one line of the 不推荐原因榜 */
  .risk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
  }
  .risk-row:last-child { border-bottom: none; }
  .risk-row .risk-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-2);
    overflow: hidden;
  }
  .risk-row .risk-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--danger);
    opacity: 0.55;
  }

  /* Priority chip — P0/P1/P2 */
  .prio {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 22px; border-radius: 5px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    font-family: "JetBrains Mono", monospace;
  }
  .prio.p0 { background: #f7e8e4; color: var(--danger); }
  .prio.p1 { background: #f5ecd6; color: var(--warn); }
  .prio.p2 { background: var(--bg-2); color: var(--text-3); }

  /* Hide chrome in print etc */
  @media (max-width: 880px) {
    .tool-input-layout { grid-template-columns: 1fr !important; }
    .tool-input-layout > div:last-child { display: none; }
  }
  /* 3-pane tool shell — collapse to stacked columns on smaller widths */
  @media (max-width: 1300px) {
    .tool-shell-cols { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.45fr) !important; }
    .tool-shell-cols > .hist-pane { display: none; }
  }
  @media (max-width: 960px) {
    .tool-shell-cols { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 900px) {
    .sidebar { display: none; }
    .app { grid-template-columns: 1fr; }
  }

  /* 新对话历史栏 */
  .hist-item:hover { background: var(--hover) !important; color: var(--text) !important; }
  .hist-del:hover { background: var(--border-strong); color: var(--text) !important; }

  /* ── Mobile chrome (hidden on desktop) ─────────────────────── */
  .mobile-topbar { display: none; }
  .mobile-tabbar { display: none; }
  .mobile-backdrop { display: none; }

  @media (max-width: 900px) {
    .app { grid-template-columns: 1fr !important; }
    .topbar { display: none; }

    /* Sidebar becomes a slide-in drawer */
    .sidebar {
      display: flex !important;
      position: fixed; top: 0; left: 0; bottom: 0;
      width: 284px; max-width: 84vw;
      z-index: 60;
      transform: translateX(-100%);
      transition: transform 0.26s cubic-bezier(.2,.7,.2,1);
      box-shadow: 0 0 50px rgba(20,15,5,0.22);
      overflow-y: auto;
    }
    .app.mobile-nav-open .sidebar { transform: translateX(0); }

    .mobile-backdrop {
      display: block; position: fixed; inset: 0;
      background: rgba(20,15,5,0.34); z-index: 55;
      opacity: 0; pointer-events: none; transition: opacity 0.26s ease;
    }
    .app.mobile-nav-open .mobile-backdrop { opacity: 1; pointer-events: auto; }

    .mobile-topbar {
      display: flex; align-items: center; gap: 10px;
      position: sticky; top: 0; z-index: 40;
      background: var(--bg); border-bottom: 1px solid var(--border);
      padding: 9px 12px;
    }

    .mobile-tabbar {
      display: grid; grid-template-columns: repeat(4, 1fr);
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
      background: var(--surface); border-top: 1px solid var(--border);
      padding: 6px 4px;
      padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .mobile-tab {
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      background: none; border: none; cursor: pointer;
      padding: 6px 0; font-size: 11px; color: var(--text-3);
      transition: color 0.12s ease;
    }
    .mobile-tab.active { color: var(--text); }
    .mobile-tab.active svg { color: var(--accent); }

    .content { padding: 16px 16px 84px !important; }
    .payoneer-native-head, .payoneer-table-toolbar { align-items: flex-start; flex-direction: column; }
    .payoneer-analysis-metrics { grid-template-columns: 1fr; }
    .account-info-head, .account-info-toolbar { align-items: flex-start; flex-direction: column; }
    .settings-shell { grid-template-columns: 1fr; min-height: 0; }
    .settings-sidebar { border-right: 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
    .settings-nav-item { padding: 9px 10px; font-size: 13px; gap: 8px; }
    .settings-content { padding: 22px 18px; }
    .settings-metrics { grid-template-columns: 1fr; }
    .payoneer-search { width: min(100%, 280px); }
    .payoneer-native-table-wrap { min-height: 380px; }

    /* Home shell: drop the in-page history rail, go full-width column */
    .home-shell { margin: -16px -16px -84px !important; height: calc(100dvh - 53px) !important; }
    .home-rail { display: none !important; }
  }