/* ============================================================================
   Snipinsta — "Refined Studio" (1a) theme
   ----------------------------------------------------------------------------
   Design Conversion Package v1.0, phases 1-2 (tokens + global chrome).
   Source of truth: "Snipinsta Conversion Plan.dc.html" §1 (tokens) and §2
   (components). Do not hard-code hexes in Blade partials - use the variables
   or the .si-* component classes below.

   Loaded only when the refined theme is active (see config/theme.php), after
   home.css / navigation.css so it can override them. Chrome overrides are
   scoped to `body.theme-refined` so they outrank the specificity of the
   in-body <style> blocks in home-nav.blade.php / home-footer.blade.php
   regardless of document order.
   ========================================================================= */

/* ---------------------------------------------------------------- 1 tokens */

:root {
    --brand: #4f46e5;
    --brand-hover: #4338ca;
    --brand-tint: #eef2ff;
    --grad: linear-gradient(135deg, #6366f1, #8b5cf6);

    --bg: #fbfbfd;
    --surface: #fff;
    --surface-alt: #f4f4f7;
    --footer: #0e1020;

    --ink: #0f172a;
    --muted: #475569;
    --secondary: #64748b;
    --faint: #94a3b8;

    --border: rgba(15, 23, 42, .08);
    --border-strong: rgba(15, 23, 42, .12);

    --ok: #22c55e;
    --warn: #f59e0b;

    --r-chip: 7px;
    --r-btn: 11px;
    --r-card: 16px;
    --r-panel: 20px;
    --r-pill: 99px;

    --sh-card: 0 1px 2px rgba(15, 23, 42, .04);
    --sh-hover: 0 16px 34px -18px rgba(15, 23, 42, .35);
    --sh-panel: 0 30px 70px -40px rgba(15, 23, 42, .5);

    --font: 'Geist', system-ui, sans-serif;
    --mono: 'Geist Mono', monospace;

    /* Extensions to the §1 block, used by §2 component recipes:
       the soft tint behind drop-zones/principle cards, the brand-tinted
       button shadow, and the light brand used on dark surfaces. */
    --brand-tint-soft: #f5f5ff;
    --brand-light: #818cf8;
    --sh-brand: 0 8px 18px -6px rgba(79, 70, 229, .7);
    --border-brand: rgba(99, 102, 241, .4);
}

/* ------------------------------------------------------------- 2 base skin */

body.theme-refined {
    background: var(--bg);
    font-family: var(--font);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

body.theme-refined h1,
body.theme-refined h2,
body.theme-refined h3 {
    letter-spacing: -.02em;
    font-weight: 800;
    text-wrap: balance;
}

body.theme-refined h1 {
    letter-spacing: -.03em;
}

/* :not(.btn) matters. This selector is (0,1,2); Bootstrap paints button text
   with `.btn { color: var(--bs-btn-color) }` at (0,1,0), so without the
   exclusion this rule wins on every <a class="btn ..."> and repaints white
   button labels brand-indigo. Same reason .si-btn is excluded. */
body.theme-refined a:not(.btn):not(.si-btn) {
    color: var(--brand);
    text-decoration: none;
}

body.theme-refined a:not(.btn):not(.si-btn):hover {
    color: var(--brand-hover);
}

body.theme-refined ::selection {
    background: #c7d2fe;
}

body.theme-refined :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------------------------ 3 top nav */

/* !important is required here: the markup carries Bootstrap's .bg-white
   utility (itself !important) and an inline border-bottom on <nav>. */
body.theme-refined .mega-nav {
    background: rgba(255, 255, 255, .86) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border) !important;
    padding-top: 0;
    padding-bottom: 0;
}

body.theme-refined .mega-nav.scrolled {
    box-shadow: var(--sh-card);
}

body.theme-refined .mega-nav > .container-fluid {
    min-height: 64px;
    gap: 8px;
}

body.theme-refined .mega-nav .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

/* Top-level links */
body.theme-refined .mega-nav .navbar-nav > .nav-item > .nav-link {
    font-weight: 600;
    font-size: 13.5px;
    color: #334155;
    padding: 8px 12px;
    border-radius: 9px;
    transition: background .15s, color .15s;
}

body.theme-refined .mega-nav .navbar-nav > .nav-item > .nav-link:hover {
    background: var(--brand-tint);
    color: var(--brand);
}

body.theme-refined .mega-nav .navbar-nav > .nav-item > .nav-link.active,
body.theme-refined .mega-nav .navbar-nav > .nav-item > .nav-link.show {
    color: var(--brand);
}

/* Mega-menu sheet */
body.theme-refined .mega-nav .mega-menu {
    border: none;
    border-top: 1px solid rgba(15, 23, 42, .07);
    border-radius: 0 0 var(--r-panel) var(--r-panel);
    box-shadow: var(--sh-panel);
    background: var(--surface);
}

body.theme-refined .mega-col {
    border-right: 1px solid var(--border);
}

body.theme-refined .mega-col:last-child {
    border-right: 0;
}

/* Column headings become eyebrow labels: 11/700/uppercase/.06em/faint */
body.theme-refined .mega-heading {
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--faint);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 12px;
}

