/* ═══════════════════════════════════════════
   iOS 26 风格基础（按记录定稿）
   ═══════════════════════════════════════════ */
:root {
    /* 深色主题变量（默认） */
    --bg-base: #000000;
    --bg-elevated: rgba(28, 28, 30, 0.88);
    --bg-card: rgba(44, 44, 46, 0.82);
    --bg-card-hover: rgba(58, 58, 60, 0.85);
    --bg-input: rgba(44, 44, 46, 0.75);
    --bg-grouped: rgba(28, 28, 30, 0.7);
    --separator: rgba(84, 84, 88, 0.55);

    --label-primary: #ffffff;
    /* 文字层级（按记录：深色加强） */
    --label-secondary: rgba(235, 235, 245, 0.88);
    --label-tertiary: rgba(235, 235, 245, 0.65);
    --label-quaternary: rgba(235, 235, 245, 0.45);

    --tint: #0a84ff;
    --tint-hover: #409cff;
    --green: #30d158;
    --orange: #ff9f0a;
    --red: #ff453a;
    --purple: #bf5af2;
    --indigo: #5e5ce6;
    --cyan: #64d2ff;
    --pink: #ff375f;

    --fill-thin: rgba(120, 120, 128, 0.18);
    --fill-medium: rgba(120, 120, 128, 0.24);
    --blur: 40px;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 30px;
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);

    /* 兼容旧 token：让现有组件自动吃到 iOS26 配色 */
    --bg-primary: var(--bg-base);
    --bg-secondary: var(--bg-elevated);
    --border: var(--separator);
    --text-primary: var(--label-primary);
    --text-secondary: var(--label-secondary);
    --text-muted: var(--label-tertiary);
    --accent: var(--tint);
    --accent-hover: var(--tint-hover);
    --success: var(--green);
    --warning: var(--orange);
    --error: var(--red);
    --white: #ffffff;

    --sidebar-width: 280px;
    --header-height: 56px;
    --radius: 12px;
    /* 兼容旧半径变量（少量旧样式还在用） */

    /* polish 文件里大量使用的 shadow，映射为 iOS 质感阴影 */
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.10);
    --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 20px rgba(10, 132, 255, 0.10);
    --overlay-bg: rgba(0, 0, 0, 0.45);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="light"] {
    /* 浅色主题变量（按记录：恢复 Apple 标准 + 对比度加强） */
    --bg-base: #f2f2f7;
    --bg-elevated: rgba(255, 255, 255, 0.95);
    --bg-card: rgba(255, 255, 255, 0.92);
    --bg-card-hover: rgba(255, 255, 255, 0.98);
    --bg-input: rgba(120, 120, 128, 0.05);
    --bg-grouped: rgba(255, 255, 255, 0.85);
    --separator: rgba(60, 60, 67, 0.38);

    --label-primary: #000000;
    --label-secondary: rgba(60, 60, 67, 0.88);
    --label-tertiary: rgba(60, 60, 67, 0.65);
    --label-quaternary: rgba(60, 60, 67, 0.32);

    --tint: #007aff;
    --tint-hover: #0066d6;
    --green: #34c759;
    --orange: #ff9500;
    --red: #ff3b30;
    --purple: #af52de;
    --indigo: #5856d6;

    --fill-thin: rgba(120, 120, 128, 0.14);
    --fill-medium: rgba(120, 120, 128, 0.24);

    /* 兼容旧 token */
    --bg-primary: var(--bg-base);
    --bg-secondary: var(--bg-elevated);
    --border: var(--separator);
    --text-primary: var(--label-primary);
    --text-secondary: var(--label-secondary);
    --text-muted: var(--label-tertiary);
    --accent: var(--tint);
    --accent-hover: var(--tint-hover);
    --success: var(--green);
    --warning: var(--orange);
    --error: var(--red);

    /* 浅色阴影（漂浮感加强） */
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 24px rgba(0, 122, 255, 0.15);
}

/* 浅色模式：关闭 section 磨砂采样，避免 body 光斑透色 */
[data-theme="light"] .preview-section {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
}

[data-theme="light"] .app-header-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
}

/* 浅色主题：单独加强所有组件边框（按记录） */
[data-theme="light"] .hat-card,
[data-theme="light"] .login-demo,
[data-theme="light"] .input-demo,
[data-theme="light"] .progress-demo,
[data-theme="light"] .timeline-demo,
[data-theme="light"] .phase-container,
[data-theme="light"] .info-badge,
[data-theme="light"] .toast,
[data-theme="light"] .sidebar-demo,
[data-theme="light"] .confirm-demo,
[data-theme="light"] .selector-demo,
[data-theme="light"] .modal-mini,
[data-theme="light"] .modal-demo,
[data-theme="light"] .history-viewer-demo,
[data-theme="light"] .search-bar-demo,
[data-theme="light"] .mobile-menu-demo,
[data-theme="light"] .consensus-demo,
[data-theme="light"] .crash-demo,
[data-theme="light"] .breadcrumb-demo,
[data-theme="light"] .skeleton-demo {
    border: 1px solid rgba(60, 60, 67, 0.18);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ═══════════════════════════════════════════
   Reset & Base
   ═══════════════════════════════════════════ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    font-family: -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue",
        "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg-base);
    color: var(--label-primary);
    min-height: 100dvh;
    /* 动态视口高度，修复 Safari */
    overflow-x: hidden;
    line-height: 1.5;
    /* 动态壁纸感：3个彩色渐变光斑 */
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(10, 132, 255, 0.08), transparent 50%),
        radial-gradient(ellipse at 80% 60%, rgba(191, 90, 242, 0.06), transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(48, 209, 88, 0.04), transparent 50%);
    background-attachment: fixed;
}

/* SVG 噪点纹理覆盖层（按记录） */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    pointer-events: none;
    z-index: 0;
}

/* 🔧 优化：自定义滚动条 */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--label-quaternary);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--label-tertiary);
}

/* ═══════════════════════════════════════════
   SVG 图标系统 — mask-image + currentColor
   统一圆角线条风格 · stroke-width 1.5 · rounded cap
   ═══════════════════════════════════════════ */
