/* ============================================================
   UI 元知识宝典 · 全局样式表 (style.css) · v1.0.9
   总行数 ~5860 · 三主题（亮/暗/护眼）· 双轨视角（Web/App）
   完整设计规范见 DESIGN.md，贡献规范见 CONTRIBUTING.md

   TOC (Table of Contents) — Ctrl+F 搜索锚点可快速跳转：
   ────────────────────────────────────────────────────────────
   [TOC-1]  设计系统与主题变量              L1     主题色板/令牌/Type Scale/Spacing/Z-index
   [TOC-1a] 全局无障碍（焦点/动画/选区）    L186   focus-visible / reduced-motion / selection
   [TOC-2]  页面布局与导航结构              L221   app-layout/sidebar/main-content
   [TOC-3]  顶部控制条                      L410   top-bar/主题切换/skip-link/footer
   [TOC-4]  设计语言变色龙沙盒              L547   5 种风格（呼吸/扁平/玻璃/新拟态/微拟物）
   [TOC-5]  核心教程知识卡片与演练场        L922   concept-card/playground/code-pre
   [TOC-6]  特殊交互组件特定样式            L1176  CH.1-12 章节专属 Demo
   [TOC-7]  图标/组件/导航特定样式          L2098  CH.4/5/8 等扩充
   [TOC-8]  概念卡片排版与色彩列表          L2457  CH.3 排版 / CH.2 色彩
   [TOC-9]  12 章节扩充样式                 L2651  CH.1-12 分小节（Layout/Color/Type...）
   [TOC-10] 学习路径/3D翻转/项目模板        L3418  CH.11/26 模板
   [TOC-11] 双轨视角与变色龙模拟器          L3661  track-btn/is-browser/is-phone 形变
   [TOC-12] 交互式 Demo 细节样式            L3964  CH.13+ 后续章节
   [TOC-D]  五学域分组与学习路径            L4774  domain-group/learning-paths
   [TOC-R]  响应式断点                      L4889  mobile/tablet/desktop
   [TOC-CH] 章节锚点区（CH.27~41）          L5521  后续章节专属样式

   章节锚点命名约定：搜索 [CH-XX] 跳转到第 XX 章专属样式
   ============================================================ */

/* ============================================================
 * [TOC-1] 1. 设计系统与主题变量 (CSS Variables)
 * ============================================================ */
:root {
    /* Fonts */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, monospace;

    /* Light Theme (Default) */
    --bg-app: #f8fafc;
    --bg-card: #ffffff;
    --bg-sidebar: rgba(255, 255, 255, 0.8);
    --bg-glass: rgba(255, 255, 255, 0.45);
    --border-glass: rgba(255, 255, 255, 0.4);
    --shadow-glass: rgba(31, 38, 135, 0.05);
    --bg-neu: #f8fafc;
    --neu-shadow-dark: #d1d5db;
    --neu-shadow-light: #ffffff;
    --bg-skeuo-start: #ffffff;
    --bg-skeuo-end: #e2e8f0;
    --border-skeuo: rgba(0, 0, 0, 0.12);
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-muted: #e0e7ff;
    --accent-text: #3730a3;
    --success: #10b981;
    --danger: #ef4444;
    --info: #3b82f6;
    --accent-contrast: #ffffff;
    
    /* Card shadow */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.02);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.03);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* === Type Scale (8 级，见 DESIGN.md 第 3 章) === */
    --text-display: 2rem;        /* 32px - 沙盒大标题 */
    --text-h2: 1.5rem;           /* 24px - .section-title */
    --text-h3: 1.1rem;           /* 17.6px - 概念卡标题 */
    --text-h4: 0.95rem;          /* 15.2px - 对比表列标题 */
    --text-body: 0.875rem;       /* 14px - 正文 .concept-desc */
    --text-sm: 0.8rem;           /* 12.8px - 次要说明 */
    --text-caption: 0.72rem;     /* 11.5px - 标签、tag、地址栏 */
    --text-nano: 0.68rem;        /* 10.9px - UPPER 标签、track-label */

    /* === Spacing System (4px 基数，见 DESIGN.md 第 5 章) === */
    --space-1: 4px;   /* 紧凑间隙 */
    --space-2: 8px;   /* 基础间隙 */
    --space-3: 12px;  /* 标准间隙 */
    --space-4: 16px;  /* 区块内边距 */
    --space-6: 24px;  /* 区块间距 */
    --space-8: 32px;  /* 大区块间距 */
    --space-10: 40px; /* 仪表盘 section margin */

    /* === Z-index Scale (6 级，见 DESIGN.md 第 6 章) === */
    --z-base: 0;
    --z-sticky: 100;
    --z-sidebar: 1000;
    --z-dropdown: 1100;
    --z-lightbox: 2000;
    --z-toast: 3000;

    /* === Surface Layers (5 层，见 DESIGN.md 第 6 章) === */
    --surface-base: var(--bg-app);
    --surface-card: var(--bg-card);
    --surface-elevated: var(--bg-card);      /* 搭配 --shadow-md 使用 */
    --surface-glass: var(--bg-glass);
    --surface-overlay: rgba(0, 0, 0, 0.7);

    /* === Semantic: Warning (补全缺口，原 #f59e0b 硬编码) === */
    --warning: #f59e0b;
}

/* Dark Theme overrides */
body.theme-dark {
    --bg-app: #080c14;
    --bg-card: #0f172a;
    --bg-sidebar: rgba(15, 23, 42, 0.8);
    --bg-glass: rgba(15, 23, 42, 0.45);
    --border-glass: rgba(255, 255, 255, 0.08);
    --shadow-glass: rgba(0, 0, 0, 0.3);
    --bg-neu: #080c14;
    --neu-shadow-dark: #030508;
    --neu-shadow-light: #121b2d;
    --bg-skeuo-start: #1e293b;
    --bg-skeuo-end: #0f172a;
    --border-skeuo: rgba(255, 255, 255, 0.08);
    --text: #f8fafc;
    --text-muted: #94a3b8;
    --border: #1e293b;
    --border-light: #0f172a;
    --accent: #818cf8;
    --accent-hover: #6366f1;
    --accent-muted: #1e1b4b;
    --accent-text: #c7d2fe;
    --success: #34d399;
    --danger: #f87171;
    --info: #60a5fa;
    --accent-contrast: #0f172a;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.25);
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);

    /* Dark 主题 Warning 覆盖 */
    --warning: #fbbf24;
    --surface-overlay: rgba(0, 0, 0, 0.8);
}

/* Eye-Care Theme overrides */
body.theme-eyecare {
    --bg-app: #f4ede0;
    --bg-card: #faf5eb;
    --bg-sidebar: rgba(250, 245, 235, 0.85);
    --bg-glass: rgba(250, 245, 235, 0.5);
    --border-glass: rgba(107, 142, 107, 0.2);
    --shadow-glass: rgba(45, 106, 79, 0.05);
    --bg-neu: #f4ede0;
    --neu-shadow-dark: #e1d8c4;
    --neu-shadow-light: #ffffff;
    --bg-skeuo-start: #faf5eb;
    --bg-skeuo-end: #e5dbca;
    --border-skeuo: rgba(45, 106, 79, 0.15);
    --text: #3d403a;
    --text-muted: #747870;
    --border: #e9e2d5;
    --border-light: #f2ebd9;
    --accent: #2d6a4f;
    --accent-hover: #1b4332;
    --accent-muted: #d8f3dc;
    --accent-text: #1b4332;
    --success: #2d6a4f;
    --danger: #b70909;
    --info: #2a6f97;
    --accent-contrast: #ffffff;

    --shadow-sm: 0 1px 3px rgba(45, 106, 79, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(45, 106, 79, 0.06);
    --shadow-lg: 0 10px 25px -5px rgba(45, 106, 79, 0.08);
    --shadow-xl: 0 20px 25px -5px rgba(45, 106, 79, 0.1);

    /* 护眼主题 Warning 覆盖 */
    --warning: #d97706;
    --surface-overlay: rgba(45, 106, 79, 0.5);
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-app);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
}

/* ============================================================
 * [TOC-1a] 1.1 全局键盘焦点样式（无障碍）
 * ============================================================ */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}
/* 鼠标点击不显示焦点环，仅键盘 Tab 时显示 */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================
 * [TOC-1a] 1.2 尊重用户动画偏好（无障碍 / 性能）
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
 * [TOC-1a] 1.3 选中文本配色
 * ============================================================ */
::selection {
    background: var(--accent-muted);
    color: var(--accent-text);
}

/* ============================================================
 * [TOC-2] 2. 页面布局与导航结构
 * ============================================================ */
.app-layout,
.app-container {
    display: flex;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Glassmorphic Sidebar */
.sidebar {
    width: 380px;
    max-width: 85vw;
    background: var(--bg-sidebar);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--border);
    padding: 1.5rem 1.25rem;
    padding-top: calc(1.5rem + env(safe-area-inset-top));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: transform 0.3s ease, background-color 0.3s;
    overflow-x: hidden;
}

.sidebar-close-btn {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    transition: var(--transition-smooth);
}
.sidebar-close-btn:hover {
    color: var(--text);
}

/* Sidebar mobile overlay backdrop */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
body.sidebar-open {
    overflow: hidden;
}
body.sidebar-open::after {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-logo {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #4f46e5, #818cf8);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
}

.sidebar-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.search-wrapper {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.88rem;
    outline: none;
    transition: var(--transition-smooth);
}

.search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-muted);
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    width: 16px;
    height: 16px;
}

.nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    padding-right: 4px;
}

.nav-list::-webkit-scrollbar {
    width: 4px;
}
.nav-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.nav-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: var(--transition-smooth);
    flex-wrap: nowrap;
    white-space: nowrap;
}

.nav-item.active a, .nav-item a:hover {
    color: var(--text);
    background: var(--border-light);
}

.nav-item.active a {
    font-weight: 600;
    border-left: 3px solid var(--accent);
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    padding-left: 9px;
}

/* Main Content Container */
.main-content {
    flex-grow: 1;
    margin-left: 380px;
    padding: 2.5rem 3rem;
    padding-top: calc(2.5rem + env(safe-area-inset-top));
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    transition: margin-left 0.3s ease;
}

/* ============================================================
 * [TOC-3] 3. 顶部控制条 (Controls Header)
 * ============================================================ */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 1.5rem;
}

.top-bar-info h1 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.top-bar-info p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.top-bar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--border-light);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.control-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-smooth);
}

.control-btn:hover {
    color: var(--text);
}

.control-btn.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.control-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    color: var(--text);
}

/* ============================================================
 * [TOC-3] 3.1 无障碍 Skip-link（键盘跳转）
 * ============================================================ */
.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--accent);
    color: var(--accent-contrast);
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 16px;
    outline: 3px solid var(--accent-muted);
    outline-offset: 2px;
}

/* ============================================================
 * [TOC-3] 3.2 全站页脚 site-footer
 * ============================================================ */
