/* =============================================================================
   THEME STRICT ENFORCEMENT
   Loaded LAST. Authoritative tokens beat stale @import caches of design-tokens.
   ============================================================================= */

/* RED — default (wins over any cached :root --ss-primary:#2e5cff) */
:root,
html[data-theme="red"] {
    --primary: var(--ss-primary);
    --primary-dark: var(--ss-primary-hover);
    --primary-soft: var(--ss-primary-soft);
    --ss-primary: #C62828;
    --ss-primary-dark: #7F1D1D;
    --ss-primary-hover: #9F1D1D;
    --ss-primary-light: #EF5350;
    --ss-primary-soft: rgba(198, 40, 40, 0.12);
    --ss-primary-glow: rgba(198, 40, 40, 0.32);
    --ss-primary-contrast: #FFFFFF;
    --ss-primary-deep: var(--ss-primary-dark);
    --ss-deep: var(--ss-primary-dark);
    --ss-accent: var(--ss-primary);
    --ss-accent-hover: var(--ss-primary-hover);
    --ss-accent-soft: var(--ss-primary-soft);
    --ss-canvas: #FFF9F8;
    --ss-canvas-deep: #FDE9E7;
    --ss-surface: rgba(255, 255, 255, 0.88);
    --ss-surface-strong: rgba(255, 255, 255, 0.97);
    --ss-glass: rgba(255, 255, 255, 0.68);
    --ss-text: #231719;
    --ss-text-strong: #130D0F;
    --ss-text-soft: #49383A;
    --ss-muted: #746467;
    --ss-placeholder: #8E7D80;
    --ss-subtle: var(--ss-placeholder);
    --ss-border: rgba(127, 29, 29, 0.18);
    --ss-border-strong: rgba(198, 40, 40, 0.30);
    --ss-border-light: rgba(108, 24, 24, 0.08);
    --ss-divider: rgba(108, 24, 24, 0.08);
    --ss-gradient-primary: linear-gradient(135deg, #7F1D1D 0%, #C62828 55%, #EF5350 100%);
    --ss-gradient-primary-hover: linear-gradient(135deg, #9F1D1D 0%, #C62828 55%, #FF6B68 100%);
    --ss-gradient-primary-reverse: linear-gradient(135deg, #EF5350 0%, #C62828 55%, #7F1D1D 100%);
    --ss-gradient-warm: var(--ss-gradient-primary);
    --ss-gradient-cool: var(--ss-gradient-primary);
    --ss-gradient-accent: var(--ss-gradient-primary);
    --ss-gradient-page: linear-gradient(135deg, #FFFFFF 0%, #FFF8F7 52%, #FDE9E7 100%);
    --ss-gradient-atmosphere:
        radial-gradient(circle at 8% 5%, rgba(239, 83, 80, 0.18), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(198, 40, 40, 0.15), transparent 27%),
        radial-gradient(circle at 78% 92%, rgba(128, 23, 23, 0.12), transparent 32%),
        linear-gradient(135deg, #FFFFFF 0%, #FFF3F2 100%);
    --ss-gradient-background: var(--ss-gradient-page);
    --ss-gradient-mesh: var(--ss-gradient-atmosphere);
    --ss-grid-line: rgba(198, 40, 40, 0.055);
    --ss-focus-ring-color: rgba(198, 40, 40, 0.32);
    --ss-focus-ring: 0 0 0 3px var(--ss-focus-ring-color);
    --ss-ink: var(--ss-text);
    --ss-ink-soft: var(--ss-text-soft);
    --ss-ink-light: var(--ss-text-soft);
    --ss-bg-body: var(--ss-canvas);
    --ss-bg-canvas: var(--ss-canvas);
    --ss-bg-elevated: var(--ss-surface-strong);
    --ss-bg-surface: var(--ss-surface);
    --ss-bg-sunken: var(--ss-canvas-deep);
    --ss-bg-hover: rgba(198, 40, 40, 0.07);
    --ss-bg-active: rgba(198, 40, 40, 0.13);
    --ss-rail-bg: rgba(255, 255, 255, 0.92);
    --ss-rail-bg-solid: #FFFFFF;
    --ss-rail-border: rgba(108, 24, 24, 0.10);
    --ss-rail-text: #231719;
    --ss-rail-muted: #746467;
    --ss-rail-hover: rgba(198, 40, 40, 0.07);
    --ss-glass-bg: var(--ss-glass);
    --ss-glass-bg-strong: var(--ss-surface-strong);
    --ss-glass-bg-subtle: rgba(255, 255, 255, 0.58);
    --ss-glass-border: rgba(255, 255, 255, 0.88);
    --ss-glass-highlight: rgba(255, 255, 255, 0.94);
    --ss-shadow-primary: 0 10px 26px rgba(198, 40, 40, 0.24);
    --ss-shadow-accent: var(--ss-shadow-primary);
    --ss-shadow-card: 0 2px 4px rgba(45, 19, 20, 0.04), 0 12px 30px rgba(128, 23, 23, 0.08);
    --ss-shadow-floating: 0 8px 18px rgba(45, 19, 20, 0.05), 0 24px 60px rgba(128, 23, 23, 0.12);
    --ss-nav-active-bg: #C62828;
    --ss-nav-active-ink: #FFFFFF;
    --ss-aurora-a: rgba(198, 40, 40, 0.34);
    --ss-aurora-b: rgba(239, 83, 80, 0.26);
    --ss-aurora-c: rgba(128, 23, 23, 0.22);
}

html[data-theme="blue"] {
    --primary: var(--ss-primary);
    --primary-dark: var(--ss-primary-hover);
    --primary-soft: var(--ss-primary-soft);
    --ss-primary: #1769E0;
    --ss-primary-dark: #0B2F6B;
    --ss-primary-hover: #0D47A1;
    --ss-primary-light: #42A5F5;
    --ss-primary-soft: rgba(23, 105, 224, 0.12);
    --ss-primary-glow: rgba(23, 105, 224, 0.32);
    --ss-primary-contrast: #FFFFFF;
    --ss-primary-deep: var(--ss-primary-dark);
    --ss-deep: var(--ss-primary-dark);
    --ss-accent: var(--ss-primary);
    --ss-accent-hover: var(--ss-primary-hover);
    --ss-accent-soft: var(--ss-primary-soft);
    --ss-canvas: #F7FBFF;
    --ss-canvas-deep: #EAF3FF;
    --ss-surface: rgba(255, 255, 255, 0.88);
    --ss-surface-strong: rgba(255, 255, 255, 0.97);
    --ss-glass: rgba(255, 255, 255, 0.68);
    --ss-text: #101D33;
    --ss-text-strong: #0A1222;
    --ss-text-soft: #3E506A;
    --ss-muted: #687991;
    --ss-placeholder: #8798B0;
    --ss-subtle: var(--ss-placeholder);
    --ss-border: rgba(11, 47, 107, 0.18);
    --ss-border-strong: rgba(23, 105, 224, 0.30);
    --ss-border-light: rgba(18, 62, 140, 0.08);
    --ss-divider: rgba(18, 62, 140, 0.08);
    --ss-gradient-primary: linear-gradient(135deg, #0B2F6B 0%, #1769E0 55%, #42A5F5 100%);
    --ss-gradient-primary-hover: linear-gradient(135deg, #0D47A1 0%, #1769E0 55%, #64B5F6 100%);
    --ss-gradient-primary-reverse: linear-gradient(135deg, #42A5F5 0%, #1769E0 55%, #0B2F6B 100%);
    --ss-gradient-warm: var(--ss-gradient-primary);
    --ss-gradient-cool: var(--ss-gradient-primary);
    --ss-gradient-accent: var(--ss-gradient-primary);
    --ss-gradient-page: linear-gradient(135deg, #FFFFFF 0%, #F7FBFF 52%, #EAF3FF 100%);
    --ss-gradient-atmosphere:
        radial-gradient(circle at 8% 5%, rgba(66, 165, 245, 0.18), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(23, 105, 224, 0.15), transparent 27%),
        radial-gradient(circle at 78% 92%, rgba(11, 47, 107, 0.12), transparent 32%),
        linear-gradient(135deg, #FFFFFF 0%, #F0F7FF 100%);
    --ss-gradient-background: var(--ss-gradient-page);
    --ss-gradient-mesh: var(--ss-gradient-atmosphere);
    --ss-grid-line: rgba(23, 105, 224, 0.055);
    --ss-focus-ring-color: rgba(23, 105, 224, 0.32);
    --ss-focus-ring: 0 0 0 3px var(--ss-focus-ring-color);
    --ss-ink: var(--ss-text);
    --ss-ink-soft: var(--ss-text-soft);
    --ss-ink-light: var(--ss-text-soft);
    --ss-bg-body: var(--ss-canvas);
    --ss-bg-canvas: var(--ss-canvas);
    --ss-bg-elevated: var(--ss-surface-strong);
    --ss-bg-surface: var(--ss-surface);
    --ss-bg-sunken: var(--ss-canvas-deep);
    --ss-bg-hover: rgba(23, 105, 224, 0.07);
    --ss-bg-active: rgba(23, 105, 224, 0.13);
    --ss-rail-bg: rgba(255, 255, 255, 0.92);
    --ss-rail-bg-solid: #FFFFFF;
    --ss-rail-border: rgba(18, 62, 140, 0.10);
    --ss-rail-text: #101D33;
    --ss-rail-muted: #687991;
    --ss-rail-hover: rgba(23, 105, 224, 0.07);
    --ss-glass-bg: var(--ss-glass);
    --ss-glass-bg-strong: var(--ss-surface-strong);
    --ss-glass-bg-subtle: rgba(255, 255, 255, 0.58);
    --ss-glass-border: rgba(255, 255, 255, 0.88);
    --ss-glass-highlight: rgba(255, 255, 255, 0.96);
    --ss-shadow-primary: 0 10px 26px rgba(23, 105, 224, 0.24);
    --ss-shadow-accent: var(--ss-shadow-primary);
    --ss-shadow-card: 0 2px 4px rgba(10, 29, 51, 0.04), 0 12px 30px rgba(11, 47, 107, 0.08);
    --ss-shadow-floating: 0 8px 18px rgba(10, 29, 51, 0.05), 0 24px 60px rgba(11, 47, 107, 0.12);
    --ss-nav-active-bg: #1769E0;
    --ss-nav-active-ink: #FFFFFF;
    --ss-aurora-a: rgba(23, 105, 224, 0.34);
    --ss-aurora-b: rgba(66, 165, 245, 0.26);
    --ss-aurora-c: rgba(11, 47, 107, 0.22);
}

:root,
html[data-theme="red"],
html[data-theme="blue"] {
    --p2-ink: var(--ss-ink);
    --p2-ink-soft: var(--ss-ink-soft);
    --p2-paper: var(--ss-bg-body);
    --p2-card: var(--ss-bg-surface);
    --p2-line: var(--ss-border);
    --p2-muted: var(--ss-muted);
    --p2-coral: var(--ss-primary);
    --p2-coral-dark: var(--ss-primary-hover);
    --p2-lime: var(--ss-primary);
    --p2-lime-ink: var(--ss-primary-contrast);
    --p2-aqua: var(--ss-primary-soft);
    --p2-violet: var(--ss-primary);
    --p2-shadow: var(--ss-shadow-card);
    --v2-ink: var(--ss-ink);
    --v2-ink-soft: var(--ss-ink-soft);
    --v2-paper: var(--ss-bg-body);
    --v2-white: var(--ss-bg-surface);
    --v2-line: var(--ss-border);
    --v2-muted: var(--ss-muted);
    --v2-coral: var(--ss-primary);
    --v2-coral-deep: var(--ss-primary-hover);
    --v2-lime: var(--ss-primary);
    --v2-lime-ink: var(--ss-primary-contrast);
    --v2-violet: var(--ss-primary);
    --v2-blue: var(--ss-primary);
    --v2-teal: var(--ss-primary);
    --v2-pink: var(--ss-primary);
    --v2-shadow: var(--ss-shadow-card);
    --xp-ink: var(--ss-ink);
    --xp-muted: var(--ss-muted);
    --xp-line: var(--ss-border);
    --xp-paper: var(--ss-bg-body);
    --xp-glass: var(--ss-glass-bg);
    --xp-violet: var(--ss-primary);
    --xp-blue: var(--ss-primary);
    --xp-teal: var(--ss-primary);
    --xp-pink: var(--ss-primary);
    --xp-coral: var(--ss-primary);
    --xp-lime: var(--ss-primary);
    --xp-amber: var(--ss-primary);
    --xp-shadow: var(--ss-shadow-floating);
    --xp-shadow-soft: var(--ss-shadow-card);
    --h-ink: var(--ss-ink);
    --h-ink-soft: var(--ss-ink-soft);
    --h-paper: var(--ss-bg-body);
    --h-card: var(--ss-bg-surface);
    --h-line: var(--ss-border);
    --h-muted: var(--ss-muted);
    --h-coral: var(--ss-primary);
    --h-coral-dark: var(--ss-primary-hover);
    --h-lime: var(--ss-primary);
    --h-lime-ink: var(--ss-primary-contrast);
    --h-aqua: var(--ss-primary-soft);
    --r2-ink: var(--ss-ink);
    --r2-paper: var(--ss-bg-body);
    --r2-card: var(--ss-bg-surface);
    --r2-line: var(--ss-border);
    --r2-muted: var(--ss-muted);
    --r2-coral: var(--ss-primary);
    --r2-coral-dark: var(--ss-primary-hover);
    --r2-lime: var(--ss-primary);
    --r2-lime-ink: var(--ss-primary-contrast);
    --r2-shadow: var(--ss-shadow-floating);
    --r2-surface: var(--ss-bg-surface);
    --ed-ink: var(--ss-ink);
    --ed-muted: var(--ss-muted);
    --ed-line: var(--ss-border);
    --ed-accent: var(--ss-primary);
    --jp-ink: var(--ss-ink);
    --jp-accent: var(--ss-primary);
    --jp-accent-hover: var(--ss-primary-hover);
    --jp-accent-soft: var(--ss-primary-soft);
}

/* Full-page motion canvas — all shells */
html,
body,
body.public-body:not(.portal-body),
body.portal-body,
body.admin-body,
body.public-body,
body.portal-register-body,
.experience-public,
.portal-public-shell,
.portal-shell,
.admin-shell,
.portal-shell-guest,
.login-shell {
    color: var(--ss-ink) !important;
    background-color: var(--ss-bg-body) !important;
    background-image: var(--ss-gradient-mesh) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.portal-main,
.admin-main,
.admin-content,
.portal-public-shell main,
.experience-public main {
    background: transparent !important;
}

/* Classic motion atmosphere layer (injected by theme.js) */
.ss-theme-atmosphere {
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.ss-theme-atmosphere__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    will-change: transform, opacity;
    opacity: 0.9;
}

.ss-theme-atmosphere__orb--a {
    top: -18vh;
    right: -12vw;
    width: min(62vw, 920px);
    height: min(62vw, 920px);
    background: radial-gradient(circle at 35% 35%, var(--ss-aurora-a), transparent 62%);
    animation: ss-aurora-drift-a 22s ease-in-out infinite;
}

.ss-theme-atmosphere__orb--b {
    bottom: -22vh;
    left: -14vw;
    width: min(68vw, 980px);
    height: min(68vw, 980px);
    background: radial-gradient(circle at 60% 40%, var(--ss-aurora-b), transparent 64%);
    animation: ss-aurora-drift-b 28s ease-in-out infinite;
}

.ss-theme-atmosphere__orb--c {
    top: 32%;
    left: 38%;
    width: min(42vw, 560px);
    height: min(42vw, 560px);
    background: radial-gradient(circle at 50% 50%, var(--ss-aurora-c), transparent 68%);
    animation: ss-aurora-sweep 36s ease-in-out infinite;
}

.ss-theme-atmosphere__grid {
    position: absolute;
    inset: -12%;
    background-image:
        linear-gradient(var(--ss-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--ss-border) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.55;
    mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
    animation: ss-grid-drift 48s linear infinite;
}

.ss-theme-atmosphere__sheen {
    position: absolute;
    inset: -20% -10%;
    background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--ss-primary) 14%, transparent) 50%, transparent 65%);
    animation: ss-sheen-sweep 18s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes ss-grid-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-56px, -56px, 0); }
}

@keyframes ss-sheen-sweep {
    0%, 100% { transform: translate3d(-12%, 0, 0) rotate(0deg); opacity: 0.35; }
    50% { transform: translate3d(10%, -4%, 0) rotate(4deg); opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
    .ss-theme-atmosphere__orb,
    .ss-theme-atmosphere__grid,
    .ss-theme-atmosphere__sheen,
    body::before,
    body::after {
        animation: none !important;
    }
}

/* Keep app chrome above atmosphere */
.portal-shell,
.admin-shell,
.portal-public-shell,
.portal-shell-guest,
.login-shell,
.experience-public,
#siteHeader,
.nav,
.portal-public-nav {
    position: relative;
    z-index: 1;
}

/* Always-visible public header theme tools */
.portal-public-nav__tools {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    z-index: 2 !important;
}

.portal-public-nav .ss-theme-switch {
    display: inline-flex !important;
    margin: 0 !important;
}

.portal-public-nav .ss-theme-switch__dot { display: none; }
/* Primary actions */
.portal-btn--primary,
.admin-btn--primary,
.admin-btn--active,
.btn-primary,
.btn-jp,
.experience-public .portal-btn--primary,
.portal-public-nav .portal-btn--primary,
.portal-auth-card .btn-jp {
    color: var(--ss-primary-contrast) !important;
    border-color: var(--ss-primary) !important;
    background: var(--ss-gradient-primary) !important;
    background-image: var(--ss-gradient-primary) !important;
    box-shadow: var(--ss-shadow-primary) !important;
}

.portal-btn--primary:hover,
.admin-btn--primary:hover,
.admin-btn--active:hover,
.btn-primary:hover,
.btn-jp:hover,
.experience-public .portal-btn--primary:hover,
.portal-auth-card .btn-jp:hover {
    color: var(--ss-primary-contrast) !important;
    border-color: var(--ss-primary-hover) !important;
    background: var(--ss-gradient-primary-hover) !important;
    background-image: var(--ss-gradient-primary-hover) !important;
}

/* Active navigation — solid primary, never lime/coral chips */
.portal-nav__link.is-active,
.admin-nav__link.is-active,
.admin-tabs a.is-active,
.portal-public-nav a.is-active,
.portal-public-nav__link.is-active {
    color: var(--ss-nav-active-ink) !important;
    background: var(--ss-nav-active-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.portal-nav__link.is-active svg,
.admin-nav__link.is-active .admin-nav__icon,
.admin-nav__sublink.is-active {
    color: var(--ss-nav-active-ink) !important;
}

.admin-nav__sublink.is-active {
    color: var(--ss-primary-light) !important;
    background: transparent !important;
}

/* Brand marks / avatars on dark rails */
.portal-brand__title::before,
.admin-sidebar__mark,
.portal-avatar,
.admin-avatar,
.portal-public-nav__mark,
.portal-register-brand::before,
.portal-job-card__mark,
.experience-public .portal-job-card__mark,
.experience-public .experience-hero__employer,
.experience-live-card__logo {
    color: var(--ss-primary-contrast) !important;
    background: var(--ss-primary) !important;
    background-image: none !important;
}

/* Light rails — never dark navy/black */
.portal-sidebar,
.admin-sidebar {
    background: var(--ss-rail-bg) !important;
    color: var(--ss-rail-text) !important;
    border-right: 1px solid var(--ss-rail-border) !important;
}

.auth-showcase,
.login-showcase {
    background: var(--ss-gradient-primary) !important;
    color: var(--ss-primary-contrast) !important;
}

.portal-sidebar::before,
.admin-sidebar::before {
    background: var(--ss-primary-soft) !important;
    background-image: none !important;
}

.portal-sidebar::after,
.admin-sidebar::after {
    background: var(--ss-primary-soft) !important;
    background-image: none !important;
}

.auth-showcase::before,
.login-showcase::before {
    background: var(--ss-aurora-a) !important;
    background-image: none !important;
}

.portal-brand__title,
.admin-sidebar__brand-text strong {
    color: var(--ss-rail-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.auth-showcase__brand,
.login-showcase__brand {
    color: var(--ss-primary-contrast) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.auth-showcase__brand span,
.login-showcase__brand span,
.auth-showcase__headline em,
.login-showcase__headline em,
.brand span,
.portal-register-brand,
.eyebrow,
.ss-gradient-text,
.experience-hero h1 em,
.experience-section h2 em,
.experience-journey h2 em {
    background: var(--ss-gradient-primary) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* Links & accents — content links only; nav chrome keeps rail/ink colors */
.portal-main a:not(.portal-btn):not(.admin-btn):not(.btn-jp),
.admin-main a:not(.admin-btn):not(.portal-btn):not(.btn-jp),
.experience-public main a:not(.portal-btn):not(.btn-jp),
.portal-link,
.experience-text-link,
.experience-live-card__link,
.dash-hero__eyebrow,
.portal-pipeline a strong,
.portal-public-nav__brand > span:last-child > span {
    color: var(--ss-primary) !important;
}

.admin-command-title > p span {
    background: var(--ss-primary) !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.portal-main a:not(.portal-btn):not(.admin-btn):not(.btn-jp):hover,
.admin-main a:not(.admin-btn):not(.portal-btn):not(.btn-jp):hover,
.experience-public main a:not(.portal-btn):not(.btn-jp):hover,
.portal-link:hover,
.experience-text-link:hover {
    color: var(--ss-primary-hover) !important;
}

.portal-nav__link,
.admin-nav__link,
.admin-nav__sublink,
.portal-public-nav a,
.portal-sidebar a,
.admin-sidebar a {
    color: inherit;
}

.portal-nav__link:not(.is-active),
.admin-nav__link:not(.is-active) {
    color: var(--ss-text) !important;
}

.portal-public-nav a:not(.portal-btn):not(.is-active) {
    color: var(--ss-ink-soft) !important;
}

.portal-public-nav a:not(.portal-btn):hover {
    color: var(--ss-primary) !important;
}

/* Focus */
.form-control:focus,
.form-select:focus,
.admin-input:focus,
.admin-select:focus,
.admin-form-control:focus,
.admin-form-select:focus,
.admin-form-textarea:focus,
.portal-auth-card .form-control:focus,
.portal-auth-card .form-select:focus {
    border-color: var(--ss-primary) !important;
    box-shadow: var(--ss-focus-ring) !important;
    outline: none !important;
}

.portal-auth-card .form-check-input:checked,
.form-check-input:checked {
    background-color: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
}

/* Glass surfaces */
.portal-card,
.admin-panel,
.admin-stat-card,
.portal-job-card,
.portal-employer-card,
.portal-topbar,
.admin-topbar,
.portal-public-nav,
.portal-auth-card,
.ss-glass,
.ss-glass-strong {
    border-color: var(--ss-border) !important;
    background: var(--ss-glass-bg-strong) !important;
    box-shadow: var(--ss-shadow-card) !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .portal-card,
    .admin-panel,
    .portal-job-card,
    .portal-employer-card,
    .portal-topbar,
    .admin-topbar,
    .portal-public-nav,
    .portal-auth-card {
        backdrop-filter: var(--ss-glass-blur);
        -webkit-backdrop-filter: var(--ss-glass-blur);
    }
}

/* Tables */
.portal-table th,
.admin-table th {
    background: var(--ss-bg-hover) !important;
    color: var(--ss-muted) !important;
}

.portal-table tbody tr:hover,
.admin-table tbody tr:hover {
    background: var(--ss-bg-active) !important;
}

/* Promo / badges using former lime/coral */
.admin-promo {
    background: var(--ss-primary) !important;
    color: var(--ss-primary-contrast) !important;
    border-color: var(--ss-primary) !important;
}

.admin-promo__title,
.admin-promo__copy {
    color: var(--ss-primary-contrast) !important;
}

.admin-promo__cta {
    color: var(--ss-primary) !important;
    background: var(--ss-primary-contrast) !important;
}

.admin-icon-btn__badge,
.admin-stat-card::before,
.experience-eyebrow span,
.experience-carousel__dot.is-active {
    background: var(--ss-primary) !important;
    color: var(--ss-primary-contrast) !important;
}

.admin-icon-btn:hover,
.portal-bell:hover {
    color: var(--ss-primary) !important;
    background: var(--ss-primary-soft) !important;
}

/* Journey / hero panels — theme gradient only */
.experience-journey__panel,
.experience-public .experience-journey__panel {
    background: var(--ss-gradient-primary) !important;
    background-image: var(--ss-gradient-primary) !important;
}

.experience-orb--a,
.experience-orb--b,
.experience-public .experience-orb--a,
.experience-public .experience-orb--b,
.experience-visual__halo,
.experience-public .experience-visual__halo {
    background: radial-gradient(circle at 50% 50%, var(--ss-aurora-a), transparent 70%) !important;
}

.experience-public .experience-pulse,
.experience-pulse {
    color: var(--ss-primary) !important;
}

.experience-pulse::before,
.experience-public .experience-pulse::before {
    background: var(--ss-primary) !important;
    box-shadow: 0 0 0 4px var(--ss-primary-soft) !important;
}

.portal-score__ring {
    background: conic-gradient(var(--ss-primary) calc(var(--pct) * 1%), rgba(148, 163, 184, 0.18) 0) !important;
}

.portal-score__ring span {
    color: var(--ss-primary) !important;
}

/* Neutralize leftover lime/beige chip colors */
.portal-badge--neutral,
.admin-badge--approved,
.admin-badge--active,
.admin-badge--published,
.admin-badge--verified,
.job-detail-chip,
.portal-category-chip,
.experience-public .portal-badge--neutral {
    color: var(--ss-primary-deep) !important;
    background: var(--ss-primary-soft) !important;
    border-color: var(--ss-border) !important;
}

.portal-stat-card--blue .portal-stat-card__icon,
.portal-stat-card--violet .portal-stat-card__icon,
.portal-stat-card--amber .portal-stat-card__icon,
.portal-stat-card--green .portal-stat-card__icon,
.portal-job-card__mark--coral,
.portal-job-card__mark--lime,
.portal-job-card__mark--aqua,
.portal-job-card__mark--violet {
    color: var(--ss-primary) !important;
    background: var(--ss-primary-soft) !important;
}

/* Layout guardrail leftovers */
.portal-public-nav a {
    color: var(--ss-ink-soft) !important;
}

.portal-public-nav a:hover {
    color: var(--ss-primary) !important;
}

/* Auth formside hosts */
.login-formside,
.auth-formside {
    position: relative;
}

.login-formside .ss-theme-switch,
.ss-theme-switch-host--auth {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 5;
}

.portal-register-wrap { position: relative; }
.ss-theme-switch-host--register {
    position: absolute;
    top: 1rem;
    right: 0;
    z-index: 5;
}

/* Transition helper */
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition:
        background-color 220ms ease,
        background-image 220ms ease,
        border-color 220ms ease,
        color 220ms ease,
        box-shadow 220ms ease,
        fill 220ms ease,
        stroke 220ms ease !important;
}

/* Mark / chip / pulse / category accents — force global primary */
.portal-job-card__mark,
.portal-job-card__mark--coral,
.portal-job-card__mark--lime,
.portal-job-card__mark--aqua,
.portal-job-card__mark--violet,
.experience-public .portal-job-card__mark,
.experience-public .experience-hero__employer,
.experience-live-card__logo {
    color: var(--ss-primary-contrast) !important;
    background: var(--ss-primary) !important;
    background-image: none !important;
}

.experience-public .experience-pulse,
.experience-pulse,
.portal-badge--neutral,
.experience-public .portal-badge--neutral {
    color: var(--ss-primary) !important;
}

.experience-category__icon,
.experience-category:nth-child(3n) .experience-category__icon,
.experience-category:nth-child(4n) .experience-category__icon {
    color: var(--ss-primary) !important;
    background: var(--ss-primary-soft) !important;
}

.portal-stat-card--blue .portal-stat-card__icon,
.portal-stat-card--violet .portal-stat-card__icon,
.portal-stat-card--amber .portal-stat-card__icon,
.portal-stat-card--green .portal-stat-card__icon {
    color: var(--ss-primary) !important;
    background: var(--ss-primary-soft) !important;
}

.experience-public .portal-btn:hover {
    border-color: var(--ss-border-strong) !important;
    background: var(--ss-bg-hover) !important;
}

.portal-register-brand::before {
    color: var(--ss-primary-contrast) !important;
    background: var(--ss-primary) !important;
}

/* =============================================================================
   MOTION CANVAS — 2026 visual refresh
   The application deliberately places high-contrast white work surfaces over
   the supplied red/blue motion films.  This keeps dense forms and tables easy
   to scan while allowing the selected theme to remain visible at every depth.
   ============================================================================= */

:root,
html[data-theme="red"] {
    --ss-motion-fallback: #180609;
    --ss-motion-ink: #191015;
    --ss-motion-muted: #63555d;
    --ss-motion-line: rgba(73, 20, 29, .14);
    --ss-motion-surface: rgba(255, 255, 255, .94);
    --ss-motion-surface-soft: rgba(255, 255, 255, .84);
    --ss-motion-shadow: 0 20px 60px rgba(40, 3, 10, .20), 0 2px 7px rgba(40, 3, 10, .12);
    --ss-motion-rim: rgba(255, 255, 255, .88);
}

html[data-theme="blue"] {
    --ss-motion-fallback: #030e25;
    --ss-motion-ink: #0d1a31;
    --ss-motion-muted: #52627a;
    --ss-motion-line: rgba(11, 47, 107, .15);
    --ss-motion-surface: rgba(255, 255, 255, .94);
    --ss-motion-surface-soft: rgba(255, 255, 255, .84);
    --ss-motion-shadow: 0 20px 60px rgba(1, 20, 60, .22), 0 2px 7px rgba(1, 20, 60, .14);
    --ss-motion-rim: rgba(255, 255, 255, .9);
}

html {
    background: var(--ss-motion-fallback) !important;
}

/* Motion is an ambient, non-interactive canvas. The veil maintains enough
   contrast even when a reference film reaches a very bright frame. */
.ss-theme-motion {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--ss-motion-fallback);
}

.ss-theme-motion__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.12) contrast(1.06) brightness(.72);
    transform: scale(1.025);
    transition: opacity .42s ease, filter .42s ease;
}

.ss-theme-motion__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(112deg, rgba(7, 9, 18, .45) 0%, rgba(7, 9, 18, .13) 46%, rgba(7, 9, 18, .43) 100%),
        linear-gradient(180deg, rgba(4, 7, 15, .14), rgba(4, 7, 15, .34));
}

/* All existing shell markup sits predictably above the moving canvas. */
body,
body.portal-body,
body.admin-body,
body.public-body,
body.portal-register-body,
body:has(.experience-public),
body:has(.login-shell),
.portal-public-shell {
    background: transparent !important;
    background-image: none !important;
    color: var(--ss-motion-ink) !important;
}

/* The atmosphere layers (video + light fields) are painted at a negative
   z-index, so <body> is isolated and its children are pushed into a stacking
   context of their own. The shared confirm dialog is a direct child of <body>
   and must therefore be released from that context — pinning it back into the
   root stacking context — or it cannot rise above the page chrome on the pages
   that mix body-level shells. */
body > :not(.ss-theme-motion):not(.ss-theme-atmosphere) {
    position: relative;
    z-index: 1;
}

.app-confirm-modal {
    position: fixed !important;
    isolation: auto !important;
    z-index: 2147483000 !important;
}

.ss-theme-atmosphere {
    z-index: 0 !important;
    opacity: .38;
    mix-blend-mode: screen;
}

.portal-shell,
.admin-shell,
.portal-shell-guest,
.login-shell,
.experience-public {
    background: transparent !important;
}

.portal-main,
.admin-content,
.admin-main,
.portal-public-shell main,
.experience-public main,
.auth-formside,
.login-formside,
.portal-register-wrap {
    background: transparent !important;
}

/* White content planes: opaque enough for legibility, translucent enough to
   make the motion treatment feel continuous rather than decorative wallpaper. */
.portal-card,
.portal-job-card,
.portal-employer-card,
.portal-stat-card,
.portal-topbar,
.admin-panel,
.admin-stat-card,
.admin-chart-panel,
.admin-form-card,
.admin-topbar,
.portal-public-nav,
.portal-auth-card,
.login-card,
.portal-search-hero,
.portal-score,
.portal-job-item,
.portal-package-card,
.portal-candidate-card,
.portal-company-card,
.admin-command,
.admin-promo,
.ss-glass,
.ss-glass-strong {
    color: var(--ss-motion-ink) !important;
    background: var(--ss-motion-surface) !important;
    border: 1px solid var(--ss-motion-rim) !important;
    box-shadow: var(--ss-motion-shadow) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
}

.portal-card,
.portal-job-card,
.portal-employer-card,
.portal-stat-card,
.admin-panel,
.admin-stat-card,
.admin-chart-panel,
.admin-form-card,
.portal-auth-card,
.login-card {
    border-radius: 18px !important;
}

/* A small lift rewards exploration without moving layout or interfering with
   controls inside dense dashboards. */
@media (hover: hover) {
    .portal-card:hover,
    .portal-job-card:hover,
    .portal-employer-card:hover,
    .portal-stat-card:hover,
    .admin-panel:hover,
    .admin-stat-card:hover,
    .admin-chart-panel:hover,
    .portal-package-card:hover,
    .portal-candidate-card:hover,
    .portal-company-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 27px 68px rgba(4, 12, 30, .24), 0 3px 9px rgba(4, 12, 30, .13) !important;
        transition: transform .22s ease, box-shadow .22s ease;
    }
}

/* Readability floor for every heading, label, input, table and lightweight
   Bootstrap utility used in the existing screens. */
.portal-main h1, .portal-main h2, .portal-main h3, .portal-main h4,
.admin-main h1, .admin-main h2, .admin-main h3, .admin-main h4,
.portal-auth-card h1, .portal-auth-card h2, .portal-auth-card h3,
.login-card h1, .login-card h2, .login-card h3,
.portal-page-title, .admin-page-title, .portal-card__title,
.admin-panel__title, .portal-job-card__title, .portal-stat-card__value,
.admin-stat-card__value, .form-label, label, .table, .portal-table, .admin-table {
    color: var(--ss-motion-ink) !important;
}

.text-secondary, .text-muted, .portal-muted, .admin-muted,
.portal-card__meta, .portal-job-card__meta, .portal-stat-card__label,
.admin-stat-card__label, .form-text, small {
    color: var(--ss-motion-muted) !important;
}

.form-control, .form-select, .admin-input, .admin-select,
.admin-form-control, .admin-form-select, .admin-form-textarea,
textarea, select, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"],
input[type="tel"], input[type="date"], input[type="url"], input[type="file"] {
    color: var(--ss-motion-ink) !important;
    background-color: rgba(255, 255, 255, .97) !important;
    border-color: var(--ss-motion-line) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.form-control::placeholder, .admin-input::placeholder,
.admin-form-control::placeholder, textarea::placeholder {
    color: #79818e !important;
    opacity: 1;
}

.portal-table th, .admin-table th, .table thead th,
.portal-table td, .admin-table td, .table td {
    border-color: var(--ss-motion-line) !important;
}

.portal-table th, .admin-table th, .table thead th {
    background: rgba(255, 255, 255, .68) !important;
    color: var(--ss-motion-muted) !important;
}

.portal-table tbody tr:hover, .admin-table tbody tr:hover, .table-hover > tbody > tr:hover > * {
    background: var(--ss-primary-soft) !important;
    color: var(--ss-motion-ink) !important;
}

/* Navigation remains light glass so chrome stays readable on the motion canvas. */
.portal-sidebar, .admin-sidebar {
    background: var(--ss-rail-bg) !important;
    color: var(--ss-rail-text) !important;
    border-right: 1px solid var(--ss-rail-border) !important;
    box-shadow: 16px 0 50px rgba(45, 19, 20, .06) !important;
    backdrop-filter: blur(22px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
}

.auth-showcase, .login-showcase {
    background: var(--ss-gradient-primary) !important;
    border-right: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 16px 0 50px rgba(0,0,0,.12) !important;
    backdrop-filter: blur(22px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
}

.portal-sidebar::before, .admin-sidebar::before {
    opacity: .35 !important;
    background: var(--ss-primary-soft) !important;
}

.auth-showcase::before, .login-showcase::before {
    opacity: .7 !important;
}

.portal-nav__link, .admin-nav__link {
    border-radius: 11px !important;
    margin-inline: 8px;
}

.portal-nav__link.is-active, .admin-nav__link.is-active,
.portal-public-nav a.is-active, .portal-public-nav__link.is-active {
    box-shadow: 0 10px 24px var(--ss-primary-glow) !important;
}

@media (max-width: 768px) {
    .ss-theme-motion__video { transform: scale(1.08); }
    .portal-main, .admin-main { padding-inline: 1rem !important; }
    .portal-card, .portal-job-card, .portal-employer-card, .admin-panel,
    .admin-stat-card, .admin-chart-panel, .admin-form-card { border-radius: 15px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ss-theme-motion__video { display: none; }
    .ss-theme-motion { background: var(--ss-gradient-primary) !important; }
    .portal-card:hover, .portal-job-card:hover, .portal-employer-card:hover,
    .portal-stat-card:hover, .admin-panel:hover, .admin-stat-card:hover,
    .admin-chart-panel:hover, .portal-package-card:hover,
    .portal-candidate-card:hover, .portal-company-card:hover { transform: none; }
}

/* Marketing pages use a compact, independent class set.  Map it into the
   shared palette as well, so blue mode is a complete theme—not only a portal
   dashboard recolour. */
body > #siteHeader,
body > footer { z-index: 2; }

#siteHeader,
.nav {
    background: rgba(255, 255, 255, .89) !important;
    border-color: rgba(255,255,255,.8) !important;
    box-shadow: 0 10px 32px rgba(4, 12, 30, .12) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}

.nav-links a, .logo, .hero h1, .section-title, .select-card h3,
.focus-card h3, .job-card h4, .company-card h4, .why-item h4,
.step h5, .contact-card h3, .contact-info h3 {
    color: var(--ss-motion-ink) !important;
}

.hero, .selection, .why, .categories, .featured-jobs, .companies,
.how-it-works, .contact-hero, .contact-section, .jobseeker-hero,
.employer-hero, .page-hero, .sector-hero {
    background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.66)) !important;
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
}

.search-card, .select-card, .focus-card, .cat-card, .job-card,
.company-card, .contact-card, .contact-form, .info-card,
.floating-card, .hero-illustration, .timeline-card {
    color: var(--ss-motion-ink) !important;
    background: var(--ss-motion-surface) !important;
    border-color: var(--ss-motion-rim) !important;
    box-shadow: var(--ss-motion-shadow) !important;
}

.section-sub, .hero p.sub, .trust-line, .select-card p, .focus-card p,
.job-company, .meta-pill, .company-card p, .why-item p, .step p,
.contact-card p, .contact-info p, .posted {
    color: var(--ss-motion-muted) !important;
}

.btn-primary, .btn-primary:hover {
    color: #fff !important;
    background: var(--ss-gradient-primary) !important;
    border-color: transparent !important;
    box-shadow: var(--ss-shadow-primary) !important;
}

.btn-outline, .link-arrow, .hero h1 span, .eyebrow, .focus-count span,
.focus-arrow, .nav-links a:hover, .nav-links a.active {
    color: var(--ss-primary) !important;
}

footer, .stats {
    background: linear-gradient(140deg, rgba(6, 10, 22, .96), rgba(10, 17, 36, .91)) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Landing and public-directory pages contain a few bespoke components that
   do not use the portal-card class. Give those components the same legibility
   contract as every dashboard surface. */
.experience-public .experience-hero__copy,
.experience-public .experience-section__head,
.experience-public .experience-search,
.experience-public .experience-hero__stats,
.experience-public .experience-category,
.experience-public .experience-sector-card,
.experience-public .experience-live-card,
.experience-public .experience-float,
.experience-public .experience-talent-card,
.experience-public .experience-job-grid .portal-job-card,
.experience-public .experience-employer-grid .portal-employer-card,
.experience-public .experience-hero-slide {
    color: var(--ss-motion-ink) !important;
    background: var(--ss-motion-surface) !important;
    border-color: var(--ss-motion-rim) !important;
    box-shadow: var(--ss-motion-shadow) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
}

.experience-public .experience-hero__copy {
    padding: clamp(1.25rem, 3vw, 2.15rem) !important;
    border-radius: 22px !important;
}

.experience-public .experience-section__head {
    padding: 1.15rem 1.35rem !important;
    border-radius: 17px !important;
}

.experience-public .experience-hero__copy h1,
.experience-public .experience-section__head h2,
.experience-public .experience-live-card h2,
.experience-public .experience-category strong,
.experience-public .experience-sector-card strong,
.experience-public .experience-talent-card__name,
.experience-public .experience-job-grid .portal-job-card__title,
.experience-public .experience-job-grid .portal-job-card__title a,
.experience-public .experience-employer-grid .portal-employer-card__name {
    color: var(--ss-motion-ink) !important;
}

.experience-public .experience-hero__lead,
.experience-public .experience-proof p,
.experience-public .experience-category small,
.experience-public .experience-sector-card p,
.experience-public .experience-talent-card__title,
.experience-public .experience-talent-card__meta,
.experience-public .experience-talent-card__availability,
.experience-public .experience-job-grid .portal-job-card__meta,
.experience-public .experience-live-card > p,
.experience-public .experience-live-card__company {
    color: var(--ss-motion-muted) !important;
}

.experience-public .experience-search input,
.experience-public .experience-search input::placeholder {
    color: var(--ss-motion-ink) !important;
}

.experience-public .experience-search input::placeholder {
    color: #79818e !important;
}

body.public-body .portal-public-shell,
body.public-body .portal-public-latest,
body.public-body .portal-public-section,
body.public-body .employer-directory-shell {
    color: var(--ss-motion-ink) !important;
    background: transparent !important;
}

body.public-body .portal-public-shell h1,
body.public-body .portal-public-shell h2,
body.public-body .portal-public-shell h3,
body.public-body .portal-public-shell h4,
body.public-body .portal-public-shell .portal-page-title,
body.public-body .portal-public-shell .portal-card__title {
    color: var(--ss-motion-ink) !important;
}

body.public-body .portal-public-shell p,
body.public-body .portal-public-shell dt,
body.public-body .portal-public-shell dd,
body.public-body .portal-public-shell .portal-page-subtitle,
body.public-body .portal-public-shell .job-detail-subtitle,
body.public-body .portal-public-shell .job-detail-aside__copy,
body.public-body .portal-public-shell .job-detail-aside__foot {
    color: var(--ss-motion-muted) !important;
}

/* Keep all routes on the same type stack; individual feature styles can still
   opt into a display face through their existing design tokens. */
body, body button, body input, body select, body textarea {
    font-family: var(--ss-font-sans) !important;
    text-rendering: optimizeLegibility;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: var(--ss-font-display) !important;
    text-wrap: balance;
}

/* Route-level headers are intentionally planes, not loose text over video. */
body.portal-body .portal-page-header,
body.portal-body .portal-welcome,
body.portal-body .portal-page-title-row,
body.admin-body .admin-main > .admin-page-title,
body.admin-body .admin-main > .admin-toolbar,
body.admin-body .admin-main > .admin-command-title,
body.admin-body .admin-main > .admin-command {
    color: var(--ss-motion-ink) !important;
    background: var(--ss-motion-surface) !important;
    border: 1px solid var(--ss-motion-rim) !important;
    border-radius: 18px !important;
    box-shadow: var(--ss-motion-shadow) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
}

body.portal-body .portal-page-header,
body.portal-body .portal-welcome {
    padding: 1.15rem 1.35rem !important;
}

body.admin-body .admin-main > .admin-page-title {
    width: fit-content;
    margin-bottom: 1rem !important;
    padding: .8rem 1.05rem !important;
}

body.admin-body .admin-main > .admin-toolbar,
body.admin-body .admin-main > .admin-command-title,
body.admin-body .admin-main > .admin-command {
    padding: 1rem 1.2rem !important;
}

/* Authentication is its own high-attention flow. Keep the card, labels and
   controls on a calm white plane, while retaining the selected accent. */
body.public-body .auth-formside,
body:has(.login-shell) .login-formside,
body.portal-register-body .portal-register-wrap {
    color: var(--ss-motion-ink) !important;
}

body.public-body .portal-auth-card,
body:has(.login-shell) .login-card {
    color: var(--ss-motion-ink) !important;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(255,255,255,.92) !important;
    border-radius: 24px !important;
    padding: clamp(1.5rem, 4vw, 2.35rem) !important;
    box-shadow: var(--ss-motion-shadow) !important;
    backdrop-filter: blur(26px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(145%) !important;
}

body.public-body .portal-auth-card .brand,
body.public-body .portal-auth-card h1,
body.public-body .portal-auth-card h2,
body:has(.login-shell) .login-card .brand,
body:has(.login-shell) .login-card h1,
body:has(.login-shell) .login-card h2 {
    color: var(--ss-motion-ink) !important;
    font-family: var(--ss-font-display) !important;
    letter-spacing: -.045em !important;
}

body.public-body .portal-auth-card .form-label,
body.public-body .portal-auth-card .form-check-label,
body:has(.login-shell) .login-card .form-label,
body:has(.login-shell) .login-card .form-check-label {
    color: var(--ss-motion-ink) !important;
    font-weight: 700 !important;
}

body.portal-register-body .admin-panel,
body.portal-register-body .portal-auth-card,
body.portal-register-body .admin-candidate-form,
body.portal-register-body .portal-upload-card {
    color: var(--ss-motion-ink) !important;
    background: rgba(255,255,255,.95) !important;
    border-color: var(--ss-motion-rim) !important;
    box-shadow: var(--ss-motion-shadow) !important;
}

@media (prefers-reduced-transparency: reduce) {
    .portal-card, .portal-job-card, .portal-employer-card,
    .portal-stat-card, .portal-topbar, .admin-panel, .admin-stat-card,
    .admin-chart-panel, .admin-form-card, .admin-topbar,
    .portal-public-nav, .portal-auth-card, .login-card,
    .experience-public .experience-hero__copy,
    .experience-public .experience-section__head,
    .experience-public .experience-search,
    .experience-public .experience-category,
    .experience-public .experience-sector-card,
    .experience-public .experience-talent-card {
        background: #fff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}