/* ============================================================================
   CLIP_SYNC — PHONK THEME
   Dark "REC" skin over Metronic 8.2.7. Loaded AFTER style.bundle.css.
   Visual layer only: overrides Bootstrap/Metronic CSS variables + component
   skins. No behavioral selectors are touched.
   Palette: near-black maroon + crimson glow + hairline grid + mono HUD labels.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
---------------------------------------------------------------------------- */
:root {
    --cs-bg: #0a0507;
    --cs-bg-rgb: 10, 5, 7;
    --cs-surface: #120a0e;
    --cs-surface-2: #190f15;
    --cs-line: #261720;
    --cs-line-soft: rgba(255, 255, 255, 0.055);
    --cs-red: #ff2c4c;
    --cs-red-rgb: 255, 44, 76;
    --cs-red-hot: #ff5c75;
    --cs-red-deep: #c40e2e;
    --cs-glow: rgba(255, 44, 76, 0.45);
    --cs-text: #f6f0f3;
    --cs-muted: #8a7780;
    --cs-font-display: 'Anton', 'Archivo Black', Impact, sans-serif;
    --cs-font-body: 'Archivo', Inter, Helvetica, sans-serif;
    --cs-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

/* ----------------------------------------------------------------------------
   2. METRONIC VARIABLE REMAP — applied to light AND dark scope so the existing
      theme-mode toggle keeps working without ever leaving the phonk skin.
---------------------------------------------------------------------------- */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    /* gray scale (inverted, warm maroon-tinted) */
    --bs-gray-100: #160d12; --bs-gray-100-rgb: 22, 13, 18;
    --bs-gray-200: #1d1219; --bs-gray-200-rgb: 29, 18, 25;
    --bs-gray-300: #2a1b23; --bs-gray-300-rgb: 42, 27, 35;
    --bs-gray-400: #3d2a34; --bs-gray-400-rgb: 61, 42, 52;
    --bs-gray-500: #8a7780; --bs-gray-500-rgb: 138, 119, 128;
    --bs-gray-600: #a08e96; --bs-gray-600-rgb: 160, 142, 150;
    --bs-gray-700: #bcadb4; --bs-gray-700-rgb: 188, 173, 180;
    --bs-gray-800: #ddd2d7; --bs-gray-800-rgb: 221, 210, 215;
    --bs-gray-900: #f6f0f3; --bs-gray-900-rgb: 246, 240, 243;
    /* text-gray 100-300 stay readable-muted (views authored for light mode use
       them for helper text/empty states; a literal inversion makes them vanish) */
    --bs-text-gray-100: #4a3b42;
    --bs-text-gray-200: #564650;
    --bs-text-gray-300: #69565f;
    --bs-text-gray-400: #6b5b63;
    --bs-text-gray-500: #8a7780;
    --bs-text-gray-600: #a08e96;
    --bs-text-gray-700: #bcadb4;
    --bs-text-gray-800: #ddd2d7;
    --bs-text-gray-900: #f6f0f3;
    --bs-text-muted: #8a7780;

    /* body / page */
    --bs-body-bg: #0a0507; --bs-body-bg-rgb: 10, 5, 7;
    --bs-body-color: #ded3d8; --bs-body-color-rgb: 222, 211, 216;
    --bs-page-bg: #0a0507;
    --bs-app-blank-bg: #0a0507;
    --bs-heading-color: #f6f0f3;
    --bs-link-color: #ff2c4c;
    --bs-link-hover-color: #ff5c75;
    --bs-emphasis-color: #f6f0f3; --bs-emphasis-color-rgb: 246, 240, 243;
    --bs-secondary-color: #8a7780;
    --bs-tertiary-bg: #190f15;
    --bs-secondary-bg: #1d1219;

    /* contextual colors */
    --bs-primary: #ff2c4c;       --bs-primary-rgb: 255, 44, 76;
    --bs-primary-active: #e01437;
    --bs-primary-light: #2a0f17;
    --bs-primary-inverse: #ffffff;
    --bs-secondary: #241a20;     --bs-secondary-rgb: 36, 26, 32;
    --bs-secondary-active: #2e2129;
    --bs-secondary-light: #1d1219;
    --bs-secondary-inverse: #ddd2d7;
    --bs-light: #160d12;         --bs-light-rgb: 22, 13, 18;
    --bs-light-active: #221520;
    --bs-light-light: #140b10;
    --bs-light-inverse: #bcadb4;
    --bs-success: #1fd271;       --bs-success-rgb: 31, 210, 113;
    --bs-success-active: #11b85e;
    --bs-success-light: #0d2418;
    --bs-success-inverse: #04130b;
    --bs-info: #a85cff;          --bs-info-rgb: 168, 92, 255;
    --bs-info-active: #9039f5;
    --bs-info-light: #221231;
    --bs-info-inverse: #ffffff;
    --bs-warning: #ffb020;       --bs-warning-rgb: 255, 176, 32;
    --bs-warning-active: #ef9d06;
    --bs-warning-light: #2a1f08;
    --bs-warning-inverse: #1c1402;
    --bs-danger: #ff3b5c;        --bs-danger-rgb: 255, 59, 92;
    --bs-danger-active: #e02145;
    --bs-danger-light: #2a0f17;
    --bs-danger-inverse: #ffffff;
    --bs-dark: #0d0709;          --bs-dark-rgb: 13, 7, 9;
    --bs-dark-active: #050203;
    --bs-dark-light: #1d1219;
    --bs-dark-inverse: #f6f0f3;
    --bs-component-active-color: #ffffff;
    --bs-component-active-bg: #ff2c4c;
    --bs-component-hover-color: #ff5c75;
    --bs-component-hover-bg: #1d1219;
    --bs-component-checked-color: #ffffff;
    --bs-component-checked-bg: #ff2c4c;

    /* borders */
    --bs-border-color: #261720;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.06);
    --bs-border-dashed-color: #34222c;
    --bs-root-card-border-color: #261720;
    --bs-root-card-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);

    /* layout chrome */
    --bs-header-bg-color: rgba(12, 6, 9, 0.92);
    --bs-header-border-color: #261720;
    --bs-header-box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    --bs-aside-bg-color: #0d0709;
    --bs-footer-bg-color: transparent;

    /* cards */
    --bs-card-bg: #120a0e;
    --bs-card-border-color: #261720;
    --bs-card-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    --bs-card-cap-bg: transparent;

    /* forms */
    --bs-input-bg: #0f080c;
    --bs-input-color: #f0e8ec;
    --bs-input-solid-color: #f0e8ec;
    --bs-input-solid-bg: #1d1219;
    --bs-input-solid-bg-focus: #241720;
    --bs-input-solid-placeholder-color: #6b5b63;
    --bs-input-border-color: #34222c;
    --bs-input-disabled-bg: #160d12;
    --bs-input-disabled-color: #8a7780;
    --bs-input-placeholder-color: #6b5b63;
    --bs-form-check-input-border: 1px solid #3d2a34;
    --bs-form-check-input-bg-solid: #241a20;

    /* floating ui */
    --bs-modal-bg: #140b10;
    --bs-modal-box-shadow: 0 0 0 1px #261720, 0 24px 80px rgba(0, 0, 0, 0.7);
    --bs-dropdown-bg: #160d12;
    --bs-dropdown-color: #ded3d8;
    --bs-dropdown-link-color: #ded3d8;
    --bs-dropdown-link-hover-bg: #221520;
    --bs-dropdown-box-shadow: 0 0 0 1px #261720, 0 16px 50px rgba(0, 0, 0, 0.6);
    --bs-tooltip-bg: #221520;
    --bs-tooltip-color: #f6f0f3;
    --bs-tooltip-box-shadow: 0 0 0 1px #34222c, 0 8px 30px rgba(0, 0, 0, 0.6);
    --bs-popover-bg: #160d12;
    --bs-popover-border-color: #261720;
    --bs-popover-body-color: #ded3d8;
    --bs-popover-header-color: #f6f0f3;
    --bs-offcanvas-bg: #120a0e;
    --bs-offcanvas-color: #ded3d8;
    --bs-toast-bg: rgba(22, 13, 18, 0.95);
    --bs-toast-header-bg: rgba(29, 18, 25, 0.95);
    --bs-toast-color: #ded3d8;
    --bs-toast-header-color: #f6f0f3;

    /* tables */
    --bs-table-bg: transparent;
    --bs-table-color: #ded3d8;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.018);
    --bs-table-striped-color: #ded3d8;
    --bs-table-hover-bg: rgba(255, 44, 76, 0.045);
    --bs-table-hover-color: #f6f0f3;
    --bs-table-active-bg: #1d1219;
    --bs-table-border-color: #261720;

    /* menus (aside + dropdown menus) */
    --bs-menu-dropdown-bg-color: #160d12;
    --bs-menu-dropdown-box-shadow: 0 0 0 1px #261720, 0 16px 50px rgba(0, 0, 0, 0.6);
    --bs-menu-heading-color: #6b5b63;
    --bs-menu-link-color-hover: #ff5c75;
    --bs-menu-link-color-show: #ff5c75;
    --bs-menu-link-color-here: #ff5c75;
    --bs-menu-link-color-active: #ff7187;
    --bs-menu-link-bg-color-hover: rgba(255, 44, 76, 0.07);
    --bs-menu-link-bg-color-show: rgba(255, 44, 76, 0.07);
    --bs-menu-link-bg-color-here: rgba(255, 44, 76, 0.07);
    --bs-menu-link-bg-color-active: rgba(255, 44, 76, 0.12);

    /* misc metronic */
    --bs-scrolltop-bg-color: #ff2c4c;
    --bs-scrolltop-bg-color-hover: #ff5c75;
    --bs-symbol-label-color: #ded3d8;
    --bs-symbol-label-bg: #1d1219;
    --bs-symbol-border-color: rgba(255, 255, 255, 0.18);
    --bs-checkbox-checked-bg: #ff2c4c;
    --bs-switch-checked-bg: #ff2c4c;
    --bs-code-bg: #190f15;
    --bs-code-shadow: none;
    --bs-code-border-color: #2a1b23;
    --bs-code-color: #ff7187;
    --bs-progress-bg: #241a20;
    --bs-pagination-color: #bcadb4;
    --bs-pagination-bg: transparent;
    --bs-pagination-hover-bg: #1d1219;
    --bs-pagination-hover-color: #ff5c75;
    --bs-pagination-focus-bg: #1d1219;
    --bs-pagination-focus-color: #ff5c75;
    --bs-pagination-active-bg: #ff2c4c;
    --bs-pagination-disabled-color: #4d3c44;
    --bs-pagination-disabled-bg: transparent;
    --bs-accordion-bg: transparent;
    --bs-accordion-color: #ded3d8;
    --bs-accordion-button-color: #f6f0f3;
    --bs-accordion-active-bg: #1d1219;
    --bs-accordion-active-color: #ff5c75;
    --bs-accordion-border-color: #261720;
    --bs-accordion-button-active-bg: #1d1219;
    --bs-accordion-button-active-color: #ff5c75;
    --bs-list-group-bg: transparent;
    --bs-list-group-color: #ded3d8;
    --bs-list-group-border-color: #261720;
    --bs-drawer-bg-color: #120a0e;
    --bs-drawer-box-shadow: 0 0 0 1px #261720, -16px 0 50px rgba(0, 0, 0, 0.6);
    --bs-engage-btn-bg: #160d12;
    --bs-engage-btn-color: #bcadb4;
}