body.theme-refined .mega-heading i {
    color: var(--faint);
}

body.theme-refined .mega-link {
    font-size: 13.5px;
    color: #334155;
    border-radius: var(--r-chip);
    padding: 6px 8px;
}

body.theme-refined .mega-link i {
    color: var(--faint);
}

body.theme-refined .mega-link:hover,
body.theme-refined .mega-link.active {
    background: var(--brand-tint);
    color: var(--brand);
}

body.theme-refined .mega-link:hover i,
body.theme-refined .mega-link.active i {
    color: var(--brand);
}

/* Hub links read as brand-weighted entries, per §2 mega-menu spec */
body.theme-refined .mega-link--hub {
    background: transparent;
    color: var(--brand);
    font-weight: 600;
}

body.theme-refined .mega-link--hub i {
    color: var(--brand);
}

/* Markup carries Bootstrap's .bg-info-subtle / .text-info utilities, which
   are !important - restate the brand tint at the same weight. */
body.theme-refined .mega-badge {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    background: var(--brand-tint) !important;
    color: var(--brand) !important;
    border-radius: 5px;
    padding: 2px 6px;
}

body.theme-refined .mega-promo {
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
    border-radius: 0 0 var(--r-panel) var(--r-panel);
}

body.theme-refined .mega-promo-link {
    color: var(--brand);
    font-weight: 600;
    font-size: 13px;
}

/* Secondary (Effects) dropdown */
body.theme-refined .mega-nav .dropdown-menu:not(.mega-menu) {
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-hover);
    padding: 6px;
}

body.theme-refined .mega-nav .dropdown-item {
    font-size: 13.5px;
    border-radius: var(--r-chip);
    color: #334155;
}

body.theme-refined .mega-nav .dropdown-item:hover,
body.theme-refined .mega-nav .dropdown-item:focus {
    background: var(--brand-tint);
    color: var(--brand);
}

/* Search affordance: #f1f5f9 pill with mono ⌘K, per §2 global chrome */
body.theme-refined .mega-nav .nav-search-trigger,
body.theme-refined .mobile-search-trigger {
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 10px;
    color: var(--faint);
}

body.theme-refined .mega-nav .nav-search-trigger kbd,
body.theme-refined .mega-nav .nav-search-trigger .kbd {
    font-family: var(--mono);
    font-size: 10px;
    background: transparent;
    color: var(--faint);
}

body.theme-refined .hamburger-inner,
body.theme-refined .hamburger-inner::before,
body.theme-refined .hamburger-inner::after {
    background: #334155;
}

/* Mobile chrome */
body.theme-refined .mobile-bottom-nav {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
}

body.theme-refined .mobile-bottom-nav__item {
    color: var(--secondary);
}

body.theme-refined .mobile-bottom-nav__item:hover,
body.theme-refined .mobile-bottom-nav__item.active,
body.theme-refined .mobile-bottom-nav__item.active i {
    color: var(--brand);
    background: var(--brand-tint);
}

body.theme-refined .mobile-search-container {
    border-radius: var(--r-panel);
    box-shadow: var(--sh-panel);
}

body.theme-refined .mobile-search-input {
    border: 1px solid var(--border-strong);
    border-radius: var(--r-btn);
    font-size: 14px;
}

body.theme-refined .mobile-search-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

body.theme-refined .mobile-search-results .list-group-item:hover {
    background: var(--brand-tint);
    color: var(--brand);
}

