@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Noto+Serif+SC:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.7.0/style.css');
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-gb-screen-webfont@1.7.0/style.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc@5.1.0/chinese-simplified-400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc@5.1.0/chinese-simplified-700.css');

/* -------------------------------------------------------------
 * 《内容电商从 0 到 1 打品》在线书籍样式表
 * 采用极简高端质感、舒适长文排版与亮暗双色主题
 * ------------------------------------------------------------- */

:root {
    /* Fonts（商业典籍 The Manual：楷体标题 + 思源黑体正文） */
    --font-family-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    --font-family-serif: 'LXGW WenKai', 'LXGW WenKai GB Screen', 'Kaiti SC', 'STKaiti', Georgia, serif;
    --font-family-cn: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-size-base: 17px;
    --line-height-base: 1.8;

    /* Theme Lights (商业典籍：暖燕麦米白底 + 墨绿强调) */
    --color-bg-light: #F0EDE5;            /* 暖燕麦米白底 */
    --color-sidebar-bg-light: #F0EDE5;    /* 侧边栏保持一致 */
    --color-text-primary-light: #1F1D1A;  /* 近墨主文字 */
    --color-text-secondary-light: #5B5B5B; /* 柔和辅助字色 */
    --color-border-light: #E2DACA;        /* 淡纸张分割线 */
    --color-brand-light: #2F4A3C;         /* 墨绿强调 */
    --color-accent-light: #2F4A3C;        /* 墨绿点缀 */
    --color-accent-hover-light: #3F5E4E;
    --color-blockquote-bg-light: #F0EDE5;
    --color-search-bg-light: #FFFFFF;
    --color-code-bg-light: #E8E3D6;

    /* Theme Darks (商业典籍：暖夜) */
    --color-bg-dark: #191A17;
    --color-sidebar-bg-dark: #191A17;
    --color-text-primary-dark: #E6E3D8;
    --color-text-secondary-dark: #999488;
    --color-border-dark: #2C2E27;
    --color-brand-dark: #7FA98E;
    --color-accent-dark: #7FA98E;
    --color-accent-hover-dark: #9BBFA8;
    --color-blockquote-bg-dark: #191A17;
    --color-search-bg-dark: #20221E;
    --color-code-bg-dark: #20221E;

    /* Transition */
    --transition-speed: 0.25s;
    --transition-curve: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base resets */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--transition-speed) var(--transition-curve),
                color var(--transition-speed) var(--transition-curve);
}

/* Theme definition */
body.theme-light {
    background-color: var(--color-bg-light);
    color: var(--color-text-primary-light);
    --color-bg: var(--color-bg-light);
    --color-sidebar-bg: var(--color-sidebar-bg-light);
    --color-text-primary: var(--color-text-primary-light);
    --color-text-secondary: var(--color-text-secondary-light);
    --color-border: var(--color-border-light);
    --color-brand: var(--color-brand-light);
    --color-accent: var(--color-accent-light);
    --color-accent-hover: var(--color-accent-hover-light);
    --color-blockquote-bg: var(--color-blockquote-bg-light);
    --color-search-bg: var(--color-search-bg-light);
    --color-code-bg: var(--color-code-bg-light);
    --color-shadow: rgba(0, 0, 0, 0.05);
}

body.theme-dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary-dark);
    --color-bg: var(--color-bg-dark);
    --color-sidebar-bg: var(--color-sidebar-bg-dark);
    --color-text-primary: var(--color-text-primary-dark);
    --color-text-secondary: var(--color-text-secondary-dark);
    --color-border: var(--color-border-dark);
    --color-brand: var(--color-brand-dark);
    --color-accent: var(--color-accent-dark);
    --color-accent-hover: var(--color-accent-hover-dark);
    --color-blockquote-bg: var(--color-blockquote-bg-dark);
    --color-search-bg: var(--color-search-bg-dark);
    --color-code-bg: var(--color-code-bg-dark);
    --color-shadow: rgba(0, 0, 0, 0.3);
}

/* Typography styles */
body.font-sans {
    font-family: var(--font-family-sans);
}

body.font-serif {
    font-family: var(--font-family-serif);
}

body.font-serif .markdown-body p, 
body.font-serif .markdown-body blockquote {
    font-family: var(--font-family-serif);
}

/* App Container Layout */
.book-container {
    display: flex;
    min-height: 100vh;
    width: 100vw;
}

/* Left Sidebar Navigation */
.book-sidebar {
    width: 320px;
    height: 100vh;
    background-color: var(--color-sidebar-bg);
    border-right: 1px solid var(--color-border);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed) var(--transition-curve),
                background-color var(--transition-speed) var(--transition-curve),
                border-color var(--transition-speed) var(--transition-curve);
}

.sidebar-header {
    padding: 28px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-logo {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    color: var(--color-text-primary);
}

.logo-text {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.logo-subtext {
    font-size: 11px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-top: 4px;
}

.sidebar-close {
    display: none;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* Search Box style */
.sidebar-search {
    padding: 16px 20px;
    position: relative;
    border-bottom: 1px solid var(--color-border);
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: var(--color-text-secondary);
}

#search-input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition-speed) var(--transition-curve);
}

#search-input:focus {
    border-color: var(--color-accent);
}

#search-clear-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 18px;
    cursor: pointer;
}

.search-results-panel {
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    max-height: 400px;
    background-color: var(--color-search-bg);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 25px var(--color-shadow);
    z-index: 10;
    overflow-y: auto;
    padding: 8px 0;
}

.search-result-item {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background-color var(--transition-speed);
}

.search-result-item:hover {
    background-color: var(--color-sidebar-bg);
}

.search-result-title {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-accent);
    margin-bottom: 4px;
}

.search-result-snippet {
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-empty {
    padding: 16px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 13px;
}

/* Sidebar Menu Navigation List */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
}

.nav-module {
    margin-bottom: 16px;
}

.nav-module-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    transition: background-color var(--transition-speed);
}

.nav-module-title:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

body.theme-dark .nav-module-title:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.nav-module-title svg {
    transition: transform var(--transition-speed);
}

.nav-module.collapsed .nav-module-title svg {
    transform: rotate(-90deg);
}

.nav-article-list {
    list-style: none;
    margin-top: 4px;
    padding-left: 12px;
    border-left: 1px solid var(--color-border);
    transition: max-height var(--transition-speed) var(--transition-curve), opacity var(--transition-speed);
}

.nav-module.collapsed .nav-article-list {
    display: none;
}

.nav-article-item a {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-bottom: 2px;
    transition: all var(--transition-speed);
}

.nav-article-item a:hover {
    color: var(--color-text-primary);
    background-color: transparent;
    border-left-color: var(--color-border);
}

body.theme-dark .nav-article-item a:hover {
    background-color: transparent;
}

.nav-article-item.active a {
    color: var(--color-brand);
    font-weight: 600;
    background-color: transparent;
    border-left-color: var(--color-brand);
}

/* Right Main Panel */
.book-main {
    flex: 1;
    margin-left: 320px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header bar */
.book-header {
    height: 64px;
    padding: 0 40px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background-color: rgba(250, 249, 246, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 90;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

body.theme-dark .book-header {
    background-color: rgba(18, 18, 18, 0.8);
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-text-primary);
    cursor: pointer;
    margin-right: 16px;
}

.breadcrumb {
    font-size: 13px;
    color: var(--color-text-secondary);
    letter-spacing: 0.5px;
}

.breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

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

.breadcrumb-separator {
    margin: 0 8px;
    color: var(--color-border);
}

/* Toolbar Buttons */
.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn {
    background: none;
    border: 1px solid var(--color-border);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: 500;
    transition: all var(--transition-speed);
}

.toolbar-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: var(--color-blockquote-bg);
}

.icon-font {
    font-family: var(--font-family-serif);
    font-weight: 700;
    font-size: 16px;
}

/* Book Main Body area */
.book-body {
    flex: 1;
    padding: 60px 40px;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Page transitions */
.markdown-body {
    flex: 1;
    transition: opacity 0.25s ease;
}

.markdown-body.loading {
    opacity: 0.1;
}

/* Premium Typography for Markdown Content */
.markdown-body {
    line-height: 1.8;
}

/* First header */
.markdown-body h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-top: 10px;
    margin-bottom: 24px;
    line-height: 1.35;
    color: var(--color-text-primary);
}

.markdown-body h2 {
    font-size: 22px;
    font-weight: 600;
    margin-top: 42px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
    color: var(--color-text-primary);
}

.markdown-body h3 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 14px;
    color: var(--color-text-primary);
}

.markdown-body p {
    margin-bottom: 20px;
    text-align: justify;
    word-break: break-word;
}

/* Lists */
.markdown-body ul, 
.markdown-body ol {
    margin-bottom: 20px;
    padding-left: 24px;
}

.markdown-body li {
    margin-bottom: 8px;
}

/* Horizontal Rule */
.markdown-body hr {
    height: 1px;
    border: none;
    background-color: var(--color-border);
    margin: 40px 0;
}

/* Blockquotes: Special premium styling for the course header/quotes */
.markdown-body blockquote {
    margin: 28px 0;
    padding: 16px 24px;
    background-color: var(--color-blockquote-bg);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 8px 8px 0;
    font-size: 0.95em;
    color: var(--color-text-secondary);
}

.markdown-body blockquote p {
    margin-bottom: 0;
}

/* Tables styling */
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 28px;
    font-size: 15px;
}

.markdown-body th, 
.markdown-body td {
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    text-align: left;
}

.markdown-body th {
    background-color: var(--color-sidebar-bg);
    font-weight: 600;
}

.markdown-body tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.01);
}

body.theme-dark .markdown-body tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.01);
}

/* Inline code highlight */
.markdown-body code {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    background-color: var(--color-code-bg);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 14px;
}

/* Fenced code blocks */
.markdown-body pre {
    background-color: var(--color-code-bg) !important;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 24px;
    overflow-x: auto;
}

.markdown-body pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 14px;
    color: inherit;
}

/* Prev/Next Navigation Card */
.page-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--color-border);
}

.nav-card {
    flex: 1;
    padding: 20px 24px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-speed) var(--transition-curve);
    background-color: var(--color-bg);
}

.nav-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--color-shadow);
}

.nav-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.nav-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.nav-card.prev {
    text-align: left;
}

.nav-card.next {
    text-align: right;
}

.nav-card.empty {
    visibility: hidden;
    pointer-events: none;
}

/* Footer layout */
.book-footer {
    margin-top: 80px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 12px;
}

/* Mobile Sidebar Backdrop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 95;
}

/* -------------------------------------------------------------
 * Responsive styles (Mobile & Tablet)
 * ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .book-sidebar {
        transform: translateX(-100%);
    }

    .book-sidebar.open {
        transform: translateX(0);
    }

    .book-sidebar.open ~ .sidebar-backdrop {
        display: block;
    }

    .book-sidebar.open ~ .book-main .book-header {
        z-index: 10; /* Lower than backdrop */
    }

    .sidebar-close {
        display: block;
    }

    .book-main {
        margin-left: 0;
    }

    .menu-toggle {
        display: block;
    }

    .book-header {
        padding: 0 20px;
    }

    .book-body {
        padding: 40px 20px;
    }
    
    .page-navigation {
        flex-direction: column;
        gap: 12px;
    }
}

/* -------------------------------------------------------------
 * Case Cover Grid Layout Styles
 * ------------------------------------------------------------- */
.cover-case-wrapper {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-top: 20px;
}

.cover-case-image {
    flex: 1;
    max-width: 360px;
}

.cover-case-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px var(--color-shadow);
    border: 1px solid var(--color-border);
    display: block;
    transition: transform var(--transition-speed);
}

.cover-case-image img:hover {
    transform: scale(1.02);
}

.cover-case-details {
    flex: 1.2;
}

@media (max-width: 768px) {
    .cover-case-wrapper {
        flex-direction: column;
    }
    .cover-case-image {
        max-width: 100%;
    }
}

/* -------------------------------------------------------------
 * HTML Roadmap Component Styles
 * ------------------------------------------------------------- */
.roadmap-container {
    margin: 40px 0;
}

.roadmap-diagram {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 15px;
    position: relative;
}

.roadmap-step {
    flex: 1;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    position: relative;
    box-shadow: 0 4px 12px var(--color-shadow);
    transition: all var(--transition-speed) var(--transition-curve);
    display: flex;
    flex-direction: column;
}

.roadmap-step:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 25px var(--color-shadow);
}

.step-badge {
    position: absolute;
    top: -10px;
    left: 20px;
    background-color: var(--color-accent);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.2);
}

body.theme-dark .step-badge {
    color: #121212;
}

.step-icon {
    color: var(--color-accent);
    margin-bottom: 14px;
    margin-top: 4px;
    display: flex;
    align-items: center;
}

.step-title {
    font-size: 16px !important;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    color: var(--color-text-primary);
}

.step-range {
    font-size: 13px;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 14px;
    font-weight: 500;
}

.step-details {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    font-size: 13px;
    color: var(--color-text-secondary);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.step-details li {
    margin-bottom: 0 !important;
    line-height: 1.5;
}

.step-details li strong {
    color: var(--color-text-primary);
}

/* 连接器 */
.roadmap-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-border);
    width: 24px;
    flex-shrink: 0;
}

.roadmap-connector svg {
    width: 20px;
    height: 20px;
}

/* 响应式调整 (Mobile) */
@media (max-width: 768px) {
    .roadmap-diagram {
        flex-direction: column;
        gap: 24px;
    }
    
    .roadmap-connector {
        transform: rotate(90deg);
        height: 24px;
        width: 100%;
    }
}

/* -------------------------------------------------------------
 * Component 1: Engine Comparison (Traditional vs Modern)
 * ------------------------------------------------------------- */
.engine-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 30px 0;
}

.engine-card {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: rgba(0, 0, 0, 0.005);
    display: flex;
    flex-direction: column;
    transition: all var(--transition-speed);
}

body.theme-dark .engine-card {
    background-color: rgba(255, 255, 255, 0.005);
}

.engine-card.content-commerce {
    border-color: var(--color-accent);
    box-shadow: 0 4px 14px var(--color-blockquote-bg);
}