.ico {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

/* ☰ 汉堡菜单 */
.ico-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 5h14M3 10h14M3 15h14' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 5h14M3 10h14M3 15h14' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ＋ 新建 */
.ico-plus {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 4v12M4 10h12' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 4v12M4 10h12' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ⋮ 更多 */
.ico-dots {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='4.5' r='1.5' fill='black'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='black'/%3E%3Ccircle cx='10' cy='15.5' r='1.5' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='4.5' r='1.5' fill='black'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='black'/%3E%3Ccircle cx='10' cy='15.5' r='1.5' fill='black'/%3E%3C/svg%3E");
}

/* 📥 导出/下载 */
.ico-download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 3v9m-3-3l3 3.5 3-3.5M4 14v2a1 1 0 001 1h10a1 1 0 001-1v-2' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 3v9m-3-3l3 3.5 3-3.5M4 14v2a1 1 0 001 1h10a1 1 0 001-1v-2' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 🧩 代码/JSON */
.ico-code {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 4L3 10l4 6M13 4l4 6-4 6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 4L3 10l4 6M13 4l4 6-4 6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 📋 剪贴板/报告 */
.ico-clipboard {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M13 3h1a2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2h1' stroke='black' stroke-width='1.5'/%3E%3Crect x='7' y='1.5' width='6' height='3' rx='1' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M13 3h1a2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2h1' stroke='black' stroke-width='1.5'/%3E%3Crect x='7' y='1.5' width='6' height='3' rx='1' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* 🧾 文档/速览 */
.ico-doc {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 2h6l4 4v11a1 1 0 01-1 1H6a1 1 0 01-1-1V3a1 1 0 011-1z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12 2v4h4M8 10h4M8 13h3' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 2h6l4 4v11a1 1 0 01-1 1H6a1 1 0 01-1-1V3a1 1 0 011-1z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12 2v4h4M8 10h4M8 13h3' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ⭐ 收藏 */
.ico-star {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 2l2.35 4.76 5.25.76-3.8 3.7.9 5.24L10 14.14l-4.7 2.32.9-5.24-3.8-3.7 5.25-.76L10 2z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 2l2.35 4.76 5.25.76-3.8 3.7.9 5.24L10 14.14l-4.7 2.32.9-5.24-3.8-3.7 5.25-.76L10 2z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 收藏填充态 */
.ico-star-fill {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2l2.35 4.76 5.25.76-3.8 3.7.9 5.24L10 14.14l-4.7 2.32.9-5.24-3.8-3.7 5.25-.76L10 2z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2l2.35 4.76 5.25.76-3.8 3.7.9 5.24L10 14.14l-4.7 2.32.9-5.24-3.8-3.7 5.25-.76L10 2z' fill='black'/%3E%3C/svg%3E");
}

/* 🧭 趋势/观点演变 */
.ico-trend {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 16l4-5 4 3 6-10' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 4h3v3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 16l4-5 4 3 6-10' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 4h3v3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 📊 柱状图/对比 */
.ico-chart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 17V10M8 17V5M12 17V12M16 17V7' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 17V10M8 17V5M12 17V12M16 17V7' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 🎨 主题切换 (半月) */
.ico-theme {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='7' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M10 3a7 7 0 010 14V3z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='7' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M10 3a7 7 0 010 14V3z' fill='black'/%3E%3C/svg%3E");
}

/* 📌 图钉 */
.ico-pin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 12v5M6 12h8M7.5 12l-.5-4 1.5-2V4h3v2l1.5 2-.5 4' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 12v5M6 12h8M7.5 12l-.5-4 1.5-2V4h3v2l1.5 2-.5 4' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 🔑 钥匙 (登录品牌) */
.ico-key {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='7' cy='10' r='3.5' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M10.5 10H17M14 8v4' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='7' cy='10' r='3.5' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M10.5 10H17M14 8v4' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 👤+ 用户注册 (注册品牌) */
.ico-user-plus {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8' cy='6' r='3' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M2 17c0-3.3 2.7-6 6-6s6 2.7 6 6' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M16 8v4M14 10h4' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8' cy='6' r='3' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M2 17c0-3.3 2.7-6 6-6s6 2.7 6 6' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M16 8v4M14 10h4' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ✓ 勾选 */
.ico-check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10l4.5 4.5L16 5.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10l4.5 4.5L16 5.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ✕ 关闭 */
.ico-close {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ▲ 收起 */
.ico-up {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 13l5-5 5 5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 13l5-5 5 5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ▼ 展开 */
.ico-down {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ■ 停止 */
.ico-stop {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='4' y='4' width='12' height='12' rx='2' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='4' y='4' width='12' height='12' rx='2' fill='black'/%3E%3C/svg%3E");
}

/* 🔍 搜索/质疑 */
.ico-search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M13 13l4 4' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M13 13l4 4' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ⚡ 闪电/快速 */
.ico-bolt {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11 1L4 11h5l-1 8 7-10h-5l1-8z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11 1L4 11h5l-1 8 7-10h-5l1-8z' fill='black'/%3E%3C/svg%3E");
}

/* 🎯 靶心/目标 */
.ico-target {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='7' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='3.5' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='1' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='7' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='3.5' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='1' fill='black'/%3E%3C/svg%3E");
}

/* 🚀 火箭/启动 */
.ico-rocket {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 2c-2 4-2 7 0 11m0-11c2 4 2 7 0 11m0-11c3-1 6 1 6 5-2 1-4 3-6 6m0-11c-3-1-6 1-6 5 2 1 4 3 6 6M7 14l-2 3M13 14l2 3' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 2c-2 4-2 7 0 11m0-11c2 4 2 7 0 11m0-11c3-1 6 1 6 5-2 1-4 3-6 6m0-11c-3-1-6 1-6 5 2 1 4 3 6 6M7 14l-2 3M13 14l2 3' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 🔄 刷新/循环 */
.ico-refresh {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 10a7 7 0 0112.5-4.3L17 4v4h-4M17 10a7 7 0 01-12.5 4.3L3 16v-4h4' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 10a7 7 0 0112.5-4.3L17 4v4h-4M17 10a7 7 0 01-12.5 4.3L3 16v-4h4' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 🤝 握手/共识 */
.ico-handshake {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 10h3l3 3 4-4 3 3h3M5 10V6M15 10V6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 10h3l3 3 4-4 3 3h3M5 10V6M15 10V6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 💬 聊天气泡 */
.ico-chat {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 4h12a1 1 0 011 1v8a1 1 0 01-1 1h-3l-3 3-3-3H4a1 1 0 01-1-1V5a1 1 0 011-1z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 4h12a1 1 0 011 1v8a1 1 0 01-1 1h-3l-3 3-3-3H4a1 1 0 01-1-1V5a1 1 0 011-1z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 🛡 盾牌 */
.ico-shield {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 2L3 6v4c0 4.4 3 8.5 7 10 4-1.5 7-5.6 7-10V6l-7-4z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 2L3 6v4c0 4.4 3 8.5 7 10 4-1.5 7-5.6 7-10V6l-7-4z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ⚠ 警告三角 */
.ico-warning {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 3L2 17h16L10 3z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 8v4M10 14v1' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 3L2 17h16L10 3z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 8v4M10 14v1' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ▶ 播放/开始 */
.ico-play {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 3l12 7-12 7V3z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 3l12 7-12 7V3z' fill='black'/%3E%3C/svg%3E");
}

/* ● 圆点（状态指示） */
.ico-dot {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5' fill='black'/%3E%3C/svg%3E");
}

/* 👍 点赞 */
.ico-thumbup {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 18H4a1 1 0 01-1-1v-6a1 1 0 011-1h3m0 8V10m0 8h7.4a2 2 0 002-1.7l.8-5A2 2 0 0015.2 9H12V5a2 2 0 00-2-2l-3 7' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 18H4a1 1 0 01-1-1v-6a1 1 0 011-1h3m0 8V10m0 8h7.4a2 2 0 002-1.7l.8-5A2 2 0 0015.2 9H12V5a2 2 0 00-2-2l-3 7' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 图标尺寸修饰 */
.ico-sm {
    font-size: 0.75rem;
}

.ico-md {
    font-size: 1rem;
}

.ico-lg {
    font-size: 1.25rem;
}

a {
    color: var(--accent);
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    padding: 8px 16px;
    transition: all 0.2s var(--spring);
    touch-action: manipulation;
}

/* ═══════════════════════════════════════════
   预览布局
   ═══════════════════════════════════════════ */
.preview-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 14px 20px;
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
    border-bottom: 0.5px solid var(--separator);
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-nav h1 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--label-primary);
}

.preview-nav .tag {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(10, 132, 255, 0.12);
    color: var(--tint);
}

.preview-section {
    max-width: 920px;
    margin: 28px auto 0;
    padding: 20px;
    overflow-x: hidden;
    background: var(--bg-card);
    backdrop-filter: saturate(180%) blur(var(--blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
    border: 0.5px solid var(--separator);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    position: relative;
    z-index: 1;
    /* 盖住 body::before 噪点层 */
    transition: transform 0.35s var(--spring), box-shadow 0.35s var(--spring);
}

.preview-section:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.preview-section h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
    color: var(--label-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding-left: 12px;
}

.preview-section h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 2px;
    background: var(--tint);
}

.preview-divider {
    border: none;
    height: 32px;
    margin: 0;
}

.preview-section.preview-wide {
    max-width: min(1440px, calc(100vw - 40px));
}

.legacy-full-preview {
    display: none !important;
}

.preview-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.preview-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .preview-row {
        grid-template-columns: 1fr;
    }

    .preview-section {
        padding: 16px;
        margin-top: 20px;
    }
}

/* 手机 ≤640px（按记录：全面缩小） */
@media (max-width: 640px) {
    .preview-section {
        padding: 12px;
    }

    .preview-nav {
        padding: 12px 14px;
    }

    .card-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
        border-radius: 9px;
    }

    .card-name {
        font-size: 0.82rem;
        gap: 4px;
    }

    .card-model {
        font-size: 0.55rem;
        padding: 1px 5px;
    }

    .card-role-row {
        gap: 4px;
    }

    .card-role {
        font-size: 0.68rem;
    }

    .card-actions {
        gap: 0px;
    }

    .card-action-btn {
        font-size: 0.65rem;
        padding: 3px 4px;
        border-radius: 6px;
    }

    .card-action-btn.fav,
    .card-action-btn.pin {
        font-size: 0.75rem;
        padding: 2px 3px;
    }

    .status-pill {
        font-size: 0.58rem;
        padding: 2px 6px;
    }

    .boost-pill {
        font-size: 0.58rem;
        padding: 2px 6px;
    }

    .card-body {
        padding: 0 10px 10px;
        font-size: 0.8rem;
    }

    .card-collapsed-summary {
        padding: 0 10px 8px;
    }

    .thinking-bar {
        padding: 8px 10px;
        font-size: 0.78rem;
        gap: 5px;
    }

    .think-av {
        width: 22px;
        height: 22px;
        font-size: 0.8rem;
        border-radius: 7px;
    }

    .think-timer {
        font-size: 0.78rem;
        min-width: 25px;
    }

    .mid-ask-bar {
        padding: 8px 10px;
        font-size: 0.78rem;
        gap: 5px;
    }

    .mid-ask-label {
        font-size: 0.75rem;
    }

    .mid-ask-av {
        padding: 5px 12px;
        font-size: 0.75rem;
    }

    .input-title {
        font-size: 1.3rem;
    }

    .input-subtitle {
        font-size: 0.82rem;
    }

    .cap-tag {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    .project-input {
        font-size: 0.85rem;
        min-height: 80px;
    }

    .options-row {
        font-size: 0.75rem;
        gap: 6px;
        flex-wrap: wrap;
    }

    .btn-start {
        font-size: 0.88rem;
        padding: 10px;
    }

    .search-bar-demo {
        padding: 6px;
    }
}

/* iPhone SE ≤375px（按记录：极限缩小） */
@media (max-width: 375px) {
    .preview-section {
        padding: 10px;
    }

    .card-avatar {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }

    .card-name {
        font-size: 0.78rem;
    }

    .card-model {
        font-size: 0.5rem;
        padding: 1px 4px;
    }

    .card-role {
        font-size: 0.62rem;
    }

    .card-action-btn {
        font-size: 0.6rem;
        padding: 2px 3px;
    }

    .card-action-btn.fav,
    .card-action-btn.pin {
        font-size: 0.68rem;
        padding: 1px 2px;
    }

    .status-pill {
        font-size: 0.55rem;
        padding: 1px 5px;
    }

    .boost-pill {
        font-size: 0.55rem;
        padding: 1px 5px;
    }

    .think-av {
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
    }

    .cap-tag {
        font-size: 0.65rem;
        padding: 3px 6px;
    }

    .input-title {
        font-size: 1.1rem;
    }

    .confirm-input-row {
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════
   1. 登录区（与注册成对）
   ═══════════════════════════════════════════ */
.login-demo {
    max-width: 400px;
    margin: 0 auto;
    padding: 40px 32px 32px;
    text-align: center;
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
    border: 0.5px solid var(--separator);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    transition: transform 0.35s var(--spring), box-shadow 0.35s var(--spring);
    position: relative;
    overflow: hidden;
}

.login-demo:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

/* 顶部弧光（蓝→靛，与注册的彩虹呼应） */
.login-demo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tint), var(--indigo), var(--cyan));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.login-brand {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--tint);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.12), rgba(94, 92, 230, 0.10));
    border: 0.5px solid var(--separator);
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.10);
}

.login-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 2px;
    background: linear-gradient(135deg, var(--label-primary) 30%, var(--tint));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-subtitle {
    color: var(--label-tertiary);
    margin-bottom: 24px;
    font-size: 0.85rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.login-form .login-field {
    position: relative;
}

.login-form .login-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--label-tertiary);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.login-form input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--separator);
    border-radius: 12px;
    background: var(--bg-input);
    color: var(--label-primary);
    font-size: 0.95rem;
    transition: all 0.25s var(--spring);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.login-form input::placeholder {
    color: var(--label-quaternary);
}

.login-form input:focus {
    outline: none;
    border-color: var(--tint);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12), 0 4px 16px rgba(0, 122, 255, 0.08);
    transform: translateY(-1px);
}

.login-form .btn-login {
    width: 100%;
    padding: 13px;
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--tint), var(--indigo));
    color: #fff;
    border-radius: 14px;
    margin-top: 6px;
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.28), 0 1px 4px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.22s var(--spring);
}

.login-form .btn-login::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transition: left 0.5s;
}

.login-form .btn-login:hover::after {
    left: 100%;
}

.login-form .btn-login:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(10, 132, 255, 0.38), 0 2px 8px rgba(0, 0, 0, 0.10);
    filter: brightness(1.05);
}

.login-switch {
    margin-top: 16px;
    font-size: 0.82rem;
    color: var(--label-tertiary);
    text-align: center;
}

.link-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.login-switch a,
.login-switch .link-btn {
    color: var(--tint);
    font-weight: 600;
}

.login-switch a:hover,
.login-switch .link-btn:hover {
    text-decoration: underline;
}

/* 入场动画 */
.login-form .login-field,
.login-form .btn-login,
.login-switch {
    animation: regFieldIn 0.5s var(--spring) both;
}

.login-form .login-field:nth-child(1) {
    animation-delay: 0.05s;
}

.login-form .login-field:nth-child(2) {
    animation-delay: 0.10s;
}

.login-form .btn-login {
    animation-delay: 0.15s;
}

.login-switch {
    animation-delay: 0.22s;
}

/* 浅色主题边框加强 */
[data-theme="light"] .login-demo {
    border: 1px solid rgba(60, 60, 67, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* 响应式 */
@media (max-width: 640px) {
    .login-demo {
        padding: 32px 20px 24px;
    }

    .login-title {
        font-size: 1.15rem;
    }

    .login-brand {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
        border-radius: 14px;
    }

    .login-form input {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .login-form .btn-login {
        padding: 12px;
        font-size: 0.95rem;
    }
}

/* ═══════════════════════════════════════════
   1b. 注册区
   ═══════════════════════════════════════════ */
.register-demo {
    max-width: 400px;
    margin: 0 auto;
    padding: 40px 32px 32px;
    text-align: center;
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
    border: 0.5px solid var(--separator);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    transition: transform 0.35s var(--spring), box-shadow 0.35s var(--spring);
    position: relative;
    overflow: hidden;
}

.register-demo:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

/* 顶部装饰弧光 */
.register-demo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tint), var(--purple), var(--pink), var(--orange));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.register-brand {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--purple);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.12), rgba(191, 90, 242, 0.10));
    border: 0.5px solid var(--separator);
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.10);
}

.register-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 2px;
    background: linear-gradient(135deg, var(--label-primary) 30%, var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.register-subtitle {
    color: var(--label-tertiary);
    margin-bottom: 24px;
    font-size: 0.85rem;
}

.register-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.reg-field {
    position: relative;
}

.reg-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--label-tertiary);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.reg-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--separator);
    border-radius: 12px;
    background: var(--bg-input);
    color: var(--label-primary);
    font-size: 0.95rem;
    transition: all 0.25s var(--spring);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.reg-field input:focus {
    outline: none;
    border-color: var(--tint);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12), 0 4px 16px rgba(0, 122, 255, 0.08);
    transform: translateY(-1px);
}

.reg-field input::placeholder {
    color: var(--label-quaternary);
}

/* 密码强度指示器 */
.pwd-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 0 2px;
}

.pwd-strength-bars {
    display: flex;
    gap: 3px;
    flex: 1;
}

.pwd-strength-bar {
    height: 3px;
    border-radius: 2px;
    flex: 1;
    background: var(--fill-thin);
    transition: background 0.3s;
}

.pwd-strength-bar.active:nth-child(1) {
    background: var(--red);
}

.pwd-strength-bar.active:nth-child(2) {
    background: var(--orange);
}

.pwd-strength-bar.active:nth-child(3) {
    background: var(--orange);
}

.pwd-strength-bar.active:nth-child(4) {
    background: var(--green);
}

.pwd-strength-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--orange);
    white-space: nowrap;
}

/* 协议勾选 */
.reg-agree {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--label-tertiary);
    line-height: 1.5;
}

.reg-agree input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--tint);
    flex-shrink: 0;
    cursor: pointer;
}

.reg-agree a,
.reg-agree .link-btn {
    color: var(--tint);
    font-weight: 500;
}

.reg-agree a:hover,
.reg-agree .link-btn:hover {
    text-decoration: underline;
}

/* 注册按钮 */
.btn-register {
    width: 100%;
    padding: 13px;
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--purple), var(--tint));
    color: #fff;
    border-radius: 14px;
    margin-top: 6px;
    box-shadow: 0 4px 16px rgba(191, 90, 242, 0.28), 0 1px 4px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.22s var(--spring);
}

.btn-register::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transition: left 0.5s;
}

.btn-register:hover::after {
    left: 100%;
}

.btn-register:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(191, 90, 242, 0.38), 0 2px 8px rgba(0, 0, 0, 0.10);
    filter: brightness(1.05);
}

/* 切换链接 */
.reg-switch {
    margin-top: 16px;
    font-size: 0.82rem;
    color: var(--label-tertiary);
    text-align: center;
}

.reg-switch a,
.reg-switch .link-btn {
    color: var(--tint);
    font-weight: 600;
}

.reg-switch a:hover,
.reg-switch .link-btn:hover {
    text-decoration: underline;
}

/* 表单域交错入场 */
.reg-field,
.reg-agree,
.btn-register,
.reg-switch {
    animation: regFieldIn 0.5s var(--spring) both;
}

.reg-field:nth-child(1) {
    animation-delay: 0.05s;
}

.reg-field:nth-child(2) {
    animation-delay: 0.10s;
}

.reg-field:nth-child(3) {
    animation-delay: 0.15s;
}

.reg-agree {
    animation-delay: 0.20s;
}

.btn-register {
    animation-delay: 0.25s;
}

.reg-switch {
    animation-delay: 0.30s;
}

@keyframes regFieldIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 浅色主题边框加强 */
[data-theme="light"] .register-demo {
    border: 1px solid rgba(60, 60, 67, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* 响应式 */
@media (max-width: 640px) {
    .register-demo {
        padding: 32px 20px 24px;
    }

    .register-title {
        font-size: 1.15rem;
    }

    .register-brand {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
        border-radius: 14px;
    }

    .reg-field input {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .btn-register {
        padding: 12px;
        font-size: 0.95rem;
    }
}

/* ═══════════════════════════════════════════
   2. 首页输入区（优化版）
   ═══════════════════════════════════════════ */
.input-demo {
    max-width: 720px;
    margin: 0 auto;
}

.input-title {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
    /* 🔧 优化：标题渐变 */
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.input-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}

.cap-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-bottom: 22px;
}

.cap-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    /* 🔧 优化：标签 hover */
    transition: all 0.2s;
}

.cap-tag:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 122, 255, 0.06);
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 122, 255, 0.12);
}

.project-input {
    width: calc(100% - 24px);
    margin: 0 12px;
    min-height: 120px;
    padding: 16px;
    border: 1px solid rgba(60, 60, 67, 0.10);
    border-radius: 16px;
    box-sizing: border-box;
    background: rgba(120, 120, 128, 0.05);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.7;
    resize: vertical;
    transition: all 0.25s var(--spring);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}

.project-input:focus {
    outline: none;
    border-color: rgba(0, 122, 255, 0.35);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.10), inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* CTA 区域 — 呼吸空间 + 精致按钮 */
.input-actions {
    margin-top: 22px;
    text-align: center;
}

.btn-start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px;
    font-size: 1.05rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--tint) 0%, #3b82f6 100%);
    color: #fff;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(10, 132, 255, 0.30), 0 1px 4px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s var(--spring), box-shadow 0.25s var(--spring);
    letter-spacing: 0.02em;
}

.btn-start::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transition: left 0.5s;
}

.btn-start:hover::after {
    left: 100%;
}

.btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(10, 132, 255, 0.38), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-start:active {
    transform: translateY(0) scale(0.98);
}

/* ═══════════════════════════════════════════
   3. 进度条（优化版）
   ═══════════════════════════════════════════ */
.progress-demo {
    padding: 10px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}

.progress-demo:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.progress-text {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
}