/* Mobile collapse panel */
@media (max-width: 991.98px) {
    body.theme-refined .mega-nav .navbar-collapse {
        background: var(--surface);
        border-top: 1px solid var(--border);
    }

    body.theme-refined .mega-nav .navbar-nav > .nav-item > .nav-link {
        border-bottom: 1px solid var(--border);
        border-radius: 0;
    }

    body.theme-refined .mega-col {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    body.theme-refined .mega-heading.mega-open {
        color: var(--brand);
        background: var(--brand-tint);
    }

    body.theme-refined .mega-promo {
        border-radius: var(--r-chip);
    }
}

/* -------------------------------------------------------------- 4 footer */

body.theme-refined .footer-modern {
    background: var(--footer);
    color: rgba(255, 255, 255, .72);
}

body.theme-refined .footer-desc,
body.theme-refined .footer-label {
    color: rgba(255, 255, 255, .72);
}

body.theme-refined .footer-heading {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: none;
    letter-spacing: -.01em;
}

body.theme-refined .footer-link {
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}

body.theme-refined .footer-link:hover {
    color: #fff;
}

/* Social tiles: rounded squares on rgba(255,255,255,.08), per §2 */
body.theme-refined .footer-social {
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

body.theme-refined .footer-social:hover {
    background: var(--brand);
    color: #fff;
}

body.theme-refined .btn-extension {
    border-color: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .72);
    border-radius: var(--r-btn);
}

body.theme-refined .btn-extension:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

body.theme-refined .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .5);
}

body.theme-refined .footer-bottom-link {
    color: var(--brand-light);
}

body.theme-refined .footer-bottom-link:hover {
    color: #a5b4fc;
}

body.theme-refined .footer-link:focus-visible,
body.theme-refined .footer-social:focus-visible,
body.theme-refined .footer-bottom-link:focus-visible {
    outline: 2px solid var(--brand-light);
}

/* ==========================================================================
   5 · Components (§2)
   Unscoped on purpose: these classes are the contract for <x-ui.*> Blade
   components and must render identically wherever they are used.
   ========================================================================== */

/* --- eyebrow ------------------------------------------------------------ */

.si-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--faint);
}

/* --- buttons ------------------------------------------------------------ */

.si-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--r-btn);
    font-family: var(--font);
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.si-btn--primary {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--sh-brand);
}

.si-btn--primary:hover {
    background: var(--brand-hover);
    color: #fff;
}

.si-btn--secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: #334155;
}

.si-btn--secondary:hover {
    border-color: rgba(79, 70, 229, .35);
    color: var(--brand);
}

.si-btn--ghost {
    background: transparent;
    color: #334155;
}

.si-btn--ghost:hover {
    background: var(--brand-tint);
    color: var(--brand);
}

.si-btn--lg {
    padding: 14px 22px;
    font-size: 15px;
}

.si-btn--sm {
    padding: 8px 14px;
    font-size: 12.5px;
}

.si-btn--block {
    width: 100%;
}

.si-btn:disabled,
.si-btn[aria-disabled="true"] {
    opacity: .55;
    pointer-events: none;
}

/* --- pills / chips ------------------------------------------------------ */

.si-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid rgba(15, 23, 42, .1);
    font-weight: 600;
    font-size: 13px;
    color: #334155;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.si-pill:hover {
    border-color: rgba(79, 70, 229, .35);
    color: var(--brand);
}

.si-pill--brand {
    background: var(--brand-tint);
    border-color: transparent;
    color: var(--brand);
    font-weight: 700;
    font-size: 11px;
    padding: 5px 11px;
}

.si-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    flex: none;
}

/* --- badges ------------------------------------------------------------- */

.si-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 5px;
    background: var(--surface-alt);
    color: var(--secondary);
}

.si-badge--brand {
    background: var(--brand-tint);
    color: var(--brand);
}

.si-badge--warn {
    background: #fef3c7;
    color: #b45309;
}

.si-badge--ok {
    background: #dcfce7;
    color: #15803d;
}

/* --- tool card ---------------------------------------------------------- */

.si-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 20px;
    box-shadow: var(--sh-card);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .18s, border-color .18s, transform .18s;
}

.si-card:hover {
    box-shadow: var(--sh-hover);
    border-color: rgba(79, 70, 229, .35);
    color: inherit;
}

.si-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    margin-bottom: 14px;
}

.si-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--ink);
}

.si-card__desc {
    font-size: 13px;
    color: var(--secondary);
    margin: 0;
}