.engine-tag {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.engine-card.content-commerce .engine-tag {
    color: var(--color-accent);
}

.engine-flow {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.flow-node {
    padding: 10px 14px;
    background-color: var(--color-sidebar-bg);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.flow-node.highlight {
    background-color: var(--color-text-primary);
    color: var(--color-bg);
    border: none;
}

.flow-node.accent {
    background-color: var(--color-blockquote-bg);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.flow-node.highlight.accent {
    background-color: var(--color-accent);
    color: #FFFFFF;
    border: none;
}

body.theme-dark .flow-node.highlight.accent {
    color: #121212;
}

.flow-arrow {
    text-align: center;
    font-size: 11px;
    color: var(--color-text-secondary);
    position: relative;
    padding: 2px 0;
}

.flow-arrow::before {
    content: "↓";
    font-size: 12px;
    color: var(--color-border);
    display: block;
}

.flow-arrow.accent::before {
    color: var(--color-accent);
}

.engine-summary {
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-top: auto;
}

/* -------------------------------------------------------------
 * Component 2: Content Engineering Timeline
 * ------------------------------------------------------------- */
.timeline-container {
    margin: 40px 0;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 30px 24px;
    background-color: rgba(0, 0, 0, 0.005);
}

body.theme-dark .timeline-container {
    background-color: rgba(255, 255, 255, 0.005);
}

.timeline-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    color: var(--color-text-primary);
    letter-spacing: 0.5px;
}

.timeline-flow {
    display: flex;
    position: relative;
    justify-content: space-between;
    gap: 15px;
}

.timeline-item {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 连接线 */
.timeline-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 1.5px;
    background-color: var(--color-border);
    z-index: 1;
}

.timeline-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-sidebar-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
    transition: all var(--transition-speed);
}

.timeline-item:hover .timeline-num {
    background-color: var(--color-accent);
    color: #FFFFFF;
    border-color: var(--color-accent);
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(180, 83, 9, 0.2);
}

body.theme-dark .timeline-item:hover .timeline-num {
    color: #121212;
}

.timeline-content h5 {
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    color: var(--color-text-primary);
}

.timeline-content p {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-bottom: 0 !important;
    line-height: 1.5;
}

/* -------------------------------------------------------------
 * Component 3: Choice Crossroads VS Card
 * ------------------------------------------------------------- */
.choice-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 35px 0;
}

.choice-card {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    transition: all var(--transition-speed);
}

.choice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--color-shadow);
}

.choice-card.brand-focus {
    border-color: var(--color-accent);
    box-shadow: 0 4px 14px var(--color-blockquote-bg);
}

.choice-card.brand-focus:hover {
    box-shadow: 0 8px 24px var(--color-blockquote-bg);
}

.choice-header {
    margin-bottom: 16px;
}

.choice-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background-color: var(--color-sidebar-bg);
    border-radius: 4px;
    color: var(--color-text-secondary);
    display: inline-block;
    margin-bottom: 8px;
}

.choice-tag.accent {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

body.theme-dark .choice-tag.accent {
    color: #121212;
}

.choice-header h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 !important;
    color: var(--color-text-primary);
}

.choice-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    font-size: 12.5px;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.choice-list li {
    margin-bottom: 0 !important;
    line-height: 1.5;
    position: relative;
    padding-left: 14px;
}

.choice-list li::before {
    content: "•";
    position: absolute;
    left: 2px;
    color: var(--color-border);
}

.choice-card.brand-focus .choice-list li::before {
    color: var(--color-accent);
}

.choice-list li strong {
    color: var(--color-text-primary);
}

.choice-vs {
    font-size: 14px;
    font-weight: 700;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background-color: var(--color-sidebar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* -------------------------------------------------------------
 * Global Components Responsive adaptions
 * ------------------------------------------------------------- */
@media (max-width: 768px) {
    .engine-comparison {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .timeline-flow {
        flex-direction: column;
        gap: 20px;
    }
    
    .timeline-item:not(:last-child)::after {
        top: 36px;
        left: 18px;
        bottom: -20px;
        width: 1.5px;
        height: auto;
        right: auto;
    }
    
    .choice-container {
        flex-direction: column;
        gap: 16px;
    }
    
    .choice-vs {
        margin: 4px 0;
    }
}

/* -------------------------------------------------------------
 * Custom layout overrides & special components
 * ------------------------------------------------------------- */
.engine-comparison.dead-loop {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.engine-comparison.dead-loop .engine-card {
    padding: 20px 16px;
}

@media (max-width: 1024px) {
    .engine-comparison.dead-loop {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .engine-comparison.dead-loop {
        grid-template-columns: 1fr;
    }
}

.card-mini-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text-primary);
}

.card-mini-desc {
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 0 !important;
}

.masked-text {
    background-color: var(--color-border);
    color: transparent !important;
    border-radius: 4px;
    padding: 0 4px;
    user-select: none;
    position: relative;
    display: inline-block;
    line-height: 1.2;
}

.speech-box {
    background-color: var(--color-sidebar-bg);
    border: 1px dashed var(--color-border);
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.6;
}

.speech-result {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    line-height: 1.5;
}

.speech-result.fail {
    background-color: rgba(220, 38, 38, 0.05);
    color: var(--color-text-secondary);
}

.speech-result.success {
    background-color: rgba(16, 185, 129, 0.05);
    color: var(--color-accent);
}

body.theme-dark .speech-result.success {
    color: var(--color-accent);
}

/* -------------------------------------------------------------
 * Component 1: Pricing Pyramid Ladder
 * ------------------------------------------------------------- */
.pricing-pyramid {
    margin: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.pyramid-layer {
    background-color: var(--color-sidebar-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all var(--transition-speed);
}

.pyramid-layer.level-1 { width: 100%; }
.pyramid-layer.level-2 { width: 95%; }
.pyramid-layer.level-3 { 
    width: 90%; 
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px var(--color-blockquote-bg);
}
.pyramid-layer.level-4 { 
    width: 85%;
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-sidebar-bg), var(--color-blockquote-bg));
    box-shadow: 0 4px 16px var(--color-blockquote-bg);
}

.pyramid-layer:hover {
    transform: scale(1.015);
    box-shadow: 0 6px 15px var(--color-shadow);
}

.layer-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-secondary);
    font-family: var(--font-family-serif);
}

.pyramid-layer.level-3 .layer-num,
.pyramid-layer.level-4 .layer-num {
    color: var(--color-accent);
}

.layer-content {
    flex: 1;
}

.layer-content h4 {
    font-size: 14px;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    color: var(--color-text-primary);
}

.pyramid-layer.level-3 h4,
.pyramid-layer.level-4 h4 {
    color: var(--color-accent);
}

.layer-content p {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 0 !important;
    line-height: 1.5;
}

/* -------------------------------------------------------------
 * Component 2: Milk Evolution Grid
 * ------------------------------------------------------------- */
.milk-evolution {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 35px 0;
}

.evolution-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px 14px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    display: flex;
    flex-direction: column;
    transition: all var(--transition-speed);
}

.evolution-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--color-shadow);
}

.evolution-card.highlight {
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px var(--color-blockquote-bg);
}

.evolution-card.highlight-heavy {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-bg), var(--color-blockquote-bg));
    box-shadow: 0 4px 16px var(--color-blockquote-bg);
}

.evo-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.evolution-card.highlight .evo-header,
.evolution-card.highlight-heavy .evo-header {
    color: var(--color-accent);
}

.evo-speech {
    background-color: var(--color-sidebar-bg);
    border: 1px dashed var(--color-border);
    padding: 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 12px;
    color: var(--color-text-secondary);
}

.evo-result {
    font-size: 11px;
    line-height: 1.5;
    margin-top: auto;
    padding: 8px;
    border-radius: 6px;
}

.evo-result.fail {
    background-color: rgba(0, 0, 0, 0.02);
    color: var(--color-text-secondary);
}

body.theme-dark .evo-result.fail {
    background-color: rgba(255, 255, 255, 0.02);
}

.evo-result.success {
    background-color: var(--color-blockquote-bg);
    color: var(--color-accent);
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .milk-evolution {
        grid-template-columns: repeat(2, 1fr);
    }
    .pyramid-layer {
        width: 100% !important;
    }
}

@media (max-width: 560px) {
    .milk-evolution {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------
 * Component 3: Gather Comparison (Disperse vs Gather)
 * ------------------------------------------------------------- */
.gather-comparison {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 35px 0;
}

.gather-side {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    text-align: center;
}

.gather-side h5 {
    font-size: 14px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    color: var(--color-text-primary);
}

.gather-side.gather h5 {
    color: var(--color-accent);
}

.disperse-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 18px;
    min-height: 120px;
    align-content: center;
}

.disperse-nodes .node {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 11px;
    background-color: var(--color-sidebar-bg);
    color: var(--color-text-secondary);
}

.gather-nodes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.gather-source {
    padding: 8px;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    font-size: 11px;
    color: var(--color-text-secondary);
    background-color: var(--color-sidebar-bg);
}

.gather-arrow-group {
    grid-column: span 2;
    display: flex;
    justify-content: space-around;
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 700;
    padding: 4px 0;
}

.gather-core {
    grid-column: span 2;
    padding: 12px;
    background-color: var(--color-accent);
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(180, 83, 9, 0.2);
}

body.theme-dark .gather-core {
    color: #121212;
}

.gather-arrow {
    font-size: 20px;
    color: var(--color-border);
    flex-shrink: 0;
}

.disperse-summary {
    font-size: 11.5px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.disperse-summary.accent {
    color: var(--color-accent);
    font-weight: 500;
}

/* -------------------------------------------------------------
 * Component 4: Value Quadrant Grid (Tian-zi Ge)
 * ------------------------------------------------------------- */
.quadrant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    margin: 35px 0;
}

.quadrant-cell {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    transition: all var(--transition-speed);
}

.quadrant-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px var(--color-shadow);
}

.quadrant-cell.active {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-bg), var(--color-blockquote-bg));
    box-shadow: 0 4px 14px var(--color-blockquote-bg);
}

.quadrant-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.quadrant-cell.active .quadrant-label {
    color: var(--color-accent);
}

.quadrant-cell h5 {
    font-size: 14px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    color: var(--color-text-primary);
}

.quadrant-cell.active h5 {
    color: var(--color-accent);
}

.quadrant-cell p {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-bottom: 0 !important;
}

.quadrant-cell p strong {
    color: var(--color-text-primary);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .gather-comparison {
        flex-direction: column;
        gap: 16px;
    }
    
    .gather-arrow {
        transform: rotate(90deg);
        margin: 4px 0;
    }
    
    .quadrant-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------
 * Component 5: Chat Flow (追问对话流)
 * ------------------------------------------------------------- */
.chat-flow-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
}

.chat-flow-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 20px;
    text-align: center;
}

.chat-bubble-stream {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.chat-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 85%;
}

.chat-row.question {
    align-self: flex-start;
}

.chat-row.answer {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
}

.chat-avatar.Q {
    background-color: var(--color-sidebar-bg);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.chat-avatar.A {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

body.theme-dark .chat-avatar.A {
    color: #121212;
}

.chat-bubble {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.6;
    box-shadow: 0 2px 6px var(--color-shadow);
}

.chat-row.question .chat-bubble {
    background-color: var(--color-sidebar-bg);
    color: var(--color-text-primary);
    border-top-left-radius: 0;
    border: 1px solid var(--color-border);
}

.chat-row.answer .chat-bubble {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    border-top-right-radius: 0;
    border: 1px solid var(--color-border);
}

.chat-row.answer.highlight .chat-bubble {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-bg), var(--color-blockquote-bg));
    box-shadow: 0 4px 12px var(--color-blockquote-bg);
}

.chat-flow-summary {
    background-color: var(--color-sidebar-bg);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    border-left: 4px solid var(--color-accent);
}

/* -------------------------------------------------------------
 * Component 6: Discipline & Target (三纪律与找谁问)
 * ------------------------------------------------------------- */
.discipline-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
}

.discipline-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 12px;
}

.discipline-header h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 !important;
}

.discipline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.discipline-card {
    background-color: var(--color-sidebar-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    position: relative;
}

.discipline-card .card-num {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-border);
    position: absolute;
    top: 8px;
    right: 12px;
    line-height: 1;
}

.discipline-card h5 {
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    color: var(--color-accent);
}

.discipline-card p {
    font-size: 11.5px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 0 !important;
}

.discipline-target {
    border-top: 1px dashed var(--color-border);
    padding-top: 20px;
}

.target-title {
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--color-text-primary);
}

.target-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.target-item {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    background-color: var(--color-bg);
}

.target-item.avoid {
    border-color: rgba(239, 68, 68, 0.2);
}

.target-item.focus {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-bg), var(--color-blockquote-bg));
}

.target-item .tag {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.target-item.avoid .tag {
    background-color: rgba(239, 68, 68, 0.08);
    color: #EF4444;
}

.target-item.focus .tag {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

body.theme-dark .target-item.focus .tag {
    color: #121212;
}

.target-item strong {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--color-text-primary);
}

.target-item span {
    display: block;
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* -------------------------------------------------------------
 * Component 7: Sheet Structure & Steps (一页纸结构看板)
 * ------------------------------------------------------------- */
.sheet-structure-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
}

.sheet-title-row {
    text-align: center;
    margin-bottom: 24px;
}

.sheet-title-row h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 !important;
    color: var(--color-text-primary);
}

.sheet-title-row p {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}

.sheet-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.sheet-step-card {
    background-color: var(--color-sidebar-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    transition: all var(--transition-speed);
}

.sheet-step-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--color-shadow);
}

.sheet-step-card.highlight {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-sidebar-bg), var(--color-blockquote-bg));
}

.sheet-step-card .step-badge {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: inline-block;
}

.sheet-step-card.highlight .step-badge {
    color: var(--color-accent);
}

.sheet-step-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    color: var(--color-text-primary);
}

.sheet-step-card.highlight h4 {
    color: var(--color-accent);
}

.sheet-step-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 0 !important;
}

/* -------------------------------------------------------------
 * Component 8: Case Contrast Container (实操案例看板)
 * ------------------------------------------------------------- */
.case-contrast-container {
    margin: 35px 0;
}

.case-contrast-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 20px;
    text-align: center;
}

.case-contrast-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contrast-panel-card {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    display: flex;
    flex-direction: column;
}

.contrast-panel-card.premium-label {
    border-color: var(--color-accent);
    box-shadow: 0 4px 16px var(--color-blockquote-bg);
}

.panel-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.panel-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
    background-color: var(--color-sidebar-bg);
    color: var(--color-text-secondary);
}

.contrast-panel-card.premium-label .panel-tag {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

body.theme-dark .contrast-panel-card.premium-label .panel-tag {
    color: #121212;
}

.panel-header h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 !important;
    color: var(--color-text-primary);
}

.panel-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.panel-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.row-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.row-value {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-text-primary);
    margin-bottom: 0 !important;
}

.row-quad-tags {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.row-quad-tags span {
    font-size: 11px;
    background-color: var(--color-sidebar-bg);
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--color-text-primary);
}

.row-quad-tags span strong {
    color: var(--color-accent);
    margin-right: 4px;
}