.site-footer {
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.site-footer a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.site-footer a:hover {
    text-decoration: underline;
}
.site-footer .footer-sub {
    margin-top: 5px;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 110;
    color: var(--text);
    transition: var(--transition-smooth);
}
.menu-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.menu-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================================
 * [TOC-4] 4. 设计语言变色龙沙盒 (Design Prompt Sandbox)
 * ============================================================ */
.sandbox-section {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sandbox-title-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sandbox-title-bar h2 {
    font-size: 1.35rem;
    font-weight: 750;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sandbox-title-bar p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.sandbox-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}

.sandbox-tab {
    background: var(--border-light);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.sandbox-tab:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

.sandbox-tab.active {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
}

.sandbox-workspace {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
}

/* Sandbox Chameleon Preview Card styles wrapper */
.sandbox-preview-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-app);
    border-radius: var(--radius-md);
    padding: 2rem;
    border: 1px dashed var(--border);
    min-height: 320px;
    transition: background-color 0.3s;
}

/* The Chameleon Card itself */
.sandbox-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
}

.sandbox-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sandbox-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-contrast);
    font-weight: bold;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.4s;
}

.sandbox-card-meta {
    display: flex;
    flex-direction: column;
}

.sandbox-card-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    transition: all 0.4s;
}

.sandbox-card-tag {
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 600;
    transition: all 0.4s;
}

.sandbox-card-body {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 12px 0 16px 0;
    line-height: 1.6;
    transition: all 0.4s;
}

.sandbox-card-footer {
    display: flex;
    gap: 10px;
}

.sandbox-card-btn {
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    transition: all 0.4s;
}

.sandbox-card-btn.primary {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
}

.sandbox-card-btn:hover {
    background: var(--border-light);
    border-color: var(--text-muted);
    color: var(--text);
}

.sandbox-card-btn.primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    filter: brightness(0.92);
}

/* Chameleon Card Styles triggered by active sandbox tabs */

/* 1. Flat Style (扁平化) */
.sandbox-card.style-flat {
    background: var(--bg-card);
    border: 3px solid var(--text);
    border-radius: 0px;
    box-shadow: 6px 6px 0px var(--text);
    padding: 1.25rem;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.sandbox-card.style-flat .sandbox-card-avatar {
    border-radius: 0px;
    border: 2px solid var(--text);
}
.sandbox-card.style-flat .sandbox-card-btn {
    border-radius: 0px;
    border: 2px solid var(--text);
    box-shadow: 2px 2px 0px var(--text);
}
.sandbox-card.style-flat .sandbox-card-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* 2. Breathing Style (呼吸感) */
.sandbox-card.style-breathing {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.02);
    padding: 2.5rem 2.25rem;
    gap: 1.25rem;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.sandbox-card.style-breathing .sandbox-card-header {
    gap: 16px;
}
.sandbox-card.style-breathing .sandbox-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: 20px;
}
.sandbox-card.style-breathing .sandbox-card-body {
    font-size: 0.95rem;
    line-height: 1.85;
    margin: 8px 0;
    color: var(--text);
}
.sandbox-card.style-breathing .sandbox-card-btn {
    border-radius: 100px;
    padding: 10px 22px;
}

/* 3. Glassmorphism Style (玻璃拟态) */
.sandbox-card.style-glassmorphism {
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    box-shadow: 0 8px 32px var(--shadow-glass);
    padding: 1.5rem;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.sandbox-card.style-glassmorphism .sandbox-card-avatar {
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.sandbox-card.style-glassmorphism .sandbox-card-btn {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
}
.sandbox-card.style-glassmorphism .sandbox-card-btn.primary {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
}

/* 4. Neumorphism Style (新拟态) */
.sandbox-card.style-neumorphism {
    background: var(--bg-neu);
    border: none;
    border-radius: 28px;
    box-shadow: 9px 9px 18px var(--neu-shadow-dark), -9px -9px 18px var(--neu-shadow-light);
    padding: 1.75rem;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.sandbox-card.style-neumorphism .sandbox-card-avatar {
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
    background: transparent;
    color: var(--accent);
}
.sandbox-card.style-neumorphism .sandbox-card-btn {
    border: none;
    box-shadow: 4px 4px 8px var(--neu-shadow-dark), -4px -4px 8px var(--neu-shadow-light);
    border-radius: 16px;
    background: var(--bg-neu);
}
.sandbox-card.style-neumorphism .sandbox-card-btn.primary {
    box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
    color: var(--accent);
    font-weight: 700;
}

/* 5. Soft Skeuomorphism Style (微拟物) */
.sandbox-card.style-skeuomorphism {
    background: linear-gradient(135deg, var(--bg-skeuo-start), var(--bg-skeuo-end));
    border: 1px solid var(--border-skeuo);
    border-radius: 16px;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 6px 16px -4px rgba(0, 0, 0, 0.08),
        0 12px 24px -8px rgba(0, 0, 0, 0.12);
    padding: 1.5rem;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.sandbox-card.style-skeuomorphism .sandbox-card-avatar {
    border: 1px solid var(--border-skeuo);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.4);
}
.sandbox-card.style-skeuomorphism .sandbox-card-btn {
    background: linear-gradient(180deg, var(--bg-skeuo-start), var(--bg-skeuo-end));
    border: 1px solid var(--border-skeuo);
    border-bottom-color: rgba(0,0,0,0.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.05);
    border-radius: 10px;
}
.sandbox-card.style-skeuomorphism .sandbox-card-btn.primary {
    background: linear-gradient(180deg, #6366f1, #4f46e5);
    border-color: #4338ca;
    color: white;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(79, 70, 229, 0.2);
}
.sandbox-card.style-skeuomorphism .sandbox-card-btn:active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    transform: translateY(1px);
}

/* Code Viewer Section inside Sandbox */
.sandbox-code-viewer {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    height: 100%;
}

.code-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--border-light);
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
}

.code-viewer-title {
    font-size: 0.8rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-weight: 500;
}

.code-pre {
    margin: 0;
    padding: 1.25rem;
    background: var(--bg-card);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text);
    overflow: auto;
    flex-grow: 1;
    max-height: 380px;
    white-space: pre-wrap;
    word-break: break-word;
}

.code-pre code {
    white-space: pre-wrap;
    word-break: break-word;
    display: block;
}

.code-pre strong {
    font-weight: 700;
    color: var(--accent);
}

.sandbox-code-viewer .code-pre {
    max-height: none;
    flex-grow: 1;
    height: auto;
}

/* ============================================================
 * [TOC-5] 5. 核心教程知识卡片与 Demo 演练场
 * ============================================================ */
.section-anchor {
    padding-top: 1.5rem;
}

.section-title {
    font-size: 1.45rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    border-left: 4px solid var(--accent);
    padding-left: 12px;
}

.concept-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: 1.8rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.concept-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.concept-name-group h3 {
    font-size: 1.2rem;
    font-weight: 750;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.concept-name-group .en-tag {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent);
    background: var(--accent-muted);
    color: var(--accent-text);
    padding: 2px 8px;
    border-radius: 30px;
    font-weight: 600;
    margin-top: 4px;
    display: inline-block;
}

.concept-desc {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.concept-tips {
    background: var(--border-light);
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 0.88rem;
    color: var(--text);
}

.concept-tips strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
}

/* Interactive Demo Box Container */
.playground-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-app);
}

.playground-header {
    background: var(--border-light);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.playground-demo-area {
    padding: 1.8rem;
    background: var(--bg-card);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Code Viewer Tabs */
.code-tabs-container {
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}

.code-tabs {
    display: flex;
    background: var(--border-light);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.code-tab-title {
    padding: 10px 18px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    display: inline-block;
}

.code-tab-btn {
    background: transparent;
    border: none;
    padding: 10px 18px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-muted);
    cursor: pointer;
    border-right: 1px solid var(--border);
    transition: var(--transition-smooth);
}

.code-tab-btn:hover {
    color: var(--text);
    background: rgba(0,0,0,0.02);
}

.code-tab-btn.active {
    background: var(--bg-card);
    color: var(--text);
    border-bottom: 2px solid var(--accent);
}

.code-pre-box {
    position: relative;
    background: var(--bg-card);
}

.code-pre-box .copy-code-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

/* Button elements */
.btn {
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
}

.btn:hover {
    background: var(--border-light);
    border-color: var(--text-muted);
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary, .btn.primary {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
}

.btn-primary:hover, .btn.primary:hover {
    background: var(--accent-hover);
}

.btn-secondary {
    background: var(--border-light);
    border-color: var(--border);
}

.btn-success {
    background: var(--success);
    color: white;
    border-color: var(--success);
}
.btn-success:hover {
    background: var(--success);
    border-color: var(--success);
    color: white;
    filter: brightness(0.92);
}

.btn-danger {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}
.btn-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
    filter: brightness(0.92);
}

.btn-info {
    background: var(--info);
    color: white;
    border-color: var(--info);
}
.btn-info:hover {
    background: var(--info);
    border-color: var(--info);
    color: white;
    filter: brightness(0.92);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 6px;
}

/* ============================================================
 * [TOC-6] 6. 特殊交互组件特定样式 (Demo styles) — CH.1~12
 * ============================================================ */

/* Spacing & Grid Demo */
.spacing-demo-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.spacing-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    background: var(--bg-app);
    padding: 12px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.spacing-controls label {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.spacing-controls input[type="range"] {
    cursor: pointer;
    accent-color: var(--accent);
}

.spacing-preview-box {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    background: var(--bg-card);
    overflow: hidden;
}

.grid-overlay-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-size: 8px 8px;
    background-image: 
        linear-gradient(to right, rgba(239, 68, 68, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(239, 68, 68, 0.07) 1px, transparent 1px);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.grid-overlay-layer.visible {
    opacity: 1;
}

.demo-card-group {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    transition: gap 0.2s ease, padding 0.2s ease;
}

.demo-card-item {
    display: flex;
    align-items: center;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    width: 100%;
    transition: var(--transition-smooth);
}

.item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-contrast);
    font-weight: bold;
}

.item-content {
    margin-left: 12px;
}

.item-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
}

.item-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Toast Container */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    width: 320px;
    pointer-events: auto;
    animation: toast-slide-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.toast-item.closing {
    animation: toast-fade-out 0.25s ease forwards;
}

.toast-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.toast-content {
    flex-grow: 1;
    font-size: 0.88rem;
    color: var(--text);
    font-weight: 600;
}

.toast-close {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover {
    color: var(--text);
}

.toast-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    animation: toast-progress-bar 3s linear forwards;
}

.toast-item.toast-success {
    border-left: 4px solid var(--success);
}
.toast-item.toast-success .toast-progress {
    background: var(--success);
}

.toast-item.toast-error {
    border-left: 4px solid var(--danger);
}
.toast-item.toast-error .toast-progress {
    background: var(--danger);
}

.toast-item.toast-info {
    border-left: 4px solid var(--info);
}
.toast-item.toast-info .toast-progress {
    background: var(--info);
}

@keyframes toast-slide-in {
    from {
        transform: translateX(120%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}
@keyframes toast-fade-out {
    to {
        transform: translateX(60%) translateY(-10px) scale(0.85);
        opacity: 0;
    }
}
@keyframes toast-progress-bar {
    from { width: 100%; }
    to { width: 0%; }
}

/* Lightbox Gallery styling */
.lightbox-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
}

.gallery-item {
    height: 130px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.88rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255,255,255,0.1);
    transition: var(--transition-smooth);
}

.gallery-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.15);
    transition: background 0.25s;
}