/* --- panel (tool workspace shell) --------------------------------------- */

.si-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-panel);
    box-shadow: var(--sh-panel);
    overflow: hidden;
}

.si-panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(15, 23, 42, .07);
    background: #fafafb;
}

.si-panel__title {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
}

.si-panel__meta {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    color: var(--faint);
}

.si-panel__status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--secondary);
}

.si-panel__body {
    padding: 32px;
}

/* --- form field --------------------------------------------------------- */

.si-field {
    display: block;
    margin-bottom: 14px;
}

.si-field__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}

.si-field__control {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-btn);
    background: var(--surface);
    font-family: var(--font);
    font-size: 13px;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}

.si-field__control::placeholder {
    color: var(--faint);
}

.si-field__control:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

.si-field__hint {
    font-size: 11px;
    color: var(--faint);
    margin-top: 6px;
}

.si-field__error {
    font-size: 11.5px;
    color: #dc2626;
    margin-top: 6px;
}

.si-field--invalid .si-field__control {
    border-color: #dc2626;
}

/* --- drop zone ---------------------------------------------------------- */

.si-dropzone {
    border: 2px dashed var(--border-brand);
    background: var(--brand-tint-soft);
    border-radius: var(--r-card);
    padding: 26px 24px;
    text-align: center;
    transition: border-color .15s, background .15s;
}

.si-dropzone:hover,
.si-dropzone.is-dragover {
    border-color: var(--brand);
    background: var(--brand-tint);
}

.si-dropzone__icon {
    width: 60px;
    height: 60px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--brand);
    margin: 0 auto 16px;
}

.si-dropzone__title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
    color: var(--ink);
}

.si-dropzone__hint {
    font-size: 13px;
    color: var(--faint);
    margin-bottom: 18px;
}

.si-dropzone__note {
    margin-top: 16px;
    font-size: 11px;
    color: #b6bcc7;
}

/* Checkerboard for transparent-result previews (§2 drop-zone spec) */
.si-checkerboard {
    background-image:
        linear-gradient(45deg, #eef0f4 25%, transparent 25%),
        linear-gradient(-45deg, #eef0f4 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef0f4 75%),
        linear-gradient(-45deg, transparent 75%, #eef0f4 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 767.98px) {
    .si-panel__body {
        padding: 20px;
    }

    .si-dropzone {
        padding: 20px 16px;
    }

    .si-btn {
        min-height: 44px;
    }
}

/* ==========================================================================
   6 · Bootstrap primitives
   The ~190 tool/blog/hub pages are built from stock Bootstrap components and
   are not being rewritten file-by-file. Bootstrap 5.3 reads every component's
   colors, radii and spacing from --bs-* custom properties, so remapping those
   onto our tokens converts the body content of every page at once - including
   hover/active/focus states, which follow automatically.

   Everything here is scoped to body.theme-refined. That is deliberate: page
   CSS loads after this file (@stack('styles') and in-body <style> blocks), so
   order cannot be relied on - the extra element+class specificity is what wins
   against the bare .foo selectors those pages use.
   ========================================================================== */

body.theme-refined {
    --bs-font-sans-serif: var(--font);
    --bs-font-monospace: var(--mono);
    --bs-body-font-family: var(--font);
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: 15, 23, 42;
    --bs-body-bg: var(--bg);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--secondary);

    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-primary-text-emphasis: var(--brand-hover);
    --bs-primary-bg-subtle: var(--brand-tint);
    --bs-primary-border-subtle: rgba(79, 70, 229, .3);

    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: var(--brand-hover);
    --bs-link-hover-color-rgb: 67, 56, 202;

    --bs-border-color: var(--border-strong);
    --bs-border-color-translucent: var(--border);

    --bs-border-radius: var(--r-btn);
    --bs-border-radius-sm: var(--r-chip);
    --bs-border-radius-lg: var(--r-card);
    --bs-border-radius-xl: var(--r-panel);
    --bs-border-radius-2xl: var(--r-panel);
    --bs-border-radius-pill: var(--r-pill);

    --bs-box-shadow: var(--sh-hover);
    --bs-box-shadow-sm: var(--sh-card);
    --bs-box-shadow-lg: var(--sh-panel);

    --bs-success: #22c55e;
    --bs-success-rgb: 34, 197, 94;
    --bs-warning: #f59e0b;
    --bs-warning-rgb: 245, 158, 11;
}

/* --- headings ----------------------------------------------------------- */

body.theme-refined h1,
body.theme-refined h2,
body.theme-refined h3,
body.theme-refined h4,
body.theme-refined .h1,
body.theme-refined .h2,
body.theme-refined .h3 {
    font-family: var(--font);
    color: var(--ink);
}

body.theme-refined h4,
body.theme-refined h5,
body.theme-refined h6 {
    font-weight: 700;
    letter-spacing: -.01em;
}

body.theme-refined .text-muted {
    color: var(--secondary) !important;
}

/* --- buttons ------------------------------------------------------------ */

body.theme-refined .btn {
    --bs-btn-font-family: var(--font);
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--r-btn);
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

body.theme-refined .btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-bg: var(--brand-hover);
    --bs-btn-active-border-color: var(--brand-hover);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    box-shadow: var(--sh-brand);
}

body.theme-refined .btn-primary:hover {
    box-shadow: 0 10px 22px -6px rgba(79, 70, 229, .75);
}

body.theme-refined .btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--brand-tint);
    --bs-btn-hover-color: var(--brand);
    --bs-btn-hover-border-color: rgba(79, 70, 229, .35);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-active-color: #fff;
}

