/* ==========================================================================
   AI + 数据库 · 课程样式（骨架版）
   --------------------------------------------------------------------------
   说明：本文件为 SoftwareArchitecture 课程 course.css 的快照副本，
   骨架阶段整份复制以保证课程页布局/侧边栏/内容区视觉与软件架构课程
   100% 一致。后续数据库课程内容开发时，可逐步裁剪其中的
   软件架构专属组件规则（.arch-*、.flip-card、.worksheet-* 等），
   并追加数据库课程自身的内容组件样式。
   依赖：站点根 css/style.css（设计变量），css/dark-mode.css（深色模式）。
   ========================================================================== */

main {
    flex: 1;
    display: flex;
    padding: 0;
    overflow-x: visible !important;
    overflow-y: hidden !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* 全局聚焦光晕（方案三：微动效精雕） */
.chapter-item:focus-visible,
.toggle-btn:focus-visible,
.float-btn:focus-visible,
.toolbar-toggle-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.12);
}

.course-container {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: visible;
    overflow-y: hidden;
}

.sidebar {
    width: 280px;
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar {
    scrollbar-width: none;
}

.sidebar.collapsed {
    width: 40px;
    overflow: hidden;
    border-right: 1px solid var(--color-border);
}

.sidebar.collapsed .sidebar-header span {
    display: none;
}

.sidebar.collapsed .chapter-list {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    padding: 12px 8px;
    justify-content: center;
}

.sidebar-header {
    padding: 16px 20px;
    color: var(--theme-primary);
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23000' fill-opacity='0.025'/%3E%3C/svg%3E");
}

.sidebar-header span {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.toggle-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-btn:hover {
    background-color: var(--color-border);
    color: var(--theme-primary);
}

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

.chapter-item {
    border-bottom: 1px solid var(--color-border);
}

.chapter-link {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 12px 20px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
    cursor: pointer;
}

.chapter-link > span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chapter-link > i,
.chapter-link .expand-icon,
.chapter-link .ba-lock-icon {
    flex: 0 0 auto;
}

.chapter-link:hover {
    background-color: var(--color-bg-page);
    color: var(--theme-primary);
}

.chapter-link.active {
    font-weight: bold;
    color: var(--theme-primary);
}

.chapter-link i {
    width: 18px;
    text-align: center;
}

.chapter-link .expand-icon {
    font-size: 0.75rem;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--color-text-secondary);
}

.chapter-link.expanded .expand-icon {
    transform: rotate(90deg);
    color: var(--theme-primary);
}

.section-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background-color: var(--color-bg-muted);
}

.chapter-item.expanded .section-list {
    display: block;
}

.section-item {
    border-bottom: 1px solid var(--color-border);
}

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

.section-link {
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 46px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
    cursor: pointer;
}

.section-link:hover {
    background-color: var(--color-bg-hover);
    color: var(--theme-primary);
}

.section-link.active {
    font-weight: bold;
    color: var(--theme-primary);
    background-color: var(--color-bg-page);
}

.section-link i {
    width: 14px;
    text-align: center;
    font-size: 0.75rem;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    overflow-x: visible;
    background-color: white;
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 0;
}

.sidebar.collapsed+.main-content {
    padding-left: 30px;
}

.content-header {
    padding: 12px 20px;
    background-color: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.content-path {
    --bs-breadcrumb-divider: '›';
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
}

.content-path::-webkit-scrollbar {
    height: 0;
}

.content-path .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.content-path .breadcrumb-item a {
    color: var(--color-text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.content-path .breadcrumb-item:hover {
    background-color: var(--color-border);
    cursor: pointer;
}

.content-path .breadcrumb-item.active {
    background-color: var(--theme-primary);
    color: white;
}

.content-path i {
    font-size: 0.75rem;
}

.content-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    padding: 16px 20px;
    min-height: 0;
}

.content-wrapper::-webkit-scrollbar {
    display: none;
}

.content-wrapper {
    scrollbar-width: none;
}

.intro-page-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.intro-page-wrapper .content-title {
    width: 100%;
    text-align: left;
}

/* 课程介绍页的 content-grid 底部不需要额外间距，章节间距由外层 .content-section 的 margin-bottom 统一控制 */
.intro-page-wrapper .content-grid {
    margin-bottom: 0;
}

/* 课程介绍页卡片紧凑化：整体降低约 3mm（≈11px），仅压缩每个卡片共有的元素，不影响 2.2 等其他页面 */
.intro-page-wrapper .research-card {
    padding: 15px !important;
    gap: 12px;
}

.intro-page-wrapper .research-card .card-title {
    margin-bottom: 12px;
    padding: 5px 0;
}

.intro-page-wrapper .research-card i {
    margin-bottom: 0 !important;
}

/* 课程导学前三个卡片文本行间距每层增加 3px（1px + 2px） */
.intro-page-wrapper .problem-list {
    gap: 13px;
}

.intro-page-wrapper .solution-list {
    gap: 13px;
}

.intro-page-wrapper .tech-tags {
    gap: 15px;
}

.content-section {
    display: block;
    width: 100%;
    margin-bottom: 32px;
    scroll-margin-top: 16px;
}

.chapter-page {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    margin-bottom: 0;
    padding-bottom: 0;
    overflow: hidden !important;
}

.page-content-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    min-height: 0;
}

.page-left-section {
    width: calc(50% - 10px);
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.page-left-section .tabs-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.page-left-section .tabs-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.page-right-section {
    width: calc(50% - 10px);
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.page-right-section .svg-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-right-section .svg-container svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.tabs-container-full {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tabs-container-full .tabs-header {
    display: flex;
    width: 100%;
}

.tabs-container-full .tab-btn {
    flex: 1;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
}

.tabs-container-full .tabs-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.core-elements-title {
    margin: 0 0 6px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.core-elements-subtitle {
    margin: 0 0 8px 0;
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* 带图标的章节标题（如 1.1 架构核心要素） */
.section-header-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.section-header-with-icon > i {
    font-size: 1.5rem;
    color: var(--theme-primary);
    flex-shrink: 0;
}

.section-header-with-icon .section-header-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.section-header-with-icon .section-main-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.section-header-with-icon .section-sub-desc {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .section-header-with-icon {
        gap: 10px;
    }

    .section-header-with-icon > i {
        font-size: 1.25rem;
    }

    .section-header-with-icon .section-main-title {
        font-size: 1.1rem;
    }

    .section-header-with-icon .section-sub-desc {
        font-size: 0.9rem;
    }
}

.core-elements-row {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.core-elements-text {
    width: 55%;
    box-sizing: border-box;
}

.core-elements-svg {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.core-elements-svg .svg-container {
    width: 350px;
    height: 194px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-elements-svg .svg-container svg {
    width: 350px;
    height: auto;
}

.svg-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    margin-top: 20px;
    box-sizing: border-box;
}

.svg-section .svg-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg-section .svg-container svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* 核心要素四要素列表优化样式 */
.content-list.core-elements-list {
    padding-left: 0;
    margin-bottom: 20px;
}

.content-list.core-elements-list li {
    margin-bottom: 6px;
    padding: 5px 14px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
}

.content-list.core-elements-list li::before {
    content: none;
}

.content-list.core-elements-list li strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.content-list.core-elements-list li .term-en {
    color: var(--color-text-secondary);
    font-weight: 400;
    font-size: 0.9em;
}

.small-architecture-diagram {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 16px;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
    white-space: nowrap;
}

.small-architecture-diagram::-webkit-scrollbar {
    display: none;
}

.small-architecture-diagram {
    scrollbar-width: none;
}

.diagram-group {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px;
    flex-shrink: 0;
    width: auto;
    min-width: 0;
}

.diagram-group>svg {
    flex-shrink: 0;
    width: 140px !important;
    height: 112px !important;
}

.legend-box {
    padding: 6px;
    background-color: var(--color-bg-page);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    height: fit-content;
    flex-shrink: 0;
    width: 110px;
    font-size: 0.6rem;
}

.legend-box>div:first-child {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 0.75rem;
    color: var(--color-text-primary);
}

.legend-box>div:not(:first-child) {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.legend-box>div:not(:first-child) span {
    font-size: 0.65rem;
    color: var(--color-text-secondary);
}

.content-title {
    color: var(--theme-primary);
    margin-top: 0;                                            /* v1.2.2：H2 mt 归零，靠 pt - section-gap 抵消上组件 mb */
    padding-top: calc(var(--heading-gap) - var(--section-gap));  /* 20 - 15 = 5px；与上组件 mb:15 相加正好 20 */
    margin-bottom: var(--section-gap);
    padding-bottom: 10px;
    border-bottom: 3px solid var(--theme-primary);
    font-size: 1.4rem;
}

.content-subtitle {
    color: var(--theme-primary);                                /* v1.2.5：与 H2 .content-title 同色，包括数字 + 图标 */
    margin-top: 0;                                              /* mt 归零，靠 pt - section-gap 抵消上组件 mb */
    padding-top: calc(var(--heading-gap) - var(--section-gap));  /* 与上组件 mb:15 相加正好 20，BFC 不折叠场景也成立 */
    margin-bottom: var(--section-gap);
    padding-bottom: 10px;                                       /* 与 H2 .content-title 一致 */
    border-bottom: 1px solid var(--theme-primary);              /* H3 线比 H2 细（1px vs 3px），保持层级差异 */
    font-size: 1.2rem;                                          /* 比 H2 的 1.4rem 小一档 */
}

.content-sub-subtitle {                                         /* v1.2.7：H4 小节标题，如「第X关 1NF」；无 h4 默认样式，需显式定义，
                                                                       避免回退到浏览器默认 h4(~1.5em) 反超上层 H3(1.2rem) */
    color: var(--color-text-primary);
    margin-top: 0;                                              /* mt 归零，靠 pt - section-gap 抵消上组件 mb */
    padding-top: calc(var(--heading-gap) - var(--section-gap));  /* 与上组件 mb:15 相加正好 20 */
    margin-bottom: var(--section-gap);
    font-size: 1.1rem;                                          /* 小于 H3 的 1.2rem，层级向下递减 */
    font-weight: 700;
    line-height: 1.4;
}

/* v1.2.8：小节标题右侧浮动角标（如「了解即可」），虚线浅色徽章，与 1NF/2NF/3NF/BCNF 主线范式区分 */
.info-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    float: right;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text-muted);
    background: var(--color-bg-muted);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px dashed var(--color-border);
}
.info-badge i { font-size: 0.85em; }

/* v1.2.9：表格单元格内的行内小徽章，比标题处更小一号，不浮动 */
.info-badge--inline {
    float: none;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
    font-size: 0.64rem;
    padding: 2px 6px;
}

.tabs-container {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.tabs-header {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
}

.tab-btn {
    background: none;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    position: relative;
    margin-right: 4px;
    transition: color 0.2s;
}

.tab-btn:hover {
    color: var(--theme-primary);
}

.tab-btn.active {
    color: var(--theme-primary);
    font-weight: bold;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--theme-primary);
}

.tabs-content {
    padding: 20px;
    background: var(--color-bg-page);
    border-radius: 0 0 8px 8px;
    min-height: 120px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.quote-item {
    background: var(--color-bg-page);
    border-left: 4px solid var(--theme-primary);
    padding: 16px 20px;
    margin-bottom: 16px;
    border-radius: 0 8px 8px 0;
    position: relative;
    padding-right: 200px;
}

.quote-author {
    position: absolute;
    right: 16px;
    top: 16px;
    font-weight: bold;
    color: var(--theme-primary);
    font-size: 0.85rem;
    text-align: right;
}

.quote-original {
    font-style: italic;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 6px;
    line-height: 1.6;
}

.quote-translation {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.content-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: var(--section-gap);   /* v1.2.5 归零硬编码 20px，与组件级盒子的 --section-gap 统一 */
}

.content-list {
    padding-left: 24px;
    margin-bottom: var(--section-gap);   /* v1.2.5 同步归零硬编码 20px */
    list-style-type: none;
}

.content-list li {
    margin-bottom: 12px;
    color: var(--color-text-secondary);
    font-size: 1rem;
    position: relative;
    padding-left: 8px;
}

.content-list li::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 8px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-primary));
    border-radius: 50%;
}

.content-card {
    background: linear-gradient(180deg, var(--theme-accent) 0%, var(--theme-primary) 50%, var(--theme-primary-dark) 100%) 0 0 / 4px 100% no-repeat,
                var(--color-bg-page);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid transparent;
}

.content-card.definition-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 20px;
}

.content-card.warning-card {
    border-left: 4px solid transparent;
    background: linear-gradient(180deg, var(--color-warning) 0%, var(--color-warning-text) 100%) 0 0 / 4px 100% no-repeat,
                var(--color-warning-bg);
}

.content-card.compact-card {
    padding: 16px 18px;
    margin-bottom: 16px;
}

/* 行内关键术语徽章 */
.term-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--theme-primary);
    background: var(--theme-primary-bg-hover);
    border: 1px solid var(--theme-primary-border);
    vertical-align: middle;
    line-height: 1.4;
}

.content-list.warning-list li::before {
    background-color: var(--color-warning);
}

.content-list li {
    line-height: 1.55;
}

.content-list li::before {
    top: calc(0.775em - 4px);
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 48px;
    align-items: stretch;
}

/* 强制所有 grid item 最小宽度为 0，防止 white-space: nowrap 内容撑开列宽 */
.content-grid > .content-card-grid,
.content-grid > .research-card {
    min-width: 0;
    overflow: hidden;
}

.content-grid.laws-grid {
    margin-bottom: 12px;
}

.laws-quote {
    margin-top: 4px;
}

.research-card {
    text-align: center;
    padding: 18px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.research-card:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 8px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(var(--theme-primary-rgb), 0.12);
    border-color: var(--color-border-hover);
    transform: translateY(-2px) scale(1.005);
}

.research-card .card-title {
    text-align: center;
    margin-bottom: 0;
    font-size: 1.2 rem;
    flex-shrink: 0;
}

.research-card > i {
    text-align: center;
    font-size: 1.6rem !important;
    margin-bottom: 0 !important;
    display: block;
    flex-shrink: 0;
}

.research-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
    overflow: hidden;
    align-self: flex-start;
    width: 100%;
    margin-top: 6px;
}

.research-item {
    display: flex;
    align-items: center;
    padding: 4px 4px;
    background-color: transparent;
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 2px solid transparent;
}

.research-item:hover {
    background-color: var(--theme-primary-bg);
    border-left-color: var(--theme-primary);
    transform: none;
}

.item-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: var(--theme-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.55rem;
    font-weight: bold;
    margin-right: 6px;
    flex-shrink: 0;
}

.content-card-grid {
    background-color: var(--color-bg-page);
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-card-grid:not(.flip-card):hover {
    transform: translateY(-5px) scale(1.005);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 16px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(var(--theme-primary-rgb), 0.08);
}

.principle-card:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 16px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(var(--theme-primary-rgb), 0.08);
    border-color: var(--color-border-hover);
}

.content-card-grid.flip-card {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-height: 400px;
    perspective: 1000px;
}

.content-card-grid .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.content-card-grid:hover .flip-card-inner,
.content-card-grid:focus-within .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 400px;
    backface-visibility: hidden;
    border-radius: 8px;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flip-card-front {
    background-color: white;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.flip-card-back {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 60%, var(--theme-primary-darker) 100%);
    color: white;
    transform: rotateY(180deg);
    border: 1px solid var(--theme-primary);
}

.flip-card-back .card-tip-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #fff;
}

.flip-card-back .card-tip-content {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    text-align: left;
    padding: 0 8px;
}

.fitness-grid {
    grid-template-columns: repeat(4, 1fr);
}

.fitness-grid .content-card-grid.flip-card,
.fitness-grid .flip-card-inner,
.fitness-grid .flip-card-front,
.fitness-grid .flip-card-back {
    min-height: 420px;
}

.fitness-grid .flip-card-back {
    padding: 20px 18px;
}

.fitness-grid .flip-card-back .card-tip-content {
    padding: 0;
    width: 100%;
}

.flip-card-back .fitness-code {
    margin: 0;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    font-size: 0.6rem;
    line-height: 1.45;
    color: var(--color-border);
    white-space: pre;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.flip-card-back .fitness-code code {
    display: block;
    color: var(--color-border);
    background: transparent;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    white-space: pre;
}

/* 评估卡片小尺寸翻转 */
.content-card-grid.flip-card-sm {
    min-height: 180px;
    perspective: 1000px;
}

.flip-card-sm .flip-card-inner {
    min-height: 180px;
}

.flip-card-sm .flip-card-front,
.flip-card-sm .flip-card-back {
    min-height: 180px;
    padding: 20px 16px;
    justify-content: center;
}

.flip-card-sm .flip-card-front {
    background-color: white;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.flip-card-sm .flip-card-back {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 60%, var(--theme-primary-darker) 100%);
    color: white;
    transform: rotateY(180deg);
    border: 1px solid var(--theme-primary);
    box-shadow: var(--shadow-sm);
    justify-content: center;
}

.flip-card-sm .flip-card-back p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    text-align: center;
}

.flip-card-sm .flip-card-back .card-tip-content {
    display: inline-block;
    text-align: left;
}

.flip-card-sm .flip-card-back .card-tip-content p {
    text-align: left;
}

/* flip-card-sm 背面标题和列表在小卡片中的适配 */
.flip-card-sm .flip-card-back .card-tip-title {
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.flip-card-sm .flip-card-back .tip-line {
    font-size: 0.75rem;
    line-height: 1.5;
    margin-bottom: 6px;
    white-space: nowrap;
}

.flip-card-sm .flip-card-back .tip-line:last-child {
    margin-bottom: 0;
}

/* 四定律卡片正面内容垂直对齐 */
.flip-card-front {
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
}

.card-front-icon {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.card-front-icon i {
    font-size: 2.5rem;
    color: var(--theme-primary);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary-bg-hover) 0%, var(--theme-primary-bg-hover) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0 !important;
}

.card-front-title {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: 1.05rem;
}

.card-front-en,
.card-front-zh {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.card-front-en {
    margin-bottom: 6px;
}

.card-front-en .card-desc.en,
.card-front-zh .card-desc.zh {
    margin-bottom: 0;
}

.content-card-grid > i {
    font-size: 2.2rem;
    color: var(--theme-primary);
    margin-bottom: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--theme-primary-bg-hover) 0%, var(--theme-primary-bg-hover) 100%);
    border-radius: 50%;
}

.content-card-grid .card-title {
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0;
    font-size: 1.05rem;
}

.content-card-grid .card-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 4px;
}

.content-card-grid .card-desc:last-child {
    margin-bottom: 0;
}

.content-card-grid .card-desc.en {
    font-style: italic;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.content-card-grid .card-desc.zh {
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* ===== 学习方法：AI + 脑科学步骤流程 ===== */
.learning-stepper {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    margin: 28px 0 20px;
    padding: 0;
}

.learning-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.learning-step:first-child {
    padding-left: 18px;
}

.learning-step:last-child {
    padding-right: 18px;
}

.step-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 14px;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--step-color, var(--theme-primary-dark));
    background: var(--step-bg, var(--theme-primary-bg-hover));
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 4px #fff, 0 2px 8px rgba(0, 0, 0, 0.06);
}

.step-connector {
    position: absolute;
    left: calc(50% + 19px);
    right: calc(-50% - 17px);
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    z-index: 1;
}

.step-connector::before {
    content: "";
    position: absolute;
    left: 0;
    right: 6px;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--step-color, var(--theme-primary-dark)), var(--color-border-hover));
}

.step-connector::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--color-text-muted);
    transform: translateY(-50%);
}

.learning-step:last-child .step-connector {
    display: none;
}

.step-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.step-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

.step-badge.ai {
    background-color: var(--theme-accent-bg);
    color: var(--theme-accent);
}

.step-badge.brain {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.learning-stepper .step-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin-bottom: 8px;
    min-height: 2.8em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-stepper .step-desc {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin: 0;
    text-align: left;
}

.learning-loop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding: 14px 18px;
    background: var(--color-bg-page);
    border: 1px dashed var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
}

.learning-loop i {
    font-size: 1.3rem;
    color: var(--theme-primary);
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .learning-stepper {
        flex-direction: column;
        gap: 18px;
    }

    .learning-step {
        padding: 0 0 0 24px;
        text-align: left;
        align-items: flex-start;
        border-left: 2px solid var(--color-border);
    }

    .learning-step:first-child {
        padding-left: 24px;
    }

    .learning-step:last-child {
        padding-right: 0;
        border-left-color: transparent;
    }

    .step-header {
        justify-content: flex-start;
        width: auto;
        margin-left: -43px;
        margin-bottom: 6px;
    }

    .step-number {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    .step-connector {
        display: none;
    }

    .step-badges {
        justify-content: flex-start;
    }

    .learning-stepper .step-title {
        min-height: auto;
        justify-content: flex-start;
        margin-bottom: 6px;
    }

    .learning-stepper .step-desc {
        text-align: left;
    }
}

/* 8.6.1 交付渠道卡片：一行四列 + 水平布局 */
.content-grid.delivery-channel-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.delivery-channel-grid .delivery-channel-card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 14px;
    gap: 10px;
}

.delivery-channel-grid .delivery-channel-card i {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    margin-bottom: 0;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--theme-primary-bg-hover) 0%, var(--theme-primary-bg-hover) 100%);
}

.delivery-channel-grid .delivery-channel-card:nth-child(2) i {
    background: linear-gradient(135deg, var(--color-success-bg-hover) 0%, var(--color-success-border) 100%);
}

.delivery-channel-grid .delivery-channel-card:nth-child(3) i {
    background: linear-gradient(135deg, var(--color-warning-bg) 0%, var(--color-warning-bg-hover) 100%);
}

.delivery-channel-grid .delivery-channel-card:nth-child(4) i {
    background: linear-gradient(135deg, var(--theme-accent-bg) 0%, var(--theme-accent-border) 100%);
}

.delivery-channel-grid .delivery-channel-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.delivery-channel-grid .delivery-channel-card .card-title {
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.delivery-channel-grid .delivery-channel-card .card-desc.en {
    font-size: 0.72rem;
    margin-bottom: 4px;
    color: var(--color-text-secondary);
}

.delivery-channel-grid .delivery-channel-card .card-desc:last-child {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

@media (max-width: 992px) {
    .content-grid.delivery-channel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .content-grid.delivery-channel-grid {
        grid-template-columns: 1fr;
    }
}

/* 反模式翻转卡片网格（与定律网格一致的紧凑间距） */
.content-grid.anti-pattern-grid {
    margin-bottom: 12px;
}

/* 2.4 多视图模型预览：两列概念卡片（紧凑图标标题同行） */
.content-grid.model-preview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}
.content-grid.model-preview-grid .content-card-grid {
    text-align: left;
    align-items: flex-start;
    padding: 16px;
}
.model-preview-card .model-preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.model-preview-card .model-preview-header i {
    font-size: 1.3rem;
    color: var(--theme-primary);
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    display: inline;
}
.model-preview-card .model-preview-header .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-primary-darker);
    margin: 0;
    padding: 0;
}
@media (max-width: 992px) {
    .content-grid.model-preview-grid {
        grid-template-columns: 1fr;
    }
}

/* 6.3.1 权衡卡片：一行四列 + 高度适配内容 */
.content-grid.tradeoff-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.tradeoff-grid .content-card-grid.flip-card,
.tradeoff-grid .flip-card-inner,
.tradeoff-grid .flip-card-front,
.tradeoff-grid .flip-card-back {
    min-height: 200px;
}

.tradeoff-grid .flip-card-front,
.tradeoff-grid .flip-card-back {
    padding: 18px;
}

/* 6.2 质量属性六列单行网格 */
.content-grid.quality-attrs-grid {
    grid-template-columns: repeat(6, 1fr);
}

.quality-attrs-grid .content-card-grid.flip-card-sm {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.quality-attrs-grid .flip-card-sm,
.quality-attrs-grid .flip-card-sm .flip-card-inner,
.quality-attrs-grid .flip-card-sm .flip-card-front,
.quality-attrs-grid .flip-card-sm .flip-card-back {
    min-height: 150px;
}

.quality-attrs-grid .flip-card-sm .flip-card-front,
.quality-attrs-grid .flip-card-sm .flip-card-back {
    padding: 12px 8px;
}

.quality-attrs-grid .content-card-grid i {
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.quality-attrs-grid .card-front-title {
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.quality-attrs-grid .card-desc.zh {
    font-size: 0.75rem;
    line-height: 1.4;
}

.quality-attrs-grid .flip-card-back .card-tip-title {
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.quality-attrs-grid .flip-card-back .tip-line {
    font-size: 0.7rem;
    line-height: 1.4;
    white-space: normal;
}

/* 翻转卡片背面文字要点列表 */
.flip-card-back .tip-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    text-align: left;
    font-weight: 400;
}

.flip-card-back .tip-line:last-child {
    margin-bottom: 0;
}

.flip-card-back .tip-line .tip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-bg-surface);
    flex-shrink: 0;
    margin-top: 8px;
}

.flip-card-back .tip-line .tip-text {
    flex: 1;
    min-width: 0;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-grow: 1;
    align-content: flex-start;
    margin-top: 2px;
    min-width: 0;
    width: 100%;
}

.tech-tag {
    padding: 7px 12px;
    border-radius: 16px;
    font-size: 12px;
    color: white;
    font-weight: 400;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tech-tag:hover {
    overflow: visible;
    transform: scale(1.05);
}

.tech-tag.blue {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
}

.tech-tag.green {
    background-color: var(--color-success);
}

.tech-tag.cyan {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
}

.tech-tag.red {
    background-color: var(--color-danger);
}

.tech-tag.purple {
    background-color: var(--theme-accent);
}

.tech-tag.pink {
    background-color: var(--color-danger);
}

.tech-tag.cyan {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
}

.tech-tag.gray {
    background-color: var(--color-text-secondary);
}

/* ====== 问题列表（卡片1：没有架构的困境） ====== */
.problem-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    width: 100%;
    margin-top: 2px;
}

.problem-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--color-danger);
    background-color: var(--color-danger-bg);
    font-size: 13px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.problem-item:hover {
    background-color: var(--color-danger-bg-hover);
    transform: translateX(2px);
}

.problem-icon {
    font-size: 17px;
    color: var(--color-danger);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--color-bg-surface);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15);
}

.problem-text {
    font-size: 0.82rem;
    color: var(--color-danger-text);
    line-height: 1.6;
}

/* ====== 解决方案列表（卡片2：架构如何解决） ====== */
.solution-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    width: 100%;
    margin-top: 2px;
}

.solution-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--color-success);
    background-color: var(--color-success-bg);
    font-size: 13px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.solution-item:hover {
    background-color: var(--color-success-bg-hover);
    transform: translateX(2px);
}

.solution-icon {
    font-size: 17px;
    color: var(--color-success);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--color-bg-surface);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.15);
}

.solution-text {
    font-size: 0.82rem;
    color: var(--color-success-text);
    line-height: 1.6;
}

.tech-tag strong {
    font-weight: 700;
    font-size: 12px;
}

.tech-tag .tech-tag-content {
    font-size: 12px;
}

/* 卡片1/2 图标主题色（仅作用于卡片头部图标，不影响列表内的小图标） */
.content-grid .research-card:nth-child(1) > i {
    color: var(--color-danger);
    background: linear-gradient(135deg, var(--color-danger-bg-hover) 0%, var(--color-danger-border) 100%);
}

.content-grid .research-card:nth-child(2) > i {
    color: var(--color-success);
    background: linear-gradient(135deg, var(--color-success-bg-hover) 0%, var(--color-success-border) 100%);
}

.problem-text strong {
    font-weight: 700;
}

.solution-text strong {
    font-weight: 700;
}

/* 课程导学页面：架构困境/解决方案图标恢复纯图标样式（无圆圈，保留垂直居中） */
.intro-page-wrapper .problem-icon,
.intro-page-wrapper .solution-icon {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.progress-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.progress-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--color-text-secondary);
}

.progress-bar-container {
    height: 10px;
    background-color: var(--color-border);
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 0.8s ease-out;
}

.timeline-container {
    position: relative;
    flex-grow: 1;
    width: 100%;
    text-align: left;
    padding-left: 0;
    align-self: flex-start;
    margin-top: 4px;
}

.timeline-line {
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--theme-primary), var(--color-success), var(--theme-primary), var(--color-danger), var(--theme-accent), var(--color-danger), var(--theme-primary));
}

.timeline-item {
    position: relative;
    padding-left: 24px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 2px var(--theme-primary);
}

.timeline-item:nth-child(2) .timeline-dot {
    background-color: var(--theme-primary);
    box-shadow: 0 0 0 2px var(--theme-primary);
}

.timeline-item:nth-child(3) .timeline-dot {
    background-color: var(--color-success);
    box-shadow: 0 0 0 2px var(--color-success);
}

.timeline-item:nth-child(4) .timeline-dot {
    background-color: var(--theme-primary);
    box-shadow: 0 0 0 2px var(--theme-primary);
}

.timeline-item:nth-child(5) .timeline-dot {
    background-color: var(--color-danger);
    box-shadow: 0 0 0 2px var(--color-danger);
}

.timeline-item:nth-child(6) .timeline-dot {
    background-color: var(--theme-accent);
    box-shadow: 0 0 0 2px var(--theme-accent);
}

.timeline-item:nth-child(7) .timeline-dot {
    background-color: var(--color-danger);
    box-shadow: 0 0 0 2px var(--color-danger);
}

.timeline-item:nth-child(8) .timeline-dot {
    background-color: var(--theme-primary);
    box-shadow: 0 0 0 2px var(--theme-primary);
}

.timeline-content {
    font-size: 0.88rem;
    color: var(--color-text-primary);
    line-height: 1.6;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-title {
    font-weight: 600;
    display: inline;
    margin-bottom: 0;
}

.timeline-title::after {
    content: "：";
    font-weight: 400;
}

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

.architecture-diagram {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 16px;
    margin-top: 8px;
}

/* 课程介绍页架构演示卡片顶部对齐，与其他卡片内容文字顶部齐平 */
.intro-page-wrapper .architecture-diagram {
    align-items: flex-start;
    margin-top: 0;
    padding-top: 0;
}

.architecture-diagram svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 320px;
}

/* 对显式声明 width 的 SVG 保持固有宽度，避免被容器拉宽 */
.architecture-diagram svg[width] {
    width: auto;
}

/* 表格统一规范（2026-10-06 定稿，全站 57 张表适用）：
   ① 正文字号 0.9em（相对正文 16px = 14.4px），用 em 保证阅读模式放大时同步缩放；
   ② 表头 0.94em（相对表格字号），统一略小于正文；
   ③ 单元格内 <code> / 说明小字 0.85em（相对单元格）；
   ④ 内边距统一 10px 14px；⑤ 表头底色统一 --color-bg-muted + 2px 主题色下边框。
   ⛔ 禁止再给表格写 px 硬编码字号（px 不随阅读模式缩放，会造成大小不一）。 */
.content-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--section-gap);
    font-size: 0.9em;
}

.content-table th,
.content-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.content-table th {
    background-color: var(--color-bg-muted);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.content-table tr:hover {
    background-color: var(--color-bg-page);
}

/* 单行表格：DD 数据字典 / 约束清单 / 索引设计 / 实体清单 ——
   单元格强制 white-space: nowrap，移除 break-all 字符级断字陷阱；
   列宽 + 自然分隔符（, / + 、）实现单行，禁止 <br> 强制换行。
   R22 增 max-width:0 + overflow:hidden + text-overflow:ellipsis
   防止 cell 内容渲染时溢出到相邻 cell。 */
.content-table--singleline td {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3.3.4 属性列表：锁定等宽字体 + 主码下划线跨浏览器统一
   —— 字体栈 ui-monospace 优先（与 3.4 关系模式 .rs-col 同款），
      避免 Linux 回退到抗锯齿差的 Liberation Mono 导致「模糊」；
   —— <u> 默认 text-decoration 在 Safari/Firefox 渲染不一致（「断开」），
      显式声明 solid + 固定 thickness 统一实线；
   —— text-underline-offset:3px 与 3.6 范式体检 .ra-mt-key 同源，
      固定下划线距文字 3px，解决「间距偏大 / 跨浏览器不一」。 */
.content-table code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.content-table code u {
    text-decoration: underline solid currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* 3.6.2 函数依赖类型标记：F=完全 / P=部分 / T=传递 */
.fd-mark {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    margin-left: 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    vertical-align: middle;
    background: var(--color-bg-muted);
    color: var(--theme-primary-darker);
    border: 1px solid var(--color-border);
    letter-spacing: 0.02em;
}

/* 3.6.2 函数依赖：箭头上的 f/p/t 标记（完全/部分/传递，标准记法：X —f→ Y） */
.ra-fd-arrow {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-weight: 600;
    margin: 0 3px;
    font-size: 1.08em;
}

.ra-fd-arrow .ra-fd-tag {
    position: absolute;
    top: -0.5em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: var(--theme-primary-darker);
}

.content-highlight {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 60%, var(--theme-primary-darker) 100%);
    color: white;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 15px;
    text-align: center;
}

.content-highlight h4 {
    margin-bottom: 12px;
    font-size: 1.4rem;
}

.content-highlight p {
    font-size: 1.1rem;
    opacity: 0.95;
}

.content-steps {
    counter-reset: step;
    padding-left: 0;
    list-style: none;
    margin-bottom: 20px;
}

.content-steps li {
    counter-increment: step;
    padding: 16px 20px 16px 60px;
    margin-bottom: 12px;
    background-color: var(--color-bg-page);
    border-radius: 8px;
    position: relative;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

.content-steps li::before {
    content: counter(step);
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-color: var(--theme-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

/* ====== 7.2.4 外部环境驱动 —— 无序号分项列表 ====== */
.external-driver-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0 20px 0;
}

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

.external-driver-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
}

.external-driver-main .thinking-tab-label {
    margin-top: 1px;
}

.external-driver-example {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin-top: 6px;
    padding-left: 0;
}

/* 横向步骤条：决策矩阵评估步骤 */
.horizontal-stepper {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-top: 24px;
    padding-bottom: 4px;
}

.horizontal-stepper::-webkit-scrollbar {
    height: 4px;
}

.horizontal-stepper::-webkit-scrollbar-thumb {
    background-color: var(--color-border-hover);
    border-radius: 2px;
}

.stepper-item {
    flex: 1 1 0;
    min-width: 160px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 24px 12px 14px;
    position: relative;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.stepper-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 16px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(var(--theme-primary-rgb), 0.1);
}

.stepper-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    z-index: 2;
}

.stepper-item:nth-child(1) .stepper-badge { background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark)); }
.stepper-item:nth-child(2) .stepper-badge { background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent)); }
.stepper-item:nth-child(3) .stepper-badge { background: linear-gradient(135deg, var(--color-success), var(--color-success)); }
.stepper-item:nth-child(4) .stepper-badge { background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark)); }
.stepper-item:nth-child(5) .stepper-badge { background: linear-gradient(135deg, var(--color-warning), var(--color-warning)); }

.stepper-arrow {
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    z-index: 2;
}

.stepper-item:last-child .stepper-arrow {
    display: none;
}

.stepper-content h6 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.stepper-content p {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin-bottom: 0;
}

.stepper-content .stepper-case {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--color-bg-page);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    text-align: left;
}

.stepper-content .stepper-case i {
    color: var(--color-warning);
    margin-right: 4px;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .horizontal-stepper {
        flex-wrap: wrap;
        gap: 18px 12px;
        padding-top: 14px;
    }

    .stepper-item {
        flex: 1 1 calc(50% - 12px);
        min-width: 140px;
    }

    .stepper-arrow {
        display: none;
    }
}

/* 示例标题：带图标的统一标题风格 */
.example-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 14px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.example-title .example-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 3px 8px rgba(var(--theme-primary-rgb), 0.25);
}

.example-title .example-icon i {
    line-height: 1;
}

/* 消息队列选型对比卡片 */
.mq-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.mq-scheme-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mq-scheme-card:hover {
    transform: translateY(-3px) scale(1.005);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 16px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(var(--theme-primary-rgb), 0.1);
    border-color: var(--color-border-hover);
}

.mq-scheme-card.mq-scheme-winner {
    border-color: var(--color-success);
    box-shadow: 0 0 0 1px var(--color-success), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mq-scheme-card.mq-scheme-winner:hover {
    box-shadow: 0 0 0 1px var(--color-success), 0 8px 20px rgba(0, 0, 0, 0.08);
}

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

.mq-scheme-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.mq-scheme-name i {
    color: var(--theme-primary);
    font-size: 1.05rem;
}

.mq-scheme-score {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 8px;
}

.mq-scheme-winner .mq-scheme-score {
    background: linear-gradient(135deg, var(--color-success), var(--color-success));
}

.mq-dimension {
    margin-bottom: 10px;
}

.mq-dimension:last-child {
    margin-bottom: 0;
}

.mq-dimension-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.mq-dimension-label .mq-score {
    font-weight: 600;
    color: var(--color-text-primary);
}

.mq-progress {
    height: 7px;
    background-color: var(--color-border-muted);
    border-radius: 8px;
    overflow: hidden;
}

.mq-progress-bar {
    height: 100%;
    border-radius: 8px;
    transition: width 0.6s ease-out;
}

.mq-bar-green { background: linear-gradient(90deg, var(--color-success), var(--color-success)); }
.mq-bar-blue { background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent)); }
.mq-bar-yellow { background: linear-gradient(90deg, var(--color-warning), var(--color-warning)); }
.mq-bar-red { background: linear-gradient(90deg, var(--color-danger), var(--color-danger)); }

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