.row-quad-tags span.empty {
    color: var(--color-text-secondary);
    border: 1px dashed var(--color-border);
    background-color: transparent;
}

/* 响应式调整 */
@media (max-width: 900px) {
    .discipline-grid {
        grid-template-columns: 1fr;
    }
    
    .target-box {
        grid-template-columns: 1fr;
    }
    
    .sheet-steps {
        grid-template-columns: 1fr;
    }
    
    .case-contrast-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------
 * Component 9: Chef vs Kitchen (大厨与后厨分离模型)
 * ------------------------------------------------------------- */
.chef-kitchen-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
}

.chef-kitchen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.chef-kitchen-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
    display: flex;
    flex-direction: column;
}

.chef-kitchen-card.chef-side {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-sidebar-bg), var(--color-blockquote-bg));
}

.chef-kitchen-card h4 {
    font-size: 15px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    color: var(--color-text-primary);
}

.chef-kitchen-card.chef-side h4 {
    color: var(--color-accent);
}

.chef-kitchen-card ul {
    list-style: none;
    padding-left: 0;
    font-size: 12.5px;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chef-kitchen-card ul li {
    position: relative;
    padding-left: 18px;
}

.chef-kitchen-card ul li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: var(--color-border);
}

.chef-kitchen-card.chef-side ul li::before {
    color: var(--color-accent);
}

.chef-kitchen-summary {
    grid-column: span 2;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-secondary);
    border-top: 1px dashed var(--color-border);
    padding-top: 16px;
    margin-top: 8px;
}

/* -------------------------------------------------------------
 * Component 10: Org Full Map (组织飞轮双向流)
 * ------------------------------------------------------------- */
.org-map-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
    text-align: center;
}

.org-map-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
}

.org-map-layer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 10px 0;
}

.org-map-node {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 20px;
    background-color: var(--color-sidebar-bg);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.org-map-node.accent {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-bg), var(--color-blockquote-bg));
    color: var(--color-accent);
}

.org-map-flow-arrows {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 15px 0;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.arrow-down {
    color: var(--color-accent);
    font-weight: bold;
}

.arrow-up {
    color: #10B981;
    font-weight: bold;
}

.org-map-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.org-map-grid-5 .node-mini {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 10px 4px;
    background-color: var(--color-sidebar-bg);
    font-size: 11px;
    color: var(--color-text-secondary);
}

/* -------------------------------------------------------------
 * Component 11: GM Dashboard (GM指标看板)
 * ------------------------------------------------------------- */
.gm-dashboard {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
}

.gm-dashboard-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.gm-indicators {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.gm-ind-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px;
    background-color: var(--color-sidebar-bg);
}

.gm-ind-card h5 {
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

.gm-ind-card.red h5 { color: #EF4444; }
.gm-ind-card.yellow h5 { color: var(--color-text-primary); }
.gm-ind-card.green h5 { color: var(--color-accent); }

.gm-ind-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 0 !important;
}

.gm-deliverables {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    border-top: 1px dashed var(--color-border);
    padding-top: 20px;
}

.gm-del-box {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 10px;
    background-color: var(--color-bg);
    text-align: center;
}

.gm-del-box span {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.gm-del-box h6 {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 4px 0 0 0 !important;
}

/* -------------------------------------------------------------
 * Component 12: PMM Brief (PMM Brief卡片)
 * ------------------------------------------------------------- */
.pmm-brief-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
}

.pmm-brief-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.pmm-brief-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.pmm-brief-item {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    background-color: var(--color-sidebar-bg);
    transition: all var(--transition-speed);
}

.pmm-brief-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
}

.pmm-brief-item.highlight {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-sidebar-bg), var(--color-blockquote-bg));
}

.pmm-brief-item .field-num {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

.pmm-brief-item h5 {
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    color: var(--color-text-primary);
}

.pmm-brief-item p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 0 !important;
}

/* -------------------------------------------------------------
 * Component 13: Replication Flow (爆款复刻五步工作流)
 * ------------------------------------------------------------- */
.repl-flow-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
}

.repl-flow-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.repl-steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.repl-step-node {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
    position: relative;
}

.repl-step-node.active {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-sidebar-bg), var(--color-blockquote-bg));
}

.repl-step-node .node-num {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-border);
    display: block;
    margin-bottom: 4px;
}

.repl-step-node.active .node-num {
    color: var(--color-accent);
}

.repl-step-node h5 {
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    color: var(--color-text-primary);
}

.repl-step-node p {
    font-size: 10.5px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 0 !important;
}

/* -------------------------------------------------------------
 * Component 14: Execution Board (执行看板)
 * ------------------------------------------------------------- */
.exec-board {
    margin: 35px 0;
}

.exec-board-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.exec-board-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.exec-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px 10px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 10px var(--color-shadow);
    text-align: center;
    transition: all var(--transition-speed);
}

.exec-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
}

.exec-card.accent {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-bg), var(--color-blockquote-bg));
}

.exec-card h5 {
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    color: var(--color-text-primary);
}

.exec-card.accent h5 {
    color: var(--color-accent);
}

.exec-card .exec-kpi {
    font-size: 9px;
    font-weight: 700;
    color: var(--color-accent);
    background-color: var(--color-sidebar-bg);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.exec-card p {
    font-size: 10.5px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 0 !important;
}

/* -------------------------------------------------------------
 * Component 15: Team Building Steps (搭班子顺序与最小战队)
 * ------------------------------------------------------------- */
.team-steps-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
}

.team-steps-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.team-steps-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.team-step-box {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}

.team-step-box .step-tag {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 6px;
    display: block;
}

.team-step-box h5 {
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    color: var(--color-text-primary);
}

.team-step-box p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 0 !important;
}

.team-min-setup {
    border-top: 1px dashed var(--color-border);
    padding-top: 16px;
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* -------------------------------------------------------------
 * Component 16: Assets Library (规则资产库柜)
 * ------------------------------------------------------------- */
.assets-lib-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
}

.assets-lib-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.assets-lib-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.assets-lib-card {
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}

.assets-lib-card h5 {
    font-size: 13px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    color: var(--color-accent);
}

.assets-lib-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 0 !important;
}

/* 响应式调整 */
@media (max-width: 900px) {
    .chef-kitchen-grid {
        grid-template-columns: 1fr;
    }
    
    .chef-kitchen-summary {
        grid-column: span 1;
    }
    
    .org-map-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gm-indicators {
        grid-template-columns: 1fr;
    }
    
    .gm-deliverables {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pmm-brief-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .repl-steps-grid {
        grid-template-columns: 1fr;
    }
    
    .exec-board-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .team-steps-flow {
        grid-template-columns: 1fr;
    }
    
    .assets-lib-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------
 * Component 17: Combat Sandtable (机会作战沙盘)
 * ------------------------------------------------------------- */
.sandtable-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
}

.sandtable-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

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

.sandtable-column {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px;
    background-color: var(--color-sidebar-bg);
}

.sandtable-column h5 {
    font-size: 13px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    text-align: center;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
}

.sandtable-tags {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sandtable-tag {
    font-size: 11px;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sandtable-tag.success {
    border-color: var(--color-accent);
    background-color: var(--color-blockquote-bg);
    color: var(--color-accent);
}

.sandtable-tag.fail {
    color: var(--color-text-secondary);
    text-decoration: line-through;
    opacity: 0.6;
}

.sandtable-tag.pending {
    border-style: dashed;
}

.sandtable-status-label {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    text-transform: uppercase;
}

.sandtable-tag.success .sandtable-status-label {
    background-color: var(--color-accent);
    color: #FFFFFF;
}
body.theme-dark .sandtable-tag.success .sandtable-status-label {
    color: #121212;
}

.sandtable-tag.fail .sandtable-status-label {
    background-color: var(--color-border);
    color: var(--color-text-secondary);
}

.sandtable-tag.pending .sandtable-status-label {
    border: 1px dashed var(--color-border);
    color: var(--color-text-secondary);
}

/* -------------------------------------------------------------
 * Component 18: KOC Report Table (数据战报高颜值表格)
 * ------------------------------------------------------------- */
.report-table-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
    overflow-x: auto;
}

.report-table-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
}

.custom-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    text-align: left;
}

.custom-report-table th, .custom-report-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}

.custom-report-table th {
    font-weight: 600;
    color: var(--color-text-secondary);
    background-color: var(--color-sidebar-bg);
}

.custom-report-table tr.highlight-row {
    background-color: var(--color-blockquote-bg);
}

.custom-report-table tr.highlight-row td {
    border-bottom-color: var(--color-accent);
}

.badge-status {
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

.badge-status.pass {
    background-color: var(--color-accent);
    color: #FFFFFF;
}
body.theme-dark .badge-status.pass {
    color: #121212;
}

.badge-status.fail {
    background-color: rgba(239, 68, 68, 0.08);
    color: #EF4444;
}

.badge-status.weak {
    background-color: var(--color-sidebar-bg);
    color: var(--color-text-secondary);
    border: 1px dashed var(--color-border);
}

/* -------------------------------------------------------------
 * Component 19: Spray Report Sample (清洁喷雾样板报告)
 * ------------------------------------------------------------- */
.paper-report {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 28px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
    position: relative;
    overflow: hidden;
}

.paper-report::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: var(--color-accent);
}

.paper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.paper-header h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 !important;
}

.paper-stamp {
    font-size: 9px;
    font-weight: 700;
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
    padding: 4px 8px;
    border-radius: 4px;
    transform: rotate(4deg);
    text-transform: uppercase;
}

.paper-section {
    margin-bottom: 16px;
}

.paper-section h5 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-accent);
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

.paper-section p {
    font-size: 12px;
    color: var(--color-text-primary);
    line-height: 1.6;
    margin-bottom: 0 !important;
}

/* -------------------------------------------------------------
 * Component 20: Ammo Box (弹药库)
 * ------------------------------------------------------------- */
.ammo-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
}

.ammo-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

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

.ammo-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}

.ammo-card h5 {
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    color: var(--color-text-primary);
}

.ammo-card.highlight h5 {
    color: var(--color-accent);
}

.ammo-card ul {
    list-style: none;
    padding-left: 0;
    font-size: 11.5px;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ammo-card ul li {
    position: relative;
    padding-left: 12px;
}

.ammo-card ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* -------------------------------------------------------------
 * Component 21: Amplification Relay (放大接力看板)
 * ------------------------------------------------------------- */
.relay-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
}

.relay-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

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

.relay-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
}

.relay-card h5 {
    font-size: 14px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    color: var(--color-accent);
}

.relay-card span {
    font-size: 9px;
    font-weight: 700;
    color: var(--color-text-secondary);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 10px;
}

.relay-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 0 !important;
    text-align: left;
}

/* -------------------------------------------------------------
 * Component 22: Product Feedback Loop (反馈飞轮)
 * ------------------------------------------------------------- */
.feedback-loop-container {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px var(--color-shadow);
    margin: 35px 0;
    text-align: center;
}

.feedback-loop-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.feedback-loop-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.feedback-node {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px;
    background-color: var(--color-sidebar-bg);
}

.feedback-node.accent {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-bg), var(--color-blockquote-bg));
}

.feedback-node h5 {
    font-size: 13px;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    color: var(--color-text-primary);
}

.feedback-node.accent h5 {
    color: var(--color-accent);
}

.feedback-node p {
    font-size: 10.5px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 0 !important;
}

.feedback-arrow {
    font-size: 20px;
    color: var(--color-border);
}

/* 响应式调整 */
@media (max-width: 900px) {
    .sandtable-grid {
        grid-template-columns: 1fr;
    }
    .ammo-grid {
        grid-template-columns: 1fr;
    }
    .relay-grid {
        grid-template-columns: 1fr;
    }
    .feedback-loop-grid {
        grid-template-columns: 1fr;
    }
    .feedback-arrow {
        transform: rotate(90deg);
        margin: 4px 0;
    }
}

/* =============================================================
 * Module 04: Content Structuring (内容结构化) - 8 Components
 * ============================================================= */

/* -------------------------------------------------------------
 * Component 23: 成交三角与精神价值 (val-tri-model)
 * ------------------------------------------------------------- */
.val-tri-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 30px 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
    position: relative;
    overflow: hidden;
}

.val-tri-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    color: var(--color-text-primary);
    letter-spacing: 0.5px;
}

.val-tri-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

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

.val-tri-visual {
    position: relative;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 精神价值浮空卡 */
.val-spirit-badge {
    position: absolute;
    top: 5px;
    z-index: 10;
    background: linear-gradient(135deg, #8B5CF6, #D946EF);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    animation: float-badge 3s ease-in-out infinite;
}

@keyframes float-badge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.val-tri-shapes {
    width: 200px;
    height: 200px;
    position: relative;
}

.val-tri-bg-triangle {
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: linear-gradient(180deg, rgba(180, 83, 9, 0.08) 0%, rgba(180, 83, 9, 0.02) 100%);
    border: 2px dashed rgba(180, 83, 9, 0.3);
    position: absolute;
    top: 0;
    left: 0;
}

body.theme-dark .val-tri-bg-triangle {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.02) 100%);
    border-color: rgba(245, 158, 11, 0.4);
}

.val-tri-center {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 0 20px rgba(180, 83, 9, 0.4);
    z-index: 5;
}