.progress-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-primary);
    border: 1px solid rgba(48, 54, 61, 0.5);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    /* 🔧 优化：渐变进度条 + shimmer 动画 */
    background: linear-gradient(90deg, var(--accent), #818cf8, var(--accent));
    background-size: 200% 100%;
    animation: progressShimmer 1.4s ease infinite;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes progressShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ═══════════════════════════════════════════
   4. 卡片（优化版）
   ═══════════════════════════════════════════ */
.hat-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

/* PC：容器加宽 + 讨论卡片三列 */
@media (min-width: 1024px) {
    .preview-section {
        max-width: 1200px;
    }

    .hat-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hat-card {
    background: var(--bg-card);
    backdrop-filter: saturate(150%) blur(30px);
    -webkit-backdrop-filter: saturate(150%) blur(30px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--separator);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
    transition: transform 0.35s var(--spring), box-shadow 0.35s var(--spring), border-color 0.35s var(--spring), background 0.35s var(--spring), filter 0.35s var(--spring);
    box-shadow: var(--shadow);
    position: relative;
    animation: cardSlideUp 0.65s var(--spring) both;
    margin-bottom: 12px;
}

.hat-card:last-child {
    margin-bottom: 0;
}

.hat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.25) 70%, transparent 100%);
    z-index: 1;
}

.hat-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-6px) scale(1.015);
    box-shadow:
        0 18px 64px rgba(0, 0, 0, 0.26),
        0 6px 22px rgba(0, 0, 0, 0.14),
        0 0 0 1px rgba(10, 132, 255, 0.08),
        0 0 28px rgba(10, 132, 255, 0.10);
    border-top-color: rgba(255, 255, 255, 0.25);
}

[data-theme="light"] .hat-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .hat-card::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.7) 70%, transparent 100%);
}

[data-theme="light"] .hat-card:hover {
    box-shadow:
        0 22px 64px rgba(0, 0, 0, 0.16),
        0 8px 24px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(0, 122, 255, 0.12),
        0 0 30px rgba(0, 122, 255, 0.12);
    transform: translateY(-8px) scale(1.018);
}

@keyframes cardSlideUp {
    0% {
        opacity: 0;
        transform: translateY(32px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hat-card:nth-child(1) {
    animation-delay: 0s;
}

.hat-card:nth-child(2) {
    animation-delay: 0.06s;
}

.hat-card:nth-child(3) {
    animation-delay: 0.12s;
}

.hat-card:nth-child(4) {
    animation-delay: 0.18s;
}

.hat-card:nth-child(5) {
    animation-delay: 0.24s;
}

.hat-card:nth-child(6) {
    animation-delay: 0.30s;
}

.hat-card:nth-child(7) {
    animation-delay: 0.36s;
}

/* streaming 状态脉冲（按记录） */
.hat-card.streaming {
    border-color: rgba(10, 132, 255, 0.4);
    box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.15), 0 4px 24px rgba(10, 132, 255, 0.10);
    animation: cardPulse 2.5s ease-in-out infinite;
}

@keyframes cardPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(10, 132, 255, 0.15),
            0 6px 26px rgba(10, 132, 255, 0.10),
            0 0 18px rgba(10, 132, 255, 0.10);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(10, 132, 255, 0.38),
            0 10px 40px rgba(10, 132, 255, 0.16),
            0 0 34px rgba(10, 132, 255, 0.18);
    }
}

/* 讨论卡片结构（按记录）：card-header / card-avatar / card-meta / card-actions */
.card-header,
.hat-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: transparent;
    flex-shrink: 0;
    background-size: 20px 20px, 100% 100%;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* 🐺 村长 - 狼：尖耳利爪，头狼带队 */
.card-avatar[data-hat="blue"] {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='.92' d='M5 3l4 7v8h2v-2h2v2h2V10l4-7-4 4H9L5 3z'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #60a5fa, #3b82f6);
    box-shadow: 0 0 12px rgba(10, 132, 255, 0.3);
}

/* 🦅 铁蛋 - 鹰：锐眼俯瞰，数据洞察 */
.card-avatar[data-hat="white"] {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='10' rx='7' ry='7' fill='white' fill-opacity='.92'/%3E%3Cpolygon points='9.5,17 12,22 14.5,17' fill='white' fill-opacity='.92'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #8e9aaf, #a8b5c7);
    box-shadow: 0 0 12px rgba(174, 174, 178, 0.3);
}

/* 🦊 小翠 - 狐狸：聪慧灵敏，感性细腻 */
.card-avatar[data-hat="red"] {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='.92' d='M3 2l5 8 1 10 3 2 3-2 1-10 5-8-5 5H8L3 2z'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #f472b6, #e879a0);
    box-shadow: 0 0 12px rgba(255, 69, 58, 0.3);
}

/* 🐿 狗剩 - 松鼠：灵活囤货，看到机会就抓 */
.card-avatar[data-hat="yellow"] {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='13' r='6.5' fill='white' fill-opacity='.92'/%3E%3Cpath d='M16,15C17,11 19,7 18,4 17,2 15,3 15,6 15,9 16,13 16,15Z' fill='white' fill-opacity='.92'/%3E%3Ccircle cx='7' cy='7' r='2.5' fill='white' fill-opacity='.92'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #f59e0b, #eab308);
    box-shadow: 0 0 12px rgba(255, 159, 10, 0.3);
}

/* 🐍 栓子 - 蛇：冷静盘踞，风险嗅觉 */
.card-avatar[data-hat="black"] {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='4' r='2.8' fill='white' fill-opacity='.92'/%3E%3Cpath d='M8,6.5C13,8 17,9 17,13 17,17 7,17 7,21' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' opacity='.92'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #64748b, #475569);
    box-shadow: 0 0 12px rgba(142, 142, 147, 0.3);
}

/* 🐙 麻子 - 章鱼：触角发散，灵感四射 */
.card-avatar[data-hat="green"] {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='8' rx='7' ry='5.5' fill='white' fill-opacity='.92'/%3E%3Cpath d='M6,13L5,20M9,14L8,21M12,14L12,22M15,14L16,21M18,13L19,20' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' opacity='.92'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 0 12px rgba(48, 209, 88, 0.3);
}

/* 🐻 铁柱 - 熊：稳重有力，说干就干 */
.card-avatar[data-hat="purple"] {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='6' r='3.5' fill='white' fill-opacity='.92'/%3E%3Ccircle cx='18' cy='6' r='3.5' fill='white' fill-opacity='.92'/%3E%3Ccircle cx='12' cy='14' r='7.5' fill='white' fill-opacity='.92'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #a78bfa, #8b5cf6);
    box-shadow: 0 0 12px rgba(191, 90, 242, 0.3);
}

.card-meta {
    flex: 1;
    min-width: 0;
}

.card-name {
    font-size: 0.92rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: var(--label-primary);
}

.card-role-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.card-role {
    font-size: 0.75rem;
    color: var(--label-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.card-model {
    font-size: 0.62rem;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--fill-thin);
    color: var(--label-tertiary);
    border: 0.5px solid var(--separator);
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.card-action-btn {
    background: none;
    border: none;
    color: var(--label-secondary);
    font-size: 0.78rem;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.18s var(--spring), background 0.15s var(--spring), color 0.15s var(--spring), filter 0.15s var(--spring);
}

.card-action-btn:hover {
    background: var(--fill-thin);
    color: var(--label-secondary);
}

.card-action-btn.fav,
.card-action-btn.pin {
    font-size: 0.85rem;
    padding: 2px 4px;
    min-width: auto;
    opacity: 0.65;
}

.card-action-btn.fav:hover,
.card-action-btn.pin:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* 折叠态摘要 */
.card-collapsed-summary {
    padding: 0 14px 12px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--label-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-pill {
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 500;
}

.status-pill.thinking {
    background: rgba(10, 132, 255, 0.12);
    color: var(--tint);
    animation: thinkingPulse 1.5s ease-in-out infinite;
}

.status-pill.done {
    background: rgba(48, 209, 88, 0.12);
    color: var(--green);
}

.status-pill.error {
    background: rgba(255, 69, 58, 0.12);
    color: var(--red);
}

@keyframes thinkingPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(10, 132, 255, 0);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 8px 2px rgba(10, 132, 255, 0.2);
    }
}

.typing-indicator {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    padding: 2px 6px;
    margin-left: 4px;
    vertical-align: middle;
}

.typing-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tint);
    animation: typingBounce 1.2s infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.3;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* 新 body（按记录命名）*/
.card-body,
.hat-card-body {
    padding: 0 16px 16px;
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--label-primary);
    border-top: 0.5px solid var(--separator);
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding-top: 14px;
    position: relative;
    z-index: 2;
}

/* 🔧 优化：补强标签闪烁 */
.boost-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    white-space: nowrap;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 500;
    animation: boostBlink 1.5s ease-in-out infinite;
}

.boost-tag.quality {
    background: rgba(251, 191, 36, 0.12);
    color: #d97706;
}

.boost-tag.minority {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

@keyframes boostBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* 不同声音 boost 标签（按记录定稿：boost-pill + 深浅主题 + 呼吸动画 + 边框） */
.boost-pill {
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 600;
    animation: pillBlink 1.8s ease-in-out infinite;
    border: 1px solid;
}

/* 深色主题（默认）：高对比 */
.boost-pill.quality {
    background: rgba(255, 200, 60, 0.25);
    color: #fde047;
    border-color: rgba(255, 200, 60, 0.6);
}

.boost-pill.minority {
    background: rgba(200, 140, 255, 0.28);
    color: #e0ccff;
    border-color: rgba(200, 140, 255, 0.65);
}

/* 浅色主题 */
[data-theme="light"] .boost-pill.quality {
    background: rgba(255, 159, 10, 0.18);
    color: #92400e;
    border-color: rgba(255, 159, 10, 0.5);
}

[data-theme="light"] .boost-pill.minority {
    background: rgba(139, 92, 246, 0.15);
    color: #5b21b6;
    border-color: rgba(139, 92, 246, 0.5);
}

@keyframes pillBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* ═══════════════════════════════════════════
   Global Layout Constraints
   ═══════════════════════════════════════════ */
.app-page-pad {
    max-width: 1024px;
    margin: 0 auto;
    width: 100%;
}

.collapse-btn {
    background: transparent;
    color: var(--text-muted);
    font-size: 0.68rem;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.15s;
}

.collapse-btn:hover {
    background: var(--bg-primary);
    color: var(--text-secondary);
}

.action-btn {
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}

.action-btn:hover {
    color: var(--accent);
    background: rgba(88, 166, 255, 0.06);
}

.hat-card-body {
    padding: 16px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 0.88rem;
    line-height: 1.8;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

.hat-card-body.collapsed {
    max-height: 0;
    padding: 0 16px;
    overflow: hidden;
}

/* 🔧 优化：内容截断渐变提示 */
.hat-card-body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.hat-card-body.at-bottom::after {
    opacity: 0;
}

/* Markdown 渲染（card-body + hat-card-body 统一） */
.card-body h2,
.hat-card-body h2 {
    font-size: 1.05rem;
    margin: 0 0 8px;
    font-weight: 600;
}

.card-body h3,
.hat-card-body h3 {
    font-size: 0.95rem;
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--label-primary);
    line-height: 1.6;
}

.card-body p,
.hat-card-body p {
    margin: 0 0 8px;
    line-height: 1.75;
    color: var(--label-secondary);
}

.card-body ul,
.hat-card-body ul,
.card-body ol,
.hat-card-body ol {
    padding-left: 1.2em;
    /* 让序号/圆点紧贴正文左边线 */
    margin: 0 0 8px;
}

.card-body li,
.hat-card-body li {
    margin-bottom: 4px;
    padding-left: 0;
    line-height: 1.65;
}

.card-body strong,
.hat-card-body strong {
    color: var(--label-primary);
}

.card-body code,
.hat-card-body code {
    background: var(--fill-thin);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

.card-body blockquote,
.hat-card-body blockquote {
    border-left: 3px solid var(--tint);
    padding: 8px 12px;
    color: var(--label-secondary);
    margin: 8px 0;
    background: rgba(10, 132, 255, 0.04);
    border-radius: 0 8px 8px 0;
    line-height: 1.65;
}

/* ═══════════════════════════════════════════
   5. 阶段分隔线（优化版）
   ═══════════════════════════════════════════ */
.phase-header {
    text-align: center;
    margin: 28px 0 18px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    position: relative;
    font-weight: 500;
}

.phase-header::before,
.phase-header::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 1px;
    /* 🔧 优化：渐变分隔线 */
    background: linear-gradient(to var(--dir), var(--border), transparent);
}

.phase-header::before {
    --dir: left;
    right: calc(50% + 100px);
    left: 0;
}

.phase-header::after {
    --dir: right;
    left: calc(50% + 100px);
    right: 0;
}

/* ═══════════════════════════════════════════
   6. 信息条（优化版）
   ═══════════════════════════════════════════ */
.info-badge {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin: 8px 0;
    border-radius: 12px;
    font-size: 0.82rem;
    border-left: 3px solid var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    background: linear-gradient(135deg, rgba(88, 166, 255, 0.04), transparent);
    color: var(--text-secondary);
    /* 🔧 优化：入场动画 */
    animation: badgeSlideIn 0.3s ease;
}

.info-badge.warning {
    border-left-color: var(--warning);
    background: linear-gradient(135deg, rgba(210, 153, 34, 0.06), transparent);
}

.info-badge.success {
    border-left-color: var(--success);
    background: linear-gradient(135deg, rgba(63, 185, 80, 0.06), transparent);
}

@keyframes badgeSlideIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ═══════════════════════════════════════════
   7. Toast（优化版）
   ═══════════════════════════════════════════ */
.toast-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.toast {
    position: relative;
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
    border: 1.5px solid rgba(0, 122, 255, 0.25);
    color: var(--label-primary);
    padding: 14px 20px 14px 32px;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: -0.1px;
    width: min(420px, 92vw);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    animation: toastDropIn 0.5s var(--spring) both;
}

/* 左侧色条指示器 */
.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
    background: var(--tint);
}

/* 信息（默认）：蓝色系 */
.toast {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.06), rgba(0, 122, 255, 0.02));
}

/* 成功：绿色系 */
.toast.success {
    border-color: rgba(52, 199, 89, 0.35);
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.10), rgba(52, 199, 89, 0.03));
    box-shadow: 0 4px 24px rgba(52, 199, 89, 0.10), 0 1px 6px rgba(0, 0, 0, 0.06);
}

.toast.success::before {
    background: var(--green);
}

/* 警告：橙色系 */
.toast.warning {
    border-color: rgba(255, 149, 0, 0.35);
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.10), rgba(255, 149, 0, 0.03));
    box-shadow: 0 4px 24px rgba(255, 149, 0, 0.10), 0 1px 6px rgba(0, 0, 0, 0.06);
}

.toast.warning::before {
    background: var(--orange);
}

/* 错误：红色系 */
.toast.error {
    border-color: rgba(255, 59, 48, 0.35);
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.10), rgba(255, 59, 48, 0.03));
    box-shadow: 0 4px 24px rgba(255, 59, 48, 0.10), 0 1px 6px rgba(0, 0, 0, 0.06);
}

