.info-box {
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-left: 4px solid var(--color-primary);
        border-radius: var(--border-radius-sm);
        padding: 16px 20px;
        margin: 20px 0;
    }
    .info-box-blue { border-left-color: var(--color-primary); }
    .info-box-green { border-left-color: var(--color-success); background: var(--color-background); }
    .info-box h4 {
        margin: 0 0 12px;
        color: var(--color-secondary);
        font-size: var(--font-size-sm, 14px);
    }
    .info-box p { margin: 0; color: var(--color-text); }

.data-types-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 20px 0;
    }
    @media (min-width: 768px) {
        .data-types-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .data-type-card {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        background: var(--color-card-background);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-sm);
    }
    .data-type-info strong {
        display: block;
        margin-bottom: 4px;
        color: var(--color-secondary);
    }
    .data-type-info p {
        margin: 0;
        font-size: var(--font-size-xs, 12px);
        color: var(--color-text-muted);
    }


    .library-table {
        width: 100%;
        border-collapse: collapse;
        background: var(--color-card-background);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-sm);
        overflow: hidden;
        margin: 16px 0;
    }
    .library-table th, .library-table td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--color-border);
    }
    .library-table th {
        background: var(--color-background);
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-secondary);
        font-size: var(--font-size-xs, 12px);
    }
    .library-table tbody tr:hover { background: var(--color-background); }
    .library-table tbody tr:last-child td { border-bottom: none; }

    .block-code {
        display: block;
        font-size: var(--font-size-xxs, 11px);
        color: var(--color-text-muted);
        font-family: monospace;
        margin-top: 4px;
    }

    .example-scenario {
        background: var(--color-card-background);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-sm);
        padding: 20px;
        margin: 20px 0;
    }
    .example-scenario h4 {
        margin: 0 0 16px;
        color: var(--color-secondary);
        font-size: var(--font-size-sm, 14px);
    }

    .scenario-blocks {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    .scenario-block {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: var(--border-radius-sm);
        font-size: var(--font-size-sm, 14px);
    }
    .scenario-block.enabled {
        background: var(--color-success-bg);
        color: var(--color-success-dark);
    }
    .scenario-block.disabled {
        background: var(--color-error-bg);
        color: var(--color-error-dark);
    }
    .scenario-icon {
        font-weight: var(--font-weight-semibold, 600);
        width: 40px;
    }
    .scenario-value {
        margin-left: auto;
        font-weight: var(--font-weight-semibold, 600);
    }
    .scenario-hint {
        margin-left: auto;
        font-style: italic;
        font-size: var(--font-size-xs, 12px);
    }

    .related-links {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 16px;
    }
    .related-link {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 12px 16px;
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-sm);
        text-decoration: none;
        color: var(--color-secondary);
        transition: all 0.2s;
    }
    .related-link:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--button-primary-text); }
    .related-icon { font-size: var(--font-size-lg, 18px); }
    .empty-message { text-align: center; color: var(--color-text-muted); padding: 20px; }