body.theme-dark .val-tri-center {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

.val-tri-vertex {
    position: absolute;
    background-color: var(--color-bg);
    border: 1.5px solid var(--color-border);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 8px var(--color-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.val-tri-vertex.top {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-color: #EF4444;
    color: #EF4444;
}

.val-tri-vertex.left {
    bottom: -10px;
    left: -20px;
    border-color: #3B82F6;
    color: #3B82F6;
}

.val-tri-vertex.right {
    bottom: -10px;
    right: -20px;
    border-color: #10B981;
    color: #10B981;
}

.val-tri-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.val-tri-info-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    border-radius: 8px;
    background-color: var(--color-sidebar-bg);
}

.val-tri-info-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.val-tri-info-color.red { background-color: #EF4444; }
.val-tri-info-color.blue { background-color: #3B82F6; }
.val-tri-info-color.green { background-color: #10B981; }
.val-tri-info-color.purple { background-color: #A855F7; }

.val-tri-info-body h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}

.val-tri-info-body p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 24: 内容三层演化体系 (val-hierarchy-map)
 * ------------------------------------------------------------- */
.val-hier-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.val-hier-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.val-hier-flow {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.val-hier-level {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
    align-items: stretch;
}

@media (max-width: 576px) {
    .val-hier-level {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.val-hier-label-box {
    background: linear-gradient(135deg, var(--color-accent), rgba(180, 83, 9, 0.8));
    color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px;
    text-align: center;
}

body.theme-dark .val-hier-label-box {
    background: linear-gradient(135deg, var(--color-accent), rgba(245, 158, 11, 0.8));
}

.val-hier-label-box span {
    font-size: 9px;
    opacity: 0.8;
    text-transform: uppercase;
    font-weight: 600;
}

.val-hier-label-box h4 {
    font-size: 13px;
    font-weight: 700;
    margin: 2px 0 0 0 !important;
}

.val-hier-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background-color: var(--color-sidebar-bg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.val-hier-card h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 6px 0 !important;
}

.val-hier-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0 !important;
}

.val-hier-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10px;
    color: var(--color-border);
    font-size: 14px;
}

/* -------------------------------------------------------------
 * Component 25: 形容词 ➔ 证据翻译对照卡 (val-translation-card)
 * ------------------------------------------------------------- */
.val-trans-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.val-trans-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.val-trans-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.val-trans-row {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: center;
    gap: 16px;
}

@media (max-width: 600px) {
    .val-trans-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.val-trans-side {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    transition: all var(--transition-speed);
}

.val-trans-side.left {
    background-color: var(--color-sidebar-bg);
    text-align: right;
    color: var(--color-text-secondary);
}

@media (max-width: 600px) {
    .val-trans-side.left {
        text-align: left;
    }
}

.val-trans-side.right {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.04), rgba(180, 83, 9, 0.01));
    border-color: rgba(180, 83, 9, 0.3);
    text-align: left;
}

body.theme-dark .val-trans-side.right {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
    border-color: rgba(245, 158, 11, 0.4);
}

.val-trans-row:hover .val-trans-side.right {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-shadow);
    border-color: var(--color-accent);
}

.val-trans-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-block;
}

.val-trans-side.left .val-trans-badge {
    background-color: var(--color-border);
    color: var(--color-text-secondary);
}

.val-trans-side.right .val-trans-badge {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

.val-trans-text {
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 4px;
}

.val-trans-desc {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.val-trans-arrow-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}

@media (max-width: 600px) {
    .val-trans-arrow-box {
        transform: rotate(90deg);
        height: 20px;
    }
}

.val-trans-arrow-box span {
    font-size: 8px;
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}

/* -------------------------------------------------------------
 * Component 26: 核心-支撑聚焦结构图 (val-focus-shield)
 * ------------------------------------------------------------- */
.val-shield-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 28px 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.val-shield-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.val-shield-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.val-shield-center {
    width: 100%;
    max-width: 450px;
    background: linear-gradient(135deg, var(--color-accent), rgba(180, 83, 9, 0.8));
    color: #FFFFFF;
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(180, 83, 9, 0.3);
    position: relative;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
}

body.theme-dark .val-shield-center {
    background: linear-gradient(135deg, var(--color-accent), rgba(245, 158, 11, 0.8));
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

.val-shield-center .shield-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 8px;
}

.val-shield-center h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px 0 !important;
}

.val-shield-center p {
    font-size: 11.5px;
    opacity: 0.9;
    margin: 0 !important;
}

.val-shield-supports {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

@media (max-width: 600px) {
    .val-shield-supports {
        grid-template-columns: 1fr;
    }
}

.val-shield-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
    position: relative;
}

.val-shield-card::before {
    content: '';
    position: absolute;
    top: -24px;
    left: 50%;
    width: 2px;
    height: 24px;
    background-color: var(--color-border);
    display: block;
}

@media (max-width: 600px) {
    .val-shield-card::before {
        display: none;
    }
}

.val-shield-card h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 6px 0 !important;
}

.val-shield-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 27: 共情与向往情绪催化双翼模型 (emo-wings-model)
 * ------------------------------------------------------------- */
.emo-wings-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.emo-wings-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.emo-wings-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: stretch;
}

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

.emo-wing-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.emo-wing-card.empathy {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(59, 130, 246, 0.01));
    border-color: rgba(59, 130, 246, 0.3);
}

.emo-wing-card.aspiration {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04), rgba(16, 185, 129, 0.01));
    border-color: rgba(16, 185, 129, 0.3);
}

.emo-wing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.emo-wing-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}

.emo-wing-card.empathy .emo-wing-badge {
    background-color: #3B82F6;
    color: #FFFFFF;
}

.emo-wing-card.aspiration .emo-wing-badge {
    background-color: #10B981;
    color: #FFFFFF;
}

.emo-wing-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 !important;
}

.emo-wing-card.empathy h4 { color: #2563EB; }
.emo-wing-card.aspiration h4 { color: #059669; }

.emo-wing-formula {
    font-size: 11px;
    color: var(--color-text-secondary);
    background-color: var(--color-sidebar-bg);
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-family: monospace;
}

.emo-wing-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin-top: auto;
}

.emo-wing-list li {
    font-size: 11.5px;
    color: var(--color-text-primary);
    position: relative;
    padding-left: 14px;
}

.emo-wing-list li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: var(--color-accent);
}

.emo-wings-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .emo-wings-bridge {
        flex-direction: row;
        padding: 10px 0;
    }
}

.emo-bridge-arrow {
    color: var(--color-border);
    font-size: 16px;
}

@media (max-width: 768px) {
    .emo-bridge-arrow {
        transform: rotate(90deg);
    }
}

.emo-bridge-core {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(180, 83, 9, 0.3);
    text-align: center;
    line-height: 1.2;
}

body.theme-dark .emo-bridge-core {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

/* -------------------------------------------------------------
 * Component 28: 情绪能量与跳出留存仪表盘 (emo-retention-meter)
 * ------------------------------------------------------------- */
.emo-meter-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.emo-meter-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.emo-meter-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: center;
}

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

.emo-meter-chart {
    position: relative;
    border-left: 2px solid var(--color-border);
    border-bottom: 2px solid var(--color-border);
    height: 220px;
    padding: 10px;
    margin-left: 15px;
}

.emo-chart-y-axis {
    position: absolute;
    left: -24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 9px;
    color: var(--color-text-secondary);
}

.emo-chart-x-axis {
    position: absolute;
    bottom: -20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--color-text-secondary);
}

.emo-curve-group {
    width: 100%;
    height: 100%;
}

.emo-meter-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.emo-legend-item {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-sidebar-bg);
}

.emo-legend-item.active {
    border-color: var(--color-accent);
}

.emo-legend-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.emo-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.emo-legend-dot.red { background-color: #EF4444; }
.emo-legend-dot.gold { background-color: var(--color-accent); }

.emo-legend-header h5 {
    font-size: 12px;
    font-weight: 600;
    margin: 0 !important;
}

.emo-legend-item p {
    font-size: 10.5px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 29: 反直觉信任天平 (tru-balance-scale)
 * ------------------------------------------------------------- */
.tru-scale-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.tru-scale-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.tru-scale-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.tru-scale-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
    display: flex;
    flex-direction: column;
}

.tru-scale-side.active {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.04), rgba(180, 83, 9, 0.01));
    border-color: var(--color-accent);
}

body.theme-dark .tru-scale-side.active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
}

.tru-scale-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tru-scale-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.tru-scale-side.avoid .tru-scale-badge {
    background-color: var(--color-border);
    color: var(--color-text-secondary);
}

.tru-scale-side.active .tru-scale-badge {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

.tru-scale-header h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 !important;
}

.tru-scale-behavior {
    font-size: 11px;
    color: var(--color-text-secondary);
    border-left: 2px solid var(--color-border);
    padding-left: 10px;
    margin-bottom: 14px;
}

.tru-scale-side.active .tru-scale-behavior {
    border-color: var(--color-accent);
}

.tru-scale-result {
    font-size: 11.5px;
    margin-top: auto;
}

.tru-scale-side.avoid .tru-scale-result { color: #EF4444; }
.tru-scale-side.active .tru-scale-result { color: #10B981; }

/* -------------------------------------------------------------
 * Component 30: 权威靠山矩阵 (tru-authority-matrix)
 * ------------------------------------------------------------- */
.tru-matrix-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.tru-matrix-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.tru-matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

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

.tru-matrix-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
    transition: all var(--transition-speed);
}

.tru-matrix-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.tru-matrix-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--color-accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.tru-matrix-card h4 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 6px 0 !important;
}

.tru-matrix-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 0 10px 0 !important;
}

.tru-matrix-example {
    font-size: 10.5px;
    color: var(--color-accent);
    background-color: var(--color-bg);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}
}

/* -------------------------------------------------------------
 * Component 31: 卖点心智三原则对比卡 (usp-rules-card)
 * ------------------------------------------------------------- */
.usp-rules-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.usp-rules-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.usp-rules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.usp-rule-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.usp-rule-side.avoid {
    border-top: 4px solid #EF4444;
}

.usp-rule-side.prefer {
    border-top: 4px solid var(--color-accent);
}

.usp-rule-side h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px 0 !important;
}

.usp-rule-side.avoid h4 { color: #EF4444; }
.usp-rule-side.prefer h4 { color: var(--color-accent); }

.usp-rule-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.usp-rule-list li {
    font-size: 11.5px;
    line-height: 1.4;
    padding-left: 14px;
    position: relative;
}

.usp-rule-side.avoid .usp-rule-list li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #EF4444;
}

.usp-rule-side.prefer .usp-rule-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* -------------------------------------------------------------
 * Component 32: 卖点交付力象限矩阵 (usp-quad-matrix)
 * ------------------------------------------------------------- */
.usp-quad-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.usp-quad-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.usp-quad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    position: relative;
    padding: 10px;
}

@media (max-width: 600px) {
    .usp-quad-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

.usp-quad-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
    transition: all var(--transition-speed);
}

.usp-quad-card.gold {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.04), rgba(180, 83, 9, 0.01));
    border-color: var(--color-accent);
}

body.theme-dark .usp-quad-card.gold {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
}

.usp-quad-card.gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-shadow);
}

.usp-quad-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-block;
}

.usp-quad-card.gold .usp-quad-badge {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

.usp-quad-card:not(.gold) .usp-quad-badge {
    background-color: var(--color-border);
    color: var(--color-text-secondary);
}

.usp-quad-card h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}

.usp-quad-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 33: 显性痛点 vs 隐性痛点冰山推导 (pain-iceberg-chart)
 * ------------------------------------------------------------- */
.pain-ice-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.pain-ice-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.pain-ice-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    align-items: center;
}

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

.pain-ice-visual {
    position: relative;
    height: 200px;
    background: linear-gradient(180deg, #E0F2FE 0%, rgba(224, 242, 254, 0.2) 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #BAE6FD;
}

body.theme-dark .pain-ice-visual {
    background: linear-gradient(180deg, #0C4A6E 0%, rgba(12, 74, 110, 0.2) 100%);
    border-color: #0369A1;
}

.pain-ice-sea {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 120px;
    background-color: rgba(56, 189, 248, 0.2);
    border-top: 2px dashed #0284C7;
}

.pain-ice-node {
    position: absolute;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px var(--color-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pain-ice-node.above {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    border-color: #38BDF8;
}

.pain-ice-node.below {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.2);
}

body.theme-dark .pain-ice-node.below {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.pain-ice-node span:first-child {
    font-size: 8px;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.pain-ice-node.below span:first-child {
    color: var(--color-accent);
}

.pain-ice-node span:last-child {
    font-size: 12px;
    font-weight: 700;
}

.pain-ice-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pain-ice-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    background-color: var(--color-sidebar-bg);
}

.pain-ice-card h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}

.pain-ice-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 34: 痛点颗粒度进化漏斗 (pain-funnel-steps)
 * ------------------------------------------------------------- */
.pain-fun-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.pain-fun-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.pain-fun-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pain-fun-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    align-items: center;
}

@media (max-width: 576px) {
    .pain-fun-step {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.pain-fun-badge {
    text-align: center;
    border-radius: 8px;
    padding: 10px;
    font-size: 11px;
    font-weight: 700;
}

.pain-fun-step:nth-child(1) .pain-fun-badge {
    background-color: var(--color-sidebar-bg);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.pain-fun-step:nth-child(2) .pain-fun-badge {
    background-color: rgba(180, 83, 9, 0.1);
    color: var(--color-accent);
    border: 1px solid rgba(180, 83, 9, 0.3);
}

.pain-fun-step:nth-child(3) .pain-fun-badge {
    background: linear-gradient(135deg, var(--color-accent), rgba(180, 83, 9, 0.8));
    color: #FFFFFF;
}

body.theme-dark .pain-fun-step:nth-child(3) .pain-fun-badge {
    background: linear-gradient(135deg, var(--color-accent), rgba(245, 158, 11, 0.8));
}

.pain-fun-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    background-color: var(--color-sidebar-bg);
}

.pain-fun-step:nth-child(3) .pain-fun-card {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-bg), var(--color-blockquote-bg));
}

.pain-fun-card h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}

.pain-fun-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 35: 三大内容场景图鉴 (scene-trio-card)
 * ------------------------------------------------------------- */
.scene-trio-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.scene-trio-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.scene-trio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

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

.scene-trio-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
    transition: all var(--transition-speed);
}

.scene-trio-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.scene-trio-badge {
    font-size: 9px;
    font-weight: 700;
    background-color: var(--color-accent);
    color: #FFFFFF;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-block;
}

.scene-trio-card h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}

.scene-trio-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 0 10px 0 !important;
}

.scene-trio-example {
    font-size: 10.5px;
    background-color: var(--color-bg);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

/* -------------------------------------------------------------
 * Component 36: 场景 × 人群 × 痛点交叉策略沙盘 (scene-cross-sandtable)
 * ------------------------------------------------------------- */
.scene-cross-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.scene-cross-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.scene-cross-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    position: relative;
}

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

.scene-cross-column {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
}

.scene-cross-column.active {
    border-color: var(--color-accent);
}

.scene-cross-column h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 12px 0 !important;
    color: var(--color-accent);
}

.scene-cross-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scene-cross-item {
    font-size: 11px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 8px;
    border-radius: 6px;
}

.scene-cross-item.connected {
    border-color: var(--color-accent);
    background-color: var(--color-blockquote-bg);
    font-weight: 600;
}

.scene-cross-result {
    margin-top: 20px;
    border: 1px dashed var(--color-accent);
    border-radius: 10px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.03), rgba(180, 83, 9, 0.01));
    font-size: 11.5px;
    text-align: center;
}

body.theme-dark .scene-cross-result {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.01));
}

/* -------------------------------------------------------------
 * Component 37: 人群金字塔 (user-pyramid-graph)
 * ------------------------------------------------------------- */
.user-pyr-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.user-pyr-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.user-pyr-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.user-pyr-tier {
    text-align: center;
    border-radius: 8px;
    padding: 14px;
    transition: all var(--transition-speed);
}

.user-pyr-tier:hover {
    transform: translateY(-2px);
}

