/* ==========================================================================
   Linux实战 · 课程样式（骨架版）
   --------------------------------------------------------------------------
   说明：本文件为 SoftwareArchitecture 课程 course.css 的快照副本，
   骨架阶段整份复制以保证课程页布局/侧边栏/内容区视觉与软件架构课程
   100% 一致。后续 Linux实战 课程内容开发时，可逐步裁剪其中的
   软件架构专属组件规则（.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;
    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: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-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--theme-primary);
    font-size: 1.4rem;
}

.content-subtitle {
    color: var(--color-text-primary);
    margin-bottom: 15px;
    font-size: 1.25rem;
}

.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: 20px;
}

.content-list {
    padding-left: 24px;
    margin-bottom: 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;
}

.content-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

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

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

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

.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(-4px) 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);
}

.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;
}

.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: 12px;
    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);
}

/* 树状目录条目 */
.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;
}

#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;
}

/* ---- 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: 20px 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: 15px;
}

.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: 15px 0 16px 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;
}