.gallery-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.gallery-item:hover::before {
    background: rgba(0,0,0,0.05);
}

.gallery-item span {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Dialog Lightbox overlay */
.lightbox-dialog {
    border: none;
    background: transparent;
    padding: 0;
    max-width: 95vw;
    max-height: 95vh;
    outline: none;
    margin: auto;
    
    /* Modern Top-layer entry transitions */
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.3s, transform 0.3s, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}

.lightbox-dialog[open] {
    opacity: 1;
    transform: scale(1);
    
    @starting-style {
        opacity: 0;
        transform: scale(0.96);
    }
}

.lightbox-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: background-color 0.3s, backdrop-filter 0.3s, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}

.lightbox-dialog[open]::backdrop {
    background-color: rgba(9, 12, 22, 0.75);
    backdrop-filter: blur(8px);
    
    @starting-style {
        background-color: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
    }
}

.lightbox-wrapper {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.lightbox-image-view {
    width: 580px;
    max-width: 80vw;
    height: 360px;
    border-radius: var(--radius-md);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid var(--border);
    transition: background 0.3s;
}

.lightbox-caption {
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--text);
}

.lightbox-close-btn {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 1.5rem;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
}

.lightbox-close-btn:hover {
    transform: scale(1.1);
    background-color: var(--border-light);
}

.lightbox-close-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Inline Edit Demo */
.inline-edit-box {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--bg-app);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.edit-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.edit-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    width: 70px;
    flex-shrink: 0;
}

.edit-value-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition-smooth);
}

.edit-value-wrapper:hover {
    background: var(--bg-card);
    border-color: var(--border);
}

.edit-value {
    font-size: 0.92rem;
    color: var(--text);
    font-weight: 600;
    word-break: break-all;
}

.edit-trigger {
    background: transparent;
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.2s;
}

.edit-value-wrapper:hover .edit-trigger {
    opacity: 1;
}

.inline-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
}

.inline-input {
    flex-grow: 1;
    padding: 6px 12px;
    font-size: 0.92rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--accent);
    background: var(--bg-card);
    color: var(--text);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-muted);
}

.saving-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-loader 0.8s linear infinite;
    display: inline-block;
    margin-right: 6px;
}

.success-checkmark {
    color: var(--success);
    font-weight: bold;
    animation: pop-scale 0.2s ease;
}

.edit-tip {
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

@keyframes spin-loader {
    to { transform: rotate(360deg); }
}
@keyframes pop-scale {
    0% { transform: scale(0.6); }
    100% { transform: scale(1); }
}

/* Skeleton styling */
.skeleton-demo-box {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.skeleton-header {
    display: flex;
    justify-content: flex-start;
}

.skeleton-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    max-width: 400px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.skeleton-card.loading .sk-element {
    background: linear-gradient(
        90deg,
        var(--border-light) 25%,
        var(--border) 37%,
        var(--border-light) 63%
    );
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: 4px;
}

.skeleton-card.loading .sk-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-card.loading .sk-content {
    flex-grow: 1;
}

.skeleton-card.loading .sk-title {
    width: 120px;
    height: 18px;
    margin-bottom: 12px;
}

.skeleton-card.loading .sk-line {
    width: 100%;
    height: 12px;
    margin-bottom: 8px;
}

.skeleton-card.loading .sk-line.short {
    width: 60%;
}

.skeleton-card.loading .sk-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.skeleton-card.loading .sk-btn {
    width: 70px;
    height: 28px;
    border-radius: 6px;
}

/* Skeleton Loaded */
.skeleton-card.loaded {
    /* styles for real content card */
}

.skeleton-card.loaded .sk-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.skeleton-card.loaded .sk-content {
    flex-grow: 1;
}

.skeleton-card.loaded .sk-title {
    font-size: 1rem;
    font-weight: 750;
    color: var(--text);
    margin-bottom: 4px;
}

.skeleton-card.loaded .sk-title::after {
    content: "旅行者一号";
}

.skeleton-card.loaded .sk-line {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.skeleton-card.loaded .sk-line:first-of-type::after {
    content: "正在飞离太阳系，探索深空奥秘。";
}

.skeleton-card.loaded .sk-line.short::after {
    content: "当前速度：17 公里/秒。";
}

.skeleton-card.loaded .sk-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.skeleton-card.loaded .sk-btn {
    padding: 6px 12px;
    font-size: 0.78rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
}

.skeleton-card.loaded .sk-btn:first-child {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
}

.skeleton-card.loaded .sk-btn:first-child::after {
    content: "关注卫星";
}

.skeleton-card.loaded .sk-btn:last-child::after {
    content: "查看轨迹";
}

@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Accordion (details) styling */
.accordion-demo-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accordion-details {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    overflow: hidden;
    transition: border-color 0.2s;
}

.accordion-details[open] {
    border-color: var(--accent);
}

.accordion-summary {
    padding: 14px 20px;
    font-weight: 650;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.accordion-summary::-webkit-details-marker {
    display: none;
}

.accordion-summary:hover {
    background: var(--border-light);
}

.accordion-chevron {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.25s ease;
}

.accordion-details[open] .accordion-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

.accordion-content {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    background: var(--bg-app);
    animation: accordion-slide 0.2s ease-out;
}

@keyframes accordion-slide {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Popover & Tooltip collision simulator */
.popover-demo-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.popover-triggers {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.tooltip-trigger-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip-element {
    position: absolute;
    background: #0f172a;
    color: #ffffff;
    padding: 6px 10px;
    font-size: 0.78rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -4px) scale(0.95);
    transition: opacity 0.25s, transform 0.25s;
    z-index: 100;
    left: 50%;
    bottom: calc(100% + 8px);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255,255,255,0.1);
}

.tooltip-element::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
}

.tooltip-trigger-wrapper:hover .tooltip-element {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

/* Native Popover */
.native-popover-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    background: var(--bg-card);
    color: var(--text);
    max-width: min(320px, 90vw);
    box-shadow: var(--shadow-lg);
    margin: auto;
    
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.25s, transform 0.25s, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
}

.native-popover-card:popover-open {
    opacity: 1;
    transform: scale(1);
    
    @starting-style {
        opacity: 0;
        transform: scale(0.95);
    }
}

.native-popover-card::backdrop {
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.25s, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
}

.native-popover-card:popover-open::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    
    @starting-style {
        background-color: rgba(0, 0, 0, 0);
    }
}

.popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.popover-header h4 {
    font-size: 0.98rem;
    font-weight: 750;
    margin: 0;
}

.close-popover {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Collision box simulator */
.collision-box-simulator {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    background: var(--bg-app);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sim-header h5 {
    font-size: 0.85rem;
    font-weight: 750;
    margin: 0;
}

.sim-container {
    height: 170px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    border: 1px dashed var(--border);
}

.sim-target-btn {
    position: absolute;
    top: 70px;
    left: 120px;
    background: var(--accent);
    color: var(--accent-contrast);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: default;
    transition: top 0.4s cubic-bezier(0.25, 1, 0.5, 1), left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sim-tooltip {
    position: absolute;
    background: #0f172a;
    color: white;
    padding: 6px 10px;
    font-size: 0.72rem;
    border-radius: 4px;
    white-space: nowrap;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.2s ease;
}

.sim-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #0f172a;
}

/* Tooltip position flip rules */
.sim-tooltip.flipped {
    bottom: auto;
    top: calc(100% + 8px);
}
.sim-tooltip.flipped::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #0f172a;
}

/* ============================================================
 * [TOC-7] 7. 新增：图标、组件、导航特定样式 — CH.4/5/8
 * ============================================================ */

/* Icon sheet grid */
.icon-sheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 12px;
    background: var(--bg-app);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.icon-sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.icon-sheet-item:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.icon-sheet-item svg {
    width: 22px;
    height: 22px;
    color: var(--text);
    transition: var(--transition-smooth);
}

.icon-sheet-item:hover svg {
    color: var(--accent);
}

.icon-sheet-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 700;
}

/* Data visualization Sparkline */
.chart-sparkline-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 300px;
    box-shadow: var(--shadow-sm);
}

.chart-sparkline {
    width: 100%;
    height: 80px;
}

.sparkline-path {
    stroke: var(--accent);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: sparkline-draw 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.sparkline-area {
    fill: url(#sparkline-grad);
    opacity: 0.15;
    animation: sparkline-fade-in 1s ease 1s forwards;
    opacity: 0;
}

@keyframes sparkline-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes sparkline-fade-in {
    to { opacity: 0.15; }
}

/* Floating label input */
.floating-input-wrapper {
    position: relative;
    margin-top: 1.25rem;
    width: 100%;
    max-width: 300px;
}

.floating-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition-smooth);
}

.floating-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-muted);
}

.floating-label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: var(--transition-smooth);
    background: var(--bg-card);
    padding: 0 6px;
}

.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
    top: 0;
    font-size: 0.72rem;
    color: var(--accent);
    font-weight: 700;
}

/* Custom switch button */
.switch-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    font-size: 0.88rem;
    font-weight: 700;
}

.switch-input {
    display: none;
}

.switch-slider {
    width: 46px;
    height: 24px;
    background: var(--border);
    border-radius: 100px;
    position: relative;
    transition: var(--transition-smooth);
}

.switch-slider::after {
    content: "";
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    left: 3px;
    top: 3px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.switch-input:checked + .switch-slider {
    background: var(--success);
}

.switch-input:checked + .switch-slider::after {
    left: 25px;
}

/* Custom Dropdown Trigger Menu */
.dropdown-demo-wrapper {
    position: relative;
    display: inline-block;
}

.dropdown-menu-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    list-style: none;
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    z-index: 100;
    
    transform: translateY(6px);
    opacity: 0;
    transition: transform 0.2s, opacity 0.2s;
}

.dropdown-menu-list.show {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}

.dropdown-menu-item {
    padding: 8px 12px;
    font-size: 0.82rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.dropdown-menu-item:hover {
    background: var(--border-light);
    color: var(--accent);
}

/* Sliding active indicator tabs */
.sliding-tabs-wrapper {
    position: relative;
    display: flex;
    background: var(--border-light);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    width: fit-content;
}

.sliding-tab-btn {
    background: transparent;
    border: none;
    padding: 8px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.25s ease;
}

.sliding-tab-btn.active {
    color: var(--text);
}

.sliding-tab-indicator {
    position: absolute;
    height: calc(100% - 8px);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border-radius: calc(var(--radius-md) - 2px);
    z-index: 1;
    top: 4px;
    left: 4px;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), width 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Custom Breadcrumb styling */
.breadcrumb-demo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    flex-wrap: wrap;
}