.user-pyr-tier.tier-1 {
    width: 50%;
    background: linear-gradient(135deg, var(--color-accent), rgba(180, 83, 9, 0.8));
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.3);
}

body.theme-dark .user-pyr-tier.tier-1 {
    background: linear-gradient(135deg, var(--color-accent), rgba(245, 158, 11, 0.8));
}

.user-pyr-tier.tier-2 {
    width: 75%;
    border: 1.5px solid var(--color-accent);
    background-color: var(--color-blockquote-bg);
    color: var(--color-accent);
}

.user-pyr-tier.tier-3 {
    width: 100%;
    border: 1px solid var(--color-border);
    background-color: var(--color-sidebar-bg);
    color: var(--color-text-primary);
}

.user-pyr-tier h5 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px 0 !important;
}

.user-pyr-tier p {
    font-size: 11px;
    opacity: 0.9;
    margin: 0 !important;
}

.user-pyr-tier.tier-3 p {
    color: var(--color-text-secondary);
}

/* -------------------------------------------------------------
 * Component 38: 喷雾用户拆分案板 (user-case-matrix)
 * ------------------------------------------------------------- */
.user-mat-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.user-mat-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.user-mat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .user-mat-grid {
        grid-template-columns: 1fr;
    }
}

.user-mat-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}

.user-mat-badge {
    font-size: 9px;
    font-weight: 700;
    background-color: var(--color-accent);
    color: #FFFFFF;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-block;
}

.user-mat-card h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}

.user-mat-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 39: 卖点 ➔ 买点转化天平 (buy-vs-sell-scale)
 * ------------------------------------------------------------- */
.buy-sell-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.buy-sell-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.buy-sell-grid {
    display: grid;
    grid-template-columns: 1fr 50px 1fr;
    gap: 16px;
    align-items: center;
}

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

.buy-sell-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.buy-sell-side.buyer {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.04), rgba(180, 83, 9, 0.01));
}

body.theme-dark .buy-sell-side.buyer {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
}

.buy-sell-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 10px;
    display: inline-block;
}

.buy-sell-side.seller .buy-sell-badge {
    background-color: var(--color-border);
    color: var(--color-text-secondary);
}

.buy-sell-side.buyer .buy-sell-badge {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

.buy-sell-side h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}

.buy-sell-side.buyer h4 {
    color: var(--color-accent);
}

.buy-sell-side p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

.buy-sell-connector {
    text-align: center;
    color: var(--color-accent);
    font-size: 20px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .buy-sell-connector {
        transform: rotate(90deg);
        height: 20px;
        line-height: 20px;
    }
}

/* -------------------------------------------------------------
 * Component 40: 四大买点钩子分类箱 (buy-hook-grid)
 * ------------------------------------------------------------- */
.buy-hook-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.buy-hook-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.buy-hook-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .buy-hook-grid {
        grid-template-columns: 1fr;
    }
}

.buy-hook-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}

.buy-hook-badge {
    font-size: 9px;
    font-weight: 700;
    background-color: var(--color-accent);
    color: #FFFFFF;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-block;
}

.buy-hook-card h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}

.buy-hook-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 41: 需求分类对照 (need-balance-chart)
 * ------------------------------------------------------------- */
.need-bal-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.need-bal-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.need-bal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.need-bal-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.need-bal-side.active {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.04), rgba(180, 83, 9, 0.01));
}

body.theme-dark .need-bal-side.active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
}

.need-bal-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 10px;
    display: inline-block;
}

.need-bal-side.avoid .need-bal-badge {
    background-color: var(--color-border);
    color: var(--color-text-secondary);
}

.need-bal-side.active .need-bal-badge {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

.need-bal-side h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}

.need-bal-side.active h4 {
    color: var(--color-accent);
}

.need-bal-side p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 42: 视觉与文字需求并行轨道 (need-split-rail)
 * ------------------------------------------------------------- */
.need-split-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.need-split-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.need-split-rails {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.need-rail {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}

.need-rail h4 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 10px 0 !important;
    border-bottom: 1.5px solid var(--color-border);
    padding-bottom: 8px;
}

.need-rail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.need-rail-list li {
    font-size: 11px;
    line-height: 1.4;
    padding-left: 14px;
    position: relative;
}

.need-rail-list li::before {
    content: '▪';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* -------------------------------------------------------------
 * Component 43: 表达形式与内核分工结构板 (hook-shell-core)
 * ------------------------------------------------------------- */
.hook-shell-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.hook-shell-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.hook-shell-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.hook-shell-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.hook-shell-card.accent {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.04), rgba(180, 83, 9, 0.01));
}

body.theme-dark .hook-shell-card.accent {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
}

.hook-shell-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 10px;
    display: inline-block;
}

.hook-shell-card:not(.accent) .hook-shell-badge {
    background-color: var(--color-border);
    color: var(--color-text-secondary);
}

.hook-shell-card.accent .hook-shell-badge {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

.hook-shell-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}

.hook-shell-card.accent h4 {
    color: var(--color-accent);
}

.hook-shell-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 44: 黄金前三秒表达形式堆叠 (hook-stack-module)
 * ------------------------------------------------------------- */
.hook-stack-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.hook-stack-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.hook-stack-layers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.hook-stack-layer {
    width: 100%;
    max-width: 450px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 16px;
    background-color: var(--color-sidebar-bg);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all var(--transition-speed);
}

.hook-stack-layer:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
}

.hook-stack-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.hook-stack-body h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 2px 0 !important;
}

.hook-stack-body p {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 45: 七步说服链流水线 Timeline (pers-seven-timeline)
 * ------------------------------------------------------------- */
.pers-seven-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.pers-seven-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.pers-seven-flow {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pers-seven-node {
    display: grid;
    grid-template-columns: 40px 100px 1fr;
    gap: 16px;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-sidebar-bg);
}

.pers-seven-node:hover {
    border-color: var(--color-accent);
}

.pers-seven-step {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
}

.pers-seven-label {
    font-size: 12.5px;
    font-weight: 600;
}

.pers-seven-desc {
    font-size: 11px;
    color: var(--color-text-secondary);
}

/* -------------------------------------------------------------
 * Component 46: 说服链断裂测试诊断 (pers-chain-test)
 * ------------------------------------------------------------- */
.pers-test-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.pers-test-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.pers-test-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.pers-test-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
    border-top: 4px solid #EF4444;
}

.pers-test-card h4 {
    font-size: 13.5px;
    font-weight: 600;
    color: #EF4444;
    margin: 0 0 10px 0 !important;
}

.pers-test-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.pers-test-list li {
    font-size: 11px;
    line-height: 1.4;
    padding-left: 14px;
    position: relative;
}

.pers-test-list li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #EF4444;
}

/* -------------------------------------------------------------
 * Component 47: 五块拼图认知对齐拼图 (align-five-puzzle)
 * ------------------------------------------------------------- */
.align-five-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.align-five-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.align-five-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

@media (max-width: 900px) {
    .align-five-grid {
        grid-template-columns: 1fr;
    }
}

.align-five-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
    transition: all var(--transition-speed);
}

.align-five-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.align-five-card .align-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    margin: 0 auto 8px auto;
}

.align-five-card h5 {
    font-size: 12.5px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}

.align-five-card p {
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.3;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 48: 清洁喷雾认知对齐实案大账本 (align-real-ledger)
 * ------------------------------------------------------------- */
.align-ledg-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
    overflow-x: auto;
}

.align-ledg-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.align-ledg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.align-ledg-table th {
    background-color: var(--color-sidebar-bg);
    color: var(--color-accent);
    font-weight: 700;
    padding: 10px;
    border: 1px solid var(--color-border);
    text-align: left;
}

.align-ledg-table td {
    padding: 10px;
    border: 1px solid var(--color-border);
    line-height: 1.4;
}

.align-ledg-table tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.01);
}

body.theme-dark .align-ledg-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.01);
}
}

/* =============================================================
 * Module 05: Content Factorization (内容因子化) - 16 Components
 * ============================================================= */

/* -------------------------------------------------------------
 * Component 49: 因子四维分类沙盒 (fact-category-sandbox)
 * ------------------------------------------------------------- */
.fact-cat-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-cat-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .fact-cat-grid {
        grid-template-columns: 1fr;
    }
}

.fact-cat-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.fact-cat-card.accent {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.04), rgba(180, 83, 9, 0.01));
}

body.theme-dark .fact-cat-card.accent {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
}

.fact-cat-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-block;
}

.fact-cat-card:not(.accent) .fact-cat-badge {
    background-color: var(--color-border);
    color: var(--color-text-secondary);
}

.fact-cat-card.accent .fact-cat-badge {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

.fact-cat-card h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}

.fact-cat-card.accent h4 {
    color: var(--color-accent);
}

.fact-cat-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 50: 因子乘法公式 (fact-multiply-formula)
 * ------------------------------------------------------------- */
.fact-mult-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-mult-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.fact-mult-equation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .fact-mult-equation {
        flex-direction: column;
        gap: 8px;
    }
}

.fact-mult-box {
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 16px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
    min-width: 140px;
    transition: all var(--transition-speed);
}

.fact-mult-box:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.fact-mult-box span {
    font-size: 10px;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 4px;
}

.fact-mult-box h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 !important;
}

.fact-mult-sign {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .fact-mult-sign {
        transform: rotate(90deg);
        height: 16px;
    }
}

.fact-mult-box.result {
    background: linear-gradient(135deg, var(--color-accent), rgba(180, 83, 9, 0.8));
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.3);
}

body.theme-dark .fact-mult-box.result {
    background: linear-gradient(135deg, var(--color-accent), rgba(245, 158, 11, 0.8));
}

.fact-mult-box.result span {
    color: rgba(255, 255, 255, 0.8);
}

.fact-mult-desc {
    font-size: 11px;
    color: var(--color-text-secondary);
    text-align: center;
    border-top: 1px dashed var(--color-border);
    padding-top: 14px;
    line-height: 1.4;
}

/* -------------------------------------------------------------
 * Component 51: 五大视觉因子并列 (fact-visual-trio)
 * ------------------------------------------------------------- */
.fact-vis-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-vis-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-vis-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

@media (max-width: 900px) {
    .fact-vis-grid {
        grid-template-columns: 1fr;
    }
}

.fact-vis-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
    transition: all var(--transition-speed);
}

.fact-vis-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.fact-vis-card .vis-badge {
    font-size: 9px;
    font-weight: 700;
    background-color: var(--color-accent);
    color: #FFFFFF;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 6px;
}

.fact-vis-card h5 {
    font-size: 12.5px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}

.fact-vis-card p {
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.3;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 52: 实验类视觉因子设计对比 (fact-exp-design)
 * ------------------------------------------------------------- */
.fact-exp-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-exp-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-exp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.fact-exp-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.fact-exp-side.avoid { border-top: 4px solid #EF4444; }
.fact-exp-side.prefer { border-top: 4px solid var(--color-accent); }

.fact-exp-side h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 10px 0 !important;
}

.fact-exp-side.avoid h4 { color: #EF4444; }
.fact-exp-side.prefer h4 { color: var(--color-accent); }

.fact-exp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.fact-exp-list li {
    font-size: 11px;
    line-height: 1.4;
    padding-left: 14px;
    position: relative;
}

.fact-exp-side.avoid .fact-exp-list li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #EF4444;
}

.fact-exp-side.prefer .fact-exp-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* -------------------------------------------------------------
 * Component 53: 五大脚本因子架构 (fact-script-arch)
 * ------------------------------------------------------------- */
.fact-scr-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-scr-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-scr-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

@media (max-width: 900px) {
    .fact-scr-grid {
        grid-template-columns: 1fr;
    }
}

.fact-scr-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
    transition: all var(--transition-speed);
}

.fact-scr-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.fact-scr-card .scr-badge {
    font-size: 9px;
    font-weight: 700;
    background-color: var(--color-accent);
    color: #FFFFFF;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 6px;
}

.fact-scr-card h5 {
    font-size: 12.5px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}

.fact-scr-card p {
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.3;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 54: 前三秒开场钩子库 (fact-hook-tags)
 * ------------------------------------------------------------- */
.fact-hook-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-hook-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-hook-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .fact-hook-grid {
        grid-template-columns: 1fr;
    }
}

.fact-hook-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}

.fact-hook-badge {
    font-size: 9px;
    font-weight: 700;
    background-color: var(--color-accent);
    color: #FFFFFF;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-block;
}

.fact-hook-card h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}

.fact-hook-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 55: 专攻聚焦与发散天平 (fact-focus-scale)
 * ------------------------------------------------------------- */
.fact-foc-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-foc-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-foc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.fact-foc-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.fact-foc-side.active {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.04), rgba(180, 83, 9, 0.01));
}

body.theme-dark .fact-foc-side.active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
}

.fact-foc-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 10px;
    display: inline-block;
}

.fact-foc-side.avoid .fact-foc-badge {
    background-color: var(--color-border);
    color: var(--color-text-secondary);
}

.fact-foc-side.active .fact-foc-badge {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

.fact-foc-side h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}

.fact-foc-side.active h4 {
    color: var(--color-accent);
}

.fact-foc-side p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 56: 制造专攻五步循环 (fact-five-steps)
 * ------------------------------------------------------------- */
.fact-five-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-five-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-five-flow {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fact-five-node {
    display: grid;
    grid-template-columns: 40px 100px 1fr;
    gap: 16px;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-sidebar-bg);
}

.fact-five-node:hover {
    border-color: var(--color-accent);
}

.fact-five-step {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
}

.fact-five-label {
    font-size: 12.5px;
    font-weight: 600;
}

.fact-five-desc {
    font-size: 11px;
    color: var(--color-text-secondary);
}

/* -------------------------------------------------------------
 * Component 57: 爆款视频拆解秒级时间轨 (fact-split-timeline)
 * ------------------------------------------------------------- */
.fact-split-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-split-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-split-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fact-split-row {
    display: grid;
    grid-template-columns: 80px 140px 1fr;
    gap: 16px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-sidebar-bg);
}

.fact-split-row:hover {
    border-color: var(--color-accent);
}

.fact-split-time {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
}

.fact-split-factor {
    font-size: 12px;
    font-weight: 600;
}

.fact-split-detail {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* -------------------------------------------------------------
 * Component 58: 画面标注法七维图 (fact-seven-spider)
 * ------------------------------------------------------------- */
.fact-seven-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-seven-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-seven-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

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

.fact-seven-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
}

.fact-seven-card h5 {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 4px 0 !important;
}

.fact-seven-card p {
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.3;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 59: 三张核心表流转大飞轮 (fact-three-tables)
 * ------------------------------------------------------------- */
.fact-three-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-three-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-three-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    text-align: center;
}

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

.fact-three-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    background-color: var(--color-sidebar-bg);
}