/* ATAM 架构权衡分析法：垂直时间线 */
.atam-timeline {
    position: relative;
    padding-left: 44px;
    margin-bottom: 24px;
}

.atam-timeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(to bottom, var(--theme-primary), var(--color-success), var(--color-warning), var(--color-danger));
    border-radius: 1px;
}

.atam-phase {
    position: relative;
    margin-bottom: 18px;
}

.atam-phase:last-child {
    margin-bottom: 0;
}

.atam-phase-dot {
    position: absolute;
    left: -35px;
    /* top = card padding-top + title-lineHeight/2 − dot-height/2
       ≈ 16 + 12 − 11 = 17px，让圆圈中心与 .atam-phase-title 文字中心对齐 */
    top: 17px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-bg-surface);
    border: 3px solid var(--theme-primary);
    box-shadow: 0 0 0 2px #fff;
    z-index: 1;
}

.atam-phase:nth-child(1) .atam-phase-dot { border-color: var(--theme-primary); }
.atam-phase:nth-child(2) .atam-phase-dot { border-color: var(--color-success); }
.atam-phase:nth-child(3) .atam-phase-dot { border-color: var(--color-warning); }
.atam-phase:nth-child(4) .atam-phase-dot { border-color: var(--color-danger); }

.atam-phase-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.atam-phase-card:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 12px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(var(--theme-primary-rgb), 0.09);
    border-color: var(--color-border-hover);
}

.atam-phase-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.atam-phase-desc {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 14px;
}

.atam-phase-section {
    margin-bottom: 12px;
}

.atam-phase-section:last-child {
    margin-bottom: 0;
}

.atam-phase-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.atam-phase-section-title i {
    color: var(--theme-primary);
    font-size: 0.9rem;
}

.atam-phase-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.atam-phase-item {
    background: var(--color-bg-page);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.84rem;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.atam-phase-item strong {
    color: var(--color-bg-inverse);
}

.atam-phase-item.full-width {
    grid-column: 1 / -1;
}

/* ATAM 场景示例：文本加粗 + 文字徽章标注 */
.atam-phase-item.scenario-example {
    line-height: 2;
}

.scenario-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 2px 6px;
    border-radius: 8px;
    margin: 0 4px 0 2px;
    vertical-align: middle;
    white-space: nowrap;
    color: #fff;
}

.scenario-badge.source { background: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-primary-darker)); }
.scenario-badge.stimulus { background: var(--theme-accent); }
.scenario-badge.env { background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark)); }
.scenario-badge.artifact { background: var(--color-warning); }
.scenario-badge.response { background: var(--color-success); }
.scenario-badge.metric { background: var(--color-danger); }

/* 质量属性徽章（用于 ATAM 示例等场景） */
.quality-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 2px 6px;
    border-radius: 8px;
    margin: 0 0 0 6px;
    vertical-align: middle;
    white-space: nowrap;
    color: #fff;
}

.quality-badge.performance { background: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-primary-darker)); }
.quality-badge.availability { background: var(--color-success); }
.quality-badge.modifiability { background: var(--theme-accent); }
.quality-badge.security { background: var(--color-danger); }
.quality-badge.consistency { background: var(--color-warning); }

/* 常见评估误区：翻转卡片（正面误区/反面正确做法） */
.pitfall-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

/* 让 grid item、inner、正反面都撑满同一行高度 */
.pitfall-grid .content-card-grid.flip-card {
    min-height: auto;
    height: 100%;
    perspective: 1000px;
}

.pitfall-grid .flip-card-inner {
    display: grid;
    grid-template: 1fr / 1fr;
    min-height: auto;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.pitfall-grid .flip-card-front,
.pitfall-grid .flip-card-back {
    grid-area: 1 / 1 / 2 / 2;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: auto;
    backface-visibility: hidden;
    border-radius: 8px;
    padding: 20px 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* 正面：白底 + 浅蓝圆形图标 + 深色文字 */
.pitfall-grid .flip-card-front {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

/* 反面：蓝色渐变 + 白色文字（与 6.3.1 权衡卡片反面一致） */
.pitfall-grid .flip-card-back {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 60%, var(--theme-primary-darker) 100%);
    color: #fff;
    transform: rotateY(180deg);
    border: 1px solid var(--theme-primary);
}

.pitfall-front-icon,
.pitfall-back-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.pitfall-front-icon {
    background-color: var(--theme-primary-bg);
    color: var(--theme-primary);
}

.pitfall-back-icon {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.pitfall-front-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
    text-align: center;
}

.pitfall-front-text {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0;
    text-align: center;
}

.pitfall-back-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    text-align: center;
}

.pitfall-back-text {
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    text-align: center;
}

@media (max-width: 1199px) {
    .pitfall-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .pitfall-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ADR 模板对比卡片 —— 翻转卡片 */
.adr-template-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    align-items: stretch;
}

.adr-template-card {
    perspective: 1000px;
    min-height: 420px;
}

.adr-template-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.adr-template-card:hover .adr-template-flip-inner,
.adr-template-card:focus-within .adr-template-flip-inner {
    transform: rotateY(180deg);
}

.adr-template-flip-front,
.adr-template-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.adr-template-flip-back {
    transform: rotateY(180deg);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
}

.adr-template-header {
    padding: 18px 16px 14px;
    text-align: center;
    color: #fff;
}

.adr-template-card.nygard .adr-template-header {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 60%, var(--theme-primary-darker) 100%);
}

.adr-template-card.madr .adr-template-header {
    background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent) 100%);
}

.adr-template-card.ystatement .adr-template-header {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success) 100%);
}

.adr-template-header i {
    font-size: 1.6rem;
    margin-bottom: 8px;
    display: block;
}

.adr-template-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.3;
}

.adr-template-scenario {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.adr-template-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-surface);
    overflow: hidden;
}

.adr-template-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.adr-template-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.adr-template-section-title i {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* 正面：模板结构列表，虚线分隔、均分空间 */
.adr-template-list {
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.adr-template-list li {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-border-hover);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    min-height: 0;
}

.adr-template-list li:first-child {
    padding-top: 0;
}

/* Y-Statements 第一行：上下文 C 与问题 P 左右并排 */
.adr-template-list li.y-statement-cp-row {
    justify-content: space-between;
    gap: 12px;
}

.adr-template-list li.y-statement-cp-row span {
    flex: 1;
    white-space: nowrap;
}

.adr-template-list li.y-statement-cp-row span:last-child {
    text-align: right;
}

/* Y-Statements 下方四行：水平居中，凸显 Y 型分叉 */
.adr-template-list li.y-statement-center-row {
    justify-content: center;
}

/* 反面：无背景、无标题区分，直接以虚线行展示示例 */
.adr-example-plain {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    min-height: 0;
}

.adr-example-row {
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-border-hover);
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--color-text-primary);
}

.adr-example-row:first-child {
    padding-top: 0;
}

.adr-example-row strong,
.adr-example-row-label {
    font-weight: 700;
    color: var(--color-text-secondary);
}

/* 反面底部实线分隔，三卡位置一致 */
.adr-template-flip-back::after {
    content: '';
    display: block;
    height: 12px;
    border-top: 1px solid var(--color-border-muted);
    background: var(--color-bg-surface);
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    .adr-template-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* 6.4.4 ADR 实践建议卡片网格 */
.content-grid.adr-practice-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.adr-practice-grid .content-card-grid {
    padding: 20px;
    text-align: left;
    align-items: flex-start;
}

.adr-practice-grid .content-card-grid i {
    font-size: 1.8rem;
    margin-bottom: 12px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-primary-bg);
}

.adr-practice-grid .content-card-grid .card-title {
    font-size: 1rem;
    margin-bottom: 8px;
}

.adr-practice-grid .content-card-grid .card-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

@media (max-width: 900px) {
    .content-grid.adr-practice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .content-grid.adr-practice-grid {
        grid-template-columns: 1fr;
    }
}

/* 7.3.2 绞杀目标四标准卡片网格：4 列单行 */
.content-grid.criteria-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.criteria-grid .content-card-grid {
    padding: 16px 12px;
    text-align: center;
    align-items: center;
}

.criteria-grid .content-card-grid i {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    margin-bottom: 10px;
    border-radius: 8px;
}

.criteria-grid .content-card-grid .card-title {
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.criteria-grid .content-card-grid .card-desc {
    font-size: 0.78rem;
    line-height: 1.5;
}

.criteria-grid .content-card-grid:nth-child(1) i {
    color: var(--theme-primary);
    background: linear-gradient(135deg, var(--theme-primary-bg-hover) 0%, var(--theme-primary-bg-hover) 100%);
}

.criteria-grid .content-card-grid:nth-child(2) i {
    color: var(--color-success);
    background: linear-gradient(135deg, var(--color-success-bg-hover) 0%, var(--color-success-border) 100%);
}

.criteria-grid .content-card-grid:nth-child(3) i {
    color: var(--color-warning);
    background: linear-gradient(135deg, var(--color-warning-bg) 0%, var(--color-warning-bg-hover) 100%);
}

.criteria-grid .content-card-grid:nth-child(4) i {
    color: var(--theme-accent);
    background: linear-gradient(135deg, var(--theme-accent-bg) 0%, var(--theme-accent-border) 100%);
}

@media (max-width: 992px) {
    .content-grid.criteria-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .content-grid.criteria-grid {
        grid-template-columns: 1fr;
    }
}

/* 考核说明页-实训说明卡片：4 列单行，响应式回退 */
.content-grid.lab-guide-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.lab-guide-grid .content-card-grid {
    padding: 16px 12px 12px;
    text-align: center;
    align-items: center;
}

.lab-guide-grid .content-card-grid i {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    margin-bottom: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border-muted);
}

.lab-guide-grid .content-card-grid .card-title {
    font-size: 1rem;
    margin-bottom: 10px;
}

.lab-guide-grid .content-card-grid p {
    font-size: 0.85rem;
    line-height: 1.5;
}

.lab-guide-grid .content-card-grid:nth-child(1) i {
    color: var(--theme-primary-dark);
    background: linear-gradient(135deg, var(--theme-primary-bg-hover) 0%, var(--theme-primary-bg-hover) 100%);
}

.lab-guide-grid .content-card-grid:nth-child(2) i {
    color: var(--color-success);
    background: linear-gradient(135deg, var(--color-success-bg-hover) 0%, var(--color-success-border) 100%);
}

.lab-guide-grid .content-card-grid:nth-child(3) i {
    color: var(--color-warning);
    background: linear-gradient(135deg, var(--color-warning-bg) 0%, var(--color-warning-bg-hover) 100%);
}

.lab-guide-grid .content-card-grid:nth-child(4) i {
    color: var(--color-danger);
    background: linear-gradient(135deg, var(--color-danger-bg-hover) 0%, var(--color-danger-border) 100%);
}

@media (max-width: 992px) {
    .content-grid.lab-guide-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .content-grid.lab-guide-grid {
        grid-template-columns: 1fr;
    }
}

/* 6.4.3 ADR 状态流转图 */
.adr-lifecycle-section .section-subtitle {
    margin-top: 16px;
    margin-bottom: 8px;
}

.adr-lifecycle-section .section-subdesc {
    margin-bottom: 4px;
}

.adr-lifecycle-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 4px;
}

.adr-lifecycle-section + .section-subtitle {
    margin-top: 12px;
}

.adr-lifecycle-text {
    flex: 0 0 42%;
    min-width: 0;
}

.adr-lifecycle-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.adr-lifecycle-list li {
    padding: 8px 12px;
    border-left: 3px solid var(--theme-primary);
    background-color: var(--color-bg-page);
    border-radius: 0 8px 8px 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.adr-lifecycle-list li strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.adr-lifecycle-diagram {
    flex: 0 0 56%;
    min-width: 0;
}

.adr-state-diagram {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

.adr-state-diagram svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .adr-lifecycle-row {
        flex-direction: column;
        align-items: stretch;
    }

    .adr-lifecycle-text,
    .adr-lifecycle-diagram {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .atam-timeline {
        padding-left: 34px;
    }

    .atam-timeline::before {
        left: 14px;
    }

    .atam-phase-dot {
        left: -28px;
        width: 18px;
        height: 18px;
    }

    .atam-phase-items {
        grid-template-columns: 1fr;
    }
}

/* 软件架构作用：8项卡片网格 */
.role-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.role-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.role-card:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 8px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(var(--theme-primary-rgb), 0.12);
    border-color: var(--color-border-hover);
    transform: translateY(-2px) scale(1.005);
}

.role-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 60%, var(--theme-primary-darker) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 2px;
}

.role-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.role-title {
    font-size: 0.95rem;
    color: var(--color-text-primary);
    line-height: 1.45;
    font-weight: 500;
}

.role-analogy {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.35;
    padding-left: 8px;
    border-left: 2px solid var(--color-border-hover);
}

@media (max-width: 768px) {
    .role-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .role-card {
        padding: 16px;
    }
}

/* 2.1 架构思维：蓝色引言区 */
.content-highlight.thinking-intro {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60px;
    line-height: 1.4;
}

.content-highlight.thinking-intro h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}

.content-highlight.thinking-intro p {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.9;
    max-width: 90%;
    margin: 0;
}

/* 2.1 架构思维：选项卡面板内容 */
.thinking-tab-overview {
    font-size: 0.95rem;
    color: var(--theme-primary-darker);
    line-height: 1.6;
    margin-bottom: 10px;
    padding: 10px 16px;
    background: linear-gradient(110deg, var(--theme-primary-bg) 0%, var(--theme-primary-bg) 40%, var(--theme-primary-bg-hover) 50%, var(--theme-primary-bg) 60%, var(--theme-primary-bg) 100%);
    background-size: 200% 100%;
    border-radius: 8px;
    font-weight: 500;
    position: relative;
    animation: shimmer 3s ease-in-out infinite;
}

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

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

.thinking-tab-subtag {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--theme-primary);
    background: var(--theme-primary-bg-hover);
    padding: 3px 12px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-weight: 500;
}

.thinking-tab-points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.thinking-tab-point {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-bg-surface);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.thinking-tab-point:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(var(--theme-primary-rgb), 0.1);
    border-color: var(--color-border-hover);
}

.thinking-tab-label {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--theme-primary);
    min-width: 72px;
    padding: 3px 8px;
    background: var(--theme-primary-bg);
    border-radius: 8px;
    text-align: center;
    line-height: 1.4;
}

.thinking-tab-text {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    flex: 1;
    padding-top: 2px;
}

/* 关键补充：思考模块风格 + 虚线框 */
.thinking-key-supplement {
    margin-top: 16px;
    padding: 16px 18px;
    background: linear-gradient(110deg, var(--theme-primary-bg) 0%, var(--theme-primary-bg) 40%, var(--theme-primary-bg) 50%, var(--theme-primary-bg) 60%, var(--theme-primary-bg) 100%);
    background-size: 200% 100%;
    border: 2px dashed var(--theme-primary);
    border-radius: 12px;
    animation: shimmer 3s ease-in-out infinite;
}

.thinking-key-supplement-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--theme-primary-dark);
}

.thinking-key-supplement-header i {
    font-size: 1.1rem;
    color: var(--theme-primary);
}

.thinking-key-supplement>p {
    font-size: 0.88rem;
    color: var(--color-text-primary);
    line-height: 1.7;
    margin: 0 0 10px 0;
}

.thinking-key-supplement-levels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.thinking-key-supplement-level {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg-surface);
    border: 1px solid var(--theme-primary-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.thinking-key-supplement-level i {
    color: var(--theme-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.thinking-key-supplement-level strong {
    color: var(--theme-primary-dark);
    margin-right: 4px;
}

.thinking-key-supplement-footer {
    margin: 0;
    padding-top: 6px;
    border-top: 1px dashed var(--theme-primary-border);
    font-size: 0.88rem;
    color: var(--theme-primary-dark);
    font-weight: 500;
}

/* 3.5 页面：分区子标题 */
.section-subtitle {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    margin: 15px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-subtitle-sm {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 15px 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

.section-subtitle i {
    color: var(--theme-primary);
    font-size: 1.15rem;
}

.section-subdesc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.section-subdesc a {
    text-decoration: none;
}

/* 3.5 页面：架构特性权衡卡片 */
.tradeoff-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.tradeoff-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tradeoff-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--color-border-hover);
}

.tradeoff-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--color-bg-page) 0%, var(--color-border-muted) 100%);
    border-bottom: 1px solid var(--color-border);
}

.tradeoff-gain,
.tradeoff-loss {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
}

.tradeoff-gain {
    color: var(--color-success);
    background: linear-gradient(135deg, var(--color-success-bg) 0%, var(--color-success-bg-hover) 100%);
    border: 1px solid var(--color-success-border);
}

.tradeoff-gain i {
    font-size: 1.1rem;
    color: var(--color-success);
}

.tradeoff-loss {
    color: var(--color-danger);
    background: linear-gradient(135deg, var(--color-danger-bg) 0%, var(--color-danger-bg-hover) 100%);
    border: 1px solid var(--color-danger-border);
}

.tradeoff-loss i {
    font-size: 1.1rem;
    color: var(--color-danger);
}

.tradeoff-vs {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tradeoff-vs span {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-text-muted);
    background: var(--color-border-muted);
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 1px;
}

.tradeoff-body {
    padding: 16px 24px;
}

.tradeoff-body p {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 12px 0;
}

.tradeoff-result {
    font-size: 0.85rem;
    color: var(--theme-primary);
    background: linear-gradient(135deg, var(--theme-primary-bg) 0%, var(--theme-primary-bg-hover) 100%);
    border: 1px solid var(--theme-primary-border);
    border-radius: 8px;
    padding: 10px 14px;
    line-height: 1.6;
}

.tradeoff-result i {
    color: var(--color-warning);
    margin-right: 4px;
}

/* 3.5 页面：架构特性清单模版 */
.worksheet-container {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
}

.worksheet-header {
    background: linear-gradient(135deg, var(--theme-primary-darker) 0%, var(--theme-primary-dark) 100%);
    color: #fff;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    transition: filter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.worksheet-header:hover {
    filter: brightness(1.1);
}

.worksheet-header h4 {
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.worksheet-header h4 i {
    font-size: 1rem;
}

.worksheet-actions {
    display: flex;
    gap: 6px;
}

.ws-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.66rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ws-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.ws-btn i {
    font-size: 0.72rem;
}

.worksheet-meta {
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-page);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.meta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.meta-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 120px;
}

.meta-field-wide {
    flex: 2.5;
}

.meta-field-narrow {
    flex: 1;
    min-width: 130px;
}

.meta-field label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.meta-field input {
    border: none;
    border-bottom: 2px solid var(--color-border-hover);
    background: transparent;
    padding: 4px 2px;
    font-size: 0.92rem;
    color: var(--color-bg-inverse);
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.meta-field input:focus {
    outline: none;
    border-bottom-color: var(--theme-primary);
}

.meta-field input::placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}

.worksheet-body-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.worksheet-body-wrap.expanded {
    max-height: 4000px;
}

.worksheet-body {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 1.3fr;
    gap: 0;
}

.ws-btn-toggle i,
#wsToggleIcon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.ws-btn-toggle i.rotated,
#wsToggleIcon.rotated,
#wsToggleIcon44.rotated,
#wsToggleIcon53.rotated {
    transform: rotate(180deg);
}

.ws-col {
    padding: 16px 20px;
    border-right: 1px solid var(--color-border);
}

.ws-col:last-child {
    border-right: none;
}

.ws-col-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--color-border-hover);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ws-col-title i {
    color: var(--color-warning);
    font-size: 0.95rem;
}

.ws-col-implicit .ws-col-title i {
    color: var(--theme-primary);
}

.ws-col-common .ws-col-title i {
    color: var(--theme-primary);
}

.ws-col-title:not(:first-child) {
    margin-top: 18px;
}

.driving-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.driving-item {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.driving-item input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
}

.driving-checkmark {
    display: inline-block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--color-border-hover);
    border-radius: 8px;
    background: var(--color-bg-surface);
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.driving-item input[type="checkbox"]:checked+.driving-checkmark {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
}

.driving-item input[type="checkbox"]:checked+.driving-checkmark::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.driving-input {
    flex: 1;
    border: none;
    border-bottom: 1.5px solid var(--color-border);
    padding: 3px 4px;
    font-size: 0.88rem;
    color: var(--color-bg-inverse);
    background: transparent;
    font-family: inherit;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.driving-input:focus {
    outline: none;
    border-bottom-color: var(--theme-primary);
}

.driving-input::placeholder {
    color: var(--color-border-hover);
    font-style: italic;
}

.ws-instructions {
    margin-top: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--theme-primary-bg) 0%, var(--theme-primary-bg) 100%);
    border-left: 3px solid var(--theme-accent-mid);
    border-radius: 0 6px 6px 0;
}

.ws-instructions h6 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--theme-primary-dark);
    margin: 0 0 6px 0;
}

.ws-instructions ul {
    margin: 0;
    padding-left: 18px;
    font-size: 0.78rem;
    color: var(--theme-primary-darker);
    line-height: 1.6;
}

.ws-instructions ul li {
    margin-bottom: 2px;
}

.ws-instructions ul li:last-child {
    margin-bottom: 0;
}

.ws-instructions em {
    color: var(--theme-primary);
    font-style: normal;
    font-weight: 600;
}

.implicit-list,
.others-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}

.ws-line-input {
    border: none;
    border-bottom: 1.5px solid var(--color-border);
    padding: 4px 4px;
    font-size: 0.85rem;
    color: var(--color-bg-inverse);
    background: transparent;
    font-family: inherit;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ws-line-input:focus {
    outline: none;
    border-bottom-color: var(--theme-primary);
}

.ws-line-input::placeholder {
    color: var(--color-border-hover);
    font-style: italic;
}

.implicit-list .ws-line-input::placeholder {
    color: var(--color-text-muted);
}

.common-grid,
.common-grid-extra {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-bottom: 8px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.common-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    font-size: 0.82rem;
    color: var(--color-text-primary);
    line-height: 1.4;
    background: var(--color-bg-surface);
    min-height: 36px;
    justify-content: center;
}

.common-cell sup {
    color: var(--theme-primary);
    font-weight: 700;
    font-size: 0.7rem;
    margin-left: 1px;
}

.composite-list {
    background: linear-gradient(135deg, var(--theme-primary-bg) 0%, var(--theme-primary-bg) 100%);
    border: 1px solid var(--theme-primary-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 4px;
}

.composite-list p {
    margin: 0 0 6px 0;
    font-size: 0.85rem;
    color: var(--theme-primary-darker);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.composite-list p:last-child {
    margin-bottom: 0;
}

.composite-key {
    font-weight: 700;
    color: var(--theme-primary-dark);
}

.composite-arrow {
    color: var(--theme-primary);
    font-weight: 800;
}

.composite-value {
    color: var(--color-text-primary);
    font-size: 0.82rem;
}

.worksheet-footer {
    background: var(--color-bg-page);
    border-top: 1px solid var(--color-border);
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.worksheet-footer span {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.worksheet-footer sup {
    color: var(--theme-primary);
    font-weight: 700;
    margin: 0 2px;
}

.worksheet-footer.in-col {
    margin: 14px -20px -16px -20px;
    border-top: 1px solid var(--color-border);
}

/* 架构特性定义速查面板 */
.worksheet-definitions {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-top: 16px;
    margin-bottom: 16px;
}

.ws-def-header {
    background: linear-gradient(135deg, var(--color-bg-page) 0%, var(--color-border) 100%);
    padding: 12px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.ws-def-header:hover {
    background: linear-gradient(135deg, var(--color-border) 0%, var(--color-border-hover) 100%);
}

.ws-def-header i:first-child {
    color: var(--theme-primary);
    font-size: 1rem;
}

.ws-def-toggle {
    margin-left: auto;
    color: var(--color-text-secondary);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ws-def-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 20px;
}

.ws-def-body.expanded {
    max-height: 1500px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--color-border);
}

.ws-def-body.expanded+.ws-def-header .ws-def-toggle,
.worksheet-definitions.expanded .ws-def-toggle {
    transform: rotate(180deg);
}

.ws-def-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
}

.ws-def-item {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    padding: 6px 0;
    border-bottom: 1px dashed var(--color-border);
}

.ws-def-item strong {
    color: var(--theme-primary);
    margin-right: 4px;
}

.ws-def-item sup {
    color: var(--theme-primary);
    font-weight: 700;
    font-size: 0.7rem;
    margin: 0 1px;
}

.ws-def-item em {
    color: var(--theme-primary);
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 2px;
}

/* 3.5 清单模版响应式 */
@media (max-width: 992px) {
    .worksheet-body {
        grid-template-columns: 1fr;
    }

    .ws-col {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .ws-col:last-child {
        border-bottom: none;
    }

    .ws-def-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .meta-row {
        flex-direction: column;
    }

    .meta-field-wide,
    .meta-field-narrow {
        flex: 1;
        min-width: 0;
    }

    .common-grid,
    .common-grid-extra {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3.5 模版打印样式 */
@media print {
    @page {
        size: landscape;
        margin: 10mm;
    }

    /* 全局隐藏 */
    #nav-container,
    #footer-container,
    .floating-toolbar,
    .sidebar,
    .worksheet-actions,
    .worksheet-definitions,
    .content-path,
    .floating-note,
    .note-container,
    .pen-canvas,
    .modal,
    .svg-zoom-modal {
        display: none !important;
    }

    /* 打印 worksheet 时只显示当前 worksheet 克隆容器 */
    body.printing-worksheet {
        background: #fff;
    }

    body.printing-worksheet > *:not(.ws-print-container) {
        display: none !important;
    }

    body.printing-worksheet .ws-print-container {
        display: block !important;
        padding: 0;
        margin: 0;
    }
}

/* 屏幕下隐藏打印临时容器，仅在打印媒体中显示 */
.ws-print-container {
    display: none;
}

@media print {
    /* 解除所有祖先容器的溢出/高度限制，避免内容被截断 */
    body.printing-worksheet main {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    body.printing-worksheet .course-container {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.printing-worksheet .main-content {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.printing-worksheet .content-wrapper {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    body.printing-worksheet .worksheet-body-wrap {
        max-height: none !important;
        overflow: visible !important;
    }

    /* 打印时 worksheet 样式优化，确保完整显示在一页横向 A4 */
    body.printing-worksheet .worksheet-container {
        box-shadow: none;
        border: 1px solid var(--color-text-primary);
        margin: 0;
        border-radius: 0;
    }

    body.printing-worksheet .worksheet-header {
        background: var(--theme-primary-darker) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        padding: 6px 12px;
    }

    body.printing-worksheet .worksheet-header h4 {
        font-size: 1rem;
    }

    body.printing-worksheet .worksheet-meta {
        padding: 6px 12px;
        gap: 4px;
    }

    body.printing-worksheet .meta-row {
        gap: 8px;
    }

    body.printing-worksheet .meta-field label {
        font-size: 0.6rem;
    }

    body.printing-worksheet .meta-field input {
        font-size: 0.78rem;
        padding: 1px 0;
    }

    body.printing-worksheet .ws-col {
        padding: 6px 8px;
    }

    body.printing-worksheet .ws-col-title {
        font-size: 0.78rem;
        margin-bottom: 4px;
        padding-bottom: 3px;
    }

    body.printing-worksheet .driving-list {
        gap: 2px;
        margin-bottom: 6px;
    }

    body.printing-worksheet .driving-item {
        gap: 4px;
    }

    body.printing-worksheet .driving-checkmark {
        width: 14px;
        height: 14px;
    }

    body.printing-worksheet .driving-input,
    body.printing-worksheet .ws-line-input {
        font-size: 0.74rem;
        padding: 1px 0;
    }

    body.printing-worksheet .ws-instructions {
        font-size: 0.68rem;
        padding: 5px 7px;
    }

    body.printing-worksheet .ws-instructions h6 {
        font-size: 0.72rem;
        margin-bottom: 3px;
    }

    body.printing-worksheet .ws-instructions ul {
        padding-left: 12px;
        margin-bottom: 0;
    }

    body.printing-worksheet .ws-instructions li {
        margin-bottom: 1px;
    }

    body.printing-worksheet .common-grid,
    body.printing-worksheet .common-grid-extra {
        gap: 2px;
        margin-bottom: 4px;
    }

    body.printing-worksheet .common-cell {
        font-size: 0.68rem;
        padding: 2px 3px;
    }

    body.printing-worksheet .composite-list {
        margin-bottom: 4px;
    }

    body.printing-worksheet .composite-list p {
        font-size: 0.68rem;
        margin-bottom: 2px;
    }

    body.printing-worksheet .worksheet-footer {
        font-size: 0.65rem;
        padding: 4px 6px;
    }
}

/* 8.5 架构图评审清单 worksheet 专用样式 */
.worksheet-body.review-checklist-body {
    display: block;
    padding: 0;
}

.review-checklist {
    padding: 16px 20px;
}

.review-section {
    margin-bottom: 20px;
}

.review-section:last-child {
    margin-bottom: 0;
}

.review-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.review-section-title i {
    color: var(--theme-primary);
}

.review-check-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.92rem;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.review-check-item:hover {
    background-color: var(--color-border-muted);
}

.review-check-item input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.review-check-item span {
    flex: 1;
}

.review-conclusion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.review-conclusion .review-check-item {
    margin-bottom: 0;
}

.review-problems {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    resize: vertical;
}

.review-problems:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.08);
}

@media print {
    body.printing-worksheet .review-check-item {
        font-size: 0.75rem;
        padding: 4px 6px;
    }

    body.printing-worksheet .review-section-title {
        font-size: 0.8rem;
        margin-bottom: 6px;
    }

    body.printing-worksheet .review-problems {
        min-height: 50px;
        font-size: 0.75rem;
    }
}

/* 2.2 模块化思维：引用块微调 */
.module-thinking-quote {
    margin-top: 4px;
}

.content-quote {
    border-left: 4px solid var(--theme-primary);
    padding: 16px 20px;
    margin-bottom: 15px;
    background-color: var(--color-bg-page);
    font-style: italic;
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.content-quote-compact {
    padding: 8px 20px;
    margin-top: 15px;
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.content-quote-translation {
    display: block;
    margin-top: 4px;
    font-size: 0.9rem;
    font-style: normal;
    color: var(--color-text-secondary);
}

/* 与核心要点框保持一致的紧凑高亮样式 */
.content-quote.content-quote-compact.laws-quote {
    font-style: normal;
    color: var(--color-text-primary);
}

/* 混合架构要点框：主题色引用样式 + 非斜体要点标题 */
.content-quote.content-quote-compact.hybrid-quote {
    font-style: normal;
    color: var(--color-text-primary);
    border-left: 4px solid var(--theme-primary);
    background-color: var(--theme-primary-bg);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    padding: 14px 20px;
    margin-top: 18px;
    margin-bottom: 18px;
    line-height: 1.7;
}

.content-quote.content-quote-compact.hybrid-quote strong {
    color: var(--theme-primary-dark);
    margin-right: 6px;
}

.content-quote.content-quote-compact.hybrid-quote strong i {
    margin-right: 4px;
}

.lifecycle-svg {
    display: block;
    height: auto;
    max-height: 95px;
    margin: 8px 0 16px 0;
}


/* ====== 右侧浮动工具条（Bootstrap 按钮美化，默认折叠垂直居中） ====== */
.floating-toolbar {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* z-index 100004：置于最上层，高于画笔 canvas(100003)/便签(100000)/模态框(10001)/遮罩(10000)/导航栏(9999)，
       确保画笔激活时工具栏仍可接收鼠标事件（hover 恢复默认光标），SVG 模态框打开时遮罩不会盖住工具栏 */
    z-index: 100004;
    transition: gap 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 折叠时间距归零，保证切换按钮精确居中 */
.floating-toolbar.collapsed {
    gap: 0;
}

/* 圆形功能按钮 */
.float-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        min-width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        border-width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.float-btn:hover {
    background-color: var(--theme-primary);
    color: #fff;
    border-color: var(--theme-primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(var(--theme-primary-rgb), 0.35);
}

/* 折叠状态：功能按钮收起（高度/宽度/透明度归零），切换按钮成为唯一元素自动垂直居中 */
.floating-toolbar.collapsed .float-btn:not(.toolbar-toggle-btn) {
    height: 0;
    width: 0;
    min-width: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    border-width: 0;
    pointer-events: none;
    transform: scale(0);
}

/* 切换按钮：主色调圆形，hover 仅加深背景与阴影，箭头方向由单击切换决定 */
.toolbar-toggle-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 0.95rem;
    box-shadow: 0 3px 12px rgba(var(--theme-primary-rgb), 0.4);
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.toolbar-toggle-btn:hover {
    background-color: var(--theme-primary-dark);
    box-shadow: 0 5px 16px rgba(var(--theme-primary-rgb), 0.5);
}

.toolbar-toggle-btn:active {
    transform: scale(0.95);
}

/* ========== 画笔标注工具 ========== */
.pen-tool-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 颜色选择浮层：在画笔按钮左侧弹出 */
.pen-color-picker {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    gap: 10px;
    background: var(--color-bg-surface);
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    z-index: 10001;
    border: 1px solid var(--color-border);
}

.pen-color-picker.show {
    display: flex;
}

/* 浮层右侧小三角指示 */
.pen-color-picker::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-left-color: #fff;
}

.pen-color-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.pen-color-dot:hover {
    transform: scale(1.18);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pen-color-dot.selected {
    border-color: var(--color-text-primary);
    box-shadow: 0 0 0 2px var(--color-text-primary), 0 0 0 4px rgba(239, 68, 68, 0.35);
    transform: scale(1.08);
}

.pen-color-red {
    background-color: var(--color-danger);
}

.pen-color-blue {
    background-color: var(--theme-accent);
}

.pen-color-green {
    background-color: var(--color-success);
}

/* 画笔按钮激活态高亮 */
#penToolBtn.active {
    background-color: var(--theme-primary);
    color: #fff;
    border-color: var(--theme-primary);
}

/* 绘图 canvas：全屏覆盖，默认隐藏，激活时接收鼠标事件 */
/* z-index 100003：高于工具栏(100002)/便签(100000)/模态框(10001)/遮罩(10000)，
   确保画笔激活时覆盖模态框，可在放大的 SVG 图片上画图标注 */
.pen-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100003;
    display: none;
}

.pen-canvas.active {
    display: block;
    pointer-events: auto;
}

/* ========== 便签工具 ========== */
.note-tool-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 便签卡片：默认隐藏，.show 时显示。position:fixed 可在页面上任意位置停留 */
/* z-index 100000：高于导航栏(9999)/下拉菜单(99999)/模态框(10001)，拖动时不被遮挡 */
.note-card {
    position: fixed;
    display: none;
    flex-direction: column;
    width: 300px;
    max-height: 360px;
    background: var(--theme-accent-light);
    border: 1px solid var(--theme-accent-mid);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    z-index: 100000;
    overflow: hidden;
    user-select: none;
}

.note-card.show {
    display: flex;
}

/* 便签数量上限提示（#note-limit-toast）：复用「未开发课程」toast 样式，
   但层级需高于便签(z-index 100000)，否则屏幕中央的便签会盖住提示 */
#note-limit-toast {
    z-index: 100004;
}

/* 顶部标题栏（也是拖动手柄区域） */
.note-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--theme-accent-mid);
    border-bottom: 1px solid var(--theme-accent);
    flex-shrink: 0;
}

.note-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.note-title i {
    font-size: 1rem;
}

/* 关闭按钮 */
.note-close-btn {
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 8px;
    line-height: 1;
    transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.note-close-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-danger-text);
}

/* 可编辑正文区 */
.note-body {
    flex: 1 1 auto;
    padding: 12px 14px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    min-height: 120px;
    max-height: 260px;
    overflow-y: auto;
    outline: none;
    word-break: break-word;
    /* 隐藏滚动条但保留滚动能力 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.note-body::-webkit-scrollbar {
    display: none;
}

/* 编辑态：正文可输入，光标为文本样式；此时不可拖动（避免影响选文字） */
.note-card.editing .note-body {
    cursor: text;
    user-select: text;
}

/* 编辑态聚焦光晕 */
.note-card.editing .note-body:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
    border-radius: 4px;
}

/* 占位符（无内容时显示提示） */
.note-card.editing .note-body:empty::before {
    content: '在此输入要记录的内容...';
    color: var(--color-text-muted);
    pointer-events: none;
}

/* 保存态（.saved）：非激活态，整个便签可拖动，光标变为移动样式 */
.note-card.saved {
    cursor: move;
}

.note-card.saved .note-body {
    cursor: move;
    user-select: none;
}

/* 拖动中禁用文本选中、过渡，保证跟手 */
.note-card.dragging {
    cursor: grabbing;
    user-select: none;
    transition: none;
}

/* 底部操作栏：保存按钮右对齐 */
.note-footer {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    border-top: 1px solid var(--theme-accent);
    background: var(--theme-accent-mid);
    flex-shrink: 0;
}

/* 保存按钮：棕色系，与黄色便签协调 */
/* 默认（未激活/已保存态）：透明背景、棕色边框文字 */
.note-save-btn {
    font-size: 0.82rem;
    padding: 3px 16px;
    border-radius: 8px;
    border: 1px solid var(--color-text-secondary);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    line-height: 1.5;
    /* 颜色无过渡，点击保存瞬间切换，反馈干脆无延迟感 */
    transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

/* 激活态（编辑中）：填充棕色背景白色文字，提示用户点此保存 */
.note-save-btn.active {
    background: var(--color-text-secondary);
    color: #fff;
    border-color: var(--color-text-secondary);
}

/* 非激活态 hover：浅米色背景棕字，与激活态深棕白字明显区分。
   点击保存后鼠标仍在按钮上时，背景从深棕瞬间变为浅米色，状态变化一目了然 */
.note-save-btn:hover {
    background: var(--color-bg-muted);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

/* 激活态 hover：更深棕色白字，特异性高于 :hover，编辑中悬停仍为深色系 */
.note-save-btn.active:hover {
    background: var(--color-text-secondary);
    color: #fff;
    border-color: var(--color-text-secondary);
}

/* 按下即时触感反馈：轻微缩放，松手回弹，消除延迟感 */
.note-save-btn:active {
    transform: scale(0.92);
}

/* 编辑态按钮按下时用更深的棕色，反馈更明显 */
.note-save-btn.active:active {
    background: var(--color-text-primary);
    transform: scale(0.92);
}

@media (max-width: 768px) {
    .sidebar {
        width: 220px;
    }

    .chapter-link {
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    .main-content {
        padding: 20px;
    }

    .floating-toolbar {
        right: 10px;
    }

    .float-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 0.95rem;
    }

    .toolbar-toggle-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 0.85rem;
    }
}

#main-content:fullscreen,
#main-content:-webkit-full-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

#content-wrapper:fullscreen,
#content-wrapper:-webkit-full-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 9999;
    padding: 40px;
}

/* 局部全屏（右侧工具栏按钮）：等比放大章节内容，保证版式与正常模式完全一致。
   --fs-zoom 由 course.js 在进入局部全屏时按实测排版宽度动态计算：
   理论最大值 × 95% 安全系数、0.05 步长取整、上限 1.2，退出全屏还原为 1。
   注意用直接子元素选择器（>）：overview.html 内部嵌套 .content-section，
   后代选择器会造成嵌套层双重放大 */
#content-wrapper:fullscreen > .content-section,
#content-wrapper:-webkit-full-screen > .content-section {
    zoom: var(--fs-zoom, 1);
}

#main-content:fullscreen .content-header,
#main-content:-webkit-full-screen .content-header {
    padding: 16px 30px;
}

#main-content:fullscreen .content-path,
#main-content:-webkit-full-screen .content-path {
    font-size: 1rem;
}

#main-content:fullscreen .content-wrapper,
#main-content:-webkit-full-screen .content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
    display: block;
}

#main-content:fullscreen .content-title,
#main-content:-webkit-full-screen .content-title {
    font-size: 2rem;
    margin-bottom: 30px;
    padding-bottom: 20px;
}

#main-content:fullscreen h3,
#main-content:-webkit-full-screen h3 {
    font-size: 1.5rem;
    margin-bottom: 24px;
}

#main-content:fullscreen .content-text,
#main-content:-webkit-full-screen .content-text {
    font-size: 1.25rem;
    line-height: 2;
    margin-bottom: 24px;
}

