.yaml-shell .card {
    border-radius: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 85%, transparent);
}

.yaml-panel {
    background: linear-gradient(180deg, rgba(248, 249, 250, 0.9), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    padding: 1rem;
}

.yaml-panel-source {
    border-color: rgba(13, 110, 253, 0.3);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.08);
}

.yaml-panel-target {
    border-color: rgba(253, 126, 20, 0.32);
    box-shadow: inset 0 0 0 1px rgba(253, 126, 20, 0.1);
}

.yaml-textarea {
    height: 19.5rem !important;
    min-height: 19.5rem !important;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    line-height: 1.55;
    resize: vertical;
    background: color-mix(in srgb, var(--bs-body-bg) 98%, #ffffff);
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--bs-border-color) 88%, transparent);
}

.yaml-textarea:focus {
    background: color-mix(in srgb, var(--bs-body-bg) 99%, #ffffff);
    color: var(--bs-body-color);
}

.yaml-textarea::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.9;
}

.yaml-status-wrap {
    min-height: 3rem;
}

.conversion-route-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.conversion-selector-shell {
    display: grid;
    gap: 1rem;
}

.conversion-selector-group {
    display: grid;
    gap: 0.55rem;
}

.conversion-selector-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.conversion-route-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 0.92rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    cursor: pointer;
}

.conversion-route-pill:hover {
    background: var(--bs-secondary-bg);
}

.conversion-route-pill.is-active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

#source-selector .conversion-route-pill.is-active {
    background: linear-gradient(135deg, #0d6efd 0%, #6ea8fe 100%);
    border-color: #0d6efd;
    color: #ffffff;
    box-shadow: 0 0 0 0.3rem rgba(13, 110, 253, 0.18), 0 0.9rem 1.8rem rgba(13, 110, 253, 0.16);
    transform: translateY(-1px);
}

#source-selector .conversion-route-pill.is-active:hover {
    background: linear-gradient(135deg, #0b5ed7 0%, #7cb2ff 100%);
}

#target-selector .conversion-route-pill.is-active {
    background: linear-gradient(135deg, #fd7e14 0%, #ffb347 100%);
    border-color: #fd7e14;
    color: #1f2937;
    box-shadow: 0 0 0 0.3rem rgba(253, 126, 20, 0.22), 0 0.9rem 1.8rem rgba(253, 126, 20, 0.18);
    transform: translateY(-1px);
}

#target-selector .conversion-route-pill.is-active:hover {
    background: linear-gradient(135deg, #f97316 0%, #ffbf69 100%);
}

[data-bs-theme="dark"] .yaml-shell .card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 94%, #0f172a) 0%, color-mix(in srgb, var(--bs-body-bg) 90%, #111827) 100%);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.22);
}

[data-bs-theme="dark"] .yaml-panel {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.86), rgba(15, 23, 42, 0.94));
    border-color: rgba(148, 163, 184, 0.22);
}

[data-bs-theme="dark"] .yaml-panel-source {
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18), 0 1rem 2rem rgba(13, 110, 253, 0.08);
}

[data-bs-theme="dark"] .yaml-panel-target {
    border-color: rgba(251, 146, 60, 0.5);
    box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.18), 0 1rem 2rem rgba(249, 115, 22, 0.08);
}

[data-bs-theme="dark"] .yaml-textarea {
    background: rgba(15, 23, 42, 0.92);
    color: #e5edf7;
    border-color: rgba(148, 163, 184, 0.22);
}

[data-bs-theme="dark"] .yaml-textarea:focus {
    background: rgba(15, 23, 42, 0.98);
    color: #f8fafc;
    border-color: color-mix(in srgb, var(--bs-primary) 55%, rgba(148, 163, 184, 0.28));
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.18);
}

[data-bs-theme="dark"] .yaml-textarea::placeholder {
    color: rgba(203, 213, 225, 0.7);
}

[data-bs-theme="dark"] .conversion-route-pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.22);
}

[data-bs-theme="dark"] .conversion-route-pill:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] #source-selector .conversion-route-pill.is-active {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    border-color: rgba(96, 165, 250, 0.92);
    color: #eff6ff;
    box-shadow: 0 0 0 0.3rem rgba(59, 130, 246, 0.16), 0 1rem 2rem rgba(0, 0, 0, 0.24);
}

[data-bs-theme="dark"] #target-selector .conversion-route-pill.is-active {
    background: linear-gradient(135deg, #fb923c 0%, #facc15 100%);
    border-color: rgba(251, 146, 60, 0.92);
    color: #111827;
    box-shadow: 0 0 0 0.3rem rgba(251, 146, 60, 0.2), 0 1rem 2rem rgba(0, 0, 0, 0.26);
}

[data-bs-theme="dark"] #data-status {
    color: rgba(203, 213, 225, 0.85) !important;
}

[data-bs-theme="dark"] #data-error {
    color: #fda4af !important;
}

@media (max-width: 991.98px) {
    .yaml-textarea {
        height: 15rem !important;
        min-height: 15rem !important;
    }
}