/* ----------------------------------------------------------------------------
   3. BASE — body grid, typography, selection, scrollbars
---------------------------------------------------------------------------- */
body {
    font-family: var(--cs-font-body);
    background-color: var(--cs-bg) !important;
    color: #ded3d8;
}

/* hairline grid + crimson haze, fixed behind everything (matches promo look).
   z-index -1 keeps it under all content without touching component positioning
   (.modal/.swal2-container/.offcanvas MUST stay position:fixed). */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 38%, rgba(255, 44, 76, 0.075), transparent 65%),
        radial-gradient(ellipse 60% 50% at 85% 90%, rgba(196, 14, 46, 0.06), transparent 70%),
        linear-gradient(to right, var(--cs-line-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--cs-line-soft) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .card-label, .fw-bolder {
    font-family: var(--cs-font-body);
    letter-spacing: -0.01em;
}

::selection { background: rgba(255, 44, 76, 0.55); color: #fff; }

* { scrollbar-color: #3d2a34 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3d2a34; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cs-red-deep); }

a { transition: color .15s ease; }

pre {
    color: #cfc3c9;
    background: #0d0709;
    border: 1px solid var(--cs-line);
    border-radius: 8px;
    padding: 1rem;
}

/* ----------------------------------------------------------------------------
   4. HUD / MOTION UTILITIES (used by logo, navbar, hero, auth)
---------------------------------------------------------------------------- */
@keyframes cs-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.12; } }
@keyframes cs-eq {
    0%, 100% { transform: scaleY(0.28); }
    35%      { transform: scaleY(1); }
    65%      { transform: scaleY(0.55); }
}
@keyframes cs-pulse-glow {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 44, 76, 0.35), 0 0 0 1px rgba(255, 44, 76, 0.35); }
    50%      { box-shadow: 0 0 26px rgba(255, 44, 76, 0.65), 0 0 0 1px rgba(255, 44, 76, 0.6); }
}
@keyframes cs-flicker {
    0%, 100% { opacity: 1; }
    92%      { opacity: 1; }
    93%      { opacity: 0.6; }
    94%      { opacity: 1; }
    97%      { opacity: 0.75; }
    98%      { opacity: 1; }
}
@keyframes cs-sweep {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(110%); }
}