#main-content:fullscreen .content-card,
#main-content:-webkit-full-screen .content-card {
    padding: 24px;
    margin-bottom: 24px;
    font-size: 1.15rem;
}

#main-content:fullscreen .content-list li,
#main-content:-webkit-full-screen .content-list li {
    margin-bottom: 12px;
}

/* 浏览器全屏时 html 元素显式填充视口，确保高度链起点正确 */
html:fullscreen,
html:-webkit-full-screen,
html:-moz-full-screen {
    width: 100%;
    height: 100%;
}

/* 浏览器全屏（document.documentElement 全屏，sidebar + 内容区同时可见）*/
/* 必须显式设置整个布局链的高度，因为 body { height: 100vh } 依赖
   viewport 单位，但在切换全屏模式时可能出现高度计算不及时的问题。
   为了避免 height:100% 在过渡期间无法解析导致高度链断裂，
   这里使用 flex 方式让每个子元素直接填充父容器。 */
.fs-browser,
html:fullscreen body,
html:-webkit-full-screen body,
html:-moz-full-screen body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.fs-browser main,
html:fullscreen main,
html:-webkit-full-screen main,
html:-moz-full-screen main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.fs-browser .course-container,
html:fullscreen .course-container,
html:-webkit-full-screen .course-container,
html:-moz-full-screen .course-container {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.fs-browser .sidebar,
html:fullscreen .sidebar,
html:-webkit-full-screen .sidebar,
html:-moz-full-screen .sidebar {
    align-self: stretch;
    overflow-y: auto;
}

.fs-browser .main-content,
html:fullscreen .main-content,
html:-webkit-full-screen .main-content,
html:-moz-full-screen .main-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fs-browser .content-header,
html:fullscreen .content-header,
html:-webkit-full-screen .content-header,
html:-moz-full-screen .content-header {
    padding: 16px 30px;
    flex-shrink: 0;
}

.fs-browser .content-path,
html:fullscreen .content-path,
html:-webkit-full-screen .content-path,
html:-moz-full-screen .content-path {
    font-size: 1rem;
}

.fs-browser .content-wrapper,
html:fullscreen .content-wrapper,
html:-webkit-full-screen .content-wrapper,
html:-moz-full-screen .content-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 40px;
}

.fs-browser .content-title,
html:fullscreen .content-title,
html:-webkit-full-screen .content-title,
html:-moz-full-screen .content-title {
    font-size: 2rem;
    margin-bottom: 30px;
    padding-bottom: 20px;
}

.fs-browser h3,
html:fullscreen h3,
html:-webkit-full-screen h3,
html:-moz-full-screen h3 {
    font-size: 1.5rem;
    margin-bottom: 24px;
}

.fs-browser .content-text,
html:fullscreen .content-text,
html:-webkit-full-screen .content-text,
html:-moz-full-screen .content-text {
    font-size: 1.25rem;
    line-height: 2;
    margin-bottom: 24px;
}

.fs-browser .content-card,
html:fullscreen .content-card,
html:-webkit-full-screen .content-card,
html:-moz-full-screen .content-card {
    padding: 24px;
    margin-bottom: 24px;
    font-size: 1.15rem;
}

.fs-browser .content-list li,
html:fullscreen .content-list li,
html:-webkit-full-screen .content-list li,
html:-moz-full-screen .content-list li {
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .sidebar {
        width: 220px;
    }

    .chapter-link {
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    .main-content {
        padding: 20px;
    }

    .tradeoff-header {
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
    }

    .tradeoff-gain,
    .tradeoff-loss {
        width: 100%;
        justify-content: center;
    }
}

/* SVG 放大模态框 (Bootstrap Modal 定制) */
/* 提高层级以覆盖顶部导航栏(z-index:9999) */
.svg-zoom-modal {
    z-index: 10001;
}

/* 显示时用 flex 精确居中模态框（覆盖 Bootstrap 默认 block 布局，
   保证白卡在视口中水平、垂直都严格居中） */
.svg-zoom-modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 建表语句查看模态框（5.1.1）：宽度/高度自适应内容、无滚动条 */
.ddl-modal {
    z-index: 10001;
}

/* 静态居中：用 fixed + translate 固定位置，不依赖父级 flex/display，
   避免关闭瞬间（Bootstrap 移除 .show）布局跳回顶部造成"往左上跑"的错觉 */
.ddl-modal .modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    margin: 0;
    max-width: fit-content;
    width: auto;
    transition: transform 0.3s ease-out !important;   /* 仅供「点击遮罩」的回弹提醒使用 */
}

.ddl-modal .modal-content {
    width: fit-content;
    max-width: 92vw;
    max-height: 92vh;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    overflow: visible;        /* 关键：不允许任何内部滚动条 */
}

.ddl-modal .modal-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
}

.ddl-modal .modal-body {
    padding: 16px 20px;
    overflow: visible;        /* 关键：body 不出滚动条 */
}

.ddl-modal .modal-body pre {
    overflow: visible;
    margin: 0;
}

.ddl-modal .modal-footer {
    padding: 10px 20px;
    border-top: 1px solid var(--color-border);
    justify-content: space-between;
}

/* ddl-view 按钮行：5 个按钮横排展示（实战段顶部用） */
.ddl-view-row {
    display: flex;
    flex-wrap: wrap;          /* 视口不够时允许换行；正常宽度下一行 5 个 */
    gap: 10px;
    margin-bottom: var(--section-gap);
}

.ddl-view-row .btn-ddl-view {
    flex: 0 0 auto;           /* 不自动撑开，保留按钮尺寸 */
    white-space: nowrap;
}

/* 弹入/弹出统一：dialog 位置恒定（fixed 静态居中），
   打开/关闭本身不做位移动画，仅父层 opacity 淡入淡出 */
.ddl-modal.fade .modal-dialog {
    transform: translate(-50%, -50%) !important;
    transition: transform 0.3s ease-out !important;
}

/* 点击遮罩提醒（与 SVG 放大模态框一致）：
   static 遮罩下 Bootstrap 会给模态框临时加 .modal-static，
   内置反馈是 dialog 轻微放大回弹 —— 作为「请用关闭按钮退出」的视觉提醒。
   注意：必须保留 translate(-50%,-50%)，否则会丢失 fixed 居中定位。 */
.ddl-modal.fade.modal-static .modal-dialog {
    transform: translate(-50%, -50%) scale(1.02) !important;
}

/* ddl-view 按钮：跟随主题色（--theme-primary） */
.btn-ddl-view {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
}

.btn-ddl-view:hover,
.btn-ddl-view:focus {
    background-color: var(--theme-primary-dark);
    border-color: var(--theme-primary-dark);
    color: #fff;
}

.btn-ddl-view:active {
    background-color: var(--theme-primary-darker) !important;
    border-color: var(--theme-primary-darker) !important;
    color: #fff !important;
}

.modal-backdrop {
    z-index: 10000;
}

/* 重置确认模态框：提高层级使其高于被全局覆盖的 backdrop(10000) */
#wsResetModal,
.ws-reset-modal {
    z-index: 10500;
}

.svg-zoom-modal .modal-dialog.modal-svg-zoom {
    max-width: 90vw;
    margin: 0;               /* 由父级 flex 居中，去掉 auto 避免双重居中干扰 */
    pointer-events: none;
    justify-content: center;
}

.svg-zoom-modal .modal-content.svg-modal-content {
    position: relative;
    width: fit-content;
    max-width: 90vw;
    max-height: 90vh;
    padding: 8px;            /* 四边对称，保证图片在白卡内居中 */
    background-color: var(--color-bg-surface);
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
    overflow: visible;
}

.svg-zoom-modal .svg-modal-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg-modal-content svg {
    display: block;
    flex: none;
}

/* 缩放滑块控件：脱离文档流，作为悬浮条挂在白卡正下方（与右上角关闭按钮呼应） */
.svg-zoom-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.svg-zoom-controls .zoom-icon-min,
.svg-zoom-controls .zoom-icon-max {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    flex-shrink: 0;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.svg-zoom-controls .zoom-icon-min:hover,
.svg-zoom-controls .zoom-icon-max:hover {
    color: var(--theme-primary-darker);
    background-color: var(--color-border);
}

.svg-zoom-controls .zoom-icon-min:active,
.svg-zoom-controls .zoom-icon-max:active {
    transform: scale(0.92);
}

.svg-zoom-controls .zoom-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--color-border-hover);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    min-width: 120px;
}

.svg-zoom-controls .zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--theme-primary-darker);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.svg-zoom-controls .zoom-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--theme-primary-darker);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.svg-zoom-controls .zoom-value {
    font-size: 0.82rem;
    color: var(--theme-primary-darker);
    font-weight: 600;
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* Bootstrap btn-close 定制为圆形按钮，定位到模态框外部右上角（不遮挡图片） */
.svg-modal-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-bg-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
    border: 1px solid var(--color-border);
}

.svg-modal-close:hover {
    background-color: var(--color-danger);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    transform: scale(1.1);
    opacity: 1;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.svg-clickable {
    cursor: zoom-in;
}

.thinking-question {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: none;
    margin-top: 15px;
}

.thinking-question i {
    font-size: 1.1rem;
    color: var(--theme-accent);
    flex-shrink: 0;
}

.thinking-question span {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-weight: 400;
}

/* 实践题（与思考题同结构，青色系区分，可点击展开） */
.practice-question {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    background: var(--theme-primary-bg);
    border: 1px solid var(--theme-accent-light);
    border-radius: 8px;
    margin-top: 15px;
    cursor: pointer;
    user-select: none;
    transition: border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.practice-question.expanded {
    border-radius: 8px 8px 0 0;
    border-bottom-color: transparent;
}

.practice-question:hover {
    background: var(--theme-primary-bg-hover);
    border-color: var(--theme-accent-mid);
}

.practice-question i.bi-list-check {
    font-size: 1.1rem;
    color: var(--theme-primary);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.practice-question span {
    font-size: 1rem;
    color: var(--theme-primary-dark);
    line-height: 1.6;
    font-weight: 400;
    flex: 1;
}

.practice-arrow {
    font-size: 0.85rem;
    color: var(--theme-primary-dark);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.practice-arrow.rotated {
    transform: rotate(180deg);
}

/* 实践题展开的树状面板（Bootstrap collapse 接管显示/隐藏） */
.practice-tree-panel {
    background: var(--theme-primary-bg);
    border: 1px solid var(--theme-accent-light);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 16px 20px;
    overflow: hidden;
}

.tree-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: var(--section-gap);
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--theme-primary-border);
}

.tree-wrapper {
    font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: 0.88rem;
    line-height: 1.9;
    color: var(--color-text-primary);
    margin-bottom: var(--section-gap);
}

/* 树状目录条目 */
.tree-dir {
    margin-left: 0;
}

.tree-dir summary {
    list-style: none;
    cursor: pointer;
    padding: 2px 0;
    color: var(--theme-primary-darker);
    font-weight: 600;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.tree-dir summary::marker {
    display: none;
}

.tree-dir summary:hover {
    color: var(--theme-primary);
}

.tree-dir summary .bi-folder-fill,
.tree-dir summary .bi-folder2-open {
    color: var(--theme-primary);
    margin-right: 6px;
    font-size: 0.85rem;
}

.tree-dir[open]>summary .tree-icon-folder {
    display: none;
}

.tree-dir:not([open])>summary .tree-icon-folder-open {
    display: none;
}

.tree-dir summary .tree-icon-folder-open {
    display: inline;
}

.tree-dir:not([open])>summary .tree-icon-folder-open {
    display: none;
}

.tree-dir summary .tree-icon-folder {
    display: inline;
}

.tree-comment {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 0.8rem;
    font-style: italic;
}

/* 文件条目 */
.tree-file {
    padding: 2px 0 2px 22px;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.tree-file i {
    color: var(--color-text-secondary);
    margin-right: 6px;
    font-size: 0.8rem;
}

.tree-dir-name {
    padding: 2px 0 2px 22px;
    color: var(--theme-primary-darker);
    font-weight: 500;
}

.tree-dir-name i {
    color: var(--theme-primary);
    margin-right: 6px;
    font-size: 0.8rem;
}

.tree-dir .tree-dir {
    padding-left: 20px;
    border-left: 1px solid var(--color-border);
    margin-left: 6px;
}

/* 2.3 组件化架构图分隔线与 SVG 容器 */
.component-diagram-divider {
    text-align: left;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 12px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--theme-primary-border);
    line-height: 1.5;
}

.component-diagram-wrapper {
    display: flex;
    justify-content: flex-start;
    padding: 0 12px 6px;
}

.component-diagram-svg {
    width: 100%;
    height: auto;
    max-width: 820px;
}

/* 2.1 决策判断实践模块 */
.decision-hint {
    border-bottom: 1px dashed var(--theme-primary-border);
    padding: 12px 4px;
    margin-bottom: 16px;
}

.decision-hint-title {
    font-size: 0.85rem;
    color: var(--theme-primary-dark);
    font-weight: 600;
    margin-bottom: 8px;
}

.decision-hint-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    line-height: 1.6;
}

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

.hint-tag {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 0.78rem;
    color: #fff;
    font-weight: 500;
    flex-shrink: 0;
    margin-top: 2px;
}

.hint-tag-arch {
    background: var(--theme-primary-darker);
}

.hint-tag-design {
    background: var(--theme-primary);
}

.hint-text {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    flex: 1;
}

.decision-list {
    list-style: none;
    counter-reset: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.decision-item {
    position: relative;
    margin-bottom: 10px;
    padding: 8px 90px 8px 12px;
    background: var(--theme-primary-bg);
    border-radius: 8px;
    border: 1px solid var(--theme-primary-bg-hover);
}

.decision-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.decision-no {
    font-size: 0.88rem;
    color: var(--theme-primary-dark);
    font-weight: 600;
    flex-shrink: 0;
    min-width: 24px;
}

.decision-text {
    font-size: 0.88rem;
    color: var(--color-text-primary);
    line-height: 1.6;
    flex: 1;
}

.decision-answer {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 14px;
    border-radius: 12px;
    font-size: 0.78rem;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
}

.decision-answer.revealed {
    display: inline-block;
}

.answer-arch {
    background: var(--theme-primary-darker);
}

.answer-design {
    background: var(--theme-primary);
}

.decision-buttons {
    display: flex;
    gap: 12px;
    padding-top: 4px;
}

.decision-btn {
    padding: 7px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.btn-next {
    background: var(--theme-primary-darker);
    color: #fff;
    border-color: var(--theme-primary-darker);
}

.btn-next:hover {
    background: var(--theme-primary-darker);
    border-color: var(--theme-primary-darker);
    color: #fff;
}

.btn-next:active {
    background: var(--theme-primary-darker) !important;
    border-color: var(--theme-primary-darker);
    color: #fff;
}

.btn-all {
    background: var(--theme-primary);
    color: #fff;
    border-color: var(--theme-primary);
}

.btn-all:hover {
    background: var(--theme-primary-dark);
    border-color: var(--theme-primary-dark);
    color: #fff;
}

.btn-all:active {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary);
    color: #fff;
}

.decision-footer {
    border-top: 1px dashed var(--theme-primary-border);
    padding-top: 12px;
    margin-top: 16px;
    font-size: 0.82rem;
    font-weight: bold;
    color: var(--theme-primary-dark);
}

/* 3.1 架构特性清单实践模块：分类+虚线分割 */
.char-category {
    padding: 14px 4px;
    border-bottom: 1px dashed var(--theme-primary-border);
}

.char-category:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.char-cat-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: var(--theme-primary-dark);
    font-weight: 600;
    margin: 0 0 4px;
}

.char-cat-title i {
    color: var(--theme-primary);
    font-size: 1.05rem;
}

.char-cat-desc {
    font-size: 0.83rem;
    color: var(--color-text-secondary);
    margin: 0 0 10px;
    line-height: 1.5;
}

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

.char-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 8px;
    margin-bottom: 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
    line-height: 1.55;
}

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

.char-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--theme-primary-dark);
    flex-shrink: 0;
    min-width: 168px;
    white-space: nowrap;
}

.char-desc {
    font-size: 0.85rem;
    color: var(--color-text-primary);
    flex: 1;
}

.char-important-icon {
    font-size: 1.05rem;
    color: var(--theme-primary);
    flex-shrink: 0;
    align-self: center;
    opacity: 0.85;
}

.char-source {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--theme-primary-border);
    line-height: 1.6;
}

/* Practice step — for multi-step answer breakdowns inside practice panels */
.practice-step {
    margin-bottom: 16px;
}

.practice-step:last-child {
    margin-bottom: 0;
}

.practice-step-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--theme-primary-dark);
    margin: 0 0 8px 0;
    padding-left: 4px;
}

.practice-step-result {
    font-size: 0.86rem;
    color: var(--color-text-secondary);
    background: rgba(14, 116, 144, 0.06);
    border-left: 3px solid var(--theme-primary-dark);
    border-radius: 0 4px 4px 0;
    padding: 8px 12px;
    margin: 8px 0 0 0;
    line-height: 1.6;
}

/* 3.2 架构特性识别实践模块 — 四种方法高亮 */
.practice-intro-32 .practice-guide {
    color: var(--color-text-secondary);
    font-size: 0.92rem;
    margin-bottom: 15px;
    line-height: 1.6;
}

.identify-demand-text {
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 18px;
    line-height: 1.8;
    color: var(--color-text-primary);
    font-size: 0.95rem;
}

.identify-demand-text p {
    margin-bottom: 10px;
}

.identify-demand-text p:last-child {
    margin-bottom: 0;
}

.identify-demand-text .demand-label {
    display: inline-block;
    background: var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 2px;
    font-weight: 600;
}

.identify-demand-text .segment {
    display: inline;
    border-radius: 3px;
    padding: 1px 2px;
    transition: background 0.2s, border-color 0.2s;
    cursor: default;
    border-bottom: 2px solid transparent;
}

.identify-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.identify-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s, background 0.2s, color 0.2s;
}

.identify-btn i {
    font-size: 1.02rem;
    line-height: 1;
    flex-shrink: 0;
}

.identify-btn:active {
    transform: scale(0.96);
}

.identify-btn.method-1 {
    background: var(--theme-primary-bg);
    color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.identify-btn.method-1.active {
    background: var(--theme-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}

.identify-btn.method-2 {
    background: var(--color-success-bg-hover);
    color: var(--color-success);
    border-color: var(--color-success);
}

.identify-btn.method-2.active {
    background: var(--color-success);
    color: #fff;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}

.identify-btn.method-3 {
    background: var(--color-warning-bg-hover);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.identify-btn.method-3.active {
    background: var(--color-warning);
    color: #fff;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

.identify-btn.method-4 {
    background: var(--theme-accent-bg);
    color: var(--theme-accent);
    border-color: var(--theme-accent-light);
}

.identify-btn.method-4.active {
    background: var(--theme-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
}

.segment.active-m1 {
    background: var(--theme-primary-bg);
    border-bottom-color: var(--theme-primary);
}

.segment.active-m1::after {
    content: "（" attr(data-m1) "）";
    color: var(--theme-primary);
    font-weight: 600;
}

.segment.active-m2 {
    background: var(--color-success-bg-hover);
    border-bottom-color: var(--color-success);
}

.segment.active-m2::after {
    content: "（" attr(data-m2) "）";
    color: var(--color-success);
    font-weight: 600;
}

.segment.active-m3 {
    background: var(--color-warning-bg-hover);
    border-bottom-color: var(--color-warning);
}

.segment.active-m3::after {
    content: "（" attr(data-m3) "）";
    color: var(--color-warning);
    font-weight: 600;
}

.segment.active-m4 {
    background: var(--theme-accent-bg);
    border-bottom-color: var(--theme-accent);
}

.segment.active-m4::after {
    content: "（" attr(data-m4) "）";
    color: var(--theme-accent);
    font-weight: 600;
}

/* 方法二隐式补充清单（需求文本未提及但长期迭代必备的隐式特性） */
.implicit-supplement {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--color-success-bg);
    border: 1px dashed var(--color-success);
    border-radius: 8px;
    font-size: 0.86rem;
    line-height: 1.8;
    color: var(--color-success-text);
}

.implicit-supplement-label {
    font-weight: 700;
    color: var(--color-success-text);
    margin-right: 4px;
}

.implicit-supplement-item {
    display: inline;
    background: var(--color-success-bg-hover);
    color: var(--color-success-text);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    margin: 0 1px;
}

/* ============================================================
   实践模块：从需求到架构特性清单
   ============================================================ */
.practice-module {
    margin-top: 48px;
}

.practice-tree-panel .practice-module {
    margin-top: 0;
}

.practice-divider {
    border: none;
    border-top: 2px dashed var(--color-border-hover);
    margin: 28px 0;
}

/* 实践容器 */
.practice-box {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 24px 28px;
    position: relative;
}

/* v94e：8.1 章节步骤 1-4 之间原本用 <hr class="practice-divider"> 隔开（v94d 已删），
   删了之后相邻 .practice-box 紧贴（间距 0px），与最后一步到本节总结的 24px 不一致。
   用相邻兄弟选择器只给 1↔2、2↔3、3↔4 加 24px 顶部间距，
   最后一个 .practice-box（输出图件清单）保持原样，让 .section-summary 的 margin-top 仍然生效。 */
#chapter-8-1 .practice-box + .practice-box {
    margin-top: 24px;
}

/* 8.2 章节步骤间间距，与 8.1 保持一致 */
#chapter-8-2 .practice-box + .practice-box {
    margin-top: 24px;
}

/* 8.5 章节步骤间间距，与 8.1、8.2 保持一致 */
#chapter-8-5 .practice-box + .practice-box {
    margin-top: 24px;
}

/* 8.6 章节步骤间间距，与 8.1、8.2、8.5 保持一致 */
#chapter-8-6 .practice-box + .practice-box {
    margin-top: 24px;
}

.practice-box-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.practice-box-header i {
    font-size: 1.15rem;
    color: var(--theme-primary);
}

.practice-box-body {
    font-size: 0.92rem;
    color: var(--color-text-primary);
    line-height: 1.75;
}

.practice-box-body p {
    margin-bottom: 8px;
}

.practice-box-body p:last-child {
    margin-bottom: 0;
}

/* practice-box-body 内有序/无序列表样式（8.2 等章节操作步骤使用） */
.practice-box-body ol {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.practice-box-body ol li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.practice-box-body ol li:last-child {
    margin-bottom: 0;
}

.practice-box-body ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.practice-box-body ul li {
    margin-bottom: 6px;
    line-height: 1.55;
}

.practice-box-body ul li:last-child {
    margin-bottom: 0;
}

/* v94d：去掉 practice-box 内超链接的默认下划线，让 PlantUML 在线编辑器等
   链接看起来更"按钮式"（蓝色加粗即可），不再画默认的 underline */
.practice-box a,
.practice-box-body a {
    text-decoration: none;
}

.practice-scenario-source {
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-top: 12px !important;
}

/* 步骤编号和标题 */
.practice-step-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.practice-step-badge.inline {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0 0 0 10px;
    margin-bottom: 0;
}

.practice-step-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.practice-step-title i {
    margin-right: 6px;
    color: var(--theme-primary);
}

.practice-step-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
    line-height: 1.6;
}

.practice-note {
    margin-top: 14px;
    padding: 8px 14px;
    background: var(--theme-primary-bg);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--theme-primary-dark);
    line-height: 1.5;
}

.practice-note i {
    margin-right: 4px;
}

/* 需求表格 */
.practice-req-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.88rem;
}

.practice-req-table th {
    background: var(--color-border-muted);
    padding: 8px 12px;
    text-align: left;
    font-weight: 700;
    color: var(--theme-primary-darker);
    border-bottom: 2px solid var(--color-border-hover);
}

.practice-req-table td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.practice-req-table tr:last-child td {
    border-bottom: none;
}

.tag-func {
    display: inline-block;
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-dark);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
}

.tag-nf {
    display: inline-block;
    background: var(--color-danger-bg-hover);
    color: var(--color-danger-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
}

/* 特性标签云 */
.practice-char-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.char-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    border: 1px solid var(--color-border);
}

.char-tag-name {
    font-weight: 700;
}

.char-tag-from {
    font-size: 0.75rem;
    opacity: 0.7;
}

.char-tag-primary {
    background: linear-gradient(135deg, var(--theme-primary-bg-hover), var(--theme-primary-border));
    color: var(--theme-primary-darker);
    border-color: var(--theme-accent-light);
}

.char-tag-secondary {
    background: linear-gradient(135deg, var(--theme-primary-bg), var(--theme-primary-border));
    color: var(--theme-primary-darker);
    border-color: var(--theme-accent-mid);
}

.char-tag-danger {
    background: linear-gradient(135deg, var(--color-danger-bg), var(--color-danger-border));
    color: var(--color-danger-text);
    border-color: var(--color-danger);
    text-decoration: line-through;
}

.char-tag-supplement {
    background: linear-gradient(135deg, var(--theme-accent-bg), var(--theme-accent-border));
    color: var(--theme-accent);
    border-color: var(--theme-accent-light);
    border-style: dashed;
}

/* 打分矩阵表 */
.practice-matrix-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    margin-top: 8px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(30, 58, 138, 0.08);
    border: 1px solid var(--theme-primary-bg-hover);
}

.practice-matrix-table th {
    background: var(--theme-primary-darker);
    color: #fff;
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.practice-matrix-table th:first-child {
    border-top-left-radius: 10px;
}

.practice-matrix-table th:last-child {
    border-top-right-radius: 10px;
}

.practice-matrix-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
}

.practice-matrix-table tr:last-child td {
    border-bottom: none;
}

.practice-matrix-table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.practice-matrix-table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.practice-matrix-table td.col-notes {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    text-align: center;
}

.practice-matrix-table tbody tr:nth-child(even) td {
    background: var(--color-bg-page);
}

.practice-matrix-table tbody tr:nth-child(odd) td {
    background: var(--color-bg-surface);
}

.practice-matrix-table tbody tr:hover td {
    filter: brightness(0.96);
}

.matrix-badge {
    display: inline-block;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    min-width: 32px;
    text-align: center;
}

.badge-h {
    background: var(--color-success-bg-hover);
    color: var(--color-success-text);
}

.badge-m {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.badge-l {
    background: var(--color-danger-bg-hover);
    color: var(--color-danger);
}

/* ====== 7.3.1 四种迁移模式对比矩阵 ====== */
.migration-compare-wrapper {
    margin-top: 18px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.migration-compare-title {
    padding: 14px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border);
}

.migration-compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.migration-compare-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    line-height: 1.6;
}

.migration-compare-table th,
.migration-compare-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border-muted);
}

.migration-compare-table thead th {
    background: var(--color-border-muted);
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-border);
}

.migration-compare-table thead th.dim-col {
    background: var(--color-border);
    color: var(--color-text-secondary);
    width: 110px;
    text-align: center;
}

.migration-compare-table tbody td {
    color: var(--color-text-secondary);
}

.migration-compare-table tbody td.dim-col {
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    font-weight: 700;
    text-align: center;
    width: 110px;
    border-right: 1px solid var(--color-border);
}

.migration-compare-table tbody tr:last-child td {
    border-bottom: none;
}

.migration-compare-table tbody tr:nth-child(even) td:not(.dim-col) {
    background: var(--color-bg-page);
}

.migration-compare-table tbody tr:hover td:not(.dim-col) {
    background: var(--theme-primary-bg);
}

.risk-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 36px;
    text-align: center;
}

.risk-high {
    background: var(--color-danger-bg-hover);
    color: var(--color-danger);
}

.risk-medium {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.risk-low {
    background: var(--color-success-bg-hover);
    color: var(--color-success-text);
}

@media (max-width: 768px) {
    .migration-compare-table {
        min-width: 640px;
    }
    .migration-compare-table th,
    .migration-compare-table td {
        padding: 10px 12px;
        font-size: 0.78rem;
    }
}

/* ====== 7.3.2 绞杀者模式动态架构演示 ====== */
.strangler-demo {
    margin: 18px 0 22px 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.str-demo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--theme-primary-bg) 0%, var(--color-bg-page) 100%);
    border-bottom: 1px solid var(--color-border);
}

.str-demo-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.str-demo-title i {
    color: var(--theme-primary);
}

.str-stage-nav {
    display: flex;
    gap: 8px;
}

.str-stage-btn {
    padding: 6px 14px;
    border: 1px solid var(--color-border-hover);
    border-radius: 20px;
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.str-stage-btn:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

.str-stage-btn.active {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.25);
}

.str-demo-body {
    padding: 26px 28px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 360px;
}

/* 左侧：阶段描述（垂直居中，占满剩余空间 → 文本框变宽 → 同样内容行数变少） */
.str-stage-desc {
    flex: 4 1 0;
    min-width: 0;
    align-self: center;
    padding: 16px 20px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.str-desc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.str-desc-badge {
    display: inline-block;
    padding: 2px 9px;
    background: var(--theme-primary);
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.str-desc-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    line-height: 1.4;
}

.str-desc-text {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* 右侧：动画演示 —— 固定宽度上限 + 5 列 × 3 行 网格
   整体思路：右侧图形 max-width 600px + flex 0 0 auto → 图形宽度固定且较小
            左侧文本框 flex: 1 1 auto 占满剩余 → 文本框变宽、行数变少
   内部 grid：col1 Client(110) | col2 箭头(64) | col3 Legacy(1fr) | col4 中间间隔(24px) | col5 New(1fr)
   col-gap: 0 → Client / 箭头 / Facade / Legacy / New 全部无缝拼接（col4 是 grid 列自带间隔）
   Facade 跨 col3+col4+col5 → Facade 视觉宽度 = Legacy + 24 + New 总宽
   Legacy 撑满 col3、New 撑满 col5 → col4 是 24px 中间视觉间隔
   track 居中在 col3/col5 → track 精准对齐 Legacy/New 几何中心 */
.str-animation {
    flex: 6 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: 110px 64px 1fr 24px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: 0;
    align-items: center;
}

/* 顶部：Client 撑满 col1（box-sizing border-box）→ Client 右边 = col1 右边 = col2 左边 = 箭头起点，无缝
   Facade 跨 col3+col4+col5 justify-self stretch → Facade 宽 = Legacy+24+New 总宽 */
.str-animation > .str-client { grid-column: 1; grid-row: 1; justify-self: stretch; }
.str-animation > .str-flow-line { grid-column: 2; grid-row: 1; }
.str-animation > .str-facade { grid-column: 3 / 6; grid-row: 1; justify-self: stretch; }

/* 中部：track 居中在 col3/col5 = Legacy/New 几何中心 */
.str-animation > .str-route.to-legacy { grid-column: 3; grid-row: 2; justify-self: center; }
.str-animation > .str-route.to-new { grid-column: 5; grid-row: 2; justify-self: center; }

/* 底部：Legacy 撑满 col3、New 撑满 col5 → 中间有 col4 24px 视觉间隔；track 精准对齐各自中心 */
.str-animation > .str-system.str-legacy { grid-column: 3; grid-row: 3; justify-self: stretch; }
.str-animation > .str-system.str-new { grid-column: 5; grid-row: 3; justify-self: stretch; }

/* 第 2 列：水平流向箭头（Client → Facade） */
.str-flow-line {
    position: relative;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    border-radius: 1px;
    overflow: visible;
}

.str-flow-line::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid var(--color-border);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.str-packet {
    position: absolute;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--theme-primary);
    animation: strPacketMove 1.8s linear infinite;
    opacity: 0;
}

@keyframes strPacketMove {
    0% {
        left: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: calc(100% - 10px);
        opacity: 0;
    }
}

/* 第 3-4 列：Facade 跨满（盖住下方两系统） */
.str-facade {
    width: 100%;
    padding: 12px 20px;
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

/* 通用节点样式（Client / Facade 复用） */
.str-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 110px;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.str-node i {
    font-size: 1.3rem;
}

.str-client {
    background: rgba(var(--theme-primary-rgb), 0.06);
    color: var(--theme-primary-dark);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
}

/* 中部：两条动态路径（垂直对齐到下方两系统中心，跟 Facade 和系统都无缝连接） */
.str-route {
    position: relative;
    width: 2px;
    height: 50px;
}

.str-route-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-border);
    border-radius: 1px;
    transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.str-route-packet {
    position: absolute;
    top: -5px;
    left: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: strRoutePacketDown 1.6s linear infinite;
    opacity: 0;
    z-index: 1;
}

@keyframes strRoutePacketDown {
    0% {
        top: 0;
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    88% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 10px);
        opacity: 0;
    }
}

.str-route-label {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 6px;
    border-radius: 8px;
}

.str-route.to-legacy .str-route-packet {
    background: var(--color-danger);
}

.str-route.to-new .str-route-packet {
    background: var(--color-success);
}

/* 底部：旧系统左对齐、新系统右对齐 */
.str-system {
    border-radius: 12px;
    padding: 0 14px 14px 14px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.str-sys-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    margin: 14px 0 10px 0;
}

.str-legacy {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger-text);
}

.str-legacy .str-sys-header i {
    color: var(--color-danger);
}

.str-new {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success-text);
}

.str-new .str-sys-header i {
    color: var(--color-success);
}