body.theme-refined .btn-secondary,
body.theme-refined .btn-light {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: #334155;
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--surface-alt);
    --bs-btn-hover-color: var(--brand);
    --bs-btn-hover-border-color: rgba(79, 70, 229, .35);
}

body.theme-refined .btn-success {
    --bs-btn-bg: var(--ok);
    --bs-btn-border-color: var(--ok);
    --bs-btn-hover-bg: #16a34a;
    --bs-btn-hover-border-color: #16a34a;
}

/* --- cards -------------------------------------------------------------- */

body.theme-refined .card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--r-card);
    --bs-card-inner-border-radius: calc(var(--r-card) - 1px);
    --bs-card-cap-bg: #fafafb;
    --bs-card-spacer-x: 20px;
    --bs-card-spacer-y: 20px;
    box-shadow: var(--sh-card);
    transition: box-shadow .18s, border-color .18s;
}

body.theme-refined .card:hover {
    box-shadow: var(--sh-hover);
}

body.theme-refined .card-title {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* --- forms -------------------------------------------------------------- */

body.theme-refined .form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}

body.theme-refined .form-control,
body.theme-refined .form-select {
    border-radius: var(--r-btn);
    border-color: var(--border-strong);
    font-family: var(--font);
    font-size: 13px;
    padding: 11px 13px;
    color: var(--ink);
}

body.theme-refined .form-control::placeholder {
    color: var(--faint);
}

body.theme-refined .form-control:focus,
body.theme-refined .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

body.theme-refined .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

body.theme-refined .form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

body.theme-refined .form-range::-webkit-slider-thumb {
    background: var(--brand);
}

body.theme-refined .form-range::-moz-range-thumb {
    background: var(--brand);
}

body.theme-refined .input-group-text {
    background: var(--surface-alt);
    border-color: var(--border-strong);
    border-radius: var(--r-btn);
    font-size: 13px;
    color: var(--secondary);
}

/* --- accordion (FAQ blocks on ~153 pages) ------------------------------- */

body.theme-refined .accordion {
    --bs-accordion-bg: var(--surface);
    --bs-accordion-border-color: var(--border);
    --bs-accordion-border-radius: var(--r-card);
    --bs-accordion-inner-border-radius: calc(var(--r-card) - 1px);
    --bs-accordion-btn-color: var(--ink);
    --bs-accordion-btn-bg: var(--surface);
    --bs-accordion-active-color: var(--brand);
    --bs-accordion-active-bg: var(--brand-tint);
    --bs-accordion-btn-focus-border-color: var(--brand);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
    --bs-accordion-btn-icon-width: .9rem;
}

body.theme-refined .accordion-button {
    font-weight: 600;
    font-size: 14px;
}

body.theme-refined .accordion-body {
    font-size: 13.5px;
    color: var(--secondary);
    line-height: 1.7;
}

/* --- badges ------------------------------------------------------------- */

body.theme-refined .badge {
    --bs-badge-border-radius: var(--r-chip);
    --bs-badge-font-weight: 600;
    letter-spacing: .01em;
}