.fact-three-card h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 6px 0 !important;
}

.fact-three-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

.fact-three-arrow {
    font-size: 20px;
    color: var(--color-border);
}

@media (max-width: 768px) {
    .fact-three-arrow {
        transform: rotate(90deg);
        height: 20px;
    }
}

/* -------------------------------------------------------------
 * Component 60: 因子库素材大账本 (fact-ledger-demo)
 * ------------------------------------------------------------- */
.fact-ledg-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
    overflow-x: auto;
}

.fact-ledg-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-ledg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.fact-ledg-table th {
    background-color: var(--color-sidebar-bg);
    color: var(--color-accent);
    font-weight: 700;
    padding: 10px;
    border: 1px solid var(--color-border);
    text-align: left;
}

.fact-ledg-table td {
    padding: 10px;
    border: 1px solid var(--color-border);
    line-height: 1.4;
}

.fact-ledg-table tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.01);
}

body.theme-dark .fact-ledg-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.01);
}

/* -------------------------------------------------------------
 * Component 61: 证据矩阵连线卡 (fact-evidence-matrix)
 * ------------------------------------------------------------- */
.fact-ev-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-ev-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-ev-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.fact-ev-column {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}

.fact-ev-column h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 10px 0 !important;
}

.fact-ev-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.fact-ev-list li {
    font-size: 11px;
    line-height: 1.4;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 8px;
    border-radius: 6px;
}

/* -------------------------------------------------------------
 * Component 62: 控制变量测试流程 (fact-control-vars)
 * ------------------------------------------------------------- */
.fact-ctrl-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-ctrl-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-ctrl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.fact-ctrl-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.fact-ctrl-side.avoid { border-top: 4px solid #EF4444; }
.fact-ctrl-side.active { border-top: 4px solid var(--color-accent); }

.fact-ctrl-side h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 10px 0 !important;
}

.fact-ctrl-side.avoid h4 { color: #EF4444; }
.fact-ctrl-side.active h4 { color: var(--color-accent); }

.fact-ctrl-desc {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* -------------------------------------------------------------
 * Component 63: 抄-超-创进化滑梯 (fact-climb-stairs)
 * ------------------------------------------------------------- */
.fact-stairs-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-stairs-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-stairs-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fact-stairs-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    align-items: center;
}

@media (max-width: 576px) {
    .fact-stairs-step {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.fact-stairs-badge {
    text-align: center;
    border-radius: 8px;
    padding: 10px;
    font-size: 11px;
    font-weight: 700;
}

.fact-stairs-step:nth-child(1) .fact-stairs-badge {
    background-color: var(--color-sidebar-bg);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.fact-stairs-step:nth-child(2) .fact-stairs-badge {
    background-color: rgba(180, 83, 9, 0.1);
    color: var(--color-accent);
    border: 1px solid rgba(180, 83, 9, 0.3);
}

.fact-stairs-step:nth-child(3) .fact-stairs-badge {
    background: linear-gradient(135deg, var(--color-accent), rgba(180, 83, 9, 0.8));
    color: #FFFFFF;
}

body.theme-dark .fact-stairs-step:nth-child(3) .fact-stairs-badge {
    background: linear-gradient(135deg, var(--color-accent), rgba(245, 158, 11, 0.8));
}

.fact-stairs-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    background-color: var(--color-sidebar-bg);
}

.fact-stairs-step:nth-child(3) .fact-stairs-card {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-bg), var(--color-blockquote-bg));
}

.fact-stairs-card h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}

.fact-stairs-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 64: 放量两阶段流程图 (fact-scale-flow)
 * ------------------------------------------------------------- */
.fact-scale-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-scale-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-scale-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

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

.fact-scale-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.fact-scale-card.accent {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.04), rgba(180, 83, 9, 0.01));
}

body.theme-dark .fact-scale-card.accent {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
}

.fact-scale-card h4 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 6px 0 !important;
}

.fact-scale-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

.fact-scale-arrow {
    text-align: center;
    color: var(--color-accent);
    font-size: 20px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .fact-scale-arrow {
        transform: rotate(90deg);
        height: 20px;
    }
}
}

/* =============================================================
 * Module 06: Data & Growth Engine (数据与增长引擎) - 14 Components
 * ============================================================= */

/* -------------------------------------------------------------
 * Component 65: 盈亏平衡 ROI 计算器 (data-bal)
 * ------------------------------------------------------------- */
.data-bal-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-bal-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-bal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

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

.data-bal-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
    transition: all var(--transition-speed);
}

.data-bal-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.data-bal-card.highlight {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.04), rgba(180, 83, 9, 0.01));
}

body.theme-dark .data-bal-card.highlight {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
}

.data-bal-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 10px 0 !important;
}

.data-bal-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 66: 多渠道联动作战大账本 (data-chan)
 * ------------------------------------------------------------- */
.data-chan-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-chan-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-chan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

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

.data-chan-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.data-chan-side.loss { border-top: 4px solid #EF4444; }
.data-chan-side.profit { border-top: 4px solid var(--color-accent); }

.data-chan-side h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 12px 0 !important;
}

.data-chan-side.loss h4 { color: #EF4444; }
.data-chan-side.profit h4 { color: var(--color-accent); }

.data-chan-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}

.data-chan-list li {
    font-size: 11px;
    line-height: 1.4;
    padding-left: 14px;
    position: relative;
}

.data-chan-side.loss .data-chan-list li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #EF4444;
}

.data-chan-side.profit .data-chan-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

.data-chan-total {
    border: 1.5px solid var(--color-accent);
    border-radius: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.05), rgba(180, 83, 9, 0.01));
    text-align: center;
}

body.theme-dark .data-chan-total {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
}

.data-chan-total h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 4px 0 !important;
}

.data-chan-total p {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 67: 结果-过程-诊断三层数据看板 (data-dash)
 * ------------------------------------------------------------- */
.data-dash-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-dash-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-dash-layers {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.data-dash-layer {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background-color: var(--color-sidebar-bg);
}

.data-dash-layer:hover {
    border-color: var(--color-accent);
}

.data-dash-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
}

.data-dash-info h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}

.data-dash-info p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 68: 核心指标链与基线对照盘 (data-pipe)
 * ------------------------------------------------------------- */
.data-pipe-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-pipe-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-pipe-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 900px) {
    .data-pipe-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.data-pipe-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
}

.data-pipe-card h5 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 6px 0 !important;
}

.data-pipe-card .pipe-num {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.data-pipe-card p {
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.3;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 69: 卖点生命周期十周趋势沙盒 (data-life)
 * ------------------------------------------------------------- */
.data-life-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-life-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-life-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

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

.data-life-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}

.data-life-card.active {
    border-color: var(--color-accent);
}

.data-life-badge {
    font-size: 9px;
    font-weight: 700;
    color: #FFFFFF;
    background-color: var(--color-accent);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.data-life-card h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}

.data-life-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 70: 卖点无缝接力对比模型 (data-relay)
 * ------------------------------------------------------------- */
.data-relay-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-relay-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-relay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.data-relay-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.data-relay-side.bad { border-top: 4px solid #EF4444; }
.data-relay-side.good { border-top: 4px solid var(--color-accent); }

.data-relay-side h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 8px 0 !important;
}

.data-relay-side.bad h4 { color: #EF4444; }
.data-relay-side.good h4 { color: var(--color-accent); }

.data-relay-desc {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* -------------------------------------------------------------
 * Component 71: 千川掉量排查决策树 (data-tree)
 * ------------------------------------------------------------- */
.data-tree-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-tree-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-tree-flow {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.data-tree-node {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-sidebar-bg);
}

.data-tree-step {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
}

.data-tree-detail h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}

.data-tree-detail p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 72: 千川五层故障诊断链路 (data-five)
 * ------------------------------------------------------------- */
.data-five-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-five-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-five-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

@media (max-width: 1024px) {
    .data-five-grid {
        grid-template-columns: 1fr;
    }
}

.data-five-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
}

.data-five-card h5 {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 6px 0 !important;
}

.data-five-badge {
    font-size: 9px;
    font-weight: 700;
    background-color: #EF4444;
    color: #FFFFFF;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 6px;
}

.data-five-card p {
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.3;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 73: 秒退污染四阶段账目 (data-spir)
 * ------------------------------------------------------------- */
.data-spir-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
    overflow-x: auto;
}

.data-spir-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-spir-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.data-spir-table th {
    background-color: var(--color-sidebar-bg);
    color: var(--color-accent);
    font-weight: 700;
    padding: 10px;
    border: 1px solid var(--color-border);
    text-align: left;
}

.data-spir-table td {
    padding: 10px;
    border: 1px solid var(--color-border);
    line-height: 1.4;
}

.data-spir-table tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.01);
}

body.theme-dark .data-spir-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.01);
}

/* -------------------------------------------------------------
 * Component 74: 越救越死恶性循环飞轮 (data-wheel)
 * ------------------------------------------------------------- */
.data-wheel-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-wheel-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-wheel-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    text-align: center;
}

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

.data-wheel-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    background-color: var(--color-sidebar-bg);
}

.data-wheel-card.alert {
    border-color: #EF4444;
}

.data-wheel-card h5 {
    font-size: 13px;
    font-weight: 600;
    color: #EF4444;
    margin: 0 0 6px 0 !important;
}

.data-wheel-card.alert h5 {
    color: #EF4444;
}

.data-wheel-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

.data-wheel-arrow {
    font-size: 20px;
    color: #EF4444;
}

@media (max-width: 768px) {
    .data-wheel-arrow {
        transform: rotate(90deg);
        height: 20px;
    }
}

/* -------------------------------------------------------------
 * Component 75: 三级运营复盘周期时钟 (data-meet)
 * ------------------------------------------------------------- */
.data-meet-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-meet-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-meet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

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

.data-meet-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
}

.data-meet-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 8px 0 !important;
}

.data-meet-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 76: 千川掉量红灯秒查速查表 (data-quick)
 * ------------------------------------------------------------- */
.data-quick-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
    overflow-x: auto;
}

.data-quick-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-quick-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.data-quick-table th {
    background-color: var(--color-sidebar-bg);
    color: var(--color-accent);
    font-weight: 700;
    padding: 10px;
    border: 1px solid var(--color-border);
    text-align: left;
}

.data-quick-table td {
    padding: 10px;
    border: 1px solid var(--color-border);
    line-height: 1.4;
}

.data-quick-table tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.01);
}

body.theme-dark .data-quick-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.01);
}

/* -------------------------------------------------------------
 * Component 77: LTV 实算收益阶梯 (data-ladder)
 * ------------------------------------------------------------- */
.data-ladder-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-ladder-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-ladder-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.data-ladder-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    align-items: center;
}

@media (max-width: 576px) {
    .data-ladder-step {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.data-ladder-badge {
    text-align: center;
    border-radius: 8px;
    padding: 10px;
    font-size: 11px;
    font-weight: 700;
}

.data-ladder-step:nth-child(1) .data-ladder-badge {
    background-color: rgba(239, 68, 68, 0.1);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.data-ladder-step:nth-child(2) .data-ladder-badge {
    background-color: rgba(180, 83, 9, 0.1);
    color: var(--color-accent);
    border: 1px solid rgba(180, 83, 9, 0.3);
}

.data-ladder-step:nth-child(3) .data-ladder-badge {
    background: linear-gradient(135deg, var(--color-accent), rgba(180, 83, 9, 0.8));
    color: #FFFFFF;
}

body.theme-dark .data-ladder-step:nth-child(3) .data-ladder-badge {
    background: linear-gradient(135deg, var(--color-accent), rgba(245, 158, 11, 0.8));
}

.data-ladder-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    background-color: var(--color-sidebar-bg);
}

.data-ladder-step:nth-child(3) .data-ladder-card {
    border-color: var(--color-accent);
}

.data-ladder-card h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}

.data-ladder-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 78: 品类 LTV 与出价策略矩阵 (data-cat)
 * ------------------------------------------------------------- */
.data-cat-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-cat-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.data-cat-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.data-cat-side h4 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 10px 0 !important;
}

.data-cat-desc {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* =============================================================
 * Module 05 & 06 Supplementary Components (补充图文组件) - 15 Components
 * ============================================================= */

/* -------------------------------------------------------------
 * Component 79: 因子提取实案对照板 (fact-ex)
 * ------------------------------------------------------------- */
.fact-ex-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-ex-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-ex-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

.fact-ex-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}

.fact-ex-card h4 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 10px 0 !important;
}

.fact-ex-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.fact-ex-list li {
    font-size: 11px;
    line-height: 1.4;
    padding-left: 14px;
    position: relative;
}

.fact-ex-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* -------------------------------------------------------------
 * Component 80: 经典特征招牌动作图鉴 (fact-act)
 * ------------------------------------------------------------- */
.fact-act-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-act-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-act-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

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

.fact-act-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
}

.fact-act-card h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 6px 0 !important;
}

.fact-act-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 81: 台词无废话压缩率对照盘 (fact-comp)
 * ------------------------------------------------------------- */
.fact-comp-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-comp-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-comp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

.fact-comp-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}

.fact-comp-card.bad { border-top: 4px solid #EF4444; }
.fact-comp-card.good { border-top: 4px solid var(--color-accent); }

.fact-comp-card h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 8px 0 !important;
}

.fact-comp-card.bad h4 { color: #EF4444; }
.fact-comp-card.good h4 { color: var(--color-accent); }

.fact-comp-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 82: 专攻定位一页纸沙盒 (fact-sheet)
 * ------------------------------------------------------------- */
.fact-sheet-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-sheet-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-sheet-box {
    border: 1.5px solid var(--color-accent);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.fact-sheet-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-border);
}

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

.fact-sheet-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-accent);
}

.fact-sheet-value {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* -------------------------------------------------------------
 * Component 83: 脚本分子级示范模板 (fact-annot)
 * ------------------------------------------------------------- */
.fact-annot-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
    overflow-x: auto;
}

.fact-annot-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-annot-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.fact-annot-table th {
    background-color: var(--color-sidebar-bg);
    color: var(--color-accent);
    font-weight: 700;
    padding: 10px;
    border: 1px solid var(--color-border);
}

.fact-annot-table td {
    padding: 10px;
    border: 1px solid var(--color-border);
    line-height: 1.4;
}

/* -------------------------------------------------------------
 * Component 84: 专攻追踪表数据卡 (fact-track)
 * ------------------------------------------------------------- */
.fact-track-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
    overflow-x: auto;
}

.fact-track-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-track-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.fact-track-table th {
    background-color: var(--color-sidebar-bg);
    color: var(--color-accent);
    font-weight: 700;
    padding: 10px;
    border: 1px solid var(--color-border);
}