.str-modules {
    display: flex;
    flex-direction: row;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.str-module {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
}

.str-legacy .str-module {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger-text);
}

.str-new .str-module {
    background: var(--color-bg-surface);
    border: 1px dashed var(--color-success-border);
    color: var(--color-success-text);
    opacity: 0.55;
}

.str-new .str-module.active {
    border-style: solid;
    border-color: var(--color-success);
    background: var(--color-success-bg-hover);
    opacity: 1;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
}

/* 各阶段状态控制 —— 严格匹配描述 */

/* 阶段 1：100% 流量到旧系统，新系统未激活 */
.str-demo-body[data-stage="1"] .str-route.to-new .str-route-track,
.str-demo-body[data-stage="4"] .str-route.to-legacy .str-route-track {
    background: var(--color-border);
    opacity: 0.4;
}

.str-demo-body[data-stage="1"] .str-route.to-new .str-route-packet,
.str-demo-body[data-stage="4"] .str-route.to-legacy .str-route-packet {
    animation: none;
    opacity: 0;
}

.str-demo-body[data-stage="1"] .str-route.to-legacy .str-route-track {
    background: var(--color-danger);
    opacity: 1;
}

/* 阶段 4：100% 流量到新系统，旧系统全部退役 */
.str-demo-body[data-stage="4"] .str-route.to-new .str-route-track {
    background: var(--color-success);
    opacity: 1;
}

/* 阶段 2/3 流量比例：to-legacy 用渐变（越来越少），to-new 实色（越来越多） */
.str-demo-body[data-stage="2"] .str-route.to-legacy .str-route-track {
    background: linear-gradient(to bottom, var(--color-danger-border) 0%, var(--color-danger-border) 60%, var(--color-border) 100%);
    opacity: 1;
}

.str-demo-body[data-stage="3"] .str-route.to-legacy .str-route-track {
    background: linear-gradient(to bottom, var(--color-danger-border) 0%, var(--color-border) 100%);
    opacity: 0.85;
}

.str-demo-body[data-stage="2"] .str-route.to-new .str-route-track {
    background: var(--color-success-border);
    opacity: 0.85;
}

.str-demo-body[data-stage="3"] .str-route.to-new .str-route-track {
    background: linear-gradient(to bottom, var(--color-success-border) 0%, var(--color-success) 100%);
    opacity: 1;
}

/* 阶段 1：新系统所有服务都未激活（虚线、灰色） */
.str-demo-body[data-stage="1"] .str-new .str-module {
    opacity: 0.4;
}

/* 阶段 2：仅服务 A 在新系统激活 */
.str-demo-body[data-stage="2"] .str-new .str-module[data-mod="2"],
.str-demo-body[data-stage="2"] .str-new .str-module[data-mod="3"],
.str-demo-body[data-stage="2"] .str-new .str-module[data-mod="4"] {
    opacity: 0.4;
}

.str-demo-body[data-stage="2"] .str-new .str-module[data-mod="1"] {
    opacity: 1;
    border-style: solid;
    border-color: var(--color-success);
    background: var(--color-success-bg-hover);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
}

/* 阶段 3：服务 A/B/C 在新系统激活 */
.str-demo-body[data-stage="3"] .str-new .str-module[data-mod="4"] {
    opacity: 0.4;
}

.str-demo-body[data-stage="3"] .str-new .str-module[data-mod="1"],
.str-demo-body[data-stage="3"] .str-new .str-module[data-mod="2"],
.str-demo-body[data-stage="3"] .str-new .str-module[data-mod="3"] {
    opacity: 1;
    border-style: solid;
    border-color: var(--color-success);
    background: var(--color-success-bg-hover);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
}

/* 阶段 4：新系统所有服务全部激活 */
.str-demo-body[data-stage="4"] .str-new .str-module {
    opacity: 1;
    border-style: solid;
    border-color: var(--color-success);
    background: var(--color-success-bg-hover);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
}

/* 旧系统模块：阶段 1 全部激活，阶段 2/3 渐进式退出，阶段 4 全部退役 */
.str-demo-body[data-stage="2"] .str-legacy .str-module[data-mod="1"] {
    opacity: 0.4;
}

.str-demo-body[data-stage="2"] .str-legacy .str-module[data-mod="1"]::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: 1.5px;
    background: var(--color-danger);
    border-radius: 1px;
    transform: translateY(-50%);
    pointer-events: none;
}

.str-demo-body[data-stage="3"] .str-legacy .str-module[data-mod="1"],
.str-demo-body[data-stage="3"] .str-legacy .str-module[data-mod="2"],
.str-demo-body[data-stage="3"] .str-legacy .str-module[data-mod="3"] {
    opacity: 0.4;
}

.str-demo-body[data-stage="3"] .str-legacy .str-module[data-mod="1"]::after,
.str-demo-body[data-stage="3"] .str-legacy .str-module[data-mod="2"]::after,
.str-demo-body[data-stage="3"] .str-legacy .str-module[data-mod="3"]::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: 1.5px;
    background: var(--color-danger);
    border-radius: 1px;
    transform: translateY(-50%);
    pointer-events: none;
}

.str-demo-body[data-stage="4"] .str-legacy {
    opacity: 0.55;
    filter: grayscale(0.7);
}

.str-demo-body[data-stage="4"] .str-legacy .str-module {
    opacity: 0.35;
}

.str-demo-body[data-stage="4"] .str-legacy .str-module::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: 1.5px;
    background: var(--color-danger);
    border-radius: 1px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 路线标签颜色随阶段变化 */
.str-demo-body[data-stage="1"] .str-route.to-legacy .str-route-label,
.str-demo-body[data-stage="2"] .str-route.to-legacy .str-route-label {
    color: var(--color-danger);
    font-weight: 700;
}

.str-demo-body[data-stage="2"] .str-route.to-new .str-route-label,
.str-demo-body[data-stage="3"] .str-route.to-new .str-route-label,
.str-demo-body[data-stage="4"] .str-route.to-new .str-route-label {
    color: var(--color-success);
    font-weight: 700;
}

.str-demo-body[data-stage="3"] .str-route.to-legacy .str-route-label,
.str-demo-body[data-stage="4"] .str-route.to-legacy .str-route-label {
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .str-demo-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .str-demo-body {
        flex-direction: column;
        align-items: stretch;
        padding: 18px 16px 12px 16px;
        min-height: 0;
    }
    .str-stage-desc {
        flex: 0 0 auto;
        margin-bottom: 12px;
    }
    .str-animation {
        column-gap: 16px;
    }
    .str-facade {
        max-width: 100%;
    }
    .str-system {
        min-width: 0;
        width: 100%;
    }
    .str-route {
        height: 40px;
    }
}

/* 裁剪卡片 */
.practice-prune-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.prune-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}

.prune-card p {
    margin: 4px 0 0 0;
}

.prune-card-header {
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.prune-card-header i {
    font-size: 1rem;
}

.prune-count {
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: auto;
    opacity: 0.7;
}

.prune-delete {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
}

.prune-delete .prune-card-header {
    color: var(--color-danger);
}

.prune-delete .prune-card-header i {
    color: var(--color-danger);
}

.prune-merge {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-bg-hover);
}

.prune-merge .prune-card-header {
    color: var(--color-warning-text);
}

.prune-merge .prune-card-header i {
    color: var(--color-warning-text);
}

.prune-keep {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    grid-column: 1 / -1;
}

.prune-keep .prune-card-header {
    color: var(--color-success-text);
}

.prune-keep .prune-card-header i {
    color: var(--color-success-text);
}

.strikethrough {
    text-decoration: line-through;
    color: var(--color-danger);
}

.strikethrough-wide {
    position: relative;
    display: inline-block;
    color: var(--color-danger);
}

.strikethrough-wide::after {
    content: '';
    position: absolute;
    left: -6px;
    right: -6px;
    top: 50%;
    height: 1.5px;
    background: var(--color-danger);
    border-radius: 0.5px;
}

/* 裁剪结果标签 */
.practice-prune-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-bg-page);
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.prune-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--theme-primary-bg-hover), var(--theme-primary-border));
    color: var(--theme-primary-darker);
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 600;
}

/* 最终特性列表 */
.practice-final-chars {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    counter-reset: final-char;
}

.final-char-item {
    flex: 0 0 calc(50% - 5px);
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--theme-primary-bg), var(--theme-primary-bg));
    border: 1px solid var(--theme-primary-border);
    border-radius: 8px;
    align-items: center;
}

.final-char-item:last-child:nth-child(odd) {
    flex: 1 1 100%;
}

.final-char-rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.final-char-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.final-char-info strong {
    font-size: 0.95rem;
    color: var(--theme-primary-darker);
}

.final-char-info span {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* 权衡冲突卡片 */
.practice-tradeoff-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tradeoff-conflict-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.tradeoff-conflict-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--color-border-muted), var(--color-border));
    font-size: 1rem;
    font-weight: 700;
}

.tradeoff-label-gain {
    color: var(--color-success);
    background: var(--color-success-bg-hover);
    padding: 4px 14px;
    border-radius: 8px;
}

.tradeoff-label-loss {
    color: var(--color-danger);
    background: var(--color-danger-bg-hover);
    padding: 4px 14px;
    border-radius: 8px;
}

.tradeoff-vs {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.tradeoff-conflict-body {
    padding: 16px 20px;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}

.conflict-section {
    margin-bottom: 12px;
    padding: 12px 16px;
    background: var(--color-bg-page);
    border-radius: 8px;
}

.conflict-section p {
    margin: 4px 0 0 0;
}

.conflict-resolution {
    background: var(--theme-primary-bg);
    border: 1px solid var(--theme-primary-border);
}

.conflict-result {
    padding: 10px 16px;
    background: var(--color-success-bg);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--color-success-text);
    line-height: 1.6;
}

.result-label {
    display: inline-block;
    background: var(--color-success-text);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 8px;
    margin-right: 6px;
}

/* 最终建议清单 */
.practice-summary-ws {
    border: 1px solid var(--theme-primary-bg-hover);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(30, 58, 138, 0.08);
}

.psw-header {
    background: linear-gradient(135deg, var(--theme-primary-darker), var(--theme-primary-dark));
    color: #fff;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.psw-header i {
    margin-right: 6px;
}

.psw-date {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.85;
}

.psw-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.psw-table th {
    background: var(--theme-primary-darker);
    color: #fff;
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.psw-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
}

.psw-table tr:last-child td {
    border-bottom: none;
}

.psw-table tr:nth-child(even) td {
    background: var(--color-bg-page);
}

.psw-table tr:nth-child(odd) td {
    background: var(--color-bg-surface);
}

.psw-table tbody tr:hover td {
    filter: brightness(0.96);
}

.psw-row-top td {
    background: var(--color-warning-bg);
}

.psw-rank {
    display: inline-block;
    background: var(--color-border);
    color: var(--color-text-secondary);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.psw-top1 {
    background: var(--color-danger);
    color: var(--color-warning-text);
}

.psw-top2 {
    background: var(--color-success);
    color: var(--color-text-primary);
}

.psw-top3 {
    background: var(--theme-primary);
    color: #fff;
}

.psw-cat {
    display: inline-block;
    background: var(--theme-primary-bg);
    color: var(--theme-primary-dark);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

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

    .practice-matrix-table {
        font-size: 0.78rem;
    }

    .practice-matrix-table th,
    .practice-matrix-table td {
        padding: 5px 6px;
    }

    .psw-table {
        font-size: 0.78rem;
    }

    .psw-table th,
    .psw-table td {
        padding: 6px 8px;
    }
}
/* ========================================
   图书轮播卡片 (guide-resources.html)
   纵向卡片：封面在上、文字在下，每页 3 本
   ======================================== */

/* 轮播容器 */
.book-carousel {
    border-radius: 12px;
    padding: 0 44px; /* 左右留出箭头空间 */
    margin-bottom: 12px;
}

.book-carousel .carousel-inner {
    border-radius: 8px;
}

.book-carousel .carousel-item {
    padding: 6px 4px 20px; /* 底部多留空间给圆点 */
    min-height: 340px; /* 固定高度，防止两页切换时圆点跳动 */
}

/* 卡片排列：居中、等宽，精确适配每行 5 个 */
.book-carousel-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
}

/* 纵向图书卡片：calc 精确等分 5 列（100% - 4*gap）/ 5，固定高度防止高度不一致 */
.book-mini-card {
    flex: 0 0 calc((100% - 40px) / 5);
    min-width: 0;
    height: 310px; /* 固定高度，确保所有卡片等高 */
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.25s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.book-mini-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

/* 封面图：固定容器尺寸，object-fit: contain 完整显示 */
.book-mini-card .mini-cover-wrap {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: var(--color-border-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.book-mini-card .mini-cover-wrap img {
    max-width: 80%;
    max-height: 144px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* 信息区 */
.book-mini-card .mini-book-info {
    width: 100%;
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 标签 */
.book-mini-card .mini-book-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 8px;
    margin-bottom: 6px;
    align-self: flex-start;
    white-space: nowrap;
}

.book-mini-card .mini-book-tag.beginner {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.book-mini-card .mini-book-tag.intermediate {
    background: var(--theme-primary-bg);
    color: var(--theme-primary-dark);
}

.book-mini-card .mini-book-tag.advanced {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

/* 书名：单行显示，超出省略，hover 通过 title 提示全名 */
.book-mini-card .mini-book-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 3px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

/* 作者 */
.book-mini-card .mini-book-author {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    font-style: italic;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

/* 简介：限制 3 行，信息区总计 6 行（标签1+书名1+作者1+简介3） */
.book-mini-card .mini-book-desc {
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: default;
}

/* 轮播控制箭头：适配浅色背景 */
.book-carousel .carousel-control-prev,
.book-carousel .carousel-control-next {
    width: 44px;
    opacity: 0.7;
}

.book-carousel .carousel-control-prev-icon,
.book-carousel .carousel-control-next-icon {
    width: 1.4rem;
    height: 1.4rem;
    filter: invert(1); /* 深色箭头适配浅色背景 */
}

.book-carousel .carousel-control-prev:hover,
.book-carousel .carousel-control-next:hover {
    opacity: 1;
}

/* 轮播指示器：适配浅色背景，向下贴近底部 */
.book-carousel .carousel-indicators {
    margin-bottom: 0.1rem;
}

.book-carousel .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-text-muted);
    border: none;
    opacity: 0.5;
}

.book-carousel .carousel-indicators .active {
    background-color: var(--theme-primary-dark);
    opacity: 1;
}

/* 响应式：窄屏时自动减少每行卡片数 */
@media (max-width: 1200px) {
    .book-mini-card {
        flex: 0 0 calc((100% - 30px) / 4); /* 4 列，3 个 gap */
    }
}

@media (max-width: 900px) {
    .book-mini-card {
        flex: 0 0 calc((100% - 20px) / 3); /* 3 列，2 个 gap */
    }
}

@media (max-width: 768px) {
    .book-carousel {
        padding: 0 36px;
    }
    .book-mini-card {
        flex: 0 0 calc((100% - 10px) / 2); /* 2 列，1 个 gap */
    }
}

/* 期中项目要求：两列列表布局 */
.project-card-list {
    columns: 2;
    column-gap: 20px;
    width: 100%;
    margin: 8px 0 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--color-text-primary);
    line-height: 1.7;
    text-align: left;
}

.project-card-list li {
    break-inside: avoid;
    padding: 4px 0 4px 18px;
    position: relative;
}

.project-card-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .project-card-list {
        columns: 1;
    }
}

/* 学习资源页面链接样式 */
.resource-link {
    text-decoration: none;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.resource-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* 得分要点提示列表对齐 */
.scoring-tips {
    margin: 10px 0 0 0;
    padding-left: 1.3em;
    list-style-position: outside;
    list-style-type: disc;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.9;
}

.scoring-tips li {
    margin-bottom: 6px;
    text-align: left;
}

.scoring-tips li::marker {
    color: rgba(255,255,255,0.85);
}

/* ============================================================ */
/* 4.1 页面：交互式树状思维导图                                   */
/* ============================================================ */

.arch-mindmap-container {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 28px 24px 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow-x: auto;
    user-select: none;
}

.tree-node {
    display: flex;
    align-items: center;
    position: relative;
}

.node-head {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.box {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid;
    transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.box:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.arrow {
    width: 22px;
    height: 22px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-text-muted);
    font-size: 14px;
    line-height: 1;
    user-select: none;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.arrow:hover {
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}

.children-group {
    display: none;
    margin-left: 36px;
    position: relative;
}

.children-group.open {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 竖主干线 */
.children-group::before {
    content: "";
    position: absolute;
    left: -36px;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--color-border-hover);
}

/* 横向分支线 */
.children-group > .tree-node::before {
    content: "";
    position: absolute;
    left: -36px;
    top: 50%;
    width: 36px;
    height: 1px;
    background: var(--color-border-hover);
    transform: translateY(-50%);
}

/* =========================== */
/* 8 种分类配色                  */
/* =========================== */

/* 一、蓝色 */
.box.c0 {
    background: rgba(var(--theme-primary-rgb), 0.06);
    border-color: var(--theme-accent-light);
    color: var(--theme-primary-dark);
}

/* 二、青绿色 */
.box.c1 {
    background: var(--theme-primary-bg);
    border-color: var(--theme-accent-light);
    color: var(--theme-primary-dark);
}

/* 三、琥珀色 */
.box.c2 {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-bg-hover);
    color: var(--color-warning-text);
}

/* 四、红色 */
.box.c3 {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}

/* 五、紫色 */
.box.c4 {
    background: var(--theme-accent-bg);
    border-color: var(--theme-accent-light);
    color: var(--theme-accent);
}

/* 六、青色 */
.box.c5 {
    background: var(--theme-primary-bg);
    border-color: var(--theme-accent-light);
    color: var(--theme-primary-dark);
}

/* 七、黄绿色 */
.box.c6 {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

/* 八、粉色 */
.box.c7 {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}

/* 根节点 */
.box.root-box {
    background: linear-gradient(135deg, var(--theme-primary-darker) 0%, var(--theme-primary) 100%);
    border-color: var(--theme-primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 8px;
}

/* 行间距优化：嵌套 group 内减小间距 */
.children-group .children-group {
    gap: 10px;
}

.children-group .children-group::before {
    left: -36px;
}

.children-group .children-group > .tree-node::before {
    left: -36px;
    width: 36px;
}

@media (max-width: 768px) {
    .arch-mindmap-container {
        padding: 16px 12px;
    }

    .box {
        padding: 6px 10px;
        font-size: 13px;
    }

    .children-group {
        margin-left: 24px;
    }

    .children-group::before {
        left: -24px;
    }

    .children-group > .tree-node::before {
        left: -24px;
        width: 24px;
    }

    .children-group .children-group {
        margin-left: 20px;
    }

    .children-group .children-group::before {
        left: -20px;
    }

    .children-group .children-group > .tree-node::before {
        left: -20px;
        width: 20px;
    }
}

/* ============================================================ */
/* 4.2 页面：经典架构风格轮盘                                  */
/* ============================================================ */

.arch-wheel-layout {
    display: grid;
    grid-template-columns: 570px 1fr;
    gap: 24px;
    align-items: center;
    margin: 24px 0;
}

.arch-wheel-side {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 570px;
}

.arch-wheel-box {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    height: 520px;
    box-sizing: border-box;
    width: 100%;
}

.arch-wheel-stage {
    position: relative;
    width: 520px;
    height: 520px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.arch-wheel-pointer {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    cursor: pointer;
    filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.35));
}

/* 禁止箭头内的 SVG 被全局放大效果影响 */
.arch-wheel-pointer svg {
    cursor: inherit;
    pointer-events: auto;
}

.arch-wheel-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    aspect-ratio: 1 / 1;
}

.arch-wheel-svg .wheel-svg-slot {
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: 240px 240px;
}

.arch-wheel-svg .wheel-svg-slot:hover {
    filter: brightness(1.05);
}

/* 选中态：不加边框、不加阴影、不改分割线颜色 */

.arch-wheel-svg .wheel-svg-slot text {
    user-select: none;
    pointer-events: none;
}

.arch-wheel-svg .wheel-svg-slot path {
    transition: fill 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.arch-wheel-svg .wheel-svg-parent {
    fill: none;
    stroke-width: 1.5;
}

.arch-wheel-svg .wheel-svg-divider {
    stroke: var(--color-text-primary);
    stroke-width: 1;
}

.arch-wheel-svg .wheel-svg-divider-major {
    stroke: var(--color-text-primary);
    stroke-width: 4;
}

.arch-wheel-svg .wheel-svg-subname {
    font-size: 14px;
    font-weight: 700;
    fill: var(--color-text-primary);
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    transition: font-size 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.5px;
}

.arch-wheel-svg .wheel-svg-slot:hover .wheel-svg-subname {
    font-size: 14.5px;
}
.arch-wheel-svg .wheel-svg-subname-long {
    font-size: 10px;
    letter-spacing: -0.5px;
}
.arch-wheel-svg .wheel-svg-slot:hover .wheel-svg-subname-long {
    font-size: 10.5px;
}

/* 选中项固定文字：位于旋转组之外，确保默认选中项始终可见 */
.arch-wheel-svg .wheel-svg-selected-text-overlay {
    pointer-events: none;
}

.arch-wheel-svg .wheel-svg-selected-text-overlay .wheel-svg-subname-selected {
    fill: #ffffff;
    stroke: var(--color-text-primary);
    stroke-width: 0.5px;
    font-size: 15px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.arch-wheel-svg .wheel-svg-selected-text-overlay .wheel-svg-subname-selected.wheel-svg-subname-long {
    font-size: 11px;
}

.arch-wheel-svg .wheel-svg-parentlabel {
    font-size: 13px;
    font-weight: 700;
    /* fill 由 JS 动态设置，与父风格分类线颜色一致 */
    text-anchor: middle;
    dominant-baseline: middle;
}

.arch-wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-border-hover);
    border-radius: 50%;
    width: 110px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 2;
}

.arch-wheel-center-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-primary);
    line-height: 1.2;
}

.arch-wheel-center-sub {
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    line-height: 1.2;
    padding: 0 8px;
}

.arch-wheel-info {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    height: 520px;
    min-height: 520px;
    box-sizing: border-box;
}

.arch-info-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.arch-info-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    line-height: 1.2;
}

.arch-info-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-bg-inverse);
    line-height: 1.2;
}

.arch-info-title-sep {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
    line-height: 1.2;
}

.arch-info-parent {
    display: inline-block;
    background: var(--theme-accent-bg);
    color: var(--theme-primary-darker);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    margin-bottom: 0;
    white-space: nowrap;
    line-height: 1.3;
}

.arch-info-en {
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: 1.2;
}

.arch-info-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.arch-info-col {
    display: grid;
    gap: 10px;
}

.arch-info-col-left {
    grid-template-rows: auto auto 1fr;
}

.arch-info-col-right {
    grid-template-rows: 1fr auto;
}

.arch-info-row-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.arch-info-card {
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.arch-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.arch-info-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--theme-primary);
    margin-bottom: 5px;
    flex-shrink: 0;
}

.arch-info-card-head i {
    font-size: 0.9rem;
}

.arch-info-card-body {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--color-text-primary);
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 场景卡片文字通常较长，放宽到 3 行以完整显示 */
.arch-info-card-body.arch-info-scenario-body {
    -webkit-line-clamp: 3;
}

.arch-info-large .arch-info-card-body {
    -webkit-line-clamp: unset;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 6px;
}

/* 翻转卡片容器 */
.arch-flip-card {
    perspective: 1000px;
    overflow: hidden;
}

.arch-flip-card-inner {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.arch-flip-card.flipped .arch-flip-card-inner {
    transform: rotateY(180deg);
}

.arch-flip-card-front,
.arch-flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

.arch-flip-card-back {
    transform: rotateY(180deg);
}

/* 正反面 body 填满可用空间 */
.arch-flip-card-front .arch-info-card-body,
.arch-flip-card-back .arch-info-card-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.arch-flip-card-front .arch-info-card-body {
    justify-content: space-evenly;
}

.arch-flip-card-back .arch-info-card-body {
    overflow: hidden;
    justify-content: flex-start;
}

.arch-flip-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    flex-shrink: 0;
}

.arch-flip-tab {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.2;
}

.arch-flip-tab.active {
    color: var(--theme-primary);
}

.arch-flip-tab:hover {
    color: var(--theme-primary);
}

.arch-flip-tab-sep {
    color: var(--color-border-hover);
    font-weight: 500;
    font-size: 0.82rem;
}

/* 收益与代价正面分区 */
.arch-tradeoff-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.arch-tradeoff-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.arch-tradeoff-section-body {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.arch-tradeoff-section-body:hover {
    -webkit-line-clamp: unset;
    overflow: auto;
}

/* 子风格对比分组标题 */
.arch-substyle-group {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    margin: 20px 0 10px;
    padding-left: 10px;
    border-left: 4px solid var(--theme-primary);
}

/* 子风格对比表格：自适应列宽，文本自动换行 */
.arch-substyle-table {
    width: 100%;
    font-size: 0.72rem;
    margin-bottom: 0;
    table-layout: fixed;
}

.arch-substyle-table th {
    padding: 8px 8px;
    white-space: nowrap;
    text-align: left;
    font-weight: 600;
    background-color: var(--color-bg-page);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.arch-substyle-table td {
    padding: 6px 8px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.45;
    border-bottom: 1px solid var(--color-border);
}

.arch-substyle-table tr:hover {
    background-color: var(--color-bg-page);
}

.arch-substyle-table-wrapper {
    overflow-x: auto;
    margin-bottom: 0;
}

/* 架构特性速查表：汇总所有风格的 7 项特性评分 */
.arch-char-ref-body {
    overflow-x: auto;
}

.arch-char-ref-table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    line-height: 1.4;
}

.arch-char-ref-table th,
.arch-char-ref-table td {
    padding: 8px 10px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    vertical-align: middle;
}

/* 左上角分类单元格（与父风格分组表头同色） */
.arch-char-ref-corner-header {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--theme-primary-dark);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    min-width: 80px;
    border-bottom: 1px solid var(--color-border);
}

/* 父风格分组表头 */
.arch-char-ref-group-header {
    background: var(--theme-primary-dark);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
}

/* 子风格表头 */
.arch-char-ref-style-header {
    background: var(--color-border-muted);
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.8rem;
}

/* 特性名列（首列固定） */
.arch-char-ref-feature-header {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--color-border-muted);
    color: var(--color-text-primary);
    font-weight: 700;
    text-align: left;
    font-size: 0.82rem;
}

.arch-char-ref-feature-cell {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    font-weight: 600;
    text-align: left;
}

/* 星星评分单元格 */
.arch-char-ref-stars-cell {
    min-width: 66px;
}

.arch-char-ref-stars {
    color: var(--color-warning);
    letter-spacing: 0.5px;
    font-size: 0.82rem;
    text-shadow: 0 0 4px rgba(245, 158, 11, 0.35);
}

/* 斑马纹，提升可读性 */
.arch-char-ref-table tbody tr:nth-child(even) td {
    background: var(--color-bg-page);
}

.arch-char-ref-table tbody tr:nth-child(even) .arch-char-ref-feature-cell {
    background: var(--color-border-muted);
}

/* 运营类背景色 */
.arch-char-ref-table tbody tr.cat-operational td {
    background: #d1f4e5 !important;
}
.arch-char-ref-table tbody tr.cat-operational .arch-char-ref-feature-cell {
    background: #b8e8ce !important;
    color: #156b52;
    font-weight: 700;
}

/* 结构类背景色 */
.arch-char-ref-table tbody tr.cat-structural td {
    background: #d1f0f4 !important;
}
.arch-char-ref-table tbody tr.cat-structural .arch-char-ref-feature-cell {
    background: #b8e2ea !important;
    color: #0d5a6e;
    font-weight: 700;
}

/* 横切关注点类背景色 */
.arch-char-ref-table tbody tr.cat-crosscutting td {
    background: #fff3cd !important;
}
.arch-char-ref-table tbody tr.cat-crosscutting .arch-char-ref-feature-cell {
    background: #ffe082 !important;
    color: #7c6a00;
    font-weight: 700;
}

/* 分类分隔行（不再生成，保留样式防残留） */
.arch-char-ref-table tbody tr.cat-separator td {
    display: none;
}

/* 淘汰表格（初筛步骤）——继承 arch-char-ref-table 样式 */
.eliminated-table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    line-height: 1.4;
}

.eliminated-table th,
.eliminated-table td {
    padding: 8px 10px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    vertical-align: middle;
}

.eliminated-table thead th {
    background: var(--theme-primary-dark);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8rem;
}

/* 经典架构风格行 */
.eliminated-table tbody tr.eliminated-classic td,
.arch-char-ref-table tbody tr.eliminated-classic td {
    background: var(--theme-primary-bg);
}

/* 现代实践架构行 */
.eliminated-table tbody tr.eliminated-modern td,
.arch-char-ref-table tbody tr.eliminated-modern td {
    background: var(--color-success-bg);
}

.eliminated-num {
    color: var(--color-text-muted);
    font-weight: 600;
}

/* 实践_11：电商项目逻辑组件分类 — 按层级着色 */
.layer-component-table tbody tr.layer-client td {
    background: var(--theme-primary-bg) !important;
}

.layer-component-table tbody tr.layer-access td {
    background: var(--theme-primary-bg) !important;
}

.layer-component-table tbody tr.layer-presentation td {
    background: var(--color-success-bg) !important;
}

.layer-component-table tbody tr.layer-business td {
    background: var(--color-warning-bg) !important;
}

.layer-component-table tbody tr.layer-data td {
    background: var(--theme-accent-bg) !important;
}

.layer-component-table tbody tr.layer-plugin td {
    background: var(--color-warning-bg) !important;
}

.layer-component-table tbody tr.layer-async td {
    background: var(--color-danger-bg) !important;
}

.layer-component-table tbody tr.layer-crosscutting td {
    background: var(--color-bg-page) !important;
}

.layer-component-table tbody tr:hover td {
    filter: brightness(0.97);
}

.eliminated-name {
    font-weight: 700;
    color: var(--color-text-primary);
}

.eliminated-name del {
    color: var(--color-text-primary);
    text-decoration: none;
    position: relative;
    display: inline-block;
}

.eliminated-name del::after {
    content: '';
    position: absolute;
    left: -6px;
    right: -6px;
    top: 50%;
    height: 1.5px;
    background: var(--color-danger);
}

/* 来源标签 */
.eliminated-source-tag {
    display: inline-block;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 600;
}

.classic-tag {
    background: var(--theme-accent-bg);
    color: var(--theme-primary-dark);
}

.modern-tag {
    background: var(--color-success-bg-hover);
    color: var(--color-success-text);
}

/* 特性评分表格（7 项，按星数降序） */
.arch-char-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
}

.arch-char-table tbody {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-evenly;
}

.arch-char-table tr {
    display: flex;
    align-items: center;
    padding: 2px 0;
}

.arch-char-table tr:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.arch-char-table td {
    padding: 2px 10px;
    vertical-align: middle;
}

.arch-char-table .arch-char-name {
    flex: 0 0 45%;
    color: var(--color-text-primary);
    font-weight: 400;
    text-align: left;
}

.arch-char-table .arch-char-stars {
    flex: 1;
    color: var(--color-warning);
    letter-spacing: 1px;
    font-size: 0.85rem;
    text-shadow: 0 0 4px rgba(245, 158, 11, 0.4);
    text-align: left;
}

.arch-tradeoff-item {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
}

.arch-tradeoff-label {
    flex-shrink: 0;
}

.arch-tradeoff-stars {
    color: var(--color-warning);
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.7), 0 0 3px rgba(245, 158, 11, 0.5);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.arch-info-topo-body {
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-line-clamp: unset;
}

.arch-topo-svg {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
}

/* ---- SQL 旅程图（1.2.3）：主题色跟随亮/深模式，线宽与 H3 下划线一致（1px） ---- */
.sql-journey-svg {
    color: var(--theme-primary);
}

.sql-journey-svg .j-desc {
    color: var(--color-text-secondary);
}

/* ---- SQL 旅程图滚动入场动画（1.2.3）：视口内五站依次点亮 ---- */
.sql-journey-svg .j-station {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.sql-journey-svg .j-arrow {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sql-journey-svg.in-view .j-station {
    opacity: 1;
    transform: none;
}

.sql-journey-svg.in-view .j-arrow {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

    .sql-journey-svg .j-station,
    .sql-journey-svg .j-arrow {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

#archInfoTech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
    overflow: hidden;
    -webkit-line-clamp: unset;
}

.arch-tech-tag {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    margin-right: 6px;
    margin-bottom: 4px;
}

.arch-info-topo {
    background: var(--color-border-muted);
}

.arch-info-topo-body {
    font-weight: 500;
    color: var(--color-text-primary);
}

@media (max-width: 1200px) {
    .arch-wheel-layout {
        grid-template-columns: minmax(280px, 400px) 1fr;
    }

    .arch-wheel-side {
        width: 400px;
    }

    .arch-wheel-stage {
        width: 360px;
        height: 360px;
    }

    .arch-wheel-info {
        margin-top: -11px;
        min-height: 371px;
    }
}

@media (max-width: 992px) {
    .arch-wheel-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .arch-wheel-stage {
        width: 360px;
        height: 360px;
        margin: 0 auto;
    }

    .arch-wheel-info {
        margin-top: 0;
        height: auto;
        min-height: 420px;
    }
}

@media (max-width: 480px) {
    .arch-wheel-stage {
        width: 320px;
        height: 320px;
    }

    .arch-info-grid {
        grid-template-columns: 1fr;
    }

    .arch-info-topo {
        grid-column: auto;
    }
}

/* ====== 7.1.3 可演化性：横向步骤条 + 通俗案例卡片 ====== */
.evolvability-stepper {
    margin-bottom: 16px;
}

.evolvability-stepper .stepper-item {
    min-width: 180px;
}

.evolvability-stepper .stepper-item.stepper-answer {
    border-color: var(--color-success);
    box-shadow: 0 0 0 1px var(--color-success), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.evolvability-stepper .stepper-item.stepper-answer:hover {
    box-shadow: 0 0 0 1px var(--color-success), 0 8px 20px rgba(0, 0, 0, 0.08);
}

.evolvability-stepper .stepper-answer .stepper-badge {
    background: linear-gradient(135deg, var(--color-success), var(--color-success));
}

.evolvability-stepper .stepper-answer .stepper-content h6 {
    color: var(--color-success);
}

/* 通用 stepper-answer 强调样式（不限于 evolvability-stepper，使用主题变量便于切换） */
.stepper-item.stepper-answer {
    border-color: var(--color-success);
    box-shadow: 0 0 0 1px var(--color-success), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.stepper-item.stepper-answer:hover {
    box-shadow: 0 0 0 1px var(--color-success), 0 8px 20px rgba(0, 0, 0, 0.08);
}

.stepper-item.stepper-answer .stepper-badge {
    background: linear-gradient(135deg, var(--color-success), var(--color-success));
}

.stepper-item.stepper-answer .stepper-content h6 {
    color: var(--color-success);
}

.evolvability-example-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin: 16px 0;
}

.evolvability-example-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--color-bg-page) 0%, var(--color-border-muted) 100%);
    border-bottom: 1px solid var(--color-border);
}

.evolvability-example-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 60%, var(--theme-primary-darker) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.evolvability-example-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.evolvability-example-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
}

.evolvability-example-subtitle {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.evolvability-example-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px;
}

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

