/* ==========================================================================
   Developer Tools — unified blue accent + rounded buttons
   (base64, json, html, css, javascript, sql)
   ========================================================================== */

:root {
    --dev-blue: #2563eb;
    --dev-blue-hover: #1d4ed8;
    --dev-blue-light: #eff6ff;
    --dev-blue-border: #bfdbfe;
    --dev-blue-shadow: rgba(37, 99, 235, 0.15);
}

/* Hero icons */
.b64-hero .cat-hero__icon,
.jf-hero .cat-hero__icon,
.jt-hero .cat-hero__icon,
.ht-hero .cat-hero__icon,
.ct-hero .cat-hero__icon,
.jst-hero .cat-hero__icon,
.sqlt-hero .cat-hero__icon {
    background: var(--dev-blue-light) !important;
    color: var(--dev-blue) !important;
    border: 2px solid var(--dev-blue-border) !important;
    box-shadow: 0 2px 10px var(--dev-blue-shadow) !important;
}

[data-theme="dark"] .b64-hero .cat-hero__icon,
[data-theme="dark"] .jf-hero .cat-hero__icon,
[data-theme="dark"] .jt-hero .cat-hero__icon,
[data-theme="dark"] .ht-hero .cat-hero__icon,
[data-theme="dark"] .ct-hero .cat-hero__icon,
[data-theme="dark"] .jst-hero .cat-hero__icon,
[data-theme="dark"] .sqlt-hero .cat-hero__icon {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    box-shadow: none !important;
}

/* Buttons — pill shape */
.b64-btn,
.ht-btn,
.ct-btn,
.jst-btn,
.sqlt-btn,
.jt-btn,
.jf-btn {
    border-radius: 9999px !important;
}

.b64-btn--primary,
.ht-btn--primary,
.ct-btn--primary,
.jst-btn--primary,
.sqlt-btn--primary,
.jt-btn--primary,
.jf-btn--primary {
    background: var(--dev-blue) !important;
    border-color: var(--dev-blue) !important;
    color: #fff !important;
}

.b64-btn--primary:hover,
.ht-btn--primary:hover,
.ct-btn--primary:hover,
.jst-btn--primary:hover,
.sqlt-btn--primary:hover,
.jt-btn--primary:hover,
.jf-btn--primary:hover {
    background: var(--dev-blue-hover) !important;
    border-color: var(--dev-blue-hover) !important;
    color: #fff !important;
}

.b64-btn--outline,
.ht-btn--outline,
.ct-btn--outline,
.jst-btn--outline,
.sqlt-btn--outline {
    color: var(--dev-blue) !important;
    border-color: var(--dev-blue-border) !important;
}

.b64-btn--outline:hover,
.ht-btn--outline:hover,
.ct-btn--outline:hover,
.jst-btn--outline:hover,
.sqlt-btn--outline:hover {
    background: var(--dev-blue-light) !important;
    border-color: var(--dev-blue) !important;
    color: var(--dev-blue) !important;
}

/* Mode cards — active / hover accent */
.b64-mode-card:hover,
.ht-mode-card:hover,
.ct-mode-card:hover,
.jst-mode-card:hover,
.sqlt-mode-card:hover,
.jt-mode-card:hover {
    border-color: var(--dev-blue-border) !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1) !important;
}

.b64-mode-card.is-active,
.ht-mode-card.is-active,
.ct-mode-card.is-active,
.jst-mode-card.is-active,
.sqlt-mode-card.is-active,
.jt-mode-card.is-active {
    border-color: var(--dev-blue) !important;
    box-shadow: 0 4px 20px var(--dev-blue-shadow) !important;
}

.b64-mode-card__check,
.ht-mode-card__check,
.ct-mode-card__check,
.jst-mode-card__check,
.sqlt-mode-card__check,
.jt-mode-card__check {
    background: var(--dev-blue) !important;
}

/* Swap & mode label */
.b64-swap:hover,
.ht-swap:hover,
.ct-swap:hover,
.jst-swap:hover,
.sqlt-swap:hover {
    color: var(--dev-blue) !important;
    border-color: var(--dev-blue-border) !important;
}

.b64-option--mode .b64-current-mode strong,
.ht-option--mode .ht-current-mode strong,
.ct-option--mode .ct-current-mode strong,
.jst-option--mode .jst-current-mode strong,
.sqlt-option--mode .sqlt-current-mode strong {
    color: var(--dev-blue) !important;
}

/* Section eyebrows & step numbers */
.b64-section-eyebrow,
.ht-section-eyebrow,
.ct-section-eyebrow,
.jst-section-eyebrow,
.sqlt-section-eyebrow,
.jt-section-eyebrow,
.jf-section-eyebrow {
    color: var(--dev-blue) !important;
    background: var(--dev-blue-light) !important;
}

.b64-how-list li span,
.ht-how-list li span,
.ct-how-list li span,
.jst-how-list li span,
.sqlt-how-list li span,
.jt-how-list li span {
    background: var(--dev-blue) !important;
}

/* Switches */
.b64-switch input:checked + .b64-switch__slider,
.ht-switch input:checked + .ht-switch__slider,
.ct-switch input:checked + .ct-switch__slider,
.jst-switch input:checked + .jst-switch__slider,
.sqlt-switch input:checked + .sqlt-switch__slider {
    background: var(--dev-blue) !important;
}

/* JSON formatter mode buttons */
.jt-mode-btn.is-active,
.jf-mode-btn.is-active {
    background: var(--dev-blue-light) !important;
    border-color: var(--dev-blue) !important;
    color: var(--dev-blue) !important;
}

/* Sidebar links hover */
.b64-tools-link:hover,
.ht-tools-link:hover,
.ct-tools-link:hover,
.jst-tools-link:hover,
.sqlt-tools-link:hover,
.jt-tools-link:hover,
.jf-tools-link:hover {
    color: var(--dev-blue) !important;
    background: var(--dev-blue-light) !important;
}

.b64-tools-link__icon,
.ht-tools-link__icon,
.ct-tools-link__icon,
.jst-tools-link__icon,
.sqlt-tools-link__icon {
    color: var(--dev-blue) !important;
}

/* What-section pills (sql/js) */
.jst-what__pill svg,
.jst-what__pill [data-lucide],
.sqlt-what__pill svg,
.sqlt-what__pill [data-lucide] {
    color: var(--dev-blue) !important;
}

/* Progress / action bars */
.jst-what__cta,
.sqlt-what__cta {
    background: linear-gradient(135deg, var(--dev-blue), var(--dev-blue-hover)) !important;
}

[data-theme="dark"] .b64-section-eyebrow,
[data-theme="dark"] .ht-section-eyebrow,
[data-theme="dark"] .ct-section-eyebrow,
[data-theme="dark"] .jst-section-eyebrow,
[data-theme="dark"] .sqlt-section-eyebrow,
[data-theme="dark"] .jt-section-eyebrow {
    color: #60a5fa !important;
    background: rgba(37, 99, 235, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}

[data-theme="dark"] .ct-what__demo-row--out,
[data-theme="dark"] .jst-what__demo-row--out,
[data-theme="dark"] .sqlt-what__demo-row--out {
    background: rgba(37, 99, 235, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}