body.theme-refined .badge.bg-primary {
    background: var(--brand) !important;
}

body.theme-refined .badge.bg-primary-subtle,
body.theme-refined .badge.bg-info-subtle,
body.theme-refined .badge.bg-light {
    background: var(--brand-tint) !important;
    color: var(--brand) !important;
}

/* --- alerts ------------------------------------------------------------- */

body.theme-refined .alert {
    --bs-alert-border-radius: var(--r-card);
    border-color: var(--border);
    font-size: 13.5px;
}

body.theme-refined .alert-primary,
body.theme-refined .alert-info {
    --bs-alert-bg: var(--brand-tint);
    --bs-alert-color: var(--brand-hover);
    --bs-alert-border-color: rgba(79, 70, 229, .2);
}

/* --- breadcrumb --------------------------------------------------------- */

body.theme-refined .breadcrumb {
    --bs-breadcrumb-font-size: 12.5px;
    --bs-breadcrumb-divider-color: var(--faint);
    --bs-breadcrumb-item-active-color: var(--muted);
    margin-bottom: 0;
}

body.theme-refined .breadcrumb a {
    color: var(--faint);
}

body.theme-refined .breadcrumb a:hover {
    color: var(--brand);
}

/* --- tables (comparison tables on alternative/pricing pages) ------------ */

body.theme-refined .table {
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--brand-tint);
    font-size: 13.5px;
}

body.theme-refined .table > thead {
    --bs-table-bg: var(--surface-alt);
}

body.theme-refined .table > thead th {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--faint);
    border-bottom: 2px solid var(--border-strong);
}

/* --- misc --------------------------------------------------------------- */

body.theme-refined .progress {
    --bs-progress-bg: var(--surface-alt);
    --bs-progress-border-radius: var(--r-pill);
    --bs-progress-bar-bg: var(--brand);
}

body.theme-refined .list-group {
    --bs-list-group-border-color: var(--border);
    --bs-list-group-border-radius: var(--r-card);
    --bs-list-group-active-bg: var(--brand);
    --bs-list-group-active-border-color: var(--brand);
    --bs-list-group-action-hover-bg: var(--brand-tint);
}

body.theme-refined .modal {
    --bs-modal-border-radius: var(--r-panel);
    --bs-modal-border-color: var(--border);
    --bs-modal-box-shadow: var(--sh-panel);
}

/* Pagination - blog index and the meme gallery. Bootstrap's default active
   background is #0d6efd, which is otherwise the last legacy blue on the site. */
body.theme-refined .pagination {
    --bs-pagination-color: var(--muted);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-border-radius: var(--r-chip);
    --bs-pagination-hover-color: var(--brand);
    --bs-pagination-hover-bg: var(--brand-tint);
    --bs-pagination-hover-border-color: var(--border);
    --bs-pagination-focus-color: var(--brand);
    --bs-pagination-focus-bg: var(--brand-tint);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    font-size: 13.5px;
}

body.theme-refined .toast {
    --bs-toast-border-radius: var(--r-card);
    --bs-toast-border-color: var(--border);
    --bs-toast-box-shadow: var(--sh-hover);
    font-size: 13.5px;
}

body.theme-refined .tooltip {
    --bs-tooltip-bg: var(--ink);
    --bs-tooltip-border-radius: var(--r-chip);
    --bs-tooltip-font-size: 11.5px;
}

body.theme-refined .popover {
    --bs-popover-border-color: var(--border);
    --bs-popover-border-radius: var(--r-card);
    --bs-popover-header-bg: var(--surface-alt);
}

body.theme-refined .offcanvas {
    --bs-offcanvas-border-color: var(--border);
}

body.theme-refined .btn-close:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

body.theme-refined .nav-tabs {
    --bs-nav-tabs-border-color: var(--border);
    --bs-nav-tabs-link-active-color: var(--brand);
    --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface);
}

body.theme-refined .nav-pills {
    --bs-nav-pills-link-active-bg: var(--brand);
    --bs-nav-pills-border-radius: var(--r-chip);
}

body.theme-refined .dropdown-menu {
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-border-radius: var(--r-card);
    --bs-dropdown-link-active-bg: var(--brand);
    --bs-dropdown-link-hover-bg: var(--brand-tint);
    box-shadow: var(--sh-hover);
}

body.theme-refined .text-primary {
    color: var(--brand) !important;
}