.evolvability-scene p {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.evolvability-scene-badge {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
}

.evolvability-scene-badge.scene-past {
    background: linear-gradient(135deg, var(--color-text-secondary), var(--color-text-secondary));
}

.evolvability-scene-badge.scene-change {
    background: linear-gradient(135deg, var(--color-warning), var(--color-warning));
}

.evolvability-scene-badge.scene-answer {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
}

.evolvability-scene-badge.scene-result {
    background: linear-gradient(135deg, var(--color-success), var(--color-success));
}

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

/* ====== 7.2.3 康威定律 —— 正向 / 逆向 Conway 对比 ====== */
.conway-compare {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 16px 0 0 0;
}

.conway-compare-item {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.conway-compare-hd {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.conway-compare-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary-bg-hover) 0%, var(--theme-primary-bg-hover) 100%);
    color: var(--theme-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.conway-compare-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conway-compare-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.conway-compare-en {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.conway-compare-bd {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
}

.conway-compare-bd p {
    margin: 0;
}

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

/* ====== 7.2.1 业务驱动 —— 电商演进横向时间轴 ====== */
.evolution-timeline-h {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin: 16px 0 20px 0;
    position: relative;
}

/* 贯穿整条时间线的基座横线 */
.evolution-timeline-h::before {
    content: '';
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}

.tl-h-stage {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0;
    z-index: 1;
}

/* 移除旧的阶段间连接线，改用整体基座线 */
.tl-h-stage:not(:last-child)::after {
    display: none;
}

.tl-h-card {
    flex: 1;
    width: 100%;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    padding: 14px;
    margin-bottom: 16px;
    box-sizing: border-box;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tl-h-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.tl-h-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.tl-h-hd i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.tl-h-hd span {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.tl-h-bd p {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin: 0;
}

.tl-h-ft {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.tl-h-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
}

.tl-h-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.tl-h-connector {
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px 0;
}

.tl-h-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--color-border);
    position: relative;
    z-index: 2;
}

.tl-h-year {
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    margin-top: 4px;
}

/* 阶段颜色 */
.tl-h-stage:nth-child(1) .tl-h-hd i,
.tl-h-stage:nth-child(1) .tl-h-dot,
.tl-h-stage:nth-child(1) .tl-h-year { color: var(--theme-primary-dark); }
.tl-h-stage:nth-child(1) .tl-h-dot { background: var(--theme-primary-dark); }
.tl-h-stage:nth-child(1) .tl-h-tag { color: var(--theme-primary-dark); background: var(--theme-primary-bg); border: 1px solid var(--theme-primary-border); }

.tl-h-stage:nth-child(2) .tl-h-hd i,
.tl-h-stage:nth-child(2) .tl-h-dot,
.tl-h-stage:nth-child(2) .tl-h-year { color: var(--color-success); }
.tl-h-stage:nth-child(2) .tl-h-dot { background: var(--color-success); }
.tl-h-stage:nth-child(2) .tl-h-tag { color: var(--color-success); background: var(--color-success-bg); border: 1px solid var(--color-success-border); }

.tl-h-stage:nth-child(3) .tl-h-hd i,
.tl-h-stage:nth-child(3) .tl-h-dot,
.tl-h-stage:nth-child(3) .tl-h-year { color: var(--theme-primary); }
.tl-h-stage:nth-child(3) .tl-h-dot { background: var(--theme-primary); }
.tl-h-stage:nth-child(3) .tl-h-tag { color: var(--theme-primary); background: var(--theme-primary-bg); border: 1px solid var(--theme-primary-border); }

.tl-h-stage:nth-child(4) .tl-h-hd i,
.tl-h-stage:nth-child(4) .tl-h-dot,
.tl-h-stage:nth-child(4) .tl-h-year { color: var(--color-warning); }
.tl-h-stage:nth-child(4) .tl-h-dot { background: var(--color-warning); }
.tl-h-stage:nth-child(4) .tl-h-tag { color: var(--color-warning); background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); }

@media (max-width: 768px) {
    .evolution-timeline-h {
        flex-direction: column;
        gap: 12px;
    }
    .evolution-timeline-h::before {
        display: none;
    }
    .tl-h-stage {
        padding: 0;
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
    }
    .tl-h-stage:not(:last-child)::after {
        display: none;
    }
    .tl-h-card {
        margin-bottom: 0;
        order: 2;
        flex: 1;
    }
    .tl-h-marker {
        order: 1;
        width: 50px;
        flex-shrink: 0;
        padding-top: 14px;
    }
    .tl-h-year {
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }
}

/* ====== 7.2.2 技术债务四象限矩阵 ====== */
.td-quadrant-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px 8px;
    margin: 12px 0 4px 0;
    font-size: 0.85rem;
}

.td-quadrant-table th,
.td-quadrant-table td {
    border: none;
    vertical-align: top;
}

/* 表头列标题 */
.td-quadrant-table thead th {
    padding: 0 8px 8px 8px;
    text-align: center;
    font-weight: 600;
    background: transparent;
}

.td-quadrant-table .td-q-corner {
    width: 140px;
}

.td-quadrant-table .td-q-coltitle {
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: 0.92rem;
}

.td-quadrant-table .td-q-colsub {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-weight: 400;
    margin-top: 2px;
}

/* 行标题 */
.td-quadrant-table .td-q-rowhead {
    text-align: left;
    width: 120px;
    padding: 14px 12px 14px 0;
    vertical-align: middle;
}

.td-quadrant-table .td-q-rowtitle {
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: 0.92rem;
}

.td-quadrant-table .td-q-rowhint {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    font-weight: 400;
    margin-top: 4px;
    white-space: nowrap;
}

/* 象限单元格 */
.td-quadrant-table td {
    padding: 14px;
    line-height: 1.55;
    background: var(--color-bg-surface);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.td-quadrant-table .td-q-danger {
    border-top: 3px solid var(--color-danger-text);
    background: linear-gradient(180deg, var(--color-danger-bg) 0%, #ffffff 46px);
}

.td-quadrant-table .td-q-warning {
    border-top: 3px solid var(--color-warning);
    background: linear-gradient(180deg, var(--color-warning-bg) 0%, #ffffff 46px);
}

.td-quadrant-table .td-q-success {
    border-top: 3px solid var(--color-success-text);
    background: linear-gradient(180deg, var(--color-success-bg) 0%, #ffffff 46px);
}

.td-quadrant-table .td-q-info {
    border-top: 3px solid var(--theme-primary-dark);
    background: linear-gradient(180deg, rgba(var(--theme-primary-rgb), 0.06) 0%, #ffffff 46px);
}

.td-q-badges {
    margin-bottom: 8px;
}

.td-q-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.74rem;
    font-weight: 700;
}

.td-q-badge-danger { background: var(--color-danger-border); color: var(--color-danger-text); }
.td-q-badge-warning { background: var(--color-warning-border); color: var(--color-warning-text); }
.td-q-badge-success { background: var(--color-success-border); color: var(--color-success-text); }
.td-q-badge-info { background: var(--theme-primary-border); color: var(--theme-primary-darker); }

.td-q-quote {
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: 0.93rem;
    margin-bottom: 6px;
}

.td-q-desc {
    color: var(--color-text-secondary);
    font-size: 0.83rem;
    margin-bottom: 12px;
}

.td-q-drive {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.82rem;
    color: var(--color-text-primary);
}

.td-q-drive i {
    color: var(--theme-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.td-q-drive strong {
    color: var(--color-bg-inverse);
}

@media (max-width: 768px) {
    .td-quadrant-table {
        border-spacing: 0;
    }
    .td-quadrant-table thead {
        display: none;
    }
    .td-quadrant-table tbody,
    .td-quadrant-table tr,
    .td-quadrant-table th,
    .td-quadrant-table td {
        display: block;
    }
    .td-quadrant-table .td-q-rowhead {
        width: auto;
        text-align: left;
        padding: 12px 0 4px 0;
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
    }
    .td-quadrant-table .td-q-rowhint {
        width: 100%;
        margin-top: 0;
    }
    .td-quadrant-table td {
        margin-bottom: 10px;
        border-radius: 8px;
    }
    .td-quadrant-table tr {
        margin-bottom: 8px;
    }
}

/* ====== 7.4.1 实践步骤卡片 ====== */
.practice-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 16px 0 20px 0;
}

.practice-step-card {
    display: flex;
    gap: 0;
    position: relative;
}

.practice-step-card:not(:last-child) .ps-body {
    border-bottom: none;
    border-radius: 0 10px 0 0;
}

.practice-step-card:not(:last-child) .ps-number {
    border-radius: 8px 0 0 0;
}

.practice-step-card:nth-child(2) .ps-body,
.practice-step-card:nth-child(3) .ps-body,
.practice-step-card:nth-child(4) .ps-body {
    border-radius: 0;
}

.practice-step-card:last-child .ps-body {
    border-radius: 0 0 10px 0;
}

.practice-step-card:last-child .ps-number {
    border-radius: 0 0 0 10px;
}

.practice-step-card:nth-child(2) .ps-number,
.practice-step-card:nth-child(3) .ps-number,
.practice-step-card:nth-child(4) .ps-number {
    border-radius: 0;
}

.ps-number {
    width: 44px;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.ps-num-text {
    display: inline-block;
    animation: ps-breathe 3.5s ease-in-out infinite;
}

.practice-step-card:nth-child(1) .ps-number { background: var(--theme-primary); }
.practice-step-card:nth-child(2) .ps-number { background: var(--theme-accent); }
.practice-step-card:nth-child(3) .ps-number { background: var(--color-success); }
.practice-step-card:nth-child(4) .ps-number { background: var(--theme-primary); }
.practice-step-card:nth-child(5) .ps-number { background: var(--color-warning); }

.practice-step-card:nth-child(1) .ps-num-text { animation-delay: 0s; }
.practice-step-card:nth-child(2) .ps-num-text { animation-delay: 0.4s; }
.practice-step-card:nth-child(3) .ps-num-text { animation-delay: 0.8s; }
.practice-step-card:nth-child(4) .ps-num-text { animation-delay: 1.2s; }
.practice-step-card:nth-child(5) .ps-num-text { animation-delay: 1.6s; }

@keyframes ps-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

.ps-body {
    flex: 1;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 18px 20px;
    border-left: none;
}

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

.ps-title .term-badge {
    margin-left: 8px;
}

.ps-do, .ps-dont {
    font-size: 0.82rem;
    line-height: 1.6;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.ps-do:last-child, .ps-dont:last-child {
    margin-bottom: 0;
}

.ps-do {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.ps-dont {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.ps-tag {
    display: inline-block;
    font-weight: 700;
    margin-right: 6px;
    font-size: 0.78rem;
}

.ps-tag.do {
    color: var(--color-success);
}

.ps-tag.dont {
    color: var(--color-danger);
}

/* ====== 7.4.2 路线 Tab 内容 ====== */
.route-tab-inner {
    padding: 6px 0;
}

.route-section {
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.route-section:last-child {
    margin-bottom: 0;
}

.route-section.case {
    background: var(--theme-primary-bg);
    border-left: 3px solid var(--theme-primary);
}

.route-section.do {
    background: var(--color-success-bg);
    border-left: 3px solid var(--color-success);
}

.route-section.dont {
    background: var(--color-danger-bg);
    border-left: 3px solid var(--color-danger);
}

.route-label {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: var(--color-text-primary);
}

.route-section.case .route-label { color: var(--theme-primary-darker); }
.route-section.do .route-label { color: var(--color-success-text); }
.route-section.dont .route-label { color: var(--color-danger-text); }

.route-section p {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ====== 7.4.3 陷阱卡片网格 ====== */
/* ====== 7.4.4 三大工程底座 — 紧凑清单 ====== */
.base-trio {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 4px 0;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.base-trio-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.base-trio-row + .base-trio-row {
    border-top: 1px dashed var(--color-border);
}

.base-trio-row:hover {
    background: var(--theme-primary-bg);
}

.base-trio-marker {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.base-trio-row:nth-child(1) .base-trio-marker {
    color: var(--theme-primary);
    background: var(--theme-primary-bg-hover);
    border: 1px solid var(--theme-primary-border);
}
.base-trio-row:nth-child(2) .base-trio-marker {
    color: var(--color-success);
    background: var(--color-success-bg-hover);
    border: 1px solid var(--color-success-border);
}
.base-trio-row:nth-child(3) .base-trio-marker {
    color: var(--theme-accent);
    background: var(--theme-accent-bg-hover);
    border: 1px solid var(--theme-accent-border);
}

.base-trio-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.base-trio-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.base-trio-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .base-trio-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .base-trio-desc {
        font-size: 0.82rem;
    }
}

/* ====== 7.4.5 课堂总结流程条 ====== */
.summary-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 16px 0;
    flex-wrap: wrap;
}

.summary-flow-item {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    min-width: 100px;
}

.summary-flow-item span {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 2px;
}

.summary-flow-arrow {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--theme-primary);
    margin: 0 8px;
}

@media (max-width: 576px) {
    .summary-flow {
        flex-direction: column;
        gap: 8px;
    }
    .summary-flow-arrow {
        transform: rotate(90deg);
        margin: 0;
    }
}

/* ===== 7.6.1 电商架构演进交互式工作台 ===== */
.evolution-workbench {
    display: flex;
    gap: 16px;
    margin-top: 14px;
    align-items: stretch;
    height: 644px; /* 固定高度，所有页一致 */
}

/* 左侧：架构图展示面板（较宽） */
.evolution-diagram-panel {
    flex: 0 0 62%;
    max-width: 62%;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 644px;
    max-height: 644px; /* 固定高度，不被内容撑大 */
}

/* 上：架构标题（灰色背景，贴边融入父容器） */
.stage-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--color-border-muted);
}

.stage-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.stage-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

/* 中：架构图区域（最高，flex:1） */
.stage-svg-wrap {
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    overflow: hidden;
}

.stage-svg-wrap svg {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}

/* 阶段摘要（兼容旧引用） */
.stage-summary-wrap {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 18px;
    text-align: center;
    overflow: hidden;
}

.stage-summary-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.55;
    max-width: 90%;
}

.stage-summary-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.stage-summary-tags .evo-tech-tag {
    padding: 4px 10px;
    background: rgba(var(--theme-primary-rgb), 0.06);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
    border-radius: 5px;
    font-size: 0.8rem;
    color: var(--theme-primary-dark);
    font-weight: 500;
}

/* 下：1~15 分页条（灰色背景，紧凑高度） */
.stage-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-border-muted);
    justify-content: center;
}

.stage-page-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--color-border-hover);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

.stage-page-btn:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
    background: var(--theme-primary-bg);
}

.stage-page-btn.active {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
}

/* 右侧：信息面板（较窄） */
.evolution-info-panel {
    flex: 0 0 36%;
    max-width: 36%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto; /* 内容超出时滚动 */
    min-height: 644px;
    max-height: 644px;
}

.evo-info-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.evo-info-card-header {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: var(--color-border-muted);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
}

.evo-info-card-header i {
    color: var(--theme-primary);
    font-size: 0.85rem;
}

.evo-info-card-body {
    padding: 8px 10px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    min-height: 92px; /* 保证 4 行文字高度：4 × 1.5em + 16px padding */
    box-sizing: border-box;
}

.evo-info-card.evo-knowledge-link .evo-info-card-header {
    background: var(--theme-primary-bg);
    color: var(--theme-primary-darker);
}

.evo-info-card.evo-knowledge-link .evo-info-card-header i {
    color: var(--theme-primary-darker);
}

.evo-info-card.evo-bottleneck-card .evo-info-card-header {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.evo-info-card.evo-bottleneck-card .evo-info-card-header i {
    color: var(--color-danger);
}

@media (max-width: 900px) {
    .evolution-workbench {
        flex-direction: column;
    }
    .evolution-diagram-panel,
    .evolution-info-panel {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ================================================================
   第八章 8.1 绘制需求分析 —— 专用组件样式
   以下类名在 chapter-8-1.html 中使用，追加在文件末尾，不修改任何已有规则
   ================================================================ */

/* ---- 步骤标题与步骤正文 ---- */
.step-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    margin: 24px 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i {
    color: var(--theme-primary);
    font-size: 1.2rem;
}

.step-text {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: 10px;
}

/* ---- 工具标签（外部工具链接） ---- */
.tool-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 16px 0;
}

.tool-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

a.tool-tag {
    background: var(--theme-primary);
    color: #fff;
}

a.tool-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.3);
    color: #fff;
}

a.tool-tag:nth-child(2) { background: var(--color-success); }
a.tool-tag:nth-child(3) { background: var(--theme-primary); }
a.tool-tag:nth-child(4) { background: var(--theme-accent); }

span.tool-tag {
    background: var(--color-border-muted);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-hover);
}

/* ---- 代码块 / Prompt 模板 ---- */
.code-block {
    background: var(--color-text-primary);
    color: var(--color-border);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    line-height: 1.7;
    padding: 16px 20px;
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.code-block.light {
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    white-space: normal;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.75;
    border: 1px solid var(--color-border);
}

/* ---- 代码块包装器（含复制按钮） ---- */
.tab-code-wrapper {
    position: relative;
    margin: 12px 0;
}

.tab-code-wrapper .code-block {
    padding-right: 44px;
}

/* ---- README 示例卡片（8.6 实操步骤2） ---- */
.readme-example-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    background: var(--color-bg-surface);
}

.readme-example-card .card-header {
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-primary-darker);
}

.readme-example-card .card-header i {
    color: var(--theme-primary);
    margin-right: 6px;
}

.readme-example-card .card-body {
    padding: 16px;
}

.readme-example-card .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.readme-example-card .card-text {
    margin-bottom: 16px;
}

.readme-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 16px 0 10px;
}

.readme-section-title i {
    color: var(--theme-primary);
    margin-right: 5px;
}

.readme-table {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.readme-table thead th {
    background: var(--color-border-muted);
    color: var(--color-text-secondary);
    font-weight: 600;
}

.readme-table td,
.readme-table th {
    vertical-align: middle;
}

.readme-list {
    font-size: 0.88rem;
}

.readme-list .list-group-item {
    padding: 8px 12px;
    border-left: none;
    border-right: none;
}

.readme-example-card .alert-compact {
    padding-top: 8px;
    padding-bottom: 8px;
}

.readme-wrapper .copy-btn-inline {
    top: 12px;
    right: 12px;
}

/* ---- 可折叠目录树（8.6 实操步骤1） ---- */
.code-block.dir-tree {
    padding: 10px 16px;
    line-height: 1.55;
    overflow-x: auto;
    white-space: normal;
    word-break: normal;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Roboto Mono", monospace;
    font-size: 0.88rem;
}

.code-block.dir-tree details {
    margin: 0;
    padding: 0;
}

.dir-line {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 6px;
    white-space: nowrap;
    padding: 1px 0;
}

.dir-depth-0 {
    padding-left: 0;
}

.dir-depth-1 {
    padding-left: 0;
}

.dir-depth-2 {
    padding-left: 1.1em;
}

.dir-depth-3 {
    padding-left: 2.2em;
}

.dir-depth-4 {
    padding-left: 3.3em;
}

.dir-caret {
    display: inline-block;
    width: 0.85em;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    font-size: 0.7em;
    vertical-align: middle;
}

.dir-caret::before {
    content: "▶";
}

.dir-caret-spacer {
    display: inline-block;
    width: 0.85em;
    flex-shrink: 0;
}

.code-block.dir-tree summary {
    list-style: none;
    cursor: pointer;
    color: var(--color-border);
    outline: none;
}

.code-block.dir-tree summary::-webkit-details-marker {
    display: none;
}

.code-block.dir-tree summary:hover {
    color: var(--color-border-muted);
}

.code-block.dir-tree summary:hover .dir-caret {
    color: var(--color-border-hover);
}

.code-block.dir-tree details[open] > summary .dir-caret::before {
    content: "▼";
}

.dir-name {
    color: var(--color-border);
    font-weight: 500;
}

.dir-line.dir-file .dir-name {
    color: var(--theme-accent-mid);
    font-weight: 400;
}

.dir-comment {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    margin-left: 4px;
}

.dir-comment::before {
    content: "#";
    margin-right: 6px;
    color: var(--color-text-secondary);
}

/* ---- 复制按钮 ---- */
.copy-btn-inline {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    font-size: 0.9rem;
    padding: 0;
}

.copy-btn-inline:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.copy-btn-inline.copied {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.code-block.light ~ .copy-btn-inline,
.tab-code-wrapper:has(.code-block.light) .copy-btn-inline,
.prompt-box .copy-btn-inline {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.tab-code-wrapper:has(.code-block.light) .copy-btn-inline:hover,
.prompt-box .copy-btn-inline:hover {
    background: var(--theme-primary);
    color: #fff;
    border-color: var(--theme-primary);
}

.tab-code-wrapper:has(.code-block.light) .copy-btn-inline.copied,
.prompt-box .copy-btn-inline.copied {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

/* ---- .code-block-wrapper 代码块复制按钮（覆盖 SQL 预览 / 终端 / 插件查询窗口 等）---- */
.code-block-wrapper .code-block {
    position: relative;       /* 复制按钮的绝对定位锚点 */
    padding-right: 44px;      /* 给右上角按钮让位，避免遮住代码首字符 */
}

/* 默认黑底 code-block：沿用半透明白按钮（无需重写，.copy-btn-inline L10546 已是深色友好） */

/* 白底 code-block.light：按钮需浅色变体（与 .tab-code-wrapper / .prompt-box 一致）*/
.code-block-wrapper:has(.code-block.light) .copy-btn-inline {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.code-block-wrapper:has(.code-block.light) .copy-btn-inline:hover {
    background: var(--theme-primary);
    color: #fff;
    border-color: var(--theme-primary);
}

.code-block-wrapper:has(.code-block.light) .copy-btn-inline.copied {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

/* ---- Prompt 模板框 ---- */
.prompt-box {
    position: relative;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 12px 0;
}

.prompt-box h5 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--theme-primary-darker);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.prompt-box .code-block {
    margin: 0;
    padding-right: 44px;
}

.plantuml-resource-links {
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.plantuml-resource-links a {
    color: var(--theme-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.plantuml-resource-links a:hover {
    text-decoration: underline;
}

/* ---- 选项卡面板描述文字 ---- */
.tab-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
    padding: 0 4px;
}

/* ---- 关注点矩阵：对勾与叉号 ---- */
.matrix-check {
    display: inline-block;
    color: var(--color-success);
    font-weight: 700;
    margin-right: 4px;
}

.matrix-cross {
    display: inline-block;
    color: var(--color-danger);
    font-weight: 700;
    margin-right: 4px;
}

/* ---- 产出物清单框 ---- */
.deliverable-box {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-left: 4px solid var(--color-success);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 20px 0;
}

.deliverable-box h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-success-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.deliverable-box h4 i {
    color: var(--color-success);
}

/* ---- 产出物清单列表 ---- */
.check-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.check-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 8px;
    font-size: 0.92rem;
    color: var(--color-text-primary);
    line-height: 1.7;
}

.check-list li:last-child {
    margin-bottom: 0;
}

.check-list li::before {
    content: '\2714';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-success);
    font-weight: 700;
    font-size: 0.9rem;
}

/* ---- 动手练习框 ---- */
.exercise-box {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-bg-hover);
    border-left: 4px solid var(--color-warning);
    border-radius: 8px;
    padding: 20px 24px;
    margin: var(--section-gap) 0;
}

.exercise-box h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-warning-text);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exercise-box h4 i {
    color: var(--color-warning);
}

.exercise-box p {
    font-size: 0.92rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: 0;
}

/* ---- 8.1 学习目标导览 ---- */
.learning-objectives {
    background: var(--theme-primary-bg);
    border: 1px solid var(--theme-accent-bg);
    border-radius: 8px;
    padding: 16px 24px;
    margin-bottom: var(--section-gap);
}

.learning-objectives h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.learning-objectives h4 i {
    color: var(--theme-primary);
}

.learning-objectives ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.learning-objectives li {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    padding-left: 20px;
    position: relative;
}

.learning-objectives li::before {
    content: '\25B8';
    position: absolute;
    left: 0;
    color: var(--theme-primary);
    font-size: 0.8rem;
}

/* ---- 8.1 本节总结 ---- */
.section-summary {
    background: linear-gradient(135deg, var(--theme-primary-bg) 0%, var(--theme-accent-bg) 100%);
    border: 1px solid var(--theme-accent-bg);
    border-radius: 12px;
    padding: 20px 28px;
    margin: 0 0 var(--section-gap) 0;
}

.section-summary h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-summary h4 i {
    color: var(--theme-primary);
}

.section-summary ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.section-summary li {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    line-height: 1.8;
    padding-left: 24px;
    position: relative;
    margin-bottom: 6px;
}

.section-summary li:last-child {
    margin-bottom: 0;
}

.section-summary li::before {
    content: '\2714';
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--theme-primary);
    font-size: 0.85rem;
    font-weight: 700;
}

.section-summary li strong {
    color: var(--theme-primary-darker);
}

/* ---- 8.1 步骤流程指引条 ---- */
.workflow-stepper {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 20px 0 8px 0;
    flex-wrap: wrap;
}

.workflow-step {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 8px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px 0 0 8px;
    position: relative;
}

.workflow-step:last-child {
    border-radius: 8px;
}

.workflow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--color-border-hover);
    z-index: 1;
}

.workflow-step:not(:last-child) {
    border-right: none;
}

.workflow-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.workflow-step-label {
    font-size: 0.82rem;
    color: var(--color-text-primary);
    font-weight: 500;
    line-height: 1.4;
}

/* ---- 干系人关注点行式列表（灰色背景容器） ---- */
.stakeholder-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 4px 0;
}

.stakeholder-row {
    background: var(--color-border-muted);
    border-left: 3px solid var(--color-text-secondary);
    color: var(--color-text-primary);
    font-size: 0.92rem;
    line-height: 1.7;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
}

.stakeholder-row strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* ---- 8.1 步骤 3：12 个图 tab 平铺 ----
   v94：与 1.1 完全一致地按 flex: 1 等分容器宽度 + 0.9rem 字号；
   12 个 tab 单行平铺不再换行也不出现横向滚动条；
   单 tab 内容超出宽度时用 ellipsis 截断（每个 tab 均带 title 属性，hover 显示完整图名）

   风格完全照搬 1.1 章节 .tabs-container-full：
   - 容器 .mastery-tabs-flat：flex + border-bottom
   - tab 按钮默认灰色 var(--color-text-secondary)；hover 变蓝 var(--theme-primary)；active 蓝+加粗+下方 2px 蓝线
   - 内容区浅灰 var(--color-bg-page)，与 1.1 的 .tabs-content 同款
   HTML 中保留 color-business/tech/ops/sec class 只作为干系人分组的语义标记，不影响视觉 */

/* 12 tab 容器：横向铺满并等分宽度，与 1.1 tabs-header 同款（flex 等分，无滚动条） */
.mastery-tabs-flat {
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 0;
    min-width: 0;
    max-width: 100%;
    overflow: visible;   /* 不再触发横向滚动条 */
}

/* 12 tab 按钮：
   - font-size 0.9rem、font-weight 500 与 1.1 完全一致（继承基类 .tab-btn 的色/hover/active/::after）
   - flex: 1 1 0：让按钮按容器宽度等分；v94 改用 4+3 分组后宽度足够不再溢出，故不再 ellipsis
   - 关键：不能用 overflow:hidden，否则会裁掉 .tab-btn.active::after 的 2px 蓝下划线 */
.mastery-tabs-flat .tab-btn {
    flex: 1 1 0;
    padding: 10px 6px;
    font-size: 0.9rem;       /* 与 1.1 一致 */
    font-weight: 500;        /* 与 1.1 一致 */
    white-space: nowrap;
    border-radius: 0;
    margin-right: 0;
    text-align: center;
}

/* v94：分组切换 + 二级图 tabs（解决 12 个 tab 等分时单 tab 宽度太窄、字被截断问题）
   思路：把 12 个图按 4 个干系人分组压缩为 4 个分组按钮（一行永远能放下）；
   选中分组后下面显示该组的 3 张图（3 等分，0.9rem 完全装得下）。
   结构：
     .mastery-group-header   4 个 .group-btn（永远显示）
     .mastery-diagram-header 12 个 .uml-tab（按 data-group 显示/隐藏） */

/* 顶层分组按钮：缩小 padding 让 4 个更紧凑，但保持 0.9rem 字号与 1.1 一致 */
.mastery-tabs-flat .group-btn {
    flex: 1 1 0;
    padding: 12px 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* 二级图 header：与上层之间用 1px 分隔线 + 顶部细横线表示层级 */
.mastery-diagram-header {
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-surface);
}

/* 非活跃分组的图 tab：默认隐藏，由 JS 切换 */
.mastery-diagram-header .uml-tab {
    display: none;
}
.mastery-diagram-header .uml-tab.shown {
    display: block;
}

/* 顶层分组按钮 active 状态加强（继承基类的 active 蓝 + ::after 蓝线已足够） */
.mastery-tabs-flat .group-btn.active {
    font-weight: 700;
}

/* 12 tab 内容区：与 1.1 的 .tabs-content 风格一致（浅灰底、无额外边框） */
.mastery-flat-content {
    background: var(--color-bg-page);
    padding: 20px;
    border-radius: 0 0 8px 8px;
    min-height: 120px;
}

/* tab-pane 为复制按钮提供定位锚点 */
.mastery-flat-content .tab-pane {
    position: relative;
}

/* PlantUML 源码：去掉深色背景，与 1.1 选项卡内容字体一致（正文字体、深灰文字） */
.mastery-flat-content .code-block {
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 0 44px 0 0;
    margin: 0;
    border: none;
    border-radius: 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* 类图与序列图 tab 内的多 code-block 分段 */
.code-section {
    margin-bottom: 16px;
    position: relative;
}

.code-section:last-child {
    margin-bottom: 0;
}

.code-section .code-block {
    padding-right: 44px;
}

/* 浅色背景下的复制按钮样式（覆盖深色背景版本） */
.mastery-flat-content .copy-btn-inline {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.mastery-flat-content .copy-btn-inline:hover {
    background: var(--color-border-muted);
    color: var(--color-text-primary);
    border-color: var(--color-border-hover);
}

/* ---- 8.1 步骤 4：输出图件清单（结构化卡片）
   按 4 类干系人分组（业务/技术/运维/安全），每组下 3 张图一张一行。
   视觉风格延续 .practice-box / .stakeholder-row 的浅蓝灰系：
   - 顶部摘要条：浅灰背景 var(--color-bg-page)，把"12 张 / 4 类 / P0~P2 / L1~L3"四个口径一眼说完
   - 分组卡片：白底 + 1px 边框 + 圆角，顶部 4px 彩色细条区分干系人类别
   - 图行：浅灰底 var(--color-bg-page)，左侧 3px 灰边
   - 优先级标签：P0 红 / P1 蓝 / P2 灰（语义与项目其他地方一致，遵循中文股市直觉不通用）
*/

/* 顶部摘要条 */
.artifact-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 16px;
    margin: 12px 0 18px;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
}
.artifact-summary span strong {
    color: var(--color-text-primary);
    margin-right: 4px;
}

/* 4 个分组卡片容器：左右两列网格（业务/技术 左列，运维/安全 右列），
   视觉上等高对齐，避免单列过长 */
.artifact-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 8px 0 16px;
}

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

/* 单个分组卡片 */
.artifact-group {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 顶部 4px 彩色细条：4 类干系人用 4 种不同颜色识别 */
.artifact-group-business { border-top: 4px solid var(--theme-primary-dark); }  /* 蓝 */
.artifact-group-tech     { border-top: 4px solid var(--theme-primary); }  /* 青 */
.artifact-group-ops      { border-top: 4px solid var(--theme-accent); }  /* 紫 */
.artifact-group-sec      { border-top: 4px solid var(--color-danger); }  /* 红 */

.artifact-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-page);
}

.artifact-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.artifact-group-business .artifact-group-title i { color: var(--theme-primary-dark); }
.artifact-group-tech     .artifact-group-title i { color: var(--theme-primary); }
.artifact-group-ops      .artifact-group-title i { color: var(--theme-accent); }
.artifact-group-sec      .artifact-group-title i { color: var(--color-danger); }

.artifact-group-count {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border-hover);
}

.artifact-group-body {
    padding: 12px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 单张图行：浅灰底 + 左 3px 灰边 */
.artifact-row {
    background: var(--color-bg-page);
    border-left: 3px solid var(--color-text-muted);
    border-radius: 0 6px 6px 0;
    padding: 10px 14px 12px;
}

.artifact-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

/* 优先级标签 P0/P1/P2 */
.artifact-priority {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 8px;
    line-height: 1.4;
}
.artifact-priority-p0 { background: var(--color-danger-bg-hover); color: var(--color-danger-text); }
.artifact-priority-p1 { background: rgba(var(--theme-primary-rgb), 0.1); color: var(--theme-primary-dark); }
.artifact-priority-p2 { background: var(--color-border); color: var(--color-text-secondary); }

/* 抽象层次 L1/L2/L3 */
.artifact-level {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    padding: 1px 7px;
}

.artifact-level-none {
    color: var(--color-border-hover);
    border-color: var(--color-border);
    background: var(--color-bg-page);
}

.artifact-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-bg-inverse);
}

/* 详细元数据：4 行（受众/用途/工具/理由）用 inline 标签 + 内容 */
.artifact-row-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-primary);
}

@media (max-width: 600px) {
    .artifact-row-meta {
        grid-template-columns: 1fr;
    }
}

.artifact-meta-item {
    /* 每条元数据为单行文本块 */
}

.artifact-label {
    display: inline-block;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-right: 4px;
    min-width: 2.5em;
}

/* 底部分级口径：横向 3 段 P0/P1/P2 */
.artifact-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.artifact-tier {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
    color: var(--color-text-primary);
    flex: 1 1 240px;
}

.artifact-tier-tag {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 8px;
    line-height: 1.4;
}
.artifact-tier-p0 .artifact-tier-tag { background: var(--color-danger-bg-hover); color: var(--color-danger-text); }
.artifact-tier-p1 .artifact-tier-tag { background: rgba(var(--theme-primary-rgb), 0.1); color: var(--theme-primary-dark); }
.artifact-tier-p2 .artifact-tier-tag { background: var(--color-border); color: var(--color-text-secondary); }

.artifact-tier-count {
    font-weight: 600;
    color: var(--color-text-primary);
}

.artifact-tier-desc {
    color: var(--color-text-secondary);
}


/* ===== 9.4 AI 图形生成 ===== */
/* 9.4.2 三道检查卡片：三列横向 + 高度随内容自适应（仅作用于 9.4 章节） */
.content-grid.check-grid {
    grid-template-columns: repeat(3, 1fr);
}
.content-grid.check-grid .content-card-grid.flip-card {
    min-height: auto;
    height: 100%;
    perspective: 1000px;
}
.content-grid.check-grid .flip-card-inner {
    display: grid;
    grid-template: 1fr / 1fr;
    min-height: auto;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.content-grid.check-grid .flip-card-front,
.content-grid.check-grid .flip-card-back {
    grid-area: 1 / 1 / 2 / 2;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: auto;
    backface-visibility: hidden;
    border-radius: 8px;
    padding: 20px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.content-grid.check-grid .flip-card-front {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
}
.content-grid.check-grid .flip-card-back {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 60%, var(--theme-primary-darker) 100%);
    color: #fff;
    transform: rotateY(180deg);
    border: 1px solid var(--theme-primary);
}
.content-grid.check-grid .flip-card-back .card-tip-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}
.content-grid.check-grid .flip-card-back .card-tip-content {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    text-align: left;
    padding: 0;
    width: 100%;
}
.content-grid.check-grid .flip-card-back .tip-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.95);
    text-align: left;
}
.content-grid.check-grid .flip-card-back .tip-line:last-child {
    margin-bottom: 0;
}
.content-grid.check-grid .flip-card-back .tip-line .tip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-bg-surface);
    flex-shrink: 0;
    margin-top: 8px;
}
.content-grid.check-grid .flip-card-back .tip-line .tip-text {
    flex: 1;
    min-width: 0;
}
/* 取消正面各元素的固定高度，让内容真正自适应 */
.content-grid.check-grid .card-front-icon {
    height: auto;
    margin-bottom: 4px;
}
.content-grid.check-grid .card-front-icon i {
    font-size: 1.6rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--theme-primary-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-primary);
}
.content-grid.check-grid .card-front-title {
    height: auto;
    margin-bottom: 4px;
}
.content-grid.check-grid .card-front-en,
.content-grid.check-grid .card-front-zh {
    height: auto;
    margin-bottom: 4px;
}
.content-grid.check-grid .card-front-en .card-desc.en,
.content-grid.check-grid .card-front-zh .card-desc.zh {
    line-height: 1.5;
    margin: 0;
}
.content-grid.check-grid .flip-card-front {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* ==================== 附录页样式 ==================== */

.appendix-container {
    max-width: none;
    margin: 0;
    padding: 8px 4px 40px;
}

.appendix-header {
    text-align: center;
    margin-bottom: 24px;
}

.appendix-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.appendix-header h1 i {
    color: var(--theme-primary);
}

.appendix-header p {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin-top: 8px;
    line-height: 1.6;
}

.appendix-letters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-bottom: 28px;
    padding: 12px;
    background: var(--color-bg-page);
    border-radius: 8px;
}

.appendix-letters a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.appendix-letters a:hover {
    background: var(--theme-primary);
    color: #fff;
    border-color: var(--theme-primary);
}

.appendix-letter-group {
    margin-bottom: 24px;
}

.appendix-letter-header {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--theme-primary);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 6px;
    margin-bottom: 14px;
    scroll-margin-top: 16px;
}

.appendix-people .appendix-letter-header {
    color: var(--theme-primary);
}

.appendix-terms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.appendix-term-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 12px;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.appendix-term-card:hover {
    border-color: var(--theme-primary);
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.1);
}

.appendix-term-card h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.appendix-term-card h3 small {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 4px;
}

.appendix-term-card p {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.appendix-people .appendix-term-card h3 {
    color: var(--theme-primary);
}

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

    .appendix-header h1 {
        font-size: 1.3rem;
    }

    .appendix-letters a {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* ========== 参考文献页面样式 ========== */

.references-container {
    max-width: none;
    margin: 0;
    padding: 8px 4px 0;          /* 去掉 padding-bottom 40；最后一组 margin-bottom 也已设为 0 */
}

/* 让"参考文献→附录"与"9.7→参考文献"的视觉间距一致：保留 32+8=40px 标准节距。 */
.references-section:last-child {
    margin-bottom: 0;
}

.references-header {
    text-align: center;
    margin-bottom: 28px;
}

.references-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.references-header h1 i {
    color: var(--theme-primary);
}

.references-subtitle {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin-top: 8px;
    line-height: 1.6;
}

.references-section {
    margin-bottom: 32px;
}

.references-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--theme-primary);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 6px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.references-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reference-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 14px;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.reference-card:hover {
    border-color: var(--theme-primary);
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.1);
}