.fact-track-table td {
    padding: 10px;
    border: 1px solid var(--color-border);
    line-height: 1.4;
}

/* -------------------------------------------------------------
 * Component 85: 千川 A/B 分流变量测试跑道 (fact-ab)
 * ------------------------------------------------------------- */
.fact-ab-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-ab-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-ab-runways {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fact-ab-runway {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}

.fact-ab-runway.active {
    border-color: var(--color-accent);
}

.fact-ab-runway h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}

.fact-ab-runway.active h4 { color: var(--color-accent); }

.fact-ab-runway p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 86: 光影运镜高光感对比盘 (fact-scene)
 * ------------------------------------------------------------- */
.fact-scene-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.fact-scene-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.fact-scene-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

.fact-scene-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-sidebar-bg);
}

.fact-scene-card.avoid { border-top: 4px solid #EF4444; }
.fact-scene-card.prefer { border-top: 4px solid var(--color-accent); }

.fact-scene-card h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 8px 0 !important;
}

.fact-scene-card.avoid h4 { color: #EF4444; }
.fact-scene-card.prefer h4 { color: var(--color-accent); }

.fact-scene-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 87: 毛利率对投放容错空间柱状图 (data-marg)
 * ------------------------------------------------------------- */
.data-marg-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-marg-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-marg-bars {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.data-marg-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    align-items: center;
}

.data-marg-label {
    font-size: 12px;
    font-weight: 600;
}

.data-marg-bar-wrapper {
    background-color: var(--color-border);
    border-radius: 6px;
    height: 12px;
    position: relative;
    width: 100%;
}

.data-marg-bar {
    background-color: var(--color-accent);
    border-radius: 6px;
    height: 100%;
    transition: width var(--transition-speed);
}

.data-marg-bar.low {
    background-color: #EF4444;
}

.data-marg-info {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 4px;
    text-align: right;
}

/* -------------------------------------------------------------
 * Component 88: 转化率漏斗卡点排查图 (data-funnel)
 * ------------------------------------------------------------- */
.data-funnel-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-funnel-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-funnel-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.data-funnel-step {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
    position: relative;
}

.data-funnel-step.alert {
    border-color: #EF4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), rgba(239, 68, 68, 0.01));
}

.data-funnel-step h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}

.data-funnel-step.alert h5 {
    color: #EF4444;
}

.data-funnel-step p {
    font-size: 10.5px;
    color: var(--color-text-secondary);
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 89: 多轨道并行接力飞轮模型 (data-multi)
 * ------------------------------------------------------------- */
.data-multi-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-multi-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-multi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

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

.data-multi-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
}

.data-multi-card h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 6px 0 !important;
}

.data-multi-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 90: 掉量假摔与真跌甄别盘 (data-fake)
 * ------------------------------------------------------------- */
.data-fake-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-fake-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-fake-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

.data-fake-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}

.data-fake-card h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 6px 0 !important;
}

.data-fake-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 91: 千川掉量止血三板斧面板 (data-stop)
 * ------------------------------------------------------------- */
.data-stop-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-stop-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-stop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

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

.data-stop-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
    border-top: 4px solid var(--color-accent);
}

.data-stop-card h5 {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 8px 0 !important;
}

.data-stop-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* -------------------------------------------------------------
 * Component 92: 周复盘会 SOP 流程画布 (data-sop)
 * ------------------------------------------------------------- */
.data-sop-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-sop-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-sop-flow {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.data-sop-node {
    display: grid;
    grid-template-columns: 80px 100px 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-sidebar-bg);
}

.data-sop-step {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
}

.data-sop-label {
    font-size: 13px;
    font-weight: 600;
}

.data-sop-desc {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* -------------------------------------------------------------
 * Component 93: 复购三维动力系统 (data-eng)
 * ------------------------------------------------------------- */
.data-eng-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}

.data-eng-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.data-eng-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

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

.data-eng-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
}

.data-eng-card h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 6px 0 !important;
}

.data-eng-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* =============================================================
 * Module 7: AI Empowerment Components (ai-core to ai-ratio)
 * ============================================================= */

/* Component 72: AI 双核能力与决策边界 */
.ai-core-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-core-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-core-boundary {
    border: 1px solid var(--color-accent);
    background-color: rgba(180, 83, 9, 0.05);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 12px;
}
.ai-core-boundary strong {
    color: var(--color-accent);
}
.ai-core-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .ai-core-grid {
        grid-template-columns: 1fr;
    }
}
.ai-core-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}
.ai-core-card h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 6px 0 !important;
}
.ai-core-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* Component 73: 小团队倒逼老组织 */
.ai-org-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-org-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-org-comparison {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ai-org-row {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}
.ai-org-row.accent {
    border-color: var(--color-accent);
    background-color: rgba(180, 83, 9, 0.02);
}
.ai-org-row h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}
.ai-org-row.accent h5 {
    color: var(--color-accent);
}
.ai-org-row p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}
.ai-org-bench {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-bg);
    padding: 12px;
    text-align: center;
    font-size: 11px;
    margin-top: 10px;
}

/* Component 74: 三大信息源自动获取管道 */
.ai-fetch-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-fetch-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-fetch-pipeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .ai-fetch-pipeline {
        grid-template-columns: 1fr;
    }
}
.ai-fetch-track {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}
.ai-fetch-track h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 8px 0 !important;
}
.ai-fetch-step {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 6px;
}

/* Component 75: AI 视频拆解卡 */
.ai-card-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-card-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-card-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.ai-card-table tr {
    border-bottom: 1px solid var(--color-border);
}
.ai-card-table td {
    padding: 8px 12px;
}
.ai-card-table td:first-child {
    font-weight: 600;
    width: 100px;
    color: var(--color-accent);
}

/* Component 76: 六大情报流向 */
.ai-use-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-use-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-use-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 768px) {
    .ai-use-grid {
        grid-template-columns: 1fr;
    }
}
.ai-use-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 16px;
    background-color: var(--color-sidebar-bg);
}
.ai-use-card h5 {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 4px 0 !important;
}
.ai-use-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* Component 77: 评论双向挖掘沙盒 */
.ai-mine-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-mine-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-mine-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .ai-mine-grid {
        grid-template-columns: 1fr;
    }
}
.ai-mine-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}
.ai-mine-side h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px 0 !important;
}
.ai-mine-side.negative h5 {
    color: #DC2626;
}
.ai-mine-side.positive h5 {
    color: #059669;
}
.ai-mine-item {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
}
.ai-mine-item:last-child {
    margin-bottom: 0;
}

/* Component 78: 九大核心板块 */
.ai-db-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-db-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-db-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .ai-db-grid {
        grid-template-columns: 1fr;
    }
}
.ai-db-column {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}
.ai-db-column h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 10px 0 !important;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 6px;
}
.ai-db-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.ai-db-list li {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 6px;
    padding-left: 10px;
    position: relative;
}
.ai-db-list li::before {
    content: "•";
    color: var(--color-accent);
    position: absolute;
    left: 0;
}

/* Component 79: 先抄后超再创 */
.ai-exam-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-exam-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-exam-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ai-exam-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-sidebar-bg);
}
.ai-exam-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
}
.ai-exam-card h5 {
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}
.ai-exam-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* Component 80: 组合极限对比 */
.ai-scale-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-scale-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-scale-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .ai-scale-grid {
        grid-template-columns: 1fr;
    }
}
.ai-scale-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}
.ai-scale-card.accent {
    border-color: var(--color-accent);
    background-color: rgba(180, 83, 9, 0.02);
}
.ai-scale-card h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px 0 !important;
}
.ai-scale-card.accent h5 {
    color: var(--color-accent);
}
.ai-scale-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* Component 81: 万级因子决策漏斗 */
.ai-funnel-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-funnel-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-funnel-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.ai-funnel-step {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
    font-size: 11px;
    transition: all 0.3s;
}
.ai-funnel-step.wide { max-width: 90%; }
.ai-funnel-step.mid { max-width: 75%; border-color: var(--color-accent); }
.ai-funnel-step.narrow { max-width: 60%; background-color: rgba(180, 83, 9, 0.05); border-color: var(--color-accent); font-weight: 600; }

/* Component 82: 卖点空隙发现矩阵 */
.ai-diff-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-diff-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .ai-diff-grid {
        grid-template-columns: 1fr;
    }
}
.ai-diff-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}
.ai-diff-side.active {
    border-color: var(--color-accent);
    background-color: rgba(180, 83, 9, 0.02);
}
.ai-diff-side h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px 0 !important;
}
.ai-diff-side.active h5 {
    color: var(--color-accent);
}
.ai-diff-side p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* Component 83: 虚拟测品双闸门 */
.ai-test-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-test-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-test-flow {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ai-test-node {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-sidebar-bg);
}
.ai-test-node.gate {
    border-color: #DC2626;
    background-color: rgba(220, 38, 38, 0.02);
}
.ai-test-node.gate .ai-test-badge {
    color: #DC2626;
}
.ai-test-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
}
.ai-test-card h5 {
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
}
.ai-test-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* Component 84: 哨兵黄红线预警 */
.ai-alert-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-alert-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-alert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .ai-alert-grid {
        grid-template-columns: 1fr;
    }
}
.ai-alert-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}
.ai-alert-card.yellow { border-top: 4px solid #D97706; }
.ai-alert-card.red { border-top: 4px solid #DC2626; }
.ai-alert-card h5 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 6px 0 !important;
}
.ai-alert-card.yellow h5 { color: #D97706; }
.ai-alert-card.red h5 { color: #DC2626; }
.ai-alert-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* Component 85: 哨兵日报看板 */
.ai-daily-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-daily-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-daily-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .ai-daily-grid {
        grid-template-columns: 1fr;
    }
}
.ai-daily-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px;
    background-color: var(--color-sidebar-bg);
}
.ai-daily-card h5 {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 8px 0 !important;
}
.ai-daily-card ul {
    margin: 0;
    padding-left: 14px;
}
.ai-daily-card li {
    font-size: 10.5px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 6px;
}

/* Component 86: 私域护城河 */
.ai-moat-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-moat-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-moat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .ai-moat-grid {
        grid-template-columns: 1fr;
    }
}
.ai-moat-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}
.ai-moat-card h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 6px 0 !important;
}
.ai-moat-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* Component 87: 团队人机配比 */
.ai-ratio-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.ai-ratio-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.ai-ratio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .ai-ratio-grid {
        grid-template-columns: 1fr;
    }
}
.ai-ratio-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}
.ai-ratio-card.ai {
    border-color: var(--color-accent);
    background-color: rgba(180, 83, 9, 0.02);
}
.ai-ratio-card h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px 0 !important;
}
.ai-ratio-card.ai h5 {
    color: var(--color-accent);
}
.ai-ratio-card p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* =============================================================
 * Module 8: Compliance & Closeout (cply-redline to plan-profit)
 * ============================================================= */

/* Component 88: 合规话术转换沙盒 */
.cply-redline-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.cply-redline-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.cply-redline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .cply-redline-grid {
        grid-template-columns: 1fr;
    }
}
.cply-redline-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}
.cply-redline-side.danger { border-top: 4px solid #DC2626; }
.cply-redline-side.safe { border-top: 4px solid #059669; }
.cply-redline-side h5 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 10px 0 !important;
}
.cply-redline-side.danger h5 { color: #DC2626; }
.cply-redline-side.safe h5 { color: #059669; }
.cply-redline-item {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 8px;
}
.cply-redline-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Component 89: 承诺交付天平 */
.cply-scale-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.cply-scale-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.cply-scale-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .cply-scale-grid {
        grid-template-columns: 1fr;
    }
}
.cply-scale-side {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    background-color: var(--color-sidebar-bg);
}
.cply-scale-side h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px 0 !important;
}
.cply-scale-side.left h5 { color: #DC2626; }
.cply-scale-side.right h5 { color: var(--color-accent); }
.cply-scale-side p {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 !important;
}

/* Component 90: 90天全周期路线图 */
.plan-timeline-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.plan-timeline-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.plan-timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.plan-timeline-step {
    display: grid;
    grid-template-columns: 100px 100px 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-sidebar-bg);
}
.plan-timeline-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
}
.plan-timeline-label {
    font-size: 12px;
    font-weight: 600;
}
.plan-timeline-desc {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Component 91: 月销300万成熟期多渠道利润账本 */
.plan-profit-container {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 20px var(--color-shadow);
    margin: 35px 0;
}
.plan-profit-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.plan-profit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    .plan-profit-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.plan-profit-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    background-color: var(--color-sidebar-bg);
    text-align: center;
}
.plan-profit-card.positive { border-top: 4px solid #059669; }
.plan-profit-card.negative { border-top: 4px solid #DC2626; }
.plan-profit-card h6 {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin: 0 0 4px 0 !important;
}
.plan-profit-card .value {
    font-size: 14px;
    font-weight: 700;
}
.plan-profit-card.positive .value { color: #059669; }
.plan-profit-card.negative .value { color: #DC2626; }
.plan-profit-card p {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}
.plan-profit-total {
    border: 1px solid var(--color-accent);
    background-color: rgba(180, 83, 9, 0.05);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    font-size: 12px;
}
.plan-profit-total strong {
    color: var(--color-accent);
}

/* =============================================================
 * Passcode Gate Styles
 * ============================================================= */

/* 全屏锁定遮罩 (用于直接访问子页) */
.passcode-lock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-bg);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.passcode-lock-box {
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px;
    background-color: var(--color-sidebar-bg);
    box-shadow: 0 10px 30px var(--color-shadow);
    text-align: center;
}

.passcode-lock-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-text-primary);
}

.passcode-lock-subtitle {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

.passcode-input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.passcode-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    text-align: center;
    transition: all var(--transition-speed);
}

.passcode-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.passcode-btn {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF !important;
    background-color: var(--color-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.passcode-btn:hover {
    background-color: var(--color-accent-hover);
}

.passcode-error {
    font-size: 12px;
    color: #DC2626;
    margin-top: 8px;
    display: none;
}

/* 弹出式验证模态框 (用于从首页或侧边栏点击时) */
.passcode-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed);
}

.passcode-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* 补充取消按钮及淡出动画 */
.passcode-cancel-btn {
    margin-top: 12px;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: color var(--transition-speed);
}
.passcode-cancel-btn:hover {
    color: var(--color-accent);
}

/* 动效过渡 */
.passcode-lock-overlay, .passcode-modal-overlay {
    transition: opacity 0.35s ease, backdrop-filter 0.35s ease;
}

/* 锁定箱子微动画 */
.passcode-lock-box {
    transform: scale(0.95);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition-speed), border-color var(--transition-speed);
}

