/* Feature list */
    .feature-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 24px 0;
    }

    .feature-item {
        display: flex;
        gap: 16px;
        padding: 16px;
        background: var(--color-background);
        border-radius: 12px;
        align-items: flex-start;
    }

    .feature-icon {
        font-size: var(--font-size-5xl, 28px);
        flex-shrink: 0;
    }

    .feature-content h4 {
        margin: 0 0 var(--spacing-sm) 0;
        font-size: var(--font-size-sm, 14px);
        color: var(--color-secondary);
    }

    .feature-content p {
        margin: 0;
        font-size: var(--font-size-xs, 12px);
        color: var(--color-text-muted);
    }

    /* Tables */
    .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;
    }

    .permissions-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        background: var(--color-card-background);
        border-radius: var(--border-radius-sm);
        overflow: hidden;
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
    }

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

    .permissions-table th {
        background: var(--color-background);
        font-weight: var(--font-weight-semibold, 600);
        font-size: var(--font-size-xs, 12px);
        color: var(--color-text);
    }

    .permissions-table td {
        font-size: var(--font-size-sm, 14px);
    }

    .text-center { text-align: center; }

    /* Workflow steps */
    .workflow-steps {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 24px 0;
    }

    .workflow-step {
        display: flex;
        gap: 16px;
        padding: 16px;
        background: var(--color-card-background);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        align-items: flex-start;
    }

    .step-number {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
        color: var(--color-white, var(--color-hero-text, #fff));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: var(--font-weight-semibold, 600);
        font-size: var(--font-size-base, 16px);
        flex-shrink: 0;
    }

    .step-content h4 {
        margin: 0 0 var(--spacing-sm) 0;
        font-size: var(--font-size-sm, 14px);
        color: var(--color-secondary);
    }

    .step-content p {
        margin: 0;
        font-size: var(--font-size-xs, 12px);
        color: var(--color-text-muted);
    }

    /* Info boxes */
    .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 h4 {
        margin: 0 0 12px;
        color: var(--color-secondary);
        font-size: var(--font-size-sm, 14px);
    }

    .info-box p { margin: 0 0 var(--spacing-sm); color: var(--color-text); line-height: 1.6; }
    .info-box ul { margin: 0; padding-left: 20px; }
    .info-box li { margin: var(--spacing-sm) 0; color: var(--color-text); }

    .info-box-blue { border-left-color: var(--color-primary); }
    .info-box-green { border-left-color: var(--color-success); }
    .info-box-purple { border-left-color: var(--color-info); }
    .info-box-yellow { border-left-color: var(--color-warning); }

    /* Code blocks */
    .code-block {
        background: var(--color-background);
        border: 1px solid var(--color-border-light);
        border-radius: var(--border-radius-sm);
        padding: 16px;
        font-family: monospace;
        font-size: var(--font-size-xs, 12px);
        overflow-x: auto;
        white-space: pre;
        margin: 16px 0;
    }

    /* Related links */
    .related-links {
        list-style: none;
        padding: 0;
        margin: 16px 0;
    }

    .related-links li {
        padding: 10px 16px;
        background: var(--color-background);
        border-radius: var(--border-radius-sm);
        margin-bottom: var(--spacing-sm);
    }

    .related-links li a {
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold, 600);
        text-decoration: none;
    }

    .related-links li a:hover {
        text-decoration: underline;
    }

    /* Swagger button */
    .swagger-btn {
        display: inline-block;
        padding: 10px 20px;
        background: var(--color-card-bg, var(--color-hero-text, #fff));
        color: var(--color-primary);
        border: 2px solid var(--color-primary);
        border-radius: var(--border-radius-sm);
        font-weight: var(--font-weight-semibold, 600);
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .swagger-btn:hover {
        background: var(--color-primary);
        color: var(--color-white);
        text-decoration: none;
    }

    /* Responsive */
    @media (max-width: 575px) {
        .feature-item,
        .workflow-step {
            flex-direction: column;
            text-align: center;
        }

        .permissions-table {
            font-size: var(--font-size-xs, 12px);
        }

        .permissions-table th,
        .permissions-table td {
            padding: var(--spacing-sm) var(--spacing-sm);
        }

        .library-table th,
        .library-table td {
            padding: var(--spacing-sm) var(--spacing-sm);
            font-size: var(--font-size-xs, 12px);
        }
    }