.breadcrumb-item {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
}

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

.breadcrumb-item.active {
    color: var(--text);
    cursor: default;
    font-weight: 700;
}

.breadcrumb-separator {
    color: var(--border);
    user-select: none;
}

/* Design languages grid styles */
.design-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.design-lang-card {
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: var(--transition-smooth);
}

.design-lang-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.design-lang-card h4 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}

.design-lang-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.design-lang-features {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.design-lang-feature-tag {
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 20px;
    color: var(--text-muted);
}

/* ============================================================
 * [TOC-8] 8. 常规概念卡片排版与色彩列表 (Typography & Colors) — CH.2/3
 * ============================================================ */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.color-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    background: var(--bg-app);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.color-swatch {
    height: 60px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.05);
}

.color-info {
    display: flex;
    flex-direction: column;
}

.color-label {
    font-size: 0.85rem;
    font-weight: 700;
}

.color-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.text-scale-item {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.text-scale-item:last-child {
    border: none;
}

.scale-size {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    width: 60px;
    flex-shrink: 0;
}

.scale-sample {
    font-weight: 700;
    color: var(--text);
}

/* Footer */
.app-footer {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
    .sandbox-workspace {
        grid-template-columns: 1fr;
    }
    .main-content {
        padding: 1.5rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: var(--shadow-xl);
    }
    .main-content {
        margin-left: 0;
        padding: 10px 8px !important;
        padding-top: calc(12px + env(safe-area-inset-top)) !important;
    }
    .concept-card {
        padding: 14px 10px !important;
        border-radius: var(--radius-md) !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }
    .playground-demo-area {
        padding: 0 !important;
    }
    .playground-demo-area.is-browser .playground-canvas {
        padding: 12px 8px !important;
    }
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .dashboard-card {
        padding: 14px 12px !important;
    }
    .menu-toggle {
        display: flex;
    }
    .top-bar {
        padding-bottom: 1rem;
    }
    .top-bar-info h1 {
        font-size: 1.4rem;
    }
    .top-bar-info p {
        font-size: 0.85rem;
    }
    .sidebar-close-btn {
        display: block;
    }
    .section-title {
        flex-wrap: wrap;
        font-size: 1.25rem;
    }
    .layout-showcase.layout-symmetric {
        grid-template-columns: 1fr;
    }
    .layout-showcase.layout-asymmetric {
        grid-template-columns: 1fr;
    }
    .playground-demo-area.is-browser .layout-showcase.layout-symmetric {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .playground-demo-area.is-browser .layout-showcase.layout-asymmetric {
        grid-template-columns: 2fr 1fr !important;
    }
    .layout-fpattern-body {
        grid-template-columns: 1fr;
    }
    .playground-demo-area.is-browser .layout-fpattern-body {
        grid-template-columns: 2fr 1fr !important;
    }
    .lightbox-image-view {
        width: 100%;
        height: auto;
        aspect-ratio: 1.6;
    }
    .toast-container {
        top: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
    .toast-item {
        width: 100%;
    }
    .playground-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .playground-demo-area.is-phone {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 320 / 568;
        border-width: 8px !important;
        border-radius: 24px !important;
    }
    .playground-demo-area.is-phone .phone-status-bar {
        padding: 16px 12px 4px 12px;
        height: 30px;
    }
    .playground-demo-area.is-phone .phone-notch {
        width: 100px;
        height: 18px;
    }
}

/* ============================================================
 * [TOC-9] 9. 12 章节扩充样式 (New Additions for 12 Sections)
 * 含 CH.1 Layout / CH.2 Color / CH.3 Type / CH.4 Icons / CH.5 Components
 *    CH.7 Micro-interactions / CH.8 Navigation / CH.9 Feedback / CH.12 A11y
 * ============================================================ */

/* 1. Layout Demo */
.layout-demo-box {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
}

/* Phone Layout Demo (App Safe Areas, Bottom Tab Bar & FAB) */
.phone-layout-demo {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-card);
    box-sizing: border-box;
    z-index: 10;
}

.phone-demo-safearea-header {
    background: var(--border-light);
    border-bottom: 1px solid var(--border);
    padding: 24px 12px 10px 12px; /* Extra top padding to offset for Notch */
    font-size: 0.72rem;
    font-weight: 750;
    text-align: center;
    color: var(--text-muted);
}

.phone-layout-demo > div:nth-child(2) {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    box-sizing: border-box;
}

.phone-fab-demo {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: bold;
    font-size: 1.4rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    right: 16px;
    bottom: 72px; /* Positioned right above the bottom tab bar */
    z-index: 100;
}

.phone-fab-demo:active {
    transform: scale(0.95);
}

.phone-demo-tabbar {
    margin-top: auto; /* Push tabbar to the very bottom */
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 56px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    padding-bottom: 4px;
    box-sizing: border-box;
    width: 100%;
}

.tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--text-muted);
    cursor: pointer;
    flex-grow: 1;
    text-align: center;
    gap: 2px;
}

.tabbar-item span {
    font-size: 0.6rem !important; /* Ensure tiny text size */
}

.tabbar-item.active {
    color: var(--accent);
    font-weight: 750;
}
.layout-preview-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    min-height: 200px;
    transition: var(--transition-smooth);
}
.layout-showcase {
    display: grid;
    gap: 1rem;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Layout Modes */
.layout-showcase.layout-symmetric {
    grid-template-columns: repeat(3, 1fr);
}
.layout-showcase.layout-asymmetric {
    grid-template-columns: 2fr 1fr;
}
.layout-showcase.layout-fpattern,
.layout-showcase.layout-zpattern {
    display: block;
    width: 100%;
}
.layout-card {
    background: var(--border-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: var(--transition-smooth);
}
.layout-card-header {
    height: 14px;
    width: 40%;
    background: var(--text-muted);
    border-radius: 4px;
    opacity: 0.3;
}
.layout-card-line {
    height: 8px;
    background: var(--text-muted);
    border-radius: 3px;
    opacity: 0.15;
}
.layout-card-line.short {
    width: 70%;
}
.layout-fpattern-header {
    height: 40px;
    background: var(--border-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.layout-fpattern-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
}

/* 2. Color Generator */
.color-generator-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .color-generator-container {
        grid-template-columns: 1fr;
    }
}
.color-generator-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--border-light);
    padding: 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.color-slider-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.color-slider-label {
    font-size: 0.82rem;
    font-weight: 750;
    display: flex;
    justify-content: space-between;
}
.color-slider-group input[type="range"] {
    accent-color: var(--accent);
    cursor: pointer;
    width: 100%;
}
.color-generator-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}
.color-preview-card {
    padding: 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: var(--transition-smooth);
}
.color-preview-text {
    font-size: 0.88rem;
    line-height: 1.5;
}
.color-contrast-badge {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.color-contrast-badge.pass-aaa {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}
.color-contrast-badge.pass-aa {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info);
}
.color-contrast-badge.fail {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

/* 3. Typography Comparison */
.typo-comparison-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .typo-comparison-box {
        grid-template-columns: 1fr;
    }
}
.typo-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
}
.typo-card.good-typography {
    font-family: var(--font-sans);
}
.typo-card.good-typography h4 {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 8px;
}
.typo-card.good-typography p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-muted);
}
.typo-card.bad-typography {
    font-family: "Courier New", Courier, monospace, serif;
}
.typo-card.bad-typography h4 {
    font-size: 1rem;
    font-weight: 400;
    line-height: 0.9;
    color: #000;
    margin-bottom: 2px;
}
.typo-card.bad-typography p {
    font-size: 0.8rem;
    line-height: 1.0;
    letter-spacing: -0.8px;
    color: #555;
}

/* 4. Icons & Data Graph */
.svg-icon-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.svg-icon-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 90px;
    transition: var(--transition-smooth);
}
.svg-icon-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.svg-icon-card svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
}
.svg-icon-card span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}
.sparkline-demo-box {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .sparkline-demo-box {
        grid-template-columns: 1fr;
    }
}
.sparkline-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--border-light);
    padding: 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.sparkline-controls label {
    font-size: 0.82rem;
    font-weight: 750;
}
.sparkline-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    outline: none;
}
.sparkline-input:focus {
    border-color: var(--accent);
}
.sparkline-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}
.sparkline-svg {
    overflow: visible;
}

/* 5. Atomic Components */
.components-demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .components-demo-grid {
        grid-template-columns: 1fr;
    }
}
.component-demo-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.component-demo-item h4 {
    font-size: 0.85rem;
    font-weight: 750;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Floating label input */
.floating-input-group {
    position: relative;
    margin-top: 10px;
    width: 100%;
}
.floating-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition-smooth);
}
.floating-label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
    transition: var(--transition-smooth);
    background: var(--bg-card);
    padding: 0 4px;
}
.floating-input:focus, .floating-input:not(:placeholder-shown) {
    border-color: var(--accent);
}
.floating-input:focus + .floating-label, 
.floating-input:not(:placeholder-shown) + .floating-label {
    top: 0;
    font-size: 0.72rem;
    color: var(--accent);
    font-weight: 700;
}
/* Loading Spinner inside Button */
.btn-loading {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-loading .btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
    display: inline-block;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}
/* Dropdown select */
.custom-dropdown {
    position: relative;
    width: 100%;
}
.dropdown-trigger {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-smooth);
}
.dropdown-trigger:hover {
    border-color: var(--text-muted);
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    margin-top: 4px;
    display: none;
    z-index: 50;
    overflow: hidden;
    list-style: none;
    padding: 0;
}
.dropdown-menu.show {
    display: block;
}
.dropdown-item {
    padding: 10px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text);
    transition: var(--transition-smooth);
}
.dropdown-item:hover {
    background: var(--border-light);
    color: var(--accent);
}
/* Custom Switch */
.switch-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    width: fit-content;
}
.switch-input {
    display: none;
}
.switch-slider {
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: 20px;
    position: relative;
    transition: var(--transition-smooth);
}
.switch-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: var(--transition-smooth);
}
.switch-input:checked + .switch-slider {
    background: var(--success);
}
.switch-input:checked + .switch-slider::before {
    transform: translateX(20px);
}
.switch-label {
    font-size: 0.88rem;
    font-weight: 600;
}

/* 7. Micro-interactions hover comparison */
.hover-demo-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .hover-demo-box {
        grid-template-columns: 1fr;
    }
}
.hover-compare-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
}
.hover-compare-card h4 {
    font-size: 1rem;
    font-weight: 750;
}
.hover-compare-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
}
/* Card 1: premium ease-in-out transition */
.hover-compare-card.premium-ease {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s;
}
.hover-compare-card.premium-ease:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent);
}
/* Card 2: harsh immediate change */
.hover-compare-card.harsh-jump:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent);
}

/* 8. Navigation */
.nav-demo-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.breadcrumbs-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.breadcrumbs-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.breadcrumbs-link:hover {
    text-decoration: underline;
}
.sliding-tabs-nav {
    position: relative;
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    padding: 0 8px;
}
.sliding-tab-item {
    background: transparent;
    border: none;
    padding: 12px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.3s;
}
.sliding-tab-item.active {
    color: var(--accent);
}
.tab-underline-indicator {
    position: absolute;
    bottom: -1px;
    height: 2.5px;
    background: var(--accent);
    border-radius: 2px;
    transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 9. Feedback & Empty State */
.empty-state-card {
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.empty-state-icon {
    font-size: 3rem;
    opacity: 0.7;
    margin-bottom: 8px;
}
.empty-state-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
}
.empty-state-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    max-width: 320px;
    line-height: 1.5;
}

/* 12. Accessibility */
.accessibility-demo-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.accessibility-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--border-light);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.focus-buttons-container {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}
/* Focus rings modes */
.focus-test-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-app);
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.2s;
}
.focus-mode-hidden:focus {
    outline: none; /* BAD A11Y */
}
.focus-mode-default:focus {
    /* Browser default outline */
}
.focus-mode-custom:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 6px var(--accent);
    border-color: var(--accent);
}
/* ARIA highlights */
.aria-highlighted [aria-label]::after {
    content: "aria-label: \"" attr(aria-label) "\"";
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: #10b981;
    color: white;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    font-weight: bold;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aria-highlighted [aria-label] {
    position: relative;
    outline: 2px dashed #10b981 !important;
}

/* ============================================================
 * [TOC-10] 10. 查漏补缺：学习路径、3D 翻转卡片与项目模板样式 — CH.11/26
 * ============================================================ */

/* 学习路径切换器 */
.path-selector-wrapper {
    padding: 0 4px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 12px;
}
.path-selector-label {
    font-size: 0.68rem;
    font-weight: 750;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.path-btn-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: var(--border-light);
    padding: 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.path-btn {
    background: transparent;
    border: none;
    padding: 6px 2px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
}
.path-btn:hover {
    color: var(--text);
}
.path-btn.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
/* 难度与隐藏 */
.difficulty-stars {
    font-size: 0.72rem;
    color: var(--warning);
    margin-left: 8px;
    font-weight: normal;
}
.nav-item.path-hidden, .section-anchor.path-hidden {
    display: none !important;
}
.nav-item.path-dimmed, .section-anchor.path-dimmed {
    opacity: 0.25;
    filter: grayscale(0.6) blur(0.5px);
    pointer-events: none;
}

/* 3D 翻转 Playground */
.flip-card-container {
    perspective: 1000px;
    width: 280px;
    height: 180px;
    cursor: pointer;
    margin: 15px auto;
}
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.flip-card-container:hover .flip-card-inner,
.flip-card-container.flipped .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
}
.flip-card-front {
    background: linear-gradient(135deg, var(--bg-card), var(--border-light));
    color: var(--text);
}
.flip-card-back {
    background: var(--accent-muted);
    color: var(--accent-text);
    transform: rotateY(180deg);
}

/* 13. 实战项目模板 */
.projects-showcase-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
@media (max-width: 768px) {
    .projects-showcase-container {
        grid-template-columns: 1fr;
    }
}
.project-preview-frame {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    background: var(--bg-app);
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Micro-Mocks */
.mini-resume {
    background: var(--bg-card);
    padding: 1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    font-size: 0.72rem;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mini-resume-header {
    border-bottom: 2px solid var(--accent);
    padding-bottom: 4px;
    font-weight: bold;
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
}
.mini-portfolio {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.mini-portfolio-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.mini-blog {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mini-blog-post {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    box-shadow: var(--shadow-sm);
}
.mini-blog-title {
    font-weight: bold;
    font-size: 0.78rem;
    color: var(--accent);
}

/* Linear & Radial Gradients preview */
.gradient-box-preview {
    width: 100%;
    height: 100px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    font-size: 0.85rem;
    transition: var(--transition-smooth);
}

/* Platform indicators and Difficulty stars */
.platform-indicator-tag {
    font-size: 0.68rem;
    font-weight: 750;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-left: 6px;
}
.platform-indicator-tag.web {
    background: var(--accent-muted);
    color: var(--accent-text);
    border: 1px solid rgba(79, 70, 229, 0.15);
}
.platform-indicator-tag.app {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.difficulty-stars {
    font-size: 0.72rem;
    color: var(--warning); /* warm orange/gold star color */
    opacity: 0.85;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.5px;
}

/* ============================================================
 * [TOC-11] 11. 双轨视角切换与变色龙模拟器样式
 * track-btn / is-browser / is-phone 形变规则
 * ============================================================ */

/* Track Selector Styles */
.track-selector-wrapper {
    padding: 0 4px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 12px;
}
.track-selector-label {
    font-size: 0.68rem;
    font-weight: 750;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.track-btn-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    background: var(--border-light);
    padding: 2px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.track-btn {
    background: transparent;
    border: none;
    padding: 8px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.track-btn:hover {
    color: var(--text);
}
.track-btn.active {
    background: var(--bg-card);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

/* Platform track visibility bindings */
body.track-web-mode .app-layout-only {
    display: none !important;
}
body.track-app-mode .web-layout-only {
    display: none !important;
}
.track-badge {
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--accent-muted);
    color: var(--accent-text);
    margin-left: 10px;
    font-weight: 800;
    vertical-align: middle;
}

/* Mockup Core morph rules */
.playground-demo-area {
    margin: 0 auto;
    position: relative;
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15), 
                height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15), 
                padding 0.3s ease, 
                border 0.3s ease, 
                border-radius 0.3s ease, 
                box-shadow 0.3s ease;
}

/* Browser Mockup State */
.playground-demo-area.is-browser {
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    padding: 0 !important;
}
.playground-demo-area.is-browser .browser-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--border-light);
    border-bottom: 1px solid var(--border);
}
.playground-demo-area.is-browser .browser-header .mockup-dots {
    display: flex;
    gap: 6px;
}
.playground-demo-area.is-browser .browser-header .mockup-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.playground-demo-area.is-browser .browser-header .mockup-dots .dot-red { background: #ef4444; }
.playground-demo-area.is-browser .browser-header .mockup-dots .dot-yellow { background: #f59e0b; }
.playground-demo-area.is-browser .browser-header .mockup-dots .dot-green { background: #10b981; }

.playground-demo-area.is-browser .browser-header .mockup-address {
    flex-grow: 1;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 0.68rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    user-select: none;
}
.playground-demo-area.is-browser .phone-header,
.playground-demo-area.is-browser .phone-home-bar {
    display: none !important;
}
.playground-demo-area.is-browser .playground-canvas {
    padding: 1.5rem;
    background: var(--bg-card);
    overflow: visible;
}

/* Phone Mockup State */
.playground-demo-area.is-phone {
    width: 320px;
    height: 568px;
    border: 10px solid #1e293b;
    border-radius: 40px;
    background: var(--bg-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    position: relative;
    padding: 0 !important;
}
body.theme-dark .playground-demo-area.is-phone {
    border-color: #334155;
}
.playground-demo-area.is-phone .browser-header {
    display: none !important;
}
.playground-demo-area.is-phone .phone-header {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    position: relative;
    z-index: 500;
}
.playground-demo-area.is-phone .phone-notch {
    width: 140px;
    height: 24px;
    background: #1e293b;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
body.theme-dark .playground-demo-area.is-phone .phone-notch {
    background: #334155;
}
.playground-demo-area.is-phone .phone-notch .notch-cam {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0f172a;
    display: inline-block;
}
.playground-demo-area.is-phone .phone-status-bar {
    height: 38px;
    padding: 24px 20px 4px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text);
}
.playground-demo-area.is-phone .phone-status-bar .status-icons {
    display: flex;
    gap: 4px;
}
.playground-demo-area.is-phone .playground-canvas {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 6px;
    position: relative;
}

/* Scoped spacing overrides inside phone simulators to prevent squeezing */
.playground-demo-area.is-phone .color-generator-container,
.playground-demo-area.is-phone .typo-comparison-box,
.playground-demo-area.is-phone .hover-demo-box,
.playground-demo-area.is-phone .components-demo-grid,
.playground-demo-area.is-phone .sparkline-demo-box,
.playground-demo-area.is-phone .projects-showcase-container {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}
.playground-demo-area.is-phone .layout-card {
    padding: 8px !important;
    min-height: auto !important;
}
.playground-demo-area.is-phone .btn {
    padding: 6px 10px !important;
    font-size: 0.76rem !important;
}
.playground-demo-area.is-phone .empty-state-card {
    padding: 1.25rem 0.75rem !important;
}
.playground-demo-area.is-phone .component-demo-item {
    padding: 8px 10px !important;
}
.playground-demo-area.is-phone .typo-card {
    padding: 10px !important;
}
.playground-demo-area.is-phone .sparkline-controls {
    padding: 10px !important;
}
.playground-demo-area.is-phone .sparkline-preview {
    padding: 10px !important;
    min-height: auto !important;
}
.playground-demo-area.is-phone .color-generator-controls,
.playground-demo-area.is-phone .color-generator-preview,
.playground-demo-area.is-phone .color-preview-card {
    padding: 10px !important;
    gap: 8px !important;
}
.playground-demo-area.is-phone .secure-lock-card {
    padding: 16px 10px !important;
}
.playground-demo-area.is-phone .project-preview-frame {
    padding: 10px !important;
}
.playground-demo-area.is-phone .perm-title {
    padding: 12px 12px 4px 12px !important;
}
.playground-demo-area.is-phone .perm-desc {
    padding: 0 12px 12px 12px !important;
}

/* Scale typography inside phone simulator to match phone proportions */
.playground-demo-area.is-phone h4 {
    font-size: 1.05rem !important;
}
.playground-demo-area.is-phone p,
.playground-demo-area.is-phone span,
.playground-demo-area.is-phone label,
.playground-demo-area.is-phone input {
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
}
.playground-demo-area.is-phone .playground-canvas::-webkit-scrollbar {
    width: 2px;
}
.playground-demo-area.is-phone .phone-home-bar {
    height: 18px;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 6px;
    z-index: 500;
}
.playground-demo-area.is-phone .phone-home-bar::after {
    content: "";
    width: 110px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
    display: block;
}
body.theme-dark .playground-demo-area.is-phone .phone-home-bar::after {
    background: #475569;
}

/* ============================================================
 * [TOC-12] 12. 交互式 Demo 细节样式 — CH.13+
 * ============================================================ */

/* Chapter 5 Actionsheet Mockup */
.actionsheet-mockup-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
}
.actionsheet-mockup-mask.show {
    opacity: 1;
    pointer-events: auto;
}
.actionsheet-mockup-panel {
    width: 100%;
    background: var(--bg-card);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.actionsheet-mockup-panel.show {
    transform: translateY(0);
}
.actionsheet-header {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.actionsheet-item {
    padding: 14px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition-smooth);
}
.actionsheet-item:hover {
    background: var(--border-light);
}
.actionsheet-item.dest {
    color: var(--danger);
}
.actionsheet-cancel {
    margin-top: 8px;
    padding: 14px;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    background: var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
}

/* Chapter 13 Gesture Swipe-to-Delete */
.gesture-demo-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.swipe-list-item-wrapper {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-card);
    height: 64px;
    box-shadow: var(--shadow-sm);
}
.swipe-list-item-action {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background: var(--danger);
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    cursor: pointer;
}
.swipe-list-item-content {
    position: relative;
    z-index: 2;
    background: var(--bg-card);
    height: 100%;
    width: 100%;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.2s ease-out;
}
.item-icon {
    font-size: 1.3rem;
}
.item-info strong {
    font-size: 0.72rem;
    font-weight: 700;
    display: block;
}


/* Chapter 14 Responsive Presets Container */
.responsive-view-container {
    border-radius: var(--radius-md);
}
.responsive-demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}
.responsive-grid-card {
    background: var(--border-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 24px 10px;
    text-align: center;
    font-weight: 700;
    font-size: 0.78rem;
}

/* Chapter 15 Dark Theme Sandboxing local */
.theme-sandbox-preview-card.theme-dark-local {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #1e293b !important;
}
.theme-sandbox-preview-card.theme-dark-local .badge {
    background: #1e2b48 !important;
    color: #818cf8 !important;
    border-color: #334155 !important;
}
.theme-sandbox-preview-card.theme-sepia-local {
    background: #f4ede0 !important;
    color: #3d403a !important;
    border-color: #e9e2d5 !important;
}
.theme-sandbox-preview-card.theme-sepia-local .badge {
    background: #e5dbca !important;
    color: #2d6a4f !important;
    border-color: rgba(45, 106, 79, 0.1) !important;
}

/* Chapter 16 Gutenberg quadrants weight visualizer */
.gutenberg-card {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 110px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    overflow: hidden;
}
.gutenberg-quadrant {
    padding: 16px;
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.quad-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 0.58rem;
    font-weight: 800;
    background: var(--border-light);
    padding: 1px 4px;
    border-radius: 2px;
    color: var(--text-muted);
}
.scanline-overlay-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.scanline-overlay-svg.visible {
    opacity: 1;
}

/* Chapter 17 App Notification push notch slider */
.notch-push-banner {
    position: absolute;
    left: 10px;
    right: 10px;
    top: -120px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 2000;
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    color: #0f172a;
}
body.theme-dark .notch-push-banner {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(255,255,255,0.06);
    color: #f8fafc;
}
.notch-push-banner.active {
    top: 48px;
}
.push-banner-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    font-weight: 800;
    opacity: 0.7;
    margin-bottom: 4px;
}
.push-banner-body {
    font-size: 0.72rem;
    line-height: 1.4;
}
.push-dismiss-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,0.1);
    margin: 8px auto 0 auto;
}
body.theme-dark .push-dismiss-handle {
    background: rgba(255,255,255,0.1);
}

/* Chapter 18 Auto Suggest Box */
.password-input-wrapper {
    position: relative;
}
.pwd-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
}
.suggestions-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-top: 4px;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    list-style: none;
    display: none;
    padding: 4px 0;
}
.suggestions-item {
    padding: 8px 12px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}
.suggestions-item:hover {
    background: var(--border-light);
    color: var(--accent);
}

/* Chapter 19 Pull-to-refresh spinner scroll box */
.pull-refresh-container {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--bg-card);
}
.pull-spinner-area {
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    opacity: 0.4;
}
.pull-spinner-area.triggerable {
    opacity: 1;
}
.pull-spinner-element {
    font-size: 1.3rem;
    transition: transform 0.1s linear;
}
.pull-spinner-area.refreshing .pull-spinner-element {
    animation: spin 1s infinite linear;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Chapter 20 Biometrics Fingerprint overlay scanner */
.secure-lock-card {
    background: var(--bg-card);
    border: 1px dashed var(--border);
    padding: 24px 16px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.fingerprint-scan-overlay {
    position: absolute;
    inset: 0;
    background: var(--bg-card);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.fingerprint-scan-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.fingerprint-scanner-box {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--accent-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid var(--accent);
    cursor: pointer;
}
.finger-vector-svg {
    width: 54px;
    height: 54px;
    transition: transform 0.1s;
}
.scanner-laser-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    display: none;
}
.scanner-laser-line.active {
    display: block;
    animation: scanPulse 1.8s infinite ease-in-out;
}
@keyframes scanPulse {
    0% { top: 15%; }
    50% { top: 85%; }
    100% { top: 15%; }
}

/* iOS Dialog permission mock */
.camera-permission-dialog-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.camera-permission-dialog-mask.show {
    opacity: 1;
    pointer-events: auto;
}
.camera-permission-dialog {
    width: 82%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    backdrop-filter: blur(12px);
    color: #000;
}
.perm-title {
    padding: 16px 16px 6px 16px;
    font-size: 0.78rem;
    font-weight: 800;
}
.perm-desc {
    padding: 0 16px 16px 16px;
    font-size: 0.65rem;
    opacity: 0.75;
    line-height: 1.4;
    border-bottom: 0.5px solid #d1d5db;
}
.perm-btn-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.perm-btn {
    border: none;
    background: transparent;
    padding: 12px;
    font-size: 0.78rem;
    cursor: pointer;
}
.perm-btn.cancel {
    border-right: 0.5px solid #d1d5db;
    color: #007aff;
}
.perm-btn.allow {
    font-weight: 800;
    color: #007aff;
}

/* Chapter 21 Voice waves microphone wave simulation */
.voice-status-panel {
    text-align: center;
}
.voice-waves-container {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sine-wave-svg {
    width: 70%;
    height: 100%;
}
.voice-record-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    border: none;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
    transition: var(--transition-smooth);
}
.voice-record-btn.recording {
    background: var(--danger);
    transform: scale(0.92);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
}

/* Chapter 22 Stack View Back Edge swipe zone */
.phone-stack-bottom-view {
    position: absolute;
    inset: 0;
    background: var(--bg-card);
    padding: 16px;
    z-index: 1;
    opacity: 0.6;
    filter: blur(3px);
}
.phone-stack-top-view {
    position: absolute;
    inset: 0;
    background: var(--bg-card);
    z-index: 5;
    box-shadow: -6px 0 18px rgba(0,0,0,0.06);
    border-left: 1px solid var(--border);
    transform: translateX(0);
}
.phone-edge-swipe-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 28px;
    z-index: 100;
    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
    opacity: 0.08;
    cursor: ew-resize;
    animation: pulseBorder 2s infinite ease-in-out;
}
@keyframes pulseBorder {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.15; }
}

/* Chapter 23 Core Web Vitals dials */
.perf-simulator-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.perf-dials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.perf-dial-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--border-light);
    padding: 10px 4px;
    text-align: center;
}
.dial-title {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text-muted);
    display: block;
}
.dial-score-val {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 2px 0;
    font-family: var(--font-mono);
}
.dial-score-val.good { color: var(--success); }
.dial-score-val.ok { color: var(--warning); }
.dial-score-val.bad { color: var(--danger); }
.dial-indicator-text {
    font-size: 0.52rem;
    opacity: 0.7;
    display: block;
}
.perf-visual-loader-box {
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    background: var(--bg-card);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chapter 24 Cognitive Psychology card */
.cognitive-bias-card {
    width: 250px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    padding: 16px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bias-hot-badge {
    background: var(--danger);
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
    align-self: flex-start;
}
.bias-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.cross-price {
    font-size: 0.72rem;
    text-decoration: line-through;
    color: var(--text-muted);
}
.real-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--danger);
}
.scarcity-countdown {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--border-light);
    padding: 4px;
    border-radius: 4px;
    text-align: center;
}
.scarcity-countdown span {
    background: #0f172a;
    color: white;
    padding: 1px 3px;
    border-radius: 2px;
    margin: 0 2px;
    font-family: var(--font-mono);
}
.social-proof-badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: #2b7a78;
    background: #def2f1;
    padding: 4px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
}
body.theme-dark .social-proof-badge {
    background: #112d32;
    color: #4fe3c3;
}

/* Chapter 25 RTL Arabic mirror */
.rtl-convert-preview-box {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), direction 0.3s;
}
.rtl-convert-preview-box.rtl-mode-active {
    direction: rtl !important;
}
.rtl-convert-preview-box.rtl-mode-active .rtl-header-row,
.rtl-convert-preview-box.rtl-mode-active #rtl-action-buttons {
    flex-direction: row-reverse !important;
}
.rtl-convert-preview-box.rtl-mode-active .rtl-body-text {
    text-align: right !important;
}

/* Chapter 24 Cognitive Psychology Expanded Experiments */
.fitts-experiment-wrapper, .hicks-experiment-wrapper, .miller-experiment-wrapper {
    width: 100%;
    border-top: 1px dashed var(--border);
    padding-top: 12px;
    margin-top: 12px;
}
.fitts-target-area {
    width: 100%;
    height: 140px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-app);
    position: relative;
    overflow: hidden;
    margin: 8px 0;
    cursor: crosshair;
}
.fitts-target-item {
    position: absolute;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.1s ease;
    user-select: none;
}
.fitts-target-item:active {
    transform: scale(0.9);
}
.hicks-experiment-box {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-app);
    padding: 8px;
    margin: 8px 0;
}
.hicks-item-btn, .hicks-step1-btn, .hicks-step2-btn {
    animation: fadeIn 0.2s ease-out;
}
.miller-text-container {
    padding: 16px;
    border-radius: var(--radius-md);
    background: var(--bg-app);
    border: 1px solid var(--border);
    text-align: center;
    margin: 8px 0;
}
.experiment-dashboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    margin-bottom: 6px;
}
.experiment-result {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text);
    padding: 6px 10px;
    background: var(--accent-muted);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    margin-top: 6px;
}

/* Dashboard Grid Styles */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 15px;
}
.dashboard-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}
.dashboard-card:hover::before {
    transform: scaleY(1);
}
.dashboard-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}
.dashboard-card:focus-visible::before {
    transform: scaleY(1);
}
.dashboard-card-icon {
    font-size: 1.8rem;
    line-height: 1;
}
.dashboard-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    color: var(--text);
}
.dashboard-card p {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}
.dashboard-card .difficulty-stars {
    font-size: 0.7rem;
    color: var(--warning);
    margin: 0;
    font-weight: normal;
}
.dashboard-card.path-hidden {
    display: none !important;
}

/* ============================================================
 * [TOC-D] 五学域分组与学习路径 (Domain Groups & Learning Paths)
 * ============================================================ */
.domain-group {
    margin-top: 32px;
}
.domain-group.path-hidden {
    display: none;
}
.domain-header {
    font-size: var(--text-h3);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}