.toast.error::before {
    background: var(--red);
}

/* 弹入动画（从上方 spring 弹入） */
@keyframes toastDropIn {
    0% {
        opacity: 0;
        transform: translateY(-16px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 错开入场时间 */
.toast:nth-child(2) {
    animation-delay: 0.08s;
}

.toast:nth-child(3) {
    animation-delay: 0.16s;
}

.toast:nth-child(4) {
    animation-delay: 0.24s;
}

/* ═══════════════════════════════════════════
   8. Timeline（优化版）
   ═══════════════════════════════════════════ */
.timeline-demo {
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}

.timeline-demo:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.timeline {
    position: relative;
    padding-left: 28px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
    /* 🔧 优化：渐变时间线 */
    background: linear-gradient(to bottom, var(--accent), var(--border), var(--border));
}

.timeline-node {
    position: relative;
    margin-bottom: 14px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    /* 🔧 优化：hover 效果 */
    transition: all 0.15s;
}

.timeline-node:hover {
    background: rgba(88, 166, 255, 0.04);
    color: var(--text-primary);
}

.timeline-node::before {
    content: '';
    position: absolute;
    left: -23px;
    top: 10px;
    /* 🔧 优化：更大的节点圆点 */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border);
    border: 2px solid var(--bg-secondary);
    transition: all 0.2s;
}

.timeline-node.active::before {
    background: var(--accent);
    /* 🔧 优化：多层发光 */
    box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(88, 166, 255, 0.3);
}

.timeline-node.completed::before {
    background: var(--success);
}

.timeline-node.active {
    color: var(--accent);
    font-weight: 500;
}

.timeline-node.completed {
    color: var(--success);
}

/* ═══════════════════════════════════════════
   9. 按钮系统（优化版）
   ═══════════════════════════════════════════ */
.btn-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), #3b82f6);
    color: var(--white);
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(0, 122, 255, 0.28), 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-hover), #60a5fa);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 122, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.10);
}

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}

.btn-danger {
    background: linear-gradient(135deg, var(--error), #dc2626);
    color: var(--white);
    box-shadow: 0 3px 12px rgba(255, 59, 48, 0.28), 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}

.btn-danger:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(255, 59, 48, 0.35), 0 2px 8px rgba(0, 0, 0, 0.10);
}

.btn-success {
    background: linear-gradient(135deg, var(--success), #16a34a);
    color: var(--white);
    box-shadow: 0 3px 12px rgba(52, 199, 89, 0.28), 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}

.btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(52, 199, 89, 0.35), 0 2px 8px rgba(0, 0, 0, 0.10);
}

.btn-sm {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    padding: 5px 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.btn-sm:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* 🔧 优化：按钮按压反馈 */
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.btn-success:active,
.btn-sm:active,
.btn-login:active,
.btn-start:active {
    transform: translateY(1px) scale(0.96) !important;
    transition: transform 0.08s ease;
}

/* 统一增强：按钮 hover 更明显（中强度） */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-sm,
.btn-login,
.btn-start {
    transition:
        transform 0.22s var(--spring),
        box-shadow 0.22s var(--spring),
        filter 0.22s var(--spring),
        background 0.22s var(--spring),
        color 0.22s var(--spring);
}

.btn-primary:hover,
.btn-danger:hover,
.btn-success:hover,
.btn-login:hover,
.btn-start:hover {
    transform: translateY(-3px);
    filter: brightness(1.05);
}

.btn-secondary:hover,
.btn-sm:hover {
    transform: translateY(-2px);
}

/* 统一：disabled 禁用态 */
button:disabled,
button.btn-disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-success:disabled,
.btn-start:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
    transform: none !important;
    box-shadow: none !important;
}

/* 统一：loading 加载态 */
button.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

button.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

button.btn-secondary.btn-loading::after,
button.btn-sm.btn-loading::after {
    border-color: rgba(0, 0, 0, 0.12);
    border-top-color: var(--label-secondary);
}

/* ═══════════════════════════════════════════
   10. 阶段容器（优化版）
   ═══════════════════════════════════════════ */
.phase-container {
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}

.phase-container:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.phase-container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--bg-secondary);
    cursor: pointer;
    user-select: none;
    min-height: 48px;
    transition: background 0.15s;
}

.phase-container-header:hover {
    background: var(--bg-card);
}

.phase-container-header h3 {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.phase-status {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.phase-status.running {
    background: rgba(88, 166, 255, 0.12);
    color: var(--accent);
}

.phase-status.done {
    background: rgba(63, 185, 80, 0.12);
    color: var(--success);
}

.phase-container-body {
    padding: 16px;
}

/* ═══════════════════════════════════════════
   11. 思考状态栏（优化版）
   ═══════════════════════════════════════════ */
.thinking-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.06), rgba(94, 92, 230, 0.04));
    backdrop-filter: saturate(150%) blur(20px);
    -webkit-backdrop-filter: saturate(150%) blur(20px);
    border: 0.5px solid rgba(10, 132, 255, 0.18);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--label-secondary);
    box-shadow: 0 3px 12px rgba(10, 132, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    animation: breathe 2.5s ease-in-out infinite;
}

@keyframes breathe {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.75;
    }
}

.think-avatars {
    display: flex;
    gap: 3px;
}

.think-av {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    /* 隐藏文字，与 card-avatar 像素画风格统一 */
    font-size: 0;
    font-weight: 700;
    animation: bounce 1.2s ease-in-out infinite;
}

.think-av[data-hat="white"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='10' rx='7' ry='7' fill='white' fill-opacity='.92'/%3E%3Cpolygon points='9.5,17 12,22 14.5,17' fill='white' fill-opacity='.92'/%3E%3C/svg%3E"), linear-gradient(135deg, #8e9aaf, #a8b5c7);
    background-size: 14px 14px, 100% 100%;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.think-av[data-hat="red"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='.92' d='M3 2l5 8 1 10 3 2 3-2 1-10 5-8-5 5H8L3 2z'/%3E%3C/svg%3E"), linear-gradient(135deg, #f472b6, #e879a0);
    background-size: 14px 14px, 100% 100%;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.think-av[data-hat="yellow"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='13' r='6.5' fill='white' fill-opacity='.92'/%3E%3Cpath d='M16,15C17,11 19,7 18,4 17,2 15,3 15,6 15,9 16,13 16,15Z' fill='white' fill-opacity='.92'/%3E%3Ccircle cx='7' cy='7' r='2.5' fill='white' fill-opacity='.92'/%3E%3C/svg%3E"), linear-gradient(135deg, #f59e0b, #eab308);
    background-size: 14px 14px, 100% 100%;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.think-av[data-hat="black"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='4' r='2.8' fill='white' fill-opacity='.92'/%3E%3Cpath d='M8,6.5C13,8 17,9 17,13 17,17 7,17 7,21' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' opacity='.92'/%3E%3C/svg%3E"), linear-gradient(135deg, #64748b, #475569);
    background-size: 14px 14px, 100% 100%;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.think-av[data-hat="green"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='8' rx='7' ry='5.5' fill='white' fill-opacity='.92'/%3E%3Cpath d='M6,13L5,20M9,14L8,21M12,14L12,22M15,14L16,21M18,13L19,20' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' opacity='.92'/%3E%3C/svg%3E"), linear-gradient(135deg, #34d399, #10b981);
    background-size: 14px 14px, 100% 100%;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.think-av[data-hat="purple"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='6' r='3.5' fill='white' fill-opacity='.92'/%3E%3Ccircle cx='18' cy='6' r='3.5' fill='white' fill-opacity='.92'/%3E%3Ccircle cx='12' cy='14' r='7.5' fill='white' fill-opacity='.92'/%3E%3C/svg%3E"), linear-gradient(135deg, #a78bfa, #8b5cf6);
    background-size: 14px 14px, 100% 100%;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.think-av:nth-child(2) {
    animation-delay: 0.15s;
}

.think-av:nth-child(3) {
    animation-delay: 0.3s;
}

.think-av:nth-child(4) {
    animation-delay: 0.45s;
}

.think-av:nth-child(5) {
    animation-delay: 0.6s;
}

.think-av:nth-child(6) {
    animation-delay: 0.75s;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.think-text {
    flex: 1;
    display: flex;
    align-items: center;
}

.think-timer,
.thinking-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--tint);
    font-size: 0.88rem;
    min-width: 30px;
    text-align: right;
}

/* ═══════════════════════════════════════════
   12. 高级选项（优化版）
   ═══════════════════════════════════════════ */
/* 选项行 — pill 胶囊风格 */
.options-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--separator);
}

.options-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--label-secondary);
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
}

.options-row select {
    background: var(--bg-card);
    color: var(--label-primary);
    border: 1px solid var(--separator);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.82rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.2s var(--spring);
}

.options-row select:focus {
    outline: none;
    border-color: var(--tint);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ═══════════════════════════════════════════
   主题切换
   ═══════════════════════════════════════════ */
.theme-toggle {
    background: none;
    border: none;
    color: var(--tint);
    font-size: 1.3rem;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s;
}

.theme-toggle:hover {
    background: var(--fill-thin);
}

/* 对比标签 */
.compare-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 500;
    margin-left: 8px;
}

.compare-tag.before {
    background: rgba(248, 81, 73, 0.1);
    color: var(--error);
}

.compare-tag.after {
    background: rgba(63, 185, 80, 0.1);
    color: var(--success);
}

/* ═══════════════════════════════════════════
   13+. 原版组件集合（polish 风格适配）
   追问栏 / 侧边栏 / 需求确认 / 阶段选择器 / 弹窗 / 历史查看器 / 其他组件
   ═══════════════════════════════════════════ */

/* 讨论中追问栏 */
.mid-ask-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-top: 12px;
    background: var(--fill-thin);
    border: 0.5px solid var(--separator);
    border-radius: var(--radius-md);
}

.mid-ask-label {
    white-space: nowrap;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
}

.mid-ask-avatars {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mid-ask-av {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    background: none;
    /* 透明底 */
    border: 1.5px solid var(--separator);
    color: var(--label-secondary);
    transition: all 0.15s;
}

.mid-ask-av:hover {
    transform: scale(1.05);
}

/* 每个角色不同的 outline 颜色（按记录） */
.mid-ask-av[data-hat="white"] {
    color: #8e8e93;
    border-color: rgba(174, 174, 178, 0.4);
}

.mid-ask-av[data-hat="red"] {
    color: #ff453a;
    border-color: rgba(255, 69, 58, 0.35);
}

.mid-ask-av[data-hat="yellow"] {
    color: #b45309;
    border-color: rgba(255, 159, 10, 0.35);
}

.mid-ask-av[data-hat="black"] {
    color: #636366;
    border-color: rgba(142, 142, 147, 0.4);
}

.mid-ask-av[data-hat="green"] {
    color: #15803d;
    border-color: rgba(48, 209, 88, 0.35);
}

.mid-ask-av[data-hat="purple"] {
    color: #7c3aed;
    border-color: rgba(191, 90, 242, 0.35);
}

/* hover 变底色 */
.mid-ask-av[data-hat="white"]:hover {
    background: rgba(174, 174, 178, 0.12);
}

.mid-ask-av[data-hat="red"]:hover {
    background: rgba(255, 69, 58, 0.10);
}

.mid-ask-av[data-hat="yellow"]:hover {
    background: rgba(255, 159, 10, 0.10);
}

.mid-ask-av[data-hat="black"]:hover {
    background: rgba(142, 142, 147, 0.12);
}

.mid-ask-av[data-hat="green"]:hover {
    background: rgba(48, 209, 88, 0.10);
}

.mid-ask-av[data-hat="purple"]:hover {
    background: rgba(191, 90, 242, 0.10);
}

.mid-ask-av:active {
    transform: scale(0.95);
}

/* 侧边栏 demo */
.sidebar-demo {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}

.sidebar-demo:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.sb-header {
    padding: 14px 16px;
    font-size: 0.98rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(88, 166, 255, 0.06), transparent);
}

.sb-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
}

.sb-tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 0.85rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}

.sb-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: rgba(88, 166, 255, 0.04);
}

.sb-progress {
    padding: 12px 14px;
}

.sb-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 0.84rem;
    color: var(--text-muted);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.sb-step:hover {
    background: rgba(88, 166, 255, 0.04);
    color: var(--text-secondary);
}

.sb-step.done {
    color: var(--success);
}

.sb-step.active {
    color: var(--accent);
    font-weight: 600;
}

.sb-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
}

.sb-dot.done {
    background: var(--success);
    box-shadow: 0 0 8px rgba(63, 185, 80, 0.25);
}

.sb-dot.active {
    background: var(--accent);
    box-shadow: 0 0 10px rgba(88, 166, 255, 0.25);
}

.sb-search {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
}

.sb-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12);
}

.sb-search::placeholder {
    color: var(--text-muted);
}

.hist-item {
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border: 1px solid transparent;
    margin-top: 8px;
}

.hist-item:hover {
    background: rgba(88, 166, 255, 0.04);
    border-color: rgba(88, 166, 255, 0.12);
}

.hist-topic {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--text-primary);
}

.hist-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════
   PC：阶段进度常驻（全稿 PC）
   参考：左侧固定/吸顶的阶段进度栏
   ═══════════════════════════════════════════ */
.pc-global-shell {
    display: block;
}

.pc-global-sidebar {
    display: none;
}

.pc-global-main {
    display: block;
}

/* 侧栏（参考图样式）：顶部阶段列表 + tab + 时间线 */
.pc-stage-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--separator);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.pc-stage-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--label-primary);
    border-bottom: 1px solid var(--separator);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.07), transparent);
}

.pc-stage-brand i {
    color: var(--tint);
}

.pc-stage-top {
    padding: 10px 10px 8px;
    border-bottom: 1px solid var(--separator);
}

.pc-stage-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pc-stage-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s var(--spring), transform 0.15s var(--spring);
    color: var(--label-tertiary);
    user-select: none;
}

.pc-stage-item:hover {
    background: rgba(10, 132, 255, 0.06);
    transform: translateY(-1px);
}

.pc-stage-item.is-active {
    color: var(--tint);
    font-weight: 750;
}

.pc-stage-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(142, 142, 147, 0.35);
    box-shadow: 0 0 0 5px rgba(142, 142, 147, 0.06);
    flex-shrink: 0;
}

.pc-stage-item.is-active .pc-stage-dot {
    background: var(--tint);
    box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.12), 0 10px 20px rgba(10, 132, 255, 0.12);
}