.cs-mono {
    font-family: var(--cs-font-mono) !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cs-muted);
}

.cs-rec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cs-font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #e8dde2;
    white-space: nowrap;
}
.cs-rec-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cs-red);
    box-shadow: 0 0 10px var(--cs-glow);
    animation: cs-blink 1.4s steps(1) infinite;
}

/* animated equalizer (logo mark + accents) */
.cs-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 100%;
    width: 100%;
}
.cs-eq i {
    flex: 1 1 0;
    min-width: 2px;
    height: 100%;
    display: block;
    background: var(--cs-red);
    border-radius: 1px;
    transform-origin: bottom;
    animation: cs-eq 1.05s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255, 44, 76, 0.55);
}
.cs-eq i:nth-child(1) { animation-delay: -0.9s; }
.cs-eq i:nth-child(2) { animation-delay: -0.6s; }
.cs-eq i:nth-child(3) { animation-delay: -0.2s; }
.cs-eq i:nth-child(4) { animation-delay: -0.7s; }
.cs-eq i:nth-child(5) { animation-delay: -0.4s; }

/* ----------------------------------------------------------------------------
   5. BRAND / LOGO
---------------------------------------------------------------------------- */
.cs-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}
.cs-brand-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #0d0608;
    border: 1px solid rgba(255, 44, 76, 0.45);
    border-radius: 22%;
    box-sizing: border-box;
    animation: cs-pulse-glow 2.6s ease-in-out infinite;
    overflow: hidden;
}
.cs-brand-mark .cs-eq {
    width: 58%;
    height: 54%;
}
.cs-brand-mark::after {
    /* scanline sweep across the tile */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.09) 50%, transparent 70%);
    animation: cs-sweep 3.2s ease-in-out infinite;
}
.cs-brand-word {
    font-family: var(--cs-font-display);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--cs-text);
    white-space: nowrap;
    animation: cs-flicker 7s linear infinite;
}
.cs-brand-word .cs-brand-accent {
    color: var(--cs-red);
    text-shadow: 0 0 18px var(--cs-glow), 0 0 42px rgba(255, 44, 76, 0.3);
}
.cs-brand-cursor {
    display: inline-block;
    color: var(--cs-red);
    animation: cs-blink 1.1s steps(1) infinite;
    transform: translateY(-0.04em);
}