.domain-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
.domain-dot-visual { background: #4f46e5; }
.domain-dot-interaction { background: #8b5cf6; }
.domain-dot-platform { background: #10b981; }
.domain-dot-cognitive { background: #f59e0b; }
.domain-dot-engineering { background: #0ea5e9; }
.domain-count {
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--text-muted);
    background: var(--border-light);
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: auto;
}

/* 学习路径推荐区 */
.learning-paths {
    margin: 24px 0 8px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.paths-title {
    font-size: var(--text-h4);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 14px;
}
.paths-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.path-card {
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: var(--transition-smooth);
}
.path-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.path-card.active {
    border-color: var(--accent);
    background: var(--accent-muted);
    box-shadow: 0 0 0 2px var(--accent);
}
.path-card-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.path-card h4 {
    font-size: var(--text-body);
    font-weight: 800;
    color: var(--text);
    margin: 0;
}
.path-card-seq {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    color: var(--accent);
    background: var(--accent-muted);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    margin: 0;
    word-break: break-all;
    line-height: 1.5;
}
.path-card-tag {
    font-size: var(--text-nano);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
@media (max-width: 640px) {
    .domain-header { font-size: var(--text-h4); }
    .learning-paths { padding: 14px; }
}

/* ============================================================
 * [TOC-D] 主页学习进度条 (Home Learning Progress)
 * localStorage 驱动，呼应第 30 章引导主题
 * ============================================================ */
.home-progress-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin: 0 0 24px;
    box-shadow: var(--shadow-sm);
}
.home-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.home-progress-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.home-progress-icon { font-size: 1.4rem; line-height: 1; }
.home-progress-title h3 {
    font-size: var(--text-h3);
    font-weight: 800;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}
.home-progress-stats {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.home-progress-count {
    font-family: var(--font-mono);
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--text-muted);
}
.home-progress-pct {
    font-size: var(--text-h3);
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.02em;
}
.home-progress-bar-bg {
    width: 100%;
    height: 14px;
    background: var(--border-light);
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.home-progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--info));
    border-radius: 7px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.home-progress-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: home-progress-shimmer 2.2s linear infinite;
}
@keyframes home-progress-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .home-progress-bar-fill::after { animation: none; }
    .home-progress-bar-fill { transition: width 0.01s; }
}
.home-progress-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
.home-progress-hint {
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.home-progress-reset {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--text-caption);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
}
.home-progress-reset:hover {
    border-color: var(--danger);
    color: var(--danger);
}
.home-progress-reset:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.home-progress-domains {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}
.home-progress-domain {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.home-progress-domain-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--text);
}
.home-progress-domain-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.home-progress-domain-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--text-nano);
    color: var(--text-muted);
}
.home-progress-domain-bar {
    height: 5px;
    background: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
}
.home-progress-domain-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 640px) {
    .home-progress-panel { padding: 14px; }
    .home-progress-title h3 { font-size: var(--text-h4); }
    .home-progress-pct { font-size: var(--text-h4); }
    .home-progress-domains { grid-template-columns: 1fr 1fr; gap: 8px; }
}




/* ============================================================ */
/* 新增：进度条, 并排对比表, 横屏模拟器 & 12个新沙盒 UI 样式 */
/* ============================================================ */

/* 📚 进度条 */
.progress-container-wrapper {
    background: var(--border-light);
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-bottom: 12px;
}
.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.progress-bar-bg {
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
#progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--info));
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* 轨道与过滤切换器 */
.track-selector-wrapper, .path-selector-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.track-selector-label, .path-selector-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}
.track-btn-group, .path-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.path-btn-group {
    grid-template-columns: repeat(3, 1fr);
}
.track-btn, .path-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    text-align: center;
    transition: var(--transition-smooth);
}
.track-btn:hover, .path-btn:hover {
    color: var(--text);
    border-color: var(--text-muted);
}
.track-btn.active, .path-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* ⚖️ 并排对比表 */
.spec-comparison-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.spec-table-col {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}
.spec-table-col h4 {
    font-size: 0.9rem;
    font-weight: 800;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.spec-table-col.web-spec {
    border-top: 4px solid var(--accent);
}
.spec-table-col.app-spec {
    border-top: 4px solid var(--success);
}
.spec-table-col ul {
    list-style: none;
    padding-left: 0;
}
.spec-table-col li {
    font-size: 0.78rem;
    line-height: 1.6;
    margin-bottom: 6px;
    color: var(--text-muted);
}
.spec-table-col li strong {
    color: var(--text);
}
@media (max-width: 768px) {
    .spec-comparison-table {
        grid-template-columns: 1fr;
    }
}

/* 📱 模拟器横竖屏旋转控制 */
.device-rotate-toggle {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 1000;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    color: white;
    font-size: 1.1rem;
    transition: var(--transition-smooth);
}
.device-rotate-toggle:hover {
    transform: scale(1.1) rotate(90deg);
    background: var(--accent);
}
.playground-demo-area.is-browser .device-rotate-toggle {
    display: none !important;
}
.playground-demo-area.is-phone.is-landscape {
    width: 568px !important;
    height: 320px !important;
    border-radius: 32px;
}
.playground-demo-area.is-phone.is-landscape .phone-notch {
    display: none !important;
}
.playground-demo-area.is-phone.is-landscape .phone-header {
    height: 20px;
}
.playground-demo-area.is-phone.is-landscape .phone-status-bar {
    padding: 2px 16px;
}
.playground-demo-area.is-phone.is-landscape .playground-canvas {
    padding: 8px !important;
}

/* 🔍 Ch27: 搜索与筛选 styles */
.search-filter-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.search-input-box {
    position: relative;
    width: 100%;
}
.search-input-box input {
    width: 100%;
    padding: 10px 32px 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.85rem;
}
#sf-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 1.1rem;
    color: var(--text-muted);
    cursor: pointer;
}
.autocomplete-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    max-height: 120px;
    overflow-y: auto;
    z-index: 100;
}
.autocomplete-item {
    padding: 8px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text);
}
.autocomplete-item:hover {
    background: var(--border-light);
}
.search-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.history-title, .filter-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}
.history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.history-tag {
    background: var(--border-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 0.68rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
}
.filter-chips {
    display: flex;
    gap: 6px;
}
.filter-chip {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.72rem;
    cursor: pointer;
    color: var(--text-muted);
}
.filter-chip.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.search-results {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
}
.result-item {
    padding: 8px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-size: 0.75rem;
    color: var(--text);
}

/* 🚀 Ch28: 新手引导 styles */
.onboarding-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 900;
    border-radius: var(--radius-lg);
}
.onboarding-step-card {
    position: absolute;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 12px;
    width: 200px;
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--border);
}
.onboarding-step-card h4 {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text);
}
.onboarding-step-card p {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.ob-step-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}
#ob-step-progress {
    font-size: 0.65rem;
    color: var(--text-muted);
}
.ob-card-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}
.ob-card-arrow.arrow-top {
    top: -8px;
    left: 20px;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent var(--bg-card) transparent;
}
.ob-card-arrow.arrow-bottom {
    bottom: -8px;
    left: 20px;
    border-width: 8px 8px 0 8px;
    border-color: var(--bg-card) transparent transparent transparent;
}
.ob-highlight {
    position: relative;
    z-index: 950 !important;
    box-shadow: 0 0 0 4px var(--accent);
    pointer-events: none;
}

/* 🪟 Ch29: 弹出层与模态 styles */
.modal-mask, .drawer-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-box {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 16px;
    width: 80%;
    max-width: 280px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
}
.modal-box h3, .drawer-panel h3 {
    font-size: 0.9rem;
    font-weight: 800;
}
.modal-box p, .drawer-panel p {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 6px;
}
.drawer-mask {
    align-items: flex-end;
}
.drawer-panel {
    background: var(--bg-card);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    padding: 16px;
    width: 100%;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.15);
    border-top: 1px solid var(--border);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-panel.show {
    transform: translateY(0);
}
.drawer-item {
    padding: 10px;
    text-align: center;
    background: var(--border-light);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 600;
}
.drawer-item.cancel {
    background: var(--bg-app);
    color: var(--danger);
}
.popover-box {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    width: 180px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.popover-box h4 {
    font-size: 0.75rem;
    font-weight: 800;
}
.popover-box p {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* 📊 Ch30: 数据可视化 SVG styles */
.chart-tooltip {
    position: absolute;
    background: rgba(15, 23, 42, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.2s ease;
}
body.theme-dark .chart-tooltip {
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
}
.chart-bar {
    fill: var(--accent);
    cursor: pointer;
    transition: fill 0.2s, y 0.3s, height 0.3s;
}
.chart-bar:hover {
    fill: var(--accent-hover);
}
.chart-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: d 0.3s;
}
.chart-area {
    fill: var(--accent-muted);
    opacity: 0.3;
    transition: d 0.3s;
}
.chart-dot {
    fill: var(--bg-card);
    stroke: var(--accent);
    stroke-width: 2;
    cursor: pointer;
    transition: cx 0.3s, cy 0.3s;
}
.chart-dot:hover {
    r: 6;
    fill: var(--accent);
}
.chart-slice {
    cursor: pointer;
    transition: transform 0.2s;
}
.chart-slice:hover {
    transform: scale(1.05);
    transform-origin: 120px 75px;
}

/* 🖐️ Ch33: 手势与震动模拟 styles */
.haptic-vibration-indicator {
    margin-top: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-muted);
    padding: 4px 10px;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.2s;
}
.haptic-vibration-indicator.active {
    opacity: 1;
}

/* 📐 Ch34: 断点尺寸预览 styles */
.bp-grid-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
}
.bp-grid-item {
    background: var(--accent-muted);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 12px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-text);
}
.bp-mobile-width {
    width: 150px !important;
}
.bp-tablet-width {
    width: 220px !important;
}
.bp-tablet-width .bp-grid-content {
    grid-template-columns: 1fr 1fr;
}
.bp-desktop-width {
    width: 100% !important;
}
.bp-desktop-width .bp-grid-content {
    grid-template-columns: repeat(4, 1fr);
}

/* 🗂️ Ch35: 信息架构卡片拖拽 styles */
.ia-category-bin {
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 12px 6px;
    width: 45%;
    min-height: 80px;
    background: var(--bg-card);
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.ia-draggable-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 0.68rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    color: var(--text);
    user-select: none;
    transition: opacity 0.2s;
}
.ia-draggable-card:active {
    opacity: 0.5;
}
.ia-draggable-card.placed {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

/* 🧠 Ch24: 审美-可用性效应与峰终定律样式 */
.calculator-ugly {
    background: #cccccc;
    border: 3px solid #333333;
    padding: 10px;
    border-radius: 0px;
    font-family: serif;
    color: black;
}
.calculator-ugly button {
    background: #dddddd;
    border: 2px solid #555555;
    padding: 8px;
    font-family: serif;
    font-size: 0.8rem;
    color: black;
    border-radius: 0;
}
.calculator-beautiful {
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 10px 30px var(--shadow-glass);
}
.calculator-beautiful button {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 10px;
    font-weight: 600;
    color: var(--text);
    transition: var(--transition-smooth);
}
.calculator-beautiful button:hover {
    background: var(--accent);
    color: white;
}
.peak-end-item {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-size: 0.72rem;
    display: flex;
    justify-content: space-between;
}
.peak-end-item.peak {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.04);
}
.peak-end-item.end {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.04);
}

