:root {
      --bg: #f5f5f7;
      --bg-elevated: rgba(255, 255, 255, 0.72);
      --surface: #ffffff;
      --surface-2: #f5f5f7;
      --text: #1d1d1f;
      --text-secondary: #6e6e73;
      --text-tertiary: #86868b;
      --separator: rgba(0, 0, 0, 0.08);
      --blue: #0071e3;
      --blue-hover: #0077ed;
      --blue-soft: rgba(0, 113, 227, 0.1);
      --green: #34c759;
      --green-soft: rgba(52, 199, 89, 0.12);
      --green-text: #1a7f37;
      --red: #ff3b30;
      --red-soft: rgba(255, 59, 48, 0.12);
      --orange: #ff9f0a;
      --orange-soft: rgba(255, 159, 10, 0.14);
      --orange-text: #b45309;
      --chip: rgba(0, 0, 0, 0.05);
      --input-bg: rgba(0, 0, 0, 0.03);
      --code-bg: rgba(0, 0, 0, 0.04);
      --glow-a: rgba(0, 113, 227, 0.08);
      --glow-b: rgba(175, 82, 222, 0.06);
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
      --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
      --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
      --toast-bg: rgba(29, 29, 31, 0.92);
      --toast-err: rgba(255, 59, 48, 0.95);
      --focus-border: rgba(0, 113, 227, 0.55);
      --ring: var(--blue-soft);
      --scrim: rgba(0, 0, 0, 0.42);
      --radius: 18px;
      --radius-sm: 12px;
      --radius-xs: 8px;
      --radius-lg: 22px;
      --radius-pill: 980px;
      --control-h: 42px;
      --control-h-sm: 36px;
      --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
        sans-serif;
      --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
      --theme-icon-sun: none;
      --theme-icon-moon: inline;
      --safe-t: env(safe-area-inset-top, 0px);
      --safe-b: env(safe-area-inset-bottom, 0px);
      --safe-l: env(safe-area-inset-left, 0px);
      --safe-r: env(safe-area-inset-right, 0px);
      --nav-h: 56px;
      /* Fluid page gutter + content width: continuous phone → 4K, no jumps */
      --gutter: clamp(14px, 3.4vw, 26px);
      --content-max: 1080px;
      /* ---- Liquid glass ----
         Layered translucency: tinted base + blurred backdrop + specular rim
         (bright top edge, dim bottom edge) that reads as glass thickness
         rather than a flat frosted panel. */
      --glass-bg: rgba(255, 255, 255, 0.6);
      --glass-bg-strong: rgba(255, 255, 255, 0.76);
      --glass-blur: 24px;
      --glass-hi: rgba(255, 255, 255, 0.95);
      --glass-lo: rgba(255, 255, 255, 0.3);
      --glass-ring: rgba(0, 0, 0, 0.07);
      --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
      --sk-sheen: rgba(255, 255, 255, 0.6);
      /* ---- 动态玻璃：滚动深度驱动 ---- */
      --glass-rgb: 255, 255, 255;
      --glass-a-min: 0.3;
      --glass-a-max: 0.76;
      --glass-blur-min: 4px;
      --glass-blur-max: 24px;
      --glass-progress: 0;
      --glass-a: calc(var(--glass-a-min) + (var(--glass-a-max) - var(--glass-a-min)) * var(--glass-progress));
      --glass-blur-live: calc(var(--glass-blur-min) + (var(--glass-blur-max) - var(--glass-blur-min)) * var(--glass-progress));
    }
    @media (min-width: 1600px) {
      :root { --content-max: 1240px; }
    }

    html[data-theme="dark"] {
      --bg: #000000;
      --bg-elevated: rgba(28, 28, 30, 0.72);
      --surface: #1c1c1e;
      --surface-2: #2c2c2e;
      --text: #f5f5f7;
      --text-secondary: #a1a1a6;
      --text-tertiary: #6e6e73;
      --separator: rgba(255, 255, 255, 0.1);
      --blue: #0a84ff;
      --blue-hover: #409cff;
      --blue-soft: rgba(10, 132, 255, 0.18);
      --green: #30d158;
      --green-soft: rgba(48, 209, 88, 0.16);
      --green-text: #30d158;
      --red: #ff453a;
      --red-soft: rgba(255, 69, 58, 0.16);
      --orange: #ff9f0a;
      --orange-soft: rgba(255, 159, 10, 0.16);
      --orange-text: #ffb340;
      --chip: rgba(255, 255, 255, 0.08);
      --input-bg: rgba(255, 255, 255, 0.06);
      --code-bg: rgba(255, 255, 255, 0.08);
      --glow-a: rgba(10, 132, 255, 0.12);
      --glow-b: rgba(191, 90, 242, 0.1);
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
      --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.45);
      --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
      --toast-bg: rgba(44, 44, 46, 0.95);
      --toast-err: rgba(255, 69, 58, 0.95);
      --focus-border: rgba(10, 132, 255, 0.65);
      --ring: var(--blue-soft);
      --scrim: rgba(0, 0, 0, 0.55);
      --theme-icon-sun: inline;
      --theme-icon-moon: none;
      --glass-bg: rgba(30, 30, 32, 0.58);
      --glass-bg-strong: rgba(32, 32, 34, 0.78);
      --glass-hi: rgba(255, 255, 255, 0.16);
      --glass-lo: rgba(255, 255, 255, 0.04);
      --glass-ring: rgba(255, 255, 255, 0.1);
      --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
      --sk-sheen: rgba(255, 255, 255, 0.08);
      --glass-rgb: 30, 30, 32;
      --glass-a-min: 0.32;
      --glass-a-max: 0.78;
    }

    * { box-sizing: border-box; }
    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color-scheme: light;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: var(--chip) transparent;
    }
    /* Thin Apple-like scrollbars (Windows/Linux) */
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
      background: var(--chip);
      border-radius: 99px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    *::-webkit-scrollbar-thumb:hover { background: var(--separator); background-clip: padding-box; }
    html[data-theme="dark"] { color-scheme: dark; }
    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100dvh;
      font-family: var(--font);
      color: var(--text);
      background:
        radial-gradient(ellipse 112% 62% at -8% 112%, transparent 47%, rgba(0, 113, 227, 0.48) 48%, rgba(90, 200, 250, 0.3) 57%, rgba(52, 199, 180, 0.16) 66%, transparent 67%),
        radial-gradient(ellipse 106% 58% at 108% -12%, transparent 46%, rgba(255, 105, 180, 0.38) 47%, rgba(175, 82, 222, 0.25) 57%, rgba(90, 200, 250, 0.14) 66%, transparent 67%),
        linear-gradient(135deg, #e8f3ff 0%, #f1fbff 42%, #fff0f7 100%);
      background-attachment: fixed;
      line-height: 1.47;
      transition: background 0.25s var(--ease), color 0.2s var(--ease);
      overflow-x: hidden;
    }
    html[data-theme="dark"] body {
      background:
        radial-gradient(ellipse 112% 62% at -8% 112%, transparent 47%, rgba(10, 132, 255, 0.5) 48%, rgba(100, 210, 255, 0.28) 58%, rgba(48, 209, 88, 0.12) 66%, transparent 67%),
        radial-gradient(ellipse 106% 58% at 108% -12%, transparent 46%, rgba(255, 55, 150, 0.38) 47%, rgba(191, 90, 242, 0.32) 57%, rgba(10, 132, 255, 0.16) 66%, transparent 67%),
        linear-gradient(135deg, #080d18 0%, #11131d 48%, #1a0d18 100%);
    }
    body.has-custom-background {
      background: linear-gradient(rgba(245, 245, 247, 0.68), rgba(245, 245, 247, 0.76)), var(--site-background-image) center / cover fixed, var(--bg);
    }
    html[data-theme="dark"] body.has-custom-background {
      background: linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.72)), var(--site-background-image) center / cover fixed, var(--bg);
    }
    button,
