/* ================================================================
   diagrams.css — 图表 & 流程图统一样式 (Technical Blog Edition)
   配合 styles.css 使用，支持亮色/暗色双主题
   设计原则：简洁、专业、去花哨（无渐变、无阴影动效、细边框）
   使用方式：<link href="../diagrams.css" rel="stylesheet" />
   ================================================================ */

/* ================================================================
   一、Mermaid 图表集成（保留兼容，建议使用纯 CSS 替代）
   ================================================================ */

.mermaid-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin: 20px 0;
    overflow-x: auto;
}

.mermaid-container .mermaid {
    display: flex;
    justify-content: center;
}

/* ================================================================
   二、通用流程图系统 (Flowchart System)
   适用于：数据处理流程、加密解密、编码转换等
   设计：扁平化、细边框、无阴影、无动画
   ================================================================ */

.flow-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 20px 0;
}

.flow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.flow-box {
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
    min-width: 80px;
    font-family: var(--font-mono);
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

/* 流程框语义色变体 —— 只用左边框区分语义，主体保持简洁 */
.flow-box.input {
    border-left: 3px solid #5a8cb0;
    color: #4a7a9a;
}
[data-theme="dark"] .flow-box.input {
    border-left-color: #6a9cb8;
    color: #8ab8d0;
}

.flow-box.process {
    border-left: 3px solid #b08a5a;
    color: #8a6a3a;
}
[data-theme="dark"] .flow-box.process {
    border-left-color: #b8986a;
    color: #c8b090;
}

.flow-box.output {
    border-left: 3px solid #5a8a5a;
    color: #3a6a3a;
}
[data-theme="dark"] .flow-box.output {
    border-left-color: #6a9a6a;
    color: #8ab88a;
}

.flow-box.key {
    border-left: 3px solid #8a5a7a;
    color: #6a3a5a;
}
[data-theme="dark"] .flow-box.key {
    border-left-color: #9a6a8a;
    color: #b88aaa;
}

.flow-box.verify {
    border-left: 3px solid #7a6aaa;
    color: #5a4a8a;
}
[data-theme="dark"] .flow-box.verify {
    border-left-color: #8a7aba;
    color: #a89ac8;
}

.flow-box.hash {
    border-left: 3px solid #7a6aaa;
    color: #5a4a8a;
}
[data-theme="dark"] .flow-box.hash {
    border-left-color: #8a7aba;
    color: #a89ac8;
}

.flow-box.serial {
    border-left: 3px solid #8a5a7a;
    color: #6a3a5a;
}
[data-theme="dark"] .flow-box.serial {
    border-left-color: #9a6a8a;
    color: #b88aaa;
}

.flow-box.success {
    border-left: 3px solid #5a8a5a;
    color: #3a6a3a;
}
[data-theme="dark"] .flow-box.success {
    border-left-color: #6a9a6a;
    color: #8ab88a;
}

.flow-box.danger {
    border-left: 3px solid #a05a5a;
    color: #8a3a3a;
}
[data-theme="dark"] .flow-box.danger {
    border-left-color: #aa6a6a;
    color: #c89090;
}

.flow-box.info {
    border-left: 3px solid #5a8cb0;
    color: #4a7a9a;
}
[data-theme="dark"] .flow-box.info {
    border-left-color: #6a9cb8;
    color: #8ab8d0;
}

.flow-box.warn {
    border-left: 3px solid #b0a05a;
    color: #8a7a3a;
}
[data-theme="dark"] .flow-box.warn {
    border-left-color: #b8a86a;
    color: #c8b890;
}

/* 箭头 */
.flow-arrow {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: normal;
    font-family: var(--font-mono);
}

.flow-arrow-down {
    font-size: 18px;
    color: var(--text-muted);
    text-align: center;
    font-family: var(--font-mono);
}

/* 步骤箭头 */
.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
}

.flow-step-label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    margin-top: 2px;
}

.flow-plus {
    font-size: 16px;
    color: var(--text-muted);
}

/* 标签和文字 */
.flow-label {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 4px;
}

.flow-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 3px solid var(--accent);
}

.flow-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
}

.flow-result {
    text-align: center;
    padding: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-left: 3px solid #b0a05a;
    font-size: 13px;
    color: var(--text-primary);
    margin-top: 8px;
    border-radius: 4px;
}