.ref-number {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--theme-primary);
    flex-shrink: 0;
    min-width: 36px;
    line-height: 1.5;
}

.ref-body {
    flex: 1;
    min-width: 0;
}

.ref-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
    line-height: 1.4;
}

.ref-meta {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
    line-height: 1.4;
}

.ref-isbn {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    line-height: 1.4;
}

.ref-desc {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .references-header h1 {
        font-size: 1.3rem;
    }

    .references-section-title {
        font-size: 1.05rem;
    }

    .ref-title {
        font-size: 0.85rem;
    }
}

/* ============================================================ */
/* 打印友好样式 (#12)                                             */
/* ============================================================ */
@media print {
    /* 隐藏侧边栏、浮动工具条、画笔层、模态框 */
    .sidebar,
    .floating-toolbar,
    #penCanvas,
    .svg-zoom-modal,
    .modal-backdrop,
    #nav-container,
    #footer-container {
        display: none !important;
    }

    /* 主内容区占满宽度，移除侧边栏占位 */
    .course-container {
        display: block !important;
    }

    .main-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 内容区取消独立滚动，让浏览器自然分页 */
    .content-wrapper {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
    }

    /* 只显示当前可见的 content-section，隐藏其他 */
    .content-section {
        display: none !important;
    }

    .content-section[style*="display: block"],
    .content-section[style*="display:block"] {
        display: block !important;
    }

    /* 如果没有任何 section 被显式显示，默认全部显示 */
    .content-wrapper .content-section:first-child {
        display: block !important;
    }

    /* 面包屑简化 */
    .content-header {
        border: none !important;
        padding: 0 0 10px 0 !important;
    }

    /* 代码块避免跨页断行 */
    .code-block,
    pre {
        white-space: pre-wrap !important;
        word-break: break-all !important;
        page-break-inside: avoid;
    }

    /* 表格避免跨页断行 */
    table {
        page-break-inside: auto;
    }

    tr {
        page-break-inside: avoid;
    }

    /* SVG 图表避免跨页 */
    svg {
        page-break-inside: avoid;
        max-width: 100% !important;
    }

    /* 链接去掉颜色下划线，节省打印墨水 */
    a {
        text-decoration: none !important;
        color: inherit !important;
    }

    /* 背景透明，节省墨水 */
    body {
        background: #fff !important;
    }

    .content-section,
    .main-content,
    .course-container {
        background: #fff !important;
    }
}

/* 学习方法页：AI 学习伙伴使用指南 */
.ai-guide-wrap {
    padding: 24px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.ai-guide-wrap h4 {
    margin-bottom: 6px;
    color: var(--color-text-primary);
}

.ai-guide-lead {
    margin: 0 0 20px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.ai-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.ai-guide-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    border-color: var(--theme-primary-border);
}

.ai-guide-card > i {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--theme-primary-bg) 0%, var(--theme-primary-bg-hover) 100%);
    color: var(--theme-primary-dark);
    border-radius: 8px;
    font-size: 1.1rem;
}

.ai-guide-body {
    min-width: 0;
}

.ai-guide-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.ai-guide-card ul {
    margin: 0;
    padding-left: 16px;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.ai-guide-card li {
    margin-bottom: 4px;
}

.ai-guide-card li:last-child {
    margin-bottom: 0;
}

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

/* ============================================================ */
/* 站点页脚（footer 由 style.css 的 footer.bg-dark 规则着色）        */
/* ============================================================ */
.site-footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.82rem;
    color: #cbd5e1;
    text-align: center;
    line-height: 1.6;
}

.site-footer .site-footer-sep {
    color: rgba(255,255,255,0.4);
}

@media (max-width: 768px) {
    .site-footer {
        flex-direction: column;
        gap: 2px;
        padding: 14px 16px;
    }
    .site-footer .site-footer-sep {
        display: none;
    }
}

/* ========== 倒计时工具（右侧工具栏） ========== */

/* --- 模态框层级：高于倒计时遮罩层(10600)与全局 backdrop(10000) --- */
.countdown-setup-modal,
.countdown-confirm-modal {
    z-index: 10700;
}

/* --- 设置模态框 --- */
.countdown-setup-dialog {
    max-width: 420px;
    margin: 1rem auto;
}

.countdown-setup-content {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 22px 26px 20px;
}

.countdown-setup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--color-border);
}

.countdown-setup-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.countdown-setup-title i {
    color: var(--theme-primary);
    font-size: 1.1rem;
}

.countdown-setup-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 切换悬浮倒计时的小图标按钮 */
.countdown-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.countdown-mini-btn:hover {
    background: var(--color-bg-hover);
    color: var(--theme-primary);
    border-color: var(--color-border-hover);
}

.countdown-setup-body {
    padding: 20px 0 14px;
}

/* 时:分:秒 输入行 */
.countdown-input-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.countdown-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.countdown-input-group input {
    width: 76px;
    height: 62px;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    background: var(--color-bg-page);
    border: 2px solid var(--color-border);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-appearance: textfield;
    appearance: textfield;
}

.countdown-input-group input::-webkit-outer-spin-button,
.countdown-input-group input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.countdown-input-group input:focus {
    border-color: var(--theme-primary);
    background: var(--color-bg-surface);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.12);
}

.countdown-input-group input.cd-input-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.countdown-input-label {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

/* 冒号：双圆点垂直居中（不依赖字体基线，天然与数字对齐） */
.countdown-colon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    width: 14px;
    height: 62px;
    align-self: flex-start;
    font-size: 0;
    color: transparent;
    user-select: none;
}

.countdown-colon::before,
.countdown-colon::after {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-text-secondary);
    transition: background 0.2s ease;
}

/* 快捷时长 chips */
.countdown-presets {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.countdown-preset-chip {
    padding: 6px 16px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.countdown-preset-chip:hover {
    color: var(--theme-primary-darker);
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.06);
}

.countdown-preset-chip.active {
    color: var(--theme-primary-darker);
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.12);
    font-weight: 600;
}

/* 校验错误提示 */
.countdown-error {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.85rem;
    color: #ef4444;
}

.countdown-error.show {
    display: flex;
    animation: countdown-shake 0.35s ease;
}

@keyframes countdown-shake {

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

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

    50% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-2px);
    }
}

/* --- 模态框按钮（设置框与确认框共用） --- */
.countdown-setup-footer,
.countdown-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px dashed var(--color-border);
}

.countdown-confirm-footer {
    justify-content: center;
    border-top: none;
    padding-top: 20px;
}

.countdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.countdown-btn-cancel {
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
}

.countdown-btn-cancel:hover {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.countdown-btn-start {
    color: #fff;
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    box-shadow: 0 3px 10px rgba(var(--theme-primary-rgb), 0.3);
}

.countdown-btn-start:hover {
    background: var(--theme-primary-dark);
    border-color: var(--theme-primary-dark);
    box-shadow: 0 5px 14px rgba(var(--theme-primary-rgb), 0.4);
}

.countdown-btn-danger {
    color: #fff;
    background: #ef4444;
    border: 1px solid #ef4444;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.28);
}

.countdown-btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* --- 确认模态框 --- */
.countdown-confirm-dialog {
    max-width: 380px;
    margin: 1rem auto;
}

.countdown-confirm-content {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px 26px 22px;
    text-align: center;
}

.countdown-confirm-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 50%;
}

.countdown-confirm-title {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.countdown-confirm-text {
    margin-top: 6px;
    font-size: 0.92rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* --- 倒计时遮罩层（运行中覆盖整个页面） --- */
.countdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 10600;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%,
            rgba(var(--theme-primary-rgb), 0.22),
            rgba(15, 23, 42, 0.84) 76%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.countdown-overlay.show {
    display: flex;
}

.countdown-overlay.visible {
    opacity: 1;
}

/* 右上角关闭按钮：默认隐藏，鼠标移入遮罩层时淡入 */
.countdown-close {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.countdown-overlay:hover .countdown-close {
    opacity: 1;
}

.countdown-close:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    transform: scale(1.06);
}

.countdown-close:active {
    transform: scale(0.96);
}

/* 中央舞台：进度环 + 时间 + 说明 */
.countdown-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    transform: translateY(-2vh);
}

.countdown-ring-wrap {
    position: relative;
    width: clamp(240px, 38vmin, 340px);
    height: clamp(240px, 38vmin, 340px);
}

.countdown-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.countdown-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 10;
}

.countdown-ring-progress {
    fill: none;
    stroke: var(--theme-accent);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.25s linear, stroke 0.4s ease;
}

.countdown-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-time {
    font-size: clamp(2.2rem, 6vmin, 3.6rem);
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 逐位固定宽度：数字 0.62em、冒号 0.34em，整串恒定 4.4em，
   秒数跳动时总宽纹丝不动（约 72% 圆环直径，呼吸放大后仍有余量） */
.countdown-time .cd-digit,
.countdown-time .cd-colon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    text-align: center;
}

.countdown-time .cd-digit {
    width: 0.62em;
}

.countdown-time .cd-colon {
    width: 0.34em;
    opacity: 0.85;
    /* 双圆点：不依赖字体基线，与数字完美垂直对齐 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.2em;
    height: 1em;
    color: transparent;
}

.countdown-time .cd-colon::before,
.countdown-time .cd-colon::after {
    content: '';
    width: 0.15em;
    height: 0.15em;
    border-radius: 50%;
    background: #fff;
}

.countdown-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
}

.countdown-caption i {
    color: var(--theme-accent);
    font-size: 1.05rem;
}

.countdown-hint {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.42);
}

/* 剩余不足 1 分钟：进度环与文字转警示色并轻微脉冲 */
.countdown-overlay.warning .countdown-ring-progress {
    stroke: #f87171;
}

.countdown-overlay.warning .countdown-time {
    animation: countdown-pulse 1s ease-in-out infinite;
}

@keyframes countdown-pulse {

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

    50% {
        transform: scale(1.035);
    }
}

/* 时间到状态：环走满、文字替换为「时间到」并脉冲 */
.countdown-overlay.done .countdown-ring-progress {
    stroke: var(--theme-accent);
}

.countdown-overlay.done .countdown-time {
    font-size: clamp(2.2rem, 6vmin, 3.4rem);
    letter-spacing: 0.12em;
    animation: countdown-pulse 0.9s ease-in-out infinite;
}

/* ========== 悬浮倒计时（Mini 浮窗） ========== */
/* 讲课比赛场景：默认收起为页头高度的时间条（仅时间），hover 展开完整控制；标题栏可拖拽，松手吸附四角 */
.mini-countdown {
    position: fixed;
    top: 0;
    right: 16px;
    /* 运行态收起高度由 JS 同步；四角停靠在页头内按当前实际高度整体垂直居中 */
    --mini-cd-h: 36px;
    width: max-content;
    min-height: var(--mini-cd-h);
    display: none;
    flex-direction: column;
    background: var(--color-bg-elevated, var(--color-bg-surface));
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 100002;
    overflow: hidden;
    user-select: none;
    animation: mini-countdown-in-bottom 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* bottom 不做过渡：下角停靠时由 ResizeObserver 逐帧写入 --mini-cd-bottom，
       底边与高度动画逐帧同步（先过渡后重算会造成「先缩放、再滑位」的两段式不连贯） */
    transition: border-radius 0.22s ease;
}

/* 四角停靠：
   - 上角 top=页头中线 + translateY(-50%)，在页头高度内垂直居中；
   - 下角 bottom 由 JS 按组件高度动态决定（连续公式，无跳变）：
     bottom = max(4, 页脚半高 - 组件半高)
     · 收起态（高度小）：中心与页脚中心重合，页脚内垂直居中；
     · 展开态（高度超过页脚范围）：底边钳制在 4px，贴近页脚底边。
   高度动画的每一帧由 ResizeObserver 重算，底边与高度同步移动，动画连贯。 */
.mini-countdown[data-corner="tr"] { top: 0; right: 16px; left: auto; bottom: auto; transform: translateY(-50%); animation-name: mini-countdown-in-top; }
.mini-countdown[data-corner="tl"] { top: 0; left: 16px; right: auto; bottom: auto; transform: translateY(-50%); animation-name: mini-countdown-in-top; }
.mini-countdown[data-corner="br"] { bottom: var(--mini-cd-bottom, 16px); right: 16px; top: auto; left: auto; transform: none; animation-name: mini-countdown-in-bottom; }
.mini-countdown[data-corner="bl"] { bottom: var(--mini-cd-bottom, 16px); left: 16px; top: auto; right: auto; transform: none; animation-name: mini-countdown-in-bottom; }

.mini-countdown.show {
    display: flex;
}

/* 上角停靠：入场动画以 translateY(-50%) 为基准，避免动画结束跳位 */
@keyframes mini-countdown-in-top {
    from {
        opacity: 0;
        transform: translateY(-50%) translateY(-12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* 下角停靠：以 translateY(0) 为基准的入场动画，结束时与停靠规则一致 */
@keyframes mini-countdown-in-bottom {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

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

/* ---------- 收起态（运行中且未 hover/聚焦/拖拽）：仅显示时间，高度 = 页头高度 ---------- */
.mini-countdown.running:not(:hover):not(:focus-within):not(.dragging) {
    border-radius: calc(var(--mini-cd-h) / 2);
}

.mini-countdown.running:not(:hover):not(:focus-within):not(.dragging) .mini-countdown-header {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
}

.mini-countdown.running:not(:hover):not(:focus-within):not(.dragging) .mini-countdown-body {
    padding: 0;
}

.mini-countdown.running:not(:hover):not(:focus-within):not(.dragging) .mini-countdown-running {
    gap: 0;
}

.mini-countdown.running:not(:hover):not(:focus-within):not(.dragging) .mini-countdown-controls {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

/* ---------- 标题栏（拖拽手柄：十字移动光标） ---------- */
.mini-countdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px 7px 12px;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
    cursor: move;
    max-height: 40px;
    overflow: hidden;
    transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.22s ease, border-color 0.22s ease;
}

.mini-countdown-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.mini-countdown-title i {
    color: var(--theme-primary);
    font-size: 0.9rem;
}

.mini-countdown-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.mini-countdown-close:hover {
    background: var(--color-bg-hover);
    color: var(--color-danger-text);
}

.mini-countdown-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    transition: padding 0.22s ease;
}

/* 设置态 */
.mini-countdown-setup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.mini-countdown-setup.hide {
    display: none;
}

.mini-countdown-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.mini-countdown-field {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mini-countdown-field input {
    width: 46px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mini-countdown-field input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.12);
}

.mini-countdown-field span {
    font-size: 0.65rem;
    color: var(--color-text-secondary);
}

.mini-countdown-colon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 10px;
    height: 36px;
    font-size: 0;
    color: transparent;
}

.mini-countdown-colon::before,
.mini-countdown-colon::after {
    content: '';
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-text-secondary);
    transition: background 0.2s ease;
}

.mini-countdown-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--theme-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.08s ease;
}

.mini-countdown-start:hover {
    background: var(--theme-primary-dark);
}

.mini-countdown-start:active {
    transform: scale(0.98);
}

/* 运行态 */
.mini-countdown-running {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: gap 0.22s ease;
}

.mini-countdown-running.show {
    display: flex;
}

/* ---------- 篮球比分式翻页时钟（紧凑·向上滚动翻页） ---------- */
.mini-flip-clock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: calc(var(--mini-cd-h) - 2px);
    padding: 0 10px;
    box-sizing: border-box;
}

/* 单个数字卡 */
.mini-flip-clock .flip-unit {
    position: relative;
    width: calc(var(--mini-cd-h) * 0.6);
    height: calc(var(--mini-cd-h) - 12px);
    background: var(--color-bg-base, #f1f5f9);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.mini-flip-clock .flip-num {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc((var(--mini-cd-h) - 12px) * 0.62);
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 3D 翻页：旧数字绕底边向前倒下，新数字从顶边立起（翻牌钟质感） */
.mini-flip-clock .flip-unit {
    perspective: 220px;
}

.mini-flip-clock .flip-num.flip-old {
    z-index: 4;
    transform-origin: 50% 100%;
    animation: miniFlipOut 0.32s cubic-bezier(0.5, 0, 0.85, 0.55) both;
    will-change: transform, opacity;
}

.mini-flip-clock .flip-num.flip-new {
    z-index: 5;
    transform-origin: 50% 0%;
    animation: miniFlipIn 0.32s cubic-bezier(0.15, 0.75, 0.35, 1) 0.16s both;
    will-change: transform;
}

/* 翻页期间隐藏静止层：任意时刻卡片内只有一层运动数字，
   旧页下落/新页立起时背景为纯卡片底色，杜绝多层数字叠影 */
.mini-flip-clock .flip-unit.flipping .flip-num:not(.flip-old):not(.flip-new) {
    visibility: hidden;
}

@keyframes miniFlipOut {
    0% { transform: rotateX(0deg); opacity: 1; }
    75% { opacity: 1; }
    100% { transform: rotateX(-90deg); opacity: 0; }
}

@keyframes miniFlipIn {
    from { transform: rotateX(90deg); }
    to { transform: rotateX(0deg); }
}

/* 冒号：双圆点垂直居中，间距收紧与设置态一致 */
.mini-flip-clock .flip-colon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    height: calc(var(--mini-cd-h) - 12px);
    margin: 0 1px;
}

.mini-flip-clock .flip-colon i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-text-secondary);
    transition: background 0.2s ease;
}

/* 运行中冒号轻微呼吸；暂停时静止 */
.mini-countdown.running:not(.paused) .flip-colon i {
    animation: flip-colon-blink 1s ease-in-out infinite;
}

@keyframes flip-colon-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* 时间到：字号与翻页数字相当；宽度由 JS 按翻页时钟宽度设置 min-width，
   保证收起态宽高、位置与运行态简易状态完全一致 */
.mini-cd-done {
    display: none;
    align-items: center;
    justify-content: center;
    height: calc(var(--mini-cd-h) - 2px); /* 与翻页时钟同高：内容区 = 组件高 - 上下边框 */
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--theme-primary);
    box-sizing: border-box;
}

.mini-countdown.done .mini-flip-clock { display: none; }

.mini-countdown.done .mini-cd-done {
    display: flex;
    animation: countdown-pulse 0.9s ease-in-out infinite;
}

/* 警示（最后 60 秒）：数字与冒号转红 */
.mini-countdown.warning .flip-unit { border-color: rgba(239, 68, 68, 0.55); }

.mini-countdown.warning .flip-unit .flip-num { color: var(--color-danger-text); }

.mini-countdown.warning .flip-colon i { background: var(--color-danger-text); }

.mini-countdown.warning .flip-colon i { animation-duration: 0.5s; }

/* ---------- 收起态进度环：外侧描边随计时顺时针消退（顶部 12 点起始） ----------
   运行中绿色（主题色）环绕计时，最后 60 秒转红；展开态自动隐藏。
   path 由 JS 按组件当前尺寸生成（胶囊半径跟随 --mini-cd-h），pathLength=100 归一化，
   stroke-dashoffset = 100 × 已耗时占比，由每 200ms tick + linear 过渡平滑推进 */
.mini-cd-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 6;
    transition: opacity 0.25s ease;
    overflow: visible;
}

.mini-cd-ring path {
    fill: none;
    stroke: var(--theme-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dashoffset: 0;
    transition: stroke 0.3s ease, stroke-dashoffset 0.2s linear;
}

/* 仅运行态收起态显示（与收起规则同条件） */
.mini-countdown.running:not(:hover):not(:focus-within):not(.dragging) .mini-cd-ring {
    opacity: 1;
}

/* 最后 60 秒边框转红 */
.mini-countdown.warning .mini-cd-ring path {
    stroke: var(--color-danger-text);
}

/* 时间到：隐藏进度环，仅保留「时间到」胶囊 */
.mini-countdown.running.done:not(:hover):not(:focus-within):not(.dragging) .mini-cd-ring {
    opacity: 0;
}

.mini-countdown-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-height: 44px;
    overflow: hidden;
    transition: max-height 0.22s ease, opacity 0.18s ease, margin 0.22s ease;
}

.mini-countdown-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.mini-countdown-ctrl:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-hover);
}

.mini-countdown-ctrl:active {
    transform: scale(0.94);
}

.mini-countdown-ctrl i {
    pointer-events: none;
}

.mini-countdown-stop {
    color: #fff;
    background: #ef4444;
    border-color: #ef4444;
}

.mini-countdown-stop:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* 拖拽中：强制展开、抓取光标、加重投影；移除上角 -50% 居中变换（JS 已把 top 补回半高） */
.mini-countdown.dragging {
    cursor: grabbing;
    opacity: 0.92;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
    transform: none;
    animation: none;
}

.mini-countdown.dragging .mini-countdown-header {
    cursor: grabbing;
}

@media (max-width: 480px) {
    .countdown-setup-content {
        padding: 18px 18px 16px;
    }

    .countdown-input-group input {
        width: 64px;
        height: 54px;
        font-size: 1.45rem;
    }

    .countdown-colon {
        height: 54px;
    }
}

/* ============================================================ */
/* 上下课提醒工具（铃铛）：四边呼吸光晕 + 右下角摇晃卡片 + 设置模态框 */
/* 配色全走变量：上课=固定高饱和绿(--remind-start-color)、下课=琥珀(--remind-end-color)，
   亮色/深色自动适配（深色两色均在 dark-mode.css 中提亮），
   不随 8 套主题色变化——提醒的首要目标是任何场景下可见 */
/* ============================================================ */
:root {
    --remind-start-color: #22c55e;
    --remind-end-color: #f59e0b;
}

/* --- 工具栏铃铛按钮 + 今日待提醒红点 --- */
.remind-tool-btn {
    position: relative;
}
.remind-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid var(--color-bg-surface);
    box-shadow: 0 0 0 1.5px rgba(239, 68, 68, 0.3);
}

/* --- 四边呼吸光晕（纯提示，不拦截点击） --- */
#remindHalos {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100006;
}
#remindHalos .remind-halo {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease;
}
#remindHalos.remind-active .remind-halo {
    animation: remind-halo-breathe 1.1s ease-in-out infinite;
}
.remind-halo-t {
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--remind-halo-color);
    box-shadow: 0 0 20px 4px var(--remind-halo-color);
}
.remind-halo-b {
    bottom: 0; left: 0; right: 0; height: 3px;
    background: var(--remind-halo-color);
    box-shadow: 0 0 20px 4px var(--remind-halo-color);
}
.remind-halo-l {
    left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--remind-halo-color);
    box-shadow: 0 0 20px 4px var(--remind-halo-color);
}
.remind-halo-r {
    right: 0; top: 0; bottom: 0; width: 3px;
    background: var(--remind-halo-color);
    box-shadow: 0 0 20px 4px var(--remind-halo-color);
}
#remindHalos.remind-up {
    --remind-halo-color: var(--remind-start-color);
}
#remindHalos.remind-down {
    --remind-halo-color: var(--remind-end-color);
}
@keyframes remind-halo-breathe {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.85; }
}

/* --- 右下角摇晃提醒卡片 --- */
#remindCard {
    position: fixed;
    right: 24px;
    bottom: 26px;
    z-index: 100006;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 200px;
    padding: 12px 14px;
    background: var(--color-bg-surface);
    border: 1px solid var(--remind-accent);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
#remindCard.remind-up {
    --remind-accent: var(--remind-start-color);
    --remind-accent-bg: rgba(34, 197, 94, 0.12);
}
#remindCard.remind-down {
    --remind-accent: var(--remind-end-color);
    --remind-accent-bg: rgba(245, 158, 11, 0.12);
}
#remindCard.remind-show {
    opacity: 1;
    transform: translateY(0);
}
#remindCard.remind-swing {
    animation: remind-swing 1.6s ease infinite;
}
@keyframes remind-swing {
    0%   { transform: translateY(0) rotate(0deg); }
    12%  { transform: translateY(-6px) rotate(-7deg); }
    30%  { transform: translateY(-6px) rotate(6deg); }
    48%  { transform: translateY(-6px) rotate(-4deg); }
    66%  { transform: translateY(-6px) rotate(3deg); }
    84%  { transform: translateY(-6px) rotate(-2deg); }
    100% { transform: translateY(-6px) rotate(0deg); }
}
.remind-card-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--remind-accent-bg);
    color: var(--remind-accent);
    font-size: 1rem;
}
.remind-card-body {
    min-width: 0;
}
.remind-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.remind-card-time {
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.remind-card-hint {
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--remind-accent);
}

/* --- 提醒设置模态框 --- */
#remindSettingsModal {
    z-index: 10700;
}
.remind-setup-dialog {
    max-width: 1000px;
    margin: 1rem auto;
}
.remind-setup-content {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 16px 16px 12px;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
}
.remind-setup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--color-border);
    flex-shrink: 0;
}
.remind-setup-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.remind-setup-title i {
    color: var(--theme-primary);
    font-size: 1.1rem;
}
.remind-setup-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.remind-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    padding: 0;
}
.remind-reset-btn:hover {
    background: var(--color-bg-page);
    color: var(--color-text-primary);
}
.remind-setup-body {
    padding: 10px 0 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
/* 时段横向三列（上午/下午/晚上并排，默认课表高度可控、无滚动条） */
.remind-cols {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.remind-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-page);
}
.remind-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.remind-col-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.remind-col-title i {
    color: var(--theme-primary);
    font-size: 0.92rem;
}
.remind-col-count {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-tertiary);
    background: var(--color-bg-hover);
    border-radius: 999px;
    padding: 1px 7px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.remind-col-body {
    padding: 6px 6px 5px;
}
/* 课程行：名称 + 起止时间 + 删除 */
.remind-row {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 6px;
}
.remind-row .remind-name {
    height: 28px;
    width: 48px;
    padding: 0 3px;
    font-size: 0.74rem;
    text-align: center;
    margin-right: 4px;
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 7px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}
.remind-row .remind-name:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-primary-bg);
}
/* 时/分双下拉：appearance:none + 主题色箭头，样式完全可控 */
.remind-time {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 28px;
    width: 36px;
    padding: 0 12px 0 4px;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    background: var(--color-bg-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 L5 6.5 L8 3.5' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center / 10px 10px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.remind-time:hover {
    border-color: var(--color-border-hover);
}
.remind-time:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-primary-bg);
}
.remind-colon {
    color: var(--color-text-tertiary);
    font-size: 0.72rem;
    flex-shrink: 0;
}
.remind-sep {
    color: var(--color-text-tertiary);
    font-size: 0.72rem;
    flex-shrink: 0;
}
/* 时间组：在名称和删除按钮之间自动撑开并居中 */
.remind-time-group {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}
.remind-time-group .remind-sep {
    margin: 0 8px;
}
.remind-row-del {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-text-tertiary);
    font-size: 0.65rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.remind-row-del:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
/* 列底部操作行：添加 + 清空 */
.remind-col-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}
.remind-add-row {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: transparent;
    border: 1px dashed var(--color-border-hover);
    border-radius: 7px;
    color: var(--color-text-secondary);
    font-size: 0.74rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.remind-add-row:hover {
    color: var(--theme-primary);
    border-color: var(--theme-primary);
    background: var(--theme-primary-bg);
}
.remind-clear-row {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: transparent;
    border: 1px dashed #ef4444;
    border-radius: 7px;
    color: #ef4444;
    font-size: 0.74rem;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.remind-clear-row:hover {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.08);
    border-color: #dc2626;
}
/* body 底部：提前分钟滑块（虚线分隔线上方） */
.remind-lead-section {
    border-top: 1px dashed var(--color-border);
    margin-top: 8px;
    padding: 10px 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.remind-lead-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.remind-lead-row i {
    color: var(--theme-primary);
    font-size: 0.95rem;
}
.remind-lead-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
.remind-lead-range {
    flex: 1;
    accent-color: var(--theme-primary);
    height: 4px;
    cursor: pointer;
}
.remind-lead-value {
    min-width: 16px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-primary);
    font-variant-numeric: tabular-nums;
}
.remind-lead-unit {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
/* --- 提醒开关行（三列与虚线之间：开启/暂停今日提醒） --- */
.remind-status-section {
    margin-top: 8px;
    flex-shrink: 0;
}
.remind-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.remind-status-icon {
    color: var(--theme-primary);
    font-size: 0.9rem;
}
.remind-status-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
.remind-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    margin: 0 4px;
    flex-shrink: 0;
    cursor: pointer;
}
.remind-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.remind-switch-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 18px;
    transition: background 0.25s ease;
}
.remind-switch-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease;
}
.remind-switch input:checked + .remind-switch-slider {
    background: var(--theme-primary);
}
.remind-switch input:checked + .remind-switch-slider::before {
    transform: translateX(16px);
}
.remind-switch input:focus-visible + .remind-switch-slider {
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.25);
}
.remind-status-text {
    font-size: 0.8rem;
    color: var(--theme-primary);
}
.remind-status-text.remind-status-off {
    color: var(--color-text-secondary);
}
/* footer：只保留取消/保存按钮 */
.remind-setup-footer {
    flex-shrink: 0;
    border-top: 1px dashed var(--color-border);
    padding-top: 10px;
    margin-top: 0;
    display: flex;
    justify-content: flex-end;
}
.remind-footer-btns {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.remind-btn {
    height: 36px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.remind-btn-cancel {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}
.remind-btn-cancel:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}
.remind-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    color: #fff;
}
.remind-btn-save:hover {
    background: var(--theme-primary-dark);
    border-color: var(--theme-primary-dark);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.3);
}
/* 保存成功提示层级 */
#remind-saved-toast {
    z-index: 100004;
}

/* ==========================================================================
   数据库课程 · 撰写规范组件（design.md §1.3 / §1.4 / §4.1 附录 B）
   新增于 2026-08-26 · 1.1 首节落地
   --------------------------------------------------------------------------
   组件：.dialogue-scene 对话场景 / .io-table 输入输出表 / figcaption 图注
   规则：全部使用设计令牌，禁止裸色值；深色模式由 dark-mode.css 自动接管。
   ========================================================================== */

/* ---- 对话场景（隔间对话）---- */
.dialogue-scene {
    background: var(--color-bg-muted);
    border-left: 4px solid var(--theme-primary);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin: 0 0 16px 0;
}

.dialogue-scene .scene-tag {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.dialogue-line {
    margin-bottom: 8px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}

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

/* speaker 浮动：让长文本换行后从 speaker 右边开始（即和第一行文字左边缘对齐）
   解决「inline-block + 长文本换行后回到块容器左边缘」的徽章位置错位问题。
   ⚠️ 不能用 display: flex —— 容器内若含 <strong>/<code> 等元素会被当成独立 flex item，
   把文字切成多个竖排小块。float 保留 inline 流，文字连续不断。*/
.dialogue-line::after {
    content: '';
    display: block;
    clear: left;
}

.dialogue-speaker {
    float: left;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    height: 1.5rem;
    padding: 0 8px;
    margin: calc((1.615rem - 1.5rem) / 2) 8px calc((1.615rem - 1.5rem) / 2) 0;
    border-radius: 4px;
    line-height: 1;
    background: var(--color-warning-bg-hover);
    color: var(--color-warning-text);
}

/* 学生角色：小创 */
.dialogue-speaker.role-user,
.dialogue-speaker.m {
    background: var(--color-warning-bg-hover);
    color: var(--color-warning-text);
}

/* AI 助手：小智 */
.dialogue-speaker.role-ai,
.dialogue-speaker.k {
    background: var(--theme-primary-bg-hover);
    color: var(--theme-primary-darker);
}

/* ---- I/O 表（每章输入 / 输出）---- */
.io-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 var(--section-gap) 0;
}

.io-item {
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--theme-primary);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    background: var(--color-bg-muted);
}

/* 输入栏（左侧）用 warning 色上边框，输出栏（右侧）保持主题色 */
.io-item:first-child {
    border-top-color: var(--color-warning);
}

.io-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
    background: rgba(var(--color-warning-rgb), 0.12);
    color: var(--color-warning);
}

.io-tag.io-out {
    background: rgba(var(--color-success-rgb), 0.12);
    color: var(--color-success);
}

.io-item ul {
    margin: 0;
    padding-left: 18px;
}

.io-item li {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

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

/* ---- 插图图注（design.md §4.1 标注 / 图注层级）---- */
figure {
    margin: 0 0 8px 0;
}

figcaption.figure-caption {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    text-align: center;
    /* 间距对齐 §7.2 站点令牌：
       - mt 12：距上方 SVG 留 12px 阅读呼吸感（介于 heading-gap 20 与 section-gap 15 之间）；
       - mb 0：避免与下方 figure 的 mb(section-gap=15) 形成双 margin 重叠；
         实际"图注→下一段"间距由外层 figure 的 mb=15 接管（见 §7.3.5 figcaption 间距块）。
       之前 mt 8 / mb 0 既不与上齐，也偏离了"距上呼吸"的设计意图。 */
    margin-top: 12px;
    margin-bottom: 0;
}

/* 小屏下 I/O 表改为单列 */
@media (max-width: 768px) {
    .io-table {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   数据库课程 · 1.1 页面美化组件（design.md §8 模板 v1.1）
   新增于 2026-08-26 · 用户反馈「其它内容太差，认真美化」后追加
   --------------------------------------------------------------------------
   组件：.key-takeaway 金句卡 / .analogy-grid 类比卡片 / .data-card-grid
         业务数据卡 / .code-block-wrapper 代码块标题栏 / .content-table
         thead 主题色 / .cmp-dim .cmp-excel .cmp-db 对比表列语义
   规则：全部使用设计令牌，禁止裸色值；深色模式由 dark-mode.css 自动接管。
   ========================================================================== */

/* ---- 金句卡片（关键结论强调）---- */
.key-takeaway {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--theme-primary-bg) 0%, var(--theme-accent-bg) 100%);
    border-left: 4px solid var(--theme-primary);
    border-radius: var(--radius-md);
    padding: 10px 16px;                       /* v1.2.2：紧凑化（一行文本 ~44px，对齐 SA alert 视觉） */
    margin: 0 0 var(--section-gap) 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--color-text-primary);
}

.key-takeaway i {
    color: var(--theme-primary);
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* ---- 类比卡片（生活场景类比，等宽 3 格）---- */
.analogy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 var(--section-gap) 0;
}

.analogy-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {
    .analogy-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .analogy-grid--4 {
        grid-template-columns: 1fr;
    }
}

.analogy-card {
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 14px;
    text-align: center;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.analogy-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.analogy-card i {
    font-size: 1.5rem;
    color: var(--theme-primary);
    margin-bottom: 8px;
    display: block;
}

.analogy-card .analogy-term {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.analogy-card .analogy-life {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ---- 业务数据卡片（电商项目核心数据预告）---- */
.data-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0 0 var(--section-gap) 0;
}

/* 两列变体：容器内仅有两张卡片时平分宽度 */
.data-card-grid--two {
    grid-template-columns: repeat(2, 1fr);
}

/* 三列变体：容器内仅有三张卡片时平分宽度 */
.data-card-grid--three {
    grid-template-columns: repeat(3, 1fr);
}

/* 五列变体：容器内有五张卡片时一行显示 */
.data-card-grid--five {
    grid-template-columns: repeat(5, 1fr);
}

.data-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--theme-primary);
    border-radius: var(--radius-md);
    padding: 16px 14px;
    text-align: center;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.data-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.data-card i {
    font-size: 1.5rem;
    color: var(--theme-primary);
}

.data-card .data-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 6px 0 4px;
}

.data-card code {
    font-size: 0.75rem;
    color: var(--theme-primary-darker);
    background: var(--theme-primary-bg);
    padding: 1px 6px;
    border-radius: 4px;
}

.data-card .data-card-example {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: 6px;
}

/* ---- 横向里程碑时间线（1.2.1 MySQL 历史 6 节点，与 .data-card 同风格家族）---- */
.timeline-milestones {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 24px;
    margin: 0 0 var(--section-gap) 0;
}

.timeline-milestones .ms-card {
    flex: 1 1 0;
    min-width: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--theme-primary);
    border-radius: var(--radius-md);
    padding: 14px 10px 12px;
    text-align: center;
    position: relative;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 卡间递进箭头（›）：除最后一张外，absolute 浮在 gap 中间 */
.timeline-milestones .ms-card:not(:last-child)::after {
    content: '\203A';
    position: absolute;
    right: -19px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-primary);
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 700;
    opacity: 0.55;
    pointer-events: none;
}

.timeline-milestones .ms-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.timeline-milestones .ms-icon {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--theme-primary);
    margin-bottom: 7px;
}

.timeline-milestones .ms-year {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
    margin-bottom: 6px;
}

.timeline-milestones .ms-year em {
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--theme-primary);
    margin-left: 2px;
}