.pc-stage-icon {
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--label-secondary);
}

.pc-stage-item.is-active .pc-stage-icon {
    color: var(--tint);
}

.pc-stage-tabs {
    display: flex;
    border-bottom: 1px solid var(--separator);
    background: rgba(120, 120, 128, 0.06);
}

.pc-stage-tab {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--label-tertiary);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
}

.pc-stage-tab.is-active {
    color: var(--tint);
}

.pc-stage-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--tint);
    border-radius: 999px;
}

.pc-stage-progress {
    padding: 12px 12px 14px;
}

.pc-timeline {
    position: relative;
    padding-left: 28px;
    /* 预留圆点/光晕的左侧空间，避免被裁切 */
}

.pc-timeline::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 2px;
    bottom: 2px;
    width: 3px;
    background: rgba(142, 142, 147, 0.28);
    border-radius: 999px;
}

.pc-tl-item {
    position: relative;
    padding: 10px 6px 10px 34px;
}

.pc-tl-item::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(142, 142, 147, 0.50);
    box-shadow: 0 0 0 6px rgba(142, 142, 147, 0.08);
}

.pc-tl-item.is-done::before {
    background: var(--green);
    box-shadow: 0 0 0 6px rgba(48, 209, 88, 0.12), 0 10px 20px rgba(48, 209, 88, 0.12);
}

.pc-tl-item.is-current::before {
    background: #fff;
    border: 3px solid var(--tint);
    box-shadow: 0 0 0 7px rgba(10, 132, 255, 0.10), 0 10px 20px rgba(10, 132, 255, 0.10);
}

.pc-tl-title {
    font-size: 0.92rem;
    font-weight: 780;
    color: var(--label-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pc-tl-title .pc-tl-ico {
    color: var(--label-secondary);
}

.pc-tl-item.is-done .pc-tl-title {
    color: var(--green);
}

.pc-tl-item.is-current .pc-tl-title {
    color: var(--tint);
}

.pc-tl-sub {
    margin-top: 6px;
    font-size: 0.86rem;
    color: var(--label-secondary);
    line-height: 1.5;
}

.pc-tl-item.is-current .pc-tl-sub {
    color: var(--tint);
    font-weight: 650;
}

/* ═══════════════════════════════════════════
   完整预览（真实页面）容器
   说明：设备宽度通过 JS 设置容器宽度；
   容器媒体查询不可用，因此用 data-preview-size 控制布局分支。
   ═══════════════════════════════════════════ */
.app-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--separator);
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
    margin-bottom: 14px;
}

.appt-left,
.appt-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.appt-k {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--label-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.appt-seg {
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--separator);
    background: rgba(120, 120, 128, 0.08);
}

.appt-btn {
    padding: 7px 10px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--label-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s var(--spring), color 0.2s var(--spring), transform 0.2s var(--spring);
    white-space: nowrap;
}

.appt-btn:hover {
    background: rgba(10, 132, 255, 0.08);
    color: var(--label-primary);
}

.appt-btn.is-active {
    background: rgba(10, 132, 255, 0.16);
    color: var(--tint);
}

.appt-btn:active {
    transform: scale(0.98);
}

.appt-select {
    height: 34px;
    border-radius: 12px;
    border: 1px solid var(--separator);
    background: var(--bg-input);
    color: var(--label-primary);
    padding: 0 10px;
    font-size: 0.86rem;
    font-weight: 650;
    outline: none;
}

.appt-chip {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--separator);
    background: rgba(10, 132, 255, 0.08);
    color: var(--tint);
    font-size: 0.82rem;
    font-weight: 750;
}

.app-preview-viewport {
    margin: 0 auto;
    width: 100%;
    /* border-radius: 18px; */
    /* border: 1px solid var(--separator); */
    background: var(--bg-base);
    overflow: hidden;
    /* box-shadow: 0 16px 52px rgba(0, 0, 0, 0.16); */
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
}

.app-sidebar {
    padding: 8px;
    background: rgba(120, 120, 128, 0.06);
    border-right: 1px solid var(--separator);
    border-radius: 18px 0 0 18px;
}

.app-main {
    min-width: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(10, 132, 255, 0.06) 0%, transparent 60%);
}

.app-page {
    display: none;
}

.app-page.is-active {
    display: block;
}

.app-page-pad {
    padding: 18px 18px 26px;
}

/* desktop：侧栏常驻，汉堡不需要 */
.app-preview-viewport[data-preview-size="desktop"] .hdr-hamburger {
    display: none;
}

/* mobile：侧栏折叠，主区更紧凑 */
.app-preview-viewport[data-preview-size="mobile"] .app-shell {
    grid-template-columns: 1fr;
}

.app-preview-viewport[data-preview-size="mobile"] .app-sidebar {
    display: none;
}

.app-preview-viewport[data-preview-size="mobile"] .app-page-pad {
    padding: 14px 12px 22px;
}

.app-preview-viewport[data-preview-size="mobile"] .hat-cards-grid {
    grid-template-columns: 1fr !important;
}

.app-preview-viewport[data-preview-size="mobile"] .decision-grid {
    grid-template-columns: 1fr !important;
}

.app-preview-viewport[data-preview-size="mobile"] .history-grid {
    grid-template-columns: 1fr !important;
}

.app-preview-viewport[data-preview-size="mobile"] .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

.app-preview-viewport[data-preview-size="mobile"] .gs-grid {
    grid-template-columns: 1fr !important;
}

.app-preview-viewport[data-preview-size="mobile"] .global-state {
    padding: 32px 18px;
}

.app-preview-viewport[data-preview-size="mobile"] .auth-error-row {
    flex-direction: column;
}

.app-preview-viewport[data-preview-size="mobile"] .be-tabs {
    flex-wrap: wrap;
}

.app-preview-viewport[data-preview-size="mobile"] .matrix-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-preview-viewport[data-preview-size="mobile"] .score-matrix {
    min-width: 560px;
}

/* mobile: 讨论卡片操作按钮适配 */
.app-preview-viewport[data-preview-size="mobile"] .card-actions {
    flex-wrap: wrap;
    flex-shrink: 1;
    gap: 2px;
}

.app-preview-viewport[data-preview-size="mobile"] .card-action-btn {
    font-size: 0.68rem;
    padding: 3px 5px;
}

.app-preview-viewport[data-preview-size="mobile"] .card-action-btn.fav,
.app-preview-viewport[data-preview-size="mobile"] .card-action-btn.pin {
    font-size: 0.72rem;
    padding: 2px 3px;
}

.app-preview-viewport[data-preview-size="mobile"] .status-pill {
    font-size: 0.62rem;
    padding: 2px 6px;
}

.app-preview-viewport[data-preview-size="mobile"] .card-role-row {
    gap: 4px;
}

.app-preview-viewport[data-preview-size="mobile"] .boost-pill {
    font-size: 0.58rem;
    padding: 2px 6px;
}

/* card-body 底部渐隐提示（滚动时可见） */
.card-body::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    height: 32px;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
}

.hat-card.streaming .card-body::after {
    display: none;
}

/* 逐字打字光标 */
.type-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--tint);
    border-radius: 1px;
    animation: cursorBlink 1s step-end infinite;
    vertical-align: text-bottom;
    margin-left: 2px;
}

/* 用户后台 Tab 导航 */
.be-tabs {
    display: flex;
    gap: 6px;
    padding: 0 0 14px;
    flex-wrap: wrap;
}

.be-tab-btn {
    padding: 7px 16px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--separator);
    background: var(--fill-thin);
    color: var(--label-secondary);
    cursor: pointer;
    transition: all .2s var(--spring);
}

.be-tab-btn:hover {
    background: rgba(10, 132, 255, 0.06);
    color: var(--tint);
    border-color: rgba(10, 132, 255, 0.2);
}

.be-tab-btn.is-active {
    background: var(--tint);
    color: #fff;
    border-color: var(--tint);
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.22);
}

.be-tab-panel {
    display: none;
}

.be-tab-panel.is-active {
    display: block;
}

/* login：更像真实登录页（无侧栏/无顶部栏） */
.app-preview-viewport[data-preview-page="login"] .app-sidebar {
    display: none;
}

.app-preview-viewport[data-preview-page="login"] .app-shell {
    grid-template-columns: 1fr;
}

.app-preview-viewport[data-preview-page="login"] .app-header-bar,
.app-preview-viewport[data-preview-page="login"] .hdr-progress-line {
    display: none;
}

@media (min-width: 1024px) {
    .pc-global-shell {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 18px;
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 18px 40px;
        align-items: start;
    }

    .pc-global-sidebar {
        display: block;
        position: sticky;
        top: 76px;
        /* 预留顶部导航高度 */
        height: calc(100vh - 92px);
        overflow: auto;
        padding-bottom: 8px;
    }

    /* 进入两栏布局后，卡片不再居中占 920px */
    .pc-global-main .preview-section {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* PC 既然常驻侧栏，就不再强调汉堡入口 */
    .pc-global-main .hdr-hamburger {
        display: none;
    }
}

/* 需求确认对话 */
.confirm-demo {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
    max-width: 720px;
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}

.confirm-demo:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.confirm-header {
    padding: 14px 18px;
    font-weight: 700;
    background: rgba(88, 166, 255, 0.04);
    border-bottom: 1px solid var(--border);
}

.confirm-chat {
    padding: 16px 18px;
    max-height: 300px;
    overflow: auto;
}

.chat-msg {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    align-items: flex-start;
}

.chat-msg.user {
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(88, 166, 255, 0.12);
    border: 1px solid rgba(88, 166, 255, 0.15);
    flex-shrink: 0;
}

.chat-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.6;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.chat-bubble.chief {
    border-bottom-left-radius: 6px;
}

.chat-bubble.user {
    background: rgba(88, 166, 255, 0.12);
    border-color: rgba(88, 166, 255, 0.2);
    color: var(--text-primary);
    border-bottom-right-radius: 6px;
}

.chat-bubble p {
    margin: 0 0 6px;
}

.chat-bubble p:last-child {
    margin: 0;
}

.confirm-input-row {
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.03);
}

.confirm-textarea {
    flex: 1;
    min-height: 38px;
    resize: none;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    outline: none;
}

.confirm-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12);
}

.confirm-ready {
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background: rgba(63, 185, 80, 0.05);
}

/* 阶段选择器 */
.selector-demo {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    max-width: 720px;
}

.selector-demo h3 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.ios-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
}

.ios-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12);
}

.ios-select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.88rem;
    outline: none;
}

.ios-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.10);
}

.phase-btn-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.phase-btn {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(88, 166, 255, 0.06);
    border: 1px solid rgba(88, 166, 255, 0.12);
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.phase-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(88, 166, 255, 0.25);
    color: var(--text-primary);
}

.phase-btn.completed {
    opacity: 0.5;
    text-decoration: line-through;
    cursor: not-allowed;
}

.phase-btn.recommended {
    background: rgba(88, 166, 255, 0.12);
    border-color: rgba(88, 166, 255, 0.25);
    color: var(--accent);
    font-weight: 600;
}

.phase-rec-tag {
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(88, 166, 255, 0.14);
    border: 1px solid rgba(88, 166, 255, 0.22);
    color: var(--accent);
}

.phase-done-tag {
    font-size: 0.75rem;
    color: var(--success);
}

.custom-topic-demo {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.custom-topic-demo .ios-input {
    flex: 1;
    min-width: 220px;
}

/* 弹窗缩略 */
.modal-mini {
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}

.mm-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
}

.mm-close {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
}

.mm-body {
    padding: 14px;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.mm-body p {
    margin: 0 0 6px;
}

.mm-body p:last-child {
    margin: 0;
}

.mm-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: rgba(0, 0, 0, 0.06);
}

.suggest-btn {
    border: 1px solid rgba(88, 166, 255, 0.30);
    background: rgba(88, 166, 255, 0.06);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}

.suggest-btn:hover {
    color: var(--accent);
    border-color: rgba(88, 166, 255, 0.4);
    background: rgba(88, 166, 255, 0.08);
}

kbd {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(88, 166, 255, 0.08);
    border: 1px solid rgba(88, 166, 255, 0.18);
    font-size: 0.72rem;
    font-family: inherit;
    color: var(--text-primary);
    min-width: 20px;
    text-align: center;
}

/* 弹窗内容：观点演变 / 收藏 / 快速上手 / 快捷键列表 */
.evo-hat {
    margin-bottom: 6px;
    font-size: 0.92rem;
    color: var(--text-primary);
    font-weight: 700;
}

.evo-phase {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 10px 0 6px;
    font-weight: 600;
}

.evo-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.86rem;
    padding: 6px 0;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(48, 54, 61, 0.45);
}

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

.evo-label {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid rgba(88, 166, 255, 0.18);
    background: rgba(88, 166, 255, 0.08);
    color: var(--accent);
}

.evo-label.r2 {
    border-color: rgba(63, 185, 80, 0.25);
    background: rgba(63, 185, 80, 0.08);
    color: var(--success);
}

.fav-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(48, 54, 61, 0.45);
    font-size: 0.86rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-secondary);
}

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

.fav-remove {
    background: transparent;
    border: none;
    color: var(--error);
    font-size: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    opacity: 0.85;
}

.fav-remove:hover {
    opacity: 1;
    text-decoration: underline;
}

.shortcut-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shortcut-list li {
    padding: 8px 0;
    font-size: 0.86rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(48, 54, 61, 0.45);
}

.shortcut-list li:last-child {
    border-bottom: none;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 768px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}

/* 追问弹窗（完整） */
.modal-demo {
    width: 100%;
    max-width: 560px;
    background: rgba(28, 35, 51, 0.65);
    border: 1px solid rgba(48, 54, 61, 0.6);
    border-radius: 16px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
}

[data-theme="light"] .modal-demo {
    background: var(--bg-elevated);
    border-color: var(--separator);
}

.modal-demo-header {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(48, 54, 61, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

[data-theme="light"] .modal-demo-header {
    border-bottom-color: var(--separator);
}

.modal-demo-body {
    padding: 14px 16px;
}

.modal-demo-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(48, 54, 61, 0.6);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .modal-demo-footer {
    border-top-color: var(--separator);
    background: var(--fill-thin);
}

/* 历史查看器 */
.history-viewer-demo {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.history-viewer-demo .hat-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.history-viewer-demo .hat-card {
    margin-bottom: 0;
}

.history-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--separator);
}

.history-topbar .history-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--label-primary);
}

.history-topbar .history-actions {
    display: flex;
    gap: 8px;
}