body.theme-refined .bg-primary {
    background-color: var(--brand) !important;
}

body.theme-refined .border-primary {
    border-color: var(--brand) !important;
}

/* ==========================================================================
   7 · home.css design vocabulary
   home.css is the site-wide stylesheet every page already wears, and it is
   almost entirely variable-driven (.tool-card, .hero-*, .cta-gradient,
   .feature-* all derive from the :root block at home.css:105). Re-pointing
   those variables converts the shared vocabulary across all ~190 pages
   without editing a single view.

   Its own :root sets the old indigo/cyan/purple palette; we restate the same
   names here so the classes below inherit the Refined Studio tokens instead.
   ========================================================================== */

body.theme-refined {
    --primary-light: #8b5cf6;
    --bs-secondary: #4f46e5;
    --bs-info: #6366f1;
    --accent-color: var(--warn);
    --gradient-primary: var(--grad);
    --shadow-custom: var(--sh-hover);

    /* Surfaces: .tool-card / .btn-secondary-custom read --bs-body-bg for their
       fill, so it must resolve to the card surface. The page background is set
       separately in §2 at higher specificity. */
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--border-strong);
    --bs-light: var(--surface-alt);
}

/* --- hero --------------------------------------------------------------- */

body.theme-refined .hero-badge {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    padding: 6px 12px;
}

body.theme-refined .hero-title {
    letter-spacing: -.03em;
    font-weight: 800;
    line-height: 1.05;
}

body.theme-refined .highlight {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.theme-refined .hero-description {
    color: var(--muted);
    line-height: 1.6;
}

/* --- custom buttons ----------------------------------------------------- */

body.theme-refined .btn-primary-custom {
    background: var(--brand);
    border-radius: var(--r-btn);
    font-weight: 700;
    box-shadow: var(--sh-brand);
}

body.theme-refined .btn-primary-custom:hover,
body.theme-refined .btn-primary-custom:focus {
    background: var(--brand-hover);
    box-shadow: 0 12px 26px -10px rgba(79, 70, 229, .8);
}

body.theme-refined .btn-secondary-custom {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-btn);
    color: #334155;
    font-weight: 700;
}

body.theme-refined .btn-secondary-custom:hover,
body.theme-refined .btn-secondary-custom:focus {
    background: var(--surface);
    border-color: rgba(79, 70, 229, .35);
    color: var(--brand);
    box-shadow: var(--sh-hover);
}

/* --- tool / feature / stat cards ---------------------------------------- */

body.theme-refined .tool-card,
body.theme-refined .feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
}

body.theme-refined .tool-card:hover,
body.theme-refined .tool-card:focus,
body.theme-refined .feature-card:hover {
    box-shadow: var(--sh-hover);
    border-color: rgba(79, 70, 229, .35);
    transform: translateY(-4px);
}

/* The 3px scale-in bar on tool cards becomes the brand gradient */
body.theme-refined .tool-card::before {
    background: var(--grad);
}

body.theme-refined .tool-icon {
    background: var(--grad);
    border-radius: var(--r-card);
    box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .45);
}

/* Feature icons become rounded squares on the brand gradient, matching the
   icon-tile treatment used everywhere else in the design language. */
body.theme-refined .feature-icon {
    background: var(--grad);
    border-radius: 14px;
    box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .45);
}

body.theme-refined .icon-wrap {
    background: var(--brand-tint);
    color: var(--brand);
    border-radius: 12px;
}

body.theme-refined .tool-link {
    color: var(--brand);
    font-weight: 600;
}

body.theme-refined .tool-link:hover {
    color: var(--brand-hover);
}

body.theme-refined .stats-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
}

body.theme-refined .stat-number {
    color: var(--brand);
    font-weight: 800;
    letter-spacing: -.02em;
}

/* --- CTA band ----------------------------------------------------------- */

body.theme-refined .cta-gradient,
body.theme-refined .bg-gradient-primary {
    background: linear-gradient(120deg, #4f46e5, #7c3aed);
    border-radius: var(--r-panel);
}

body.theme-refined .cta-gradient .btn {
    background: #fff;
    color: var(--brand);
    border-radius: var(--r-btn);
    font-weight: 700;
}

body.theme-refined .hover-shadow-lg:hover {
    box-shadow: var(--sh-hover) !important;
}

body.theme-refined .bg-light {
    background: var(--surface-alt) !important;
}