.contrast-result {
            background-color: #f8f9fc;
            border-radius: 1rem;
            padding: 1.2rem;
            transition: all 0.2s;
        }
        .ratio-display {
            font-size: 3rem;
            font-weight: 800;
            font-family: monospace;
            line-height: 1.2;
        }
        .badge-wcag {
            font-size: 1rem;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
        }
        .preview-card {
            border-radius: 1rem;
            transition: background-color 0.1s ease;
            background-color: var(--bg-preview, #ffffff);
            color: var(--fg-preview, #000000);
            padding: 1.5rem;
            border: 1px solid rgba(0,0,0,0.1);
            box-shadow: 0 4px 14px rgba(0,0,0,0.05);
        }
        .preview-text {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }
        .large-text-sample {
            font-size: 1.8rem;
            font-weight: 500;
        }
        .small-text-sample {
            font-size: 0.9rem;
        }
        .color-swatch {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            border: 2px solid #fff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        }
        .color-input-group {
            background: #f1f3f5;
            border-radius: 1rem;
            padding: 0.8rem;
        }
        .wcag-table td, .wcag-table th {
            vertical-align: middle;
        }
        .example-palette {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin: 1rem 0;
        }
        .preset-btn {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 2rem;
            padding: 0.4rem 1rem;
            font-size: 0.85rem;
            font-weight: 500;
            transition: 0.1s;
        }
        .preset-btn:hover {
            background: #e9ecef;
            transform: translateY(-1px);
        }
        .formula-box {
            font-family: 'SF Mono', 'Courier New', monospace;
            background: #f2f4f8;
            padding: 1rem;
            border-radius: 12px;
        }
        .depth-marker {
            border-left: 4px solid var(--primary-color);
        }
        .inline-code {
            background: #eef2f7;
            padding: 0.2rem 0.4rem;
            border-radius: 6px;
            font-family: monospace;
        }