.btn,
.tabs button,
.var-chip,
.vis-seg label{
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .btn,
.tabs button,
.var-chip,
.fab-refresh,
.badge,
.tag,
.vis-seg label{
      -webkit-user-select: none;
      user-select: none;
    }

    a { color: var(--blue); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* ---------- Liquid glass material ---------- */
    .glass {
      position: relative;
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(180%);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
      box-shadow:
        inset 0 1px 0 0 var(--glass-hi),
        inset 0 -1px 0 0 var(--glass-lo),
        var(--glass-shadow);
    }
    .glass-strong { background: var(--glass-bg-strong); }
    /* 吸顶层专用：底下有内容滚过时才逐渐加深，滚动到顶部时近乎透明。
       与 iOS 导航栏一致；.glass 保持静态，供不随滚动变化的浮层使用。 */
    .glass-dynamic {
      background: rgba(var(--glass-rgb), var(--glass-a));
      backdrop-filter: blur(var(--glass-blur-live)) saturate(180%);
      -webkit-backdrop-filter: blur(var(--glass-blur-live)) saturate(180%);
      box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, calc(0.95 * var(--glass-progress))),
        0 1px 0 0 rgba(0, 0, 0, calc(0.08 * var(--glass-progress)));
    }
    html[data-theme="dark"] .glass-dynamic {
      box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, calc(0.16 * var(--glass-progress))),
        0 1px 0 0 rgba(255, 255, 255, calc(0.1 * var(--glass-progress)));
    }
    .wa-lens-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
    /* 折射只在 Chromium 桌面开启，见下方网关脚本。降低模糊让折射看得见——
       已经糊成一团的内容没法再折射，两者此消彼长。 */
    html.wa-lens .glass,
    html.wa-lens .glass-strong {
      backdrop-filter: blur(14px) saturate(180%) url(#waGlassLens);
      -webkit-backdrop-filter: blur(14px) saturate(180%);
    }
    /* Specular rim traced around the shape, masked to a 1px ring so the fill
       stays clear. Gives the edge-lit look that separates liquid glass from
       plain frosted blur. */
    .glass-rim::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(145deg, var(--glass-hi) 0%, transparent 38%, transparent 62%, var(--glass-lo) 100%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      pointer-events: none;
      z-index: 3;
    }
    .glass-rim > * { position: relative; z-index: 2; }

    /* ---------- Staggered entrance for injected cards ---------- */
    @keyframes riseIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: none; }
    }
    /* "backwards", not "both": a forwards-filling animation keeps holding its
       final keyframe values (transform: none) at the animation cascade origin,
       which outranks normal declarations and would permanently kill */
    .account-info { margin-bottom:18px; }
    .account-info-main { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
    .account-details { display:flex; align-items:center; gap:12px 28px; flex-wrap:wrap; }
    .account-detail { min-width:140px; }
    .account-detail .info-label { display:block; color:var(--text-tertiary); font-size:12px; }
    .account-detail strong { display:block; margin-top:5px; font-size:16px; white-space:nowrap; }
    .info-metric { min-width:0; padding:14px 16px; border:1px solid var(--separator); border-radius:8px; background:var(--surface-2); }
    .info-metric .info-label { display:block; color:var(--text-tertiary); font-size:12px; }
    .info-metric strong { display:block; margin-top:5px; font-size:18px; }
    .info-metric strong { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .account-info .info-label { display:block; color:var(--text-tertiary); font-size:12px; }
    .account-info strong { display:block; margin-top:5px; font-size:18px; }
    #accountInfo { display:grid; gap:16px; }
    #accountInfo .account-details { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,220px)); gap:12px; }
    #accountInfo .account-detail { min-width:0; padding:14px 16px; border:1px solid var(--separator); border-radius:10px; background:var(--surface-2); }
    #accountInfo .account-detail strong { font-size:17px; }
    #accountInfo .membership-summary { margin-top:0; padding:16px 18px; border-radius:12px; background:linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 88%, var(--accent) 12%), var(--surface-2)); }
    #accountInfo .membership-summary strong { font-size:18px; }
    .account-info-foot { display:flex; align-items:center; gap:24px; margin-top:16px; color:var(--text-secondary); font-size:13px; }
    .account-info-foot .agent-balance { color:var(--text); font-weight:600; }
    .account-info-foot .btn { margin-left:auto; }
    .membership-summary { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; padding:14px 16px; border:1px solid var(--separator); border-radius:10px; background:var(--surface-2); }
    .membership-summary strong { margin:0; font-size:16px; }
    .membership-summary > span:last-child { color:var(--text-secondary); font-size:13px; }
    .home-membership { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; padding:14px 16px; border:1px solid var(--separator); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); }
    .home-membership:empty { display:none; }
    .home-membership-main { display:flex; align-items:center; gap:12px; min-width:0; }
    .home-membership-main strong { white-space:nowrap; font-size:15px; }
    .home-membership-main > span:last-child { min-width:0; overflow:hidden; color:var(--text-secondary); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
    .card-stats { margin-bottom:18px; }
    .ledger-type-scroll { width:100%; overflow-x:auto; scrollbar-width:thin; }
    .ledger-type-filter { width:max-content; min-width:100%; }
    .ledger-type-filter button { white-space:nowrap; }
    .account-tabs { display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--separator); margin:0 0 18px; }
    .account-tabs button { border:0; background:transparent; padding:9px 14px; color:var(--text-secondary); font:inherit; cursor:pointer; border-bottom:2px solid transparent; }
    .account-tabs button.active { color:var(--blue); border-bottom-color:var(--blue); font-weight:600; }
    .account-tab-actions { display:flex; gap:8px; margin-left:auto; padding-bottom:7px; }
    .account-tab-actions .btn { border-bottom:0; }
    /* 用户端内容量较少，直接展示完整工作台；仅区块内部保留 Tab。 */
    .form-stack { display:grid; gap:12px; }
    .plan-picker { position:relative; min-width:260px; }
    .plan-picker.open { z-index:40; }
    .plan-picker-toggle { width:100%; justify-content:space-between; text-align:left; }
    .plan-picker-menu { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40; display:none; max-height:320px; overflow:auto; padding:6px; border:1px solid var(--separator); border-radius:10px; background:var(--surface); box-shadow:var(--shadow-lg); }
    .plan-picker.open .plan-picker-menu { display:grid; gap:3px; }
    .plan-picker-option { border:0; background:transparent; border-radius:7px; padding:10px; text-align:left; font:inherit; color:var(--text-primary); cursor:pointer; }
    .plan-picker-option:hover, .plan-picker-option.selected { background:var(--blue-soft); color:var(--blue); }
    .generate-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
    .generate-card-head h2 { margin:0 0 6px; font-size:22px; }
    .generate-card-form { position:relative; z-index:4; display:grid; grid-template-columns:minmax(220px,1fr) 120px auto; gap:10px; align-items:center; margin:16px 0 12px; }
    .generate-card-form .plan-picker { min-width:0; }
    .generate-card-form input { min-width:0; width:100%; }
    .generate-card-output { display:block; width:100%; min-height:120px; margin-top:8px; }
    .card-filter { display:flex; align-items:center; gap:10px; margin:0 0 14px; }
    .card-filter input { width:min(280px,100%); }
    .card-status-filter { display:flex; gap:4px; padding:4px; border:1px solid var(--separator); border-radius:10px; background:var(--surface-2); }
    .card-status-filter button, .plan-segment button { min-height:36px; border:0; border-radius:7px; padding:7px 12px; background:transparent; color:var(--text-secondary); font:inherit; font-size:13px; cursor:pointer; }
    .card-status-filter button.active, .plan-segment button.active { background:var(--surface); color:var(--blue); box-shadow:var(--shadow-sm); font-weight:600; }
    .plan-segment { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
    .plan-segment button { min-height:92px; border:1px solid var(--separator); background:var(--surface-2); text-align:left; display:grid; align-content:center; gap:5px; }
    .plan-segment button.active { border-color:var(--blue); background:var(--blue-soft); box-shadow:0 0 0 1px var(--blue); }
    .plan-segment button strong { color:var(--text); font-size:15px; }
    .plan-segment button span { color:var(--text-secondary); font-size:12px; }
    .card-modal { width:min(560px,100%); }
    .card-modal .summary-bar { margin:12px 0 0; }
    .card-modal .generate-card-form { display:block; margin:14px 0; }
    .card-modal .generate-card-form label { display:grid; gap:7px; color:var(--text-secondary); font-size:13px; font-weight:500; }
    .card-modal .generate-card-form input { min-height:44px; font-size:16px; }
    .card-modal .card-modal-actions { justify-content:flex-end; margin-top:14px; }
    .account-card-mobile { padding:14px; margin-bottom:10px; border:1px solid var(--separator); border-radius:10px; background:var(--surface-2); }
    .account-card-mobile:last-child { margin-bottom:0; }
    .account-card-head, .account-card-meta, .account-card-code { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .account-card-head strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }
    .account-card-code { margin-top:12px; }
    .account-card-code code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .account-card-meta { margin-top:10px; color:var(--text-secondary); font-size:13px; }
    .account-card-meta small { white-space:nowrap; }
    .ledger-mobile-card { padding:14px; margin-bottom:10px; border:1px solid var(--separator); border-radius:10px; background:var(--surface-2); }
    .ledger-mobile-card:last-child { margin-bottom:0; }
    .ledger-mobile-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .ledger-mobile-head strong { font-size:15px; }
    .ledger-mobile-head time { color:var(--text-tertiary); font-size:12px; white-space:nowrap; }
    .ledger-mobile-values { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
    .ledger-mobile-values > div { min-width:0; }
    .ledger-mobile-values span { display:block; color:var(--text-tertiary); font-size:12px; }
    .ledger-mobile-values strong { display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-variant-numeric:tabular-nums; }
    .ledger-mobile-values .amount-in { color:var(--green-text); }
    .ledger-mobile-values .amount-out { color:var(--red); }
    .persona-test-modal { width:min(560px,100%); display:flex; flex-direction:column; overflow:hidden; }
    .persona-test-log { min-height:220px; max-height:45vh; overflow:auto; padding:14px; background:var(--surface-2); border:1px solid var(--separator); border-radius:10px; }
    .persona-test-compose { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:12px; }
    .persona-test-modal .modal-footer { display:flex; justify-content:flex-end; margin-top:14px; }
    @media (max-width: 640px) {
      .account-info-main { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
      .account-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
      .account-detail { min-width:0; }
      .account-info-foot { align-items:flex-start; flex-wrap:wrap; gap:8px 16px; }
      .account-info-foot .btn { width:100%; margin:8px 0 0; }
      .membership-summary { align-items:flex-start; flex-direction:column; gap:7px; padding:12px; }
      .account-tabs { align-items:stretch; flex-wrap:wrap; }
      .account-tab-actions { width:100%; margin:0; order:-1; }
      .account-tab-actions .btn { flex:1; }
      .generate-card-form { grid-template-columns:minmax(0,1fr) auto; }
      .generate-card-form .plan-picker { grid-column:1 / -1; }
      .card-filter { align-items:stretch; flex-direction:column; }
      .card-filter input { width:100%; min-height:44px; }
      .card-status-filter { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
      .card-status-filter button { min-width:0; padding:8px 4px; }
      .ledger-type-filter { display:flex; }
      .ledger-type-filter button { min-width:max-content; padding:8px 12px; }
      .plan-segment { grid-template-columns:1fr; }
    }
    .persona-card:hover { transform: translateY(-1px) }
    .stagger > * { animation: riseIn 0.42s var(--ease) backwards; }
    .stagger > *:nth-child(1) { animation-delay: 0.02s; }
    .stagger > *:nth-child(2) { animation-delay: 0.06s; }
    .stagger > *:nth-child(3) { animation-delay: 0.1s; }
    .stagger > *:nth-child(4) { animation-delay: 0.14s; }
    .stagger > *:nth-child(5) { animation-delay: 0.18s; }
    .stagger > *:nth-child(6) { animation-delay: 0.22s; }
    .stagger > *:nth-child(7) { animation-delay: 0.26s; }
    .stagger > *:nth-child(8) { animation-delay: 0.3s; }
    .stagger > *:nth-child(n + 9) { animation-delay: 0.34s; }

    /* ---------- Generic busy button spinner ---------- */
    .btn.is-busy {
      pointer-events: none;
      position: relative;
      color: transparent !important;
    }
    .btn.is-busy > * { visibility: hidden; }
    .btn.is-busy::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 15px;
      height: 15px;
      margin: -8px 0 0 -8px;
      border-radius: 50%;
      border: 2px solid var(--spin-track, rgba(0, 0, 0, 0.2));
      border-top-color: var(--spin-head, var(--text));
      animation: spin 0.7s linear infinite;
    }
    .btn-primary.is-busy, .btn-danger.is-busy { --spin-track: rgba(255, 255, 255, 0.35); --spin-head: #fff; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ---------- Top loading bar (in-flight requests) ---------- */
    .load-bar {
      position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
      pointer-events: none; opacity: 0; background: transparent;
      transition: opacity 0.15s;
    }
    .load-bar.on {
      opacity: 1;
      background: linear-gradient(90deg, transparent, var(--blue), transparent);
      background-size: 40% 100%;
      animation: loadSlide 0.9s linear infinite;
    }
    @keyframes loadSlide { from { background-position: -40% 0; } to { background-position: 140% 0; } }
    .brand-mark {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      flex-shrink: 0;
      display: inline-grid;
      place-items: center;
      overflow:hidden;
      background:var(--surface-2);
      box-shadow:var(--shadow-sm);
    }
    .brand-mark img { width:100%; height:100%; display:block; object-fit:cover; }

    /* Buttons */
    .btn {
      appearance: none;
      border: none;
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.01em;
      border-radius: var(--radius-pill);
      padding: 9px 18px;
      min-height: var(--control-h-sm);
      white-space: nowrap;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: transform 0.15s var(--ease), background 0.15s var(--ease), opacity 0.15s;
    }
    a.btn:hover { text-decoration: none; }
    .btn:active { transform: scale(0.98); }
    .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
    .btn:focus-visible,
.tabs button:focus-visible,
.var-chip:focus-visible,
.fab-refresh:focus-visible,
a:focus-visible{
      outline: 2px solid var(--blue);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--ring);
    }
    .btn-primary {
      background: var(--blue);
      color: #fff;
      box-shadow: 0 1px 2px color-mix(in srgb, var(--blue) 28%, transparent);
    }
    .btn-primary:hover:not(:disabled) { background: var(--blue-hover); }
    .btn-secondary {
      background: var(--chip);
      color: var(--text);
    }
    .btn-secondary:hover:not(:disabled) { filter: brightness(0.96); }
    html[data-theme="dark"] .btn-secondary:hover:not(:disabled) { filter: brightness(1.15); }
    .btn-danger {
      background: var(--red-soft);
      color: var(--red);
    }
    .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 18%, transparent); }
    .btn-ghost {
      background: transparent;
      color: var(--blue);
      padding: 9px 12px;
    }
    .btn-ghost:hover:not(:disabled) {
      background: var(--blue-soft);
      color: var(--blue);
    }
    .btn-lg { padding: 14px 28px; font-size: 16px; }

    /* Layout */
    .wrap {
      width: min(var(--content-max), 100%);
      margin: 0 auto;
      padding: clamp(20px, 3vw, 36px)
        max(var(--gutter), var(--safe-r))
        calc(clamp(56px, 7vw, 80px) + var(--safe-b))
        max(var(--gutter), var(--safe-l));
    }
    .page-title {
      font-size: clamp(25px, 4.6vw, 40px);
      font-weight: 700;
      letter-spacing: -0.03em;
      margin: 0 0 8px;
      line-height: 1.1;
    }
    .page-sub {
      margin: 0 0 clamp(20px, 3vw, 32px);
      color: var(--text-secondary);
      font-size: clamp(14.5px, 1.9vw, 17px);
      font-weight: 400;
    }

    .card {
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--separator);
      padding: 24px 28px;
      margin-bottom: 20px;
    }
    .card-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }
    .card h2 {
      margin: 0;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }
    .card-desc {
      margin: 4px 0 0;
      font-size: 14px;
      color: var(--text-tertiary);
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-bottom: 18px;
    }

    input, select {
      font-family: inherit;
      font-size: 14px;
      color: var(--text);
      background: var(--input-bg);
      border: 1px solid var(--separator);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
      min-width: 0;
    }
    .toolbar input,
    .toolbar select,
    .form-field input,
    .form-fields input,
    .name-edit input {
      min-width: 160px;
    }
    input:focus, select:focus {
      border-color: var(--focus-border);
      box-shadow: 0 0 0 4px var(--ring);
    }
    input::placeholder { color: var(--text-tertiary); }

    .table-wrap {
      overflow-x: auto;
      margin: 0;
      -webkit-overflow-scrolling: touch;
      border-radius: var(--radius-xs);
    }
    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 14px;
      table-layout: auto;
    }
    th {
      text-align: left;
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      padding: 10px 12px;
      border-bottom: 1px solid var(--separator);
      white-space: nowrap;
    }
    td {
      padding: 14px 12px;
      border-bottom: 1px solid var(--separator);
      vertical-align: middle;
      transition: background 0.12s;
    }
    tr:last-child td { border-bottom: none; }
    tbody tr:hover td { background: var(--surface-2); }
    code {
      font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
      font-size: 12px;
      color: var(--text-secondary);
      background: var(--code-bg);
      padding: 3px 7px;
      border-radius: 6px;
    }

    /* Peers table: prevent column crush / vertical CJK text */
    table.peers-table {
      table-layout: fixed;
      min-width: 720px;
    }
    table.peers-table th:nth-child(1),
    table.peers-table td:nth-child(1) { width: 22%; }
    table.peers-table th:nth-child(2),
    table.peers-table td:nth-child(2) { width: 14%; }
    table.peers-table th:nth-child(3),
    table.peers-table td:nth-child(3) { width: 10%; }
    table.peers-table th:nth-child(4),
    table.peers-table td:nth-child(4) { width: 22%; }
    table.peers-table th:nth-child(5),
    table.peers-table td:nth-child(5) { width: 12%; }
    table.peers-table th:nth-child(6),
    table.peers-table td:nth-child(6) { width: 20%; }
    table.peers-table td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    table.peers-table td.col-persona,
    table.peers-table td.col-actions {
      overflow: visible;
      white-space: normal;
    }
    table.peers-table .id-cell {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    table.peers-table .id-cell code {
      display: block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
    }
    table.peers-table .id-cell .sub {
      font-size: 11px;
      color: var(--text-tertiary);
      overflow: hidden;
      text-overflow: ellipsis;
    }
    table.peers-table .persona-select {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      padding: 8px 10px;
      font-size: 13px;
    }
    #botsPanel .persona-picker { width:100%; position:relative; }
    #botsPanel .persona-picker summary {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      height:40px;
      padding:0 12px;
      border:1px solid var(--separator);
      border-radius:10px;
      background:var(--surface-2);
      color:var(--text);
      cursor:pointer;
      list-style:none;
      user-select:none;
    }
    #botsPanel .persona-picker summary::-webkit-details-marker { display:none; }
    #botsPanel .persona-picker summary::after {
      content:"";
      width:7px;
      height:7px;
      flex:0 0 7px;
      border-right:1.5px solid var(--text-secondary);
      border-bottom:1.5px solid var(--text-secondary);
      transform:rotate(45deg) translateY(-2px);
      transition:transform .15s ease;
    }
    #botsPanel .persona-picker[open] summary {
      border-color:var(--blue);
      box-shadow:0 0 0 3px var(--blue-soft);
    }
    #botsPanel .persona-picker[open] summary::after { transform:rotate(225deg) translate(-1px,-1px); }
    #botsPanel .persona-options {
      position:absolute;
      z-index:20;
      top:calc(100% + 6px);
      left:0;
      right:0;
      display:grid;
      gap:3px;
      max-height:240px;
      overflow:auto;
      padding:6px;
      border:1px solid var(--separator);
      border-radius:10px;
      background:var(--surface);
      box-shadow:var(--shadow-lg);
    }
    #botsPanel .persona-option {
      width:100%;
      padding:9px 10px;
      border:0;
      border-radius:7px;
      background:transparent;
      color:var(--text);
      text-align:left;
      cursor:pointer;
    }
    #botsPanel .persona-option:hover { background:var(--surface-2); }
    #botsPanel .persona-option.active { background:var(--blue-soft); color:var(--blue); }
    table.peers-table .col-actions .row-actions {
      flex-wrap: nowrap;
      gap: 6px;
    }
    table.peers-table .col-actions .btn {
      flex-shrink: 0;
    }
    table.peers-table .badge {
      white-space: nowrap;
      flex-shrink: 0;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: var(--radius-pill);
      font-size: 12px;
      font-weight: 500;
      background: var(--chip);
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .badge::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.7;
      flex-shrink: 0;
    }
    .badge.ok {
      background: var(--green-soft);
      color: var(--green-text);
    }
    .badge.warn {
      background: var(--orange-soft);
      color: var(--orange-text);
    }
    .badge.err {
      background: var(--red-soft);
      color: var(--red);
    }
    .badge.accent {
      background: var(--blue-soft);
      color: var(--blue);
    }

    table td .row-actions {
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 8px;
    }
    table td .row-actions .btn {
      white-space: nowrap;
    }
    .row-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }



    /* Specular sweep skeleton */
    .skeleton {
      position: relative;
      overflow: hidden;
      background: var(--chip);
      border-radius: 10px;
      height: 14px;
    }
    .skeleton::after {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, var(--sk-sheen), transparent);
      animation: skSweep 1.5s var(--ease) infinite;
    }
    @keyframes skSweep { to { transform: translateX(100%); } }
    .sk-rows { display: grid; gap: 10px; padding: 6px 0; }
    .sk-rows .skeleton { height: 48px; border-radius: 12px; }
    .sk-tile { height: 190px; border-radius: var(--radius); }
    /* boot splash while /auth/me resolves — avoids flashing the login hero */
    #bootSplash {
      min-height: calc(100dvh - var(--nav-h) - var(--safe-t));
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #bootSplash .brand-mark {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      font-size: 22px;
      animation: bootPulse 1.2s ease-in-out infinite;
    }
    @keyframes bootPulse {
      0%, 100% { opacity: 0.45; transform: scale(0.96); }
      50% { opacity: 1; transform: scale(1); }
    }
    .tabs {
      display: flex;
      gap: 6px;
      flex-wrap: nowrap;
      margin-bottom: 24px;
      margin-left: auto;
      margin-right: auto;
      padding: 4px;
      /* 底色与模糊来自 .glass-dynamic，边缘高光来自 .glass-rim。
         position: relative 原先由 .glass 提供，换成动态玻璃后要在这里补回，
         否则桌面端（非 sticky）的 .glass-rim::before 会脱离胶囊定位。 */
      position: relative;
      border-radius: var(--radius-pill);
      width: fit-content;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      overscroll-behavior-x: contain;
    }
    /* 胶囊形状不适合 .glass-dynamic 默认的「上高光 + 下分隔线」，
       改成一圈柔和落影，同样按滚动深度淡入。 */
    .tabs.glass-dynamic { box-shadow: inset 0 1px 0 0 rgba(255,255,255,calc(0.9*var(--glass-progress))), 0 2px 12px rgba(0,0,0,calc(0.06*var(--glass-progress))); }
    html[data-theme="dark"] .tabs.glass-dynamic { box-shadow: inset 0 1px 0 0 rgba(255,255,255,calc(0.14*var(--glass-progress))), 0 2px 12px rgba(0,0,0,calc(0.4*var(--glass-progress))); }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs button {
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      padding: 10px 16px;
      min-height: 40px;
      border-radius: var(--radius-pill);
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: color 0.15s, transform 0.12s var(--ease);
    }
    .tabs button:active { transform: scale(0.96); }
    .tabs button.active {
      background: var(--surface);
      color: var(--text);
      box-shadow: var(--shadow-sm);
    }
    .pane { display: none; }
    .pane.active { display: block; animation: paneIn 0.22s var(--ease); }
    /* opacity-only: transform would create a containing block and break sticky tabs */
    @keyframes paneIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .persona-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 14px;
    }
    @media (min-width: 861px) and (max-width: 1100px) {
      .persona-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }
    }
    .persona-grid > .empty {
      grid-column: 1 / -1;
    }
    .pager {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid var(--separator);
      font-size: 13px;
      color: var(--text-secondary);
    }
    .pager .row-actions { gap: 6px; }
    .pager .btn:disabled { opacity: 0.45; }
    .persona-card {
      background: var(--surface);
      border: 1px solid var(--separator);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: transform 0.15s var(--ease), box-shadow 0.15s;
    }
    .persona-card:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }
    .persona-card h4 {
      margin: 0;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }
    .persona-card .desc {
      margin: 0;
      font-size: 13px;
      color: var(--text-secondary);
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .persona-card .meta-line {
      margin: 0;
      font-size: 12px;
      color: var(--text-secondary);
      font-variant-numeric: tabular-nums;
    }
    .persona-card .card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 2px;
    }
    .persona-card .card-actions .btn {
      min-height: 36px;
    }
    .persona-card .card-links {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 10px;
      align-items: center;
      margin-top: auto;
      padding-top: 2px;
    }
    .persona-card .card-links .btn-ghost {
      padding: 4px 2px;
      font-size: 13px;
      min-height: auto;
    }
    .tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .tag {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: var(--radius-pill);
      background: var(--blue-soft);
      color: var(--blue);
    }
    .form-grid {
      display: grid;
      gap: 16px;
    }
    .form-grid > label,
    .form-field {
      display: grid;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
      min-width: 0;
    }
    .form-grid input,
    .form-grid textarea,
    .form-field input,
    .form-field textarea {
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }
    /* name | desc | tags — 桌面三列，窄屏自动折行 */
    .form-fields {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 12px;
    }
    .form-grid select,
    .form-field select {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      font: inherit;
      color: var(--text);
      background: var(--input-bg);
      border: 1px solid var(--separator);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      outline: none;
    }
    .form-grid select:focus,
    .form-field select:focus {
      border-color: var(--focus-border);
      box-shadow: 0 0 0 4px var(--ring);
    }
    .check-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-top: 4px;
    }
    .check-row input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: var(--blue);
      flex-shrink: 0;
    }
    .llm-prov-list {
      display: grid;
      gap: 10px;
      margin-top: 4px;
    }
    .llm-prov-card {
      display: grid;
      gap: 8px;
      padding: 12px 14px;
      border: 1px solid var(--separator);
      border-radius: var(--radius-sm);
      background: var(--surface-2);
    }
    .llm-prov-card .row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
    }
    .llm-prov-card .meta {
      font-size: 12px;
      color: var(--text-tertiary);
      word-break: break-all;
      line-height: 1.45;
    }
    .llm-prov-card h4 {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
    }
    .badge.soft {
      background: var(--chip);
      color: var(--text-secondary);
    }
    textarea {
      font-family: inherit;
      font-size: 14px;
      color: var(--text);
      background: var(--input-bg);
      border: 1px solid var(--separator);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      min-height: 140px;
      resize: vertical;
      outline: none;
    }
    textarea:focus {
      border-color: var(--focus-border);
      box-shadow: 0 0 0 4px var(--ring);
    }

    /* Persona editor: variable chips + panel */
    .editor-block {
      display: grid;
      gap: 10px;
      padding: 14px 16px 16px;
      background: var(--surface-2);
      border: 1px solid var(--separator);
      border-radius: var(--radius-sm);
    }
    .editor-block > .field-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
    }
    .var-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .var-toolbar .hint {
      font-size: 12px;
      font-weight: 400;
      color: var(--text-tertiary);
      margin-right: 2px;
    }
    .var-chip {
      font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
      font-size: 12px;
      font-weight: 500;
      padding: 6px 12px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--separator);
      background: var(--surface);
      color: var(--blue);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
    }
    .var-chip:hover {
      background: var(--blue-soft);
      border-color: rgba(0, 113, 227, 0.35);
    }
    .var-chip:active { transform: scale(0.97); }
    .editor-help {
      margin: 0;
      font-size: 12px;
      font-weight: 400;
      color: var(--text-tertiary);
      line-height: 1.55;
    }
    .editor-help code {
      font-size: 11px;
    }
    .name-edit {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      min-width: 0;
    }
    .name-edit input {
      min-width: 100px;
      max-width: 160px;
      padding: 8px 12px;
      font-weight: 600;
    }
    /* Proactive contact: compact button + modal (no inline form) */
    .pro-open-btn {
      gap: 6px;
    }
    .pro-open-btn .pro-pill {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 999px;
      line-height: 1.3;
    }
    .pro-open-btn .pro-pill.on {
      background: var(--green-soft, rgba(52, 199, 89, 0.16));
      color: var(--green, #30d158);
    }
    .pro-open-btn .pro-pill.off {
      background: var(--chip);
      color: var(--text-tertiary);
    }
    .pro-open-btn.is-disabled {
      opacity: 0.55;
    }
    .pro-modal-form {
      display: grid;
      gap: 14px;
      margin: 14px 0 4px;
    }
    .pro-modal-form .pro-switch {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 500;
      font-size: 14px;
      cursor: pointer;
      user-select: none;
    }
    .pro-modal-form .pro-switch input {
      width: 18px;
      height: 18px;
      accent-color: var(--blue);
    }
    .pro-modal-form .pro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .pro-modal-form .pro-grid label {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      min-width: 0;
    }
    .pro-modal-form .pro-grid label .hint {
      font-weight: 400;
      opacity: 0.75;
      margin-left: 4px;
    }
    .pro-modal-form .pro-grid input {
      font-size: 14px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--separator);
      background: var(--bg, var(--surface-2));
      color: var(--text);
      width: 100%;
      box-sizing: border-box;
      min-height: 42px;
    }
    .pro-modal-form .pro-grid input:focus {
      outline: none;
      border-color: var(--focus-border);
      box-shadow: 0 0 0 3px var(--ring);
    }
    .pro-modal-form .pro-note {
      margin: 0;
      font-size: 12px;
      color: var(--text-tertiary);
      line-height: 1.5;
    }
    .pro-modal-form .pro-note.warn { color: var(--orange-text); }
    @media (max-width: 520px) {
      .pro-modal-form .pro-grid { grid-template-columns: 1fr; }
    }
    label.peer-pro {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
      color: var(--text-secondary);
      user-select: none;
    }
    label.peer-pro input {
      width: 16px;
      height: 16px;
      margin: 0;
      flex-shrink: 0;
      accent-color: var(--blue, #0a84ff);
    }
    label.peer-pro.is-disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    label.peer-pro .peer-pro-txt { color: var(--text); font-weight: 500; }
    .btn-sm {
      padding: 5px 12px;
      font-size: 13px;
      min-height: 32px;
    }
    @media (pointer: coarse) {
      .btn { min-height: 42px; }
      .btn-sm { min-height: 38px; }
    }
    #pubPrompt {
      min-height: 180px;
      font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
      font-size: 13px;
      line-height: 1.55;
      background: var(--surface);
    }

    /* 可见性分段控件 + 操作栏 */
    .form-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px 16px;
      margin-top: 2px;
      padding-top: 16px;
      border-top: 1px solid var(--separator);
    }
    .vis-seg {
      display: inline-flex;
      padding: 3px;
      background: var(--chip);
      border-radius: var(--radius-pill);
      gap: 2px;
    }
    .vis-seg label {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
      padding: 8px 14px;
      min-height: 36px;
      border-radius: var(--radius-pill);
      transition: color 0.15s, background 0.15s, box-shadow 0.15s;
      -webkit-user-select: none;
      user-select: none;
    }
    .vis-seg label:hover { color: var(--text); }
    .vis-seg input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
      min-width: 0;
      margin: 0;
      padding: 0;
      border: none;
      pointer-events: none;
    }
    .vis-seg label:has(input:checked) {
      background: var(--surface);
      color: var(--text);
      box-shadow: var(--shadow-sm);
    }
    .vis-seg label:has(input:focus-visible) {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }
    .form-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    /* 紧凑空状态 */
    .empty {
      text-align: center;
      padding: 28px 16px;
      color: var(--text-tertiary);
      font-size: 14px;
      line-height: 1.5;
    }
    .empty.compact {
      padding: 20px 12px;
      background: var(--surface-2);
      border: 1px dashed var(--separator);
      border-radius: var(--radius-sm);
    }
    .empty .empty-title {
      display: block;
      font-size: 15px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }
    .empty .btn { margin-top: 12px; }
    /* empty rows aren't interactive — no row-hover flash */
    tbody tr:has(.empty):hover td,
    .empty:hover { background: transparent !important; }

    /* Login gate */
    #loginGate {
      min-height: calc(100dvh - var(--nav-h) - var(--safe-t));
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 20px calc(40px + var(--safe-b));
    }
    .auth-layout { width:min(820px,100%); display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,380px); align-items:center; gap:72px; }
    .auth-intro { text-align:left; animation:heroIn .45s var(--ease) both; }
    .auth-intro .brand-mark { width:64px; height:64px; border-radius:18px; margin-bottom:20px; }
    .auth-intro h1 { margin:0 0 10px; font-size:clamp(34px,5vw,52px); line-height:1.1; letter-spacing:0; }
    .auth-intro p { margin:0; color:var(--text-secondary); font-size:18px; line-height:1.6; }
    .auth-intro .intro-line { margin-top:28px; display:flex; flex-wrap:wrap; gap:14px; color:var(--text-tertiary); font-size:13px; }
    .auth-intro .intro-line span { display:inline-flex; align-items:center; gap:6px; }
    .auth-intro .intro-line .bi { color:var(--blue); }
    .hero {
      width: min(360px, 100%);
      text-align: center;
      padding: 24px;
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      border: 1px solid var(--separator);
      animation: heroIn 0.45s var(--ease) both;
      position: relative;
      overflow: clip;
    }
    @keyframes heroIn {
      from { opacity: 0; transform: translateY(14px) scale(0.985); }
      to { opacity: 1; transform: none; }
    }
    .hero .brand-mark, .hero > h1, .hero > .hero-sub, .hero > .product-points { display:none; }
    .hero > p,
    .hero .hero-sub {
      margin: 0 0 20px;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.55;
    }
    .hero .auth-heading { margin:0 0 18px; font-size:20px; color:var(--text); font-weight:700; }
    .auth-switch {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:5px;
      margin-top:16px;
      color:var(--text-secondary);
      font-size:13px;
    }
    .auth-switch button {
      padding:2px;
      border:0;
      background:transparent;
      color:var(--blue);
      font:inherit;
      font-weight:600;
      cursor:pointer;
    }
    .auth-switch button:hover { text-decoration:underline; }
    .auth-form {
      text-align: left;
      display: grid;
      gap: 12px;
      margin-bottom: 4px;
    }
    .auth-form label {
      display: grid;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
    }
    .auth-field {
      position: relative;
    }
    .auth-field .field-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-tertiary);
      font-size: 15px;
      pointer-events: none;
      line-height: 1;
      z-index: 1;
    }
    .auth-form input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid var(--separator);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 16px;
      background: var(--input-bg);
      color: var(--text);
      font-family: inherit;
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
      min-height: 44px;
      -webkit-appearance: none;
      appearance: none;
    }
    .auth-field input {
      padding-left: 40px;
    }
    .auth-field.has-toggle input {
      padding-right: 44px;
    }
    .auth-code-row { display: grid; grid-template-columns: 1fr 118px; gap: 8px; }
    .auth-code-row .btn { min-height: 44px; padding: 0 12px; white-space: nowrap; }
    .auth-form input:focus {
      border-color: var(--focus-border);
      box-shadow: 0 0 0 4px var(--ring);
      background: var(--surface);
    }
    .auth-form input:read-only {
      background: var(--surface-2);
      color: var(--text);
      cursor: default;
      letter-spacing: 0.04em;
      font-weight: 600;
    }
    .auth-form input:user-invalid:not(:placeholder-shown):not(:focus) {
      border-color: color-mix(in srgb, var(--red) 55%, transparent);
    }
    .auth-form input::placeholder {
      color: var(--text-tertiary);
      font-weight: 400;
    }
    .auth-pw-toggle {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: var(--text-tertiary);
      cursor: pointer;
      display: grid;
      place-items: center;
      font-size: 15px;
      padding: 0;
      font-family: inherit;
      transition: color 0.15s, background 0.15s;
    }
    .auth-pw-toggle:hover {
      color: var(--text);
      background: var(--chip);
    }
    .auth-pw-toggle:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 1px;
    }
    .auth-form .btn {
      width: 100%;
      justify-content: center;
      min-height: 46px;
      font-size: 15px;
      margin-top: 4px;
    }
    .auth-form .btn .bi {
      margin-right: 2px;
    }
    .auth-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 18px 0 14px;
      color: var(--text-tertiary);
      font-size: 12px;
      font-weight: 500;
    }
    .auth-divider::before,
    .auth-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--separator);
    }
    .auth-error {
      color: var(--red);
      font-size: 13px;
      margin: 0 0 12px;
      min-height: 0;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--red-soft);
      text-align: left;
      line-height: 1.45;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .auth-error[hidden] {
      display: none !important;
    }
    .auth-error .auth-error-icon {
      flex-shrink: 0;
      font-size: 15px;
      line-height: 1.35;
      margin-top: 0.5px;
    }
    .auth-error .auth-error-text {
      flex: 1;
      min-width: 0;
    }
    .auth-form .btn.is-loading {
      pointer-events: none;
      opacity: 0.72;
    }
    .auth-form .btn.is-loading .btn-label-idle { display: none; }
    .auth-form .btn .btn-label-busy { display: none; }
    .auth-form .btn.is-loading .btn-label-busy { display: inline-flex; align-items: center; gap: 6px; }
    .auth-form .btn .spin {
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: authSpin 0.7s linear infinite;
      vertical-align: -2px;
    }
    @keyframes authSpin {
      to { transform: rotate(360deg); }
    }
    #loginBtn.btn-lg {
      min-height: 48px;
      font-size: 15px;
      border-radius: var(--radius-pill);
    }
    .auth-footer-note {
      margin: 16px 0 0;
      font-size: 12px;
      color: var(--text-tertiary);
      line-height: 1.45;
    }
    /* List containers — never qr-status (that is inline-flex for status lines) */
    .list-panel {
      display: block;
      width: 100%;
      max-width: 100%;
      font-size: 14px;
      color: var(--text-secondary);
    }
    /* QR modal */
    .qr-modal {
      --qr-size: 200px;
      width:min(420px,100%);
      text-align: center;
    }
    .qr-modal .modal-head { justify-content:center; margin-bottom:14px; }
    .qr-modal-body { display:grid; justify-items:center; }
    .qr-modal .modal-footer { justify-content:center; }
    .qr-status {
      width: fit-content;
      margin: 14px auto 0;
      font-size: 14px;
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      max-width: 100%;
    }
    .qr-status .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--blue);
      flex-shrink: 0;
    }
    .qr-status.wait .dot { animation: qrPulse 1.4s ease infinite; }
    .qr-status.ok .dot { background: var(--green); animation: none; }
    .qr-status.warn .dot { background: var(--orange); animation: none; }
    .qr-status.err .dot { background: var(--red); animation: none; }
    @keyframes qrPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.35; transform: scale(0.8); }
    }
    .qr-skel {
      width: var(--qr-size);
      max-width: 82vw;
      aspect-ratio: 1;
      height: auto;
      border-radius: 12px;
      margin: 0 auto;
    }
    .qr-modal img {
      display: block;
      width: var(--qr-size);
      max-width: 82vw;
      aspect-ratio: 1;
      height: auto;
      border-radius: 12px;
      box-shadow: var(--shadow-md);
      background: #fff;
      padding: 10px;
      margin: 0 auto;
    }
    .qr-link {
      display:flex;
      justify-content:center;
      margin:12px 0 0;
    }
    .qr-open-link {
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:var(--blue);
      font-size:14px;
      font-weight:500;
      text-decoration:none;
    }
    .qr-open-link:hover { text-decoration:underline; }

    .toast {
      position: fixed;
      left: 50%;
      bottom: calc(28px + var(--safe-b));
      transform: translateX(-50%) translateY(20px);
      background: var(--toast-bg);
      color: #fff;
      padding: 12px 20px;
      border-radius: var(--radius-pill);
      font-size: 14px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s, transform 0.25s var(--ease);
      z-index: 100;
      max-width: min(92vw, 360px);
      text-align: center;
      /* Liquid glass baked into the element's own rule: toast() reassigns
         className on every show, so the .glass/.glass-rim classes in the markup
         cannot be relied on here. The dark --toast-bg tint is kept on purpose
         so the white text stays readable in both themes. */
      backdrop-filter: blur(var(--glass-blur)) saturate(180%);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
      box-shadow:
        inset 0 1px 0 0 var(--glass-hi),
        inset 0 -1px 0 0 var(--glass-lo),
        var(--glass-shadow);
    }
    /* The rim comes from .glass-rim — toast() re-applies that class on every
       show, so no toast-specific copy of the rule is needed here. */
    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .toast.err { background: var(--toast-err); }

    .confirm-backdrop {
      position: fixed;
      inset: 0;
      z-index: 90;
      background: var(--scrim);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      padding-bottom: calc(20px + var(--safe-b));
    }
    .confirm-backdrop.show { display: flex; }
    .confirm-card {
      width: min(400px, 100%);
      /* background / blur / edge come from .glass + .glass-strong + .glass-rim */
      border-radius: var(--radius);
      padding: 22px 20px 16px;
      animation: confirmIn 0.2s var(--ease);
    }
    @keyframes confirmIn {
      from { opacity: 0; transform: scale(0.96) translateY(8px); }
      to { opacity: 1; transform: none; }
    }
    .confirm-card h3 {
      margin: 0 0 8px;
      font-size: 18px;
      letter-spacing: -0.02em;
    }
    .confirm-card p {
      margin: 0 0 18px;
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .confirm-card .row-actions { justify-content: flex-end; }
    @media (max-width: 860px) {
      .confirm-card .row-actions {
        flex-direction: column-reverse;
        align-items: stretch;
      }
      .confirm-card .row-actions .btn { width: 100%; min-height: 44px; }
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: var(--scrim);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 80;
      padding: 20px;
      padding-left: max(20px, var(--safe-l));
      padding-right: max(20px, var(--safe-r));
    }
    .modal-backdrop.show { display: flex; }
    .modal-backdrop.show .modal { animation: modalIn 0.28s var(--ease); }
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(18px) scale(0.985); }
      to { opacity: 1; transform: none; }
    }
    .modal {
      width: min(520px, 100%);
      max-height: min(80vh, 720px);
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      /* background / blur / edge come from .glass + .glass-strong + .glass-rim */
      border-radius: var(--radius-lg);
      padding: 24px;
      overscroll-behavior: contain;
    }
    .modal-handle {
      display: none;
      width: 36px;
      height: 5px;
      border-radius: 99px;
      background: var(--separator);
      margin: 0 auto 14px;
    }
    .modal h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.02em; }
    .modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
    .modal-head h3 { margin:0; }
    .modal-head .btn { flex:0 0 auto; }
    .modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:18px; }
    .bot-settings-modal .modal-footer { justify-content:space-between; }
    .bot-settings-modal .modal-footer-actions { display:flex; align-items:center; gap:8px; }
    .bot-settings-modal .name-edit { display:flex; flex-direction:row; align-items:center; gap:10px; width:100%; }
    .bot-settings-modal .name-edit input { flex:1; min-width:0; width:100%; max-width:none; }
    .bot-settings-modal .name-edit .btn { width:auto; flex:0 0 auto; }
    .bot-settings-modal .persona-picker { width:100%; position:relative; }
    .bot-settings-modal .persona-picker summary { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border:1px solid var(--separator); border-radius:10px; background:var(--input-bg); cursor:pointer; list-style:none; }
    .bot-settings-modal .persona-picker summary::-webkit-details-marker { display:none; }
    .bot-settings-modal .persona-options { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:5; display:grid; gap:3px; padding:6px; border:1px solid var(--separator); border-radius:10px; background:var(--surface); box-shadow:var(--shadow-lg); }
    .bot-settings-modal .persona-picker[open] .persona-options { position:static; margin-top:8px; box-shadow:none; }
    .bot-settings-modal .persona-option { border:0; border-radius:7px; background:transparent; padding:10px; color:var(--text); text-align:left; font:inherit; cursor:pointer; }
    .bot-settings-modal .persona-option:hover, .bot-settings-modal .persona-option.active { background:var(--blue-soft); color:var(--blue); }
    .bot-settings-modal .pro-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
    .bot-settings-modal .pro-grid label { display:grid; gap:6px; color:var(--text-secondary); font-size:13px; }
    .bot-settings-modal .pro-grid input { width:100%; }
    .bot-settings-modal .pro-switch { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:8px 0; border:0; background:transparent; cursor:pointer; }
    .bot-settings-modal .pro-switch input { position:absolute; opacity:0; pointer-events:none; }
    .bot-settings-modal .pro-switch-track { position:relative; width:44px; height:26px; flex:0 0 44px; border-radius:999px; background:var(--chip); transition:background .2s ease; }
    .bot-settings-modal .pro-switch-track::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:transform .2s ease; }
    .bot-settings-modal .pro-switch input:checked + .pro-switch-track { background:var(--green); }
    .bot-settings-modal .pro-switch input:checked + .pro-switch-track::after { transform:translateX(18px); }
    .sticker-tabs { display:flex; gap:4px; margin-bottom:14px; border-bottom:1px solid var(--separator); }
    .sticker-tabs button { border:0; border-bottom:2px solid transparent; background:transparent; padding:9px 12px; color:var(--text-secondary); font:inherit; cursor:pointer; }
    .sticker-tabs button.active { border-bottom-color:var(--blue); color:var(--blue); font-weight:600; }
    .sticker-manage-modal { width:min(720px,100%); }
    .persona-manage-modal { width:min(680px,100%); }
    .persona-editor-modal { width:min(620px,100%); }
    .persona-editor-modal .bot-control-field { display:grid; gap:7px; min-width:0; }
    .persona-editor-modal .bot-control-field > span { color:var(--text-secondary); font-size:13px; }
    .persona-editor-modal input,
    .persona-editor-modal textarea { width:100%; box-sizing:border-box; }
    .persona-editor-modal textarea { min-height:190px; resize:vertical; }
    .persona-modal-list { display:grid; gap:10px; max-height:52vh; overflow:auto; padding-top:1px; }
    .persona-modal-item { display:flex; align-items:center; flex-wrap:wrap; border:1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius:10px; background:var(--surface-2); overflow:hidden; }
    .persona-modal-item.selected { border-color:var(--blue); }
    .persona-choice { display:flex; align-items:center; justify-content:space-between; flex:1 1 220px; gap:12px; min-width:0; padding:12px 6px 12px 14px; border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
    .persona-choice span { display:grid; gap:4px; min-width:0; }
    .persona-choice strong,.persona-choice small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .persona-choice small { color:var(--text-secondary); font-size:12px; }
    .persona-choice > i { color:var(--blue); }
    .persona-modal-actions { display:flex; justify-content:flex-end; gap:6px; }
    .persona-modal-item .persona-modal-actions { flex:0 0 auto; margin-left:auto; padding:8px 10px 8px 0; }
    [data-persona-content] > .persona-modal-actions { padding:12px 0; }
    .memory-manage-modal { width:min(680px,100%); }
    .memory-manage-list { display:grid; gap:14px; max-height:55vh; overflow:auto; }
    .memory-group > strong { display:block; margin-bottom:8px; font-size:13px; }
    .memory-group ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
    .memory-group li { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--separator); border-radius:9px; background:var(--surface-2); }
    .memory-group li span { min-width:0; line-height:1.6; word-break:break-word; }
    .memory-group li .btn { flex:0 0 auto; }
    .sticker-upload { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,1fr) auto; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--separator); }
    .sticker-file-picker { display:flex; align-items:center; gap:10px; min-width:0; height:42px; padding:0 12px; border:1px solid var(--separator); border-radius:8px; background:var(--input-bg); cursor:pointer; }
    .sticker-file-picker input { display:none; }
    .sticker-file-picker i { color:var(--blue); font-size:17px; }
    .sticker-file-picker span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); font-size:13px; }
    .sticker-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-height:420px; overflow:auto; }
    .sticker-card { min-width:0; padding:10px; border:1px solid var(--separator); border-radius:8px; background:var(--surface-2); }
    .sticker-card img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:6px; background:var(--surface); }
    .sticker-card strong { display:block; margin-top:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
    .sticker-card-actions { display:flex; gap:5px; margin-top:7px; }
    .sticker-grid > .empty { grid-column:1/-1; width:100%; min-height:160px; border:0; background:transparent; }
    .modal pre {
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 13px;
      line-height: 1.5;
      background: var(--input-bg);
      border-radius: 12px;
      padding: 14px;
      max-height: 280px;
      overflow: auto;
      color: var(--text-secondary);
      margin: 12px 0 16px;
    }

    /* Try-chat thinking placeholder */
    /* Try-chat modal layout (replaces heavy inline styles) */
    .modal.try-chat-modal {
      width: min(480px, 100%);
      display: flex;
      flex-direction: column;
      max-height: min(88vh, 720px);
    }
    .try-chat-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }
    .try-chat-head h3 { margin: 0 0 4px; }
    .try-chat-head .desc {
      color: var(--text-secondary);
      font-size: 13px;
      margin: 0;
    }
    .try-chat-log {
      flex: 1;
      overflow: auto;
      margin: 12px 0;
      padding: 10px;
      border-radius: var(--radius-sm);
      background: var(--chip);
      border: 1px solid var(--separator);
      min-height: 200px;
      max-height: 42vh;
      display: flex;
      flex-direction: column;
      gap: 8px;
      -webkit-overflow-scrolling: touch;
    }
    .try-chat-quota {
      margin: 0 0 8px;
      font-size: 12px;
      color: var(--text-secondary);
      font-variant-numeric: tabular-nums;
    }
    .try-chat-compose {
      margin: 0;
      gap: 8px;
    }
    .try-chat-compose input { flex: 1; min-width: 0; }
    .try-chat-actions {
      margin-top: 12px;
      flex-wrap: wrap;
      gap: 8px;
    }
    .try-chat-bubble {
      max-width: 88%;
      padding: 8px 12px;
      font-size: 14px;
      line-height: 1.45;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .try-chat-bubble.me {
      align-self: flex-end;
      border-radius: 14px 14px 4px 14px;
      background: var(--blue);
      color: #fff;
    }
    .try-chat-bubble.bot {
      align-self: flex-start;
      border-radius: 14px 14px 14px 4px;
      background: var(--surface);
      border: 1px solid var(--separator);
      color: var(--text);
    }
    .try-chat-thinking {
      align-self: flex-start;
      max-width: 88%;
      padding: 8px 12px;
      border-radius: 14px 14px 14px 4px;
      background: var(--surface);
      border: 1px solid var(--separator);
      font-size: 14px;
      line-height: 1.45;
      color: var(--text-secondary);
      display: inline-flex;
      align-items: baseline;
      gap: 0;
      user-select: none;
    }
    .modal-meta {
      margin: 8px 0 0;
      font-size: 12px;
      color: var(--text-secondary);
      font-variant-numeric: tabular-nums;
    }
    .modal-meta + .modal-meta { margin-top: 4px; }
    .modal .tag-row { margin-top: 10px; }
    .modal .desc.sub {
      color: var(--text-secondary);
      font-size: 14px;
      margin: 0;
    }
    .try-chat-thinking .try-chat-dot {
      display: inline-block;
      opacity: 0.25;
      animation: tryChatDot 1.2s ease-in-out infinite;
    }
    .try-chat-thinking .try-chat-dot:nth-child(2) { animation-delay: 0.2s; }
    .try-chat-thinking .try-chat-dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes tryChatDot {
      0%, 80%, 100% { opacity: 0.25; }
      40% { opacity: 1; }
    }

    /* Mobile list cards (bots / peers) */
    .mobile-cards { display: none; }
    .mcard {
      background: var(--surface-2);
      border: 1px solid var(--separator);
      border-radius: 16px;
      padding: 14px 16px;
      margin-bottom: 10px;
    }
    .mcard:last-child { margin-bottom: 0; }
    .mcard .m-title {
      margin: 0 0 6px;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.02em;
      word-break: break-word;
    }
    .mcard .m-meta {
      margin: 0 0 10px;
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.45;
      word-break: break-all;
    }
    .mcard .m-meta code { font-size: 11px; }
    .mcard .name-edit { width: 100%; }
    .mcard .name-edit input {
      flex: 1;
      min-width: 0;
      max-width: none;
      width: 100%;
    }
    .mcard .row-actions {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .mcard .row-actions .btn { flex: 1 1 auto; min-width: 0; }
    .mcard select {
      min-width: 0;
      width: 100%;
      max-width: 100%;
    }
    .bot-workspace-card { background:transparent; border:0; box-shadow:none; padding:0; }
    .bot-workspace-card > .card-head { padding:0 4px; }
    .bot-workspace-card.has-bot > .card-head { display:none; }
    .bot-control { display:grid; gap:12px; }
    .bot-overview { display:flex; align-items:center; justify-content:space-between; gap:20px; min-width:0; padding:18px 20px; border:1px solid var(--separator); border-radius:22px; background:var(--surface); box-shadow:var(--shadow-sm); }
    .bot-overview-title { display:flex; align-items:center; gap:10px; min-width:0; text-align:left; }
    .bot-overview-title h3 { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:22px; line-height:1.2; }
    .bot-overview-actions { display:flex; justify-content:flex-end; flex:0 0 auto; flex-wrap:wrap; gap:10px; }
    .bot-overview-actions .btn { min-height:38px; padding:8px 14px; border-radius:999px; }
    .bot-control-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin-top:18px; }
    .bot-control-field > label { display:block; margin-bottom:7px; color:var(--text-secondary); font-size:13px; }
    .bot-control-field .name-edit, .bot-control-field .persona-picker { width:100%; max-width:none; }
    .bot-control-actions { display:flex; justify-content:flex-end; margin-top:18px; }
    .feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:104px 104px 104px; gap:12px; }
    .bot-link-card, .feature-item { min-width:0; border:1px solid var(--separator); border-radius:22px; background:var(--surface); box-shadow:var(--shadow-sm); }
    .bot-link-card { grid-column:1 / span 2; grid-row:1 / span 2; display:grid; place-content:center; justify-items:center; gap:7px; color:var(--text-secondary); }
    .bot-link-card .bi { color:var(--blue); font-size:32px; }
    .bot-link-card strong { color:var(--text); font-size:16px; }
    .bot-link-card b { color:var(--text); font-size:26px; line-height:1; }
    .feature-item { display:grid; place-content:center; justify-items:center; gap:7px; padding:14px; color:var(--text); text-align:center; cursor:pointer; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; }
    .feature-info { grid-column:3; grid-row:1; }
    .feature-persona { grid-column:3; grid-row:2; }
    .feature-memory { grid-column:1; grid-row:3; }
    .feature-voice { grid-column:2; grid-row:3; }
    .feature-stickers { grid-column:3; grid-row:3; }
    .feature-item:hover { border-color:var(--blue); background:var(--blue-soft); box-shadow:var(--shadow-md); }
    .feature-item > .bi { color:var(--blue); font-size:22px; }
    .feature-item strong { font-size:15px; font-weight:600; }
    .bot-control-empty { display:grid; place-items:center; align-content:center; gap:10px; min-height:260px; padding:32px 20px; border:1px solid var(--separator); border-radius:22px; background:var(--surface); box-shadow:var(--shadow-sm); text-align:center; color:var(--text-secondary); }
    .bot-control-empty > .bi { margin-bottom:4px; color:var(--blue); font-size:34px; }
    .bot-control-empty h3 { margin:0; color:var(--text); font-size:20px; line-height:1.3; }
    .bot-control-empty p { margin:0 0 8px; font-size:14px; }
    .bot-control-empty .btn { min-height:40px; padding:9px 18px; }

    .table-desktop { display: block; }

    .fab-refresh {
      display: none;
      position: fixed;
      right: max(16px, var(--safe-r));
      bottom: calc(20px + var(--safe-b));
      z-index: 40;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      /* background / blur / edge come from .glass + .glass-rim */
      border: none;
      color: var(--text);
      font-size: 20px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }
    .fab-refresh:active { transform: scale(0.96); }
    .fab-refresh.spin { animation: fab-spin 0.6s var(--ease); }
    @keyframes fab-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .offline-banner {
      display: none;
      position: sticky;
      top: calc(var(--nav-h) + var(--safe-t));
      z-index: 45;
      background: var(--orange);
      color: #1d1d1f;
      text-align: center;
      font-size: 13px;
      font-weight: 500;
      padding: 9px 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .offline-banner.show { display: block; }
    /* push the sticky tabs down while the banner is visible */
    body.offline { --banner-h: 37px; }

    @media (max-width: 900px) {
      .form-fields {
        grid-template-columns: 1fr 1fr;
      }
      .form-fields .form-field:last-child {
        grid-column: 1 / -1;
      }
    }
    /* 吸顶胶囊的落影改由 .tabs.glass-dynamic 按滚动深度连续给出，
       原来的 .tabs.scrolled 二段式静态阴影会盖住动态值，已移除。 */

    @media (max-width: 860px) {
      /* Compact nav — aligned with admin 860px breakpoint for tablet/phone */
      :root { --nav-h: 52px; --control-h: 44px; --control-h-sm: 36px; }
      .brand-mark { width: 26px; height: 26px; border-radius: 7px; }
      #userBar {
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
        flex-shrink: 0;
      }
      .pro-open-btn .pro-label-full { display: none; }
      .row-actions .pro-open-btn { flex: 1 1 auto; }
      .card {
        padding: 16px 14px;
        border-radius: 16px;
        margin-bottom: 16px;
      }
      .card-head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 14px;
      }
      .card h2 { font-size: 19px; }
      /* extra bottom room for the refresh FAB (base padding comes from --gutter clamps) */
      .wrap { padding-bottom: calc(88px + var(--safe-b)); }
      .hero {
        padding: 24px 18px;
        border-radius: var(--radius);
        width: 100%;
      }
      .hero h1 { font-size: 22px; }
      .hero .brand-mark {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 24px;
        margin-bottom: 12px;
      }
      .hero > p,
      .hero .hero-sub {
        font-size: 13.5px;
        margin-bottom: 14px;
      }
      .auth-form {
        gap: 11px;
      }
      .auth-form input,
      .auth-field input {
        min-height: 48px;
        font-size: 16px; /* prevent iOS zoom */
      }
      .auth-form .btn,
      #loginBtn.btn-lg {
        min-height: 50px;
      }
      #loginGate {
        min-height: calc(100dvh - var(--nav-h) - var(--safe-t));
        padding: 20px max(14px, var(--safe-l)) calc(28px + var(--safe-b)) max(14px, var(--safe-r));
        align-items: flex-start;
        padding-top: max(28px, calc(12px + var(--safe-t)));
      }
      .auth-layout { grid-template-columns:1fr; gap:22px; width:min(420px,100%); }
      .auth-intro { text-align:center; }
      .auth-intro .brand-mark { width:48px; height:48px; border-radius:14px; margin:0 auto 12px; }
      .auth-intro h1 { font-size:30px; margin-bottom:6px; }
      .auth-intro p { font-size:16px; }
      .auth-intro .intro-line { justify-content:center; margin-top:14px; gap:10px; font-size:12px; }
      .tabs {
        position: sticky;
        top: calc(var(--nav-h) + var(--safe-t) + var(--banner-h, 0px));
        z-index: 30;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 16px;
        border-radius: 14px;
        /* same glass recipe as the desktop pill — the .glass-rim ring replaces
           the old 1px border so the edge is not drawn twice */
      }
      .tabs button {
        flex: 1 1 auto;
        text-align: center;
        min-height: 44px;
        padding: 8px 4px;
        font-size: 12px;
        line-height: 1.2;
        border-radius: 9px;
      }
      .tabs button .bi {
        display: inline-block;
        margin: 0 5px 0 0;
        font-size: 15px;
      }
      .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .toolbar input,
      .toolbar select,
      .toolbar .btn {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }
      .toolbar .btn { min-height: 44px; }
      input, select, textarea {
        font-size: 16px; /* avoid iOS zoom on focus */
        min-width: 0;
        width: 100%;
        max-width: 100%;
      }
      .name-edit {
        flex-direction: column;
        align-items: stretch;
      }
      .name-edit input {
        max-width: none;
        width: 100%;
      }
      .row-actions .btn { min-height: 40px; }
      .card, .persona-card {
        scroll-margin-top: calc(var(--nav-h) + var(--safe-t) + 68px);
      }
      .form-fields {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .form-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
      }
      .vis-seg {
        width: 100%;
        display: flex;
      }
      .vis-seg label {
        flex: 1;
        text-align: center;
        min-height: 40px;
        padding: 8px 10px;
      }
      .form-actions {
        flex-direction: column;
        align-items: stretch;
      }
      .form-actions .btn { width: 100%; min-height: 44px; }
      .persona-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .persona-card {
        padding: 16px;
      }
      .persona-card .row-actions {
        gap: 8px;
      }
      .persona-card .row-actions .btn {
        flex: 1 1 auto;
        min-height: 40px;
      }
      .qr-modal {
        --qr-size: min(240px, 72vw);
      }
      #pubPrompt { font-size: 16px; } /* ID selector beats the generic 16px rule above */
      .table-desktop { display: none !important; }
      .mobile-cards { display: block; }
      .modal-handle { display: block; }
      .modal-backdrop {
        padding: max(16px, var(--safe-t)) max(16px, var(--safe-r)) max(16px, var(--safe-b)) max(16px, var(--safe-l));
        align-items: center;
      }
      .bot-control { gap:10px; }
      .home-membership { align-items:stretch; flex-direction:column; gap:10px; padding:14px; }
      .card.bot-workspace-card { padding:0; }
      #accountInfo .account-details { grid-template-columns:1fr; }
      #accountInfo .membership-summary { padding:14px; }
      .home-membership-main { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 10px; }
      .home-membership-main strong { align-self:center; overflow:hidden; text-overflow:ellipsis; }
      .home-membership-main > span:last-child { grid-column:1 / -1; }
      .home-membership .btn { width:100%; }
      .bot-overview { align-items:stretch; flex-direction:column; gap:14px; padding:16px; }
      .bot-overview-title { justify-content:space-between; }
      .bot-overview-title h3 { font-size:22px; }
      .bot-overview-actions { width:100%; }
      .bot-overview-actions .btn { flex:1 1 0; min-width:0; padding-inline:10px; }
      .bot-control-empty { min-height:240px; padding:28px 16px; }
      .bot-control-fields { grid-template-columns:1fr; gap:14px; }
      .bot-control-actions, .bot-control-actions .row-actions { width:100%; }
      .bot-control-actions .row-actions .btn { flex:1 1 auto; }
      .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:176px 88px 88px 88px; gap:10px; }
      .bot-link-card { grid-column:1 / -1; grid-row:1; }
      .feature-info { grid-column:1; grid-row:2; }
      .feature-persona { grid-column:2; grid-row:2; }
      .feature-memory { grid-column:1; grid-row:3; }
      .feature-voice { grid-column:2; grid-row:3; }
      .feature-stickers { grid-column:1 / -1; grid-row:4; }
      .bot-settings-modal .pro-grid { grid-template-columns:1fr; }
      .sticker-upload { grid-template-columns:1fr; }
      .sticker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .modal {
        width: min(520px, 100%);
        max-height: min(85dvh, 720px);
        border-radius: var(--radius);
        padding: 18px;
      }
      .modal.try-chat-modal {
        max-height: min(92dvh, 900px);
      }
      .modal pre { max-height: 36vh; }
      .modal .row-actions:not(.card-modal-actions) {
        flex-direction: column;
        align-items: stretch;
        position: static;
        padding-top: 0;
        background: none;
      }
      .modal .row-actions:not(.card-modal-actions) .btn { width: 100%; min-height: 44px; }
      .card-modal { padding:18px; }
      .card-modal .generate-card-head { padding-top:2px; }
      .card-modal .generate-card-head h2 { font-size:19px; }
      .card-modal .plan-segment { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .card-modal .generate-card-output { min-height:80px; }
      .card-modal .card-modal-actions { display:grid; grid-template-columns:1fr 1fr; position:static; padding:0; background:none; }
      .card-modal .card-modal-actions .btn { width:100%; min-height:44px; }
      #pane-cards .card-head, #pane-tokens .card-head { flex-direction:row; align-items:center; }
      #pane-cards .card-head .account-tab-actions { width:auto; margin-left:auto; padding:0; order:0; }
      #pane-cards .card-head .account-tab-actions .btn { width:auto; }
      .fab-refresh { display: flex; }
    }

    @media (max-width: 380px) {
      .hero { padding: 20px 14px; border-radius: var(--radius); }
      .hero h1 { font-size: 20px; }
    }

    @media (max-height: 500px) and (orientation: landscape) {
      :root { --nav-h: 44px; }
      .page-sub { display: none; }
      .wrap { padding-top: 12px; padding-bottom: calc(56px + var(--safe-b)); }
      #loginGate {
        padding-top: 12px;
        padding-bottom: 16px;
        align-items: flex-start;
        min-height: auto;
      }
      .hero {
        padding: 18px 16px 16px;
        border-radius: var(--radius);
      }
      .hero .brand-mark { width: 40px; height: 40px; margin-bottom: 8px; font-size: 20px; }
      .hero h1 { font-size: 18px; margin-bottom: 4px; }
      .hero > p,
      .hero .hero-sub { margin-bottom: 10px; font-size: 13px; }
      .auth-form { gap: 8px; }
      .auth-form input,
      .auth-field input { min-height: 42px; }
      .auth-form .btn,
      #loginBtn.btn-lg { min-height: 42px; }
      .tabs { top: calc(var(--nav-h) + var(--safe-t)); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      /* The block above zeroes durations but not delays; the stagger's
         backwards fill would still hold cards at opacity 0 for up to 340ms. */
      .stagger > * { animation: none !important; }
    }

    /* Higher-contrast separators & secondary text when requested */
    @media (prefers-contrast: more) {
      :root {
        --separator: rgba(0, 0, 0, 0.24);
        --text-secondary: #515154;
        --text-tertiary: #6e6e73;
      }
      html[data-theme="dark"] {
        --separator: rgba(255, 255, 255, 0.3);
        --text-secondary: #c7c7cc;
        --text-tertiary: #98989d;
      }
      .badge, .tag { font-weight: 600; }
    }

    /* Solid surfaces instead of glass when transparency is reduced */
    @media (prefers-reduced-transparency: reduce) {
      :root { --bg-elevated: #f5f5f7; --toast-bg: #1d1d1f; }
      html[data-theme="dark"] { --bg-elevated: #1c1c1e; --toast-bg: #2c2c2e; }
      .tabs,
.toast,
.modal-backdrop,
.confirm-backdrop,
.fab-refresh,
.modal,
.confirm-card,
.glass,
.glass-dynamic{
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      /* 边缘折射一并关掉：html.wa-lens 那条选择器更特异，不显式覆盖会漏网 */
      html.wa-lens .glass,
      html.wa-lens .glass-strong,
      html.wa-lens .glass-dynamic {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      .tabs,
.fab-refresh{ background: var(--bg-elevated); }
      .tabs.glass-dynamic { box-shadow: none !important; }
      .tabs, .fab-refresh { border: 1px solid var(--separator); }
      .modal, .confirm-card { background: var(--surface); border: 1px solid var(--separator); }
      /* specular rim reads as a stray outline without the blur behind it */
      .glass-rim::before { display: none !important; }
    }

    @media (min-width: 861px) {
      .table-desktop { display: block; }
      .mobile-cards { display: none !important; }
      .fab-refresh { display: none !important; }
      .modal-handle { display: none; }
    }
    .fab-refresh .bi { font-size: 1.25rem; line-height: 1; }
    .tabs button .bi {
      margin-right: 6px;
      font-size: 0.95rem;
      vertical-align: -0.08em;
      opacity: 0.9;
    }
    .tabs button.active .bi { opacity: 1; }
    .btn .bi { margin-right: 4px; font-size: 0.95em; vertical-align: -0.05em; }
    @media (max-width: 860px) {
      .tabs { min-height:52px; overflow:hidden; }
      .tabs button { display:flex; align-items:center; justify-content:center; flex:1 1 0; min-width:0; width:0; }
      .tabs button .bi { display:inline-block; margin:0 5px 0 0; font-size:15px; vertical-align:0; }
    }