/* ----------------------------------------------------------------------------
   6. HEADER / NAVBAR
---------------------------------------------------------------------------- */
/* Blur lives on a ::before overlay, NOT on .header itself: backdrop-filter on
   .header would make it the containing block for its position:fixed dropdown
   menus (KTMenu/Popper), shifting them if the header geometry ever changes. */
.header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.header .btn.btn-icon i { color: #cdbfc6; }
.header .btn.btn-icon:hover i,
.header .btn.btn-icon.show i { color: var(--cs-red-hot); }
.header .btn.btn-icon.btn-active-light-primary:hover,
.header .btn.btn-icon.btn-active-light-primary.show {
    background-color: rgba(255, 44, 76, 0.08);
}

/* ----------------------------------------------------------------------------
   7. ASIDE / SIDEBAR MENU
---------------------------------------------------------------------------- */
.aside {
    border-right: 1px solid var(--cs-line);
}
.aside .menu .menu-heading {
    font-family: var(--cs-font-mono) !important;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.66rem !important;
    color: #6b5b63 !important;
}
.aside .menu .menu-heading::before {
    content: "// ";
    color: var(--cs-red-deep);
}
.aside .menu .menu-item .menu-link {
    border-radius: 8px;
    border-left: 2px solid transparent;
    transition: all .15s ease;
}
.aside .menu .menu-item .menu-link .menu-title { color: #b3a3aa; font-weight: 600; }
.aside .menu .menu-item .menu-link .menu-icon i { color: #7d6b74; transition: color .15s ease, text-shadow .15s ease; }
.aside .menu .menu-item .menu-link:hover .menu-title,
.aside .menu .menu-item .menu-link.active .menu-title { color: #fff; }
.aside .menu .menu-item .menu-link:hover .menu-icon i { color: var(--cs-red-hot); }
.aside .menu .menu-item .menu-link.active {
    background: linear-gradient(90deg, rgba(255, 44, 76, 0.16), rgba(255, 44, 76, 0.03)) !important;
    border-left-color: var(--cs-red);
    box-shadow: inset 0 0 24px rgba(255, 44, 76, 0.06);
}
.aside .menu .menu-item .menu-link.active .menu-icon i {
    color: var(--cs-red);
    text-shadow: 0 0 12px var(--cs-glow);
}
.aside .menu .menu-item .menu-link.active .menu-bullet .bullet,
.aside .menu .menu-item .menu-link:hover .menu-bullet .bullet {
    background-color: var(--cs-red);
    box-shadow: 0 0 8px var(--cs-glow);
}

/* ----------------------------------------------------------------------------
   8. CARDS
---------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--cs-line) !important;
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card.hover-elevate-up:hover,
a.card:hover {
    border-color: rgba(255, 44, 76, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(255, 44, 76, 0.25), 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 32px rgba(255, 44, 76, 0.12);
    transform: translateY(-2px);
}
.card .card-header { border-bottom: 1px solid var(--cs-line); }
.card .card-footer { border-top: 1px solid var(--cs-line); }
.card.bg-white { background-color: var(--bs-card-bg) !important; }

.shadow-sm { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important; }
.shadow-lg { box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 44, 76, 0.07) !important; }
.hover-elevate-up:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 44, 76, 0.1) !important; }

/* ----------------------------------------------------------------------------
   9. BUTTONS
---------------------------------------------------------------------------- */
.btn { transition: all .15s ease; }
.btn-primary {
    box-shadow: 0 4px 22px rgba(255, 44, 76, 0.32);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    box-shadow: 0 6px 30px rgba(255, 44, 76, 0.5);
}
.btn-light, .btn-secondary, .btn-bg-light {
    border: 1px solid var(--cs-line) !important;
}
.btn-check:checked + .btn.btn-outline.btn-outline-dashed,
.btn-check:checked + .btn.btn-active-light-primary,
.btn.btn-outline.btn-outline-dashed.active {
    border-color: var(--cs-red) !important;
    background-color: rgba(255, 44, 76, 0.08) !important;
    box-shadow: 0 0 18px rgba(255, 44, 76, 0.15);
}
.btn.btn-outline.btn-outline-dashed { border-color: #3d2a34; }
.btn.btn-outline.btn-outline-dashed:hover { border-color: var(--cs-red-deep); }

/* ----------------------------------------------------------------------------
   10. FORMS
---------------------------------------------------------------------------- */
.form-control, .form-select {
    border-color: #34222c;
    color: #f0e8ec;
}
.form-control:focus, .form-select:focus {
    border-color: var(--cs-red);
    box-shadow: 0 0 0 3px rgba(255, 44, 76, 0.14);
    background-color: #140b10;
    color: #fff;
}
.form-control.bg-transparent:focus { background-color: rgba(255, 44, 76, 0.03) !important; }
/* Chrome/Edge autofill: keep inputs dark instead of pale yellow */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1a1014 inset !important;
    box-shadow: 0 0 0 1000px #1a1014 inset !important;
    -webkit-text-fill-color: #f0e8ec !important;
    caret-color: #f0e8ec;
    border-color: #34222c;
    transition: background-color 9999s ease-in-out 0s;
}
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a7780' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.input-group-text {
    background-color: #1d1219;
    border-color: #34222c;
    color: #8a7780;
}
.form-check-input { background-color: #241a20; border-color: #3d2a34; }
.form-check-input:checked {
    background-color: var(--cs-red);
    border-color: var(--cs-red);
    box-shadow: 0 0 10px rgba(255, 44, 76, 0.4);
}
.form-range::-webkit-slider-thumb { background: var(--cs-red); box-shadow: 0 0 8px var(--cs-glow); }
.form-range::-moz-range-thumb { background: var(--cs-red); box-shadow: 0 0 8px var(--cs-glow); }
.form-range::-webkit-slider-runnable-track { background: #2a1b23; }
.form-range::-moz-range-track { background: #2a1b23; }

/* ----------------------------------------------------------------------------
   11. TABLES + DATATABLES
---------------------------------------------------------------------------- */
.table thead th, .table thead tr {
    font-family: var(--cs-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.7rem;
    color: #6b5b63 !important;
}
.table.table-row-dashed tr { border-color: #2a1b23; }
table.dataTable { color: #ded3d8; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
div.dt-container .dt-info,
div.dt-container .dt-length,
div.dt-container .dt-search {
    color: #8a7780 !important;
    font-family: var(--cs-font-mono);
    font-size: 0.78rem;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
div.dt-container .dt-input {
    background-color: #1d1219 !important;
    border: 1px solid #34222c !important;
    color: #f0e8ec !important;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_processing,
div.dt-container .dt-processing {
    background: rgba(20, 11, 16, 0.95) !important;
    color: var(--cs-red-hot) !important;
    border: 1px solid var(--cs-line) !important;
    border-radius: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--cs-red) !important;
    color: #fff !important;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):hover {
    background: #1d1219 !important;
    color: var(--cs-red-hot) !important;
    border-radius: 6px;
}

/* ----------------------------------------------------------------------------
   12. BADGES — mono HUD chips
---------------------------------------------------------------------------- */
.badge {
    font-family: var(--cs-font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.badge-light-primary { border: 1px solid rgba(255, 44, 76, 0.3); }
.badge-light-success { border: 1px solid rgba(31, 210, 113, 0.3); }
.badge-light-warning { border: 1px solid rgba(255, 176, 32, 0.3); }
.badge-light-danger  { border: 1px solid rgba(255, 59, 92, 0.3); }
.badge-light-info    { border: 1px solid rgba(168, 92, 255, 0.3); }

/* ----------------------------------------------------------------------------
   13. MODALS / OFFCANVAS / DRAWERS / MENUS
---------------------------------------------------------------------------- */
.modal-backdrop { background-color: rgba(5, 2, 4, 0.8); }
.modal-content {
    border: 1px solid var(--cs-line);
    background-color: var(--bs-modal-bg);
}
.modal-header, .offcanvas-header { border-bottom: 1px solid var(--cs-line); }
.modal-footer { border-top: 1px solid var(--cs-line); }
.modal-header.bg-light, .modal-footer.bg-light { background-color: #190f15 !important; }
.offcanvas { border-left: 1px solid var(--cs-line) !important; }
.menu.menu-sub-dropdown {
    border: 1px solid var(--cs-line);
}
.text-dark { color: var(--bs-gray-900) !important; }
.bg-lighten { background-color: #190f15 !important; }
.bg-white:not(.card) { background-color: var(--bs-card-bg) !important; }

/* ----------------------------------------------------------------------------
   14. SWEETALERT2 / TOASTS
---------------------------------------------------------------------------- */
.swal2-popup {
    background: #160d12 !important;
    border: 1px solid var(--cs-line);
    border-radius: 14px !important;
    color: #ded3d8 !important;
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.75), 0 0 50px rgba(255, 44, 76, 0.08) !important;
}
.swal2-title { color: #f6f0f3 !important; }
.swal2-html-container { color: #bcadb4 !important; }
.swal2-icon.swal2-warning { border-color: var(--cs-red); color: var(--cs-red); }
.swal2-timer-progress-bar { background: var(--cs-red) !important; }

/* ----------------------------------------------------------------------------
   15. SELECT2 / PLUGINS
---------------------------------------------------------------------------- */
.select2-container--bootstrap5 .select2-dropdown {
    background-color: #160d12;
    border: 1px solid var(--cs-line);
}
.select2-container--bootstrap5 .select2-results__option--highlighted {
    background-color: rgba(255, 44, 76, 0.12) !important;
    color: #fff !important;
}
.select2-container--bootstrap5 .select2-selection {
    background-color: var(--bs-input-solid-bg);
    border-color: #34222c;
}

/* ----------------------------------------------------------------------------
   16. PROGRESS / SPINNERS / TIMELINE / SYMBOLS
---------------------------------------------------------------------------- */
.progress { background-color: #241a20; }
.progress .progress-bar.bg-primary { box-shadow: 0 0 14px rgba(255, 44, 76, 0.5); }
.timeline .timeline-line { border-color: #2a1b23; }
.timeline .timeline-icon { background-color: #190f15; }
.symbol .symbol-label { border: 1px solid rgba(255, 255, 255, 0.04); }

/* ----------------------------------------------------------------------------
   17. FOOTER
---------------------------------------------------------------------------- */
.footer {
    border-top: 1px solid var(--cs-line);
    background: transparent;
}

/* ----------------------------------------------------------------------------
   18. HERO / AUTH SET PIECES
---------------------------------------------------------------------------- */
.cs-hero {
    position: relative;
    background:
        radial-gradient(ellipse 70% 90% at 75% 20%, rgba(255, 44, 76, 0.13), transparent 60%),
        linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        #0c0609 !important;
    background-size: 100% 100%, 44px 44px, 44px 44px, 100% 100%;
    border: 1px solid var(--cs-line) !important;
    overflow: hidden;
}
.cs-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cs-red), transparent);
    opacity: 0.7;
    filter: blur(0.5px);
}
.cs-display {
    font-family: var(--cs-font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 0.96;
    color: #f6f0f3;
}
.cs-display .cs-red-glow {
    color: var(--cs-red);
    text-shadow: 0 0 24px var(--cs-glow), 0 0 70px rgba(255, 44, 76, 0.35);
}

.cs-auth-card {
    position: relative;
    background: rgba(18, 10, 14, 0.88) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--cs-line) !important;
    border-radius: 14px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 60px rgba(255, 44, 76, 0.07);
}
/* HUD corner brackets */
.cs-corners::before, .cs-corners::after {
    content: "";
    position: absolute;
    width: 26px; height: 26px;
    pointer-events: none;
    opacity: 0.9;
}
.cs-corners::before {
    top: -1px; left: -1px;
    border-top: 2px solid var(--cs-red);
    border-left: 2px solid var(--cs-red);
    border-top-left-radius: 14px;
}
.cs-corners::after {
    bottom: -1px; right: -1px;
    border-bottom: 2px solid var(--cs-red);
    border-right: 2px solid var(--cs-red);
    border-bottom-right-radius: 14px;
}

/* ----------------------------------------------------------------------------
   19. MISC POLISH
---------------------------------------------------------------------------- */
.page-loader { background-color: var(--cs-bg) !important; }
.blockui-overlay { background-color: rgba(8, 4, 6, 0.6) !important; }
.toolbar { background-color: transparent; border: 0; }
.breadcrumb .breadcrumb-item a { color: #8a7780; }
.breadcrumb .breadcrumb-item a:hover { color: var(--cs-red-hot); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
    color: var(--cs-red-hot);
}
.nav-tabs { border-color: var(--cs-line); }
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: #2a1b23 !important; }
.notice.bg-light-primary, .notice.bg-light-warning {
    border-color: rgba(255, 44, 76, 0.3) !important;
}
.alert-success { background: #0d2418; border-color: rgba(31, 210, 113, 0.3); color: #7ce8b0; }
.alert-danger { background: #2a0f17; border-color: rgba(255, 59, 92, 0.35); color: #ff8ba0; }
.spinner-border.text-primary { color: var(--cs-red) !important; }
.indicator-progress .spinner-border { color: currentColor; }
.video-js, video { background-color: #050203; }
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid { border-color: #2a1b23; }