.flow-warning {
    text-align: center;
    padding: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-left: 3px solid #a05a5a;
    font-size: 13px;
    color: var(--text-primary);
    margin-top: 8px;
    border-radius: 4px;
}

/* 步骤编号 */
.flow-step-number {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    border-radius: 3px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-right: 6px;
    font-weight: 600;
}

.flow-subsection {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    width: 100%;
}

.flow-split-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.split-item {
    flex: 1;
    min-width: 160px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 12px;
}

/* 角色/参与方 */
.flow-actor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    min-width: 160px;
}

.flow-actor-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    padding: 4px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: var(--font-mono);
}

.flow-actors-row {
    display: flex;
    justify-content: space-around;
    gap: 24px;
    flex-wrap: wrap;
}

.flow-transfer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin: 8px 0;
}

/* 对比布局 */
.flow-comparison {
    display: flex;
    justify-content: space-around;
    gap: 16px;
    flex-wrap: wrap;
}

.flow-compare-item {
    flex: 1;
    min-width: 180px;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.flow-compare-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.flow-compare-content {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 垂直流程 */
.flow-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.flow-vertical-box {
    width: 100%;
    max-width: 280px;
    padding: 8px;
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.flow-vertical-box.memory {
    border-left: 3px solid #5a8a5a;
}
.flow-vertical-box.storage {
    border-left: 3px solid #b08a5a;
}
.flow-vertical-box.network {
    border-left: 3px solid #5a8cb0;
}


/* ================================================================
   三、TCP/网络协议图 (Network Protocol Diagrams)
   适用于：三次握手、四次挥手、数据封装等
   设计：扁平端点卡片 + 简洁箭头
   ================================================================ */

.tcp-diagram {
    margin: 20px 0;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.tcp-diagram-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tcp-diagram-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
}

.tcp-endpoint {
    text-align: center;
    width: 140px;
}

.tcp-client {
    padding: 10px 16px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid #5a8cb0;
    font-family: var(--font-mono);
}

.tcp-server {
    padding: 10px 16px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid #b08a5a;
    font-family: var(--font-mono);
}

.tcp-arrows {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
}

.tcp-arrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.arrow-line {
    flex: 1;
    height: 1px;
    background: var(--border);
    position: relative;
    min-width: 40px;
}

.arrow-head {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--text-muted);
}

.arrow-head.reverse {
    border-left: 0;
    border-right: 8px solid var(--text-muted);
}

.arrow-label {
    background: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border-light);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.tcp-step {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 四次挥手特殊样式 */
.tcp-four-way .tcp-arrow:nth-child(2) .arrow-line,
.tcp-four-way .tcp-arrow:nth-child(4) .arrow-line {
    background: #a05a5a;
}
.tcp-four-way .tcp-arrow:nth-child(2) .arrow-head,
.tcp-four-way .tcp-arrow:nth-child(4) .arrow-head {
    border-left-color: #a05a5a;
}


/* ================================================================
   四、通用图解组件 (Generic Diagram Components)
   ================================================================ */

.diagram-section {
    margin: 20px 0;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.diagram-section h4 {
    color: var(--accent);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.diagram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.diagram-card {
    background: var(--bg-primary);
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.diagram-card h5 {
    color: var(--accent);
    margin-bottom: 8px;
    font-size: 14px;
}

.diagram-card p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
}

.diagram-grid-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}


/* ================================================================
   五、协议头部可视化 (Protocol Header Visualization)
   ================================================================ */

.ip-header-diagram {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 12px 0;
    background: var(--bg-primary);
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.ip-field {
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    min-width: 70px;
    font-family: var(--font-mono);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

/* 保留颜色标识但大幅降低饱和度 */
.ip-field.version    { border-left: 3px solid #7a7ab0; }
.ip-field.ihl        { border-left: 3px solid #b07a8a; }
.ip-field.tos        { border-left: 3px solid #6a9ab0; }
.ip-field.length     { border-left: 3px solid #6aaa8a; }
.ip-field.id         { border-left: 3px solid #b09a6a; }
.ip-field.flags      { border-left: 3px solid #8ab0aa; }
.ip-field.fragment   { border-left: 3px solid #b08a6a; }
.ip-field.ttl        { border-left: 3px solid #b07a7a; }
.ip-field.protocol   { border-left: 3px solid #7a9ab0; }
.ip-field.checksum   { border-left: 3px solid #8aaa6a; }
.ip-field.source     { border-left: 3px solid #6a8ab0; }
.ip-field.destination{ border-left: 3px solid #9a7ab0; }

.tcp-header-diagram {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 12px 0;
}

.tcp-field {
    padding: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    font-family: var(--font-mono);
}


/* ================================================================
   六、数据封装/分层图 (Encapsulation & Layering)
   ================================================================ */

.encapsulation-diagram {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.encapsulation-layer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
}

.layer-number {
    width: 26px;
    height: 26px;
    background: var(--accent);
    color: #fff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

.layer-content {
    flex: 1;
}

.layer-content h5 {
    margin: 0 0 4px 0;
    color: var(--accent);
    font-size: 14px;
}

.layer-content p {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

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

.flow-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
}

.flow-icon {
    width: 26px;
    height: 26px;
    background: var(--accent);
    color: #fff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 12px;
}

.flow-text {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}


/* ================================================================
   七、时序/步骤图 (Sequence & Step Diagrams)
   设计：扁平圆形编号 + 细线连接，干净利落
   ================================================================ */

/* 横向步骤图 */
.seq-diagram {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 20px;
    margin: 20px 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}

.seq-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    flex: 1;
}

.seq-step-num {
    width: 28px;
    height: 28px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    font-family: var(--font-mono);
}

.seq-step-line {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: 2px 0;
}

.seq-step-text {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.4;
}

/* 纵向时间线 */
.timeline {
    position: relative;
    padding-left: 28px;
    margin: 20px 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-primary);
}

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

.timeline-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}


/* ================================================================
   八、架构/组件关系图 (Architecture & Component Diagrams)
   ================================================================ */

.arch-diagram {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 20px 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.arch-layer {
    padding: 10px 16px;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-mono);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-left: 3px solid transparent;
}

.arch-layer.app    { border-left-color: #5a8cb0; }
.arch-layer.fw     { border-left-color: #b08a5a; }
.arch-layer.hal    { border-left-color: #8a5a7a; }
.arch-layer.kernel { border-left-color: #5a8a5a; }
.arch-layer.hw     { border-left-color: #7a6aaa; }

.component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.component-card {
    padding: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: center;
}

.component-icon {
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.component-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    margin-bottom: 4px;
    font-family: var(--font-mono);
}

.component-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}


/* ================================================================
   九、状态机/状态转换图 (State Machine)
   ================================================================ */

.state-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
    margin: 20px 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.state-node {
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
    min-width: 70px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.state-node.active {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 600;
}

.state-node.start {
    border-style: dashed;
}

.state-node.end {
    border-width: 2px;
}

.state-arrow {
    font-size: 16px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}


/* ================================================================
   十、对比表格 (Comparison Tables)
   ================================================================ */

.compare-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 13px;
}

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

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

.compare-table td {
    color: var(--text-secondary);
}

.compare-table tr:hover td {
    background: var(--bg-primary);
}

.feature-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.feature-cell {
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
}

.feature-cell .check { color: #5a8a5a; }
.feature-cell .cross { color: #a05a5a; }
.feature-cell .warn  { color: #b0a05a; }


/* ================================================================
   十一、标注 & 说明 (Callouts & Captions)
   ================================================================ */

.diagram-caption {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

.diagram-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    margin: 14px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.diagram-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-left: 3px solid #5a8a5a;
    border-radius: 4px;
    margin: 14px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.diagram-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-left: 3px solid #b0a05a;
    border-radius: 4px;
    margin: 14px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}


/* ================================================================
   十二、手风琴/折叠图
   ================================================================ */

.diagram-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    user-select: none;
}

.diagram-toggle:hover {
    background: var(--border);
}

.diagram-toggle .toggle-icon {
    transition: transform 0.2s;
}

.diagram-toggle.open .toggle-icon {
    transform: rotate(90deg);
}

.diagram-collapse {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.diagram-collapse.open {
    max-height: 5000px;
}

/* ================================================================
   十三、I/O 流向图 (3列分组 + 箭头)
   适用：外部→内存→外部 的数据流向
   ================================================================ */

.io-flow-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: start;
    margin: 20px 0;
}

.io-flow-grid.col3 {
    grid-template-columns: 1fr auto 1fr auto 1fr;
}

.io-flow-grid.col2 {
    grid-template-columns: 1fr auto 1fr;
}

.io-group {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.io-group.io-input  { border-top: 3px solid #5a8a5a; }
.io-group.io-memory { border-top: 3px solid #5a8cb0; }
.io-group.io-output { border-top: 3px solid #b08a5a; }

.io-group-header {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    color: var(--text-primary);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    font-family: var(--font-mono);
}

.io-group-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.io-group-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 12px;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.io-arrow-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 6px;
    gap: 4px;
}

.io-arrow-col .arrow-symbol {
    font-size: 1.2rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.io-arrow-col .arrow-label {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: center;
    max-width: 50px;
    line-height: 1.3;
}

@media (max-width: 750px) {
    .io-flow-grid, .io-flow-grid.col3, .io-flow-grid.col2 {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .io-arrow-col {
        flex-direction: row;
        padding: 4px 0;
    }
}


/* ================================================================
   十四、装饰器链图 (双列并行)
   适用：读取链路 / 写入链路 的装饰器叠加
   ================================================================ */

.decorate-chain {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0;
}

@media (max-width: 700px) {
    .decorate-chain {
        grid-template-columns: 1fr;
    }
}

.decorate-lane {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px;
}

.decorate-lane.read-lane  { border-top: 3px solid #5a8cb0; }
.decorate-lane.write-lane { border-top: 3px solid #b08a5a; }

.decorate-lane-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-align: center;
    font-family: var(--font-mono);
}

.decorate-step {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.decorate-step-box {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-primary);
    text-align: center;
}

.decorate-step-box.highlight {
    background: var(--accent-light);
    border-color: var(--accent);
    font-weight: 600;
    color: var(--accent);
}

.decorate-step-arrow {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

.decorate-step-label {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 2px;
}


/* ================================================================
   十五、垂直时序图 (Vertical Sequence)
   适用：程序↔内存↔磁盘 等多方交互时序
   设计：顶部分布标签 + 消息行 + 可选注释
   ================================================================ */

.seq-vertical {
    margin: 20px 0;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.seq-v-actors {
    display: flex;
    justify-content: space-around;
    margin-bottom: 16px;
    gap: 10px;
}

.seq-v-actor {
    padding: 6px 14px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    font-family: var(--font-mono);
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.seq-v-actor.a { border-bottom: 3px solid #5a8cb0; }
.seq-v-actor.b { border-bottom: 3px solid #5a8a5a; }
.seq-v-actor.c { border-bottom: 3px solid #b08a5a; }

.seq-v-steps {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.seq-v-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 13px;
}

.seq-v-step.right  { justify-content: flex-start; padding-left: 18%; }
.seq-v-step.left   { justify-content: flex-end;   padding-right: 18%; }
.seq-v-step.center { justify-content: center; }

.seq-v-step-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-weight: 600;
}

.seq-v-step-text {
    background: var(--bg-primary);
    padding: 5px 10px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
}

.seq-v-note {
    text-align: center;
    padding: 5px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    margin: 3px 0;
}


/* ================================================================
   十六、客户端-服务端架构图 (Client-Server Architecture)
   适用：Socket / HTTP 交互模型
   ================================================================ */

.cs-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
    margin: 20px 0;
}

.cs-side {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 14px;
}

.cs-side.server-side { border-top: 3px solid #b08a5a; }
.cs-side.client-side { border-top: 3px solid #5a8cb0; }

.cs-side-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: center;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.cs-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.cs-step-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    font-weight: 600;
}

.cs-arrows-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 8px;
    gap: 8px;
}

.cs-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 1.1rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.cs-arrow .cs-arrow-label {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: center;
    max-width: 70px;
    line-height: 1.3;
}

.cs-arrow.reverse {
    transform: rotate(180deg);
}

@media (max-width: 700px) {
    .cs-diagram {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .cs-arrows-col {
        flex-direction: row;
        padding: 6px 0;
    }
    .cs-arrow {
        transform: rotate(90deg);
    }
    .cs-arrow.reverse {
        transform: rotate(270deg);
    }
}


/* ================================================================
   十七、缓冲对比图 (Buffer Comparison)
   适用：无缓冲 vs 有缓冲 的并行对比
   ================================================================ */

.buffer-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 16px 0;
}

@media (max-width: 700px) {
    .buffer-compare { grid-template-columns: 1fr; }
}

.buffer-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px;
}

.buffer-card.bad  { border-left: 3px solid #a05a5a; }
.buffer-card.good { border-left: 3px solid #5a8a5a; }

.buffer-card-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 12px;
    text-align: center;
    color: var(--text-primary);
}

.buffer-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.buffer-flow-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
}

.buffer-node {
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    font-family: var(--font-mono);
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.buffer-node.home   { border-left: 3px solid #5a8cb0; }
.buffer-node.store  { border-left: 3px solid #5a8a5a; }
.buffer-node.market { border-left: 3px solid #b08a5a; }

.buffer-arrow {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

.buffer-arrow-label {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    max-width: 80px;
    line-height: 1.3;
}


/* ================================================================
   十八、树状图 / 层级结构 (Tree & Hierarchy)
   适用：类继承树、文件系统、组织架构、异常体系
   ================================================================ */

.tree-diagram {
    margin: 20px 0;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}

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

.tree ul {
    list-style: none;
    padding-left: 24px;
    margin: 0;
}

.tree li {
    position: relative;
    padding: 3px 0 3px 18px;
    margin: 0;
    line-height: 1.6;
}

/* 树状连线 */
.tree li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

.tree li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 1px;
    background: var(--border);
}

.tree li:last-child::before {
    height: 50%;
}

.tree > li:first-child::before {
    display: none;
}
.tree > li:first-child::after {
    display: none;
}

/* 树节点 */
.tree-node {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    white-space: nowrap;
    font-family: var(--font-mono);
    transition: border-color 0.15s;
}
.tree-node:hover {
    border-color: var(--accent);
}

.tree-node.root {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
}
.tree-node.abstract {
    border-style: dashed;
    background: var(--bg-primary);
}
.tree-node.leaf {
    background: var(--bg-primary);
    border-color: var(--accent);
}
.tree-node.interface {
    border-style: dashed;
    border-color: #7a6aaa;
    color: #6a5a9a;
}
[data-theme="dark"] .tree-node.interface {
    border-color: #9a8aba;
    color: #aaa0ca;
}


/* ================================================================
   十九、泳道图 (Swimlane Diagram)
   适用：多角色/多模块协作流程、请求跨层传递
   ================================================================ */

.swimlane {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    margin: 20px 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.swim-lane {
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
}

.swim-lane-header {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    color: var(--text-primary);
    font-family: var(--font-mono);
    background: var(--bg-primary);
    border-bottom: 2px solid var(--border);
}

.swim-lane:nth-child(1) .swim-lane-header { border-bottom-color: #5a8cb0; }
.swim-lane:nth-child(2) .swim-lane-header { border-bottom-color: #5a8a5a; }
.swim-lane:nth-child(3) .swim-lane-header { border-bottom-color: #b08a5a; }
.swim-lane:nth-child(4) .swim-lane-header { border-bottom-color: #7a6aaa; }
.swim-lane:nth-child(5) .swim-lane-header { border-bottom-color: #8a5a7a; }

.swim-body {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.swim-step {
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
    font-family: var(--font-mono);
    transition: border-color 0.15s;
}
.swim-step:hover {
    border-color: var(--accent);
}

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

.swim-arrow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 0;
}
.swim-arrow-row .arrow {
    font-size: 1rem;
    color: var(--text-muted);
}

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


/* ================================================================
   二十、管道/流水线图 (Pipeline)
   适用：数据处理的多个阶段、编译流程、请求处理链
   设计：统一编号 + 细箭头连接
   ================================================================ */

.pipeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 20px 0;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}

.pipe-stage {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 140px;
    flex-shrink: 0;
}

.pipe-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

.pipe-body {
    flex: 1;
}

.pipe-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.pipe-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.pipe-connector {
    font-size: 1.1rem;
    color: var(--text-muted);
    padding: 2px 6px;
    flex-shrink: 0;
    align-self: center;
    font-family: var(--font-mono);
}

.pipe-stage.highlight .pipe-body {
    background: var(--accent-light);
    padding: 6px 10px;
    border-radius: 3px;
    border: 1px solid var(--accent);
}

@media (max-width: 700px) {
    .pipeline {
        flex-direction: column;
        align-items: stretch;
    }
    .pipe-connector {
        text-align: center;
        transform: rotate(90deg);
        padding: 2px 0;
    }
}


/* ================================================================
   二十一、维恩图 / 概念重叠 (Concept Overlap)
   ================================================================ */

.venn-compare {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 10px;
    margin: 20px 0;
}

@media (max-width: 700px) {
    .venn-compare { grid-template-columns: 1fr; }
}

.venn-col {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px;
}

.venn-left   { border-top: 3px solid #5a8cb0; }
.venn-center { border-top: 3px solid #7a6aaa; }
.venn-right  { border-top: 3px solid #b08a5a; }

.venn-header {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}

.venn-col ul {
    margin: 0;
    padding-left: 16px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.8;
}


/* ================================================================
   二十二、进度步骤条 (Progress Stepper)
   ================================================================ */

.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
    gap: 0;
}

.stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.stepper-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 11px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-muted);
    font-family: var(--font-mono);
    transition: all 0.15s;
}

.stepper-step.done .stepper-dot {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.stepper-step.active .stepper-dot {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 3px var(--accent-light);
}

.stepper-label {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}

.stepper-step.done .stepper-label,
.stepper-step.active .stepper-label {
    color: var(--text-primary);
    font-weight: 500;
}

.stepper-line {
    width: 36px;
    height: 1px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 3px;
    align-self: center;
    margin-bottom: 16px;
}

.stepper-line.done {
    background: var(--accent);
}

@media (max-width: 500px) {
    .stepper { gap: 4px; }
    .stepper-line { width: 16px; }
}


/* ================================================================
   二十三、多维矩阵网格 (Matrix Grid)
   ================================================================ */

.matrix {
    display: grid;
    gap: 1px;
    margin: 20px 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--border);
}

.matrix-3col { grid-template-columns: 1.2fr 1fr 1fr; }
.matrix-4col { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.matrix-5col { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

.matrix-header {
    padding: 8px 12px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    font-family: var(--font-mono);
}

.matrix-cell {
    padding: 8px 12px;
    background: var(--bg-card);
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
}

.matrix-cell.label {
    font-weight: 500;
    text-align: left;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.matrix-cell.high   { color: #5a8a5a; background: rgba(90,138,90,0.06); }
.matrix-cell.medium { color: #b08a5a; background: rgba(176,138,90,0.06); }
.matrix-cell.low    { color: #a05a5a; background: rgba(160,90,90,0.06); }
.matrix-cell.best   { color: #5a8a5a; font-weight: 600; background: rgba(90,138,90,0.1); }
[data-theme="dark"] .matrix-cell.high   { color: #8ab88a; }
[data-theme="dark"] .matrix-cell.medium { color: #c8b090; }
[data-theme="dark"] .matrix-cell.low    { color: #c89090; }
[data-theme="dark"] .matrix-cell.best   { color: #8ab88a; }


/* ================================================================
   二十四、对话气泡 (Speech Bubbles)
   ================================================================ */

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

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

.chat-msg.chat-q {
    align-self: flex-start;
}

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

.chat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    color: #fff;
    flex-shrink: 0;
    font-family: var(--font-mono);
}
.chat-q .chat-avatar { background: var(--accent); }
.chat-a .chat-avatar { background: #5a8a5a; }

.chat-bubble {
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    position: relative;
}
.chat-q .chat-bubble {
    background: var(--bg-primary);
    border: 1px solid var(--border);
}
.chat-a .chat-bubble {
    background: var(--bg-primary);
    border: 1px solid #5a8a5a;
}
.chat-bubble code {
    font-size: 0.82em;
}


/* ================================================================
   二十五、概念卡片组 (Concept Card Deck)
   ================================================================ */

.concept-deck {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.concept-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s;
}
.concept-card:hover {
    border-color: var(--accent);
}

.concept-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
}
.concept-card:nth-child(1)::before { background: #5a8cb0; }
.concept-card:nth-child(2)::before { background: #5a8a5a; }
.concept-card:nth-child(3)::before { background: #b08a5a; }
.concept-card:nth-child(4)::before { background: #7a6aaa; }
.concept-card:nth-child(5)::before { background: #8a5a7a; }
.concept-card:nth-child(6)::before { background: #5a9a9a; }

.concept-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--border);
    line-height: 1;
    margin-bottom: 6px;
    font-family: var(--font-mono);
}
[data-theme="dark"] .concept-num { color: #555; }

.concept-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.concept-card p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}


/* ================================================================
   二十六、环形/比例指标 (Donut Proportion)
   ================================================================ */

.donut-group {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin: 20px 0;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

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

.donut-ring {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: conic-gradient(
        var(--clr, var(--accent)) 0% calc(var(--pct, 50) * 1%),
        var(--border) calc(var(--pct, 50) * 1%) 100%
    );
}
.donut-ring::after {
    content: '';
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bg-secondary);
    position: absolute;
}

.donut-val {
    position: relative;
    z-index: 1;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.donut-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}


/* ================================================================
   二十七、侧边注解 / Margin Notes (Aside Annotations)
   ================================================================ */

.aside-row {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 20px;
    margin: 20px 0;
    align-items: start;
}

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

.aside-note {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    border-left: 3px solid var(--accent);
    padding: 12px 14px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
    position: sticky;
    top: 16px;
}

.aside-title {
    font-weight: 600;
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.aside-note.info  { border-left-color: #5a8cb0; }
.aside-note.warn  { border-left-color: #b0a05a; }
.aside-note.tip   { border-left-color: #5a8a5a; }
.aside-note.ref   { border-left-color: #7a6aaa; }
.aside-note.info  .aside-title { color: #5a8cb0; }
.aside-note.warn  .aside-title { color: #b0a05a; }
.aside-note.tip   .aside-title { color: #5a8a5a; }
.aside-note.ref   .aside-title { color: #7a6aaa; }
[data-theme="dark"] .aside-note.info  .aside-title { color: #8ab8d0; }
[data-theme="dark"] .aside-note.warn  .aside-title { color: #c8b890; }
[data-theme="dark"] .aside-note.tip   .aside-title { color: #8ab88a; }
[data-theme="dark"] .aside-note.ref   .aside-title { color: #aaa0ca; }


/* ================================================================
   二十八、标签页切换展示 (Tab Panel)
   ================================================================ */

.tab-panel {
    margin: 20px 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.tab-bar {
    display: flex;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.tab-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    user-select: none;
    font-family: var(--font-mono);
}
.tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-primary);
}
.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.tab-content {
    display: none;
    padding: 14px;
    background: var(--bg-card);
}
.tab-content.active {
    display: block;
}
.tab-content pre {
    margin: 0;
}


/* ================================================================
   二十九、横幅/公告牌 (Banner / Bulletin)
   ================================================================ */

.banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin: 20px 0;
}

.banner-icon {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

.banner-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
    color: var(--text-primary);
}
.banner p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    color: var(--text-secondary);
}

.banner-info    { background: var(--bg-primary); border-left: 3px solid #5a8cb0; }
.banner-success { background: var(--bg-primary); border-left: 3px solid #5a8a5a; }
.banner-warn    { background: var(--bg-primary); border-left: 3px solid #b0a05a; }
.banner-danger  { background: var(--bg-primary); border-left: 3px solid #a05a5a; }

.banner-info    .banner-icon { background: #5a8cb0; }
.banner-success .banner-icon { background: #5a8a5a; }
.banner-warn    .banner-icon { background: #b0a05a; }
.banner-danger  .banner-icon { background: #a05a5a; }


/* ================================================================
   三十、并列对比卡组 (Side-by-Side Card Deck)
   ================================================================ */

.card-deck {
    display: grid;
    gap: 14px;
    margin: 20px 0;
}
.card-deck.deck-2 { grid-template-columns: 1fr 1fr; }
.card-deck.deck-3 { grid-template-columns: 1fr 1fr 1fr; }
.card-deck.deck-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

@media (max-width: 900px) {
    .card-deck.deck-3,
    .card-deck.deck-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 550px) {
    .card-deck.deck-2,
    .card-deck.deck-3,
    .card-deck.deck-4 { grid-template-columns: 1fr; }
}

.deck-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s;
}
.deck-card:hover {
    border-color: var(--accent);
}

.deck-card-header {
    padding: 10px 16px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    text-align: center;
    font-family: var(--font-mono);
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border);
}
.deck-card:nth-child(1) .deck-card-header { border-bottom-color: #5a8cb0; }
.deck-card:nth-child(2) .deck-card-header { border-bottom-color: #5a8a5a; }
.deck-card:nth-child(3) .deck-card-header { border-bottom-color: #b08a5a; }
.deck-card:nth-child(4) .deck-card-header { border-bottom-color: #7a6aaa; }
.deck-card:nth-child(5) .deck-card-header { border-bottom-color: #8a5a7a; }

.deck-card-body {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    flex: 1;
}

.deck-card-body ul {
    margin: 0;
    padding-left: 16px;
}

.deck-card-footer {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    text-align: center;
    border-top: 1px solid var(--border-light);
}


/* ================================================================
   三十一、引用块组 (Quote Cluster)
   ================================================================ */

.quote-cluster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.quote-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px 20px;
    border-left: 3px solid var(--accent);
    margin: 0;
    position: relative;
}
.quote-card::before {
    content: '"';
    position: absolute;
    top: 6px;
    left: 12px;
    font-size: 2rem;
    color: var(--border);
    line-height: 1;
    font-family: var(--font-serif);
}
.quote-card p {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.7;
    margin: 0 0 6px 0;
    font-style: italic;
}
.quote-card cite {
    font-size: 11px;
    color: var(--text-muted);
    font-style: normal;
    display: block;
    text-align: right;
}


/* ================================================================
   三十二、键值对属性表 (Property Sheet)
   ================================================================ */

.prop-sheet {
    margin: 20px 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.prop-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    border-bottom: 1px solid var(--border-light);
}
.prop-row:last-child {
    border-bottom: none;
}

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

.prop-row dt {
    padding: 8px 14px;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    font-family: var(--font-mono);
}

.prop-row dd {
    padding: 8px 14px;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}


/* ================================================================
   三十三、继承关系图 (Inheritance Diagram)
   适用：接口/父类 → 子类 的层级关系
   ================================================================ */

.inheritance-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 20px 0;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
}

.diagram-label {
    padding: 6px 14px;
    background: var(--accent);
    color: #fff;
    border-radius: 3px;
    font-weight: 600;
    font-size: 13px;
}

.diagram-arrow {
    font-size: 18px;
    color: var(--text-muted);
}

.diagram-line {
    font-size: 14px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.diagram-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.diagram-item {
    padding: 6px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 13px;
    color: var(--text-primary);
}

.diagram-space {
    width: 12px;
}


/* ================================================================
   三十四、网络分层图 (Network Flow Layers)
   适用：OSI/TCP-IP 等分层协议栈
   ================================================================ */

.network-flow {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 20px 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.flow-layer {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-primary);
    border-left: 3px solid transparent;
}

.flow-layer:nth-child(1) { border-left-color: #5a8cb0; }
.flow-layer:nth-child(2) { border-left-color: #5a8a5a; }
.flow-layer:nth-child(3) { border-left-color: #b08a5a; }
.flow-layer:nth-child(4) { border-left-color: #7a6aaa; }
.flow-layer:nth-child(5) { border-left-color: #8a5a7a; }

.layer-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    min-width: 100px;
    font-family: var(--font-mono);
}

.flow-step {
    padding: 4px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-mono);

/* ================================================================
   33. 垂直时间线 (Vertical Timeline)
   结构：时间(左) — 竖线+圆点(中) — 事件卡片(右)
   每个块表示从该时间点开始到下一个时间点之间发生的事
   变体：.tl-sub.success(绿) .tl-sub.warn(橙)
   ================================================================ */

.timeline {
    display: flex;
    flex-direction: column;
    margin: 16px 0;
}

.tl-row {
    display: flex;
    align-items: flex-start;
}

.tl-time {
    flex: 0 0 60px;
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--accent);
    padding: 6px 10px 0 0;
    white-space: nowrap;
}

.tl-track {
    flex: 0 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.tl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--accent);
    flex-shrink: 0;
    margin-top: 9px;
    z-index: 1;
}

.tl-line {
    flex: 1;
    width: 2px;
    background: var(--border);
    min-height: 12px;
}

.tl-card {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    background: var(--bg-card);
    margin-bottom: 4px;
    margin-left: 6px;
}

.tl-event {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.tl-sub {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.tl-sub::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-muted);
}

.tl-sub.success { color: #43a047; }
.tl-sub.success::before { background: #43a047; }
.tl-sub.warn { color: #e67e22; }
.tl-sub.warn::before { background: #e67e22; }