:root {
    /* ── 清冷商务 palette (Ant/Arco 系) ── */
    --bg:        #FFFFFF;
    --bg-soft:   #F7F8FA;
    --bg-2:      #FAFBFC;
    --bg-card:   #FFFFFF;

    --ink:       #1D2129;          /* 主文本 cool dark */
    --ink-1:     #4E5969;          /* 次级文本 */
    --ink-2:     #86909C;          /* 弱化文本 */
    --ink-3:     #C9CDD4;          /* 极弱 / placeholder */
    --ink-4:     #E5E6EB;

    --line:      #E5E6EB;
    --line-2:    #F2F3F5;
    --line-3:    #EFF0F2;

    --accent:    #DD6E4C;          /* 品牌色 · 极少使用 */
    --accent-soft: #FCEFE8;
    --accent-d:  #C25B3D;

    --green:     #00B42A;          /* live 状态 */

    /* ── 字体栈 · SkillHub 同款搭配（全免费 OFL） ── */
    --sans:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text",    "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", system-ui, sans-serif;
    --display: "Outfit",            -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
    --mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
    /* 中文展示字 · Noto Sans SC 900 (= 思源黑体 Heavy) 单独留一档给纯 hero/大数字 */
    --display-zh: "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", system-ui, sans-serif;

    --max: 1440px;
    --pad: 48px;

    /* ── 字号 token · 26 档收敛到 9 档 (P0) ── */
    --text-2xs:    11px;   /* 微标签 / kbd / 时间戳 */
    --text-xs:     12px;   /* 次级文字 / chip */
    --text-sm:     13px;   /* meta / 表头 */
    --text-base:   14px;   /* 正文 / 默认 */
    --text-md:     16px;   /* 段落重点 */
    --text-lg:     20px;   /* 小标题 / 数据值 */
    --text-xl:     28px;   /* h2 / hero 副标 */
    --text-2xl:    40px;   /* h1 */
    --text-display:88px;   /* 极大展示数字 / hero 主标 */

    /* ── 圆角 token · 15 档收敛到 6 档 (P0) ── */
    --r-xs:   4px;        /* chip / kbd / 微标签 */
    --r-sm:   6px;        /* 输入框 / 小卡 / 列表项 */
    --r-md:   10px;       /* 中卡 / 按钮组 */
    --r-lg:   14px;       /* 大卡 / Hero 区组件 */
    --r-xl:   18px;       /* Modal / 焦点卡 */
    --r-pill: 9999px;     /* 胶囊 */
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }

  /* Lucide icon 默认样式 */
  [data-lucide], .lucide {
    width: 14px; height: 14px;
    stroke-width: 1.6;
    flex-shrink: 0;
  }

  /* Marquee hover 暂停 */
  .live-ticker:hover .live-ticker-scroll { animation-play-state: paused; }

  /* ── 浮动 FAB (MOXIE 助手入口) ── */
  .fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transform: translateY(12px) scale(0.92);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s;
  }
  .fab.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .fab:hover {
    box-shadow: 0 8px 22px rgba(221,110,76,0.22), 0 2px 6px rgba(0,0,0,0.06);
    border-color: var(--accent);
  }
  .fab:active { transform: scale(0.95); }
  .fab img { width: 26px; height: 26px; border-radius: var(--r-xs); }
  .fab::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    opacity: 0;
    animation: fabPulse 2.5s infinite;
    pointer-events: none;
  }
  @keyframes fabPulse {
    0% { opacity: 0.5; transform: scale(0.95); }
    100% { opacity: 0; transform: scale(1.25); }
  }

  /* ── Modal (MOXIE 助手对话框) ── */
  .modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn .25s ease;
  }
  .modal[hidden] { display: none; }
  @keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(29,33,41,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .modal-card {
    position: relative;
    background: var(--bg);
    border-radius: var(--r-xl);
    padding: 36px 32px 28px;
    max-width: 520px;
    width: 92%;
    box-shadow: 0 24px 48px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.08);
    animation: modalSlideUp .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--ink-2);
    font-size: var(--text-lg);
    line-height: 1;
    transition: background .15s, color .15s;
  }
  .modal-close:hover { background: var(--bg-soft); color: var(--ink); }
  .modal-eyebrow {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--text-2xs);
    color: var(--ink-2);
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .modal-eyebrow .live-dot { background: var(--accent); }
  .modal-card h3 {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin-bottom: 10px;
  }
  .modal-card p {
    font-size: var(--text-base);
    color: var(--ink-1);
    line-height: 1.7;
    margin-bottom: 22px;
  }
  .modal-input {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    padding: 14px 16px;
    font-size: var(--text-base);
    font-family: var(--sans);
    color: var(--ink);
    border-radius: var(--r-md);
    margin-bottom: 12px;
    transition: border-color .15s;
  }
  .modal-input:focus { outline: none; border-color: var(--ink); background: var(--bg); }
  .modal-input::placeholder { color: var(--ink-3); }
  .modal-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 24px;
  }
  .modal-chip {
    font-size: var(--text-xs);
    color: var(--ink-1);
    background: var(--bg-soft);
    border: 1px solid var(--line-2);
    padding: 5px 10px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all .15s;
  }
  .modal-chip:hover { background: var(--accent-soft); color: var(--accent); border-color: rgba(221,110,76,0.3); }
  .modal-submit {
    background: var(--ink);
    color: white;
    width: 100%;
    padding: 13px 0;
    border-radius: var(--r-md);
    font-size: var(--text-base);
    font-weight: 500;
    transition: background .15s;
  }
  .modal-submit:hover { background: var(--accent); }
  .modal-foot {
    text-align: center;
    margin-top: 12px;
    font-size: var(--text-2xs);
    color: var(--ink-3);
  }

  /* Fade-in 初始态 */
  .fade-in {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .fade-in.shown {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Aceternity 风：cursor 跟随聚光灯（vanilla CSS 实现） ── */
  .prow, .blog-card {
    --spot-x: 50%;
    --spot-y: 50%;
    --spot-opacity: 0;
    position: relative;
  }
  .prow::before, .blog-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
      280px circle at var(--spot-x) var(--spot-y),
      rgba(221, 110, 76, 0.08),
      transparent 55%
    );
    opacity: var(--spot-opacity);
    transition: opacity .25s ease;
    z-index: 0;
  }
  .prow > *, .blog-card > * { position: relative; z-index: 1; }

  /* Magic UI BorderBeam 已移除 */


  /* hero h1 SplitText 初始态（防止 FOUC） */
  .hero h1 .word { display: inline-block; opacity: 1; }
  .hero h1.split-ready .word { opacity: 0; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--text-sm);
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

  .container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

  /* ── LOGO (字标用 Outfit + 大写 + 字距) ── */
  .brand-logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--ink);
    letter-spacing: 0.08em;
  }
  .brand-logo svg, .brand-logo img { display: block; flex-shrink: 0; }
  .brand-logo span { line-height: 1; }

  /* ── 登录态预渲染：第一帧就把 #loginBtn 变成头像占位，
       避免 wireUserMenu 异步替换造成的"登录按钮 → 头像"闪烁 ── */
  html.is-authed #loginBtn {
    width: 32px; height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #e98a72);
    color: #fff;
    border: 1px solid transparent;
    font-size: 0;                /* 隐藏原"登录"文字 */
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
  }
  html.is-authed #loginBtn::after {
    content: var(--moxie-user-initial, "U");
    font-family: var(--display);
    font-weight: 600;
    font-size: 13px;
  }

  /* ── User Menu (登录后顶栏头像 + 下拉菜单) ── */
  .user-menu { position: relative; display: inline-block; }
  .user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #e98a72);
    color: #fff;
    font-family: var(--display);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color .15s ease, box-shadow .15s ease;
    user-select: none;
    padding: 0;
  }
  .user-avatar:hover { border-color: var(--ink-2); }
  .user-avatar.open  { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(232,118,82,0.15); }

  .user-dropdown {
    position: absolute;
    top: calc(100% + 8px); right: 0;
    width: 240px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    padding: 6px 0;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
  }
  .user-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; }

  .user-dropdown-head {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--line-2);
  }
  .user-dropdown-head .un { font-size: 13px; font-weight: 600; color: var(--ink); }
  .user-dropdown-head .em {
    font-size: 11px; color: var(--ink-3); font-family: var(--mono); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .user-dropdown-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 16px;
    font-size: 13px; color: var(--ink-1);
    cursor: pointer;
    border: none; background: transparent; width: 100%;
    text-align: left; text-decoration: none;
    font-family: inherit;
  }
  .user-dropdown-item:hover { background: var(--bg-soft); color: var(--ink); }
  .user-dropdown-item .meta { font-size: 10px; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.04em; }
  .user-dropdown-divider { height: 1px; background: var(--line-2); margin: 6px 0; }
  .user-dropdown-item.danger { color: #c2410c; }
  .user-dropdown-item.danger:hover { background: #fff1eb; color: #9a3412; }

  /* ── TOPBAR ── */
  .topbar {
    padding: 18px 0;
    border-bottom: 1px solid var(--line-2);
    background: var(--bg);
  }
  .topbar-inner {
    display: grid;
    grid-template-columns: 140px 1fr 440px;
    align-items: center;
    gap: 28px;
  }
  .nav-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    font-size: var(--text-base);
    color: var(--ink-1);
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1;
    height: 100%;
  }
  /* 所有 nav 子元素统一高度 + 行内 flex 居中，保证基线对齐 */
  .nav-center > a,
  .nav-center > .nav-mega {
    display: inline-flex;
    align-items: center;
    height: 32px;
    line-height: 1;
    padding: 0;
  }
  .nav-center a { transition: color .15s; text-decoration: none; }
  .nav-center a:hover { color: var(--ink); }
  .nav-center a.active { color: var(--ink); font-weight: 500; }

  /* ── Hero badge (顶部 chip) ── */
  .hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: var(--bg-soft);                  /* 高级灰底色 */
    border: 1px solid var(--line-2);             /* 边线弱化到极淡灰 */
    border-radius: var(--r-pill);
    font-size: 12px;
    color: var(--ink-1);
    margin-bottom: 16px;
    font-weight: 400;
  }
  .hero-badge .live-dot { width: 5px; height: 5px; }

  /* ── Hero 大标题 (SkillHub 参数对齐) ── */
  .hero-h1-big {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
                 "SF Pro Display", "PingFang SC", "HarmonyOS Sans SC",
                 "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 48px;                  /* SkillHub 同款，一行展示 */
    font-weight: 600;                 /* SkillHub semibold */
    letter-spacing: -0.03em;
    line-height: 1.1;                 /* 0.96 太挤，1.1 给中文呼吸空间 */
    color: var(--ink);
    text-align: center;
    margin: 0;                         /* 用父容器 gap 控制 */
    max-width: 1100px;
  }
  .hero-h1-big .brand-mark {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: -0.03em;
    font-family: var(--display);
  }
  .hero-sub-big {
    font-family: "MiSans ExtraLight", "Plus Jakarta Sans", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;                 /* MiSans ExtraLight 内置字重 */
    color: rgba(29, 33, 41, 0.6);     /* black/60 同款 */
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0;
    text-align: center;
    max-width: 540px;
  }
  .hero-sub-big b {
    color: var(--ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  /* 用 gap 替代 margin：让 hero-left 内项间距统一 24px (= SkillHub gap-6) */
  .hero-left { gap: 24px; }
  /* H1 → 副标题之间（24 - 4 = 20px 实际间距） */
  .hero-h1-big + .hero-sub-big { margin-top: -4px; }
  /* 副标题 → 安装区收紧（24 - 12 = 12px 实际间距） */
  .hero-sub-big + .install-section { margin-top: -12px; }

  /* ── 探索一行 (标题 + 搜索 + 按钮) ── */
  .explore-block {
    margin-top: 64px;
    margin-bottom: 0;
    text-align: center;
  }
  .explore-title {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 24px;
  }
  .explore-title b {
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .explore-row {
    display: flex; align-items: center; gap: 12px;
    max-width: 880px;
    margin: 0 auto;
  }
  /* 搜索框：所搜即所得，去掉旁边的按钮 */
  .explore-search {
    flex: 1;
    height: 48px;
    box-sizing: border-box;
    display: flex; align-items: center; gap: 12px;
    padding: 0 20px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(29,33,41,0.02), 0 1px 1px rgba(29,33,41,0.01);
    transition: box-shadow .15s;
  }
  .explore-search:hover {
    box-shadow: 0 2px 8px rgba(29,33,41,0.03), 0 1px 1px rgba(29,33,41,0.015);
  }
  .explore-search:focus-within {
    box-shadow: 0 2px 8px rgba(29,33,41,0.03), 0 1px 1px rgba(29,33,41,0.015);
  }
  .explore-search > i, .explore-search > svg { color: var(--ink-4); stroke: var(--ink-4); width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.5; }
  .explore-search input {
    flex: 1;
    height: 100%;
    border: none; outline: none; background: transparent;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    padding: 0;
  }
  .explore-search input::placeholder { color: var(--ink-3); }

  @media (max-width: 900px) {
    .hero-h1-big { font-size: var(--text-2xl); }
  }

  /* ── Hero 大搜索框 ── */
  .hero-search {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    max-width: 720px;
    margin: 0;
    padding: 14px 18px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: border-color .15s, box-shadow .2s;
  }
  .hero-search:focus-within {
    border-color: var(--ink-3);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  }
  .hero-search > i { color: var(--ink-3); width: 18px; height: 18px; flex-shrink: 0; }
  .hero-search input {
    flex: 1; border: none; outline: none; background: transparent;
    font-family: var(--sans);
    font-size: var(--text-md);
    color: var(--ink);
  }
  .hero-search input::placeholder { color: var(--ink-3); }
  .hero-search-kbd {
    font-family: var(--mono);
    font-size: var(--text-2xs);
    color: var(--ink-2);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    padding: 3px 7px;
    border-radius: var(--r-xs);
    letter-spacing: 0.02em;
  }

  /* ── 倒计时像素字体 ── */
  .countdown-chip .pixel {
    font-family: "VT323", "JetBrains Mono", monospace;
    font-size: var(--text-lg);
    letter-spacing: 0.04em;
    color: var(--ink);
    font-weight: 400;
    line-height: 1;
  }
  .countdown-chip .pixel span { color: var(--accent); }

  /* ── CLI 安装卡 ── */
  .install-section { width: 100%; max-width: 720px; margin: 36px 0 0; }
  .install-tabs {
    display: inline-flex; gap: 8px;
    margin-bottom: 28px;
  }
  .install-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink-1);
    font-family: var(--sans);
    font-size: var(--text-base);
    font-weight: 500;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all .15s;
  }
  .install-tab i { width: 15px; height: 15px; }
  .install-tab:hover { border-color: var(--ink-3); color: var(--ink); }
  .install-tab.active {
    background: var(--ink);
    border-color: var(--ink);
    color: white;
    box-shadow: 0 4px 14px rgba(29,33,41,0.15);
  }

  /* ── Install 卡片 · 无边框 + 柔和阴影衬托（SkillHub 同款） ── */
  .install-card {
    background: #fff;
    border: none;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow:
      0 1px 2px rgba(29,33,41,0.04),
      0 4px 16px rgba(29,33,41,0.05),
      0 16px 40px rgba(29,33,41,0.04);
  }
  .install-subtabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 20px;
  }
  .install-subtab {
    background: none; border: none; cursor: pointer;
    font-family: var(--sans);
    font-size: var(--text-base);
    color: var(--ink-2);
    padding: 12px 0;
    margin-right: 28px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    font-weight: 400;
  }
  .install-subtab:hover { color: var(--ink-1); }
  .install-subtab.active {
    color: var(--ink);
    border-bottom-color: var(--ink);
    font-weight: 500;
  }
  .badge-flash { color: var(--accent); font-size: var(--text-xs); margin-left: 4px; }

  .install-content { padding: 16px 20px 18px; text-align: left; }
  .install-hint {
    font-size: var(--text-sm);
    color: var(--ink-2);
    line-height: 1.7;
    margin-bottom: 12px;
    padding-left: 12px;        /* 跟下方 .install-cmd code 内容首字对齐 */
    font-weight: 300;
    letter-spacing: 0.01em;
  }
  .install-hint strong { color: var(--ink-1); font-weight: 400; }
  .install-cmd {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-soft);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    /* 扁平：纯色底 + 1px 边框，无 inset/outset 阴影 */
  }
  .install-cmd code {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: 1.5;
    background: none;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .install-cmd code::-webkit-scrollbar { height: 4px; }
  .install-cmd code::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-xs); }
  .install-cmd code::-webkit-scrollbar-track { background: transparent; }
  .copy-btn {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    padding: 6px;
    cursor: pointer;
    color: var(--ink-2);
    transition: color .15s, border-color .15s, background .15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .copy-btn:hover { color: var(--accent); border-color: var(--accent); }
  .copy-btn i { width: 14px; height: 14px; display: block; }

  /* 复制成功浮窗 */
  .copy-toast {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: var(--ink);
    color: white;
    font-size: 11.5px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 2;
  }
  .copy-toast::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 9px;
    border: 4px solid transparent;
    border-top-color: var(--ink);
  }
  .copy-toast.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Visit Link (访问外站，hover 显示) ── */
  .visit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    border-radius: var(--r-xs);
    color: var(--ink-3);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease, color .15s, background .15s;
    flex-shrink: 0;
    text-decoration: none;
  }
  .prow:hover .visit-link,
  .top1-card:hover .visit-link,
  .pick-mini:hover .visit-link {
    opacity: 1;
    transform: translateX(0);
  }
  .visit-link:hover {
    color: var(--accent);
    background: var(--accent-soft);
  }
  .visit-link svg { display: block; }

  /* ── Mega Menu (分类 ▾) ── */
  .nav-mega { position: relative; display: inline-flex; align-items: center; height: 32px; }
  .nav-mega-trigger {
    background: none; border: none; cursor: pointer;
    font: inherit; color: var(--ink-1);
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0;
    height: 32px;
    line-height: 1;
    letter-spacing: -0.005em;
    transition: color .15s;
  }
  .nav-mega-trigger:hover, .nav-mega.open .nav-mega-trigger { color: var(--ink); }
  .nav-mega-trigger svg {
    transition: transform .2s, color .2s, opacity .2s;
    color: var(--ink-3);
    opacity: 0.8;
    stroke-width: 1.2;
    margin-left: 2px;
  }
  .nav-mega-trigger:hover svg, .nav-mega.open .nav-mega-trigger svg { opacity: 1; color: var(--ink-2); }
  .nav-mega.open .nav-mega-trigger svg { transform: rotate(180deg); }

  .mega-menu {
    position: fixed;
    top: 56px; left: 50%;
    transform: translate(-50%, -8px);
    width: min(1080px, calc(100vw - 48px));
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 20px 48px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    padding: 32px 36px 28px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility .2s;
  }
  .nav-mega.open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  .mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line-2);
  }
  .mega-col {}
  .mega-col h4 {
    font-size: var(--text-2xs);
    color: var(--ink-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-2);
  }
  .mega-col h4 .h4-tag {
    color: var(--accent);
    font-weight: 600;
    margin-left: 6px;
    font-family: var(--mono);
  }
  .mega-col ul { list-style: none; padding: 0; margin: 0; }
  .mega-col ul li { padding: 0; margin: 0; }
  .mega-col ul li a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 8px;
    margin: 0 -8px;
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
    color: var(--ink-1);
    transition: background .12s, color .12s;
  }
  .mega-col ul li a:hover { background: var(--accent-soft); color: var(--accent); }
  .mega-col ul li a .cnt {
    font-family: var(--mono);
    font-size: var(--text-2xs);
    color: var(--ink-3);
  }
  .mega-col ul li a:hover .cnt { color: var(--accent); }

  .mega-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 18px;
  }
  .mega-foot .all-link {
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--ink-1);
    border-bottom: 1px solid var(--line);
    padding-bottom: 1px;
    letter-spacing: 0.04em;
  }
  .mega-foot .all-link:hover { color: var(--accent); border-color: var(--accent); }
  .mega-foot .submit-hint {
    font-size: var(--text-xs);
    color: var(--ink-2);
  }
  .mega-foot .submit-hint a { color: var(--accent); font-weight: 500; }

  /* mega backdrop click-out */
  .mega-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(29,33,41,0.15);
    backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
  }
  .nav-mega.open ~ .mega-backdrop,
  .mega-backdrop.show { opacity: 1; visibility: visible; }

  @media (max-width: 900px) {
    .mega-menu {
      width: calc(100vw - 32px);
      top: 56px;
      padding: 24px;
    }
    .mega-grid { grid-template-columns: 1fr; gap: 20px; padding-bottom: 16px; }
  }

  .top-actions {
    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
    flex-wrap: nowrap;
  }
  .top-actions > * { flex-shrink: 0; }
  .cmd-trigger {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; align-items: center; gap: 10px;
    font-size: var(--text-sm);
    color: var(--ink-3);
    border: 1px solid var(--line);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: var(--bg);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
  }
  .cmd-trigger .label { overflow: hidden; text-overflow: ellipsis; }
  .cmd-trigger:hover { border-color: var(--ink-2); color: var(--ink); }
  .cmd-trigger .label { flex: 1; }
  .kbd {
    font-family: var(--mono);
    font-size: var(--text-2xs);
    color: var(--ink-2);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    padding: 2px 6px;
    border-radius: var(--r-xs);
  }
  .btn-link {
    font-size: var(--text-sm);
    color: var(--ink-1);
    padding: 5px 10px;
    font-weight: 400;
  }
  .btn-link:hover { color: var(--accent); }
  .btn-accent {
    background: var(--accent);
    color: white;
    font-size: var(--text-base);
    font-weight: 450;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    transition: background .15s, transform .1s;
  }
  .btn-accent:hover { background: var(--accent-d); }
  .btn-accent:active { transform: translateY(1px); }
  /* 大号主 CTA */
  .btn-accent-lg {
    background: var(--accent);
    color: white;
    font-size: var(--text-md);
    font-weight: 500;
    padding: 13px 28px;
    border-radius: var(--r-pill);
    transition: background .15s, transform .1s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(221,110,76,0.25);
    display: inline-block;
  }
  .btn-accent-lg:hover {
    background: var(--accent-d);
    box-shadow: 0 6px 20px rgba(221,110,76,0.35);
  }
  .btn-accent-lg:active { transform: translateY(1px); }
  .btn-ink {
    background: var(--ink);
    color: white;
    font-size: var(--text-sm);
    font-weight: 450;
    padding: 8px 16px;
    border-radius: var(--r-sm);
  }
  .btn-ink:hover { background: #2E3441; }

  /* 顶栏 maker 入口：极简幽灵按钮 */
  .btn-ghost-sm {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--ink-1);
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg);
    transition: all .15s;
    text-decoration: none;
  }
  .btn-ghost-sm:hover {
    border-color: var(--ink);
    color: var(--ink);
  }

  /* ── HERO ── */
  .hero {
    padding: 64px 0 28px;
    position: relative;
    overflow: hidden;
    background: var(--bg);            /* 纯白底；光晕和点阵都用伪元素叠，便于各自 mask */
  }
  /* ① Mesh gradient 光晕层（最底） · 上下垂直渐隐 → 跟 topbar 和下方区域无缝衔接 */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      /* 左下橘光团（主光源） */
      radial-gradient(ellipse 900px 700px at 12% 78%,
        rgba(221, 110, 76, 0.18),
        rgba(221, 110, 76, 0) 62%),
      /* 中下米杏柔光（hero 焦点暖底） */
      radial-gradient(ellipse 1100px 550px at 50% 100%,
        rgba(252, 239, 232, 0.85),
        rgba(252, 239, 232, 0) 65%),
      /* 右上次橘光（呼应品牌色） */
      radial-gradient(ellipse 700px 500px at 88% 18%,
        rgba(221, 110, 76, 0.12),
        rgba(221, 110, 76, 0) 58%),
      /* 左上冷灰平衡（加空气感） */
      radial-gradient(ellipse 600px 500px at 8% 12%,
        rgba(201, 205, 212, 0.22),
        rgba(201, 205, 212, 0) 60%);
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0,
      #000 160px,
      #000 calc(100% - 200px),
      transparent 100%);
            mask-image: linear-gradient(to bottom,
      transparent 0,
      #000 160px,
      #000 calc(100% - 200px),
      transparent 100%);
    pointer-events: none;
    z-index: 0;
  }
  /* ② 点阵层（叠在 mesh 之上） · 自己的 fade */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #E5E6EB 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    pointer-events: none;
    opacity: 0.45;                    /* 点阵让位给光晕做主场 */
    z-index: 1;
  }
  .hero .container { position: relative; z-index: 2; }   /* 高于 ::before mesh(0) 和 ::after dot(1) */
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hero-left {
    max-width: 880px;                 /* 640 → 880：48px h1 需要 ~760px 才能一行 */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-left p { margin-left: auto; margin-right: auto; }
  .hero-left .hero-cta-row { justify-content: center; }
  .hero-meta {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: var(--text-2xs);
    color: var(--ink-2);
    margin-bottom: 24px;
    letter-spacing: 0.04em;
  }
  .hero-meta .sep { color: var(--ink-3); }
  .hero-meta .live {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--green);
    font-weight: 500;
  }
  .live-dot {
    width: 6px; height: 6px;
    background: var(--green);
    border-radius: 50%;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%,100% { opacity: 1; }
    50% { opacity: .35; }
  }
  /* 注：旧版 .hero h1 / .accent-num 规则已删除——它们 specificity 比 .hero-h1-big 高，
     会覆盖 .hero-h1-big 的字体/字重/字号设置，导致 hero 标题永远显示成 Outfit 800 40px。
     现 hero 主标统一通过 .hero-h1-big 控制。 */
  /* 倒计时 chip */
  .countdown-chip {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 20px;
    padding: 8px 12px;
    background: var(--bg-soft);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    color: var(--ink-1);
  }
  /* 在 tab 行内的紧凑版 · 内联状态条 */
  .countdown-chip.inline {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    gap: 7px;
    font-size: var(--text-xs);
    color: var(--ink-2);
    letter-spacing: 0;
  }
  .countdown-chip.inline .cd-pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: pulse 2s infinite;
    box-shadow: 0 0 0 0 rgba(221,110,76,0.35);
  }
  .countdown-chip.inline .cd-rel {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }
  .countdown-chip .l {
    color: var(--ink-2);
    font-size: var(--text-2xs);
    letter-spacing: 0.04em;
    padding-right: 8px;
    border-right: 1px solid var(--line);
  }
  .countdown-chip .t {
    font-family: var(--mono);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0.04em;
  }
  .countdown-chip .t span { color: var(--accent); }
  .hero p {
    font-size: var(--text-base);
    color: var(--ink-1);
    max-width: 540px;
    line-height: 1.75;
    margin-bottom: 28px;
    font-weight: 400;
  }
  .hero-cta-row {
    display: flex; align-items: center; gap: 14px;
  }
  .hero-cta-row .meta {
    font-size: var(--text-2xs);
    color: var(--ink-2);
    letter-spacing: 0.02em;
  }

  /* Hero right: 数据栏 */
  .hero-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    overflow: hidden;
  }
  .hero-data-cell {
    padding: 16px 18px 14px;
    border-right: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    position: relative;
  }
  .hero-data-cell:nth-child(2n) { border-right: none; }
  .hero-data-cell:nth-last-child(-n+2) { border-bottom: none; }
  .hero-data-cell .cell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .hero-data-cell .l {
    font-size: var(--text-2xs);
    color: var(--ink-2);
    font-weight: 400;
    letter-spacing: 0.02em;
  }
  .hero-data-cell .chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--r-md);
    font-size: var(--text-2xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    background: #F2F8F4;
    color: var(--green);
    letter-spacing: 0.01em;
  }
  .hero-data-cell .chip .arrow {
    font-size: var(--text-2xs);
    line-height: 1;
  }
  .hero-data-cell.accent .chip {
    background: var(--accent-soft);
    color: var(--accent-d);
  }
  .hero-data-cell .v {
    font-size: var(--text-lg);
    font-weight: 450;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  /* sparkline · Stripe Dashboard 风格 */
  .hero-data-cell .spark {
    width: 100%;
    height: 38px;
    margin-top: 12px;
    display: block;
    overflow: visible;
  }
  .hero-data-cell .spark path.line {
    fill: none;
    stroke: var(--ink-2);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .hero-data-cell .spark path.area { stroke: none; }
  .hero-data-cell .spark line.baseline {
    stroke: var(--ink-3);
    stroke-width: 0.8;
    stroke-dasharray: 1.6 2.4;
    opacity: 0.7;
  }
  .hero-data-cell .spark circle.dot-halo {
    fill: var(--ink-2);
    opacity: 0.18;
  }
  .hero-data-cell .spark circle.dot {
    fill: var(--bg);
    stroke: var(--ink);
    stroke-width: 1.2;
  }
  .hero-data-cell.accent .spark path.line { stroke: var(--accent); }
  .hero-data-cell.accent .spark line.baseline { stroke: var(--accent); opacity: 0.45; }
  .hero-data-cell.accent .spark circle.dot { stroke: var(--accent); }
  .hero-data-cell.accent .spark circle.dot-halo { fill: var(--accent); opacity: 0.25; }

  /* ── 实时活动 ticker (hero 底部一行) ── */
  .live-ticker {
    margin-top: 48px;
    padding: 12px 18px;
    /* glassmorphism · 让 hero 光晕从下面透上来，但保留容器轮廓 */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--r-md);
    box-shadow:
      0 1px 2px rgba(29, 33, 41, 0.03),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    display: flex; align-items: center; gap: 12px;
    overflow: hidden;
  }
  .live-ticker-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-2xs);
    color: var(--ink-2);
    letter-spacing: 0.06em;
    font-weight: 500;
    flex-shrink: 0;
    padding-right: 14px;
    border-right: 1px solid var(--line-2);
  }
  .live-ticker-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 18px;
  }
  .live-ticker-scroll {
    display: flex;
    gap: 40px;
    animation: tickerScroll 50s linear infinite;
    white-space: nowrap;
    position: absolute;
    left: 0; top: 0;
  }
  @keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  .ticker-item {
    font-size: var(--text-2xs);
    color: var(--ink-2);
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 400;
  }
  .ticker-item .dot {
    width: 3px; height: 3px;
    background: var(--ink-3);
    border-radius: 50%;
    flex-shrink: 0;
  }
  .ticker-item .time {
    color: var(--ink-3);
    font-size: var(--text-2xs);
    margin-left: 4px;
  }

  /* ── MAIN 3-col ── */
  .main {
    display: grid;
    grid-template-columns: 220px 1fr 240px;
    gap: 40px;
    align-items: start;
    padding: 30px 0 56px;
    position: relative;
  }
  /* 极轻 vertical hairline 把中间产品区从左右两栏分开 */
  .main::before, .main::after {
    content: "";
    position: absolute;
    top: 64px; bottom: 104px;
    width: 1px;
    background: var(--line-2);
    pointer-events: none;
  }
  .main::before { left: calc(220px + 20px); }
  .main::after  { right: calc(240px + 20px); }

  /* Section label (轻量文字, 无黑底) */
  .sec-label {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 14px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-1);
    letter-spacing: 0.02em;
  }
  .sec-label .ct {
    color: var(--ink-3);
    font-weight: 400;
    font-size: var(--text-2xs);
  }

  /* ── LEFT SIDE ── */
  .side-block { margin-bottom: 32px; }

  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .stats-grid .v {
    font-size: var(--text-lg);
    font-weight: 450;
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  .stats-grid .l {
    font-size: var(--text-2xs);
    color: var(--ink-2);
    margin-top: 2px;
  }

  .post-list {}
  .post-item {
    padding: 10px 0;
    cursor: pointer;
  }
  .post-item:hover .post-title { color: var(--accent); }
  .post-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 5px;
  }
  .post-av {
    width: 18px; height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--bg-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--ink-1);
  }
  /* 头像配色：低饱和 4 色循环 (橘/蓝/绿/紫) */
  .post-list .post-item:nth-child(4n+1) .post-av { background: #FCEFE8; color: #C25B3D; }
  .post-list .post-item:nth-child(4n+2) .post-av { background: #E8F0FB; color: #3F6FBF; }
  .post-list .post-item:nth-child(4n+3) .post-av { background: #E6F2EA; color: #3B7C50; }
  .post-list .post-item:nth-child(4n+4) .post-av { background: #EFEAFA; color: #6C56AA; }
  .post-name { font-size: var(--text-xs); font-weight: 500; color: var(--ink-1); }
  .post-time { font-size: var(--text-2xs); color: var(--ink-3); }
  .post-title {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: 1.5;
    transition: color .15s;
    font-weight: 400;
  }
  .post-tag {
    display: inline-block;
    font-size: var(--text-2xs);
    color: var(--accent);
    margin-top: 4px;
    font-weight: 400;
  }

  /* ── CENTER ── */
  .center-col {}

  .center-top {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line-2);
  }
  .tabs {
    display: flex; gap: 0;
  }
  .tab {
    color: var(--ink-2);
    padding: 4px 16px;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 400;
    transition: color .15s;
  }
  .tab.active {
    color: var(--ink);
    font-weight: 500;
  }
  .tab:not(.active):hover { color: var(--ink-1); }
  .center-top .meta-right {
    font-size: var(--text-xs);
    color: var(--ink-2);
    font-weight: 400;
    letter-spacing: 0.01em;
  }
  .center-top .meta-right b { color: var(--ink); font-weight: 500; }

  /* ── 本月趋势 (替换流量数据) ── */
  .trend-list {}
  .trend-item {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-3);
    cursor: pointer;
    transition: background .12s;
  }
  .trend-item:last-child { border-bottom: none; }
  .trend-item:hover .t-name { color: var(--accent); }
  .t-rank {
    font-size: var(--text-2xs);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .t-name {
    font-size: var(--text-sm);
    color: var(--ink-1);
    font-weight: 500;
    transition: color .15s;
  }
  .t-delta {
    font-size: var(--text-2xs);
    color: var(--green);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }

  /* ── 投票可点击 + voted 状态 ── */
  .pvote { cursor: pointer; }
  .pvote.voted {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .pvote.voted .num { color: var(--accent); }
  .pvote.voted .tri { color: var(--accent); }
  .pvote.pulse { animation: votePulse .45s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes votePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
  }
  /* Top1 vote button 同样可点击 */
  .top1-vote .num { cursor: pointer; transition: transform .2s, color .15s; }
  .top1-vote .num.voted { color: var(--accent-d); }
  .top1-vote .num.pulse { animation: votePulse .45s cubic-bezier(0.34, 1.56, 0.64, 1); }

  /* ── Modal: loading + results views ── */
  .modal-view-loading {
    padding: 32px 0;
    text-align: center;
    color: var(--ink-2);
    font-size: var(--text-sm);
  }
  .loading-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 10px;
    animation: loadingPulse 1s ease-in-out infinite;
    vertical-align: middle;
  }
  @keyframes loadingPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.7); }
  }
  .modal-loading-track {
    display: flex; gap: 0;
    margin-top: 18px;
    height: 2px;
    background: var(--line-2);
    border-radius: var(--r-xs);
    overflow: hidden;
  }
  .modal-loading-track .bar {
    height: 100%;
    background: var(--accent);
    animation: loadingBar 1.6s ease-out forwards;
  }
  @keyframes loadingBar {
    0% { width: 0%; }
    100% { width: 100%; }
  }
  .modal-subq {
    font-size: var(--text-xs);
    color: var(--ink-2);
    margin-bottom: 18px;
    background: var(--bg-soft);
    padding: 8px 12px;
    border-radius: var(--r-sm);
  }
  .modal-subq strong { color: var(--ink); font-weight: 500; }
  .result-list {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
  }
  .result-item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .15s, background .15s;
    cursor: pointer;
  }
  .result-item:hover { border-color: var(--accent); background: var(--accent-soft); }
  .result-logo {
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    background: white;
    border: 1px solid var(--line);
    padding: 4px;
    overflow: hidden;
  }
  .result-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .result-info { min-width: 0; }
  .result-name { font-size: var(--text-base); font-weight: 500; color: var(--ink); }
  .result-desc { font-size: var(--text-xs); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .result-side { text-align: right; }
  .result-match {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }
  .result-match::after { content: " 匹配"; font-size: var(--text-2xs); color: var(--ink-3); font-weight: 400; }
  .result-btn {
    font-size: var(--text-2xs);
    color: var(--ink-1);
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    display: inline-block;
    margin-top: 4px;
    transition: all .15s;
  }
  .result-item:hover .result-btn { border-color: var(--accent); color: var(--accent); }

  /* ── Hero trust signal 数据带 ── */
  .hero-trust {
    margin-top: 24px;
    display: inline-flex; align-items: center; gap: 14px;
    font-size: var(--text-xs);
    color: var(--ink-2);
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-trust b {
    color: var(--ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .hero-trust .sep { color: var(--ink-3); }

  /* ── Hero 文字 CTA (副) ── */
  .btn-text-cta {
    font-size: var(--text-base);
    color: var(--ink-1);
    padding: 13px 4px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .15s;
  }
  .btn-text-cta::after {
    content: "→";
    display: inline-block;
    font-size: var(--text-sm);
    color: var(--ink-3);
    transition: transform .2s ease, color .15s ease;
  }
  .btn-text-cta:hover { color: var(--ink); }
  .btn-text-cta:hover::after { transform: translateX(4px); color: var(--accent); }

  /* ── Today #1 焦点卡 ── */
  .top1-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 28px 32px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    transition: border-color .15s, box-shadow .2s;
  }
  .top1-card:hover {
    border-color: var(--ink-3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  }
  .top1-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-d));
  }
  .top1-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-2xs);
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 18px;
  }
  .top1-label::before {
    content: "★";
    font-size: var(--text-2xs);
  }
  .top1-body {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 24px;
    align-items: center;
  }
  .top1-logo {
    width: 56px; height: 56px;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 6px;
    overflow: hidden;
  }
  .top1-logo img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
  }
  .top1-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }
  .top1-head h3 {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.015em;
  }
  .top1-content p {
    font-size: var(--text-sm);
    color: var(--ink-1);
    line-height: 1.65;
    margin-bottom: 10px;
  }
  .top1-meta {
    font-size: var(--text-2xs);
    color: var(--ink-2);
  }
  .top1-meta .ptag { color: var(--ink-2); }
  .top1-vote {
    display: flex; flex-direction: column;
    align-items: center; gap: 12px;
    min-width: 100px;
  }
  .top1-vote .num {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
  .top1-vote .num::before {
    content: "▲ ";
    font-size: var(--text-2xs);
    vertical-align: 4px;
    color: var(--accent);
  }
  .top1-vote .btn-accent { padding: 8px 18px; border-radius: var(--r-sm); }

  /* ── 分类 chip filter ── */
  .cat-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 18px;
    padding: 14px 0 0;
  }
  .cat-chip {
    font-size: var(--text-xs);
    color: var(--ink-2);
    background: transparent;
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
  }
  .cat-chip:hover { border-color: var(--ink-2); color: var(--ink-1); }
  .cat-chip.active {
    background: var(--ink);
    border-color: var(--ink);
    color: white;
  }
  .cat-chip .cnt {
    margin-left: 4px;
    color: var(--ink-3);
    font-size: var(--text-2xs);
    font-variant-numeric: tabular-nums;
  }
  .cat-chip.active .cnt { color: rgba(255,255,255,0.55); }

  /* Product list */
  .prod-list {}
  .list-header {
    display: grid;
    grid-template-columns: 48px 40px 1fr 200px 80px 64px;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-2);
    font-size: var(--text-2xs);
    color: var(--ink-2);
    font-weight: 400;
    letter-spacing: 0.04em;
  }
  .list-header .ar { text-align: right; }

  .prow {
    display: grid;
    grid-template-columns: 48px 40px 1fr 200px 80px 64px;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-3);
    cursor: pointer;
    transition: background .12s;
    align-items: center;
  }
  /* 标签 pills (替换原底座列) */
  .ptags {
    display: flex; flex-wrap: wrap; gap: 5px;
    justify-content: flex-end;
  }
  .ptag {
    display: inline-block;
    font-size: var(--text-xs);                /* 跟右侧 .pprice 一致 */
    color: var(--ink-2);
    background: transparent;
    padding: 0;
    line-height: 1.5;
    white-space: nowrap;
    font-weight: 400;
  }
  .ptag + .ptag::before {
    content: "·";
    color: var(--ink-3);
    margin-right: 6px;
  }
  .ptags { gap: 0; }
  .prow:hover { background: var(--bg-2); }
  .prank-cell {
    font-size: var(--text-xs);
    color: var(--ink-2);
    font-weight: 400;
    letter-spacing: 0.02em;
  }
  .prank-cell .hash { color: var(--ink-3); font-weight: 400; }
  .plogo {
    width: 30px; height: 30px;
    border-radius: var(--r-sm);
    background: var(--bg-soft);
    color: var(--ink-1);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs);
    font-weight: 500;
    flex-shrink: 0;
    border: 1px solid var(--line-2);
  }
  .plogo.dark { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .plogo.accent { background: var(--accent-soft); color: var(--accent); border-color: rgba(221,110,76,0.2); }
  /* 真实 favicon 图标 */
  .plogo.has-img { background: #FFFFFF; padding: 4px; overflow: hidden; }
  .plogo.has-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
  }
  .pmain { min-width: 0; }
  .ptop {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .pname {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .pdeal {
    background: var(--bg-soft);
    color: var(--ink-1);
    font-size: var(--text-2xs);
    padding: 1px 6px;
    border-radius: var(--r-xs);
    letter-spacing: 0.04em;
    font-weight: 500;
  }
  .pdesc {
    font-size: var(--text-sm);
    color: var(--ink-1);
    line-height: 1.55;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
  }
  .pbase {
    font-size: var(--text-2xs);
    color: var(--ink-2);
    text-align: right;
    font-weight: 400;
  }
  .pprice {
    font-size: var(--text-xs);
    color: var(--ink-2);
    text-align: right;
    font-weight: 400;
  }
  .pvote {
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 6px 0;
    background: transparent;
    transition: all .15s;
    border: 1px solid var(--line-2);
    border-radius: var(--r-xs);
  }
  .prow:hover .pvote { border-color: var(--accent); }
  .prow:hover .pvote .num { color: var(--accent); }
  .pvote .tri { font-size: var(--text-2xs); color: var(--ink-3); line-height: 1; }
  .pvote .num { font-size: var(--text-xs); font-weight: 500; color: var(--ink); margin-top: 2px; }

  /* 子墨测过 badge - 极克制版 */
  .verified-tag {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--text-2xs);
    color: var(--accent);
    padding: 0 5px 0 0;
    font-weight: 400;
    letter-spacing: 0;
  }
  .verified-tag::before {
    content: "";
    width: 10px; height: 10px;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  /* Premium row - 极克制 */
  .prow.premium {
    background: rgba(221,110,76,0.025);
  }
  .premium-tag {
    font-size: var(--text-2xs);
    color: var(--accent);
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-left: 4px;
  }

  /* Featured empty */
  .prow.featured-empty {
    background: var(--bg-soft);
    grid-template-columns: 1fr auto;
    padding: 14px 16px;
    display: flex; justify-content: space-between; align-items: center;
    margin: 6px 0;
    border-radius: var(--r-sm);
  }
  .featured-text {
    font-size: var(--text-sm);
    color: var(--ink-1);
  }
  .featured-text b { color: var(--ink); font-weight: 500; }

  .show-all {
    text-align: center;
    margin: 32px 0 0;
  }
  .btn-show {
    color: var(--ink-1);
    font-size: var(--text-sm);
    padding: 8px 20px;
    font-weight: 400;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--bg);
    transition: all .15s;
  }
  .btn-show:hover { border-color: var(--ink); color: var(--ink); }

  /* ── RIGHT ── */
  /* assistant card - 浅色版,不再是黑底 */
  .assistant-card {
    background: var(--bg-soft);
    padding: 18px;
    margin-bottom: 24px;
    border-radius: var(--r-sm);
  }
  .assistant-eyebrow {
    font-size: var(--text-2xs);
    color: var(--ink-2);
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
    font-weight: 500;
  }
  .assistant-eyebrow .live-dot { background: var(--accent); }
  .assistant-card h3 {
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 6px;
    color: var(--ink);
    letter-spacing: -0.005em;
  }
  .assistant-card p {
    font-size: var(--text-xs);
    color: var(--ink-1);
    line-height: 1.6;
    margin-bottom: 14px;
    font-weight: 400;
  }
  .assistant-input-mock {
    background: var(--bg-soft);
    border: 1px solid var(--line-2);
    padding: 8px 10px;
    font-family: var(--mono);
    font-size: var(--text-2xs);
    color: var(--ink-2);
    margin-bottom: 12px;
    border-radius: var(--r-xs);
  }
  .assistant-input-mock .cur {
    display: inline-block;
    width: 1.5px; height: 11px;
    background: var(--accent);
    vertical-align: middle;
    margin-left: 1px;
    animation: blink 1s infinite;
  }
  @keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
  .btn-launch {
    background: var(--ink);
    color: white;
    width: 100%;
    padding: 8px 0;
    font-size: var(--text-xs);
    font-weight: 500;
    text-align: center;
    display: block;
    border-radius: var(--r-xs);
    transition: background .15s;
  }
  .btn-launch:hover { background: #2E3441; }

  /* 编辑推荐 */
  .pick-list .pick-mini {
    padding: 12px 0;
    cursor: pointer;
  }
  .pick-list .pick-mini:hover .name { color: var(--accent); }
  .pick-mini .ptitle {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px;
  }
  .pick-mini .name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink);
    transition: color .15s;
  }
  .pick-mini .quote {
    font-size: var(--text-xs);
    color: var(--ink-1);
    line-height: 1.6;
    margin: 4px 0 8px;
    font-weight: 400;
  }
  .pick-mini .meta {
    display: flex; justify-content: space-between;
    margin-top: 6px;
    font-size: var(--text-2xs);
    color: var(--ink-2);
    font-weight: 400;
  }
  .pick-mini .meta .upv { color: var(--accent); font-weight: 500; }

  /* 提交 cta */
  .submit-cta-box {
    padding: 0;
    margin-top: 28px;
  }
  .submit-cta-box h4 {
    font-size: var(--text-2xs);
    color: var(--ink-2);
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    font-weight: 500;
  }
  .submit-cta-box p {
    font-size: var(--text-xs);
    color: var(--ink-1);
    line-height: 1.6;
    margin-bottom: 12px;
    font-weight: 400;
  }
  .btn-submit {
    background: var(--accent);
    color: white;
    display: block;
    width: 100%;
    padding: 8px 0;
    font-size: var(--text-xs);
    font-weight: 500;
    text-align: center;
    border-radius: var(--r-xs);
    transition: background .15s;
  }
  .btn-submit:hover { background: var(--accent-d); }

  /* ── BLOG (3 列, 无大色块封面) ── */
  .blog-section {
    padding: 40px 0 80px;
    background: var(--bg);
  }
  .blog-header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 32px;
  }
  .blog-header h2 {
    font-family: var(--display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  .blog-header .all-link {
    font-size: var(--text-xs);
    color: var(--ink-1);
    font-weight: 400;
  }
  .blog-header .all-link:hover { color: var(--accent); }

  .blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
  .blog-card {
    cursor: pointer;
    display: flex; flex-direction: column;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    transition: border-color .15s;
  }
  .blog-card:hover { border-top-color: var(--accent); }
  .blog-card:hover h3 { color: var(--accent); }
  .blog-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: var(--text-2xs);
    color: var(--ink-2);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    font-weight: 400;
  }
  .blog-meta .tag { color: var(--ink); font-weight: 500; }
  .blog-meta .sep { color: var(--ink-3); }
  .blog-card h3 {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.45;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    transition: color .15s;
  }
  .blog-card .excerpt {
    font-size: var(--text-sm);
    color: var(--ink-1);
    line-height: 1.7;
    margin-bottom: 16px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-card .read {
    font-size: var(--text-2xs);
    color: var(--ink-1);
    letter-spacing: 0.02em;
    margin-top: auto;
    font-weight: 400;
  }
  .blog-card:hover .read { color: var(--accent); }

  /* ── FOOTER ── */
  footer {
    background: var(--bg);
    border-top: 1px solid var(--line-2);
    padding: 56px 0 28px;
  }
  .foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line-2);
  }
  .foot-brand .brand-logo {
    margin-bottom: 14px;
    font-size: var(--text-md);
    letter-spacing: 0.1em;
    gap: 12px;
  }
  .foot-brand .brand-logo img { height: 28px; width: auto; }
  .foot-brand p {
    color: var(--ink-1);
    font-size: var(--text-sm);
    line-height: 1.75;
    max-width: 300px;
    font-weight: 400;
  }
  .foot-brand .meta-line {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: var(--text-2xs);
    color: var(--ink-2);
    letter-spacing: 0.03em;
    font-weight: 400;
  }
  .foot-brand .meta-line .live-dot {
    width: 6px; height: 6px;
    background: var(--green);
    border-radius: 50%;
  }
  .fcol h4 {
    font-size: var(--text-2xs);
    color: var(--ink-2);
    letter-spacing: 0.04em;
    font-weight: 500;
    margin-bottom: 14px;
  }
  .fcol a {
    display: block;
    font-size: var(--text-sm);
    color: var(--ink-1);
    padding: 4px 0;
    font-weight: 400;
    transition: color .15s;
  }
  .fcol a:hover { color: var(--accent); }
  .fcol .planned {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--text-sm); color: var(--ink-3);
    padding: 4px 0; font-weight: 400;
    cursor: not-allowed;
  }
  .fcol .planned .tag {
    font-family: var(--mono); font-size: 10px;
    color: var(--ink-3); border: 1px solid var(--line);
    padding: 1px 6px; border-radius: 4px; letter-spacing: 0.04em;
  }
  .foot-bottom {
    padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono);
    font-size: var(--text-2xs);
    color: var(--ink-2);
    letter-spacing: 0.02em;
    font-weight: 400;
  }
  .foot-bottom .right { display: flex; gap: 20px; }
  .foot-bottom .right a:hover { color: var(--ink); }

  @media (max-width: 900px) {
    :root { --pad: 20px; }
    .nav-center, .cmd-trigger { display: none; }
    .topbar-inner { grid-template-columns: 1fr auto; }
    .hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .hero h1 { font-size: var(--text-xl); }
    .main { grid-template-columns: 1fr; gap: 32px; }
    .main::before, .main::after { display: none; }
    .list-header { display: none; }
    .prow { grid-template-columns: 28px 1fr 50px; }
    .prow > .ptags, .prow > .pprice { display: none; }
    .blog-grid { grid-template-columns: 1fr; gap: 24px; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ── 客服对话 widget (MOXIE 助手 · 不遮挡主页面) ── */
  .chat-widget {
    position: fixed;
    bottom: 84px;
    right: 24px;
    width: 380px;
    height: 580px;
    max-height: calc(100vh - 120px);
    background: var(--bg);
    border-radius: var(--r-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 99;
    transform-origin: bottom right;
    animation: chatIn .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .chat-widget[hidden] { display: none; }
  @keyframes chatIn {
    from { opacity: 0; transform: translateY(12px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .chat-header {
    flex-shrink: 0;
    padding: 14px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line-2);
    display: flex; align-items: center; justify-content: space-between;
  }
  .chat-agent { display: flex; align-items: center; gap: 10px; }
  .chat-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-soft);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
  }
  .chat-avatar img { width: 22px; height: 22px; border-radius: var(--r-xs); }
  .chat-avatar::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 9px; height: 9px;
    background: var(--green);
    border: 2px solid var(--bg);
    border-radius: 50%;
  }
  .chat-name { font-size: var(--text-base); font-weight: 600; color: var(--ink); line-height: 1.2; }
  .chat-status { font-size: var(--text-2xs); color: var(--ink-2); margin-top: 2px; }
  .chat-close {
    width: 30px; height: 30px;
    background: transparent; border: none; cursor: pointer;
    color: var(--ink-2);
    font-size: var(--text-lg); line-height: 1;
    border-radius: var(--r-sm);
    transition: background .15s, color .15s;
  }
  .chat-close:hover { background: var(--bg-soft); color: var(--ink); }

  .chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--bg-2);
    display: flex; flex-direction: column; gap: 12px;
    overscroll-behavior: contain;
  }
  .msg { display: flex; gap: 8px; max-width: 92%; }
  .msg.bot { align-self: flex-start; }
  .msg.user { align-self: flex-end; flex-direction: row-reverse; }
  .msg > .av {
    width: 26px; height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-soft);
    display: flex; align-items: center; justify-content: center;
  }
  .msg.bot > .av img { width: 16px; height: 16px; border-radius: var(--r-xs); }
  .msg.user > .av {
    background: var(--accent);
    color: white;
    font-size: var(--text-2xs); font-weight: 500;
  }
  .msg .bubble {
    padding: 10px 12px;
    font-size: var(--text-base);
    line-height: 1.55;
    border-radius: var(--r-lg);
    word-break: break-word;
  }
  .msg.bot .bubble {
    background: var(--bg);
    border: 1px solid var(--line-2);
    color: var(--ink);
    border-bottom-left-radius: 4px;
  }
  .msg.user .bubble {
    background: var(--accent);
    color: white;
    border-bottom-right-radius: 4px;
  }
  .msg .bubble a { color: var(--accent); border-bottom: 1px solid rgba(221,110,76,0.35); }
  .msg.user .bubble a { color: white; border-bottom-color: rgba(255,255,255,0.5); }

  .quick-replies {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 8px;
  }
  .quick-reply {
    font-size: var(--text-xs);
    padding: 7px 11px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    color: var(--ink-1);
    cursor: pointer;
    transition: all .15s;
    line-height: 1.2;
  }
  .quick-reply:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-d);
  }

  .typing { display: flex; gap: 4px; align-items: center; height: 18px; }
  .typing span {
    width: 5px; height: 5px;
    background: var(--ink-3); border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
  }
  .typing span:nth-child(2) { animation-delay: 0.18s; }
  .typing span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes typingBounce {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
  }

  .product-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .product-card {
    display: flex; gap: 10px; align-items: center;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .product-card:hover { border-color: var(--accent); background: var(--bg-soft); }
  .product-card img { width: 26px; height: 26px; border-radius: var(--r-sm); flex-shrink: 0; }
  .product-card .pc-info { min-width: 0; flex: 1; }
  .product-card .pc-name { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
  .product-card .pc-desc { font-size: var(--text-2xs); color: var(--ink-2); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .product-card .pc-match { font-family: var(--mono); font-size: var(--text-2xs); color: var(--accent); flex-shrink: 0; font-weight: 500; }

  .chat-footer {
    flex-shrink: 0;
    padding: 12px;
    background: var(--bg);
    border-top: 1px solid var(--line-2);
    display: flex; gap: 8px; align-items: center;
  }
  .chat-input {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--ink);
    background: var(--bg-soft);
    border: 1px solid transparent;
    border-radius: var(--r-xl);
    transition: border-color .15s, background .15s;
  }
  .chat-input::placeholder { color: var(--ink-3); }
  .chat-input:focus {
    outline: none;
    background: var(--bg);
    border-color: var(--accent);
  }
  .chat-send {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s, transform .1s;
  }
  .chat-send:hover { background: var(--accent-d); }
  .chat-send:active { transform: scale(0.92); }
  .chat-send svg { width: 16px; height: 16px; }

  @media (max-width: 480px) {
    .chat-widget {
      width: auto;
      right: 12px;
      left: 12px;
      bottom: 76px;
      height: calc(100vh - 100px);
    }
  }