.timeline-milestones .ms-point {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.45;
    margin-bottom: 5px;
}

.timeline-milestones .ms-note {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* 当前节点高亮：accent 顶边 + 主题色年份 */
.timeline-milestones .ms-current {
    border-top-color: var(--theme-accent);
    background: rgba(45, 180, 138, 0.06);
}

.timeline-milestones .ms-current .ms-year {
    color: var(--theme-primary);
}

/* 深色下当前节点高亮加深一档 */
[data-mode="dark"] .timeline-milestones .ms-current {
    background: rgba(52, 211, 153, 0.10);
}

/* ---- 代码块标题栏（SQL 预览等）---- */
.code-block-wrapper {
    margin: 0 0 var(--section-gap) 0;
    border: 1px solid var(--color-text-primary);   /* 与 .code-block 背景同色：上下两色块融合成一个组件（浅色 #1e293b） */
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* 深色下 .code-block 背景被共享 dark-mode.css 覆盖为 --color-bg-base，边框跟随，避免浅色框分割上下色块 */
[data-mode="dark"] .code-block-wrapper {
    border-color: var(--color-bg-base);
}

.code-block-wrapper .code-block-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.code-block-wrapper .code-block-header i {
    color: var(--theme-primary);
}

.code-block-wrapper .code-block {
    border-radius: 0;
    margin: 0;
    padding: 14px;                      /* 与 header 一致：上下同色块厚度，水平与标题栏 padding 对齐 */
}

/* ---- 表格美化：表头统一（底色 / 字号 / 字重 / 下边框） ---- */
.content-table thead th {
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.94em;
    text-align: left;
    border-bottom: 2px solid var(--theme-primary);
}

.content-table .cmp-dim {
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.content-table .cmp-excel {
    color: var(--color-text-secondary);
}

.content-table .cmp-db {
    color: var(--color-text-primary);
}

/* ---- 响应式：小屏降级 ---- */
@media (max-width: 768px) {
    .analogy-grid {
        grid-template-columns: 1fr;
    }

    .data-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .reason-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   数据库课程 · 组件间距统一令牌（design.md §9 组件节奏 v1.2）
   新增于 2026-08-27 · 用户反馈「组件之间使用固定的高度间隔，必须统一」
   2026-08-27 二次定值：全站组件行间距统一 15px（仅本课程，不影响其它课程）
   --------------------------------------------------------------------------
   规则：
   1. --section-gap = 15px，为数据库课程所有网页「组件级盒子之间」的唯一
      垂直间距令牌；
   2. 组件底部统一 15px；小节标题 content-subtitle 上下均 15px；正文
      content-text 段间 15px —— 零历史孤岛，禁止裸值 margin；
   3. 新增组件：.scene-quote 项目现场引述卡 / .definition-card 定义卡；
   4. 全部使用设计令牌，禁止裸色值；深色模式由 dark-mode.css 自动接管。
   ========================================================================== */

:root {
    --section-gap: 15px;      /* 组件级盒子之间的「组件 → 组件」间距 */
    --heading-gap: 20px;      /* 标题（H2 / H3）距前一个组件的间距 */
}

/* ---- 组件级盒子：底部统一 --section-gap ---- */
.dialogue-scene,
.learning-objectives,
.io-table,
.key-takeaway,
.analogy-grid,
.definition-grid,
.data-card-grid,
.reason-grid,
.code-block-wrapper,
.content-table,
.scene-quote,
.definition-card,
.alert-compact,
.text-center,
.horizontal-stepper,
.command-fallback {
    margin-bottom: var(--section-gap);
}

.alert.alert-compact {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ---- 小节标题：mt 用 --heading-gap（兼容 660 / 668 处基础定义；v1.2.2 起即生效） ---- */
/* 已合并到 660 / 668 行 .content-title / .content-subtitle 主定义块，本规则块保留注释待下一轮清理 */

/* ---- 正文段落：段间同样 --section-gap ---- */
.content-text {
    margin-bottom: var(--section-gap);
}

/* ---- 插图：底部统一 --section-gap，图注不再额外加距 ---- */
figure {
    margin-bottom: var(--section-gap);
}

figcaption.figure-caption {
    margin-bottom: 0;
}

/* ---- 项目现场引述卡（场景痛点一句话，替代平铺段落）---- */
.scene-quote {
    background: var(--color-bg-muted);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: 14px 18px;
}

.scene-quote-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-warning);
    margin-bottom: 6px;
}

.scene-quote-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}

/* ---- 设计说明卡（章节间前后呼应 / 设计取舍说明，主题薄荷边）----
   设计点：
   - 与 .scene-quote 同结构（4px 左边条 + 圆角 + tag + body），色条改主题薄荷
     区分「声音引述」（warning）与「设计说明 / 章节衔接」（theme primary）
   - 背景走与 .key-takeaway 同款主题渐变，深色下由 token 自动接管
   - 内部 code 覆盖 Bootstrap 默认粉红 #d63384，统一主题薄荷（沿用 .reason-card-body code 配方）*/
.design-note {
    background: linear-gradient(135deg, var(--theme-primary-bg) 0%, var(--theme-accent-bg) 100%);
    border-left: 4px solid var(--theme-primary);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin: 0 0 var(--section-gap) 0;
}

.design-note-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--theme-primary);
    margin-bottom: 4px;
}

.design-note-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}

/* 覆盖 Bootstrap 默认粉红 code 色（--bs-code-color: #d63384），与主题薄荷统一 */
.design-note code {
    color: var(--theme-primary-darker);
    background: var(--theme-primary-bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ---- 定义卡（核心概念定义 + 关键词胶囊）---- */
.definition-card {
    background: linear-gradient(135deg, var(--theme-primary-bg) 0%, var(--theme-accent-bg) 100%);
    border: 1px solid var(--theme-accent-bg);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.definition-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    margin-bottom: 8px;
}

.definition-title i {
    color: var(--theme-primary);
}

.definition-main {
    margin: 0 0 10px 0;
    font-size: 1.05rem;                                     /* v1.2.6：1.12rem 与 H3(1.2rem) 同档过重，降一档；仍大于正文 1rem 保留强调 */
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text-primary);
}

.definition-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 横排紧凑变体（4 tag 单行排列场景）：
   - 收紧 padding / gap 让 4 tag 放得下
   - white-space:nowrap 防止 tag 自身再折行（文字精简到 ≤8 字后绝对装得下） */
.definition-tags--flush {
    gap: 6px;
}

.definition-tags--flush .def-tag {
    padding: 2px 9px;
    font-size: 0.76rem;
    white-space: nowrap;
}

.def-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--theme-primary-darker);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 3px 12px;
}

/* ---- 双联理由卡（1.2.6「选什么 / 为什么」两段式节奏，承接 .data-card-grid 之后）----
   设计点：
   - 左色条（区别于 .data-card 的顶部色条） + 左对齐横排（区别于 .data-card 居中），
     让上方 4 张选型卡的「选什么」与本卡「为什么」视觉节奏递进而非雷同
   - icon 用主题色 chip 圆角方块，强化与 .definition-card 同色系家族
   - 文本用 --color-text-primary / --color-text-muted，code 用 --theme-primary 胶囊
     全部走 design token，深色模式由 dark-mode.css 自动接管 */
.reason-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--section-gap);
}

/* 三列变体：容器内仅有三张卡片时平分宽度（命名与 .data-card-grid--three 对齐） */
.reason-grid--three {
    grid-template-columns: repeat(3, 1fr);
}

.reason-card {
    background: var(--color-bg-muted);
    border-left: 3px solid var(--theme-primary);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.reason-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.reason-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.reason-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--theme-primary-bg);
    color: var(--theme-primary-darker);
    font-size: 1rem;
}

.reason-card-tag {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    letter-spacing: 0.2px;
}

.reason-card-body {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}

.reason-card-body code {
    font-size: 0.78rem;
    color: var(--theme-primary-darker);
    background: var(--theme-primary-bg);
    padding: 1px 6px;
    border-radius: 4px;
}

/* ---- 定义卡组合容器（3 列等宽，用于 1.1.3 三件套并列）---- */
.definition-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.definition-grid .definition-card {
    margin-bottom: 0;   /* 由 .definition-grid 容器统一管理底部间距 */
}

/* 两张卡时的平分布局（不改基础列数，作用范围靠 --two 修饰类精准） */
.definition-grid--two {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 992px) {
    .definition-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ============================================================================
 * v1.2.3 · 1.1.2 「users 表结构 vs 表数据」双表对照组件
 * 复用 1.1.1 对比表的 .content-table + .table.table-bordered 风格
 * 但去掉 hover 高亮（结构图静态展示，不需要交互）
 * 字段列加 .col-pk 主题色浅底 + .row-comment 注释行 + .row-empty 空数据区
 * ============================================================================ */
.db-table-pair {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 0;                          /* v1.2.7：删掉表下方 caption 文本后，间距由下方 key-takeaway 的 15px 主导 */
}

.db-table-half {
    flex: 1 1 0;
    min-width: 0;
}

.db-table-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 0 12px 0;
    padding-top: 0;
    line-height: 1.4;
}

.db-demo-table {
    width: 100%;
    table-layout: fixed;
    font-size: 12px;
    margin-bottom: 0;
}

.db-demo-table th,
.db-demo-table td {
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid var(--color-border);
    word-break: keep-all;
    overflow-wrap: normal;
    line-height: 1.4;
}

.db-demo-table thead th {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
    font-weight: 600;
}

.db-demo-table thead th.col-pk {
    background-color: var(--theme-primary-bg-hover);
    color: var(--color-text-primary);
}

.db-demo-table tbody tr.row-comment td {
    color: var(--color-text-secondary);
    background-color: var(--color-bg-page);
    font-weight: 500;
}

.db-demo-table tbody tr.row-empty td {
    padding: 62px 8px;                    /* 撑高至与右表 4 行总高（约 140px）一致：62×2 + 行高 16.8 ≈ 140.8 */
    color: var(--color-text-secondary);
    background-color: var(--color-bg-page);
    font-weight: 500;
}

/* 1.1.2 users 表 password_hash 长哈希单行省略（剩余空间全给此列，hover 时通过 title 看全文） */
.db-demo-table td.cell-hash {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;                   /* 配合 table-layout:fixed，让 colgroup 真正限制宽度 */
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
    text-align: left;
    padding-left: 8px;
    padding-right: 8px;
    cursor: pointer;                /* 提示可悬停查看全文（避免 cursor:help 在 macOS 渲染 "?" 图标） */
}

/* ============================================================================
 * v1.2.8 · 1.4 「电商项目概述」新组件（2026-08-27）
 * 组件：.project-profile 项目名片卡 / .roadmap-track 十四章路线图时间线
 * 规则：全部使用设计令牌，禁止裸色值；深色模式由 dark-mode.css 自动接管。
 * ============================================================================ */

/* ---- 项目名片卡（档案式：左侧 logo 区 + 右侧属性行，虚线分隔）---- */
.project-profile {
    display: grid;
    grid-template-columns: 152px 1fr;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: 0 0 var(--section-gap) 0;
    overflow: hidden;
}

.project-profile .pp-logo {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;   /* 严格三等分垂直空间 */
    align-items: center;
    justify-items: center;
    padding: 6px 10px;
    color: #fff;                     /* 彩色渐变上的白字（同 .scenario-badge 先例） */
}

.project-profile .pp-logo i {
    font-size: 2.1rem;
    line-height: 1;
}

.project-profile .pp-logo .pp-name {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.project-profile .pp-logo .pp-sub {
    font-size: 0.72rem;
    opacity: 0.92;
    text-align: center;
    line-height: 1.35;
}
.project-profile .pp-logo .pp-sub > div + div {
    margin-top: 1px;                 /* 副标题两行紧贴，整体仍作为一块参与三等分 */
}

.project-profile .pp-rows {
    padding: 4px 0;
}

.project-profile .pp-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 18px;
}

.project-profile .pp-row + .pp-row {
    border-top: 1px dashed var(--color-border);
}

.project-profile .pp-key {
    flex-shrink: 0;
    width: 76px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.project-profile .pp-val {
    font-size: 0.88rem;
    color: var(--color-text-primary);
    line-height: 1.55;
}

.project-profile .pp-val code {
    font-size: 0.78rem;
    color: var(--theme-primary-darker);
    background: var(--theme-primary-bg);
    padding: 1px 6px;
    border-radius: 4px;
}

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

    .project-profile .pp-logo {
        display: flex;                /* 窄屏：横排一行（图标 + 名称 + 副标题两行） */
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }

    .project-profile .pp-logo i {
        font-size: 1.6rem;
    }

    .project-profile .pp-logo .pp-sub {
        text-align: left;
        line-height: 1.3;
    }
    .project-profile .pp-logo .pp-sub > div + div {
        margin-top: 0;                /* 窄屏去掉副标题行间额外间距 */
    }
}

/* ---- 十四章路线图（三层解耦：rail 虚线 + dot 圆点 + stage 文本）----
   - .rm-rail     贯穿所有行的虚线（独立 absolute 层）
   - .rm-row      每行 grid(28px 1fr)，圆点列 + 文本列严格对齐
   - .rm-dot      独立空心圆，width/border/left 可自由调
   - .roadmap-stage  内容卡片；hover 只动它，圆点+虚线纹丝不动 */
.roadmap-track {
    position: relative;
    margin: 0 0 var(--section-gap) 0;
    /* 不需要 padding-left；grid 已经预留了 28px 圆点列 */
}

/* 虚线层 —— 贯穿所有行的竖向虚线（独立 absolute） */
.rm-rail {
    position: absolute;
    /* 圆点列宽 28px，column-gap 12px，圆点列中心 = 14px */
    left: 13px;        /* 2px 宽虚线左移 1px 让中心对齐 14 */
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: repeating-linear-gradient(180deg,
            var(--theme-primary) 0 6px,
            transparent 6px 12px);
    opacity: 0.45;
    z-index: 1;
    pointer-events: none;
}

/* 每行 — grid 二列：28px 圆点列 + 1fr 文本列 */
.rm-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 12px;
    align-items: start;
    margin-bottom: 12px;
}

.rm-row:last-child {
    margin-bottom: 0;
}

/* 圆点 —— 独立元素，width/border 可单独调节（细一点好对齐） */
.rm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-bg-surface);
    border: 1.5px solid var(--theme-primary);   /* 细一些便于调 */
    justify-self: center;                       /* 自动水平居中于 28px 列 */
    align-self: start;
    margin-top: 18px;                           /* 与 stage 标题视觉对齐 */
    z-index: 2;
    transition: border-width 0.2s ease, box-shadow 0.2s ease;
}

/* hover stage 时，圆点也轻微高亮（视觉呼应，但位置不变） */
.rm-row:has(.roadmap-stage:hover) .rm-dot {
    border-width: 2.5px;
}

/* 文本卡片 —— hover 时仅纵向位移，不影响圆点+虚线 */
.roadmap-stage {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 16px 11px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s ease;
}

.roadmap-stage:hover {
    transform: translateY(-3px);
    border-color: var(--theme-primary-border, var(--theme-primary));
    box-shadow: 0 6px 14px rgba(52, 211, 153, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.roadmap-stage .rm-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 7px;
}

.roadmap-stage .rm-no {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    padding: 2px 10px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.roadmap-stage .rm-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.roadmap-stage .rm-title i {
    color: var(--theme-primary);
    font-size: 0.95rem;
    margin-right: 4px;
}

.roadmap-stage .rm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 7px;
}

.roadmap-stage .rm-chip {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--theme-primary-darker);
    background: var(--theme-primary-bg);
    border: 1px solid var(--theme-primary-border, var(--color-border));
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.roadmap-stage .rm-chip code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    padding: 0;
}

.roadmap-stage .rm-desc {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin-bottom: 0;
}

/* ---- 一单生意的旅程 · 横向 6 站分步展示（仿 P01 StepFlow 视觉，2026-08-27）---- */
/* 设计要点：
 * - 视觉结构与课程现有 image#3（紫色分步展示）一致：顶部圆号 → 标题 → 描述 → 底部小字
 * - 配色沿用 1.4 主题绿（var(--theme-primary)），随深浅模式自动切换
 * - 卡片之间用箭头相连，强调"顺序"语义，避免边框贴边被裁切的疑问 */
.journey-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 var(--section-gap) 0;
    padding: 6px 4px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.journey-flow.in-view {
    opacity: 1;
    transform: translateY(0);
}

.journey-flow .jf-step {
    flex: 1 1 0;
    background: var(--color-bg-surface);
    border: 1.5px solid var(--theme-primary);
    border-radius: var(--radius-md);
    padding: 14px 10px 12px;
    margin: 0;                       /* 取消左右 6px：让连接线紧贴卡片边框 */
    text-align: center;
    position: relative;
}

/* 编号：取消外围阴影（避免与暗色 surface 混淆成"白圈"），放大数字 */
.journey-flow .jf-step .jf-no {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--theme-primary);
    color: #fff;
    font-size: 1.05rem;               /* 0.78 → 1.05rem，更醒目 */
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    box-shadow: none;                 /* 取消 box-shadow：暗色下不再有"白圈"视感 */
}

.journey-flow .jf-step .jf-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.journey-flow .jf-step .jf-desc {
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin-bottom: 8px;
    min-height: 2.2em;       /* 防止"5 个字"和"8 个字"两种描述把卡片撑得参差 */
}

.journey-flow .jf-step .jf-table {
    display: inline-block;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    background: var(--theme-primary-bg);
    border: 1px dashed var(--theme-primary);
    padding: 1px 8px;
    border-radius: 4px;
    line-height: 1.4;
}

.journey-flow .jf-arrow {
    flex: 0 0 56px;                   /* 22 → 56px：拉长箭头，让连接线贯穿卡片间隙 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-primary);
    font-size: 1.55rem;
    font-weight: 700;
    user-select: none;
    line-height: 1;
    position: relative;
    text-indent: 0;
    margin: 0;
}

/* 水平连接线：从左侧卡片边缘贯穿到右侧卡片边缘的箭头尾巴 */
.journey-flow .jf-arrow::before {
    content: '';
    position: absolute;
    left: 0;
    right: 32px;                      /* 给 → 字符留 32px 位（28px 字宽 + 4px 间距） */
    top: 50%;
    height: 1.5px;                    /* 1.5px 暗色下仍清晰可见（之前 0.7 不够） */
    background: var(--theme-primary);
    transform: translateY(-0.75px);
}

@media (max-width: 900px) {
    .journey-flow {
        flex-wrap: wrap;
        gap: 10px;
    }
    .journey-flow .jf-arrow {
        display: none;
    }
    .journey-flow .jf-step {
        flex: 1 1 calc(50% - 12px);
        margin: 0;
    }
}

@media (max-width: 540px) {
    .journey-flow .jf-step {
        flex: 1 1 100%;
    }
}

/* ====== 1.5 业务需求抽屉（Bootstrap accordion 主题化 + 深色适配） ====== */
.req-accordion {
    --bs-accordion-border-color: var(--color-border);
    --bs-accordion-color: var(--color-text-primary);
    --bs-accordion-bg: var(--color-bg-surface);
    --bs-accordion-btn-color: var(--color-text-primary);
    --bs-accordion-btn-bg: var(--color-bg-surface);
    --bs-accordion-active-color: var(--theme-primary-darker);
    --bs-accordion-active-bg: var(--theme-primary-bg);
    --bs-accordion-btn-focus-border-color: var(--theme-primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.18);
    /* 箭头用主题薄荷色（默认 #212529 在深色下看不见，必须覆盖） */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232db48a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232db48a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    margin-bottom: var(--section-gap);
}
.req-accordion .accordion-item {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
}
/* 展开时：整张卡片 1px 主题色边框包裹（点击/键盘展开都生效）
   两条规则并列：.is-expanding 在 show.bs.collapse 瞬间加上（与 height 同步启动），
   :has(.show) 作为兜底（Bootstrap transition 结束后 .show 加上仍能匹配） */
.req-accordion .accordion-item:has(> .accordion-collapse.show),
.req-accordion .accordion-item.is-expanding {
    border-color: var(--theme-primary);
}
/* 展开 item 的上一项 border-bottom 也同步换色：
   Bootstrap 默认让相邻 item 的 border-top=0（去双线），实际两个 item 之间
   只显示「上一项 border-bottom + 下一项 border-top(0)」，所以上一项的
   border-bottom 也必须跟着主题色，才能形成完整绿线 */
.req-accordion .accordion-item:has(+ .accordion-item > .accordion-collapse.show),
.req-accordion .accordion-item:has(+ .accordion-item.is-expanding) {
    border-bottom-color: var(--theme-primary);
}
.req-accordion .accordion-button {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px 16px;
    border: 0; /* 按钮自身不带边框，视觉由 item 外框统一负责 */
    box-shadow: none;
}
.req-accordion .accordion-button:not(.collapsed) {
    background: var(--theme-primary-bg);
    color: var(--theme-primary-darker);
}
/* 折叠态键盘 Tab 聚焦（仅键盘不触发点击）：按钮上/左/右 1px 主题色描边，无下边框 */
.req-accordion .accordion-button:focus-visible {
    outline: none;
    box-shadow: inset 0 1px 0 var(--theme-primary), inset 1px 0 0 var(--theme-primary), inset -1px 0 0 var(--theme-primary);
}
/* 展开态键盘聚焦：不重复描边（item 外框已标识，避免双线） */
.req-accordion .accordion-item:has(> .accordion-collapse.show) .accordion-button:focus-visible {
    box-shadow: none;
}
.req-accordion .accordion-body {
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    padding: 14px 16px 16px;
}

/* 深色下：accordion 背景/边框/箭头随 token 接管 */
[data-mode="dark"] .req-accordion {
    --bs-accordion-color: var(--color-text-primary);
    --bs-accordion-bg: var(--color-bg-surface);
    --bs-accordion-btn-color: var(--color-text-primary);
    --bs-accordion-btn-bg: var(--color-bg-surface);
    --bs-accordion-active-color: var(--theme-primary);
    --bs-accordion-active-bg: rgba(52, 211, 153, 0.12);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2334d399'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2334d399'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-mode="dark"] .req-accordion .accordion-item {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
}
[data-mode="dark"] .req-accordion .accordion-button {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}
[data-mode="dark"] .req-accordion .accordion-button:not(.collapsed) {
    background: rgba(52, 211, 153, 0.12);
    color: var(--theme-primary);
}
[data-mode="dark"] .req-accordion .accordion-body {
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
}

/* ====== 1.5 需求映射标签（主题色胶囊 badge） ====== */
.req-badge {
    background: var(--theme-primary-bg);
    color: var(--theme-primary-darker);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    padding: 0.28em 0.7em;
}
.req-badge-2 {
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
}
[data-mode="dark"] .req-badge {
    background: rgba(52, 211, 153, 0.16);
    color: var(--theme-primary);
}
[data-mode="dark"] .req-badge-2 {
    background: rgba(148, 163, 184, 0.16);
    color: var(--color-text-secondary);
}

/* ====== 1.5 实战清单（list-group 主题化） ====== */
.req-list {
    margin-bottom: var(--section-gap);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.req-list .list-group-item {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
    padding: 11px 16px;
    font-size: 0.92rem;
}
[data-mode="dark"] .req-list .list-group-item {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

/* ===== 外部链接样式（Database 永久规则，2026-08-28 立 · 仅外部链接） =====
   硬规则：本段【只作用于外部链接】（href 以 http 开头），
   【内部锚点】（href="#..." 或站内相对路径）完全不动，保持各自原有样式。
   - 外部链接一律无下划线（任何状态）
   - 文本段内裸外部文字链（trae.cn 等）：蓝色 #1d4ed8 提示，
     hover/focus 切主题绿 var(--theme-primary)，visited #6b21a8
   - 卡片类外部链接（.site-entry 等）已有自身样式，本规则仅补「无下划线」底线
   - HTML 中所有外链必须 target="_blank" rel="noopener"（已抽样 6/6 合规）
   ============================================================ */

/* 外部链接一律无下划线：覆盖面含带 class 的卡片链接，不影响其内部文字色 */
.main-content a[href^="http"],
.main-content a[href^="http"]:visited,
.main-content a[href^="http"]:hover,
.main-content a[href^="http"]:focus,
.main-content a[href^="http"]:active {
    text-decoration: none;
}

/* 文本段内的裸外部文字链（无 class）：蓝色提示 + hover 切主题绿 */
.main-content p > a[href^="http"]:not([class]),
.main-content li > a[href^="http"]:not([class]) {
    color: #1d4ed8;
}
.main-content p > a[href^="http"]:not([class]):hover,
.main-content li > a[href^="http"]:not([class]):hover,
.main-content p > a[href^="http"]:not([class]):focus-visible,
.main-content li > a[href^="http"]:not([class]):focus-visible {
    color: var(--theme-primary);
}
/* 访问过的外部链：温和紫，区分未访 */
.main-content p > a[href^="http"]:not([class]):visited,
.main-content li > a[href^="http"]:not([class]):visited {
    color: #6b21a8;
}

/* 注：内部资源链接 .resource-link（学习资源页）的 hover 下划线保持原有样式，
   本规则不覆盖内部链接。 */

/* ===== 2.1 官网 / 文档 入口卡片（link card） ===== */
.site-entry-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 0 var(--section-gap);  /* v1.2.6 弃 14px 顶距改走令牌：grid BFC 不折叠，
                                        旧设 mt:14 与 H3 mb:15 实算 29px 偏宽，现归零 + --section-gap */
}
@media (max-width: 576px) {
    .site-entry-row { grid-template-columns: 1fr; }
}
.site-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-surface);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.site-entry:hover {
    border-color: var(--theme-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.site-entry:focus-visible {
    outline: 1px solid var(--theme-primary);
    outline-offset: 2px;
}
.site-entry-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--theme-primary-bg);
    color: var(--theme-primary);
    font-size: 1.35rem;
}
.site-entry-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.site-entry-title {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.site-entry-title .bi-box-arrow-up-right {
    font-size: .78rem;
    color: var(--color-text-secondary);
}
.site-entry-desc {
    font-size: .82rem;
    color: var(--color-text-secondary);
    margin-top: 3px;
    line-height: 1.45;
}
.site-entry-url {
    font-size: .76rem;
    color: var(--theme-primary);
    margin-top: 4px;
    word-break: break-all;
}

/* === 横向步骤条：4 格流程可视化（沿用 SA .horizontal-stepper 风格，Database 主题色统一） v1.2.7 === */
.horizontal-stepper {
    display: flex;
    gap: 14px;
    margin-bottom: var(--section-gap);
    overflow-x: auto;
    padding-top: 24px;
    padding-bottom: 4px;
}

.horizontal-stepper::-webkit-scrollbar {
    height: 4px;
}

.horizontal-stepper::-webkit-scrollbar-thumb {
    background-color: var(--color-border-hover);
    border-radius: 2px;
}

.stepper-item {
    flex: 1 1 0;
    min-width: 160px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 24px 12px 14px;
    position: relative;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
}

.stepper-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 8px 16px rgba(0, 0, 0, .05), 0 8px 20px rgba(var(--theme-primary-rgb), .1);
}

.stepper-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    z-index: 2;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
}

/* 4 个 badge 统一主题绿渐变（Database 暗色约束：仅黑/白/绿+警示四色） */
.stepper-item:nth-child(1) .stepper-badge,
.stepper-item:nth-child(2) .stepper-badge,
.stepper-item:nth-child(3) .stepper-badge,
.stepper-item:nth-child(4) .stepper-badge,
.stepper-item:nth-child(5) .stepper-badge {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
}

.stepper-arrow {
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: .9rem;
    z-index: 2;
}

.stepper-item:last-child .stepper-arrow {
    display: none;
}

.stepper-content h6 {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.stepper-content p {
    font-size: .78rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin-bottom: 0;
}

.stepper-content code {
    font-size: .85em;
    padding: 1px 5px;
    background: var(--theme-primary-bg);
    color: var(--color-text-primary);
    border-radius: 4px;
}

@media (max-width: 768px) {
    .horizontal-stepper {
        gap: 10px;
    }
    .stepper-item {
        min-width: 140px;
        padding: 22px 10px 12px;
    }
}

/* === 命令备查折叠卡（details，2.2.3 起用到） v1.2.7 === */
.command-fallback {
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--color-bg-page);
    transition: border-color .2s;
}

.command-fallback[open] {
    border-color: var(--theme-primary);
    border-style: solid;
}

.command-fallback summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--theme-primary);
    font-size: .92rem;
    user-select: none;
    outline: none;
    list-style-position: inside;
}

.command-fallback summary::marker {
    color: var(--theme-primary);
}

.command-fallback summary > i {
    margin-right: 4px;
}

.command-fallback[open] summary {
    margin-bottom: 10px;
}

.command-fallback .code-block {
    margin-bottom: 0;
}

/* ==========================================================================
   3.2 · E-R 图组件（陈氏表示法 + 鸦脚表示法）
   --------------------------------------------------------------------------
   全部配色走设计令牌，亮/深模式自动跟随；
   图注文字写在 SVG 内部（不用 figcaption），与 1.3 / 1.4 保持一致。
   ========================================================================== */
.er-chen-svg,
.er-crow-svg {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 陈氏符号图例 —— 10 个独立 SVG 一行均分 */
.chen-symbols-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    margin-bottom: var(--section-gap);
}

.chen-symbols-grid figure {
    margin: 0;
    display: block;
}

.chen-symbols-grid svg.er-chen-svg {
    max-width: none;
    width: 100%;
    height: auto;
}

@media (max-width: 992px) {
    .chen-symbols-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 576px) {
    .chen-symbols-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 陈氏三联局部图（3.3.1 分而治之：用户 / 商品 / 交易三张局部 E-R 图）
   —— 三个独立 SVG 一行等分页面宽度，与 .crow-trio 保持同一套几何 */
.chen-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: var(--section-gap);
    align-items: stretch;
}

.chen-trio > figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chen-trio > figure > svg {
    /* 覆盖 .er-chen-svg 的 max-width:760px，否则三列等分失效 */
    max-width: none;
    width: 100%;
    height: auto;
    display: block;
}