/* ============================================================
 * [TOC-CH] 章节锚点区 — CH.27~41 后续章节专属样式
 * 搜索 [CH-XX] 可快速跳转到第 XX 章
 * ============================================================ */

/* [CH-27] 27. 动画系统 */
.animation-demo-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.anim-track-bg {
    width: 100%;
    height: 60px;
    background: var(--border-light);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.anim-box {
    width: 40px;
    height: 40px;
    background: var(--accent);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    will-change: transform;
}
.control-row, .slider-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
}
.select-sm {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 0.72rem;
    color: var(--text);
}

/* [CH-29] 29. 空状态与错误 */
.es-state-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* [CH-31] 31. 设计令牌 */
.token-preview-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
}

/* [CH-34] 34. 情感化设计 */
.confetti-canvas-container {
    position: relative;
    width: 100%;
    height: 180px;
    background: var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.confetti-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

/* [CH-36] 36. 拖拽与排序 */
.dd-list-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.dd-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease;
}
.dd-item:hover {
    border-color: var(--accent);
}
.dd-controls {
    display: flex;
    gap: 6px;
}
.dd-btn {
    background: var(--border-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.65rem;
    color: var(--text-muted);
}
.dd-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* [CH-37] 37. 数据表格 */
.table-demo-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.table-edit-demo {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    text-align: left;
}
.table-edit-demo th, .table-edit-demo td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
}
.table-edit-demo th {
    background: var(--border-light);
    font-weight: 700;
}
.editable-cell {
    cursor: double-click;
    position: relative;
}
.editable-cell:hover::after {
    content: "✏️ 双击编辑";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.55rem;
    color: var(--accent);
    opacity: 0.8;
}
.frozen-col {
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 2;
    border-right: 1px solid var(--border) !important;
}
th.frozen-col {
    background: var(--border-light);
}

/* [CH-38] 38. 桌面端模式 */
.desktop-mockup-window {
    width: 100%;
    height: 180px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-app);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.desk-toolbar {
    height: 28px;
    background: var(--border-light);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 0.68rem;
    gap: 12px;
}
.desk-dots {
    display: flex;
    gap: 4px;
}
.desk-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
}
.desk-dot.red { background: #ff5f56; }
.desk-dot.yellow { background: #ffbd2e; }
.desk-dot.green { background: #27c93f; }
.desk-workspace {
    flex-grow: 1;
    display: flex;
    position: relative;
    padding: 10px;
    font-size: 0.7rem;
    align-items: center;
    justify-content: center;
}

/* [CH-39] 39. AI 界面 */
.ai-chat-window {
    width: 100%;
    height: 190px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-card);
}
.ai-chat-output {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-input-bar {
    border-top: 1px solid var(--border);
    padding: 6px;
    display: flex;
    gap: 6px;
}
.ai-input-bar input {
    flex-grow: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 0.7rem;
    background: var(--bg-app);
    color: var(--text);
}

/* [CH-40] 40. 滚动驱动动效 */
.scroll-driven-container {
    width: 100%;
    height: 180px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow-y: auto;
    position: relative;
}
.scroll-driven-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: var(--border-light);
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    font-weight: 800;
    z-index: 10;
    transition: all 0.25s ease;
    color: var(--text);
}
.scroll-parallax-bg {
    width: 100%;
    height: 110px;
    position: relative;
    overflow: hidden;
    background: #0f172a;
}
.scroll-parallax-bg img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

/* [CH-41] 41. 设计交接 */
.handoff-inspect-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.figma-element-mock {
    position: relative;
    border: 1px dashed var(--accent);
    padding: 24px;
    border-radius: 8px;
    background: var(--border-light);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.figma-element-mock::before {
    content: "Inspect Node";
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.55rem;
    color: var(--accent);
    font-family: var(--font-mono);
}
.ho-props-output {
    background: #0f172a;
    border-radius: 6px;
    padding: 10px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: #e2e8f0;
    min-height: 100px;
    overflow-y: auto;
}

/* ============================================================
 * [TOC-11] 11. 项目修复指南追加样式
 * ============================================================ */

/* 全局章节上下导航组件 */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  margin: 40px 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.chapter-nav a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
}
.chapter-nav a.disable {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* 左侧目录滚动高亮 */
.sidebar-chapter {
  padding: 6px 10px;
  margin: 4px 0;
  border-radius: 4px;
  cursor: pointer;
}
.sidebar-chapter.active {
  background: transparent !important;  /* 把背景交给 a 标签统一控制 */
}
.sidebar-chapter.active a {
  background: linear-gradient(135deg, var(--accent) 0%, #6d28d9 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-left: none !important;          /* 覆盖 nav-item.active a 的左边框 */
  padding-left: 12px !important;         /* 还原收缩的 padding */
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.3);
}
.sidebar-chapter.active a:hover {
  background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 14px rgba(79, 70, 229, 0.45);
}

/* Playground 通用容器样式 */
.playground-40 {
  height: 500px !important;
}
.playground-44 {
  min-height: 450px !important;
}

/* Inline SVG icon classes */
.icon-add, .icon-delete, .icon-warning, .icon-search, .icon-home, .icon-setting {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 4px;
}
.icon-add {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'></line><line x1='5' y1='12' x2='19' y2='12'></line></svg>");
}
.icon-delete {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'></polyline><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'></path></svg>");
}
.icon-delete.fill {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230066cc' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'></polyline><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'></path></svg>");
}
.icon-warning {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'></path><line x1='12' y1='9' x2='12' y2='13'></line><line x1='12' y1='17' x2='12.01' y2='17'></line></svg>");
}
.icon-warning.two-color {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffe9e9' stroke='%23f44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'></path><line x1='12' y1='9' x2='12' y2='13'></line><line x1='12' y1='17' x2='12.01' y2='17'></line></svg>");
}
.icon-search {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>");
}
button .icon-search {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>");
}
.icon-home {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'></path><polyline points='9 22 9 12 15 12 15 22'></polyline></svg>");
}
.icon-setting {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'></circle><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'></path></svg>");
}

/* Drag and Drop Demo Styles */
.drag-source { display: flex; gap: 10px; margin: 15px 0; }
.drag-item { padding: 10px 16px; background: #0066cc; color: #fff; border-radius: 4px; cursor: move; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s; }
.drag-item:hover { background: #0052a3; }
.drop-boxes { display: flex; gap: 20px; margin: 20px 0; }
.drop-zone { width: 180px; height: 120px; border: 2px dashed var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--text-muted); background: var(--bg-app); transition: all 0.2s ease; flex-direction: column; gap: 6px; }
.drop-zone.active { border-color: #0066cc; background: rgba(0, 102, 204, 0.05); color: #0066cc; }

/* Tree layout and selects */
.tree-wrap { flex: 1; border: 1px solid var(--border); padding: 15px; border-radius: 6px; background: var(--bg-card); }
.tree-wrap h4 { font-size: 0.8rem; font-weight: 700; margin-bottom: 12px; }
.tree { list-style: none; padding-left: 0; margin: 0; font-size: 0.75rem; }
.tree ul { list-style: none; padding-left: 16px; margin: 4px 0; border-left: 1px dashed var(--border); }
.tree li { position: relative; padding: 4px 0 4px 10px; }
.select-wrap { flex: 1; border: 1px solid var(--border); padding: 15px; border-radius: 6px; background: var(--bg-card); display: flex; flex-direction: column; gap: 12px; }
.select-wrap h4 { font-size: 0.8rem; font-weight: 700; margin-bottom: 4px; }
.select-wrap select { padding: 6px 10px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-app); color: var(--text); font-size: 0.72rem; outline: none; }
.select-wrap select:disabled { opacity: 0.5; cursor: not-allowed; }
#sortResult { font-size: 0.72rem; font-weight: 600; color: var(--accent); margin-top: 8px; }

/* Microinteractions interactive demo */
.interactions-demo { padding: 15px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); display: flex; flex-direction: column; gap: 16px; margin-top: 15px; }
.interactions-demo h3 { font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }
.demo-block { display: flex; flex-direction: column; gap: 6px; font-size: 0.72rem; }
.demo-block h4 { font-weight: 700; margin: 0; }
.btn-interactive { padding: 8px 16px; border: none; border-radius: 4px; background: #0066cc; color: white; font-weight: 600; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; width: fit-content; }
.btn-interactive:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25); }
.btn-interactive:active { transform: translateY(0) scale(0.95); }
.input-interactive { padding: 6px 12px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-app); color: var(--text); outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-size: 0.72rem; }
.input-interactive:focus { border-color: #0066cc; box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15); }

/* Collision Popover */
.collision-tip {
  min-height: 60px;
  height: auto;
  padding: 12px 16px;
  background: #ffe9e9;
  border: 1px solid #f44;
  white-space: normal;
}

/* Navigation dropdown menu and breadcrumb */
.nav-demo {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-top: 12px;
}
.nav-bar {
  display: flex;
  gap: 20px;
  background: var(--bg-app);
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  align-items: center;
  position: relative;
  margin-bottom: 15px;
}
.nav-item-demo {
  position: relative;
  cursor: pointer;
}
.nav-item-demo.has-dropdown:hover .dropdown-menu-demo {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu-demo {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: all 0.2s ease;
  z-index: 100;
}
.dropdown-item-demo {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.72rem;
  color: var(--text);
  position: relative;
}
.dropdown-item-demo:hover {
  background: var(--bg-app);
}
.dropdown-item-demo.has-sub:hover .submenu-demo {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.submenu-demo {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 120px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(5px);
  transition: all 0.2s ease;
  z-index: 101;
}
.sub-item-demo {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.72rem;
  color: var(--text);
}
.sub-item-demo:hover {
  background: var(--bg-app);
}
.breadcrumb-demo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--bg-app);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  width: fit-content;
}

/* =====================================================================
   🎨 设计风格沙盒 —— 侧边栏专属醒目样式
   让首页入口条目在浅色/深色两套主题下都清晰、有辨识度
   ===================================================================== */
#sidebar-section-sandbox > a {
    background: linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%);
    color: #ffffff !important;
    font-weight: 700;
    border-radius: var(--radius-sm);
    border-left: none !important;
    padding-left: 12px !important;
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.35);
    letter-spacing: 0.01em;
    transition: var(--transition-smooth);
}

#sidebar-section-sandbox > a:hover {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    box-shadow: 0 4px 18px rgba(79, 70, 229, 0.5);
    transform: translateX(2px);
    color: #ffffff !important;
}

[data-theme="dark"] #sidebar-section-sandbox > a,
[data-theme="warm"] #sidebar-section-sandbox > a {
    color: #ffffff !important;
}