.json-textarea, .yaml-output {
            font-family: 'Courier New', 'Fira Code', monospace;
            font-size: 0.9rem;
            background-color: #f8f9fc;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 1rem;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .yaml-output {
            background-color: #fef9e6;
            border-left: 4px solid #f0ad4e;
            min-height: 280px;
            max-height: 500px;
            overflow: auto;
        }
        .conversion-stats {
            font-size: 0.85rem;
            color: #2c7a4d;
            background: #e9f5ef;
            display: inline-block;
            padding: 0.2rem 0.8rem;
            border-radius: 20px;
        }
        .example-group {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            margin: 1rem 0;
        }
        .badge-json {
            background-color: #2c7a4d20;
            color: #1e5631;
            font-weight: normal;
        }
        .comparison-table th {
            background-color: #eef2f7;
        }
        .highlight-yaml {
            background: #fff8e7;
        }
        .code-caption {
            font-size: 0.75rem;
            color: #4b5563;
            margin-top: 0.25rem;
        }
        .icon-spin {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }