/*
 * Luminous Mission Control
 * Shared application composition layer. It is loaded after the legacy route
 * styles so every surface inherits one product language without changing view
 * data, forms, routes, or controller behavior.
 */

:root {
    --lm-font-body: var(--ss-font-sans, 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
    --lm-font-display: var(--ss-font-display, 'Plus Jakarta Sans', var(--lm-font-body));
    --lm-radius-sm: var(--ss-radius-md, 10px);
    --lm-radius-md: var(--ss-radius-lg, 14px);
    --lm-radius-lg: var(--ss-radius-2xl, 20px);
    --lm-content: var(--ss-content-max-width, 1440px);
    --lm-sidebar: var(--ss-sidebar-width, 248px);
    --lm-topbar: var(--ss-topbar-height, 72px);
    --lm-duration: var(--ss-duration-normal, 220ms);
    --lm-ease: var(--ss-ease-default, cubic-bezier(.2, .75, .25, 1));

    /* Public names for the same semantic contract. Keeping these aliases in
       the final layer lets older views and new components share one palette. */
    --theme-primary: var(--ss-primary);
    --theme-primary-dark: var(--ss-primary-dark);
    --theme-primary-hover: var(--ss-primary-hover);
    --theme-primary-light: var(--ss-primary-light);
    --theme-primary-soft: var(--ss-primary-soft);
    --theme-primary-glow: var(--ss-primary-glow);
    --theme-canvas: var(--ss-canvas);
    --theme-surface: var(--ss-surface);
    --theme-surface-strong: var(--ss-surface-strong);
    --theme-text: var(--ss-text);
    --theme-text-soft: var(--ss-text-soft);
    --theme-muted: var(--ss-muted);
    --theme-border: var(--ss-border);
    --theme-grid-line: var(--ss-grid-line);
}

html[data-theme="red"], :root {
    --lm-accent: var(--ss-primary);
    --lm-accent-deep: var(--ss-primary-dark);
    --lm-accent-light: var(--ss-primary-light);
    --lm-accent-soft: var(--ss-primary-soft);
    --lm-accent-glow: var(--ss-primary-glow);
    --lm-canvas: var(--ss-canvas);
    --lm-canvas-deep: var(--ss-canvas-deep);
    --lm-panel: var(--ss-surface-strong);
    --lm-panel-soft: var(--ss-surface);
    --lm-ink: var(--ss-text);
    --lm-ink-soft: var(--ss-text-soft);
    --lm-muted: var(--ss-muted);
    --lm-line: var(--ss-border);
    --lm-line-soft: var(--ss-divider);
    --lm-atmosphere-a: var(--ss-aurora-a);
    --lm-atmosphere-b: var(--ss-aurora-b);
    --lm-atmosphere-c: var(--ss-aurora-c);
    --lm-shadow: var(--ss-shadow-card);
    --lm-shadow-hover: var(--ss-shadow-floating);
}

html[data-theme="blue"] {
    --lm-accent: var(--ss-primary);
    --lm-accent-deep: var(--ss-primary-dark);
    --lm-accent-light: var(--ss-primary-light);
    --lm-accent-soft: var(--ss-primary-soft);
    --lm-accent-glow: var(--ss-primary-glow);
    --lm-canvas: var(--ss-canvas);
    --lm-canvas-deep: var(--ss-canvas-deep);
    --lm-panel: var(--ss-surface-strong);
    --lm-panel-soft: var(--ss-surface);
    --lm-ink: var(--ss-text);
    --lm-ink-soft: var(--ss-text-soft);
    --lm-muted: var(--ss-muted);
    --lm-line: var(--ss-border);
    --lm-line-soft: var(--ss-divider);
    --lm-atmosphere-a: var(--ss-aurora-a);
    --lm-atmosphere-b: var(--ss-aurora-b);
    --lm-atmosphere-c: var(--ss-aurora-c);
    --lm-shadow: var(--ss-shadow-card);
    --lm-shadow-hover: var(--ss-shadow-floating);
}

html,
body {
    min-height: 100%;
}

html {
    color-scheme: light;
}

body,
body button,
body input,
body select,
body textarea {
    font-family: var(--lm-font-body);
    color: var(--lm-ink);
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
}

body {
    background: transparent !important;
    background-image: none !important;
    overflow-x: hidden;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: var(--lm-font-display);
    color: var(--lm-ink);
    letter-spacing: 0 !important;
    text-wrap: balance;
}

body p,
body li,
body dd,
body dt,
body label,
body th,
body td {
    overflow-wrap: anywhere;
}

/* Atmospheric canvas: video + restrained theme-tinted light fields. */
.ss-theme-motion {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
    background: var(--lm-canvas-deep) !important;
    pointer-events: none !important;
}

.ss-theme-motion__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .86;
    filter: saturate(1.20) contrast(1.06) brightness(.82);
    transform: scale(1.035);
}

.ss-theme-motion__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--lm-canvas) 42%, transparent), color-mix(in srgb, var(--lm-canvas) 9%, transparent) 52%, color-mix(in srgb, var(--lm-canvas) 38%, transparent)),
        radial-gradient(circle at 14% 10%, var(--lm-atmosphere-a), transparent 32%),
        radial-gradient(circle at 86% 12%, var(--lm-atmosphere-b), transparent 30%),
        radial-gradient(circle at 72% 92%, var(--lm-atmosphere-c), transparent 36%);
}

.ss-theme-atmosphere {
    z-index: 0 !important;
    opacity: .62 !important;
}

.ss-atmosphere.ss-theme-atmosphere {
    z-index: 0 !important;
}

.ss-theme-atmosphere__orb--a {
    background: radial-gradient(circle at 35% 35%, var(--lm-atmosphere-a), transparent 66%) !important;
    animation-duration: 23s !important;
}

.ss-theme-atmosphere__orb--b {
    background: radial-gradient(circle at 60% 40%, var(--lm-atmosphere-b), transparent 68%) !important;
    animation-duration: 31s !important;
}

.ss-theme-atmosphere__orb--c {
    background: radial-gradient(circle at 50% 50%, var(--lm-atmosphere-c), transparent 70%) !important;
    animation-duration: 39s !important;
}

.ss-theme-atmosphere__grid {
    background-image:
        linear-gradient(var(--lm-line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--lm-line-soft) 1px, transparent 1px) !important;
    background-size: 58px 58px !important;
    opacity: .48 !important;
    mask-image: radial-gradient(ellipse at center, #000 12%, transparent 74%) !important;
}

.ss-theme-atmosphere__sheen {
    background: linear-gradient(115deg, transparent 31%, color-mix(in srgb, var(--lm-accent) 18%, transparent) 50%, transparent 69%) !important;
    opacity: .78 !important;
    animation-duration: 21s !important;
}

body > :not(.ss-theme-motion):not(.ss-theme-atmosphere) {
    position: relative;
    z-index: 1;
}

/* See theme-bridge.css: the body-level stacking context created by the rules
   above would otherwise cap the shared confirm dialog, which lives directly
   under <body>, below the page chrome. Keep it pinned to the root context. */
.app-confirm-modal {
    position: fixed !important;
    isolation: auto !important;
    z-index: 2147483000 !important;
}

/* Public jobs discovery uses the cool blue-white reference atmosphere. The
   full-bleed template has a legacy white canvas rule in tpl-overrides.css;
   scope this correction to pages explicitly marked data-force-theme so the
   rest of the application keeps its normal red default/theme switch. */
html[data-force-theme="blue"][data-theme="blue"] body.public-body {
    background: var(--ss-gradient-atmosphere) !important;
    background-attachment: fixed !important;
    background-color: var(--ss-canvas) !important;
}

html[data-force-theme="blue"][data-theme="blue"] .portal-public-shell {
    background: transparent !important;
    background-image: none !important;
}

html[data-force-theme="blue"][data-theme="blue"] .portal-public-shell .portal-public-latest,
html[data-force-theme="blue"][data-theme="blue"] .portal-public-shell .employer-directory {
    background: transparent !important;
}

@media (prefers-reduced-motion: no-preference) {
    .portal-main,
    .admin-main,
    .portal-public-shell,
    .experience-public,
    .portal-shell-guest,
    .login-shell {
        animation: lm-enter 360ms var(--lm-ease) both;
    }
}

@keyframes lm-enter {
    from { opacity: .0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* The visible glass primitive. JavaScript applies this class to major
   existing panels so view markup and behavior remain untouched. */
.ss-glass-panel {
    position: relative;
    isolation: isolate;
    /* Keep action menus and table controls from being clipped by the glass
       treatment. Individual decorative panels add overflow clipping only
       where their existing composition requires it. */
    overflow: visible;
    background:
        linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.58)) !important;
    border: 1px solid rgba(255,255,255,.86) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.98) inset,
        0 0 0 1px var(--lm-line) inset,
        0 12px 34px rgba(30,20,20,.08),
        0 18px 48px var(--lm-accent-soft) !important;
    backdrop-filter: blur(24px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
}

.ss-glass-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(120deg, rgba(255,255,255,.70), transparent 32%, transparent 67%, rgba(255,255,255,.22));
    opacity: .88;
}

.ss-glass-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: 0 0 0 1px var(--lm-accent-soft) inset;
}

.ss-glass-panel > * {
    z-index: 1;
}

.ss-glass-panel:hover {
    border-color: color-mix(in srgb, var(--lm-accent) 30%, white) !important;
}

#siteHeader.ss-glass-panel,
.portal-public-nav.ss-glass-panel {
    overflow: visible;
}

@supports not ((backdrop-filter: blur(1px))) {
    .ss-glass-panel {
        background: rgba(255,255,255,.96) !important;
    }
}

/* Application rails: light glass, red active pills, readable dark text. */
.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: 18px 0 48px rgba(45, 19, 20, .06) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}

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

.portal-brand__title,
.admin-sidebar__brand-text strong,
.admin-sidebar__brand-text span,
.portal-sidebar a,
.admin-sidebar a,
.portal-nav__link,
.admin-nav__link,
.admin-nav__sublink {
    color: var(--ss-text) !important;
}

.portal-brand__title,
.admin-sidebar__brand-text strong {
    font-family: var(--lm-font-display) !important;
    font-weight: 800 !important;
    color: var(--ss-text-strong) !important;
}

.portal-nav__link,
.admin-nav__link,
.admin-nav__sublink {
    min-height: 42px;
    margin: 3px 10px;
    border-radius: var(--lm-radius-sm) !important;
    transition: background var(--lm-duration) var(--lm-ease), color var(--lm-duration) var(--lm-ease), transform var(--lm-duration) var(--lm-ease);
}

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

.portal-nav__link:not(.is-active) svg,
.admin-nav__link:not(.is-active) .admin-nav__icon,
.admin-nav__sublink:not(.is-active) {
    color: var(--ss-muted) !important;
    opacity: 1 !important;
}

.portal-nav__link:hover,
.admin-nav__link:hover,
.admin-nav__sublink:hover {
    color: var(--ss-primary-dark) !important;
    background: var(--ss-rail-hover) !important;
    transform: translateX(2px);
}

.portal-nav__link.is-active,
.admin-nav__link.is-active {
    color: var(--ss-nav-active-ink) !important;
    background: var(--ss-nav-active-bg) !important;
    background-image: none !important;
    box-shadow: 0 8px 18px var(--ss-primary-glow) !important;
}

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

.admin-nav__sublink.is-active {
    color: var(--ss-primary-dark) !important;
    background: var(--ss-primary-soft) !important;
    box-shadow: inset 3px 0 0 var(--ss-primary) !important;
}

.portal-sidebar .ss-theme-switch,
.admin-sidebar .ss-theme-switch {
    border-color: var(--ss-rail-border) !important;
    background: var(--ss-surface) !important;
}

.ss-theme-switch {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    min-width: 76px;
    min-height: 38px;
    padding: 6px 8px !important;
    border: 1px solid var(--lm-line) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 6px 16px rgba(20,25,40,.08) !important;
}

.ss-theme-switch:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 4px var(--lm-accent-soft), 0 6px 16px rgba(20,25,40,.08) !important;
}

.ss-theme-switch__track {
    flex: 1;
    height: 19px;
    border-radius: 999px;
    background: var(--lm-accent-soft) !important;
    border: 1px solid var(--lm-line) !important;
}

.ss-theme-switch__thumb {
    width: 15px !important;
    height: 15px !important;
    background: var(--lm-accent) !important;
    box-shadow: 0 3px 8px var(--lm-accent-glow) !important;
}

.ss-theme-switch__dot--red { background: #C62828 !important; }
.ss-theme-switch__dot--blue { background: #1769E0 !important; }

.portal-topbar,
.admin-topbar,
.portal-public-nav,
#siteHeader,
.nav {
    background: var(--ss-surface) !important;
    border: 1px solid var(--ss-glass-border) !important;
    box-shadow: var(--ss-shadow-card) !important;
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    color: var(--ss-text) !important;
}

.portal-topbar-search .form-control,
.admin-topbar__search .form-control,
.admin-topbar__search input,
.portal-topbar input[type="search"] {
    color: var(--ss-text) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: var(--ss-border) !important;
}

.portal-topbar-search .form-control::placeholder,
.admin-topbar__search .form-control::placeholder,
.portal-topbar input::placeholder {
    color: var(--ss-placeholder) !important;
}

.portal-topbar,
.admin-topbar {
    min-height: var(--lm-topbar);
    border-radius: 0 0 var(--lm-radius-md) var(--lm-radius-md) !important;
}

.portal-topbar__hello strong,
.admin-topbar__title,
.portal-mobilebar__title {
    font-family: var(--lm-font-display) !important;
    color: var(--lm-ink) !important;
}

.portal-topbar__hello span,
.portal-topbar__profile,
.admin-topbar__subtitle {
    color: var(--lm-muted) !important;
}

.portal-avatar,
.admin-avatar,
.portal-brand__title::before,
.admin-sidebar__mark,
.portal-public-nav__mark {
    color: #fff !important;
    background: var(--lm-accent) !important;
    box-shadow: 0 8px 18px var(--lm-accent-glow) !important;
}

/* Content framing: headers give page titles a quiet plane before the data. */
.portal-page-header,
.portal-welcome,
.admin-main > .admin-page-title,
.admin-main > .admin-toolbar,
.admin-main > .admin-command-title,
.admin-main > .admin-command {
    color: var(--lm-ink) !important;
    background: var(--lm-panel) !important;
    border: 1px solid rgba(255, 255, 255, .88) !important;
    border-radius: var(--lm-radius-md) !important;
    box-shadow: var(--lm-shadow) !important;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.portal-page-header,
.portal-welcome {
    padding: 20px 24px !important;
}

.admin-main > .admin-page-title {
    width: fit-content;
    padding: 12px 16px !important;
}

.portal-page-title,
.admin-page-title,
.portal-welcome h1,
.portal-card__title,
.admin-panel__title,
.admin-command-title h1 {
    color: var(--lm-ink) !important;
    font-family: var(--lm-font-display) !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
}

.portal-page-subtitle,
.portal-welcome p,
.admin-page-subtitle,
.portal-card__meta,
.admin-panel__meta {
    color: var(--lm-muted) !important;
}

/* Surfaces: restrained radius and consistent edge-lighting, with hierarchy
   preserved for data-heavy panels. */
.portal-card,
.portal-job-card,
.portal-employer-card,
.portal-stat-card,
.portal-search-hero,
.portal-score,
.portal-package-card,
.portal-candidate-card,
.portal-company-card,
.admin-panel,
.admin-stat-card,
.admin-chart-panel,
.admin-form-card,
.admin-command,
.portal-public-shell .employer-directory__search-card,
.login-card,
.portal-auth-card {
    color: var(--lm-ink) !important;
    background: var(--lm-panel) !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: var(--lm-radius-md) !important;
    box-shadow: var(--lm-shadow) !important;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    transition: transform var(--lm-duration) var(--lm-ease), box-shadow var(--lm-duration) var(--lm-ease), border-color var(--lm-duration) var(--lm-ease);
}

@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,
    .admin-form-card:hover,
    .portal-package-card:hover,
    .portal-candidate-card:hover,
    .portal-company-card:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--lm-accent) 28%, white) !important;
        box-shadow: var(--lm-shadow-hover) !important;
    }
}

/* Actions and links. */
.portal-btn,
.admin-btn,
.btn-jp,
.btn-primary,
.experience-public .portal-btn--primary,
.portal-public-nav .portal-btn--primary {
    min-height: 42px;
    border-radius: var(--lm-radius-sm) !important;
    font-family: var(--lm-font-body) !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    transition: transform var(--lm-duration) var(--lm-ease), box-shadow var(--lm-duration) var(--lm-ease), background var(--lm-duration) var(--lm-ease) !important;
}

.portal-btn--primary,
.admin-btn--primary,
.admin-btn--active,
.btn-jp,
.btn-primary,
.experience-public .portal-btn--primary,
.portal-public-nav .portal-btn--primary {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--lm-accent-deep), var(--lm-accent) 58%, var(--lm-accent-light)) !important;
    box-shadow: 0 10px 22px var(--lm-accent-glow) !important;
}

.portal-btn--primary:hover,
.admin-btn--primary:hover,
.admin-btn--active:hover,
.btn-jp:hover,
.btn-primary:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px var(--lm-accent-glow) !important;
}

.portal-btn:not(.portal-btn--primary),
.admin-btn:not(.admin-btn--primary):not(.admin-btn--active),
.btn-outline,
.btn-ghost {
    color: var(--lm-ink-soft) !important;
    border-color: var(--lm-line) !important;
    background: rgba(255, 255, 255, .68) !important;
}

.portal-btn:not(.portal-btn--primary):hover,
.admin-btn:not(.admin-btn--primary):not(.admin-btn--active):hover,
.btn-outline:hover,
.btn-ghost:hover {
    color: var(--lm-accent) !important;
    border-color: var(--lm-accent) !important;
    background: var(--lm-accent-soft) !important;
}

a,
.portal-link,
.experience-text-link,
.experience-live-card__link,
.portal-main a:not(.portal-btn),
.admin-main a:not(.admin-btn) {
    color: var(--lm-accent) !important;
}

a:hover,
.portal-link:hover,
.experience-text-link:hover {
    color: var(--lm-accent-deep) !important;
}

/* Inputs, dropdowns, upload controls and filters. */
.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"] {
    min-height: 42px;
    color: var(--lm-ink) !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid var(--lm-line) !important;
    border-radius: var(--lm-radius-sm) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

textarea,
.admin-form-textarea {
    min-height: 110px;
}

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

.form-control:focus,
.form-select:focus,
.admin-input:focus,
.admin-select:focus,
.admin-form-control:focus,
.admin-form-select:focus,
.admin-form-textarea:focus,
textarea:focus,
select:focus {
    color: var(--lm-ink) !important;
    border-color: var(--lm-accent) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 4px var(--lm-accent-soft), 0 5px 14px rgba(20,25,40,.06) !important;
}

label,
.form-label,
.admin-form-label {
    color: var(--lm-ink-soft) !important;
    font-weight: 700 !important;
}

/* Tables and operational data. */
.portal-table-wrap,
.admin-table-wrap,
.table-responsive {
    border: 1px solid var(--lm-line-soft);
    border-radius: var(--lm-radius-md);
    background: rgba(255, 255, 255, .96);
    overflow-x: auto;
}

.portal-table,
.admin-table,
.table {
    color: var(--lm-ink) !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--lm-ink);
    margin-bottom: 0;
}

.portal-table th,
.admin-table th,
.table thead th {
    color: var(--lm-muted) !important;
    background: var(--lm-accent-soft) !important;
    border-bottom: 1px solid var(--lm-line) !important;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.portal-table td,
.admin-table td,
.table td {
    border-color: var(--lm-line-soft) !important;
    vertical-align: middle;
}

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

/* Status chips use semantic meaning; decorative old palette classes are
   intentionally mapped to the active theme accent. */
.portal-badge,
.admin-badge,
.portal-category-chip,
.job-detail-chip,
.badge,
.status-badge {
    border-radius: 999px !important;
    font-weight: 750 !important;
}

.portal-badge--neutral,
.admin-badge--active,
.admin-badge--approved,
.admin-badge--published,
.admin-badge--verified,
.portal-category-chip,
.job-detail-chip {
    color: var(--lm-accent-deep) !important;
    background: var(--lm-accent-soft) !important;
    border-color: var(--lm-line) !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-stat-card--coral .portal-stat-card__icon,
.portal-stat-card--lime .portal-stat-card__icon,
.portal-stat-card--teal .portal-stat-card__icon,
.portal-job-card__mark--coral,
.portal-job-card__mark--lime,
.portal-job-card__mark--aqua,
.portal-job-card__mark--violet,
.experience-sector-card--violet [class*="__icon"],
.experience-sector-card--blue [class*="__icon"],
.experience-sector-card--teal [class*="__icon"],
.experience-sector-card--lime [class*="__icon"],
.experience-sector-card--coral [class*="__icon"],
.experience-sector-card--amber [class*="__icon"],
.experience-sector-card--violet > b,
.experience-sector-card--blue > b,
.experience-sector-card--teal > b,
.experience-sector-card--lime > b,
.experience-sector-card--coral > b,
.experience-sector-card--amber > b,
[class*="portal-stat-card--"] .portal-stat-card__icon {
    color: var(--ss-primary) !important;
    background: var(--ss-primary-soft) !important;
    border-color: var(--ss-border) !important;
}

.portal-stat-card--blue,
.portal-stat-card--violet,
.portal-stat-card--amber,
.portal-stat-card--green,
.portal-stat-card--coral,
.portal-stat-card--lime,
.portal-stat-card--teal,
.experience-sector-card--violet,
.experience-sector-card--blue,
.experience-sector-card--teal,
.experience-sector-card--lime,
.experience-sector-card--coral,
.experience-sector-card--amber {
    --tone: var(--ss-primary);
    --accent: var(--ss-primary);
    border-color: var(--ss-border) !important;
}

/* Public landing and directory surfaces. */
.experience-public,
.portal-public-shell {
    color: var(--lm-ink) !important;
}

.experience-public main,
.portal-public-shell > section,
.portal-public-shell > .employer-directory {
    max-width: var(--lm-content) !important;
    margin-inline: auto;
}

.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(--lm-ink) !important;
    background: var(--lm-panel) !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: var(--lm-radius-md) !important;
    box-shadow: var(--lm-shadow) !important;
}

.experience-public .experience-hero__copy {
    padding: clamp(20px, 3vw, 34px) !important;
}

.experience-public .experience-section__head {
    padding: 18px 22px !important;
}

.experience-public .experience-hero h1,
.experience-public .experience-section 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 .portal-job-card__title,
.experience-public .portal-job-card__title a {
    color: var(--lm-ink) !important;
    font-family: var(--lm-font-display) !important;
    letter-spacing: 0 !important;
}

.experience-public .experience-proof__faces i,
.experience-public .experience-search label > span,
.experience-public .experience-live-card__company i,
.experience-public .experience-category > b,
.experience-public .experience-sector-card > b {
    color: var(--lm-accent) !important;
}

.experience-public .experience-proof__faces i {
    background: var(--lm-accent) !important;
}

.experience-public .experience-hero__lead,
.experience-public .experience-section 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 .portal-job-card__meta,
.experience-public .experience-live-card > p,
.experience-public .experience-live-card__company {
    color: var(--lm-muted) !important;
}

.experience-public .experience-hero h1 em,
.experience-public .experience-section h2 em,
.experience-public .experience-eyebrow,
.experience-public .experience-text-link {
    color: var(--lm-accent) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.experience-public .experience-journey__panel {
    color: #fff !important;
    background: linear-gradient(135deg, var(--lm-accent-deep), var(--lm-accent) 62%, var(--lm-accent-light)) !important;
    box-shadow: 0 24px 54px var(--lm-accent-glow) !important;
}

.experience-public .experience-live-card__tags span,
.experience-public .experience-float > span,
.experience-public .experience-category__icon,
.experience-public .experience-talent-card__skills span {
    color: var(--lm-accent-deep) !important;
    background: var(--lm-accent-soft) !important;
}

[class*="--rose"] [class*="__icon"],
[class*="--amber"] [class*="__icon"],
[class*="--violet"] [class*="__icon"],
[class*="--teal"] [class*="__icon"],
[class*="--orange"] [class*="__icon"] {
    color: var(--lm-accent) !important;
    background: var(--lm-accent-soft) !important;
}

/* Neutralize legacy decorative palette names at the rendered edge. Semantic
   success/warning/error classes are intentionally excluded. */
.experience-public [class*="violet"],
.experience-public [class*="lime"],
.experience-public [class*="coral"],
.experience-public [class*="purple"],
.experience-public [class*="cyan"],
.experience-public [class*="teal"] {
    color: var(--lm-accent) !important;
    border-color: var(--lm-line) !important;
    background-color: var(--lm-accent-soft) !important;
}

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

.portal-public-nav nav a:not(.portal-btn):hover,
.portal-public-nav nav a.is-active {
    color: var(--lm-accent) !important;
    background: var(--lm-accent-soft) !important;
}

/* Authentication and registration: form-first, no oversized decorative rail. */
.portal-shell-guest,
.login-shell {
    min-height: 100vh;
    background: transparent !important;
}

.auth-showcase,
.login-showcase {
    background: linear-gradient(145deg, var(--lm-accent-deep), var(--lm-accent) 58%, var(--lm-accent-light)) !important;
    box-shadow: 20px 0 58px var(--lm-accent-glow) !important;
}

.auth-showcase__headline,
.login-showcase__headline,
.auth-showcase__brand,
.login-showcase__brand {
    font-family: var(--lm-font-display) !important;
    letter-spacing: 0 !important;
}

.auth-formside,
.login-formside {
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(24px, 5vw, 72px) !important;
}

.portal-auth-card,
.login-card {
    width: min(100%, 520px) !important;
    padding: clamp(24px, 4vw, 42px) !important;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(255,255,255,.92) !important;
    border-radius: var(--lm-radius-lg) !important;
    box-shadow: var(--lm-shadow-hover) !important;
}

.portal-auth-card.is-wide {
    width: min(100%, 980px) !important;
}

/* Login (job seeker + employer): widen the card from the sides so the
   single-column form does not sit inside a narrow strip. The card is a grid
   item inside .auth-formside, whose implicit column shrink-wraps the form —
   so the column must span the available width before the card can widen. */
body:has(.portal-auth-card--login) .auth-formside {
    grid-template-columns: minmax(0, 1fr) !important;
}

.portal-auth-card.portal-auth-card--login {
    width: min(100%, 860px) !important;
    justify-self: center !important;
}

.portal-auth-card.portal-auth-card--login .form-control,
.portal-auth-card.portal-auth-card--login .btn-jp,
.portal-auth-card.portal-auth-card--login .btn-outline-secondary {
    width: 100%;
}

.portal-auth-card .brand,
.portal-auth-card h1,
.portal-auth-card h2,
.login-card .brand,
.login-card h1,
.login-card h2 {
    color: var(--lm-ink) !important;
    font-family: var(--lm-font-display) !important;
    letter-spacing: 0 !important;
}

.portal-auth-card .brand span,
.login-card .brand span,
.portal-auth-card .portal-link,
.login-card a {
    color: var(--lm-accent) !important;
}

.portal-register-body .portal-register-wrap {
    max-width: 1180px;
    margin-inline: auto;
    padding: clamp(22px, 4vw, 56px) 20px 72px;
}

.portal-register-body .portal-register-top,
.portal-register-body .portal-register-wrap > .admin-toolbar {
    background: var(--lm-panel);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: var(--lm-radius-md);
    box-shadow: var(--lm-shadow);
    padding: 18px 22px;
}

/* Alerts, notices, modals and confirmations. */
.alert,
.app-notice,
.portal-notice,
.admin-notice,
.toast,
.modal-content,
.confirm-action-modal,
.dropdown-menu {
    color: var(--lm-ink) !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid var(--lm-line) !important;
    border-radius: var(--lm-radius-md) !important;
    box-shadow: var(--lm-shadow-hover) !important;
}

.modal-backdrop,
.portal-backdrop,
.admin-sidebar-backdrop {
    background: rgba(15, 20, 32, .38) !important;
    backdrop-filter: blur(6px);
}

.dropdown-menu {
    padding: 7px !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.nav-pills .nav-link.active,
.admin-tabs a.is-active {
    color: var(--lm-accent-deep) !important;
    background: var(--lm-accent-soft) !important;
}

/* Empty, loading and progress states belong to the system as well. */
[aria-busy="true"],
.is-loading,
.loading,
.skeleton {
    position: relative;
    overflow: hidden;
}

.skeleton,
[aria-busy="true"]::after,
.is-loading::after {
    background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.88), rgba(255,255,255,.35));
    background-size: 220% 100%;
    animation: lm-shimmer 1.5s linear infinite;
}

.empty-state,
.portal-empty,
.admin-empty,
.no-results {
    color: var(--lm-muted) !important;
    background: var(--lm-panel-soft) !important;
    border: 1px dashed var(--lm-line) !important;
    border-radius: var(--lm-radius-md) !important;
    padding: clamp(28px, 5vw, 56px) !important;
    text-align: center;
}

.progress,
.portal-progress,
.admin-progress {
    background: var(--lm-accent-soft) !important;
    border-radius: 999px !important;
}

.progress-bar,
.portal-progress__bar,
.admin-progress__bar {
    background: linear-gradient(90deg, var(--lm-accent-deep), var(--lm-accent-light)) !important;
    border-radius: inherit;
}

@keyframes lm-shimmer {
    from { background-position: 180% 0; }
    to { background-position: -40% 0; }
}

/* Mobile: keep the existing drawer JS behavior, but make the content frame
   comfortable and prevent tables/forms from colliding. */
@media (max-width: 900px) {
    .portal-topbar,
    .admin-topbar {
        min-height: 64px;
    }

    .portal-main,
    .admin-main {
        padding: 22px 18px 48px !important;
    }

    .portal-page-header,
    .portal-welcome {
        padding: 17px !important;
    }

    .portal-topbar-search {
        min-width: 0;
    }

    .portal-topbar-search .form-control {
        min-width: 0;
    }

    .experience-public main {
        padding-inline: 16px !important;
    }

    .experience-public .experience-hero {
        padding-top: 108px !important;
    }

    .portal-public-shell {
        padding-inline: 16px !important;
    }
}

@media (max-width: 640px) {
    .portal-topbar,
    .admin-topbar {
        border-radius: 0 !important;
    }

    .portal-topbar__hello,
    .portal-topbar-search,
    .admin-topbar__search {
        width: 100%;
    }

    .portal-topbar__actions,
    .admin-topbar__right {
        gap: 7px !important;
    }

    .portal-page-title,
    .admin-page-title {
        font-size: 1.45rem !important;
        line-height: 1.18 !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: 13px !important;
    }

    .portal-auth-card,
    .login-card {
        padding: 22px 18px !important;
    }

    .auth-formside,
    .login-formside {
        min-height: 100dvh;
        padding: 72px 16px 28px !important;
    }

    .ss-theme-motion__video {
        opacity: .42;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-theme-motion__video,
    .ss-theme-atmosphere__orb,
    .ss-theme-atmosphere__grid,
    .ss-theme-atmosphere__sheen,
    .ss-atmosphere::before,
    .ss-atmosphere::after,
    .ss-atmosphere-grid,
    .skeleton,
    [aria-busy="true"]::after,
    .is-loading::after {
        animation: none !important;
        transform: none !important;
    }

    .ss-theme-motion__video {
        display: none;
    }

    .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,
    .admin-form-card:hover {
        transform: none !important;
    }
}

/* Dashboard composition: welcome + score, metric row, main/side grid. */
.portal-welcome {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr);
    align-items: stretch !important;
    gap: 20px !important;
}

.portal-stats--metrics,
.portal-stats.portal-stats--metrics {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px !important;
    margin: 0 0 22px !important;
}

.portal-stats--metrics .portal-stat-card,
.portal-stat-card--primary,
.portal-stat-card--soft {
    min-width: 0;
}

.portal-stat-card--primary .portal-stat-card__icon,
.portal-stat-card--soft .portal-stat-card__icon {
    color: var(--lm-accent) !important;
    background: var(--lm-accent-soft) !important;
}

.portal-stat-card--soft {
    background: color-mix(in srgb, var(--lm-accent-soft) 55%, white) !important;
}

.portal-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .85fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 8px;
}

.portal-dash-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.portal-dash-main,
.portal-dash-side {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.portal-dash-side .portal-pipeline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Public landing: keep first viewport search-first, not an empty hero void. */
.experience-public .experience-hero {
    padding-top: 118px !important;
    padding-bottom: 0 !important;
}

/* Reference composition: a compact glass rail, editorial hero copy and a
   search-first opportunity surface. These rules only rearrange presentation;
   all existing links, forms, carousel controls and server content remain in
   the original view. */
.experience-public {
    position: relative;
    padding-bottom: 8px;
}

.experience-public .portal-public-nav {
    position: relative;
    z-index: 20;
    width: min(calc(100% - 32px), 1240px);
    min-height: 74px;
    margin: 18px auto 0;
    padding: 10px 14px 10px 22px;
    border-radius: 28px !important;
    background: linear-gradient(110deg, rgba(255,255,255,.90), rgba(255,255,255,.60)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 18px 48px var(--lm-accent-soft) !important;
}

.experience-public .portal-public-nav__brand {
    min-width: 174px;
    color: var(--lm-ink) !important;
    font-family: var(--lm-font-display);
    font-size: 1.16rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.experience-public .portal-public-nav__brand > span:last-child {
    line-height: 1.05;
}

.experience-public .portal-public-nav__brand > span:last-child > span {
    color: var(--lm-accent) !important;
}

.experience-public .portal-public-nav__brand small {
    display: block;
    margin-top: 3px;
    color: var(--lm-muted) !important;
    font-size: .49rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.experience-public .portal-public-nav nav {
    gap: 3px;
    align-items: center;
}

.experience-public .portal-public-nav nav a:not(.portal-btn) {
    position: relative;
    min-height: 42px;
    padding: 10px 13px;
    border-radius: 12px;
    color: var(--lm-ink-soft) !important;
    font-size: .78rem;
    font-weight: 750;
}

.experience-public .portal-public-nav nav a:not(.portal-btn)::after {
    content: '';
    position: absolute;
    right: 13px;
    bottom: 4px;
    left: 13px;
    height: 2px;
    border-radius: 999px;
    background: var(--lm-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--lm-duration) var(--lm-ease);
}

.experience-public .portal-public-nav nav a:not(.portal-btn):hover,
.experience-public .portal-public-nav nav a.is-active {
    color: var(--lm-accent-deep) !important;
    background: var(--lm-accent-soft) !important;
}

.experience-public .portal-public-nav nav a:not(.portal-btn):hover::after,
.experience-public .portal-public-nav nav a.is-active::after {
    transform: scaleX(1);
}

.experience-public .experience-hero {
    max-width: 1240px;
    margin-inline: auto;
    padding-top: 46px !important;
    padding-inline: 18px;
}

.experience-public .experience-hero__grid {
    grid-template-columns: minmax(0, .98fr) minmax(360px, 1.02fr);
    gap: clamp(24px, 4vw, 58px) !important;
    align-items: center !important;
}

.experience-public .experience-hero__copy {
    position: relative;
    overflow: hidden;
    max-width: 650px;
    padding: clamp(26px, 4vw, 48px) !important;
    border-radius: 32px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.66)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.99) inset, 0 0 0 1px var(--lm-accent-soft) inset, 0 25px 68px var(--lm-accent-soft) !important;
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
}

.experience-public .experience-hero__copy::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -22%;
    width: 58%;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lm-accent-soft), transparent 68%);
    pointer-events: none;
}

.experience-public .experience-hero__copy > * {
    position: relative;
    z-index: 1;
}

.experience-public .experience-eyebrow {
    letter-spacing: .06em;
    color: var(--lm-accent-deep) !important;
    font-weight: 800;
}

.experience-public .experience-hero h1 {
    max-width: 590px;
    margin-top: 14px;
    font-size: clamp(3.3rem, 6vw, 5.5rem);
    line-height: .96;
    letter-spacing: -.065em !important;
}

.experience-public .experience-hero h1 em,
.experience-public .experience-section h2 em {
    color: var(--lm-accent) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.experience-public .experience-hero__lead {
    max-width: 520px;
    color: var(--lm-ink-soft) !important;
    font-size: 1rem;
    line-height: 1.7;
}

.experience-public .experience-search {
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr) auto;
    max-width: 620px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.94) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.87) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 15px 35px var(--lm-accent-soft) !important;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.experience-public .experience-search label {
    min-height: 45px;
    border-color: var(--lm-line-soft) !important;
}

.experience-public .experience-search input {
    color: var(--lm-ink) !important;
    font-size: .82rem;
}

.experience-public .experience-search input::placeholder {
    color: var(--lm-muted) !important;
    opacity: 1;
}

.experience-public .experience-search .portal-btn {
    min-height: 45px;
    border-radius: 14px !important;
}

.experience-public .experience-search__hints a {
    color: var(--lm-accent-deep) !important;
    background: rgba(255,255,255,.62);
}

.experience-public .experience-hero__visual {
    min-height: 500px !important;
}

.experience-public .experience-visual__halo {
    inset: 5% 1% 5% 4%;
    background: radial-gradient(circle at 60% 38%, var(--lm-accent-glow), transparent 56%), linear-gradient(145deg, var(--lm-accent-soft), transparent 66%);
    filter: blur(1px);
}

.experience-public .experience-hero-slide {
    min-height: 480px;
    border-radius: 30px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.63)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 0 0 1px var(--lm-accent-soft) inset, 0 30px 66px var(--lm-accent-soft) !important;
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.experience-public .experience-hero-slide__media {
    min-height: 270px;
    background: linear-gradient(145deg, var(--lm-accent-soft), rgba(255,255,255,.65));
}

.experience-public .experience-hero-slide__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.experience-public .experience-hero-slide__copy {
    padding: 22px 24px 24px;
}

.experience-public .experience-hero-slide__copy h2 {
    color: var(--lm-ink) !important;
}

.experience-public .experience-hero__stats {
    max-width: 1050px;
    margin: 22px auto 0;
    border-radius: 20px !important;
    background: linear-gradient(110deg, rgba(255,255,255,.88), rgba(255,255,255,.60)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 16px 40px var(--lm-accent-soft) !important;
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.experience-public .experience-hero__stats > a {
    color: var(--lm-ink) !important;
}

.experience-public .experience-hero__stats > a:hover {
    background: rgba(255,255,255,.74) !important;
}

.experience-public .experience-hero__stats > a > span {
    color: var(--lm-muted) !important;
}

.experience-public .experience-hero__stats .experience-hero__employer {
    color: #fff !important;
    background: linear-gradient(135deg, var(--lm-accent-deep), var(--lm-accent) 65%, var(--lm-accent-light)) !important;
}

.experience-public .experience-section {
    padding-top: 92px;
}

.experience-public .experience-section__head {
    padding: 20px 24px !important;
    border-radius: 24px !important;
    background: linear-gradient(115deg, rgba(255,255,255,.78), rgba(255,255,255,.48)) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.experience-public .experience-section h2 {
    font-size: clamp(2.2rem, 4vw, 3.7rem);
}

.experience-public .experience-sector-card,
.experience-public .experience-talent-card,
.experience-public .experience-opportunity-grid .portal-job-card,
.experience-public .experience-employer-grid .portal-employer-card {
    background: linear-gradient(145deg, rgba(255,255,255,.91), rgba(255,255,255,.60)) !important;
    border-color: rgba(255,255,255,.9) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 0 0 1px var(--lm-accent-soft) inset, 0 14px 32px var(--lm-accent-soft) !important;
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.experience-public .experience-sector-card:hover,
.experience-public .experience-talent-card:hover,
.experience-public .experience-opportunity-grid .portal-job-card:hover,
.experience-public .experience-employer-grid .portal-employer-card:hover {
    border-color: color-mix(in srgb, var(--lm-accent) 38%, white) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 0 0 1px var(--lm-accent-soft) inset, 0 22px 42px var(--lm-accent-soft) !important;
}

.experience-public .experience-footer {
    max-width: 1240px;
    margin-top: 96px;
    padding-inline: 20px;
}

@media (max-width: 900px) {
    .experience-public .portal-public-nav {
        width: calc(100% - 24px);
        margin-top: 12px;
        border-radius: 22px !important;
    }

    .experience-public .experience-hero {
        padding-top: 28px !important;
    }

    .experience-public .experience-hero__grid {
        grid-template-columns: 1fr;
    }

    .experience-public .experience-hero__copy {
        max-width: none;
    }

    .experience-public .experience-hero__visual {
        max-width: 640px;
        width: 100%;
        min-height: 430px !important;
        margin-inline: auto;
    }
}

@media (max-width: 640px) {
    .experience-public .portal-public-nav {
        padding: 9px 10px 9px 14px;
    }

    .experience-public .portal-public-nav__brand {
        min-width: 0;
        font-size: 1rem;
    }

    .experience-public .experience-hero {
        padding-inline: 10px;
    }

    .experience-public .experience-hero__copy {
        padding: 24px 18px !important;
        border-radius: 24px !important;
    }

    .experience-public .experience-hero h1 {
        font-size: clamp(2.75rem, 14vw, 4rem);
    }

    .experience-public .experience-search {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .experience-public .experience-search label {
        border: 0 !important;
    }

    .experience-public .experience-hero__visual {
        min-height: 380px !important;
    }

    .experience-public .experience-hero-slide {
        min-height: 360px;
    }

    .experience-public .experience-hero-slide__media {
        min-height: 190px;
    }

    .experience-public .experience-section__head {
        padding: 16px !important;
    }
}

.experience-public .experience-hero__grid {
    min-height: 0 !important;
    gap: 28px !important;
    align-items: start !important;
}

.experience-public .experience-hero__visual,
.experience-public .experience-hero-carousel {
    min-height: 0 !important;
}

.experience-public .experience-hero__stats {
    margin-top: 26px !important;
}

.experience-public .experience-sector-card--primary .experience-sector-card__media {
    background: var(--lm-accent-soft) !important;
}

.experience-public .experience-sector-card--soft .experience-sector-card__media {
    background: color-mix(in srgb, var(--lm-accent-soft) 40%, white) !important;
}

.portal-public-nav nav a.is-active:not(.portal-btn) {
    box-shadow: inset 0 -2px 0 var(--lm-accent);
}

.portal-nav--icons .portal-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 1100px) {
    .portal-stats--metrics,
    .portal-stats.portal-stats--metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .portal-dash-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .portal-welcome {
        grid-template-columns: 1fr !important;
    }

    .experience-public .experience-hero {
        padding-top: 100px !important;
    }
}

@media (max-width: 640px) {
    .portal-stats--metrics,
    .portal-stats.portal-stats--metrics {
        grid-template-columns: 1fr !important;
    }

    .portal-dash-side .portal-pipeline {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   RED-MODE PALETTE HARDENING
   Collapse leftover multi-hue badge/decoration paints into semantic tokens.
   Status hues remain only for real status badges.
   ============================================================================= */

html[data-theme="red"] .portal-badge--violet,
html[data-theme="red"] .portal-badge--aqua,
html[data-theme="red"] .portal-badge--lime,
html[data-theme="red"] .portal-badge--coral,
html[data-theme="red"] .admin-badge--lime,
html[data-theme="red"] .admin-badge--violet {
    color: var(--ss-primary-dark) !important;
    background: var(--ss-primary-soft) !important;
    border-color: var(--ss-border) !important;
}

html[data-theme="red"] .portal-badge--success,
html[data-theme="red"] .admin-badge--success,
html[data-theme="red"] .badge-success {
    color: var(--ss-success) !important;
    background: var(--ss-success-soft) !important;
}

html[data-theme="red"] .portal-badge--warning,
html[data-theme="red"] .admin-badge--warning,
html[data-theme="red"] .badge-warning {
    color: var(--ss-warning) !important;
    background: var(--ss-warning-soft) !important;
}

html[data-theme="red"] .portal-badge--danger,
html[data-theme="red"] .admin-badge--danger,
html[data-theme="red"] .badge-danger {
    color: var(--ss-danger) !important;
    background: var(--ss-danger-soft) !important;
}

html[data-theme="red"] .portal-badge--info,
html[data-theme="red"] .admin-badge--info,
html[data-theme="red"] .badge-info {
    color: var(--ss-info) !important;
    background: var(--ss-info-soft) !important;
}

/* Kill leftover decorative hex fills that still appear in red mode. */
html[data-theme="red"] .experience-talent-card__skills span,
html[data-theme="red"] .experience-sector-switch__item span,
html[data-theme="red"] .portal-company-logo--mark {
    color: var(--ss-primary-dark) !important;
    background: var(--ss-primary-soft) !important;
}

html[data-theme="red"] .experience-sector-card--teal .experience-sector-card__media,
html[data-theme="red"] .experience-sector-card--violet .experience-sector-card__media,
html[data-theme="red"] .experience-sector-hero--teal .experience-sector-hero__media,
html[data-theme="red"] .experience-sector-hero--violet .experience-sector-hero__media {
    background: var(--ss-primary-soft) !important;
}

/* Readable light-rail text (never pale white on white). */
.portal-score p,
.portal-sidebar .portal-brand,
.admin-sidebar .admin-sidebar__brand {
    color: var(--ss-text-soft) !important;
}

.portal-score p {
    color: var(--ss-muted) !important;
}

.portal-score strong,
.portal-brand__title,
.admin-sidebar__brand {
    color: var(--ss-text-strong) !important;
}

.portal-sidebar,
.admin-sidebar {
    border-right: 1px solid var(--ss-rail-border) !important;
}

.layout-readable,
.ss-text-strong,
h1, h2, h3, h4, h5, h6 {
    color: var(--ss-text-strong);
}

/* Final reference-layer order: this block intentionally comes after the
   legacy compatibility rules above, so the landing composition cannot be
   flattened by an older route stylesheet. */
.experience-public .portal-public-nav {
    width: min(calc(100% - 32px), 1240px) !important;
    margin: 18px auto 0 !important;
    border-radius: 28px !important;
}

.experience-public .experience-hero {
    max-width: 1240px !important;
    margin-inline: auto !important;
    padding-top: 46px !important;
    padding-bottom: 0 !important;
}

.experience-public .experience-hero__grid {
    min-height: 0 !important;
    gap: clamp(24px, 4vw, 58px) !important;
    align-items: center !important;
}

.experience-public .experience-hero__visual,
.experience-public .experience-hero-carousel {
    min-height: 500px !important;
}

.experience-public .experience-hero-slide {
    min-height: 480px !important;
}

.experience-public .experience-hero__stats {
    margin-top: 22px !important;
}

@media (max-width: 900px) {
    .experience-public .portal-public-nav {
        width: calc(100% - 24px) !important;
        margin-top: 12px !important;
        border-radius: 22px !important;
    }

    .experience-public .experience-hero {
        padding-top: 28px !important;
    }

    .experience-public .experience-hero__grid {
        grid-template-columns: 1fr !important;
    }

    .experience-public .experience-hero__visual,
    .experience-public .experience-hero-carousel {
        min-height: 430px !important;
    }
}

@media (max-width: 640px) {
    .experience-public .experience-hero {
        padding-top: 22px !important;
        padding-inline: 10px !important;
    }

    .experience-public .experience-hero__visual,
    .experience-public .experience-hero-carousel {
        min-height: 380px !important;
    }

    .experience-public .experience-hero-slide {
        min-height: 360px !important;
    }
}

/* Authentication layouts contain defensive inline fallbacks from the
   legacy guest shells. Override those presentation-only paints here so the
   split login/register composition is still a strict red/blue identity. */
.auth-showcase,
.login-showcase {
    background: linear-gradient(145deg, var(--lm-accent-deep), var(--lm-accent) 60%, var(--lm-accent-light)) !important;
}

.auth-showcase::before,
.login-showcase::before {
    background:
        radial-gradient(circle at 88% 8%, var(--lm-accent-light), transparent 34%),
        radial-gradient(circle at 4% 88%, var(--lm-accent-glow), transparent 38%),
        linear-gradient(145deg, var(--lm-accent-deep), var(--lm-accent) 64%, var(--lm-accent-light)) !important;
    opacity: .98 !important;
}

.auth-showcase::after,
.login-showcase::after {
    border-color: rgba(255,255,255,.28) !important;
    box-shadow: inset 0 0 0 45px rgba(255,255,255,.04), inset 0 0 0 90px rgba(255,255,255,.025) !important;
}

.auth-showcase__brand span,
.auth-showcase__headline em,
.auth-showcase__chip strong,
.login-showcase__brand span,
.login-showcase__headline em {
    color: var(--lm-accent-light) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.auth-showcase__brand::before,
.login-showcase__brand::before {
    color: var(--lm-accent-deep) !important;
    background: #fff !important;
    box-shadow: 0 6px 16px var(--lm-accent-glow) !important;
}

.auth-showcase__chip,
.login-showcase__copy,
.login-showcase__brand,
.login-showcase__headline {
    color: rgba(255,255,255,.94) !important;
}

.auth-formside::before,
.auth-formside::after {
    background: var(--lm-accent-soft) !important;
}

.auth-formside::after {
    opacity: .75;
}

.portal-auth-card .brand span,
.portal-auth-card .portal-link,
.portal-auth-card .portal-link:hover {
    color: var(--lm-accent) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.portal-auth-card .role-pill {
    color: var(--lm-accent-deep) !important;
    border-color: var(--lm-line) !important;
    background: var(--lm-accent-soft) !important;
}

.portal-auth-card .form-control:focus,
.portal-auth-card .form-select:focus {
    border-color: var(--lm-accent) !important;
    box-shadow: 0 0 0 4px var(--lm-accent-soft) !important;
}

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

.portal-auth-card .btn-jp,
.portal-auth-card .btn-jp:hover {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--lm-accent-deep), var(--lm-accent) 60%, var(--lm-accent-light)) !important;
    box-shadow: 0 11px 24px var(--lm-accent-glow) !important;
}

.portal-auth-card .btn-outline-secondary {
    color: var(--lm-ink-soft) !important;
    border-color: var(--lm-line) !important;
    background: rgba(255,255,255,.72) !important;
}

.portal-auth-card .btn-outline-secondary:hover {
    color: var(--lm-accent-deep) !important;
    border-color: var(--lm-accent) !important;
    background: var(--lm-accent-soft) !important;
}

/* Let the fixed film/aurora layer remain visible beneath every route shell.
   The older portal styles set opaque body backgrounds with !important. */
body.portal-body,
body.public-body,
body.admin-body,
body.portal-register-body {
    background: transparent !important;
    background-image: none !important;
}

body.public-body:not(.portal-body) {
    background: transparent !important;
    background-image: none !important;
}

html {
    background: var(--lm-canvas) !important;
}

.auth-formside,
.login-formside {
    background: transparent !important;
}

/* Legacy marketing routes use #siteHeader rather than the portal nav. Give
   that canonical shell the same reference rail instead of leaving a second
   visual system in the application. */
#siteHeader {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 14px 16px 0;
}

#siteHeader .nav {
    width: min(calc(100% - 0px), 1240px);
    min-height: 70px;
    margin: 0 auto;
    padding: 10px 16px 10px 22px;
    border-radius: 26px !important;
    background: linear-gradient(110deg, rgba(255,255,255,.90), rgba(255,255,255,.60)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 18px 48px var(--lm-accent-soft) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}

#siteHeader .logo {
    color: var(--lm-ink) !important;
    font-family: var(--lm-font-display);
    font-size: 1.06rem;
    font-weight: 800;
}

#siteHeader .logo .dot {
    width: 29px;
    height: 29px;
    border-radius: 50% 50% 50% 14%;
    background: var(--lm-accent) !important;
    box-shadow: 0 8px 18px var(--lm-accent-glow);
}

#siteHeader .logo > span:last-child {
    color: var(--lm-accent) !important;
}

#siteHeader .nav-links {
    gap: 3px;
}

#siteHeader .nav-links a {
    position: relative;
    padding: 10px 13px;
    border-radius: 12px;
    color: var(--lm-ink-soft) !important;
    opacity: 1;
    font-size: .78rem;
    font-weight: 750;
}

#siteHeader .nav-links a:hover,
#siteHeader .nav-links a.active {
    color: var(--lm-accent-deep) !important;
    background: var(--lm-accent-soft) !important;
}

#siteHeader .nav-actions {
    gap: 8px;
}

#siteHeader .nav-actions .btn {
    min-height: 40px;
    border-radius: 999px !important;
    padding: 8px 16px;
    font-size: .75rem;
}

.portal-mobilebar {
    color: var(--lm-ink) !important;
    background: linear-gradient(110deg, rgba(255,255,255,.92), rgba(255,255,255,.66)) !important;
    border-bottom: 1px solid var(--lm-line) !important;
    box-shadow: 0 10px 28px var(--lm-accent-soft) !important;
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.portal-mobilebar__title,
.portal-hamburger {
    color: var(--lm-ink) !important;
}

@media (max-width: 860px) {
    #siteHeader {
        padding: 10px 12px 0;
    }

    #siteHeader .nav {
        width: 100%;
        border-radius: 21px !important;
    }
}

/* Authentication: keep the desktop form comfortably wide and make every
   showcase text layer readable against either theme's blue/red gradient. */
@media (min-width: 1001px) {
    body.public-body .portal-auth-card {
        width: min(100%, 680px) !important;
    }

    body.public-body .portal-auth-card.portal-auth-card--login {
        width: min(100%, 880px) !important;
    }

    body:has(.login-shell) .login-card {
        width: min(100%, 620px) !important;
    }

    body.public-body .portal-auth-card.is-wide {
        width: min(100%, 980px) !important;
    }
}

.auth-showcase,
.login-showcase {
    color: #ffffff !important;
}

.auth-showcase__brand,
.auth-showcase__headline,
.login-showcase__brand,
.login-showcase__headline {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

.auth-showcase__headline em,
.login-showcase__headline em {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.auth-showcase__copy,
.login-showcase__copy,
.auth-showcase__chip,
.login-showcase__chip {
    color: rgba(255, 255, 255, .93) !important;
}

.auth-showcase__chip,
.login-showcase__chip {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .42) !important;
}

/* Candidate registration framing precision:
   theme-bridge paints .admin-candidate-form as its own white card (background +
   --ss-motion-shadow) *inside* the .admin-panel card, which produced a doubled
   inner border/frame. Keep a single card — the outer panel — and make the form
   merge into it so the layout reads cleanly. */
body.portal-register-body .admin-panel .admin-candidate-form,
body.portal-register-body .admin-candidate-form {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-inline: 0 !important;
    border-radius: 0 !important;
}

/* One balanced card edge + shadow on the registration panel itself. */
body.portal-register-body .admin-panel {
    border: 1px solid rgba(20, 32, 30, 0.08) !important;
    box-shadow: 0 18px 44px rgba(29, 39, 33, 0.09) !important;
    border-radius: 18px !important;
}

/* --------------------------------------------------------------------------
   Theme-accent headings (app-wide).
   Page titles, section titles and card/panel titles follow the active theme
   accent — red in the red theme, blue in the blue theme — instead of flat
   black. Driven by --ss-primary so it switches automatically with the theme.
   -------------------------------------------------------------------------- */
body .admin-page-title,
body .admin-section-title,
body .admin-panel__title,
body .portal-page-title,
body .portal-section-title,
body .portal-card__title,
body .portal-page-header h1,
body .admin-toolbar .admin-page-title,
body .section-title,
body.portal-register-body .portal-register-brand,
body.portal-register-body .portal-register-sub,
body.portal-register-body .admin-page-title {
    color: var(--ss-primary) !important;
}

/* Keep the small muted subtitles/hints readable — only true headings recolor. */
body .admin-page-subtitle,
body .portal-page-subtitle,
body .portal-page-hint,
body .admin-page-hint,
body .admin-form-intro {
    color: var(--ss-muted) !important;
}

/* The "Job Portal" login wordmark: keep the split-tone, tint the leading word. */
body.public-body .portal-auth-card .brand,
body.portal-register-body .portal-register-brand {
    color: var(--ss-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
}

body.public-body .portal-auth-card .brand span,
body.portal-register-body .portal-register-brand span {
    color: var(--ss-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
}

/* ==========================================================================
   Responsive + contrast hardening (web + mobile, all panels, every page).
   Loaded last on every layout, so these are safe, app-wide defaults.
   ========================================================================== */

/* ---- Readability floor: keep the small helper copy legible, without
   forcing every paragraph/table cell to a fixed size. ---------------------- */
:where(body) :where(.admin-upload-hint, .portal-upload-hint, .admin-form-intro, .portal-page-hint, .admin-page-hint, .emp-pkg-help, .emp-pkg-meta__muted, .register-locale-bar__label, .admin-multi-select__placeholder, small) {
    font-size: max(0.78rem, 0.78em);
}

/* Muted/secondary copy uses the AA-safe muted token (fixed at the token level
   so blue-theme grays no longer dip below 4.5:1 on glass surfaces). */
:where(body) :where(.text-secondary, .muted, .portal-empty, .admin-upload-hint, .portal-upload-hint, .admin-form-intro, .portal-page-hint, .admin-page-hint, .emp-pkg-help, .emp-pkg-subtitle, .emp-pkg-meta__muted) {
    color: var(--ss-muted) !important;
}

/* Placeholder text must stay readable on every surface. */
:where(body) :where(input, textarea, select)::placeholder {
    color: var(--ss-placeholder) !important;
    opacity: 1;
}

/* ---- Layout safety: stop long content forcing horizontal scroll ---------- */
:where(body) :where(.admin-form-grid, .portal-reg-grid, .portal-form-grid, .admin-form-grid--2) > * {
    min-width: 0;
}

:where(body) :where(.admin-table, .portal-table, .admin-panel, .portal-card, .admin-card) {
    max-width: 100%;
}

/* Long unbroken strings (emails, tokens, refs) wrap instead of overflowing. */
:where(body) :where(td, th, dd, .portal-table td, .admin-table td) {
    overflow-wrap: anywhere;
}

/* Tables get a horizontal scroll container on small screens instead of
   squeezing every column to an unreadable width. */
@media (max-width: 760px) {
    :where(body) :where(.admin-panel, .portal-card):has(> table),
    :where(body) :where(.admin-directory-panel) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---- Mobile targets and spacing (phones) --------------------------------- */
@media (max-width: 640px) {
    /* Interactive controls are comfortably tappable (>= 44px). */
    :where(body) :where(
        .admin-btn, .portal-btn, .btn-jp, .btn,
        .admin-multi-select__trigger, .skill-suggestions__chip
    ) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Inputs and selects match the tap size and never overflow their column. */
    :where(body) :where(input, select, textarea, .form-control, .form-select) {
        max-width: 100%;
        box-sizing: border-box;
    }
    :where(body) :where(input:not([type="checkbox"]):not([type="radio"]), select, .form-control, .form-select) {
        min-height: 44px;
    }

    /* OTP / inline control rows stack instead of squeezing the input. */
    :where(body) :where(.admin-otp-row, .otp-enter-row, .input-group) {
        flex-wrap: wrap;
    }
    :where(body) :where(.admin-otp-row, .otp-enter-row) :where(input) {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* The floating registration theme switch must sit inside the gutter, not
       clip against the viewport edge. */
    body.portal-register-body .ss-theme-switch-host--register {
        position: static !important;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 0.5rem;
    }

    /* Registration header: keep the title bar and the form panel aligned. */
    body.portal-register-body .portal-register-top,
    body.portal-register-body .admin-toolbar.candidate-registration-toolbar {
        padding-inline: 0 !important;
    }

    /* Wordmark should not wrap into stacked letters on small screens. */
    :where(body) :where(.portal-public-nav__brand, .portal-public-nav__brand span) {
        white-space: nowrap;
    }
}

/* ---- Slightly denser, still-legible type on tablets ---------------------- */
@media (max-width: 900px) {
    :where(body) :where(h1, .admin-page-title, .portal-page-title) {
        overflow-wrap: break-word;
    }
}

/* ---- Text over gradients / images must remain readable ------------------- */
:where(body) :where(.auth-showcase__brand, .auth-showcase__headline, .auth-showcase__copy, .auth-showcase__chip) {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* --------------------------------------------------------------------------
   Find Jobs / Companies listing cards
   The title is the primary reading anchor. Company identity and vacancy
   count share the next row; all existing company/job links and actions stay
   untouched in the view partial.
   -------------------------------------------------------------------------- */
.portal-public-shell:not(.experience-public) .portal-job-list .portal-job-card--listing,
.employer-directory__results .portal-job-card--listing,
.portal-public-shell .job-result-grid > .portal-job-card--listing {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
}

.portal-public-shell:not(.experience-public) .portal-job-list .portal-job-card--listing > .portal-job-card__body--lead,
.employer-directory__results .portal-job-card--listing > .portal-job-card__body--lead,
.portal-public-shell .job-result-grid > .portal-job-card--listing > .portal-job-card__body--lead {
    order: 1 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.portal-public-shell:not(.experience-public) .portal-job-list .portal-job-card--listing > .portal-job-card__head,
.employer-directory__results .portal-job-card--listing > .portal-job-card__head,
.portal-public-shell .job-result-grid > .portal-job-card--listing > .portal-job-card__head {
    order: 2 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
}

.portal-public-shell:not(.experience-public) .portal-job-list .portal-job-card--listing > .portal-job-card__body:not(.portal-job-card__body--lead),
.employer-directory__results .portal-job-card--listing > .portal-job-card__body:not(.portal-job-card__body--lead),
.portal-public-shell .job-result-grid > .portal-job-card--listing > .portal-job-card__body:not(.portal-job-card__body--lead) {
    order: 3 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    gap: 12px !important;
}

.portal-job-card--listing .portal-job-card__title,
.portal-job-card--listing .portal-job-card__title a {
    display: block !important;
    margin: 0 !important;
    color: var(--ss-text-strong) !important;
    font-size: clamp(1.35rem, 1.8vw, 1.75rem) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
}

.portal-job-card--listing .portal-job-card__title a:hover {
    color: var(--ss-primary) !important;
}

.portal-job-card--listing .portal-job-card__head {
    align-items: center !important;
    min-width: 0 !important;
}

.portal-job-card--listing .portal-job-card__identity {
    min-width: 0 !important;
    align-items: center !important;
}

.portal-job-card--listing .portal-job-card__identity-copy {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    column-gap: 16px !important;
    row-gap: 5px !important;
    min-width: 0 !important;
}

.portal-job-card--listing .portal-job-card__eyebrow {
    margin: 0 !important;
    color: var(--ss-primary) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.portal-job-card--listing .portal-job-card__eyebrow a {
    color: inherit !important;
}

.portal-job-card--listing .portal-job-card__identity-openings {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    color: var(--ss-muted) !important;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.portal-job-card--listing .portal-job-card__identity-openings svg {
    flex: 0 0 auto;
    color: var(--ss-primary) !important;
}

.portal-job-card--listing .portal-job-card__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 9px 16px !important;
    margin: 0 !important;
}

.portal-job-card--listing .portal-job-card__meta-item {
    flex: 0 1 auto !important;
    flex-basis: auto !important;
    height: auto !important;
    min-width: 0 !important;
}

.portal-job-card--listing .portal-job-card__meta-part {
    white-space: nowrap !important;
}

@media (max-width: 720px) {
    .portal-job-card--listing .portal-job-card__identity-copy {
        align-items: flex-start !important;
        flex-direction: column !important;
        column-gap: 0 !important;
    }

    .portal-job-card--listing .portal-job-card__identity-openings {
        font-size: .88rem;
    }

    .portal-job-card--listing .portal-job-card__meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
}

/* Listing card rhythm: keep the title and actions in the same top row, then
   place the company identity and metadata directly underneath. This removes
   the stretched head-row whitespace on both /jobs and /jobs/search. */
.portal-job-card--listing {
    gap: 10px !important;
}

.portal-public-shell .job-result-grid {
    align-items: start !important;
}

.portal-public-shell .job-result-grid > .portal-job-card--listing {
    height: auto !important;
    align-self: start !important;
}

.portal-job-card--listing .portal-job-card__lead-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    order: 1 !important;
}

/* Recommended cards: Save / Apply stay centered on the job title. The badge
   is positioned above that button row and does not push the buttons down. */
.portal-job-card--listing.portal-job-card--recommended {
    padding-top: 32px !important;
}

.portal-job-card--listing .portal-job-card__lead-row:has(.portal-job-card__actions--recommended) {
    align-items: center !important;
}

.portal-job-card--listing .portal-job-card__lead-row > .portal-job-card__body--lead {
    flex: 1 1 0 !important;
    order: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

.portal-job-card--listing .portal-job-card__lead-row > .portal-job-card__actions {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    max-width: 62% !important;
}

.portal-job-card--listing .portal-job-card__lead-row .portal-job-card__buttons {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.portal-job-card--listing .portal-job-card__lead-row .portal-job-card__actions--recommended {
    position: relative !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.portal-public-shell:not(.experience-public) .portal-job-list .portal-job-card--listing .portal-job-card__actions--recommended .portal-job-card__recommend,
.portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__actions--recommended .portal-job-card__recommend {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 6px) !important;
    left: auto !important;
    align-self: flex-end !important;
    width: max-content !important;
    max-width: 100% !important;
    min-height: 20px !important;
    padding: 2px 8px !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
}

.portal-job-card--listing > .portal-job-card__head {
    order: 2 !important;
    margin: 0 !important;
}

.portal-job-card--listing > .portal-job-card__body:not(.portal-job-card__body--lead) {
    order: 3 !important;
    gap: 8px !important;
    margin: 0 !important;
}

/* The Companies view may receive older inline card rules from its refreshed
   result partial. Keep the primary action visibly red at the final cascade. */
.portal-job-card--listing .portal-job-card__lead-row .portal-btn--primary,
.portal-job-card--listing .portal-job-card__actions .portal-btn--primary {
    background: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
    color: var(--ss-primary-contrast, #fff) !important;
    background-image: none !important;
}

/* Three-column job grids need a denser lead row so a short title does not
   wrap underneath the controls. Keep the full-width Companies list spacious. */
.portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__lead-row {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__lead-row:has(.portal-job-card__actions--recommended) {
    align-items: center !important;
}

.portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__title,
.portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__title a {
    font-size: clamp(1.12rem, 1.45vw, 1.42rem) !important;
    line-height: 1.16 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

.portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__lead-row > .portal-job-card__actions {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
}

.portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__buttons {
    flex-wrap: nowrap !important;
    gap: 7px !important;
}

.portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__buttons .portal-btn {
    min-height: 40px !important;
    padding-inline: 13px !important;
    border-radius: 10px !important;
    font-size: .82rem !important;
}

.portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__buttons .portal-btn--primary {
    background: var(--ss-primary, #c62828) !important;
    border-color: var(--ss-primary, #c62828) !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 720px) {
    .portal-job-card--listing .portal-job-card__lead-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .portal-job-card--listing .portal-job-card__lead-row > .portal-job-card__actions {
        align-self: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .portal-job-card--listing .portal-job-card__lead-row .portal-job-card__buttons {
        width: 100% !important;
    }

    .portal-job-card--listing .portal-job-card__lead-row .portal-job-card__buttons .portal-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .portal-public-shell .portal-job-list .portal-job-card--listing .portal-job-card__lead-row .portal-job-card__actions--recommended {
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
    }

    .portal-public-shell .portal-job-list .portal-job-card--listing .portal-job-card__lead-row .portal-job-card__actions--recommended .portal-job-card__recommend,
    .portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__actions--recommended .portal-job-card__recommend {
        position: static !important;
        bottom: auto !important;
    }
}

/* Equal-track public results. Keep /jobs and /jobs/search visually identical
   even though the two routes render different result partials. */
.portal-public-shell .job-result-grid {
    align-items: stretch !important;
    grid-auto-flow: row !important;
}

.portal-public-shell .job-result-grid > .portal-job-card--listing {
    align-self: stretch !important;
    height: 100% !important;
    min-height: 410px !important;
}

.portal-public-shell .job-result-grid > .portal-job-card--listing > .portal-job-card__head {
    flex: 0 0 auto !important;
}

.portal-public-shell .job-result-grid > .portal-job-card--listing > .portal-job-card__body:not(.portal-job-card__body--lead) {
    flex: 1 1 auto !important;
}

@media (min-width: 1101px) {
    .portal-public-shell .job-result-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 721px) and (max-width: 1100px) {
    .portal-public-shell .job-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .portal-public-shell .job-result-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .portal-public-shell .job-result-grid > .portal-job-card--listing {
        min-height: 0 !important;
        height: auto !important;
    }
}

/* Registration pages use the same public navigation as the rest of the
   product. Keep it in a dedicated shell so the form's existing content and
   actions remain untouched while the menu stays pinned above the form. */
:root {
    --ss-brand-logo-red: #d62828;
    --ss-brand-logo-blue: #2563eb;
    --ss-job-title-blue: #1769e0;
}

.portal-register-global-nav {
    position: relative;
    z-index: 20;
    width: min(1400px, calc(100% - 32px));
    margin: 16px auto 0;
}

.portal-register-global-nav .tpl-header {
    overflow: visible;
    border: 1px solid var(--ss-border-strong) !important;
    border-radius: 22px;
    background: var(--ss-glass-bg-strong) !important;
    box-shadow: var(--ss-shadow-glass) !important;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.portal-register-global-nav .main-navbar {
    min-height: 70px;
    padding: 8px 0 !important;
    background: transparent !important;
}

.portal-register-global-nav .main-navbar .container {
    width: 100%;
    max-width: none;
    padding-inline: clamp(14px, 2.4vw, 30px);
}

.portal-register-global-nav .ssx-brand__mark {
    background: var(--ss-brand-logo-red) !important;
    background-color: var(--ss-brand-logo-red) !important;
    background-image: none !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ss-brand-logo-red) 32%, transparent) !important;
}

.portal-register-global-nav .ssx-brand__text,
.portal-register-global-nav .ssx-brand__text span {
    color: var(--ss-brand-logo-red) !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: var(--ss-brand-logo-red) !important;
}

.portal-register-global-nav .ssx-brand__text span {
    color: var(--ss-brand-logo-blue) !important;
    -webkit-text-fill-color: var(--ss-brand-logo-blue) !important;
}

.portal-register-global-nav .main-menu .nav-link {
    color: var(--ss-ink-light) !important;
    font-weight: 750;
}

.portal-register-global-nav .main-menu .nav-link:hover,
.portal-register-global-nav .main-menu .nav-link.active {
    color: var(--ss-primary) !important;
}

.portal-register-global-nav .signin-btn {
    border-color: var(--ss-border-strong) !important;
    color: var(--ss-text-strong) !important;
    background: var(--ss-glass-bg) !important;
}

.portal-register-global-nav .register-btn {
    border-color: var(--ss-primary) !important;
    color: var(--ss-primary-contrast) !important;
    background: var(--ss-gradient-primary) !important;
}

/* Keep the SunStack wordmark on the active red/blue brand token instead of
   inheriting the template's former indigo logo treatment. */
.tpl-header .ssx-brand__mark {
    background: var(--ss-brand-logo-red) !important;
    background-color: var(--ss-brand-logo-red) !important;
    background-image: none !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ss-brand-logo-red) 32%, transparent) !important;
}

.tpl-header .ssx-brand__text span {
    color: var(--ss-brand-logo-blue) !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: var(--ss-brand-logo-blue) !important;
}

.tpl-header .ssx-brand__text {
    color: var(--ss-brand-logo-red) !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: var(--ss-brand-logo-red) !important;
}

.portal-register-body .portal-register-brand::before,
.portal-register-body .ssx-reg-brandbar__logo::before {
    background: var(--ss-brand-logo-red) !important;
    color: var(--ss-primary-contrast) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ss-brand-logo-red) 32%, transparent) !important;
}

.portal-register-body .ssx-reg-brandbar__logo span {
    color: var(--ss-brand-logo-blue) !important;
}

.portal-register-body .ssx-reg-brandbar__logo {
    color: var(--ss-brand-logo-red) !important;
}

/* One shared footer frame across public, portal, admin, auth, and registration
   layouts. It participates in normal document flow so it cannot cover forms,
   tables, dialogs, or dashboard content. */
.ss-app-footer {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 0 0 auto;
    margin-top: auto;
    clear: both;
}

body.portal-body .portal-main,
body.admin-body .admin-content,
body.portal-register-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Keep portal content at full workspace height and place the shared footer
   after the shell. This prevents a long job form from being squeezed behind
   the footer while preserving a footer at the end of the page. */
body.portal-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.portal-body > .portal-shell {
    flex: 1 0 auto;
    min-height: 100vh;
}

body.portal-body > .ss-app-footer {
    flex: 0 0 auto;
    margin-top: 0;
    /* portal-v2.css fixes the visible rail at 274px while the legacy
       --ss-sidebar-width token remains 248px. Use the rendered rail width
       here so the footer starts exactly after the sidebar instead of sliding
       underneath its right edge. */
    margin-left: 274px;
    width: calc(100% - 274px);
}

@media (max-width: 1000px) {
    body.portal-body > .ss-app-footer {
        margin-left: 0;
        width: 100%;
    }
}

body.portal-body .portal-main > .ss-app-footer,
body.admin-body .admin-content > .ss-app-footer {
    margin-top: clamp(32px, 5vw, 76px);
}

body.portal-register-body > .ss-app-footer,
body.public-body:not(.portal-body) > .ss-app-footer,
body.admin-guest-body > .ss-app-footer {
    margin-top: clamp(28px, 5vw, 64px);
}

body.public-body:not(.portal-body),
body.admin-guest-body,
body.site-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.public-body:not(.portal-body) > .portal-shell-guest,
body.admin-guest-body > .login-shell {
    flex: 1 0 auto;
    min-height: 0;
}

body.public-body:not(.portal-body) .auth-formside {
    min-height: 0 !important;
}

/* Authentication pages keep the showcase and form readable at desktop widths.
   The showcase gets enough room for its full headline, while the footer stays
   in normal flow instead of overlaying the form on shorter viewports. */
body.public-body:not(.portal-body) > .portal-shell-guest {
    position: relative;
    z-index: 1;
    width: 100%;
    grid-template-columns: minmax(340px, 44%) minmax(0, 1fr) !important;
}

/* Login pages use the same public navigation as registration and discovery
   pages. Keep the auth split panel below that bar without changing its form
   markup or authentication flow. */
body.public-auth-body > .public-auth-global-nav {
    flex: 0 0 auto;
}
body.public-auth-body > .portal-shell-guest {
    flex: 1 0 auto;
}
body.public-auth-body > .portal-shell-guest .auth-showcase,
body.public-auth-body > .portal-shell-guest .auth-formside {
    min-height: calc(100vh - 108px);
}
@media (max-width: 1000px) {
    body.public-auth-body > .portal-shell-guest .auth-showcase,
    body.public-auth-body > .portal-shell-guest .auth-formside {
        min-height: 0;
    }
}

body.public-body:not(.portal-body) > .ss-app-footer {
    position: static !important;
    transform: none !important;
    z-index: auto;
    overflow: visible;
}

body.public-body:not(.portal-body) .auth-showcase {
    min-width: 0;
    overflow: visible;
    position: relative;
    height: auto;
    min-height: 100vh;
    max-height: none;
    align-self: stretch;
}

body.site-body > .ss-app-footer {
    flex: 0 0 auto;
}

:where(.ss-app-footer, body) .footerWrap {
    width: 100%;
    margin: 0;
    border-top: 3px solid var(--ss-primary);
    padding: clamp(36px, 5vw, 58px) 0 34px;
    background: var(--ss-glass-bg-strong, rgba(255, 255, 255, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 -12px 32px rgba(15, 23, 42, .05);
}

:where(.ss-app-footer, body) .footerWrap h5 {
    margin: 0 0 14px;
    color: var(--ss-ink, #101d33);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 800;
    letter-spacing: .01em;
}

:where(.ss-app-footer, body) .footerWrap p {
    max-width: 34ch;
    margin: 0;
    color: var(--ss-muted, #5a6b84);
    line-height: 1.65;
}

:where(.ss-app-footer, body) .footerWrap .quicklinks {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.ss-app-footer, body) .footerWrap .quicklinks li a {
    display: block;
    padding: 7px 0;
    color: var(--ss-ink-light, #36506f);
    font-size: .94rem;
    text-decoration: none;
    transition: color 180ms ease, transform 180ms ease;
}

:where(.ss-app-footer, body) .footerWrap .quicklinks li a::before {
    content: '\f0da';
    display: inline-block;
    margin-right: 8px;
    color: var(--ss-primary);
    font-family: 'FontAwesome';
}

:where(.ss-app-footer, body) .footerWrap .quicklinks li a:hover {
    color: var(--ss-primary);
    transform: translateX(2px);
}

:where(.ss-app-footer, body) .footerWrap .social {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}

:where(.ss-app-footer, body) .footerWrap .social a {
    color: var(--ss-primary);
    font-size: 2rem;
    line-height: 1;
    text-decoration: none;
}

:where(.ss-app-footer, body) .footerWrap .social a:hover {
    color: var(--ss-primary-hover);
}

:where(.ss-app-footer, body) .copyright {
    width: 100%;
    padding: 11px 0;
    background: var(--ss-bg-sunken, #f6f8fc);
    border-top: 1px solid var(--ss-border-light, rgba(15, 23, 42, .08));
    text-align: center;
}

:where(.ss-app-footer, body) .copyright .bttxt {
    color: var(--ss-muted, #5a6b84);
    font-size: .8rem;
}

@media (max-width: 720px) {
    :where(.ss-app-footer, body) .footerWrap .container {
        padding-inline: 18px;
    }

    :where(.ss-app-footer, body) .footerWrap .row {
        row-gap: 28px;
    }
}

/* Listing hierarchy: blue/active-theme job titles lead the card while the
   company identity is intentionally quieter and more compact. */
.portal-public-shell .portal-job-card--listing .portal-job-card__title,
.portal-public-shell .portal-job-card--listing .portal-job-card__title a,
.portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__title,
.portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__title a,
.employer-directory__results .portal-job-card--listing .portal-job-card__title,
.employer-directory__results .portal-job-card--listing .portal-job-card__title a {
    color: var(--ss-job-title-blue) !important;
    font-size: clamp(1.18rem, 1.45vw, 1.48rem) !important;
    line-height: 1.18 !important;
}

.portal-public-shell .portal-job-card--listing .portal-job-card__title a:hover,
.portal-public-shell .job-result-grid > .portal-job-card--listing .portal-job-card__title a:hover,
.employer-directory__results .portal-job-card--listing .portal-job-card__title a:hover {
    color: var(--ss-job-title-blue) !important;
}

.portal-public-shell .portal-job-card--listing .portal-job-card__eyebrow,
.employer-directory__results .portal-job-card--listing .portal-job-card__eyebrow {
    font-size: .84rem !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
}

@media (max-width: 991.98px) {
    .portal-register-global-nav {
        width: min(100% - 24px, 720px);
        margin-top: 12px;
    }

    .portal-register-global-nav .main-navbar .container {
        padding-inline: 14px;
    }

    .portal-register-global-nav .main-navbar .mobile-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 10px;
        left: 10px;
        display: none !important;
        padding: 14px;
        border: 1px solid var(--ss-border-strong);
        border-radius: 16px;
        background: var(--ss-glass-bg-strong);
        box-shadow: var(--ss-shadow-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .portal-register-global-nav .mobile-menu-close {
        display: block;
        margin: 0 0 8px auto;
        border: 0;
        color: var(--ss-muted);
        background: transparent;
    }

    .portal-register-global-nav .tpl-header.is-menu-open .main-navbar .mobile-menu {
        display: block !important;
    }

    .portal-register-global-nav .main-menu {
        align-items: stretch !important;
        gap: 4px;
    }

    .portal-register-global-nav .main-menu .nav-link {
        padding: 10px 12px !important;
        border-radius: 10px;
    }

    .portal-register-global-nav .navbar-actions {
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .portal-register-global-nav .navbar-actions > a {
        flex: 1 1 140px;
        text-align: center;
    }
}

@media (min-width: 992px) {
    .portal-register-global-nav .mobile-menu-close,
    .portal-register-global-nav .navbar-toggler {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .portal-register-global-nav {
        width: calc(100% - 16px);
    }

    .portal-register-global-nav .tpl-header {
        border-radius: 16px;
    }
}

/* Find Jobs industry strip: keep every industry in one compact, aligned row.
   The horizontal overflow is intentional on narrow screens so labels remain
   complete instead of being clipped or pushed into uneven second rows. */
.employer-directory--showcase .directory-showcase__highlights {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    padding: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--lm-accent-soft) transparent;
}

.employer-directory--showcase .directory-showcase__highlight {
    flex: 1 1 0 !important;
    min-width: 96px !important;
    min-height: 92px !important;
    box-sizing: border-box;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 10px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    color: var(--lm-ink) !important;
    text-align: center !important;
}

.employer-directory--showcase .directory-showcase__highlight:hover,
.employer-directory--showcase .directory-showcase__highlight.is-active {
    border-color: var(--lm-accent) !important;
    background: var(--lm-accent-soft) !important;
    color: var(--lm-accent-deep) !important;
    transform: translateY(-1px);
}

.employer-directory--showcase .directory-showcase__highlight-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
    border-radius: 11px !important;
    background: var(--lm-accent-soft) !important;
    color: var(--lm-accent) !important;
}

.employer-directory--showcase .directory-showcase__highlight:nth-child(2n) .directory-showcase__highlight-icon,
.employer-directory--showcase .directory-showcase__highlight:nth-child(3n) .directory-showcase__highlight-icon,
.employer-directory--showcase .directory-showcase__highlight:nth-child(4n) .directory-showcase__highlight-icon {
    background: var(--lm-accent-soft) !important;
    color: var(--lm-accent) !important;
}

.employer-directory--showcase .directory-showcase__highlight-label {
    max-width: 100%;
    color: var(--lm-ink) !important;
    font-size: .79rem !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
}

.employer-directory--showcase .directory-showcase__highlight.is-active .directory-showcase__highlight-label,
.employer-directory--showcase .directory-showcase__highlight:hover .directory-showcase__highlight-label {
    color: var(--lm-accent-deep) !important;
}

@media (max-width: 720px) {
    .employer-directory--showcase .directory-showcase__highlights {
        gap: 8px !important;
        padding: 8px !important;
    }

    .employer-directory--showcase .directory-showcase__highlight {
        flex: 0 0 122px !important;
        min-width: 122px !important;
        min-height: 86px !important;
        padding-inline: 7px !important;
    }
}