.history-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    padding: 16px 18px;
}

@media(max-width:640px) {
    .history-grid {
        grid-template-columns: 1fr;
    }
}

.history-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-right {
    min-width: 0;
}

.hist-item {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .18s;
}

.hist-item:hover {
    background: var(--fill-thin);
}

.hist-topic {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--label-primary);
    margin-bottom: 2px;
}

.hist-meta {
    font-size: 0.75rem;
    color: var(--label-tertiary);
}

.hv-header {
    padding: 12px 14px;
    background: rgba(88, 166, 255, 0.04);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* 搜索栏 */
.search-bar-demo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    box-shadow: var(--shadow);
}

.search-bar-demo .ios-input {
    flex: 1;
    min-width: 220px;
}

.search-result-tip {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(48, 54, 61, 0.6);
    background: rgba(88, 166, 255, 0.04);
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* 移动端更多菜单 */
.mobile-menu-demo {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    padding: 6px 0;
    min-width: 180px;
}

.mm-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.mm-item:hover {
    background: rgba(88, 166, 255, 0.06);
    color: var(--text-primary);
}

/* PC 悬浮按钮 */
.float-btn {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow);
    position: relative;
}

.float-btn:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-hover);
}

.float-btn.stop {
    background: linear-gradient(135deg, var(--error), #dc2626);
    color: #fff;
}

.float-btn.add {
    background: linear-gradient(135deg, var(--accent), #3b82f6);
    color: #fff;
}

.float-tip {
    display: none;
    position: absolute;
    right: 54px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

.float-btn:hover .float-tip {
    display: block;
}

/* 共识面板 */
.consensus-demo {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--shadow);
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}

.cons-item {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(48, 54, 61, 0.6);
    margin-bottom: 8px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.cons-item:last-child {
    margin-bottom: 0;
}

.cons-item.agree {
    background: rgba(63, 185, 80, 0.06);
    border-color: rgba(63, 185, 80, 0.22);
}

.cons-item.disagree {
    background: rgba(248, 81, 73, 0.05);
    border-color: rgba(248, 81, 73, 0.18);
}

/* 断点续做（崩溃恢复） */
.crash-demo {
    background: linear-gradient(135deg, rgba(210, 153, 34, 0.08), rgba(210, 153, 34, 0.02));
    border: 1px solid rgba(210, 153, 34, 0.25);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}

.crash-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.crash-icon {
    font-size: 1.6rem;
}

.crash-info {
    flex: 1;
    min-width: 180px;
}

.crash-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.crash-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* 回到最新按钮 */
.scroll-anchor-demo {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), #3b82f6);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(88, 166, 255, 0.25);
    cursor: pointer;
    transition: all 0.2s;
}

.scroll-anchor-demo:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(88, 166, 255, 0.35);
}

/* 面包屑 */
.breadcrumb-demo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.85rem;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}

.bc-item {
    color: var(--text-muted);
    cursor: pointer;
}

.bc-item:hover {
    color: var(--accent);
}

.bc-item.active {
    color: var(--accent);
    font-weight: 700;
}

.bc-sep {
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* 骨架屏 */
.skeleton-demo {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow);
}

.skeleton-line {
    height: 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, rgba(88, 166, 255, 0.06) 25%, rgba(88, 166, 255, 0.18) 50%, rgba(88, 166, 255, 0.06) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.2s ease-in-out infinite;
}

.skeleton-line:last-child {
    margin-bottom: 0;
}

@keyframes skeletonShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ═══════════════════════════════════════════
   App Header 预览（3 种状态）
   ═══════════════════════════════════════════ */
.app-header-demo {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 0.5px solid var(--separator);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}

.app-header-demo.demo-pad-300 {
    overflow: visible;
    padding-bottom: 300px;
}

.app-header-demo.demo-pad-240 {
    overflow: visible;
    padding-bottom: 240px;
}

.app-header-demo:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.app-header-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 52px;
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
    border-bottom: 0.5px solid var(--separator);
}

.app-header-bar .hdr-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.app-header-bar .hdr-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* 汉堡菜单 */
.hdr-hamburger {
    background: transparent;
    border: none;
    color: var(--label-primary);
    font-size: 1.25rem;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 8px;
    min-width: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.hdr-hamburger:hover {
    background: var(--fill-thin);
}

/* 状态胶囊 */
.hdr-badge {
    position: relative;
    /* 约束 ::after 动效不外溢 */
    font-size: 0.75rem;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid var(--separator);
    color: var(--label-secondary);
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 用户信息：磨砂胶囊分组 */
.hdr-user-capsule {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--fill-thin);
    border: 0.5px solid var(--separator);
    border-radius: 20px;
    padding: 3px 4px 3px 4px;
    height: 34px;
    transition: all 0.2s var(--spring);
}

.hdr-user-capsule:hover {
    background: var(--fill-medium);
}

.hdr-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 0.5px solid var(--separator);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--tint);
    font-weight: 700;
    position: relative;
    flex-shrink: 0;
}

.hdr-user-avatar::after {
    content: '';
    position: absolute;
    bottom: 0px;
    right: -1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    border: 1.5px solid var(--bg-elevated);
}

.hdr-user-sep {
    width: 0.5px;
    height: 16px;
    background: var(--separator);
    flex-shrink: 0;
}

.hdr-logout {
    padding: 0 10px;
    font-size: 0.7rem;
    font-weight: 500;
    background: transparent;
    color: var(--label-tertiary);
    border: none;
    border-radius: 0 16px 16px 0;
    cursor: pointer;
    transition: all 0.15s;
    height: 100%;
    display: flex;
    align-items: center;
}

.hdr-logout:hover {
    color: var(--red);
}

/* 暂停按钮（红色圆形） */
.hdr-stop {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), #dc2626);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 10px rgba(255, 59, 48, 0.35);
    transition: transform 0.15s var(--spring), box-shadow 0.15s;
}

.hdr-stop:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 18px rgba(255, 59, 48, 0.45);
}

/* 新建按钮（与胶囊等高） */
.hdr-new {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--fill-thin);
    border: 0.5px solid var(--separator);
    color: var(--label-primary);
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s var(--spring);
}

.hdr-new:hover {
    background: rgba(10, 132, 255, 0.10);
    border-color: var(--tint);
    color: var(--tint);
    transform: scale(1.06);
}

/* 更多按钮 */
.hdr-more {
    background: transparent;
    border: none;
    color: var(--label-secondary);
    font-size: 1.2rem;
    padding: 4px 6px;
    cursor: pointer;
    min-width: 30px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.15s;
}

.hdr-more:hover {
    background: var(--fill-thin);
}

/* 进度提示行 */
.hdr-progress-line {
    padding: 8px 16px;
    font-size: 0.78rem;
    color: var(--label-tertiary);
    background: var(--bg-grouped);
    border-bottom: 0.5px solid var(--separator);
    display: flex;
    align-items: center;
    gap: 6px;
}

.hdr-progress-line .cursor-blink {
    display: inline-block;
    width: 2px;
    height: 14px;
    background: var(--tint);
    border-radius: 1px;
    animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* 头部内嵌进度条（讨论中状态） */
.hdr-progress-bar-wrap {
    padding: 8px 16px 10px;
    background: var(--bg-grouped);
    border-bottom: 0.5px solid var(--separator);
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    transition: background 0.15s;
}

.hdr-progress-bar-wrap:hover {
    background: var(--fill-thin);
}

.hdr-progress-bar-wrap .hdr-prog-text {
    font-size: 0.78rem;
    color: var(--label-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hdr-progress-bar-wrap .hdr-prog-text .hdr-prog-stage {
    color: var(--label-tertiary);
    font-variant-numeric: tabular-nums;
}

.hdr-prog-track {
    height: 5px;
    border-radius: 999px;
    background: var(--fill-thin);
    overflow: hidden;
    position: relative;
}

.hdr-prog-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tint), #818cf8, var(--tint));
    background-size: 200% 100%;
    animation: progressShimmer 1.4s ease infinite;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hdr-prog-fill.done {
    background: var(--green);
    animation: none;
}

/* ═══ hdr-badge 状态动效 ═══ */
/* 就绪：光泽扫过 */
.hdr-badge.s-ready {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    color: var(--label-secondary);
}

.hdr-badge.s-ready::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: badgeShimmer 3s ease-in-out infinite;
}

@keyframes badgeShimmer {

    0%,
    70%,
    100% {
        left: -100%;
    }

    40% {
        left: 120%;
    }
}

/* 确认中 / 恢复 / 准备：呼吸脉冲 */
.hdr-badge.s-confirm {
    border-color: rgba(10, 132, 255, 0.35);
    color: var(--tint);
    animation: badgeBreathe 2s ease-in-out infinite;
}

@keyframes badgeBreathe {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(10, 132, 255, 0);
        border-color: rgba(10, 132, 255, 0.20);
    }

    50% {
        box-shadow: 0 0 10px 2px rgba(10, 132, 255, 0.15);
        border-color: rgba(10, 132, 255, 0.45);
    }
}

/* 讨论中：流光边框旋转 */
.hdr-badge.s-active {
    border: 1.5px solid transparent;
    background-image: linear-gradient(var(--bg-card), var(--bg-card)), linear-gradient(135deg, var(--tint), var(--purple), var(--tint));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: badgeRotate 2.5s linear infinite;
    color: var(--tint);
    font-weight: 600;
}

@keyframes badgeRotate {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

/* 重连：橙色警告脉冲 */
.hdr-badge.s-reconnect {
    border-color: rgba(255, 149, 0, 0.45);
    color: var(--orange);
    font-weight: 600;
    animation: badgeWarn 1.2s ease-in-out infinite;
}

@keyframes badgeWarn {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 149, 0, 0);
    }

    50% {
        box-shadow: 0 0 10px 3px rgba(255, 149, 0, 0.20);
    }
}

/* 断开 / 中断：红色静态警告 */
.hdr-badge.s-error {
    border-color: rgba(255, 59, 48, 0.45);
    background: rgba(255, 59, 48, 0.08);
    color: var(--red);
    font-weight: 600;
    animation: badgeError 1.8s ease-in-out infinite;
    animation: badgeError 1s ease-in-out infinite;
}

@keyframes badgeError {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 8px 2px rgba(255, 59, 48, 0.18);
    }
}

@keyframes badgeDone {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
        border-color: rgba(52, 199, 89, 0.25);
    }

    50% {
        box-shadow: 0 0 10px 2px rgba(52, 199, 89, 0.15);
        border-color: rgba(52, 199, 89, 0.50);
    }
}

@keyframes badgePaused {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 0.9;
    }
}

@keyframes badgeCancelled {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.65;
    }
}

/* 完成：绿色发光 */
.hdr-badge.s-done {
    border-color: rgba(52, 199, 89, 0.45);
    background: rgba(52, 199, 89, 0.08);
    color: var(--green);
    font-weight: 600;
    animation: badgeDone 2.4s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(52, 199, 89, 0.15);
}

/* 状态徽章展示网格 */
.badge-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
}

.badge-showcase-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.badge-showcase-item .badge-desc {
    font-size: 0.65rem;
    color: var(--label-quaternary);
    text-align: center;
    max-width: 90px;
    line-height: 1.4;
}

/* 更多菜单（展开态） */
.hdr-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
    border: 0.5px solid var(--separator);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
    min-width: 170px;
    z-index: 10;
    animation: dropdownIn 0.2s var(--spring);
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hdr-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    background: transparent;
    border: none;
    color: var(--label-secondary);
    font-size: 0.86rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.hdr-dropdown-item:hover {
    background: var(--fill-thin);
    color: var(--label-primary);
}

/* 状态标注 */
.state-label {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}

.state-label.idle {
    background: rgba(48, 209, 88, 0.12);
    color: var(--green);
}

.state-label.confirm {
    background: rgba(10, 132, 255, 0.12);
    color: var(--tint);
}

.state-label.active {
    background: rgba(255, 69, 58, 0.12);
    color: var(--red);
}

/* 响应式 */
@media (max-width: 640px) {
    .app-header-bar {
        padding: 0 8px;
        height: 48px;
        gap: 5px;
    }

    .hdr-badge {
        font-size: 0.7rem;
        padding: 4px 8px;
        max-width: 110px;
    }

    .hdr-user-capsule {
        height: 30px;
        padding: 2px 3px;
    }

    .hdr-user-avatar {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }

    .hdr-logout {
        font-size: 0.65rem;
        padding: 0 7px;
    }

    .hdr-stop,
    .hdr-new {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .hdr-hamburger {
        font-size: 1.1rem;
        min-width: 34px;
        min-height: 34px;
        padding: 4px 6px;
    }
}

/* ═══════════════════════════════════════════
   NEW: 登录错误提示
   ═══════════════════════════════════════════ */
.login-error {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 69, 58, 0.08);
    border: 1px solid rgba(255, 69, 58, 0.25);
    color: var(--red);
    font-size: 0.82rem;
    font-weight: 500;
    margin-top: -2px;
    animation: shakeX 0.35s var(--spring);
}

@keyframes shakeX {

    0%,
    100% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-4px)
    }

    75% {
        transform: translateX(4px)
    }
}

/* ═══════════════════════════════════════════
   NEW: 输入页 — 完整度 + 参数区
   ═══════════════════════════════════════════ */
/* 信息完整度 — 分水岭容器 */
.input-completeness {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--separator);
    font-size: 0.82rem;
    color: var(--label-secondary);
    margin: 20px 12px 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.completeness-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--fill-medium);
    overflow: hidden;
}

.completeness-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--tint), var(--green));
    transition: width 0.4s var(--spring);
}

/* 参数卡片 — 左侧色彩条 + 图标增强 */
.input-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 12px 0;
}

.param-card {
    padding: 12px 14px 12px 16px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--separator);
    font-size: 0.82rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s var(--spring), box-shadow 0.2s var(--spring);
}

.param-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    bottom: 1px;
    width: 3px;
    border-radius: 999px;
    background: var(--tint);
}

.param-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.param-label {
    color: var(--label-tertiary);
    font-size: 0.68rem;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.param-value {
    color: var(--label-primary);
    font-weight: 600;
    font-size: 0.85rem;
}

.param-value.warn {
    color: var(--orange);
}

.param-value.ok {
    color: var(--green);
}

/* 参数卡色彩条 — 按语义着色 */
.param-card.p-intent::before {
    background: var(--tint);
}

.param-card.p-risk::before {
    background: var(--orange);
}

.param-card.p-budget::before {
    background: var(--purple);
}

.param-card.p-phase::before {
    background: var(--green);
}

@media (max-width: 480px) {
    .input-params {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════
   NEW: 确认轮次提示
   ═══════════════════════════════════════════ */
.confirm-round-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.75rem;
    color: var(--label-tertiary);
    border-top: 1px solid var(--separator);
}

.confirm-round-tip .round-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tint);
    display: inline-block;
}