.chen-trio figcaption {
    /* 与 figcaption.figure-caption 保持同一标准：SVG 底部到图注 12px，图注本身无下间距 */
    text-align: center;
    margin-top: 12px;
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .chen-trio {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.er-chen-svg text,
.er-crow-svg text {
    fill: var(--color-text-primary);
}

/* 图例卡片 */
.er-chen-svg .er-card {
    fill: var(--color-bg-page);
    stroke: var(--color-border);
    stroke-width: 1;
}

/* 实体矩形 / 属性椭圆 / 弱实体外框 */
.er-chen-svg .er-shape {
    fill: none;
    stroke: var(--color-text-primary);
    stroke-width: 1.0;
}

/* 联系菱形 */
.er-chen-svg .er-rel {
    fill: var(--theme-primary-bg-strong);
    stroke: var(--theme-primary-dark);
    stroke-width: 1.0;
}

/* 双线菱形内层（弱实体联系）—— fill 用页面背景色撑出双线效果 */
.er-chen-svg .er-rel-inner {
    fill: var(--color-bg-page);
    stroke: var(--theme-primary-dark);
    stroke-width: 1.0;
}

/* 连线 */
.er-chen-svg .er-link,
.er-crow-svg .er-link {
    fill: none;
    stroke: var(--color-text-secondary);
    stroke-width: 1;
}

.er-chen-svg .er-dashed {
    stroke-width: 1.1;
    stroke-dasharray: 4 3;
}

/* 主属性下划线（陈氏椭圆内 / 鸦脚框内通用） */
.er-chen-svg .er-key,
.er-crow-svg .er-key {
    stroke: var(--color-text-primary);
    stroke-width: 1.1;
}

/* 文字层级（§7.3.2 四档：L1=13 / L2=10 / L3=8 / L4=6）
   —— 严格 weight 对齐：L1=600 / L2=600 / L3=400。
   —— 实体可以加粗（L1=600），联系/基数不加粗（L2=400）。
   —— 2026-08-30 14.31 反馈：实体名提升一级到 L1=13，与属性/联系拉开层级；
       联系名与特殊属性字统一提升到 L2=10，与常规属性同档。 */
.er-chen-svg .er-name {
    font-size: 10px;
    font-weight: 600;
}

.er-chen-svg .er-en {
    /* 实体英文名 = 正文档（与属性/联系名同档）；
       2026-08-31 统一：全站编号 ER 图基准对齐图 3-6（compact），正文档=8px。 */
    font-size: 8px;
    font-weight: 400;
    fill: var(--color-text-secondary);
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.er-chen-svg .er-attr {
    font-size: 10px;
    font-weight: 400;
}

.er-chen-svg .er-attr-sm {
    /* 多值/派生属性等特殊属性字 = L2 节点标题级，与常规属性 er-attr 同档 */
    font-size: 10px;
    font-weight: 400;
}

.er-chen-svg .er-rel-name {
    /* 联系名（陈氏菱形内）= 正文档；
       不加粗（400），用户明确要求"联系的字不要加粗"。
       2026-08-31 统一：全站编号 ER 图基准对齐图 3-6（compact），正文档=8px。 */
    font-size: 8px;
    font-weight: 400;
}

.er-chen-svg .er-cardinal {
    /* 基数（1/N/M）= L2 节点标题级；
       不加粗（400），与联系名同档统一 */
    font-size: 10px;
    font-weight: 400;
    fill: var(--theme-primary-darker);
}

/* ---- 3-3 compact 覆盖（2026-08-30 16:40 方案 B）----
   3.3 局部图（chen-trio，34px 实体矩形）+ 3.3 全局图（680×270，34px 实体矩形）
   实体矩形比 3.2 主图（46px）矮，全局 13/10/10 在 34px 矩形里占比过大。
   回退到 10/8/8；3.2 主图、图例卡、鸦脚图不受影响。 */
.er-chen-svg--compact .er-name {
    font-size: 10px;
    font-weight: 600;
}

.er-chen-svg--compact .er-en {
    font-size: 8px;
    font-weight: 400;
}

.er-chen-svg--compact .er-rel-name {
    font-size: 8px;
    font-weight: 400;
}

.er-chen-svg .er-legend-label {
    /* 图例卡标签（3-2 chen-symbols-grid 用）：按图例卡豁免规则，保留 L2=10 */
    font-size: 10px;
    font-weight: 600;
}

.er-chen-svg .er-section-label {
    /* 图标题 = 标题档 10/600（与实体名同基准），居中于 SVG 顶部；
       2026-08-31 统一：全站编号 ER 图标题档=10/600，与图 3-6 一致。 */
    font-size: 10px;
    font-weight: 600;
    fill: var(--theme-primary-darker);
}

.er-chen-svg--compact .er-section-label {
    /* 3.3 局部图/全局图顶部模块标题保持 L2 节点标题级，不被 3-4 提升覆盖 */
    font-size: 10px;
    font-weight: 600;
}

.er-chen-svg .er-caption,
.er-crow-svg .er-caption {
    /* SVG 内说明（①②③ 局部图注）= L3 描述级，从 9.5→8 对齐 §7.3.2 标准档 */
    font-size: 8px;
    fill: var(--color-text-secondary);
}

/* ===== 关系代数示意图（3.5 章 · .ra-svg）=====
   文氏图 / 选择投影 / 连接示意；颜色全走 token，深色由 CSS 自动接管。
   字号对齐 §7.3.2 四档：L1=13 / L2=10 / L3=8。 */
.ra-svg {
    width: 100%;
    max-width: 860px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.ra-svg text {
    fill: var(--color-text-primary);
}

/* 关系（表）名 = L1 主标题档 */
.ra-svg .ra-name {
    font-size: 13px;
    font-weight: 600;
    fill: var(--theme-primary-darker);
}

/* 英文表名 = L3 次级档 */
.ra-svg .ra-en {
    font-size: 8px;
    font-weight: 400;
    fill: var(--color-text-secondary);
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* 表内列名 / 数据 = L2 节点档 */
.ra-svg .ra-field {
    font-size: 10px;
    font-weight: 400;
    fill: var(--color-text-primary);
}

/* 关系矩形框（表） */
.ra-svg .ra-table {
    fill: var(--color-bg-page);
    stroke: var(--color-text-primary);
    stroke-width: 1.0;
}

/* 表头分隔线 / 行线 = 细线档 */
.ra-svg .ra-line {
    stroke: var(--color-border);
    stroke-width: 0.7;
}

/* 高亮行 / 列（选择、投影命中结果） */
.ra-svg .ra-hl {
    fill: var(--theme-primary-bg-strong);
}

/* 运算箭头 */
.ra-svg .ra-arrow {
    stroke: var(--theme-primary-dark);
    stroke-width: 1.0;
    fill: none;
}

/* 运算符号（σ / π / ⋈ / ∪ / ∩ / − / ×）= 大号强调 */
.ra-svg .ra-symbol {
    font-size: 16px;
    font-weight: 600;
    fill: var(--theme-primary-darker);
}

/* 符号名称标签 = L2 节点档 */
.ra-svg .ra-label {
    font-size: 10px;
    font-weight: 600;
    fill: var(--color-text-primary);
}

/* 次级说明 = L3 描述档 */
.ra-svg .ra-desc {
    font-size: 8px;
    font-weight: 400;
    fill: var(--color-text-secondary);
}

/* 文氏圆（集合） */
.ra-svg .ra-venn {
    fill: none;
    stroke: var(--color-text-primary);
    stroke-width: 1.0;
}

/* 文氏圆半透明填充（并集 / 交集 / 差集命中区） */
.ra-svg .ra-venn-fill {
    fill: var(--theme-primary-bg-strong);
    stroke: var(--color-text-primary);
    stroke-width: 1.0;
}

/* ===== 关系代数运算实例演示（3.5.2 集合运算 · .ra-example-*）===== */
.ra-example-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    /* v1.2.6 去掉 margin-top：.chapter-page 为 flex column，flex 下相邻 margin 不折叠，
       若保留 margin-top 会与上文 .content-text 的 margin-bottom(15px) 叠加成 30px。
       统一只靠 margin-bottom 提供 15px 间距，与页面其它组件节奏一致。 */
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

.ra-example-item {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 12px;
    background: var(--color-bg-surface);
}

.ra-example-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-primary-darker);
    margin-bottom: 6px;
    text-align: center;
}

.ra-example-meaning {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* 3.6 全宽大宽表的图例/语义说明：放大字号（与表格 12px 保持一致） */
.ra-example-meaning--lg {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 10px;
}

.ra-example-title .ra-formula-paren {
    color: var(--theme-primary-darker);
}

.ra-process-note {
    flex: 0.5;
    border: 1px dashed var(--theme-primary-dark);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 9px;
    color: var(--color-text-secondary);
    background: var(--color-bg-base);
    line-height: 1.5;
    white-space: nowrap;
    align-self: flex-start;
}

.ra-process-title {
    font-size: 8px;
    font-weight: 600;
    color: var(--theme-primary-darker);
    text-align: center;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border-muted);
}

.ra-process-step {
    padding: 2px 0;
}

.ra-process-step code {
    font-size: 9px;
    color: var(--theme-primary-darker);
    background: transparent;
    padding: 0;
}

.ra-example-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.ra-mini-table {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    min-width: 0;
    flex: 1;
    background: var(--color-bg-page);
}

.ra-mini-table--result {
    border-color: var(--theme-primary-dark);
    animation: ra-result-in 0.5s ease-out both;
}

/* 3.6 范式体检等全宽大表：放大字号（3.5 演算表并排仍用默认小字号） */
.ra-mini-table--lg .ra-mt-row > span {
    font-size: 12px;
    padding: 4px 6px;
}
.ra-mini-table--lg .ra-mt-title {
    font-size: 11px;
    padding: 4px 6px;
}

@keyframes ra-result-in {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ra-mt-title {
    grid-column: 1 / -1;
    font-size: 8px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-base);
    padding: 2px 4px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.ra-mt-row {
    display: contents;
}

.ra-mt-row > span {
    text-align: center;
    padding: 2px 3px;
    font-size: 9px;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-muted);
    white-space: nowrap;
}

.ra-mt-row:last-child > span {
    border-bottom: none;
}

.ra-mt-row.ra-mt-head > span {
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-muted);
}

/* 3.6 范式体检列标注：红 = 部分函数依赖；红 + 虚线下划线 = 传递函数依赖 */
.ra-mt-row.ra-mt-head > span.ra-mt-bad {
    color: var(--bs-danger);
}

.ra-mt-row.ra-mt-head > span.ra-mt-bad--trans {
    text-decoration: underline dashed var(--bs-danger);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* 3.6 体检报告 PK 通用样式：theme-primary 绿色 + 实线下划线
   适用于两处 —— ① 演示卡表头 span ② 表格内 <code>。
   表头「主键━」与单元格 <code>ra-mt-key</code> 必须颜色一致，否则学生无法对照判读。 */
.ra-mt-key {
    color: var(--theme-primary);
    text-decoration: underline solid currentColor;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* 演示卡表头 span 在通用规则之上额外加粗（保持原 .ra-mt-head 加粗语义） */
.ra-mt-row.ra-mt-head > span.ra-mt-key {
    font-weight: 600;
}

/* 3.6 体检报告行内属性着色：FK = warning 色 + 虚线下划线，与 PK 实线区分（PK 决定整行、FK 仅引用） */
.ra-mt-fk {
    color: var(--color-warning);
    text-decoration: underline dashed currentColor;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* 3.6 体检报告行内属性着色：快照字段 = muted 灰斜体，区别于"活"字段 */
.ra-mt-snapshot {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* 复合主键容器（3.6.5 表格行内）：底部画一条连续的绿色实线，
   横跨所有 PK 属性，表示它们合起来才是主键。
   容器内每个属性如果同时是 FK，由子元素自带虚线表示（在实线上方），
   纯 PK 属性则只继承容器实线，自身不再画线。 */
.ra-pk-group {
    display: inline-block;
    border-bottom: 1.5px solid var(--theme-primary);
    padding-bottom: 4px;          /* 4px 让上方虚线 / 文字 与下方实线有间距 */
    line-height: 1.4;
}

/* 容器内的 FK：颜色取主键色（绿），虚线保留外键色（橙）。
   视觉 = 上方橙虚线（FK 身份） + 下方绿实线（PK 身份，来自容器）。 */
.ra-pk-group .ra-mt-fk {
    color: var(--theme-primary);
    text-decoration-color: var(--color-warning);
}

/* 容器内的纯 PK：取消自身实线（容器已画），仅文字取主键色 */
.ra-pk-group .ra-mt-key:not(.ra-mt-fk) {
    text-decoration: none;
}

.ra-example-op {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    padding: 0 4px;
}

/* 标准关系代数公式：σ_条件(关系名) */
.ra-formula {
    display: inline-flex;
    align-items: flex-end;
    gap: 0;
    line-height: 1;
}

.ra-formula-sym {
    font-size: 22px;
    font-weight: 700;
    color: var(--theme-primary-darker);
    line-height: 1;
}

.ra-formula-sub {
    font-size: 10px;
    color: var(--color-text-primary);
    white-space: nowrap;
    margin-bottom: 2px;
    margin-left: 1px;
}

.ra-formula-paren {
    font-size: 13px;
    color: var(--color-text-primary);
    margin-left: 1px;
}

.ra-query-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* v1.2.6 去 margin-top：flex column 下 margin 不折叠，避免与上文叠加成 30px */
    margin-top: 0;
    margin-bottom: var(--section-gap);
}

.ra-query-item {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 18px;
    background: var(--color-bg-base);
}

.ra-query-desc {
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.6;
    display: inline;
}

.ra-query-btn {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 8px;
}

.ra-query-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--theme-primary-darker);
    background: var(--color-bg-base);
    border: 1px solid var(--theme-primary-dark);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ra-query-btn:hover {
    background: var(--theme-primary-dark);
    color: #fff;
}

.ra-query-formula {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
    text-align: center;
}

.ra-query-formula .ra-formula {
    justify-content: center;
}

.ra-query-formula .ra-formula-paren {
    color: var(--theme-primary-darker);
}

.ra-query-item.is-revealed .ra-query-formula {
    display: block;
}

.ra-example-eq {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-primary-darker);
    padding: 0 2px;
    flex-shrink: 0;
    align-self: center;
}

.ra-example-item--wide {
    grid-column: 1 / -1;
}

/* 3.6 范式演示卡：内容垂直居中（表格 flow 在上、图注 meaning 在下，消除上下留白不对称）
   —— 仅 3.6 用，3.5 的 meaning 在 flow 上方作标题，不加此类 */
.ra-example-item--center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ra-example-item--center .ra-example-meaning {
    margin-bottom: 0;
}

/* ---- 鸦脚表示法 ---- */
.er-crow-svg .er-box {
    fill: var(--color-bg-surface);
    stroke: var(--color-text-primary);
    stroke-width: 1.0;
}

.er-crow-svg .er-box-head {
    fill: var(--theme-primary-bg-strong);
    stroke: var(--color-text-primary);
    stroke-width: 1.0;
}

.er-crow-svg .er-head-text {
    /* 默认值已不重要 —— 通用 unscoped 规则在 L15287 用 10px 覆盖（含 crow-trio 脱离 .crow-trio 后） */
    font-weight: 700;
}

.er-crow-svg .er-attr {
    /* 属性名 = 正文档 8px（×S1.25≈10px 屏显），与陈氏正文档对齐 */
    font-size: 8px;
}

.er-crow-svg .er-pk {
    /* 主属性 = 400 + 下划线作区分标识，不靠字重；避免与上方实体名 700 撞粗 */
    font-weight: 400;
}

.er-crow-svg .er-crow-line {
    fill: none;
    stroke: var(--color-text-primary);
    stroke-width: 1.0;
}

.er-crow-svg .er-one {
    stroke: var(--color-text-primary);
    stroke-width: 1.5;
}

.er-crow-svg .er-zero {
    /* 圆 ⊙ 作汇合点 marker：fill 与 box 同步（亮色=白暗=深底）
       —— 必须 unscoped，否则 SVG cloneNode 进 #svgModal 后脱离 .crow-trio 会回退黑色 */
    fill: var(--color-bg-surface);
    stroke: var(--color-text-primary);
    stroke-width: 1.0;
}

.er-crow-svg .er-cardinal {
    /* 基数（主图 oval）= 正文档 8px（×S1.25≈10px 屏显），与陈氏正文档对齐 */
    font-size: 8px;
    font-weight: 700;
    fill: var(--theme-primary-darker);
}

/* 三联鸦脚示例（3.2.6 真实基数对照图）：三个独立 SVG 等分页面宽度
   端点符号：双竖 ║ = exactly 1；圆 ⊙ + 鸦脚 ⊲ = 0..N
   鸦脚 = 从实体边向连接中心发散三条线（crow's foot） */
.crow-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: var(--section-gap);
    align-items: stretch;
}
.crow-trio > figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.crow-trio > figure > svg {
    width: 100%;
    height: auto;
    display: block;
}
/* crow-trio 与主图共用一套字号（unscoped，避免 SVG clone 进 #svgModal
   脱离 .crow-trio 父级后字号 fallback）。
   - er-head-text：实体名 = L2 节点标题级（crow-trio 紧凑需要，主图也用同尺度）
   - er-attr：      属性 = L2 节点标题级
   - er-cardinal：  基数 = L2 节点标题级
   - er-verb：      联系动词 = L2 节点标题级，与基数同档 */
.er-crow-svg .er-head-text {
    /* 实体名 = 主属性 / 非主属性同字号，仅靠 700 加粗 + 下划线二次区分主属性 —— 防止字号一路放大失控 */
    font-size: 10px;
    font-weight: 700;
}
.er-crow-svg .er-attr {
    /* 属性名 = 正文档 8px（×S1.25≈10px 屏显），与上方实体名 700 拉开对比 */
    font-size: 8px;
    font-weight: 400;
}
.er-crow-svg .er-cardinal {
    /* 基数（M:1 / M:N / 1:1）= 正文档 8px（×S1.25≈10px 屏显），与陈氏正文档对齐 */
    font-size: 8px;
    font-weight: 600;
    fill: var(--theme-primary-darker);
}
.er-crow-svg .er-verb {
    /* 联系动词（属于 / 出现于 / 拥有）= 正文档 8px（×S1.25≈10px 屏显），与基数同档 */
    font-size: 8px;
    font-weight: 600;
    fill: var(--theme-primary);
}

/* ==========================================================================
   选项卡内嵌卡片修饰（`.tabs-container--with-cards`）
   --------------------------------------------------------------------------
   复用课程现有的 `.tabs-container` / `.tab-btn` / `.tabs-content` 风格
   （1.1 已定义），但当面板里直接放 `.definition-card` 时：
     - 去掉 tabs-content 的灰色内底与内边距，让卡片自己的渐变背景原样展开
     - 卡片紧贴面板边缘，与下方章节内容自然衔接
   ========================================================================== */
.tabs-container--with-cards .tabs-content {
    padding: 0;
    background: transparent;
    border-radius: 0;
    min-height: 0;
}

/* 选项卡内的按钮平分宽度，并去掉 button 默认内联间隙，保证等分精确 */
.tabs-container--with-cards .tabs-header {
    display: flex;
    margin-bottom: 8px;            /* 与下方卡片紧贴一档，不再走 --section-gap(15) */
}

.tabs-container--with-cards .tabs-header > .tab-btn {
    flex: 1 1 0;                   /* 三等分（任意 n 也等分） */
    margin-right: 0;               /* 覆盖基础类 4px 间距，否则最后一格偏窄 */
    padding: 10px 12px;
    display: flex;                 /* 让图标+文字在同一行用 justify-content 居中 */
    align-items: center;
    justify-content: center;
    gap: 6px;                      /* 图标与文字水平间距 */
    text-align: center;
}

.tabs-container--with-cards .tab-pane > .definition-card {
    margin-bottom: 0;
}

.tabs-container--with-cards .tab-pane > .reason-card,
.tabs-container--with-cards .tab-pane > .analogy-card,
.tabs-container--with-cards .tab-pane > .data-card {
    margin-bottom: 0;
}

/* 选项卡按钮里带图标时，图标与文字间距 */
.tabs-container .tab-btn i {
    margin-right: 4px;
    vertical-align: -2px;
}

/* ==========================================================================
   3.4 关系模式卡片 `.rel-schema-grid`
   --------------------------------------------------------------------------
   用途：展示「E-R 图转出来的关系模式」—— 一张表一张卡，
        字段行用 PK / FK 角标区分主码与外码，右侧标注数据类型。
   首用：chapter-3-4.html（3.4.7 图 3-6 落地 10 张表）。
   设计：与 .data-card 同一族（白底 + 主题色顶边 + hover 轻推），
        但改为纵向列表式，承载字段级细节。全 token 化，深色模式自动接管。
   ========================================================================== */
.rel-schema-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: var(--section-gap);
    margin-bottom: var(--section-gap);
}

/* --- 表卡片 + E-R 图 三列布局：两侧表卡片窄、等高，中间 SVG 保持原宽 --- */
.er-table-trio {
    display: grid;
    grid-template-columns: minmax(140px, 0.5fr) 2fr minmax(140px, 0.5fr);
    gap: 16px;
    align-items: start;
    margin-bottom: var(--section-gap);
}

.er-table-trio__col {
    min-width: 0;
    display: flex;
}

/* 两列变体：左侧一张表卡片 + 中间 SVG（如 3-10 中间表说明，只补一侧） */
.er-table-trio--two {
    grid-template-columns: minmax(150px, 0.495fr) 2.505fr;
}

.er-table-trio .rel-schema-card {
    margin-bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.er-table-trio .rs-note {
    margin-top: auto;
}

/* trio 内字段行统一高度，确保两侧表卡片行高一致 */
.er-table-trio .rs-field {
    min-height: 2em;
}

/* 空字段行：与有文字的字段行保持相同高度与虚线分隔，仅文字透明 */
.rs-field--empty {
    border-bottom: 1px dashed var(--color-border);
}

.rs-field--empty .rs-badge--plain,
.rs-field--empty .rs-col,
.rs-field--empty .rs-type {
    color: transparent;
    user-select: none;
}

/* rel-schema-grid 内卡片 flex 布局，rs-note 贴底，字段行统一高度 */
.rel-schema-grid .rel-schema-card {
    display: flex;
    flex-direction: column;
}

.rel-schema-grid .rs-note {
    margin-top: auto;
}

.rel-schema-grid .rs-field {
    min-height: 2em;
}

/* 中间列：标题 + SVG + 图注作为整体，与左右两表垂直居中 */
.er-table-trio figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    align-self: center;
    min-height: 0;
}

.er-table-trio .er-chen-svg {
    max-width: 842px;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .er-table-trio {
        grid-template-columns: 1fr;
        gap: var(--section-gap);
    }

    .er-table-trio__col {
        display: block;
    }

    .er-table-trio .rel-schema-card {
        height: auto;
    }

    .er-table-trio .rs-note {
        margin-top: 0;
    }
}

.rel-schema-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--theme-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.15s ease;
}

.rel-schema-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    border-color: var(--theme-primary);
}

/* --- 卡片头：实体中文名 + 英文表名 --- */
.rs-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--theme-primary-bg);
    border-bottom: 1px solid var(--theme-primary-border);
}

.rs-head > i {
    font-size: 0.9rem;
    color: var(--theme-primary);
    flex: 0 0 auto;
}

.rs-cn {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
}

.rs-en {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    color: var(--color-text-secondary);
}

/* --- 字段列表 --- */
.rs-fields {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rs-field {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    font-size: 0.82rem;
    border-bottom: 1px dashed var(--color-border);
}

.rs-field:last-child {
    border-bottom: none;
}

/* PK / FK 角标：固定宽度保证字段名左对齐 */
.rs-badge {
    flex: 0 0 auto;
    min-width: 22px;
    text-align: center;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.6;
    padding: 0 4px;
    border-radius: 3px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.rs-badge--pk {
    background: var(--theme-primary);
    color: #fff;
}

.rs-badge--fk {
    background: var(--color-warning);
    color: #fff;
}

.rs-badge--plain {
    background: transparent;
    color: transparent;
}

/* 两列布局左列较窄，PK+FK 双排时 badge 紧凑化避免溢出 */
.er-table-trio--two .rs-badge {
    min-width: 12px;
    padding: 0 1px;
    font-size: 0.50rem;
}

.er-table-trio--two .rs-field {
    gap: 4px;
    padding: 5px 7px;
}

.rs-col {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: var(--color-text-primary);
}

.rs-field--pk .rs-col {
    font-weight: 600;
}

.rs-type {
    margin-left: auto;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* --- 卡片脚注：一句话说明这张表的来历 --- */
.rs-note {
    padding: 6px 12px;
    font-size: 0.74rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    background: var(--color-bg-muted);
    border-top: 1px solid var(--color-border);
}

/* --- 卡片内的多值/弱实体等强调 --- */
.rs-note strong {
    color: var(--theme-primary-darker);
}

@media (max-width: 576px) {
    .rel-schema-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   3.4.8 外键织网：缩小版关系模式卡片 + SVG 折线连线层
   ============================================================ */
.schema-web-wrapper {
    position: relative;
    width: 1120px;
    height: 636px;
    margin: var(--section-gap, 15px) auto;
    max-width: 100%;
    overflow: visible;
}

.schema-web-card {
    position: absolute;
    width: 170px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--theme-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    z-index: 2;
}

.schema-web-head {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 23px;
    padding: 0 7px;
    background: var(--theme-primary-bg);
    border-bottom: 1px solid var(--theme-primary-border);
}

.schema-web-head > i {
    font-size: 0.6rem;
    color: var(--theme-primary);
    flex: 0 0 auto;
}

.schema-web-cn {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    line-height: 1;
}

.schema-web-en {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.54rem;
    color: var(--color-text-secondary);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schema-web-fields {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 固定行高 16px：23 表头 + 9×16 字段 + 上下边框 = 卡片总高 170px，
   与连线坐标系（行距 32px：0/202/404/606）严格对齐 */
.sw-field {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 16px;
    padding: 0 7px;
    font-size: 0.55rem;
    line-height: 16px;
    white-space: nowrap;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: var(--color-text-primary);
    border-bottom: 1px dashed var(--color-border);
}

.sw-field:last-child {
    border-bottom: none;
}

.sw-field--empty {
    color: transparent;
}

.sw-badge {
    flex: 0 0 auto;
    min-width: 14px;
    padding: 0 2px;
    text-align: center;
    font-size: 0.48rem;
    font-weight: 700;
    line-height: 1.5;
    border-radius: 2px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.sw-badge--pk {
    background: var(--theme-primary);
    color: #fff;
}

.sw-badge--fk {
    background: var(--color-warning);
    color: #fff;
}

.sw-badge--plain {
    background: transparent;
    color: transparent;
}

/* SVG 折线连线层：铺满 wrapper，像素坐标与 viewBox 1120x636 一一对应 */
.schema-web-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 1120px;
    height: 636px;
    pointer-events: none;
    color: var(--color-text-muted);
    z-index: 1;
}

/* ==========================================================================
   篇（Part）——侧栏分组标题
   设计约定：篇只是视觉分组，不是可折叠容器，也不参与 course.js 的手风琴逻辑。
   类名刻意不使用 chapter-item，避免被 toggleChapter / highlightNavForSection
   通过 .chapter-item / #chapter-item-N 选择器误伤。
   ========================================================================== */
.part-item {
    list-style: none;
    margin: 18px 0 8px;
    padding: 0;
}
.part-item:first-child {
    margin-top: 10px;
}
.part-title {
    display: block;
    padding: 4px 16px 4px 13px;
    margin-left: 0;
    border-left: 3px solid var(--theme-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.3px;
    color: var(--color-text-muted);
    background: transparent;
    cursor: default;
    user-select: none;
}
.sidebar.collapsed .part-title {
    font-size: 0;
    padding-left: 8px;
    padding-right: 8px;
    border-left-width: 3px;
}

/* 侧栏章/节标题文字 flex 撑满，把展开图标和锁图标推到最右并对齐 */
.chapter-link > span,
.section-link > span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chapter-link > i,
.chapter-link .expand-icon,
.chapter-link .ba-lock-icon,
.section-link > i,
.section-link .ba-lock-icon {
    flex: 0 0 auto;
}

.section-link {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   AIML 课程专属组件（2026-10-06 追加）
   说明：本文件主体为数据库课程 course.css 的快照，保证版式/组件与数据库课程
   一致；以下为人工智能通识课追加的 5 个组件，全部使用站点级设计令牌，
   深色模式自动跟随 css/dark-mode.css。
     1) .ail-lit     素养罗盘：本节对应的 AI 素养四维（了解/使用/创新/恪守）
     2) .ail-policy  政策引述卡：国家文件原文要点
     3) .ail-track   三条赛道：研究型 / 应用型 / 技能型高校定位
     4) .ail-lab     动手实验室（步骤清单 + 提示词）
     5) .ail-task    分层任务（基础 / 进阶 / 挑战）
   ========================================================================== */

/* 1) 素养罗盘 */
.ail-lit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 0 0 15px;
    border: 1px dashed var(--theme-primary-border);
    border-radius: var(--radius-md);
    background: var(--theme-primary-bg);
}
.ail-lit-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.ail-lit-badge {
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    background: var(--color-bg-surface);
}
.ail-lit-badge.is-on {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
    font-weight: 600;
}

/* 2) 政策引述卡 */
.ail-policy {
    margin: 0 0 15px;
    padding: 12px 14px;
    border-left: 3px solid var(--theme-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--theme-primary-bg);
}
.ail-policy-src {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--theme-primary-darker);
    margin-bottom: 4px;
}
.ail-policy-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

/* 3) 三条赛道 */
.ail-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 15px;
}
.ail-track-card {
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--theme-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
}
.ail-track-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}
.ail-track-head i {
    color: var(--theme-primary);
}
.ail-track-body {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.ail-track-body strong {
    color: var(--color-text-primary);
}

/* 4) 动手实验室 */
.ail-lab {
    padding: 14px 16px;
    margin: 0 0 15px;
    border: 1px dashed var(--theme-primary-border-strong);
    border-radius: var(--radius-md);
    background: var(--theme-primary-bg);
}
.ail-lab-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-primary-darker);
    margin-bottom: 8px;
}
.ail-lab-head .ail-lab-time {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--theme-primary-bg-hover);
    color: var(--theme-primary-darker);
}
.ail-lab ol,
.ail-lab ul {
    margin: 0;
    padding-left: 20px;
}
.ail-lab li {
    margin: 6px 0;
    font-size: 0.94rem;
    line-height: 1.75;
}

/* 5) 分层任务 */
.ail-task {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 15px;
}
.ail-task-item {
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
}
.ail-task-level {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 6px;
    background: var(--theme-primary-bg-hover);
    color: var(--theme-primary-darker);
}
.ail-task-item.is-hard .ail-task-level {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}
.ail-task-body {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .ail-track,
    .ail-task {
        grid-template-columns: 1fr;
    }
}

/* AIML 课程定义卡片单列显示：每个定义一行，避免两列/三列挤在一起 */
.definition-grid {
    display: block;
}

/* ---- 提交格式 / 练习工作表 ---- */
.worksheet-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    margin: 12px 0 var(--section-gap) 0;
}

.worksheet-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.worksheet-section {
    margin-bottom: 14px;
    text-align: left;
}

.worksheet-section:last-child {
    margin-bottom: 0;
}

.worksheet-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
    text-align: left;
}

.worksheet-placeholder {
    color: var(--color-text-tertiary);
    font-size: 0.9rem;
    line-height: 1.7;
    padding: 10px 12px;
    background: var(--color-bg-muted);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--theme-primary);
    text-align: left;
}

/* ==========================================================
   AIML 课程 SVG 统一规范（图 1-1 ~ 图 1-4 及后续全部插图）
   核心：viewBox 宽度 = 正文容器实际宽度（1120），SVG 以 width:100% 渲染时
        缩放比恒为 1，1 SVG 单位 = 1 CSS 像素 —— 组件与文字均为设计时的
        真实大小，不存在"拉伸放大"。窄容器下整体等比缩小，层级关系不变。
   改这里即可全站生效；深色模式通过 CSS 变量自动跟随。
   ========================================================== */
.aiml-svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ---- 图内文字三层：正文 16px → 图标题 13 → 图正文 11 → 图注释 10 ----
   这三层是屏幕上的真实像素值（viewBox 1120 与渲染宽度 1:1），不再需要反向补偿。 ---- */
.aiml-svg .fig-t {
    font-size: 13px;
    font-weight: 600;
    fill: var(--color-text-primary);
}

.aiml-svg .fig-b {
    font-size: 11px;
    fill: var(--color-text-secondary);
}

.aiml-svg .fig-n {
    font-size: 10px;
    fill: var(--color-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 顶部说明行（整幅图的引导语） */
.aiml-svg .fig-cap {
    font-size: 11px;
    fill: var(--color-text-muted);
}

/* ---- 图内几何：统一线宽 1、圆角 4、颜色走语义变量 ---- */
.aiml-svg .fig-box {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1;
}

.aiml-svg .fig-line {
    stroke: var(--color-border-hover);
    stroke-width: 1;
    fill: none;
}

.aiml-svg .fig-arrow {
    fill: var(--color-border-hover);
}

/* ---- 语义圆点：主色 / 成功 / 警告 / 危险 ---- */
.aiml-svg .fig-dot {
    fill: var(--theme-primary);
}

.aiml-svg .fig-dot.ok {
    fill: var(--color-success);
}

.aiml-svg .fig-dot.warn {
    fill: var(--color-warning);
}

.aiml-svg .fig-dot.bad {
    fill: var(--color-danger);
}

/* 窄屏降级：SVG 不无限压缩，改为容器横向滚动，保证文字仍可读 */
@media (max-width: 768px) {
    .chapter-page figure {
        overflow-x: auto;
    }

    .aiml-svg {
        min-width: 900px;
    }

    .aiml-svg .fig-t {
        font-size: 12px;
    }

    .aiml-svg .fig-b,
    .aiml-svg .fig-cap {
        font-size: 10px;
    }

    .aiml-svg .fig-n {
        font-size: 9px;
    }
}

.worksheet-placeholder ol,
.worksheet-placeholder ul {
    margin: 0;
    padding-left: 1.2em;
    text-align: left;
}

.worksheet-placeholder li {
    margin-bottom: 4px;
    text-align: left;
}

/* ---- 需求澄清卡（2.1 五问填写模板）----
   设计目标：把垂直堆叠的「大标题 + 长示例」改成紧凑的表格化结构，
   一眼看清「问什么 / 填什么 / 参考示例」，节省纵向空间。
   ---- */
.aiml-clarify-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 12px 0 var(--section-gap) 0;
}

.aiml-clarify-header {
    padding: 12px 18px;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.aiml-clarify-task {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
    line-height: 1.5;
}

.aiml-clarify-task-label {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--color-text-primary);
}

.aiml-clarify-task-prompt {
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* 字号 / 表头 / 内边距一律继承表格统一规范（.content-table），此处只留结构差异 */
.aiml-clarify-table {
    width: 100%;
    margin: 0;
    table-layout: fixed;
}

.aiml-clarify-table th,
.aiml-clarify-table td {
    vertical-align: top;
    border-color: var(--color-border);
}

.aiml-clarify-table tbody td {
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.aiml-clarify-table tbody td strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.aiml-clarify-table tbody td .example {
    color: var(--color-text-tertiary);
    font-size: 0.85em;
    display: block;
    margin-top: 2px;
}

/* 澄清卡「问题下方的灰色提示小字」，替代原先写死的内联 0.8rem */
.aiml-clarify-hint {
    display: block;
    font-size: 0.85em;
    color: var(--color-text-tertiary);
}

.aiml-clarify-table tbody tr:nth-child(even) {
    background: var(--color-bg-card);
}

.aiml-clarify-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--theme-primary-bg-hover);
    color: var(--theme-primary-darker);
    font-size: 0.75rem;
    font-weight: 700;
}

.aiml-clarify-footer {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 18px;
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
    line-height: 1.55;
}

.aiml-clarify-footer-label {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--color-text-primary);
}

.aiml-clarify-footer-prompt {
    color: var(--color-text-tertiary);
    font-style: italic;
}

@media (max-width: 768px) {
    .aiml-clarify-table .col-q,
    .aiml-clarify-table .col-example {
        display: none;
    }

    .aiml-clarify-table th,
    .aiml-clarify-table td {
        padding: 8px 10px;
    }
}

/* ---- 提交格式清单（动手实验室末尾的交付清单）----
   设计目标：把垂直堆叠的 worksheet-card 改成两列表格，
   左边是提交项，右边是填写说明/示例，大幅压缩纵向空间。
   ---- */
.aiml-submit-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 12px 0 var(--section-gap) 0;
}

.aiml-submit-header {
    padding: 12px 18px;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 字号 / 表头 / 内边距一律继承表格统一规范（.content-table），此处只留结构差异 */
.aiml-submit-table {
    width: 100%;
    margin: 0;
    table-layout: fixed;
}

.aiml-submit-table th,
.aiml-submit-table td {
    vertical-align: middle;
    border-color: var(--color-border);
}

.aiml-submit-table tbody td:first-child {
    width: 38%;
    font-weight: 600;
    color: var(--color-text-primary);
}

.aiml-submit-table tbody td:last-child {
    color: var(--color-text-tertiary);
    line-height: 1.6;
}

.aiml-submit-table tbody td:last-child ol,
.aiml-submit-table tbody td:last-child ul {
    margin: 0;
    padding-left: 1.2em;
}

.aiml-submit-table tbody td:last-child li {
    margin-bottom: 3px;
}

.aiml-submit-table tbody tr:nth-child(even) {
    background: var(--color-bg-card);
}

/* ---- 术语表（首列含中英文术语）----
   规则：首列中英文必须同行、每行数据单行显示。
   实现：table-layout:fixed + white-space:nowrap + <colgroup> 显式列宽。
   ---- */
.aiml-term-table {
    width: 100%;
    min-width: 100%;
    margin-bottom: 0;
    table-layout: fixed;
}

.aiml-term-table th,
.aiml-term-table td {
    white-space: nowrap;
    vertical-align: middle;
    border-color: var(--color-border);
}

.aiml-term-table td:first-child code {
    margin-left: 4px;
    color: var(--theme-primary);
    font-size: 0.85em;
}

.definition-grid .definition-card {
    width: 100%;
    margin-bottom: 16px;
}

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

/* ==========================================================
   AIML 流程组件 .aiml-flow（紧凑图标卡 + chevron 分隔）
   适用：并列步骤 / 分类并列 / 流程接龙 / 判断分支等"布局型"图示。
   设计要点（方向 B，2026-10-06 定稿）：
     · 卡片定宽、整组居中 —— 不随宽屏被拉成又宽又空的矩形；
     · 顶部是语义图标 —— 替代原来无意义的装饰圆点；
     · 分隔用 chevron › —— 比实心长箭头更轻，像分页而非贴图；
     · 字号跟随站点规范，深色模式自动跟随，不用算坐标。
   结构：.aiml-flow > (.aiml-flow-item + .aiml-flow-arrow) × n
        .aiml-flow-item > .aiml-flow-icon + .aiml-flow-title + .aiml-flow-body + .aiml-flow-note
   ========================================================== */
.aiml-flow {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 var(--section-gap) 0;
}

.aiml-flow-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 18px 16px;
    text-align: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.aiml-flow-item:hover {
    border-color: var(--theme-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

/* 3 卡变体：卡片较宽，改为左对齐 + 加大内边距，避免居中留白过多 */
.aiml-flow--3 .aiml-flow-item {
    text-align: left;
    padding: 22px 28px;
}

.aiml-flow--3 .aiml-flow-icon {
    display: inline-block;
    margin-bottom: 12px;
}

/* 分隔：chevron，比箭头更轻 */
.aiml-flow-arrow {
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 13px;
    opacity: .5;
}

/* 语义图标：默认主题绿；ok / warn / bad = 绿 / 橙 / 红 */
.aiml-flow-icon {
    display: block;
    font-size: 22px;
    line-height: 1;
    color: var(--theme-primary);
    margin-bottom: 10px;
}

.aiml-flow-icon.ok {
    color: var(--color-success);
}

.aiml-flow-icon.warn {
    color: var(--color-warning);
}

.aiml-flow-icon.bad {
    color: var(--color-danger);
}

.aiml-flow-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.aiml-flow-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.aiml-flow-note {
    font-size: 12px;
    line-height: 1.55;
    color: var(--color-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 窄屏：卡片换行成两列，隐藏 chevron（顺序已由标题序号承担） */
@media (max-width: 768px) {
    .aiml-flow {
        flex-wrap: wrap;
        gap: 10px;
    }

    .aiml-flow-item {
        flex: 0 0 calc(50% - 5px);
        min-width: auto;
    }

    .aiml-flow-arrow {
        display: none;
    }
}

/* ==========================================================
   AIML 1.1 四种 AI 对比表 / 导学未来方向表：加宽首列，让中英文同行，其余列压缩
   列宽由 <colgroup> 固定（table-layout:fixed），总宽 = 正文容器 1120px。
   ========================================================== */
.aiml-four-ai-table,
.aiml-track-table {
    table-layout: fixed;
}

.aiml-four-ai-table th,
.aiml-four-ai-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.aiml-four-ai-table .cmp-dim {
    text-align: left;
}

.aiml-four-ai-table .cmp-dim code {
    margin-left: 4px;
    color: var(--theme-primary);
    font-size: 0.85em;
}

.aiml-track-table th,
.aiml-track-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.aiml-track-table .cmp-dim {
    text-align: left;
}

.aiml-track-table .cmp-dim code {
    margin-left: 4px;
    color: var(--theme-primary);
    font-size: 0.85em;
}

/* ==========================================================
   AIML 三问组件 .aiml-triad（自我介绍 / 目标三角等三步结构）
   结构：.aiml-triad > .aiml-triad-card × 3
        .aiml-triad-card > .aiml-triad-header > (.aiml-triad-num + .aiml-triad-title)
                           + .aiml-triad-body
   ========================================================== */
.aiml-triad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 0 var(--section-gap) 0;
}

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

/* 卡片之间的隐式箭头：桌面端用 ::after 在右侧画 chevron */
.aiml-triad-card:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--color-text-muted);
    border-right: 1.5px solid var(--color-text-muted);
    transform: translateY(-50%) rotate(45deg);
    opacity: .4;
}

.aiml-triad-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.aiml-triad-num {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--theme-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.aiml-triad-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.aiml-triad-body {
    font-size: 13px;
    line-height: 1.65;
    color: var(--color-text-secondary);
}

.aiml-triad-body strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

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

    .aiml-triad-card:not(:last-child)::after {
        display: none;
    }
}

/* ==========================================================
   AIML 步骤组件 .aiml-steps（垂直时间轴式操作指南）
   适用：顺序明确的 3~5 步操作指引，如「拿到三版后做三件事」。
   结构：.aiml-steps > .aiml-step
        .aiml-step > .aiml-step-num + .aiml-step-content
   ========================================================== */
.aiml-steps {
    display: flex;
    flex-direction: column;
    margin: 0 0 var(--section-gap) 0;
    padding: 0;
}

.aiml-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    padding-bottom: 18px;
}

.aiml-step:last-child {
    padding-bottom: 0;
}

/* 步骤之间的竖线连接 */
.aiml-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: 0;
    width: 1px;
    background: var(--color-border);
}

.aiml-step-num {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--theme-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--color-bg-page);
}

.aiml-step-content {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.aiml-step-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.aiml-step-body {
    font-size: 13px;
    line-height: 1.65;
    color: var(--color-text-secondary);
}

.aiml-step-body strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

@media (max-width: 768px) {
    .aiml-step {
        gap: 12px;
    }

    .aiml-step-num {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .aiml-step:not(:last-child)::before {
        left: 13px;
        top: 26px;
    }
}