.passcode-lock-overlay .passcode-lock-box,
.passcode-modal-overlay.open .passcode-lock-box {
    transform: scale(1);
}

/* 锁定/阻断时的毛玻璃与滤镜支持 */
.book-container.blur-content {
    filter: blur(15px);
    pointer-events: none;
    transition: filter 0.35s ease;
}

/* 错误提示 */
.passcode-error {
    font-size: 12px;
    color: #DC2626;
    margin-top: 8px;
    display: none;
    text-align: center;
    background-color: rgba(220, 38, 38, 0.05);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(220, 38, 38, 0.15);
}

/* 锁图标样式 */
.passcode-lock-icon {
    font-size: 36px;
    margin-bottom: 16px;
    color: var(--color-accent);
    display: inline-block;
    animation: lock-pulse 2s infinite ease-in-out;
}

@keyframes lock-pulse {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 0.9; }
}

/* =============================================================
 * 《内容电商从 0 到 1 打品》高级简洁杂志风全局覆盖重构样式
 * ============================================================= */

/* 全局图文组件杂志感重构：零阴影、无彩色背景、纯白与极细实线 */
.ammo-card, .chef-kitchen-card, .data-life-card, .sandtable-column, .grid-card, .stat-card,
.report-table-container, .sandtable-container, .ammo-container, .chef-kitchen-container,
.chef-kitchen-grid, .cover-case-card {
    box-shadow: none !important;
    border-radius: 2px !important;
    background-color: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 卡片悬停黑白对比强化 */
.ammo-card:hover, .chef-kitchen-card:hover, .data-life-card:hover, .grid-card:hover, .stat-card:hover, .cover-case-card:hover {
    border-color: var(--color-text-primary) !important;
    transform: translateY(-2px) !important;
}

/* 正文引用块杂志化：去除背景颜色，仅保留左侧纯黑实线与灰色斜体字 */
.markdown-body blockquote {
    border-left: 3px solid var(--color-brand) !important;
    background-color: var(--color-bg) !important;
    color: var(--color-text-secondary) !important;
    font-style: italic !important;
    padding: 12px 20px !important;
    margin: 24px 0 !important;
}

/* 表格学术三线表化：顶底粗实线，中间无竖线， th/td 极细横线 */
.custom-report-table, .cover-case-table, .markdown-body table {
    border-collapse: collapse !important;
    border-top: 2px solid var(--color-text-primary) !important;
    border-bottom: 2px solid var(--color-text-primary) !important;
    border-left: none !important;
    border-right: none !important;
    width: 100% !important;
    margin: 24px 0 !important;
    background: transparent !important;
}
.custom-report-table th, .markdown-body table th {
    border-bottom: 1px solid var(--color-text-primary) !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    background: transparent !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    padding: 12px 8px !important;
}
.custom-report-table td, .markdown-body table td {
    border-bottom: 1px solid var(--color-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    padding: 12px 8px !important;
}
.custom-report-table tr:last-child td, .markdown-body table tr:last-child td {
    border-bottom: none !important;
}

/* 侧边栏与搜索框极简化 */
.book-sidebar {
    border-right: 1px solid var(--color-border) !important;
    background-color: var(--color-bg) !important;
}
.search-input-wrapper {
    background-color: var(--color-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
}
.search-input-wrapper input {
    border-radius: 0 !important;
    font-size: 13px !important;
}

/* 正文排版规范：现代黑体，清晰不发虚 */
.markdown-body {
    font-family: var(--font-family-cn) !important;
    color: var(--color-text-primary) !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
}
.markdown-body p {
    font-weight: 400 !important;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
    font-family: var(--font-family-cn) !important;
    font-weight: 800 !important;
    color: var(--color-text-primary) !important;
    margin-top: 40px !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.01em !important;
}

/* 极简无彩色标记 tag */
.highlight-tag {
    background-color: transparent !important;
    border: 1px solid var(--color-text-primary) !important;
    color: var(--color-text-primary) !important;
    padding: 2px 6px !important;
    border-radius: 2px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-style: italic !important;
}

/* 阅读器顶部栏极克制化 */
.book-header {
    border-bottom: 1px solid var(--color-border) !important;
    background-color: var(--color-bg) !important;
}
.toolbar-btn {
    background: transparent !important;
    border: none !important;
    color: var(--color-text-secondary) !important;
    transition: color var(--transition-speed) !important;
}
.toolbar-btn:hover {
    color: var(--color-text-primary) !important;
}

/* 页面切换过渡与加载条 */
.book-body.loading {
    opacity: 0.5;
    transition: opacity var(--transition-speed);
}

/* 验证界面黑白极简毛玻璃化 */
.passcode-lock-box {
    border: 1px solid var(--color-text-primary) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
body.theme-dark .passcode-lock-box {
    background-color: rgba(10, 10, 10, 0.9) !important;
    border-color: var(--color-border) !important;
}
.passcode-input {
    border: 1px solid var(--color-border) !important;
    border-radius: 2px !important;
    font-family: var(--font-family-sans) !important;
}
.passcode-input:focus {
    border-color: var(--color-text-primary) !important;
}
.passcode-btn {
    border-radius: 2px !important;
    background-color: var(--color-text-primary) !important;
    color: var(--color-bg) !important;
    border: 1px solid var(--color-text-primary) !important;
}
.passcode-btn:hover {
    background-color: transparent !important;
    color: var(--color-text-primary) !important;
}
body.theme-dark .passcode-btn {
    background-color: var(--color-text-primary) !important;
    color: #0A0A0A !important;
}
body.theme-dark .passcode-btn:hover {
    background-color: transparent !important;
    color: var(--color-text-primary) !important;
}
.passcode-cancel-btn {
    border-bottom: 1px solid transparent !important;
    padding-bottom: 2px;
}
.passcode-cancel-btn:hover {
    border-bottom-color: var(--color-text-primary) !important;
}

/* =============================================================
 * 微信读书网页版式的居中单栏阅读与隐藏式极简抽屉目录
 * ============================================================= */

/* 1. 正文限制最大阅读宽度并全局居中，解除左侧 320px 侧边栏的硬占位 */
.book-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: 860px !important; /* 精致纸质感最佳视线跨度 */
    margin: 0 auto !important; /* 水平居中 */
    width: 100% !important;
    min-height: 100vh;
}

/* 顶部导航 Header 与正文同宽并随滚动粘性固定在顶部 (sticky) */
.book-header {
    max-width: 860px !important;
    margin: 0 auto !important;
    width: 100% !important;
    border-bottom: 1px solid var(--color-border) !important;
    left: 0 !important;
    right: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important; /* 维持在正文上方 */
}

/* 2. 侧边栏改为全局默认收起滑出 (抽屉模式) */
.book-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 320px !important;
    transform: translateX(-100%) !important;
    transition: transform var(--transition-speed) var(--transition-curve) !important;
    z-index: 9999 !important; /* 置于所有元素最顶层 */
    box-shadow: none !important;
    border-right: 1px solid var(--color-border) !important;
}

/* 侧边栏开启 */
.book-sidebar.open {
    transform: translateX(0) !important;
}

/* 侧边栏滑出时，将遮罩层平滑浮现 */
.book-sidebar.open ~ .sidebar-backdrop {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 遮罩背景 */
.sidebar-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.2) !important; /* 轻量半透明 */
    backdrop-filter: blur(2px) !important;
    z-index: 9500 !important;
    display: none;
    transition: opacity var(--transition-speed) !important;
}

/* 3. 极简目录折叠按钮在 PC 浏览器端也强制显示 */
#menu-toggle-btn {
    display: block !important;
}

/* 侧边栏内部关闭按钮保留 */
.sidebar-close {
    display: block !important;
}

/* 4. 目录章节折叠造型极简化：优雅杂志书目录重构 */
.nav-module {
    margin-bottom: 24px !important; /* 加大模块间距，增加留白 */
    border: none !important;
}
.nav-module-title {
    padding: 10px 16px !important; /* 加大内边距 */
    font-family: var(--font-family-serif) !important;
    font-weight: 700 !important;
    color: var(--color-text-primary) !important;
    font-size: 15px !important;
    border: none !important;
    background: transparent !important;
    letter-spacing: 0.5px;
}
.nav-module-title:hover {
    color: var(--color-accent) !important;
}
.nav-module-title svg {
    color: var(--color-text-secondary) !important;
    opacity: 0.6;
    transition: transform var(--transition-speed);
}
.nav-article-list {
    margin-top: 6px !important;
    padding-left: 0 !important;
    border-left: none !important;
}
.nav-article-item {
    margin: 2px 8px !important; /* 左右拉开间距，形成卡片包裹感 */
}
.nav-article-item a {
    display: block;
    padding: 8px 16px !important; /* 调整小内边距，大点击区域 */
    font-family: var(--font-family-sans) !important;
    font-size: 13px !important; /* 精致小字号 */
    color: var(--color-text-secondary) !important;
    text-decoration: none !important;
    border-left: none !important; /* 去除以前的侧边细线条 */
    border-radius: 4px; /* 精美微圆角 */
    transition: all 0.25s ease-in-out !important;
}
/* 章节 hover 效果：向右平滑滑移 4px，并配合极淡底色 */
.nav-article-item a:hover {
    color: var(--color-text-primary) !important;
    background-color: rgba(47, 74, 60, 0.03) !important;
    transform: translateX(4px);
}
/* 章节 Active (当前高亮项) 效果 */
.nav-article-item.active a {
    color: var(--color-accent) !important;
    font-weight: 600 !important;
    background-color: rgba(47, 74, 60, 0.06) !important; /* 轻度墨绿底色卡片高亮 */
    border-left: none !important;
}
/* 侧边栏滚动条美化，实现极细隐形轨道 */
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(47, 74, 60, 0.1);
    border-radius: 2px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(47, 74, 60, 0.25);
}

/* 5. 隐藏右上角字体、字号、主题相关的四个 SaaS 选项，保持界面极其精简与专注 */
.toolbar {
    display: none !important;
}

/* =============================================================
 * 移动端自适应优化与细节微调 (Mobile & Tablet Optimization)
 * ============================================================= */
@media (max-width: 768px) {
    /* 1. 顶栏间距与高度轻量化 */
    .book-header {
        padding: 0 16px !important;
        height: 54px !important;
    }
    
    /* 2. 移除面包屑以腾出头部空间，或者将其字号缩小 */
    .breadcrumb {
        font-size: 12px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }
    
    /* 3. 正文内容两侧内距微调，避免屏幕边缘过宽 */
    .book-body {
        padding: 24px 16px !important;
    }
    
    /* 4. 侧边栏宽度设为相对屏幕比例 */
    .book-sidebar {
        width: 85vw !important;
        max-width: 300px !important;
    }
    
    /* 5. 翻页前后章卡片在小屏下垂直堆叠 */
    .page-navigation {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .page-navigation .nav-card {
        max-width: 100% !important;
        width: 100% !important;
        padding: 16px !important;
    }
    
    /* 6. 验证密码对话框自适应缩进 */
    .passcode-lock-box {
        width: 95% !important;
        padding: 28px 16px !important;
        border-radius: 4px !important;
    }
    .passcode-input {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
    .passcode-btn {
        padding: 10px !important;
        font-size: 13px !important;
    }
}




/* ===================================================================
 * 商业典籍 The Manual · 正文设计系统（并入自 manual.css，方式A）
 * 克制、权威：楷体标题 + 思源黑体正文 + 墨绿强调 + 暖燕麦米白底
 * 追加到样式表末尾，优先级最高，统一覆盖正文排版
 * =================================================================== */

/* 正文容器：H2 自动编号容器 */
.markdown-body {
    counter-reset: manual-h2;
    font-family: var(--font-family-cn);
}

/* 一级标题：楷体、墨绿、权威 */
.markdown-body h1 {
    font-family: var(--font-family-serif);
    color: var(--color-text-primary);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 二级标题：楷体 + 墨绿编号前缀（壹/贰式之外用数字计数） */
.markdown-body h2 {
    counter-increment: manual-h2;
    counter-reset: manual-h3;
    font-family: var(--font-family-serif);
    color: var(--color-text-primary);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.4em;
    position: relative;
}
.markdown-body h2::before {
    content: counter(manual-h2, decimal-leading-zero) "  ";
    font-family: 'Cormorant Garamond', serif;
    color: var(--color-brand);
    font-weight: 600;
    margin-right: 0.35em;
    letter-spacing: 1px;
}

/* 三级标题：楷体、墨绿点缀竖线 */
.markdown-body h3 {
    counter-increment: manual-h3;
    font-family: var(--font-family-serif);
    color: var(--color-text-primary);
    font-weight: 600;
    border-left: 3px solid var(--color-brand);
    padding-left: 0.6em;
}

/* 引用块：墨绿左边线，克制的典籍感 */
.markdown-body blockquote {
    border-left: 3px solid var(--color-brand);
    background-color: var(--color-blockquote-bg);
    color: var(--color-text-secondary);
    font-family: var(--font-family-serif);
}

/* 加粗强调用墨绿 */
.markdown-body strong {
    color: var(--color-brand);
    font-weight: 600;
}

/* 正文链接墨绿 */
.markdown-body a {
    color: var(--color-brand);
}

/* ---- 防复制：禁止文本选中（输入框、计算器输入保留可用） ---- */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input,
textarea,
.search-input,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}
/* 禁止图片拖拽另存 */
img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* ---- 开篇内嵌：两列大小目录总览 ---- */
.toc-overview {
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 56px;
    margin: 0 0 56px;
    border-bottom: 1px solid var(--color-border);
}
.toc-overview-head {
    text-align: center;
    margin-bottom: 44px;
}
.toc-overview-eyebrow {
    display: block;
    font-family: var(--font-family-serif);
    font-style: italic;
    font-size: 14px;
    letter-spacing: 3px;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}
.toc-overview-title {
    font-family: var(--font-family-serif);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    color: var(--color-text-primary);
}
.toc-overview-grid {
    column-count: 2;
    column-gap: 56px;
}
@media (max-width: 640px) {
    .toc-overview-grid { column-count: 1; column-gap: 0; }
}
.toc-mod {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 30px;
}
.toc-mod-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 9px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}
.toc-mod-id {
    font-family: 'Cormorant Garamond', var(--font-family-serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-brand);
    line-height: 1;
}
.toc-mod-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.toc-mod-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc-mod-list li {
    margin: 0;
}
.toc-mod-list li::before {
    display: none;
}
.toc-mod-list a {
    display: block;
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}
.toc-mod-list a:hover {
    color: var(--color-brand);
    transform: translateX(4px);
}
.toc-overview-hint {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--color-text-secondary);
    animation: tocBounce 2s ease-in-out infinite;
}
@keyframes tocBounce {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(6px); opacity: 1; }
}