.confirm-round-tip .round-dot.done {
    background: var(--green);
}

/* ═══════════════════════════════════════════
   NEW: SSE 流式骨架卡片
   ═══════════════════════════════════════════ */
.sse-skeleton-card {
    border-radius: var(--radius-md);
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--separator);
}

.sse-sk-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.sse-sk-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--fill-medium);
    animation: skPulse 1.6s ease-in-out infinite;
}

.sse-sk-meta {
    flex: 1;
}

.sse-sk-line {
    height: 10px;
    border-radius: 5px;
    background: var(--fill-medium);
    animation: skPulse 1.6s ease-in-out infinite;
}

.sse-sk-line.w60 {
    width: 60%;
}

.sse-sk-line.w40 {
    width: 40%;
    margin-top: 6px;
}

.sse-sk-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sse-sk-line.w100 {
    width: 100%;
}

.sse-sk-line.w80 {
    width: 80%;
}

.sse-sk-line.w50 {
    width: 50%;
}

@keyframes skPulse {

    0%,
    100% {
        opacity: 0.4
    }

    50% {
        opacity: 0.8
    }
}

/* ═══════════════════════════════════════════
   NEW: 用户胶囊下拉菜单
   ═══════════════════════════════════════════ */
.capsule-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    border: 1px solid var(--separator);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-hover);
    padding: 6px;
    animation: dropIn 0.25s var(--spring);
    z-index: 50;
}

.cap-drop-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
}

.cap-drop-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--tint), var(--indigo));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.cap-drop-info {
    flex: 1;
}

.cap-drop-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--label-primary);
}

.cap-drop-email {
    font-size: 0.72rem;
    color: var(--label-tertiary);
}

.cap-drop-sep {
    height: 1px;
    background: var(--separator);
    margin: 4px 6px;
}

.cap-drop-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--label-secondary);
    cursor: pointer;
    transition: all 0.12s;
}

.cap-drop-item:hover {
    background: var(--fill-thin);
    color: var(--label-primary);
}

.cap-drop-item.danger {
    color: var(--red);
}

.cap-drop-item.danger:hover {
    background: rgba(255, 69, 58, 0.08);
}

/* ═══════════════════════════════════════════
   NEW: 决策结果页
   ═══════════════════════════════════════════ */
.decision-demo {
    max-width: 800px;
    margin: 0 auto;
}

.decision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.decision-card {
    position: relative;
    padding: 18px 16px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--separator);
    transition: all 0.25s var(--spring);
}

.decision-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.decision-card.recommended {
    border-color: var(--tint);
    box-shadow: 0 0 0 1px var(--tint), 0 8px 32px rgba(10, 132, 255, 0.12);
}

.decision-rec-badge {
    position: absolute;
    top: -8px;
    right: 14px;
    padding: 2px 10px;
    border-radius: 8px;
    background: var(--tint);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
}

.decision-label {
    font-size: 0.72rem;
    color: var(--label-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.decision-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--label-primary);
    margin-bottom: 10px;
}

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

.confidence-track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--fill-medium);
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--tint), var(--green));
    transition: width 0.6s var(--spring);
}

.confidence-fill.medium {
    background: linear-gradient(90deg, var(--orange), var(--tint));
}

.confidence-fill.low {
    background: linear-gradient(90deg, var(--red), var(--orange));
}

.confidence-val {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tint);
    min-width: 36px;
    text-align: right;
}

.decision-reasons {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--label-secondary);
}

.decision-reasons li {
    padding: 4px 0 4px 14px;
    position: relative;
}

.decision-reasons li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tint);
}

.decision-feedback {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--separator);
}

.decision-feedback-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--label-primary);
    margin-bottom: 8px;
}

.feedback-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.feedback-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--separator);
    background: transparent;
    color: var(--label-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}

.feedback-btn:hover {
    border-color: var(--tint);
    color: var(--tint);
    background: rgba(10, 132, 255, 0.06);
}

.feedback-btn.selected {
    border-color: var(--tint);
    color: #fff;
    background: var(--tint);
}

@media (max-width: 768px) {
    .decision-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════
   NEW: 全局状态页（空/错误/无权限）
   ═══════════════════════════════════════════ */
.gs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.global-state {
    text-align: center;
    padding: 48px 24px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--separator);
}

.gs-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.gs-icon.empty {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.08), rgba(94, 92, 230, 0.06));
    color: var(--tint);
}

.gs-icon.error {
    background: linear-gradient(135deg, rgba(255, 69, 58, 0.08), rgba(255, 55, 95, 0.06));
    color: var(--red);
}

.gs-icon.locked {
    background: linear-gradient(135deg, rgba(255, 159, 10, 0.08), rgba(255, 149, 0, 0.06));
    color: var(--orange);
}

.gs-icon.queue {
    background: linear-gradient(135deg, rgba(255, 159, 10, 0.10), rgba(10, 132, 255, 0.06));
    color: var(--orange);
}

.gs-icon.active {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.10), rgba(94, 92, 230, 0.06));
    color: var(--tint);
}

.gs-icon.paused {
    background: linear-gradient(135deg, rgba(191, 90, 242, 0.10), rgba(10, 132, 255, 0.05));
    color: var(--purple);
}

.gs-icon.resume {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.10), rgba(10, 132, 255, 0.05));
    color: var(--green);
}

.gs-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--label-primary);
    margin-bottom: 6px;
}

.gs-desc {
    font-size: 0.85rem;
    color: var(--label-tertiary);
    max-width: 320px;
    margin: 0 auto 18px;
    line-height: 1.5;
}

.gs-action {
    display: inline-flex;
    gap: 8px;
}

.gs-action>button {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .gs-grid {
        grid-template-columns: 1fr;
    }

    .global-state {
        padding: 32px 18px;
    }

    .gs-desc {
        max-width: 36ch;
    }

    .gs-action {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .gs-action>button {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════
   NEW: 断点恢复提示条三态
   ═══════════════════════════════════════════ */
.recovery-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--separator);
}

.recovery-bar .rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.recovery-bar.recovering {
    background: rgba(10, 132, 255, 0.06);
    border-color: rgba(10, 132, 255, 0.25);
    color: var(--tint);
}

.recovery-bar.recovering .rec-dot {
    background: var(--tint);
    animation: skPulse 1s infinite;
}

.recovery-bar.ready {
    background: rgba(48, 209, 88, 0.06);
    border-color: rgba(48, 209, 88, 0.25);
    color: var(--green);
}

.recovery-bar.ready .rec-dot {
    background: var(--green);
}

.recovery-bar.recovered {
    background: var(--fill-thin);
    color: var(--label-secondary);
}

.recovery-bar.recovered .rec-dot {
    background: var(--label-quaternary);
}

.recovery-bar .rec-text {
    flex: 1;
}

.recovery-bar .rec-action {
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}

.recovery-bar .rec-action:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ═══════════════════════════════════════════
   NEW: 用户后台通用
   ═══════════════════════════════════════════ */
.backend-page {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.be-card {
    padding: 20px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--separator);
}

.be-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--label-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* 用户后台 - 个人信息卡 */
.profile-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--tint), var(--indigo));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(10, 132, 255, 0.25);
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--label-primary);
}

.profile-meta {
    font-size: 0.78rem;
    color: var(--label-tertiary);
    margin-top: 2px;
}

.profile-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(48, 209, 88, 0.1);
    color: var(--green);
    margin-top: 6px;
}

/* 用户后台 - 设置行 */
.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--separator);
    gap: 12px;
}

.setting-row:last-child {
    border-bottom: none;
}

.setting-label {
    font-size: 0.88rem;
    color: var(--label-primary);
}

.setting-desc {
    font-size: 0.75rem;
    color: var(--label-tertiary);
    margin-top: 2px;
}

.setting-value {
    font-size: 0.85rem;
    color: var(--label-secondary);
    text-align: right;
}

/* iOS风格开关 */
.ios-toggle {
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: var(--fill-medium);
    border: none;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.ios-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s var(--spring);
}

.ios-toggle.on {
    background: var(--green);
}

.ios-toggle.on::after {
    transform: translateX(18px);
}

/* 用户后台 - 设备列表 */
.device-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--separator);
}

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

.device-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--fill-thin);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--label-secondary);
    font-size: 1rem;
}

.device-info {
    flex: 1;
}

.device-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--label-primary);
}

.device-meta {
    font-size: 0.72rem;
    color: var(--label-tertiary);
}

.device-current {
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(10, 132, 255, 0.1);
    color: var(--tint);
}

/* 用户后台 - 统计卡片 */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stat-card {
    padding: 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--separator);
    text-align: center;
}

.stat-number {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--label-primary);
    background: linear-gradient(135deg, var(--label-primary) 30%, var(--tint));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 0.72rem;
    color: var(--label-tertiary);
    margin-top: 2px;
}

/* 用户后台 - 会话列表行 */
.session-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--separator);
    background: var(--bg-card);
    transition: all 0.15s;
}

.session-row:hover {
    background: var(--bg-card-hover);
}

.session-phase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.session-phase-dot.done {
    background: var(--green);
}

.session-phase-dot.active {
    background: var(--tint);
    animation: skPulse 1.2s infinite;
}

.session-phase-dot.paused {
    background: var(--orange);
}

.session-title {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--label-primary);
}

.session-meta {
    font-size: 0.72rem;
    color: var(--label-tertiary);
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════
   NEW: 历史页 — 筛选条 + 对比入口
   ═══════════════════════════════════════════ */
.hist-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.hist-filter-chip {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    background: var(--fill-thin);
    color: var(--label-secondary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.hist-filter-chip.active {
    background: rgba(10, 132, 255, 0.1);
    color: var(--tint);
    border-color: rgba(10, 132, 255, 0.3);
}

.hist-filter-chip:hover {
    background: var(--fill-medium);
}

.hist-detail-preview {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--separator);
    font-size: 0.85rem;
    color: var(--label-secondary);
    line-height: 1.6;
}

.hist-compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    background: rgba(10, 132, 255, 0.08);
    color: var(--tint);
    border: 1px solid rgba(10, 132, 255, 0.2);
    cursor: pointer;
    transition: all 0.15s;
}

.hist-compare-btn:hover {
    background: rgba(10, 132, 255, 0.14);
}

/* ═══════════════════════════════════════════
   NEW: 追问角色选择器
   ═══════════════════════════════════════════ */
.role-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.role-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 22px;
    font-size: 0.88rem;
    font-weight: 500;
    background: var(--bg-card);
    color: var(--label-primary);
    border: 1.5px solid var(--separator);
    cursor: pointer;
    transition: all 0.2s var(--spring);
}

.role-chip:hover {
    background: var(--bg-card-hover);
    border-color: var(--label-quaternary);
    transform: translateY(-1px);
}

.role-chip.selected {
    background: rgba(10, 132, 255, 0.12);
    color: var(--tint);
    border-color: var(--tint);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.10), 0 2px 8px rgba(10, 132, 255, 0.15);
    font-weight: 600;
}

.role-chip .role-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}

.role-chip.selected .role-dot {
    box-shadow: 0 0 8px 2px currentColor;
}

/* ═══════════════════════════════════════════
   NEW: Toast 处理中
   ═══════════════════════════════════════════ */
.toast.processing {
    border-left-color: var(--tint);
}

.toast.processing::before {
    background: var(--tint);
    animation: skPulse 1s infinite;
}

/* ═══════════════════════════════════════════
   NEW: 导出弹层
   ═══════════════════════════════════════════ */
.export-modal {
    max-width: 360px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    border: 1px solid var(--separator);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
}

.export-modal-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--separator);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.export-modal-body {
    padding: 8px;
}

.export-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    width: 100%;
    color: var(--label-secondary);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.12s;
}

.export-option:hover {
    background: var(--fill-thin);
    color: var(--label-primary);
}

.export-option .export-desc {
    font-size: 0.72rem;
    color: var(--label-quaternary);
    margin-top: 1px;
}

/* ═══════════════════════════════════════════
   A2: 认证异常细分
   ═══════════════════════════════════════════ */
.auth-error-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.auth-err {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 500;
}

.auth-err.err-exist {
    background: rgba(255, 159, 10, 0.08);
    color: var(--orange);
    border: 1px solid rgba(255, 159, 10, 0.2);
}

.auth-err.err-weak {
    background: rgba(255, 69, 58, 0.08);
    color: var(--red);
    border: 1px solid rgba(255, 69, 58, 0.2);
}

.auth-err.err-expired {
    background: rgba(10, 132, 255, 0.08);
    color: var(--tint);
    border: 1px solid rgba(10, 132, 255, 0.2);
}

/* ═══════════════════════════════════════════
   A3: 表单校验三态
   ═══════════════════════════════════════════ */
.field-validation {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 380px;
}

.fv-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fv-row label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--label-secondary);
}

.fv-row input {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.88rem;
    background: var(--bg-input);
    color: var(--label-primary);
    border: 1.5px solid var(--separator);
    transition: border-color 0.2s;
}

.fv-row input:focus {
    border-color: var(--tint);
    outline: none;
}

.fv-row.error input {
    border-color: var(--red);
}

.fv-row.success input {
    border-color: var(--green);
}

.fv-row.info input {
    border-color: var(--tint);
}

.fv-hint {
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.fv-hint.error {
    color: var(--red);
}

.fv-hint.success {
    color: var(--green);
}

.fv-hint.info {
    color: var(--tint);
}

/* ═══════════════════════════════════════════
   C1: 新增徽章状态
   ═══════════════════════════════════════════ */
.hdr-badge.s-queue {
    color: var(--orange);
}

.hdr-badge.s-queue::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 159, 10, 0.06);
    animation: queueBreath 2.4s ease-in-out infinite;
}

@keyframes queueBreath {

    0%,
    100% {
        opacity: 0.4
    }

    50% {
        opacity: 1
    }
}

.hdr-badge.s-paused {
    color: var(--label-tertiary);
    border: 1px solid var(--separator);
    animation: badgePaused 3s ease-in-out infinite;
}

.hdr-badge.s-cancelled {
    color: var(--label-quaternary);
    text-decoration: line-through;
    animation: badgeCancelled 3.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════
   C2: 系统忙提示条
   ═══════════════════════════════════════════ */
.sys-busy-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    background: rgba(255, 159, 10, 0.08);
    border: 1px solid rgba(255, 159, 10, 0.18);
    font-size: 0.82rem;
    color: var(--orange);
    font-weight: 500;
}

.sys-busy-bar .busy-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 159, 10, 0.3);
    border-top-color: var(--orange);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ═══════════════════════════════════════════
   C3: 断网离线 banner
   ═══════════════════════════════════════════ */
.offline-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    font-weight: 500;
    transition: all 0.3s var(--spring);
}

.offline-banner.offline {
    background: rgba(255, 69, 58, 0.1);
    color: var(--red);
    border: 1px solid rgba(255, 69, 58, 0.2);
}

.offline-banner.online {
    background: rgba(48, 209, 88, 0.1);
    color: var(--green);
    border: 1px solid rgba(48, 209, 88, 0.2);
}

.offline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.offline .offline-dot {
    background: var(--red);
    animation: skPulse 1.2s infinite;
}

.online .offline-dot {
    background: var(--green);
}

/* ═══════════════════════════════════════════
   C4: 设置保存反馈条
   ═══════════════════════════════════════════ */
.save-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    transition: all 0.2s;
}

.save-feedback.saving {
    background: rgba(10, 132, 255, 0.06);
    color: var(--tint);
    border: 1px solid rgba(10, 132, 255, 0.15);
}

.save-feedback.saved {
    background: rgba(48, 209, 88, 0.06);
    color: var(--green);
    border: 1px solid rgba(48, 209, 88, 0.15);
}

.save-feedback.save-failed {
    background: rgba(255, 69, 58, 0.06);
    color: var(--red);
    border: 1px solid rgba(255, 69, 58, 0.15);
}

.save-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(10, 132, 255, 0.2);
    border-top-color: var(--tint);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ═══════════════════════════════════════════
   C5: 危险确认弹窗
   ═══════════════════════════════════════════ */
.danger-modal {
    max-width: 380px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    border: 1px solid rgba(255, 69, 58, 0.2);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 69, 58, 0.08);
    overflow: hidden;
    text-align: center;
}

.danger-modal-icon {
    width: 48px;
    height: 48px;
    margin: 24px auto 12px;
    border-radius: 50%;
    background: rgba(255, 69, 58, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    font-size: 1.3rem;
}

.danger-modal-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--label-primary);
    margin-bottom: 6px;
}

.danger-modal-desc {
    font-size: 0.82rem;
    color: var(--label-tertiary);
    padding: 0 24px;
    line-height: 1.5;
}

.danger-modal-actions {
    display: flex;
    gap: 10px;
    padding: 18px 24px;
    justify-content: center;
}

.btn-danger {
    padding: 9px 22px;
    border-radius: 10px;
    border: none;
    background: var(--red);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-danger:hover {
    background: #ff453a;
    box-shadow: 0 4px 16px rgba(255, 69, 58, 0.35);
}

/* ═══════════════════════════════════════════
   B1: 评分矩阵表格
   ═══════════════════════════════════════════ */
.matrix-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    /* 给滚动条一点呼吸空间 */
}

.score-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--separator);
    margin-top: 16px;
}

.score-matrix th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--label-tertiary);
    background: var(--fill-thin);
    border-bottom: 1px solid var(--separator);
}

.score-matrix td {
    padding: 11px 14px;
    font-size: 0.84rem;
    color: var(--label-secondary);
    border-bottom: 1px solid var(--separator);
}

.score-matrix tr:last-child td {
    border-bottom: none;
}

.score-matrix tr.recommended td {
    background: rgba(10, 132, 255, 0.04);
}

.score-matrix .plan-name {
    font-weight: 600;
    color: var(--label-primary);
}

.score-bar {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--tint), rgba(10, 132, 255, 0.4));
    vertical-align: middle;
    margin-right: 6px;
    transition: width 0.3s var(--spring);
}

.score-bar.medium {
    background: linear-gradient(90deg, var(--orange), rgba(255, 159, 10, 0.4));
}

.score-bar.low {
    background: linear-gradient(90deg, var(--red), rgba(255, 69, 58, 0.4));
}

.score-val {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--label-tertiary);
}

@media (max-width: 640px) {
    .score-matrix {
        min-width: 640px;
    }
}

/* ═══════════════════════════════════════════
   B2: 执行反馈完整态
   ═══════════════════════════════════════════ */
.feedback-full {
    padding: 20px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--separator);
    margin-top: 16px;
}

.feedback-chosen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(10, 132, 255, 0.1);
    color: var(--tint);
    border: 1px solid rgba(10, 132, 255, 0.2);
    margin-bottom: 14px;
}

.feedback-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}

.rating-star {
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--label-quaternary);
    transition: color 0.12s, transform 0.12s;
}

.rating-star.active {
    color: #FFD60A;
}

.rating-star:hover {
    transform: scale(1.15);
}

.feedback-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.fb-tag {
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    background: var(--fill-thin);
    color: var(--label-secondary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.fb-tag.active {
    background: rgba(10, 132, 255, 0.1);
    color: var(--tint);
    border-color: rgba(10, 132, 255, 0.25);
}

.feedback-note textarea {
    width: 100%;
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-input);
    border: 1.5px solid var(--separator);
    color: var(--label-primary);
    font-size: 0.85rem;
    resize: vertical;
}

/* ═══════════════════════════════════════════
   D1: 审计日志时间线
   ═══════════════════════════════════════════ */
.audit-log {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.audit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    position: relative;
}

.audit-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: -2px;
    width: 1.5px;
    background: var(--separator);
}

.audit-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
    border: 2px solid var(--separator);
    background: var(--bg-base);
    position: relative;
    z-index: 1;
}

.audit-item.login .audit-dot {
    border-color: var(--green);
    background: rgba(48, 209, 88, 0.2);
}

.audit-item.security .audit-dot {
    border-color: var(--orange);
    background: rgba(255, 159, 10, 0.2);
}

.audit-item.danger .audit-dot {
    border-color: var(--red);
    background: rgba(255, 69, 58, 0.2);
}

.audit-info {
    flex: 1;
}

.audit-action {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--label-primary);
}

.audit-meta {
    font-size: 0.72rem;
    color: var(--label-quaternary);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════
   D2: 后台空态
   ═══════════════════════════════════════════ */
.be-empty {
    text-align: center;
    padding: 40px 20px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--separator);
}

.be-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--fill-thin);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--label-quaternary);
}

.be-empty-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--label-secondary);
    margin-bottom: 4px;
}

.be-empty-desc {
    font-size: 0.78rem;
    color: var(--label-quaternary);
    margin-bottom: 14px;
}

.btn-ghost {
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 0.82rem;
    background: transparent;
    border: 1.5px solid var(--separator);
    color: var(--tint);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-ghost:hover {
    border-color: var(--tint);
    background: rgba(10, 132, 255, 0.05);
}

/* ═══════════════════════════════════════════
   E1: 历史批量操作
   ═══════════════════════════════════════════ */
.batch-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: rgba(10, 132, 255, 0.06);
    border: 1px solid rgba(10, 132, 255, 0.15);
}

.batch-count {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--tint);
}

.batch-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.batch-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    background: rgba(10, 132, 255, 0.1);
    color: var(--tint);
    border: none;
    cursor: pointer;
    transition: all 0.12s;
}

.batch-btn:hover {
    background: rgba(10, 132, 255, 0.18);
}

.batch-btn.cancel {
    background: transparent;
    color: var(--label-secondary);
}

.hist-row-selectable {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--separator);
    transition: all 0.12s;
}

.hist-row-selectable.selected {
    background: rgba(10, 132, 255, 0.06);
    border-color: rgba(10, 132, 255, 0.2);
}

.hist-cb {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid var(--separator);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.12s;
}

.hist-cb.checked {
    background: var(--tint);
    border-color: var(--tint);
    color: #fff;
}

/* ═══════════════════════════════════════════
   E2: 搜索高亮 + 无命中
   ═══════════════════════════════════════════ */
.search-demo-box {
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--separator);
    overflow: hidden;
}

.search-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--separator);
}

.search-input-wrap input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-input);
    border: 1.5px solid var(--separator);
    color: var(--label-primary);
    font-size: 0.88rem;
}

.search-input-wrap input:focus {
    border-color: var(--tint);
    outline: none;
}

.search-highlight {
    background: rgba(255, 214, 10, 0.25);
    border-radius: 2px;
    padding: 0 1px;
    color: inherit;
}

.search-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--separator);
    font-size: 0.85rem;
    color: var(--label-secondary);
}

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

.search-result-title {
    font-weight: 600;
    color: var(--label-primary);
    margin-bottom: 3px;
}

.search-no-result {
    text-align: center;
    padding: 40px 20px;
}

.search-no-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--label-quaternary);
    opacity: 0.5;
}

.search-no-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--label-secondary);
    margin-bottom: 4px;
}

.search-no-desc {
    font-size: 0.78rem;
    color: var(--label-quaternary);
    margin-bottom: 14px;
}

/* ═══════════════════════════════════════════
   F1: 导出预览弹层
   ═══════════════════════════════════════════ */
.export-preview {
    max-width: 560px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    border: 1px solid var(--separator);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
}

.ep-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--separator);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.ep-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 240px;
}

.ep-sidebar {
    padding: 14px;
    border-right: 1px solid var(--separator);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ep-chapter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--label-secondary);
    cursor: pointer;
    transition: background 0.12s;
}

.ep-chapter:hover {
    background: var(--fill-thin);
}

.ep-chapter .ep-cb {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--separator);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ep-chapter .ep-cb.checked {
    background: var(--tint);
    border-color: var(--tint);
    color: #fff;
}

.ep-preview-area {
    padding: 16px;
    font-size: 0.8rem;
    color: var(--label-tertiary);
    line-height: 1.65;
    background: var(--fill-thin);
}

.ep-preview-area h4 {
    font-size: 0.85rem;
    color: var(--label-primary);
    margin-bottom: 6px;
}

.ep-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--separator);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.ep-format {
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    background: var(--fill-thin);
    color: var(--label-secondary);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.12s;
}

.ep-format.active {
    background: rgba(10, 132, 255, 0.1);
    color: var(--tint);
    border-color: rgba(10, 132, 255, 0.25);
}

/* ═══════════════════════════════════════════
   F2: 新手引导完成
   ═══════════════════════════════════════════ */
.onboard-done {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 32px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    backdrop-filter: saturate(180%) blur(var(--blur));
    border: 1px solid var(--separator);
    box-shadow: var(--shadow-hover);
    position: relative;
    overflow: hidden;
}

.onboard-done::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(48, 209, 88, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.onboard-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(48, 209, 88, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--green);
    position: relative;
}

.onboard-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--label-primary);
    margin-bottom: 6px;
}

.onboard-desc {
    font-size: 0.84rem;
    color: var(--label-tertiary);
    line-height: 1.55;
    margin-bottom: 22px;
}

.onboard-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ═══════════════════════════════════════════
   F3: 可访问性展示
   ═══════════════════════════════════════════ */
.a11y-showcase {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.focus-demo-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.focus-demo-btn {
    padding: 9px 18px;
    border-radius: 10px;
    background: var(--tint);
    color: #fff;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.12s;
}

.focus-demo-btn.show-focus {
    outline-color: rgba(10, 132, 255, 0.7);
    outline-width: 3px;
}

.focus-demo-input {
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--label-primary);
    border: 1.5px solid var(--separator);
    font-size: 0.85rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus-demo-input.show-focus {
    border-color: var(--tint);
    outline-color: rgba(10, 132, 255, 0.4);
}

.hc-card {
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    border: 2px solid #fff;
    background: #000;
    color: #fff;
}

.hc-card .hc-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.hc-card .hc-body {
    font-size: 0.84rem;
    opacity: 0.9;
}

.hc-card .hc-btn {
    margin-top: 10px;
    padding: 8px 18px;
    border-radius: 8px;
    background: #FFD60A;
    color: #000;
    font-weight: 700;
    border: none;
    font-size: 0.82rem;
    cursor: pointer;
}

/* ═══════════════════════════════════════════
   F4: 极端屏幕容器
   ═══════════════════════════════════════════ */
.viewport-sim {
    border-radius: var(--radius-md);
    border: 2px solid var(--separator);
    overflow: hidden;
    background: var(--bg-base);
    position: relative;
}

.viewport-sim::before {
    content: attr(data-label);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 6px 12px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--fill-thin);
    color: var(--label-tertiary);
    border-bottom: 1px solid var(--separator);
    text-align: center;
    z-index: 2;
}

.viewport-sim-inner {
    padding: 30px 10px 10px;
    overflow: hidden;
}

.page-scroll {
    height: 720px;
    overflow: auto;
    border-radius: 12px;
    background: var(--bg-base);
}

/* ═══════════════════════════════════════════
   F5: 移动端预览容器
   ═══════════════════════════════════════════ */
.mobile-frame {
    width: 375px;
    margin: 0 auto;
    border-radius: 24px;
    border: 3px solid var(--separator);
    overflow: hidden;
    background: var(--bg-base);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    position: relative;
}

.mobile-frame::before {
    content: '';
    display: block;
    width: 100px;
    height: 6px;
    border-radius: 3px;
    background: var(--separator);
    margin: 10px auto 8px;
}

.mobile-frame-body {
    padding: 0 12px 16px;
}

.mobile-matrix [style*="position:sticky"] {
    position: static !important;
    left: auto !important;
}

.mobile-frame .decision-grid {
    grid-template-columns: 1fr !important;
}

.mobile-frame .decision-card {
    max-width: 100%;
}

.mobile-frame .stat-grid {
    grid-template-columns: 1fr 1fr !important;
}

.mobile-frame .profile-hero {
    flex-direction: column;
    text-align: center;
}

.mobile-frame .profile-avatar {
    margin-right: 0;
}

/* ═══════════════════════════════════════════
   移动端长文案截断工具类
   用法：.m-clamp-2 两行截断 + .m-clamp-more "查看全文"
   ═══════════════════════════════════════════ */
.m-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

.m-clamp-more {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--tint);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

.m-clamp-more:hover {
    text-decoration: underline;
}

/* 减少动态：尊重系统设置 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* loading 属于状态反馈：在减少动态下仍保持可辨识的旋转 */
    button.btn-loading::after,
    .sys-busy-bar .busy-spinner {
        animation-duration: 0.9s !important;
        animation-iteration-count: infinite !important;
    }
}