@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');

/* =========================================================
   MedOrbit — Frontend Site Stylesheet
   Clean PDF-matching product UI (navy + teal)
   ========================================================= */

:root {
    --mo-navy: #0B1F3A;
    --mo-navy-deep: #071628;
    --mo-teal: #00A8A8;
    --mo-teal-hover: #009494;
    --mo-teal-soft: rgba(0, 168, 168, 0.12);
    --mo-teal-soft-2: rgba(0, 168, 168, 0.08);
    --mo-teal-banner: #E6F7F7;
    --mo-bg: #FFFFFF;
    --mo-bg-soft: #F7FAFC;
    --mo-surface: #FFFFFF;
    --mo-text: #13233B;
    --mo-muted: #5B6B82;
    --mo-border: rgba(11, 31, 58, 0.10);
    --mo-radius: 12px;
    --mo-radius-sm: 10px;
    --mo-radius-lg: 16px;
    --mo-shadow: 0 10px 28px rgba(11, 31, 58, 0.08);
    --mo-shadow-sm: 0 4px 14px rgba(11, 31, 58, 0.06);
    --mo-danger: #E11D48;
    --mo-success: #0F9F6E;
    --mo-warning: #D97706;
    --mo-header-h: 72px;
    --mo-container: 1680px;
    --mo-container-pad: clamp(12px, 1.5vw, 24px);
    --mo-portal-aside: 248px;
}

/* ---------- Reset / Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-family: "Inter", "Segoe UI", sans-serif;
    color: var(--mo-text);
    background: var(--mo-bg);
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Sora", "Inter", sans-serif;
    color: var(--mo-navy);
    line-height: 1.25;
    margin: 0 0 0.5rem;
    font-weight: 700;
}

p { margin: 0 0 1rem; color: var(--mo-muted); }

a {
    color: var(--mo-teal);
    text-decoration: none;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a:hover { color: var(--mo-navy); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

.site-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
    width: 100%;
}

.site-header,
.site-footer,
.stats-strip,
.hero-home {
    width: 100%;
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: min(var(--mo-container), 100%);
    margin-inline: auto;
    padding-inline: var(--mo-container-pad);
    box-sizing: border-box;
}

.container-fluid {
    width: 100%;
    padding-inline: var(--mo-container-pad);
    box-sizing: border-box;
}

.section { padding: 3.75rem 0; }
.section-sm { padding: 2rem 0; }
.section-alt { background: var(--mo-bg-soft); }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.section-head h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.65rem);
}

.section-head p {
    margin: 0.4rem 0 0;
    max-width: 42rem;
}

.view-all {
    font-weight: 600;
    color: var(--mo-teal);
    white-space: nowrap;
}
.view-all:hover { color: var(--mo-navy); }

/* ---------- Brand ---------- */
.brand-logo {
    display: inline-flex;
    align-items: baseline;
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--mo-navy);
    line-height: 1;
}

.brand-logo > span,
.brand-logo .orbit-word {
    color: var(--mo-teal);
}

.brand-logo .orbit-o {
    position: relative;
    display: inline-block;
}

.brand-logo .orbit-o::after {
    content: "";
    position: absolute;
    inset: -3px -4px;
    border: 2px solid var(--mo-teal);
    border-radius: 50%;
    opacity: 0.55;
    pointer-events: none;
}

.brand-logo.is-light { color: #fff; }
.brand-logo.is-light > span,
.brand-logo.is-light .orbit-word,
.brand-logo.is-light .orbit-o { color: var(--mo-teal); }

.brand-logo.is-light .orbit-o::after { border-color: var(--mo-teal); }

/* Dynamic MedOrbit SVG wordmark */
.mo-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.mo-logo-svg {
    width: 160px;
    height: auto;
    display: block;
    overflow: visible;
}
.mo-logo--auth .mo-logo-svg,
.auth-hero-brand .mo-logo-svg,
.auth-mobile-brand .mo-logo-svg {
    width: 168px;
}
.mo-logo-orbit-ring {
    transform-origin: 16px 18px;
    animation: moOrbitSpin 8s linear infinite;
}
@keyframes moOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--mo-header-h);
    background: #fff;
    border-bottom: 1px solid var(--mo-border);
    box-shadow: 0 1px 0 rgba(11, 31, 58, 0.03);
}

.site-header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    height: var(--mo-header-h);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--mo-navy);
    font-weight: 700;
    min-width: 0;
}
.site-logo:hover { color: var(--mo-navy); }

.site-logo img {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
}

.site-nav a {
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--mo-text);
}

.site-nav a:hover,
.site-nav a.is-active {
    color: var(--mo-teal);
    background: var(--mo-teal-soft-2);
}

.site-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.auth-btns {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--mo-border);
    border-radius: 10px;
    background: #fff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--mo-navy);
    border-radius: 2px;
}

.notif-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--mo-border);
    border-radius: 10px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mo-navy);
    cursor: pointer;
}
.notif-btn:hover {
    background: var(--mo-teal-soft);
    color: var(--mo-teal);
}

.user-menu { position: relative; }

.user-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--mo-border);
    background: #fff;
    border-radius: 999px;
    padding: 0.25rem 0.65rem 0.25rem 0.25rem;
    cursor: pointer;
}

.user-menu-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}
.user-menu-meta strong {
    font-size: 0.82rem;
    color: var(--mo-navy);
}
.user-menu-meta small {
    font-size: 0.72rem;
    color: var(--mo-muted);
}

.user-menu-chevron {
    width: 16px;
    height: 16px;
    color: var(--mo-muted);
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mo-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    overflow: hidden;
    flex-shrink: 0;
}
.user-avatar img,
.mo-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    box-shadow: var(--mo-shadow);
    padding: 0.45rem;
    z-index: 120;
}
.user-menu.open .user-dropdown { display: block; }

.user-dropdown a,
.user-dropdown button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.7rem;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.65rem 0.7rem;
    border-radius: 10px;
    color: var(--mo-navy);
    font-weight: 550;
    font-size: 0.9rem;
    cursor: pointer;
}
.user-dropdown a .dd-icon,
.user-dropdown button .dd-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #EEF6FA;
    color: var(--mo-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.user-dropdown a .dd-icon svg,
.user-dropdown button .dd-icon svg {
    width: 16px;
    height: 16px;
}
.user-dropdown a .dd-chevron,
.user-dropdown button .dd-chevron {
    margin-left: auto;
    width: 14px;
    height: 14px;
    color: #9AA8BC;
    flex-shrink: 0;
}
.user-dropdown a:hover,
.user-dropdown button:hover {
    background: var(--mo-bg-soft);
    color: var(--mo-navy);
}

.user-dropdown .logout-link,
.user-dropdown .logout-link button {
    color: var(--mo-danger);
}
.user-dropdown .logout-link .dd-icon {
    background: #FEE2E2;
    color: var(--mo-danger);
}
.user-dropdown .logout-link:hover,
.user-dropdown .logout-link button:hover {
    background: #FEF2F2;
    color: var(--mo-danger);
}

.user-dropdown-divider {
    height: 1px;
    background: var(--mo-border);
    margin: 0.35rem 0.4rem;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 1.2rem;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-navy,
.btn-primary {
    background: var(--mo-navy);
    color: #fff;
    border-color: var(--mo-navy);
}
.btn-navy:hover,
.btn-primary:hover {
    background: var(--mo-navy-deep);
    color: #fff;
    border-color: var(--mo-navy-deep);
}

.btn-teal {
    background: var(--mo-teal);
    color: #fff;
    border-color: var(--mo-teal);
}
.btn-teal:hover {
    background: var(--mo-teal-hover);
    color: #fff;
    border-color: var(--mo-teal-hover);
}

.btn-outline-navy,
.btn-outline {
    background: #fff;
    color: var(--mo-navy);
    border-color: var(--mo-navy);
}
.btn-outline-navy:hover,
.btn-outline:hover {
    background: var(--mo-navy);
    color: #fff;
}

.btn-outline-teal {
    background: #fff;
    color: var(--mo-teal);
    border-color: var(--mo-teal);
}
.btn-outline-teal:hover {
    background: var(--mo-teal);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--mo-navy);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--mo-teal-soft);
    color: var(--mo-navy);
}

.btn-sm {
    padding: 0.48rem 0.9rem;
    font-size: 0.84rem;
    border-radius: 9px;
}
.btn-lg {
    padding: 0.92rem 1.45rem;
    font-size: 1rem;
}
.btn-block { width: 100%; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}
.badge-teal { background: var(--mo-teal-soft); color: #007A7A; }
.badge-navy { background: rgba(11, 31, 58, 0.08); color: var(--mo-navy); }
.badge-success { background: rgba(15, 159, 110, 0.12); color: var(--mo-success); }
.badge-warning { background: rgba(217, 119, 6, 0.12); color: var(--mo-warning); }
.badge-danger { background: rgba(225, 29, 72, 0.1); color: var(--mo-danger); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1rem; }

.form-label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--mo-navy);
}

.form-control,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.72rem 0.9rem;
    border: 1px solid var(--mo-border);
    border-radius: 10px;
    background: #fff;
    color: var(--mo-text);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5B70' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 16px;
    cursor: pointer;
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--mo-teal);
    box-shadow: 0 0 0 3px var(--mo-teal-soft);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--mo-muted);
    margin-top: 0.35rem;
}
.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}
.form-label-row .form-label {
    margin-bottom: 0;
}
.auth-edit-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mo-teal);
    text-decoration: none;
    white-space: nowrap;
}
.auth-edit-link:hover {
    text-decoration: underline;
    color: var(--mo-navy, #0B1F3A);
}

.otp-boxes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
}
.otp-digit {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 56px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--mo-navy, #0B1F3A);
    border: 1.5px solid #d5dde8;
    border-radius: 12px;
    background: #fff;
    outline: none;
    padding: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.otp-digit:focus {
    border-color: var(--mo-teal, #00A8A8);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.18);
}
.otp-resend-form {
    margin-top: 0.85rem;
    text-align: center;
}
.otp-resend-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.otp-timer {
    margin-top: 0.45rem;
    text-align: center;
}
.otp-timer strong {
    color: var(--mo-navy, #0B1F3A);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
    .otp-boxes { gap: 0.4rem; }
    .otp-digit { font-size: 1.1rem; border-radius: 10px; }
}

.form-error {
    font-size: 0.8rem;
    color: var(--mo-danger);
    margin-top: 0.35rem;
}

.form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--mo-text);
    cursor: pointer;
}

.form-check input[type="radio"],
.form-check input[type="checkbox"],
.filter-list input[type="radio"],
.filter-list input[type="checkbox"] {
    accent-color: var(--mo-teal);
    width: 1rem;
    height: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.mobile-field {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #d9e2ec;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.mobile-field:focus-within {
    border-color: var(--mo-teal);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.12);
}

.mobile-prefix {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.75rem 0 0.9rem;
    background: transparent;
    border-right: 1px solid #e5ebf2;
    font-weight: 650;
    font-size: 0.92rem;
    color: var(--mo-navy);
    white-space: nowrap;
}
.mobile-prefix .flag { font-size: 1.05rem; line-height: 1; }
.mobile-prefix .flag-img {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(11, 31, 58, 0.08);
    display: block;
}

.mobile-field .form-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0.85rem;
    letter-spacing: 0.02em;
}
.mobile-field .form-control::placeholder {
    color: #b0bccb;
    letter-spacing: 0.06em;
}
.mobile-field .form-control:focus { box-shadow: none; }

/* ---------- Home Hero ---------- */
.hero-home {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--mo-bg-soft) 100%);
    padding: 3.5rem 0 3rem;
    overflow: visible;
}

.hero-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.hero-copy {
    min-width: 0;
    container-type: inline-size;
    container-name: hero-copy;
}
.hero-copy h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.85rem, 3.4vw, 2.65rem);
    letter-spacing: -0.025em;
    max-width: 18ch;
}

.hero-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 36rem;
    margin: 0 0 1.5rem;
}

.hero-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mo-teal);
    margin-bottom: 1rem;
}

.hero-search {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr) auto;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(11, 31, 58, 0.08);
    padding: 0.55rem;
}

.hero-search .field {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.85rem;
    min-width: 0;
    border-right: 1px solid var(--mo-border);
}
.hero-search .field:last-of-type { border-right: 0; }

.hero-search .field-icon {
    width: 18px;
    height: 18px;
    color: var(--mo-muted);
    flex-shrink: 0;
}

.hero-search .field-stack {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
    flex: 1;
}
.hero-search .field-stack label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--mo-navy);
    line-height: 1.1;
}

.hero-search .form-control,
.hero-search .form-select {
    border: 0;
    padding: 0.15rem 0 0.2rem;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    font-size: 0.92rem;
    height: auto;
}
.hero-search .form-control:focus,
.hero-search .form-select:focus { box-shadow: none; }

.hero-search .hero-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.85rem 1.2rem;
    border-radius: 999px;
    white-space: nowrap;
    min-width: 148px;
    align-self: stretch;
}
.hero-search .select2-container {
    width: 100% !important;
    max-width: 100%;
}

/* Stack search when the hero copy column is too narrow (desktop split or tablet) */
@container hero-copy (max-width: 720px) {
    .hero-search {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.75rem;
        overflow: visible;
    }
    .hero-search .field {
        border-right: 0;
        border: 1px solid var(--mo-border);
        border-radius: 12px;
        background: #F7FAFC;
        padding: 0.55rem 0.8rem;
    }
    .hero-search .hero-search-btn {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        border-radius: 12px;
        margin: 0;
        padding: 0.85rem 1rem;
    }
}
.hero-search .hero-search-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.popular-searches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    margin-top: 1.1rem;
    font-size: 0.88rem;
}

.popular-searches > span {
    color: var(--mo-muted);
    font-weight: 500;
}

.popular-searches a {
    color: var(--mo-teal);
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--mo-teal-soft-2);
}
.popular-searches a:hover {
    background: var(--mo-teal-soft);
    color: var(--mo-navy);
}

/* Hero visual — Figma team photo + floating badges */
.hero-visual {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    justify-self: end;
}

.hero-collage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.02;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}

.hero-collage-figma {
    aspect-ratio: 1 / 1.05;
    max-width: 560px;
    margin-left: auto;
}

.hero-ring {
    position: absolute;
    inset: 6% 2% 8% 8%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 45%, rgba(0, 168, 168, 0.16) 0%, rgba(0, 168, 168, 0.06) 42%, transparent 68%);
    border: 1px solid rgba(0, 168, 168, 0.12);
    pointer-events: none;
    z-index: 0;
}

.hero-blob {
    position: absolute;
    width: 62%;
    height: 62%;
    right: 2%;
    top: 4%;
    background: radial-gradient(circle, rgba(0, 168, 168, 0.18) 0%, transparent 68%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.hero-blob-2 {
    width: 48%;
    height: 48%;
    left: 0;
    bottom: 8%;
    top: auto;
    right: auto;
    background: radial-gradient(circle, rgba(0, 168, 168, 0.12) 0%, transparent 70%);
}

.hero-photo {
    position: absolute;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(11, 31, 58, 0.14);
    z-index: 1;
    background: #fff;
}
.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.hero-photo-doctor {
    width: 46%;
    aspect-ratio: 3 / 4;
    left: 4%;
    bottom: 10%;
    z-index: 1;
}

.hero-photo-nurse {
    width: 52%;
    aspect-ratio: 3 / 4;
    right: 6%;
    top: 6%;
    z-index: 2;
    border: 3px solid #fff;
}

.hero-photo-team {
    inset: 10% 8% 4% 8%;
    width: auto;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    z-index: 1;
    overflow: visible;
}
.hero-photo-team img {
    object-fit: contain;
    object-position: center bottom;
}

.hero-badge {
    position: absolute;
    z-index: 4;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: max-content;
    max-width: none;
    height: auto;
    background: #fff;
    color: var(--mo-navy);
    font-weight: 650;
    font-size: 0.78rem;
    padding: 0.55rem 0.95rem 0.55rem 0.55rem;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(11, 31, 58, 0.10);
    white-space: nowrap;
    border: 1px solid rgba(11, 31, 58, 0.05);
    animation: badgeFloat 4.5s ease-in-out infinite;
}
.hero-badge strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.15;
    color: var(--mo-navy);
    font-weight: 800;
}
.hero-badge small {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--mo-muted);
    line-height: 1.2;
}

.hero-badge .icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #e7f7f6;
    color: var(--mo-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hero-badge .icon svg {
    width: 15px;
    height: 15px;
}

/* Compact Figma positions — never set top+bottom together */
.hero-collage-figma .hero-badge.b1 {
    top: 6%;
    left: 0;
    bottom: auto;
    right: auto;
    animation-delay: 0s;
}
.hero-collage-figma .hero-badge.b2 {
    top: 4%;
    right: 0;
    bottom: auto;
    left: auto;
    animation-delay: 0.5s;
}
.hero-collage-figma .hero-badge.b3 {
    top: 44%;
    left: -2%;
    bottom: auto;
    right: auto;
    animation-delay: 1s;
}
.hero-collage-figma .hero-badge.b4 {
    top: auto;
    bottom: 8%;
    right: 2%;
    left: auto;
    animation-delay: 1.5s;
}

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ---------- Category cards ---------- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.9rem;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    aspect-ratio: 1;
    padding: 1rem 0.65rem;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    color: var(--mo-navy);
    text-align: center;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.category-card:hover {
    border-color: rgba(0, 168, 168, 0.45);
    box-shadow: var(--mo-shadow-sm);
    transform: translateY(-3px);
    color: var(--mo-navy);
}

.category-card .cat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mo-teal-soft);
    color: var(--mo-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.category-card .cat-icon svg {
    width: 22px;
    height: 22px;
}

.category-card > span:last-child {
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.25;
}

/* ---------- Job cards (PDF Recommended Jobs) ---------- */
.job-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
    width: 100%;
    align-items: stretch;
}

.job-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(11, 31, 58, 0.10);
    border-radius: 12px;
    padding: 1.05rem 1.1rem 1.1rem;
    box-shadow: 0 2px 10px rgba(11, 31, 58, 0.04);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    min-width: 0;
}
.job-card:hover {
    border-color: rgba(0, 168, 168, 0.35);
    box-shadow: 0 8px 22px rgba(11, 31, 58, 0.08);
    transform: translateY(-2px);
}

.job-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
}

.job-card-company {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
    flex: 1;
}

.job-card-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #0B5B4A;
    color: #7FE3D0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.job-card-logo svg {
    width: 22px;
    height: 22px;
}
.job-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.job-card-title-wrap { min-width: 0; flex: 1; }

.job-card-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    margin-bottom: 0.2rem;
}

.job-card-cities {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0 0 0.25rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mo-navy, #0B1F3A);
    line-height: 1.35;
}
.job-card-cities svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-top: 0.18rem;
    color: var(--mo-teal, #00A8A8);
}
.job-card-cities span {
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job-card h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
}
.job-card h3 a {
    color: var(--mo-navy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.job-card h3 a:hover { color: var(--mo-teal); }

.job-card-dept {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #E8EEF8;
    color: #5B6B9A;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-card-employer {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--mo-muted);
    line-height: 1.4;
}
.job-card-employer svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-top: 0.18rem;
}
.job-card-employer span {
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job-card-actions-top {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}

.job-bookmark {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mo-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.job-bookmark:hover { color: var(--mo-navy); }
.job-bookmark svg {
    width: 17px;
    height: 17px;
}

.job-card-time {
    font-size: 0.7rem;
    color: #9AA8BC;
    font-weight: 500;
    white-space: nowrap;
}

.job-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #6B7A90;
    flex: 1;
}
.job-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.35;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-card-meta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #8A97AB;
}

.job-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(11, 31, 58, 0.08);
}

.job-card-salary {
    font-weight: 700;
    color: var(--mo-teal);
    font-size: 0.86rem;
    min-width: 0;
    line-height: 1.3;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-card-salary .text-muted {
    color: var(--mo-muted);
    font-weight: 500;
}

.btn-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 1rem;
    border-radius: 999px;
    border: 1.5px solid var(--mo-teal);
    background: #fff;
    color: var(--mo-teal);
    font-weight: 650;
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-apply:hover {
    background: var(--mo-teal);
    color: #fff;
    border-color: var(--mo-teal);
}

.section-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.section-nav-arrows {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.section-nav-arrows button,
.section-nav-arrows a {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--mo-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}
.section-nav-arrows svg {
    width: 16px;
    height: 16px;
}
.section-nav-arrows button:hover,
.section-nav-arrows a:hover {
    background: var(--mo-teal-soft);
    color: var(--mo-navy);
}

/* ---------- Org logos ---------- */
.org-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    width: 100%;
}

.org-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    box-sizing: border-box;
    flex: 0 0 calc((100% - 3.4rem) / 5);
    width: calc((100% - 3.4rem) / 5);
    min-height: 108px;
    padding: 0.9rem 0.7rem 0.85rem;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.org-logo-item:hover {
    border-color: rgba(0, 168, 168, 0.35);
    box-shadow: var(--mo-shadow-sm);
}

.org-logo-item img {
    height: 40px;
    width: 40px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.org-logo-name,
.org-logo-fallback {
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--mo-navy);
    text-align: center;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
}

/* ---------- CTA banner (Figma exact) ---------- */
.section-cta {
    padding-top: 2.75rem;
    padding-bottom: 1.75rem;
    overflow: visible;
}
.section-cta .container {
    overflow: visible;
}

.cta-figma-wrap {
    position: relative;
    overflow: visible;
    padding-top: 1.25rem;
}

.cta-figma {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 200px;
    padding: 1.75rem 2.25rem 1.75rem 270px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 18% 55%, rgba(0, 168, 168, 0.16), transparent 46%),
        linear-gradient(95deg, #e8f9f8 0%, #f0fcfb 48%, #f7fffe 100%);
    border: 1px solid rgba(0, 168, 168, 0.12);
    z-index: 1;
}

.cta-figma-people {
    position: absolute;
    left: 10px;
    bottom: 0;
    height: 245px;
    width: auto;
    max-width: 290px;
    object-fit: contain;
    object-position: left bottom;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

.cta-figma-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    width: 100%;
}

.cta-figma-copy {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 34rem;
}
.cta-figma-copy h2 {
    margin: 0 0 0.55rem;
    font-size: clamp(1.4rem, 2.4vw, 1.95rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--mo-navy);
    max-width: 15ch;
}
.cta-figma-copy p {
    margin: 0;
    color: var(--mo-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 34rem;
}

.cta-figma-side {
    flex: 0 0 auto;
    display: grid;
    gap: 0.65rem;
    justify-items: center;
    text-align: center;
}
.cta-figma-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}
.cta-figma-actions .btn {
    min-width: 120px;
    border-radius: 999px;
    padding: 0.7rem 1.2rem;
    font-weight: 700;
}
.cta-figma-actions .btn-outline-teal {
    background: #fff;
    border-color: rgba(0, 168, 168, 0.45);
    color: var(--mo-navy);
}
.cta-figma-note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--mo-muted);
}

/* ---------- Stats strip (Figma) ---------- */
.stats-strip {
    width: 100vw;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    background: var(--mo-navy);
    color: #fff;
    padding: 2.35rem 0;
}

.stats-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.stats-strip-item {
    display: flex;
    align-items: center;
    gap: 0.95rem;
}

.stats-strip-item .icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #fff;
    color: var(--mo-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.stats-strip-item .icon svg {
    width: 22px;
    height: 22px;
}

.stats-strip-item strong {
    display: block;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 1.55rem;
    color: #fff;
    line-height: 1.15;
}

.stats-strip-item span {
    display: block;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.72);
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-card {
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 12px;
    padding: 1.15rem;
    text-align: center;
}
.stat-card strong {
    display: block;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 1.5rem;
    color: var(--mo-navy);
}
.stat-card span {
    font-size: 0.85rem;
    color: var(--mo-muted);
}

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--mo-border);
    background: #fff;
    color: var(--mo-text);
    font-size: 0.85rem;
    font-weight: 550;
}
.chip:hover,
.chip.is-active {
    background: var(--mo-teal-soft);
    border-color: rgba(0, 168, 168, 0.4);
    color: var(--mo-teal);
}

/* ---------- Network page ---------- */
.network-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.network-aside {
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    padding: 1.15rem;
    position: sticky;
    top: calc(var(--mo-header-h) + 1rem);
}

.network-aside h3 {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
}

.network-aside-nav {
    display: grid;
    gap: 0.4rem;
}

.network-aside-nav a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.75rem;
    border-radius: 10px;
    color: var(--mo-text);
    font-weight: 550;
    font-size: 0.88rem;
}
.network-aside-nav a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.network-aside-nav a:hover {
    background: var(--mo-bg-soft);
    color: var(--mo-navy);
}
.network-aside-nav a.is-active {
    background: var(--mo-navy);
    color: #fff;
}

.network-page { padding-top: 1.5rem; }

.network-page-intro {
    margin: 0 0 1.15rem;
}
.network-page-intro h1 {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
    line-height: 1.2;
}
.network-page-intro p {
    margin: 0;
    max-width: 36rem;
    color: var(--mo-muted);
    font-size: 0.95rem;
}

.network-search {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.95fr) auto;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    padding: 0.4rem;
    box-shadow: var(--mo-shadow-sm);
    overflow: hidden;
}

.network-search .field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0 0.85rem;
    border-right: 1px solid var(--mo-border);
}
.network-search .field:last-of-type { border-right: 0; }
.network-search .field-icon {
    width: 18px;
    height: 18px;
    color: var(--mo-muted);
    flex-shrink: 0;
}
.network-search .form-control,
.network-search .form-select {
    width: 100%;
    border: 0;
    padding: 0.75rem 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
}
.network-search .form-control:focus,
.network-search .form-select:focus {
    box-shadow: none;
    outline: none;
}

.network-search-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.15rem 0.15rem 0.15rem 0.45rem;
}
.network-search-actions .btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.7rem 1.15rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

.network-tip {
    margin: 0.85rem 0 0;
    font-size: 0.88rem;
    color: var(--mo-muted);
}
.network-tip a { color: var(--mo-navy); }

.network-section-head {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.network-section-head h2 { margin: 0 0 0.25rem; }
.network-section-head p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--mo-muted);
}

.network-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    align-items: stretch;
}

.network-card {
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    padding: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    height: 100%;
    min-height: 280px;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.network-card:hover {
    border-color: rgba(0, 168, 168, 0.35);
    box-shadow: var(--mo-shadow-sm);
    transform: translateY(-2px);
}

.network-card-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--mo-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0 auto;
    overflow: hidden;
}
.network-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.network-card h3 {
    margin: 0.15rem 0 0;
    font-size: 1.02rem;
}
.network-card h3 a { color: var(--mo-navy); }
.network-card h3 a:hover { color: var(--mo-teal); }

.network-card-role {
    margin: 0;
    color: var(--mo-teal);
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.network-card-details {
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0.55rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    width: 100%;
    text-align: left;
    background: #F5F9FB;
    border: 1px solid rgba(11, 31, 58, 0.06);
    border-radius: 10px;
    box-sizing: border-box;
}
.network-card-details li {
    display: grid;
    grid-template-columns: 7.25rem minmax(0, 1fr);
    gap: 0.35rem 0.55rem;
    align-items: start;
    font-size: 0.8rem;
    line-height: 1.35;
}
.network-card-detail-label {
    color: #64748B;
    font-weight: 600;
}
.network-card-detail-value {
    color: var(--mo-navy);
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.emp-person-card .network-card-details {
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
}

.network-card-loc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    min-height: 2.4em;
    font-size: 0.82rem;
    color: var(--mo-muted);
    line-height: 1.35;
}
.network-card-loc svg {
    width: 14px;
    height: 14px;
}

.network-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin: 0.2rem 0 0.35rem;
}

.network-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: auto;
    padding-top: 0.35rem;
}

.network-pagination { margin-top: 1.5rem; }

.network-card.is-requestable {
    border-color: rgba(15, 76, 129, 0.28);
    box-shadow: 0 0 0 1px rgba(15, 76, 129, 0.06);
}
.network-card.is-requestable .network-card-actions .btn-navy {
    font-weight: 700;
}

/* ---------- Jobs layout / filters ---------- */
.jobs-page-hero {
    background: var(--mo-bg-soft);
    padding: 2.25rem 0 1.5rem;
    border-bottom: 1px solid var(--mo-border);
}
.jobs-page-hero h1 {
    margin: 0 0 0.35rem;
    font-size: 1.7rem;
}
.jobs-page-hero p { margin: 0; }

.jobs-search-bar {
    display: grid;
    grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    box-shadow: var(--mo-shadow-sm);
    padding: 0.35rem;
    margin-bottom: 1.75rem;
    overflow: hidden;
}

.jobs-search-bar .field {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    border-right: 0;
    min-width: 0;
    align-self: stretch;
}
.jobs-search-bar .field + .field,
.jobs-search-bar .field + .jobs-search-actions {
    border-left: 1px solid var(--mo-border);
}

.jobs-search-bar .form-control,
.jobs-search-bar .form-select {
    width: 100%;
    border: 0;
    padding: 0.7rem 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    height: auto;
}
.jobs-search-bar .form-control:focus,
.jobs-search-bar .form-select:focus { box-shadow: none; outline: none; }

.jobs-search-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    padding: 0.2rem 0.2rem 0.2rem 0.55rem;
    flex-shrink: 0;
}
.jobs-search-actions .btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.65rem 1.15rem;
    border-radius: 10px;
    font-size: 0.9rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jobs-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}

.jobs-layout .job-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.filters-sidebar {
    position: sticky;
    top: calc(var(--mo-header-h) + 1rem);
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    padding: 1.15rem;
}

.filters-sidebar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}
.filters-sidebar-head h3 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
}
.filters-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid var(--mo-border);
    border-radius: 10px;
    background: #fff;
    color: var(--mo-navy);
    cursor: pointer;
}
.filters-backdrop { display: none; }

.filters-sidebar h3 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
}
.filters-sidebar .filters-sub {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
}

.filter-block {
    padding: 0.85rem 0;
    border-top: 1px solid var(--mo-border);
}
.filter-block:first-of-type {
    border-top: 0;
    padding-top: 0.25rem;
}
.filter-block h4 {
    margin: 0 0 0.55rem;
    font-size: 0.88rem;
    color: var(--mo-navy);
}

.filter-list label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0;
    font-size: 0.88rem;
    color: var(--mo-text);
    cursor: pointer;
}
.filter-list label.is-collapsed { display: none; }
.filter-list.is-expanded label.is-collapsed { display: flex; }
.filter-more {
    display: inline-flex;
    align-items: center;
    margin-top: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mo-teal);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.jobs-filter-toggle {
    display: none;
    align-items: center;
    gap: 0.4rem;
}
.jobs-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--mo-teal);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.jobs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.jobs-toolbar p {
    margin: 0;
    font-weight: 700;
    color: var(--mo-navy);
}

/* ---------- Pricing ---------- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 16px;
    padding: 1.5rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pricing-card.is-featured {
    border-color: var(--mo-teal);
    box-shadow: var(--mo-shadow);
}
.pricing-card.is-featured::before {
    content: "Popular";
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mo-teal);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
}

.pricing-card h3 {
    margin: 0;
    font-size: 1.2rem;
}

.pricing-price {
    font-family: "Sora", "Inter", sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--mo-navy);
    line-height: 1.1;
}
.pricing-price small {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mo-muted);
}

.pricing-features {
    display: grid;
    gap: 0.55rem;
    flex: 1;
}
.pricing-features li {
    position: relative;
    padding-left: 1.35rem;
    font-size: 0.9rem;
    color: var(--mo-text);
}
.pricing-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--mo-teal);
    font-weight: 700;
}






/* ---------- Auth layout (Figma — shared across all auth pages) ---------- */
.auth-page {
    min-height: 100vh;
    height: 100vh;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.auth-global-header {
    flex: 0 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1.25rem, 3vw, 3rem);
    background: #fff;
    border-bottom: 1px solid rgba(11, 31, 58, 0.08);
}
.auth-global-brand,
.auth-global-help {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.auth-global-brand .mo-logo-svg { width: 150px; }
.auth-global-brand img {
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}
.auth-global-help {
    gap: 0.45rem;
    color: #64748B;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}
.auth-global-help svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-global-help:hover { color: var(--mo-teal); }

.auth-wrap {
    display: grid;
    grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Login — restore previous Figma-matching left panel (reference image) */
.auth-login-page .auth-wrap {
    grid-template-columns: 35.6% minmax(0, 1fr);
}
.auth-login-page .auth-hero {
    padding: 0;
    min-height: 0;
    background: #F5F8FC url("../img/auth-welcome-ref.png") center center / contain no-repeat;
    border-right: 1px solid rgba(11, 31, 58, 0.06);
}
.auth-login-page .auth-hero > * { display: none !important; }
.auth-login-page .auth-panel-top { display: none; }
.auth-page.auth-login-page .auth-panel {
    min-height: 0;
    max-height: none;
    align-items: center;
    padding: 2rem;
}
.auth-login-page .auth-card {
    width: min(100%, 420px);
}

.auth-page.auth-wide .auth-wrap {
    grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
}

/* Other auth pages — same proportions as login */
.auth-page:not(.auth-login-page) .auth-wrap {
    grid-template-columns: 35.6% minmax(0, 1fr);
}
.auth-page.auth-wide:not(.auth-login-page) .auth-wrap {
    grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
}

/* Non-login sides: same Figma visual as login + dynamic title text */
.auth-page:not(.auth-login-page) .auth-hero {
    padding: 1.35rem 1.1rem 0.75rem;
    align-items: center;
    background: #F5F8FC;
}
.auth-page:not(.auth-login-page) .auth-hero-copy {
    text-align: center;
    max-width: 22rem;
    margin: 0 auto;
    padding: 0 0.5rem;
}
.auth-page:not(.auth-login-page) .auth-hero-copy h1 {
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    margin-bottom: 0.4rem;
}
.auth-page:not(.auth-login-page) .auth-hero-copy .auth-kicker {
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}
.auth-page:not(.auth-login-page) .auth-hero-copy > p {
    font-size: 0.84rem;
    line-height: 1.5;
}
.auth-page:not(.auth-login-page) .auth-hero-stage,
.auth-page:not(.auth-login-page) .auth-privacy-note {
    display: none !important;
}
.auth-hero-visual-block {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    align-items: flex-end;
    justify-content: center;
    margin-top: 0.35rem;
}
.auth-hero-visual-block img {
    width: 100%;
    max-width: 420px;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}
.auth-page:not(.auth-login-page) .auth-hero-visual-block {
    display: flex;
}
.auth-login-page .auth-hero-visual-block {
    display: none !important;
}

.auth-hero {
    position: relative;
    background: #F5F8FC;
    color: var(--mo-text);
    padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2.4vw, 2.25rem) 1.1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid rgba(11, 31, 58, 0.06);
    min-width: 0;
    min-height: 0;
}

.auth-hero-brand { display: none !important; }

.auth-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 26rem;
    flex: 0 0 auto;
}
.auth-hero-copy h1 {
    color: var(--mo-navy);
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    margin: 0 0 0.35rem;
    letter-spacing: -0.025em;
    font-weight: 800;
    line-height: 1.2;
}
.auth-hero-copy .auth-kicker {
    color: #8a96a8;
    font-weight: 500;
    margin: 0 0 0.45rem;
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
}
.auth-hero-copy > p {
    color: #6b7a8d;
    margin: 0;
    font-size: clamp(0.82rem, 1.05vw, 0.9rem);
    line-height: 1.55;
}

/* Photo + soft circles + overlapping white feature card */
.auth-hero-stage {
    position: relative;
    margin-top: clamp(0.75rem, 1.5vw, 1.15rem);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    max-width: 420px;
    min-height: 0;
    align-self: center;
}

.auth-hero-circle {
    position: absolute;
    left: 50%;
    top: 28%;
    width: min(260px, 72%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: transparent;
    border: 20px solid rgba(0, 168, 168, 0.12);
    box-shadow: 0 0 0 12px rgba(0, 168, 168, 0.06);
    pointer-events: none;
    z-index: 0;
}

.auth-hero-people {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(360px, 100%);
    height: auto;
    max-height: min(240px, 28vh);
    object-fit: contain;
    object-position: center bottom;
    display: block;
    margin: 0 auto -2.75rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.auth-feature-card {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    gap: 0.75rem;
    background: #fff;
    border: 0;
    border-radius: 16px;
    padding: 1rem 1.05rem;
    margin-top: 0;
    box-shadow: 0 12px 32px rgba(11, 31, 58, 0.10);
}

.auth-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.auth-feature .icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #e6f7f6;
    color: var(--mo-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.auth-feature .icon svg { width: 16px; height: 16px; }
.auth-feature strong {
    display: block;
    color: var(--mo-navy);
    font-size: 0.86rem;
    margin-bottom: 0.08rem;
    font-weight: 700;
}
.auth-feature span {
    display: block;
    color: #8a96a8;
    font-size: 0.74rem;
    line-height: 1.4;
}

.auth-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    font-size: 0.74rem;
    color: #8a96a8;
    line-height: 1.4;
    flex: 0 0 auto;
}
.auth-privacy-note svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--mo-teal);
}

/* legacy unused */
.auth-hero-visual,
.auth-hero-photos,
.auth-hero-photo,
.auth-hero-ring,
.auth-hero-rings,
.auth-hero-inner { display: none !important; }

.auth-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
    background: #fff;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
}

.auth-panel-top {
    display: none;
}

.auth-mobile-brand {
    display: none;
    align-items: center;
}
.auth-mobile-brand img {
    height: 32px;
    width: auto;
}

.auth-help { display: none; }

.auth-card {
    width: min(100%, 420px);
    padding-top: 0;
}
.auth-card.auth-card-wide,
.auth-card.auth-register { width: min(100%, 560px); }
.auth-card.auth-register-wizard { width: min(100%, 640px); }
.auth-page.auth-wide .auth-card { width: min(100%, 680px); }
.auth-page.auth-wide .auth-panel {
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 1.75rem;
}

@media (max-height: 780px) {
    .auth-hero-people { max-height: min(180px, 22vh); margin-bottom: -2.2rem; }
    .auth-feature-card { padding: 0.85rem 0.95rem; gap: 0.55rem; }
    .auth-feature .icon { width: 32px; height: 32px; }
    .auth-feature strong { font-size: 0.8rem; }
    .auth-feature span { font-size: 0.7rem; }
    .auth-hero-copy h1 { font-size: 1.45rem; }
    .auth-privacy-note { margin-top: 0.6rem; }
}

.auth-login {
    text-align: center;
}
.auth-login .form-group,
.auth-login .auth-tabs,
.auth-login form {
    text-align: left;
}

.auth-register .auth-role-label {
    text-align: left;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--mo-navy);
}
.auth-register > h1 {
    margin-bottom: 0.4rem;
}
.auth-register .auth-sub {
    margin-bottom: 1.5rem;
}
.auth-register .btn-block {
    margin-top: 0.25rem;
    border-radius: 12px;
    min-height: 52px;
    font-weight: 700;
}

/* Register 3-step wizard */
.reg-topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.35rem;
    min-height: 36px;
}
.reg-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    border: 0;
    background: transparent;
    color: #64748B;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.25rem 0;
}
.reg-nav-link svg { width: 18px; height: 18px; }
.reg-nav-link:hover { color: var(--mo-teal); }
.reg-nav-link.is-invisible {
    visibility: hidden;
    pointer-events: none;
}
.reg-skip-btn {
    justify-self: end;
    min-width: 7.5rem;
    font-weight: 700;
    border-width: 1.5px;
    border-color: var(--mo-teal, #00A8A8);
    color: var(--mo-teal, #00A8A8);
    background: #fff;
    border-radius: 10px;
    padding: 0.45rem 0.9rem;
    line-height: 1.2;
}
.reg-skip-btn:hover {
    background: rgba(0, 168, 168, 0.08);
    color: var(--mo-navy, #0B1F3A);
    border-color: var(--mo-navy, #0B1F3A);
}
.reg-skip-btn.is-invisible,
.reg-skip-btn[hidden] {
    visibility: hidden;
    pointer-events: none;
}
.reg-topbar .auth-steps {
    margin: 0 auto;
    max-width: 200px;
    width: 100%;
}
.auth-steps .step.is-done {
    background: rgba(0, 168, 168, 0.15);
    border-color: var(--mo-teal);
    color: var(--mo-teal);
}

.gender-pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.gender-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    padding: 0.65rem 0.75rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
    color: var(--mo-navy);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.gender-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.gender-pill-icon {
    display: inline-flex;
    color: #94A3B8;
}
.gender-pill-icon svg { width: 16px; height: 16px; }
.gender-pill:hover { border-color: rgba(0, 168, 168, 0.45); }
.gender-pill.is-selected {
    border-color: var(--mo-teal);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.12);
    color: var(--mo-teal);
}
.gender-pill.is-selected .gender-pill-icon { color: var(--mo-teal); }

.status-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
/* Passport (3 options) — keep one row like before */
.status-pills.status-pills--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 520px) {
    .status-pills.status-pills--3 {
        grid-template-columns: 1fr;
    }
}
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
    color: var(--mo-navy);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.status-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.status-pill:hover { border-color: rgba(0, 168, 168, 0.45); }
.status-pill.is-selected {
    border-color: var(--mo-teal);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.12);
    color: var(--mo-teal);
}

.file-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 148px;
    padding: 1.35rem 1.1rem;
    border: 1.5px dashed #CBD5E1;
    border-radius: 14px;
    background: #F0FDFA;
    text-align: center;
    cursor: pointer;
    overflow: visible;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.file-drop:hover,
.file-drop.is-drag {
    border-color: var(--mo-teal);
    background: rgba(0, 168, 168, 0.08);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.1);
}
.file-drop.has-file {
    border-style: solid;
    border-color: rgba(0, 168, 168, 0.5);
    background: #ECFEFF;
}
.file-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.file-drop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(0, 168, 168, 0.12);
    color: var(--mo-teal);
    margin-bottom: 0.15rem;
    flex-shrink: 0;
}
.file-drop-icon svg {
    width: 26px;
    height: 26px;
    display: block;
}
.file-drop-title,
.file-drop strong,
.file-drop strong.file-drop-title {
    display: block;
    width: 100%;
    max-width: 100%;
    color: var(--mo-navy);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.file-drop-hint,
.file-drop > span.file-drop-hint,
.file-drop > span:not(.file-drop-icon) {
    display: block;
    width: 100%;
    max-width: 100%;
    color: #64748B;
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.file-drop-name {
    display: block;
    width: 100%;
    margin-top: 0.2rem;
    color: var(--mo-teal);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.file-drop-preview {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--mo-border);
    background: #fff;
    margin: 0.15rem 0;
    z-index: 1;
}
/* Global `img { display:block }` overrides [hidden] — force hide empty previews */
.file-drop-preview[hidden],
.file-drop-preview:not([src]),
.file-drop-preview[src=""] {
    display: none !important;
}
.file-drop:has(.file-drop-preview:not([hidden])) .file-drop-icon { display: none; }
.file-drop.has-file .file-drop-preview:not([hidden]):not([src=""]) {
    display: block !important;
}
.file-drop-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    max-width: 100%;
    margin: 0.15rem 0 0.25rem;
    z-index: 1;
}
.file-drop-thumbs[hidden] { display: none !important; }
.file-drop:has(.file-drop-thumbs:not([hidden])) .file-drop-icon { display: none; }
.file-drop-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    border: 1px solid var(--mo-border);
    background: #fff;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mo-navy, #0b1f3a);
}
.file-drop-thumb.is-file {
    background: var(--mo-teal-soft, #e6f7f7);
    color: #0f766e;
    padding: 0.2rem;
    text-align: center;
    line-height: 1.1;
}
.file-drop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-pick {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.media-pick-preview {
    width: 76px;
    height: 76px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--mo-teal-soft);
    border: 1px solid var(--mo-border);
    flex: 0 0 76px;
}
.media-pick-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.media-pick-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}
.media-pick-actions .js-media-name {
    color: var(--mo-teal);
    font-size: 0.82rem;
    font-weight: 600;
}

.file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 240px;
    padding: 0.25rem 0.65rem 0.25rem 0.25rem;
    border: 1px solid var(--mo-border);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
}
.file-chip img,
.file-chip-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #EEF2F6;
}
.file-chip-icon {
    display: grid;
    place-items: center;
    color: var(--mo-teal);
}
.file-chip-icon svg { width: 16px; height: 16px; }
.file-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reg-step { display: block; }
.reg-role-block { display: block; }
.reg-step[hidden],
.reg-role-block[hidden],
.reg-role-block.is-hidden,
.js-status-block[hidden],
.reg-actions .btn[hidden],
.reg-nav-link[hidden],
#regBack[hidden],
#regSkip[hidden],
#regContinue[hidden],
#regSubmit[hidden] {
    display: none !important;
}
.reg-actions { margin-top: 1.25rem; }
.reg-actions .btn + .btn { margin-top: 0.75rem; }
.auth-register-wizard .form-group { margin-bottom: 1rem; }
.auth-register-wizard .form-label { font-weight: 600; color: #475569; margin-bottom: 0.45rem; }
.auth-register-wizard .reg-city-hint {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 0.4rem;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .reg-topbar { grid-template-columns: auto 1fr auto; }
    .reg-skip-btn { min-width: 0; padding: 0.4rem 0.7rem; font-size: 0.8rem; }
    .gender-pills { grid-template-columns: 1fr; }
}

.auth-form-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: #dff5f3;
    color: #00a8a8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.35rem;
}
.auth-form-icon svg { width: 30px; height: 30px; }

.auth-card > h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.4rem, 2.2vw, 1.7rem);
    font-weight: 800;
    color: var(--mo-navy);
    letter-spacing: -0.02em;
}
.auth-login > h1 { text-align: center; }

.auth-card .auth-sub {
    margin: 0 0 1.35rem;
    font-size: 0.95rem;
    color: #7a8799;
    line-height: 1.55;
}
.auth-login .auth-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 280px;
}

.auth-submit-btn {
    border-radius: 999px;
    padding: 0.95rem 1.45rem;
    font-weight: 700;
    margin-top: 0.35rem;
}

.form-section {
    margin: 0 0 1.35rem;
    padding: 0;
    border: 0;
}
.form-section-title {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mo-navy);
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(11, 31, 58, 0.08);
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid #e8eef4;
    margin-bottom: 1.35rem;
}
.auth-tabs button {
    border: 0;
    background: transparent;
    padding: 0.85rem 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: #8a96a8;
    cursor: pointer;
    position: relative;
}
.auth-tabs button.is-active { color: var(--mo-teal); }
.auth-tabs button.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 72px;
    height: 3px;
    background: var(--mo-teal);
    border-radius: 3px 3px 0 0;
    transform: translateX(-50%);
}

.auth-alt {
    margin-top: 1.35rem;
    text-align: center;
    font-size: 0.9rem;
    color: #8a96a8;
    line-height: 1.7;
}
.auth-alt a {
    font-weight: 700;
    color: var(--mo-teal);
}
.auth-alt a:hover { color: var(--mo-navy); }

.auth-demo-hint {
    display: none;
}

.role-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.role-card {
    display: block;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.15rem 1.1rem;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.role-card:hover { border-color: rgba(0, 168, 168, 0.45); }
.role-card.is-selected {
    border-color: var(--mo-teal);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.12);
}

.role-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.7rem;
}

.role-card .role-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #e6f7f6;
    color: var(--mo-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.role-card:not(.is-selected) .role-icon {
    background: #F1F5F9;
    color: var(--mo-navy);
}
.role-card .role-icon svg { width: 18px; height: 18px; }

.role-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #CBD5E1;
    border-radius: 50%;
    position: relative;
}
.role-card.is-selected .role-radio { border-color: var(--mo-teal); }
.role-card.is-selected .role-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--mo-teal);
}

.role-card strong {
    display: block;
    color: var(--mo-navy);
    font-size: 1rem;
    font-weight: 700;
}
.role-card span {
    display: block;
    color: #7a8799;
    font-size: 0.82rem;
    margin-top: 0.25rem;
    line-height: 1.4;
}

.gender-options,
.job-status-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.gender-options label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 550;
    cursor: pointer;
}

.auth-steps {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
    max-width: 220px;
}
.auth-steps .step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #E2E8F0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #94A3B8;
    background: #fff;
}
.auth-steps .step.is-active {
    background: var(--mo-teal);
    border-color: var(--mo-teal);
    color: #fff;
}
.auth-steps .line {
    flex: 1;
    height: 2px;
    background: #E2E8F0;
    border-radius: 2px;
}

/* ---------- Portal ---------- */
.portal-shell {
    display: grid;
    grid-template-columns: var(--mo-portal-aside) minmax(0, 1fr);
    gap: 0;
    min-height: calc(100vh - var(--mo-header-h));
    width: 100%;
    background: var(--mo-bg-soft);
}

.portal-aside {
    background: #fff;
    border-right: 1px solid var(--mo-border);
    padding: 1.25rem 0.85rem;
}

.portal-aside-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mo-muted);
    padding: 0 0.65rem 0.75rem;
}

.portal-nav { display: grid; gap: 0.2rem; }

.portal-nav a,
.portal-nav button {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.75rem;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: var(--mo-text);
    font-weight: 550;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.portal-nav a:hover,
.portal-nav button:hover {
    background: var(--mo-bg-soft);
    color: var(--mo-navy);
}
.portal-nav a.is-active {
    background: var(--mo-teal-soft);
    color: var(--mo-teal);
}

.portal-main {
    padding: 1.5rem var(--mo-container-pad) 2.5rem;
    min-width: 0;
}

.portal-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
    flex-wrap: wrap;
}
.portal-page-head h1 {
    margin: 0;
    font-size: 1.45rem;
}
.portal-page-head p {
    margin: 0.3rem 0 0;
}

/* ---------- Surfaces / tables / alerts ---------- */
.surface {
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
}
.surface-pad { padding: 1.25rem; }

.page-hero {
    background: var(--mo-bg-soft);
    padding: 2.25rem 0 1.5rem;
    border-bottom: 1px solid var(--mo-border);
}
.page-hero h1 {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}
.page-hero p {
    margin: 0;
    max-width: 40rem;
}

.job-show-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}
.job-show-head-main {
    flex: 1 1 auto;
    min-width: 0;
}
.job-show-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.job-show-head h1 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.job-show-cities {
    margin: 0;
    font-weight: 600;
    color: var(--mo-navy);
    max-width: none;
}
.job-show-employer {
    margin: 0.2rem 0 0;
    color: var(--mo-muted);
    max-width: none;
}
.job-show-salary {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--mo-teal);
    font-size: 1.1rem;
    line-height: 1.3;
    white-space: nowrap;
    padding-top: 1.7rem;
}
.job-show-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.35rem;
    align-items: start;
}

@media (max-width: 900px) {
    .job-show-head {
        flex-direction: column;
        gap: 0.65rem;
    }
    .job-show-salary {
        padding-top: 0;
        font-size: 1.05rem;
    }
    .job-show-layout {
        grid-template-columns: 1fr;
    }
    .job-show-layout > aside {
        position: static !important;
    }
}

.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.table th,
.table td {
    padding: 0.85rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--mo-border);
    vertical-align: middle;
}
.table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mo-muted);
    font-weight: 700;
    background: var(--mo-bg-soft);
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(0, 168, 168, 0.04); }

.empty-state {
    text-align: center;
    padding: 2.75rem 1.5rem;
}
.empty-state-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--mo-teal-soft);
    color: var(--mo-teal);
    display: flex;
    align-items: center;
    justify-content: center;
}
.empty-state h3 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
}
.empty-state p {
    margin: 0 auto 1.15rem;
    max-width: 28rem;
}

.alert {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
}
.alert-success {
    background: rgba(15, 159, 110, 0.1);
    border-color: rgba(15, 159, 110, 0.25);
    color: #0B6B4A;
}
.alert-error {
    background: rgba(225, 29, 72, 0.08);
    border-color: rgba(225, 29, 72, 0.22);
    color: #9F1239;
}
.alert-info {
    background: var(--mo-teal-soft-2);
    border-color: rgba(0, 168, 168, 0.25);
    color: #0B5F5F;
}

/* ---------- Footer ---------- */
.site-footer {
    background: #fff;
    border-top: 1px solid var(--mo-border);
    margin-top: auto;
    padding-top: 3rem;
}

.site-footer a { color: var(--mo-text); }
.site-footer a:hover { color: var(--mo-teal); }

.footer-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 2rem 2.5rem;
    padding-bottom: 2.5rem;
    align-items: start;
}
.footer-grid--compact {
    grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(0, 1fr));
}

.footer-col {
    min-width: 0;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    color: var(--mo-navy);
}
.footer-brand:hover { color: var(--mo-navy); }
.footer-brand img {
    height: 36px;
    width: auto;
}

.footer-about {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--mo-muted);
    max-width: 28ch;
}

.footer-col h4 {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mo-navy);
    line-height: 1.35;
    min-height: 1.35em;
}

.footer-col ul {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-col li a {
    font-weight: 500;
    font-size: 0.9rem;
    color: #5b6b7c;
    line-height: 1.4;
}
.footer-col li a:hover { color: var(--mo-teal); }

.footer-newsletter-text {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--mo-muted);
}

.footer-newsletter-form {
    display: grid;
    gap: 0.65rem;
    width: 100%;
    max-width: 280px;
}
.footer-newsletter-form .form-control {
    background: var(--mo-bg-soft);
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
}
.footer-newsletter-form .form-control::placeholder { color: var(--mo-muted); }
.footer-newsletter-form .btn {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    justify-content: center;
}

.footer-contact {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.15rem;
}
.footer-contact-item {
    display: block;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #5b6b7c;
    font-weight: 500;
    word-break: break-word;
}
a.footer-contact-item:hover { color: var(--mo-teal); }

.footer-bottom {
    width: 100%;
    background: var(--mo-navy);
    color: rgba(255, 255, 255, 0.85);
    padding: 1.05rem 0;
    font-size: 0.88rem;
}
.footer-bottom-inner,
.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer-bottom a { color: rgba(255, 255, 255, 0.85); }
.footer-bottom a:hover { color: #fff; }
.footer-pay-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ---------- Toast ---------- */
.toast-host {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 200;
    display: grid;
    gap: 0.65rem;
    width: min(360px, calc(100vw - 2rem));
}

.toast {
    background: #fff;
    border: 1px solid var(--mo-border);
    border-left: 4px solid var(--mo-teal);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    box-shadow: var(--mo-shadow);
    font-size: 0.9rem;
    color: var(--mo-text);
    animation: toastIn .25s ease;
}
.toast-success { border-left-color: var(--mo-success); }
.toast-error { border-left-color: var(--mo-danger); }
.toast-info { border-left-color: var(--mo-navy); }
.toast-warning { border-left-color: #d97706; }

.toast-rich {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}
.toast-rich .toast-body {
    flex: 1;
    line-height: 1.45;
}
.toast-rich .toast-close {
    border: 0;
    background: transparent;
    color: var(--mo-muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}
.toast-rich .toast-close:hover { color: var(--mo-navy); }
.toast-rich.is-hiding {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}

.form-control.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Pagination ---------- */
.mo-pager {
    max-width: 100%;
    overflow: hidden;
}
.mo-pager nav,
nav[role="navigation"][aria-label*="Pagination"],
nav[aria-label="Pagination"] {
    display: block;
    max-width: 100%;
}
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}
.pagination li a,
.pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    max-height: 36px;
    padding: 0 0.65rem;
    border: 1px solid var(--mo-border);
    border-radius: 9px;
    background: #fff;
    color: var(--mo-navy);
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1;
    overflow: hidden;
}
.pagination li.active span,
.pagination li a:hover {
    background: var(--mo-navy);
    border-color: var(--mo-navy);
    color: #fff;
}
.pagination li.disabled span {
    opacity: 0.45;
    cursor: not-allowed;
}
/* Hard-cap: Tailwind default pager SVGs explode without utility CSS */
.pagination svg,
.mo-pager svg,
nav[aria-label="Pagination"] svg,
nav[role="navigation"] svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0;
}

/* ---------- Utilities ---------- */
.text-navy { color: var(--mo-navy) !important; }
.text-teal { color: var(--mo-teal) !important; }
.text-muted { color: var(--mo-muted) !important; }
.text-center { text-align: center; }
.fw-700 { font-weight: 700; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.gap-1 { gap: 0.5rem; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1200px) {
    .org-strip .org-logo-item {
        flex-basis: calc((100% - 2.55rem) / 4);
        width: calc((100% - 2.55rem) / 4);
    }
    .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .job-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jobs-layout .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid,
    .footer-grid--compact {
        grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
        gap: 1.75rem 1.5rem;
    }
    .cta-banner { grid-template-columns: auto 1fr; }
    .cta-banner-actions { justify-content: flex-start; grid-column: 2; }
    .cta-figma {
        padding-left: 240px;
    }
    .cta-figma-people {
        max-width: 250px;
        height: 220px;
    }
}

@media (max-width: 1100px) {
    .hero-home-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    .hero-copy h1 { max-width: none; }
    .hero-visual {
        max-width: 420px;
        margin: 0 auto;
        justify-self: center;
    }
    .jobs-search-bar {
        grid-template-columns: 1fr 1fr;
    }
    .jobs-search-actions {
        grid-column: 1 / -1;
        margin: 0.15rem 0 0;
        padding: 0.35rem 0.15rem 0.15rem;
        width: 100%;
        border-left: 0;
    }
    .jobs-search-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        height: auto;
    }
    .jobs-search-bar .field {
        border-left: 0 !important;
        border-bottom: 1px solid var(--mo-border);
        padding: 0.2rem 0.55rem;
    }
    .jobs-search-bar .field:nth-child(3) {
        border-bottom: 0;
    }
    .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-strip-grid,
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
    .org-strip .org-logo-item {
        flex-basis: calc((100% - 1.7rem) / 3);
        width: calc((100% - 1.7rem) / 3);
    }
    .auth-page {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }
    .auth-wrap {
        grid-template-columns: 1fr;
        overflow: visible;
    }
    .auth-login-page .auth-wrap,
    .auth-page:not(.auth-login-page) .auth-wrap,
    .auth-page.auth-wide .auth-wrap,
    .auth-page.auth-wide:not(.auth-login-page) .auth-wrap {
        grid-template-columns: 1fr;
    }
    .auth-hero { display: none; }
    .auth-global-header { padding: 0 1.25rem; height: 60px; }
    .auth-global-brand img { height: 34px; }
    .auth-panel {
        padding: 1.5rem 1.25rem 2.5rem;
        max-height: none;
        min-height: calc(100vh - 60px);
        align-items: flex-start;
    }
    .auth-panel-top {
        display: flex;
        position: static;
        justify-content: flex-start;
        margin-bottom: 1.25rem;
        padding: 0;
    }
    .auth-mobile-brand { display: inline-flex; }
    .auth-card,
    .auth-card.auth-card-wide,
    .auth-page.auth-wide .auth-card { width: min(100%, 560px); margin: 0 auto; }
    .auth-page.auth-wide .auth-panel { padding-top: 1.25rem; }

    .portal-shell { grid-template-columns: 1fr; }
    .portal-aside {
        position: sticky;
        top: var(--mo-header-h);
        z-index: 40;
        padding: 0.75rem;
        border-right: 0;
        border-bottom: 1px solid var(--mo-border);
    }
    .portal-nav {
        display: flex;
        overflow-x: auto;
        gap: 0.35rem;
        padding-bottom: 0.15rem;
    }
    .portal-nav a,
    .portal-nav button {
        white-space: nowrap;
        flex-shrink: 0;
        width: auto;
    }
    .portal-aside-label { display: none; }

    .jobs-layout,
    .network-layout { grid-template-columns: 1fr; }
    .network-aside { position: static; }
    .jobs-filter-toggle { display: inline-flex; }
    .filters-close { display: inline-flex; }
    .filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(11, 31, 58, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .filters-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }
    .filters-sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 80;
        max-height: min(86vh, 640px);
        overflow: auto;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -16px 40px rgba(11, 31, 58, 0.18);
        transform: translateY(110%);
        transition: transform .25s ease;
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }
    .filters-sidebar.is-open { transform: translateY(0); }
    body.jobs-filters-open { overflow: hidden; }
    .network-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .network-search {
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
        padding: 0.55rem;
    }
    .network-search .field {
        border-right: 0;
        border: 1px solid var(--mo-border);
        border-radius: 10px;
        padding: 0 0.75rem;
        background: var(--mo-bg-soft);
    }
    .network-search-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
        padding: 0;
        gap: 0.5rem;
    }
    .network-search-actions .btn { flex: 1; }

    .cta-figma-wrap {
        padding-top: 0;
    }
    .cta-figma {
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem 1.35rem 1.5rem;
        text-align: center;
    }
    .cta-figma-people {
        position: relative;
        left: auto;
        bottom: auto;
        display: block;
        height: 210px;
        max-width: 240px;
        margin: 0 auto 0.85rem;
    }
    .cta-figma-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .cta-figma-copy h2,
    .cta-figma-copy p {
        margin-inline: auto;
        max-width: 28rem;
    }
    .cta-figma-side {
        margin-top: 0.35rem;
    }
}

@media (max-width: 820px) {
    .site-header-inner {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .nav-toggle {
        display: inline-flex;
        margin-left: auto;
        order: 2;
    }

    .site-logo { order: 1; }
    .site-header-actions { order: 3; }

    .site-nav {
        display: none;
    }

    .site-header.is-open {
        height: auto;
        min-height: var(--mo-header-h);
    }
    .site-header.is-open .site-header-inner {
        height: auto;
        min-height: var(--mo-header-h);
        padding-bottom: 0.9rem;
    }
    .site-header.is-open .site-nav {
        display: flex;
        order: 4;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding-top: 0.25rem;
    }

    .site-header.is-open .site-header-actions {
        order: 5;
        width: 100%;
        justify-content: stretch;
    }
    .site-header.is-open .site-header-actions .auth-btns {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .site-header.is-open .site-header-actions .auth-btns .btn {
        width: 100%;
    }

    .form-row { grid-template-columns: 1fr; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .hero-badge.b1,
    .hero-badge.b2 { font-size: 0.72rem; }
}

@media (max-width: 640px) {
    .hero-home { padding: 2.25rem 0 1.75rem; }
    .section { padding: 2.5rem 0; }

    .hero-search,
    .jobs-search-bar {
        grid-template-columns: 1fr;
    }
    .hero-search {
        gap: 0.5rem;
        padding: 0.75rem;
    }
    .hero-search .field {
        border-right: 0;
        border: 1px solid var(--mo-border);
        border-radius: 12px;
        background: #F7FAFC;
        padding: 0.55rem 0.8rem;
    }
    .hero-search .hero-search-btn {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        border-radius: 12px;
    }
    .jobs-search-bar .field {
        border-right: 0;
        border-bottom: 1px solid var(--mo-border);
    }
    .jobs-search-bar .field:last-of-type {
        border-bottom: 0;
    }

    .hero-badge {
        font-size: 0.66rem;
        padding: 0.3rem 0.5rem 0.3rem 0.3rem;
        border-radius: 10px;
    }
    .hero-badge .icon {
        width: 26px;
        height: 26px;
    }
    .hero-badge strong { font-size: 0.78rem; }
    .hero-badge.b2,
    .hero-badge.b3 { display: none; }

    .job-grid,
    .jobs-layout .job-grid,
    .network-grid { grid-template-columns: 1fr; }
    .network-search { grid-template-columns: 1fr; }
    .network-page-intro h1 { font-size: 1.45rem; }
    .job-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-strip-grid,
    .stats-row { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .role-cards { grid-template-columns: 1fr; }
    .auth-panel { padding: 4rem 1rem 2rem; }
    .auth-panel-top { left: 1rem; right: 1rem; }
    .cta-banner { padding: 1.35rem; }
    .user-menu-meta { display: none; }
    .org-strip .org-logo-item {
        flex-basis: calc((100% - 0.85rem) / 2);
        width: calc((100% - 0.85rem) / 2);
    }
}

/* ---------- Select2 (MedOrbit theme) ---------- */
.select2-container {
    width: 100% !important;
    font-family: inherit;
}

.select2-container--default .select2-selection--single {
    min-height: 46px;
    border: 1px solid var(--mo-border);
    border-radius: 10px;
    background: #fff;
    padding: 0.45rem 0.9rem;
    display: flex;
    align-items: center;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--mo-text);
    line-height: 1.4;
    padding: 0 1.6rem 0 0;
    font-size: 0.95rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9AA8BC;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #4A5B70 transparent transparent transparent;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 1.4rem;
    color: #9AA8BC;
    font-weight: 600;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--mo-teal);
    box-shadow: 0 0 0 3px var(--mo-teal-soft);
}

.select2-container--default .select2-selection--multiple {
    min-height: 48px;
    border: 1px solid var(--mo-border) !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5B70' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.85rem center !important;
    background-size: 16px !important;
    padding: 0.45rem 2.35rem 0.45rem 0.55rem !important;
    transition: border-color .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    list-style: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #e6f7f7 !important;
    border: 1px solid rgba(0, 168, 168, 0.35) !important;
    border-radius: 999px !important;
    color: #0b1f3a !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 0.35rem 0.7rem 0.35rem 0.35rem !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
    max-width: calc(100% - 0.25rem);
    box-shadow: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #00a8a8 !important;
    margin: 0 0.2rem 0 0 !important;
    padding: 0 0.2rem !important;
    border: 0 !important;
    border-right: 0 !important;
    background: transparent !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    order: -1;
    position: static !important;
    border-radius: 999px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #0b1f3a !important;
    background: rgba(0, 168, 168, 0.18) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    position: absolute !important;
    right: 2rem !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0.15rem !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
    color: #0b1f3a !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 4.5rem;
    float: none !important;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0 !important;
    padding: 0.28rem 0.15rem !important;
    font-size: 0.92rem !important;
    min-height: 28px !important;
    height: auto !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #0b1f3a !important;
    font-family: inherit !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: #9AA8BC !important;
    opacity: 1 !important;
}

.select2-selection--multiple.mo-select2-multi {
    min-height: 48px;
}

/* Auth register: keep City multi field aligned with other inputs */
.auth-register-wizard .select2-container--default .select2-selection--multiple {
    min-height: 48px;
}
.auth-register-wizard .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #dff5f3 !important;
    border-color: rgba(0, 168, 168, 0.4) !important;
}

.select2-dropdown,
.select2-dropdown.mo-select2-dropdown {
    border: 1px solid rgba(11, 31, 58, 0.12);
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(11, 31, 58, 0.14);
    overflow: hidden;
    z-index: 3000;
    margin-top: 8px;
    margin-bottom: 0;
    padding: 0.35rem 0;
    background: #fff;
}

.select2-dropdown.select2-dropdown--above,
.select2-dropdown.mo-select2-dropdown.select2-dropdown--above {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

.select2-container--default .select2-search--dropdown {
    padding: 0.55rem 0.65rem 0.35rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--mo-border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    outline: none;
    width: 100% !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--mo-teal);
    box-shadow: 0 0 0 3px var(--mo-teal-soft);
}

.select2-results__options {
    max-height: 280px !important;
}

.select2-container--default .select2-results__option {
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
    color: var(--mo-text);
    border-radius: 0;
    margin: 0 0.35rem;
    border-radius: 8px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--mo-navy);
    color: #fff;
}

.select2-container--default .select2-results__option--selected {
    background: rgba(0, 168, 168, 0.12);
    color: var(--mo-navy);
    font-weight: 600;
}

.select2-container--default .select2-results__option--selected.select2-results__option--highlighted {
    background: var(--mo-navy);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #A0AEC0;
}

/* Compact selects inside search bars (jobs / hero / network) */
.hero-search .select2-container,
.jobs-search-bar .select2-container,
.network-search .select2-container {
    min-width: 0;
}

.hero-search .select2-container--default .select2-selection--single,
.jobs-search-bar .select2-container--default .select2-selection--single,
.network-search .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single.mo-select2-compact {
    min-height: 40px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.45rem 0;
}

.hero-search .select2-container--default.select2-container--focus .select2-selection--single,
.hero-search .select2-container--default.select2-container--open .select2-selection--single,
.jobs-search-bar .select2-container--default.select2-container--focus .select2-selection--single,
.jobs-search-bar .select2-container--default.select2-container--open .select2-selection--single,
.network-search .select2-container--default.select2-container--focus .select2-selection--single,
.network-search .select2-container--default.select2-container--open .select2-selection--single {
    border: 0 !important;
    box-shadow: none !important;
}

.hero-search .select2-container--default .select2-selection--single .select2-selection__rendered,
.jobs-search-bar .select2-container--default .select2-selection--single .select2-selection__rendered,
.network-search .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 0.92rem;
    color: var(--mo-text);
    padding-right: 1.4rem;
}

.hero-search .select2-container--default .select2-selection--single .select2-selection__arrow,
.jobs-search-bar .select2-container--default .select2-selection--single .select2-selection__arrow,
.network-search .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 0;
}

/* Keep native selects usable until JS loads — compact, not a tall list box */
select.form-select[multiple] {
    min-height: 46px;
    height: 46px;
}
select.form-select[multiple].select2-hidden-accessible {
    height: 1px !important;
    min-height: 0 !important;
}
/* ---------- Password eye toggle ---------- */
.password-field {
    position: relative;
    display: block;
    width: 100%;
}

.password-field .form-control,
.password-field input[type="password"],
.password-field input[type="text"] {
    width: 100%;
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #8A97AB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    padding: 0;
    z-index: 2;
}
.password-toggle:hover,
.password-toggle.is-visible {
    color: var(--mo-teal, #00A8A8);
    background: rgba(0, 168, 168, 0.08);
}
.password-toggle svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* Broadcast network */
.network-aside-note {
    margin-top: 1.1rem;
    padding: 0.95rem 1rem;
    background: #F3F8FA;
    border: 1px solid rgba(11, 31, 58, 0.06);
    border-radius: 12px;
    font-size: .84rem;
    color: #4A5B70;
    line-height: 1.45;
}
.network-aside-note strong {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--mo-navy);
    font-size: 0.88rem;
    font-weight: 700;
}
.network-aside-note ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: note;
}
.network-aside-note li {
    position: relative;
    margin: 0.4rem 0 0;
    padding-left: 1.55rem;
}
.network-aside-note li::before {
    counter-increment: note;
    content: counter(note);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--mo-navy);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.network-aside-note em {
    font-style: normal;
    font-weight: 600;
    color: var(--mo-navy);
}

.team-room-list {
    display: grid;
    gap: 0.85rem;
}
.team-room-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
}
.team-room-card-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 1;
}
.team-room-card .network-card-avatar {
    margin: 0;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    font-size: 1.05rem;
}
.team-room-copy {
    min-width: 0;
    flex: 1;
    text-align: left;
}
.team-room-card h3 {
    margin: 0 0 0.15rem;
    font-size: 1.02rem;
    line-height: 1.3;
}
.team-room-card h3 a {
    color: var(--mo-navy);
    text-decoration: none;
    font-weight: 700;
}
.team-room-card h3 a:hover { color: var(--mo-teal); }
.team-room-preview {
    margin: 0.4rem 0 0;
    font-size: 0.86rem;
    color: var(--mo-text);
    line-height: 1.4;
}
.team-room-preview.is-empty { color: var(--mo-muted); }
@media (max-width: 720px) {
    .team-room-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
    .team-room-card .btn {
        width: 100%;
        justify-content: center;
    }
}
.broadcast-card-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 76px;
    margin-bottom: 0.25rem;
}
.network-card-status {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 46%;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
}
.network-card-avatar.sm {
    width: 36px;
    height: 36px;
    font-size: .9rem;
}
.broadcast-rules {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-left: 3px solid var(--mo-teal);
    background: var(--mo-teal-soft, #E7F7F7);
    border-radius: 0 10px 10px 0;
}
.broadcast-rules ul { margin: .4rem 0 0 1rem; }
.broadcast-member-list { display: grid; gap: 0.55rem; }
.broadcast-member {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: #F5F9FB;
    border: 1px solid rgba(11, 31, 58, 0.06);
}
.broadcast-member .network-card-avatar {
    margin: 0;
    flex-shrink: 0;
}
.broadcast-member-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
}
.broadcast-member-name {
    display: block;
    width: 100%;
    color: var(--mo-navy);
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
}
a.broadcast-member-name:hover { color: var(--mo-teal); }
.broadcast-side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.broadcast-side-head h3 {
    margin: 0;
    font-size: 1rem;
}
.broadcast-room-side {
    min-width: 0;
}
.broadcast-mine-grid {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 1.25rem;
    align-items: start;
}
.broadcast-request-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid var(--mo-border, #E5EBF0);
}
.broadcast-follow-item {
    display: block;
    padding: .7rem 0;
    border-bottom: 1px solid var(--mo-border, #E5EBF0);
    color: inherit;
    text-decoration: none;
}
.broadcast-follow-item strong { display: block; color: var(--mo-navy); }
.broadcast-follow-item span { font-size: .85rem; color: #6B7C90; }
.broadcast-room {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 1.25rem;
    align-items: start;
}
.broadcast-room-main { min-width: 0; }
.broadcast-room-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--mo-border, #E5EBF0);
}
.broadcast-room-head-copy {
    min-width: 0;
    flex: 1;
}
.broadcast-room-head-copy strong {
    display: block;
    color: var(--mo-navy);
    font-size: 1.02rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.broadcast-room-head .form-hint { display: block; margin: .15rem 0 0; }
.broadcast-room-head .badge { flex-shrink: 0; }
.broadcast-feed {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.25rem;
    min-height: 320px;
    max-height: 520px;
    overflow: auto;
}
.broadcast-bubble {
    padding: .9rem 1rem;
    border-radius: 12px;
    background: #F5F8FB;
    border: 1px solid var(--mo-border, #E5EBF0);
}
.broadcast-bubble.is-mine {
    background: var(--mo-teal-soft, #E7F7F7);
    border-color: rgba(0, 168, 168, .25);
}
.broadcast-bubble-meta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
    font-size: .82rem;
    color: #6B7C90;
}
.broadcast-bubble p { margin: 0; color: var(--mo-text); line-height: 1.45; }
.broadcast-seen { display: inline-block; margin-top: .45rem; font-size: .78rem; color: #7A8B9E; }
.broadcast-composer {
    display: grid;
    gap: .75rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--mo-border, #E5EBF0);
}
.broadcast-readonly {
    margin: 0 1.25rem 1.25rem;
    padding: .9rem 1rem;
    border-radius: 10px;
    background: #FFF8E8;
    border: 1px solid #F0E0B8;
    color: #6A5A30;
}
.broadcast-readonly p { margin: .25rem 0 0; font-size: .9rem; }
.page-hero-sm { padding: 2.5rem 0 2rem; }
@media (max-width: 960px) {
    .broadcast-mine-grid,
    .broadcast-room { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .broadcast-room-head { padding: 0.9rem 1rem; }
    .broadcast-feed { padding: 1rem; max-height: none; }
    .broadcast-composer { padding: 0.9rem 1rem 1rem; }
}


/* ---------- My Network (Figma) ---------- */
.mn-tabs {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--mo-border);
    margin-bottom: 1.25rem;
}
.mn-tab {
    position: relative;
    padding: 0.65rem 0.15rem 0.85rem;
    color: var(--mo-muted);
    font-weight: 600;
    font-size: 0.95rem;
}
.mn-tab:hover { color: var(--mo-navy); }
.mn-tab.is-active { color: var(--mo-navy); }
.mn-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--mo-navy);
}
.mn-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
.mn-heading {
    margin: 0;
    font-size: 1.15rem;
    color: var(--mo-navy);
}
.mn-view-toggle {
    display: inline-flex;
    border: 1px solid var(--mo-border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.mn-view-toggle button {
    border: 0;
    background: transparent;
    padding: 0.45rem 0.55rem;
    color: var(--mo-muted);
    cursor: pointer;
    display: inline-flex;
}
.mn-view-toggle button.is-active {
    background: var(--mo-navy);
    color: #fff;
}
.mn-grid {
    display: grid;
    gap: 1rem;
}
.mn-grid.is-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mn-grid.is-list {
    grid-template-columns: 1fr;
}
.mn-card {
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    padding: 1.25rem 1.1rem 1.1rem;
    text-align: center;
    box-shadow: var(--mo-shadow-sm);
}
.mn-grid.is-list .mn-card {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
        "avatar title actions"
        "avatar sub actions"
        "avatar tags actions";
    text-align: left;
    align-items: center;
    column-gap: 0.9rem;
    row-gap: 0.25rem;
}
.mn-card-avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    background: #E8F1F8;
    color: var(--mo-navy);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.35rem;
    overflow: hidden;
}
.mn-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mn-grid.is-list .mn-card-avatar {
    grid-area: avatar;
    margin: 0;
    width: 56px;
    height: 56px;
}
.mn-card h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    color: var(--mo-navy);
}
.mn-grid.is-list .mn-card h3 { grid-area: title; }
.mn-card-sub {
    margin: 0 0 0.75rem;
    color: var(--mo-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}
.mn-grid.is-list .mn-card-sub { grid-area: sub; margin-bottom: 0.35rem; }
.mn-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.mn-grid.is-list .mn-card-tags {
    grid-area: tags;
    justify-content: flex-start;
    margin-bottom: 0;
}
.mn-pill {
    display: inline-flex;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: #EEF6FB;
    color: var(--mo-navy);
    font-size: 0.75rem;
    font-weight: 600;
}
.mn-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    align-items: center;
}
.mn-grid.is-list .mn-card-actions {
    grid-area: actions;
    justify-content: flex-end;
}
.mn-call-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    background: var(--mo-teal);
    color: #fff;
}
.mn-call-btn:hover { filter: brightness(0.95); color: #fff; }
.mn-subhead {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--mo-navy);
}
.mo-net-pending__item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.8rem;
    margin: 0 0 0.55rem;
    background: #f8fafc;
    border: 1px solid rgba(11, 31, 58, 0.07);
    border-radius: 12px;
}
.mo-net-pending__item:last-child { margin-bottom: 0; }
.mo-net-pending__avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #e2e8f0;
    flex-shrink: 0;
}
.mo-net-pending__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mo-net-pending__body { min-width: 0; }
.mo-net-pending__topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
}
.mo-net-pending__topline strong {
    color: var(--mo-navy);
    font-size: 0.92rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.mo-net-pending__body p {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--mo-muted);
    line-height: 1.35;
}
.mo-net-pending__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}
.mo-net-pending__actions form { margin: 0; }
.mo-net-pending__empty {
    margin: 0;
    padding: 0.35rem 0.15rem;
    color: var(--mo-muted);
    font-size: 0.9rem;
}
.mo-net-pending {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
    width: 100%;
}
.mo-net-pending__card {
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    box-shadow: var(--mo-shadow-sm);
    min-width: 0;
}
.mo-net-pending__title {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mo-navy);
}
@media (max-width: 960px) {
    .mo-net-pending { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    .mn-grid.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .mn-grid.is-grid { grid-template-columns: 1fr; }
    .mn-grid.is-list .mn-card {
        grid-template-columns: 48px 1fr;
        grid-template-areas:
            "avatar title"
            "avatar sub"
            "avatar tags"
            "actions actions";
    }
    .mn-grid.is-list .mn-card-actions { justify-content: flex-start; margin-top: 0.5rem; }
}

/* =====================================================================
   Employer dashboard — Figma app panel (no public website header menus)
   ===================================================================== */
body.emp-body.site-body {
    display: block;
    background: #eef2f6;
    margin: 0;
    min-height: 100vh;
}

.emp-shell {
    display: block;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #eef2f6;
    box-sizing: border-box;
}

.emp-aside {
    position: fixed;
    top: 0;
    left: 0;
    width: 248px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    border-radius: 0;
    border: 0;
    border-right: 1px solid rgba(11, 31, 58, 0.08);
    padding: 1rem 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    color: var(--mo-navy);
    z-index: 40;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.emp-logo {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.65rem 1.05rem;
    margin: 0 0 0.55rem;
    border-bottom: 1px solid rgba(11, 31, 58, 0.08);
    flex-shrink: 0;
    text-decoration: none;
}
.emp-logo:hover { color: inherit; }
.emp-logo img {
    height: 38px;
    width: auto;
    max-width: 168px;
    object-fit: contain;
}
.emp-logo .brand-logo {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--mo-navy);
}

.emp-nav { display: grid; gap: 0.15rem; flex: 0 0 auto; }
.emp-nav a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.58rem 0.75rem;
    border-radius: 8px;
    color: #5b6b82 !important;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
}
.emp-nav a svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; }
.emp-nav a:hover {
    background: rgba(0, 168, 168, 0.08);
    color: var(--mo-navy) !important;
}
.emp-nav a.is-active,
.emp-nav a.is-active:hover {
    background: var(--mo-teal);
    color: #fff !important;
    font-weight: 600;
    box-shadow: none;
}
.emp-nav-legal a {
    font-size: 0.82rem;
    color: #7a8799 !important;
    padding: 0.45rem 0.75rem;
}
.emp-nav-legal a:hover { color: var(--mo-navy) !important; }

.emp-aside-foot {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(11, 31, 58, 0.08);
    display: grid;
    gap: 0.15rem;
    flex-shrink: 0;
}
.emp-logout {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(11, 31, 58, 0.06);
}
.emp-logout button {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.58rem 0.75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #e11d48;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
.emp-logout button svg { width: 18px; height: 18px; }
.emp-logout button:hover { background: rgba(225, 29, 72, 0.08); color: #be123c; }

.emp-main {
    min-width: 0;
    margin-left: 248px;
    padding: 1.1rem 1.5rem 2.25rem;
    background: #eef2f6;
    box-sizing: border-box;
}

.emp-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
    padding: 0.95rem 1.15rem;
    background: #fff;
    border: 1px solid rgba(11, 31, 58, 0.08);
    border-radius: 14px;
    min-width: 0;
}
.emp-appbar-welcome {
    min-width: 0;
    flex: 1 1 220px;
}
.emp-appbar-welcome h2 {
    margin: 0 0 0.15rem;
    font-size: 1.2rem;
    color: var(--mo-navy);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.emp-appbar-welcome p {
    margin: 0;
    color: var(--mo-muted);
    font-size: 0.84rem;
}
.emp-appbar-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.emp-appbar-actions .btn-teal {
    border-radius: 10px;
    padding: 0.62rem 1.05rem;
    font-weight: 600;
}
.emp-appbar-bell {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(11, 31, 58, 0.1);
    background: #fff;
    color: var(--mo-navy);
}
.emp-appbar-bell svg { width: 18px; height: 18px; }
.emp-appbar-bell:hover { border-color: var(--mo-teal); color: var(--mo-teal); }
.emp-appbar-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.emp-appbar-user .user-menu-btn {
    background: #fff;
    border: 1px solid rgba(11, 31, 58, 0.1);
    border-radius: 999px;
    padding: 0.28rem 0.75rem 0.28rem 0.3rem;
    gap: 0.45rem;
}
.emp-appbar-user .user-avatar {
    width: 34px;
    height: 34px;
    background: var(--mo-teal);
    color: #fff;
}
.emp-appbar-user .user-menu-meta strong {
    color: var(--mo-navy);
    font-size: 0.86rem;
}
.emp-appbar-user .user-menu-meta small {
    color: var(--mo-muted);
    font-size: 0.72rem;
}

.emp-subnav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin: 0 0 1.15rem;
    padding: 0.35rem;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.emp-subnav a {
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--mo-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.emp-subnav a:hover { color: var(--mo-navy); background: var(--mo-bg-soft); }
.emp-subnav a.is-active {
    background: var(--mo-navy);
    color: #fff;
}

.emp-menu-toggle {
    display: none;
    position: fixed;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 60;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: var(--mo-navy);
    color: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(11, 31, 58, 0.25);
}
.emp-menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
.emp-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 58, 0.45);
    z-index: 35;
}

.emp-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: linear-gradient(96deg, var(--mo-navy) 0%, #14375f 100%);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.emp-welcome h2 {
    margin: 0 0 0.2rem;
    color: #fff;
    font-size: 1.2rem;
}
.emp-welcome p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
}
.emp-welcome-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.emp-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    min-width: 0;
}
.emp-topbar > div:first-child { min-width: 0; flex: 1 1 220px; }
.emp-topbar h1 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--mo-navy);
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.emp-topbar p {
    margin: 0.2rem 0 0;
    color: var(--mo-muted);
    font-size: 0.84rem;
}
.emp-topbar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.emp-crumb {
    color: var(--mo-muted);
    font-weight: 500;
}
.emp-crumb::after {
    content: '/';
    margin: 0 0.4rem;
    color: var(--mo-border);
}

.emp-daterange {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--mo-border);
    border-radius: 10px;
    background: #fff;
    color: var(--mo-text);
    font-size: 0.84rem;
    font-weight: 500;
}
.emp-daterange svg { width: 16px; height: 16px; color: var(--mo-muted); }

.emp-dash-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.55rem 0.65rem;
}
.emp-dash-filter {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
}
.emp-dash-filter-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mo-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.emp-dash-filters .form-select,
.emp-dash-filters .form-control {
    min-height: 38px;
    min-width: 132px;
    border-radius: 10px;
    font-size: 0.86rem;
}
.emp-dash-filter-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}
@media (max-width: 720px) {
    .emp-dash-filters { width: 100%; }
    .emp-dash-filters .form-select,
    .emp-dash-filters .form-control { min-width: 0; width: 100%; }
    .emp-dash-filter { flex: 1 1 140px; }
}

/* Stat cards with trend */
.emp-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}
.emp-stats.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emp-stats.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Profile field cells (label above, value below) — used on network profile / team pages */
.emp-stat {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.85rem 0.95rem;
    background: #F7FAFC;
    border: 1px solid rgba(11, 31, 58, 0.06);
    border-radius: 10px;
}
.emp-stat > span:first-child,
.emp-stat > .emp-stat-label {
    display: block;
    color: var(--mo-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.3;
}
.emp-stat > strong,
.emp-stat > .emp-stat-value {
    display: block;
    color: var(--mo-navy);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}
.emp-stat > strong a,
.emp-stat > .emp-stat-value a {
    color: var(--mo-teal);
    text-decoration: none;
    font-weight: 600;
}
.emp-stat > strong a:hover,
.emp-stat > .emp-stat-value a:hover { text-decoration: underline; }
.emp-stat.is-wide { grid-column: 1 / -1; }

.np-page {
    width: 100%;
    max-width: min(1680px, 98vw);
    margin-inline: auto;
}
.np-layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.np-layout-side {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
}
.np-layout-main {
    min-width: 0;
    display: grid;
    gap: 1rem;
}
.np-layout-main > .np-section,
.np-layout-main > .surface { margin-bottom: 0; }
.np-layout .emp-stats.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.np-layout .network-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}
.np-layout .network-card-actions .btn,
.np-layout .network-card-actions form {
    flex: 1 1 auto;
}
.np-layout .np-hero {
    flex-direction: column;
    align-items: stretch;
}
.np-layout .np-hero-main {
    width: 100%;
}
.np-side-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
    flex-shrink: 0;
}

@media (min-width: 1280px) {
    .np-layout .emp-stats.cols-3 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .np-layout .emp-stat.is-wide {
        grid-column: span 2;
    }
}

@media (max-width: 1024px) {
    .np-layout {
        grid-template-columns: 1fr;
    }
    .np-layout-side {
        position: static;
    }
}
.np-section {
    margin-bottom: 1rem;
}
.np-section.surface {
    border-left: 3px solid var(--mo-teal);
}
.np-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(11, 31, 58, 0.07);
}
.np-section-title {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}
.np-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mo-teal-soft, #E6F7F7);
    color: var(--mo-teal);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.np-section-icon svg { width: 18px; height: 18px; }
.np-section-head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--mo-navy);
}
.np-section-head p {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
    color: var(--mo-muted);
}
.np-about {
    margin: 0.85rem 0 0;
    padding: 0.9rem 1rem;
    background: #F7FAFC;
    border: 1px solid rgba(11, 31, 58, 0.06);
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #334155;
    white-space: pre-wrap;
}
.np-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}
.np-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.np-hero-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.np-hero-main h2 {
    margin: 0 0 0.3rem;
    font-size: 1.25rem;
    color: var(--mo-navy);
}
.np-hero-sub {
    margin: 0;
    font-size: 0.88rem;
    color: var(--mo-muted);
    line-height: 1.45;
}
.np-member-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(11, 31, 58, 0.07);
    min-width: 0;
}
.np-member-row .network-card-avatar {
    margin: 0;
    flex-shrink: 0;
}
.np-member-row:last-child { border-bottom: 0; padding-bottom: 0; }
.np-member-row:first-child { padding-top: 0; }
.np-member-info { flex: 1; min-width: 0; }
.np-member-info strong {
    display: block;
    color: var(--mo-navy);
    font-size: 0.95rem;
}
.np-member-info .form-hint {
    display: block;
    margin-top: 0.15rem;
}
.np-doc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.np-doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: #F7FAFC;
    border: 1px solid rgba(11, 31, 58, 0.06);
    border-radius: 10px;
}
.np-doc-item strong {
    display: block;
    color: var(--mo-navy);
    font-size: 0.92rem;
}
.np-doc-item span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--mo-muted);
}

.emp-stat-card {
    background: #fff;
    border: 1px solid rgba(11, 31, 58, 0.07);
    border-radius: 12px;
    padding: 0.95rem 1rem;
    box-shadow: 0 2px 8px rgba(11, 31, 58, 0.035);
    display: grid;
    gap: 0.25rem;
    transition: box-shadow .15s ease, transform .15s ease;
}
.emp-stat-card:hover {
    box-shadow: 0 8px 20px rgba(11, 31, 58, 0.07);
    transform: translateY(-1px);
}
.emp-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.emp-stat-card .emp-stat-label {
    color: var(--mo-muted);
    font-size: 0.82rem;
    font-weight: 500;
}
.emp-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--mo-teal-soft);
    color: var(--mo-teal);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.emp-stat-icon svg { width: 17px; height: 17px; }
.emp-stat-card .emp-stat-value {
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mo-navy);
    line-height: 1.15;
}
.emp-stat-card .emp-stat-value small {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mo-muted);
    margin-left: 0.25rem;
}
.emp-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
}
.emp-trend.is-up { color: var(--mo-success); }
.emp-trend.is-down { color: var(--mo-danger); }
.emp-trend.is-flat { color: var(--mo-muted); }

/* Panels */
.emp-panel {
    background: #fff;
    border: 1px solid rgba(11, 31, 58, 0.07);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(11, 31, 58, 0.035);
    overflow: hidden;
}
.emp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.05rem;
    border-bottom: 1px solid rgba(11, 31, 58, 0.06);
}
.emp-panel-head h3 {
    margin: 0;
    font-size: 0.98rem;
    color: var(--mo-navy);
}
.emp-panel-head p {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--mo-muted);
}
.emp-panel-body { padding: 1rem 1.05rem; }
.emp-panel-body.is-flush { padding: 0; }

/* Employer Create Job — full-width responsive grid */
.job-create-form {
    width: 100%;
    max-width: none;
}
.job-create-form .job-form-panel {
    margin-bottom: 1.15rem;
}
.job-create-form .job-form-grid {
    display: grid;
    gap: 0.95rem 1.15rem;
    align-items: start;
}
.job-create-form .job-form-grid .form-group {
    margin: 0;
}
.job-create-form .job-form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.job-create-form .job-form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.job-create-form .job-form-grid--loc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.job-create-form .job-form-grid--loc .form-group:last-child {
    grid-column: 1 / -1;
}
.job-create-form .job-form-span-2 {
    grid-column: 1 / -1;
}
.job-create-form .job-form-stack {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}
.job-create-form .job-submit-btn {
    min-height: 48px;
    width: 100%;
    max-width: 420px;
    font-weight: 700;
}
.job-create-form .job-form-actions .emp-panel-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}
.job-create-form .job-form-actions-hint {
    margin: 0;
    text-align: center;
}
.job-create-form .job-form-actions .btn-outline {
    align-self: center;
}
.job-create-form .job-highlight-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    cursor: pointer;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--mo-ink);
}
.job-create-form .job-highlight-check em {
    font-style: normal;
    color: var(--mo-muted);
}
.job-create-form .choice-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-height: 42px;
    align-items: center;
}
.job-create-form .emp-panel-body {
    padding: 1.15rem 1.25rem 1.25rem;
}

/* Employer network pages use full content width */
.emp-main > .network-main {
    width: 100%;
    max-width: none;
}

@media (max-width: 1100px) {
    .job-create-form .job-form-grid--3,
    .job-create-form .job-form-grid--loc {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .job-create-form .job-form-grid--2,
    .job-create-form .job-form-grid--3,
    .job-create-form .job-form-grid--loc {
        grid-template-columns: 1fr;
    }
    .job-create-form .job-form-grid--loc .form-group:last-child,
    .job-create-form .job-form-span-2 {
        grid-column: auto;
    }
    .job-create-form .job-submit-btn {
        max-width: none;
    }
}

.emp-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.9fr);
    gap: 0.85rem;
    margin-bottom: 1rem;
    align-items: stretch;
}
.emp-grid-2.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.emp-chart-wrap { position: relative; height: 240px; }
.emp-chart-wrap.is-empty {
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-radius: 10px;
    color: var(--mo-muted);
    font-size: 0.88rem;
    text-align: center;
    padding: 1rem;
}

.emp-empty-soft {
    display: grid;
    place-items: center;
    gap: 0.35rem;
    min-height: 220px;
    padding: 1.5rem 1rem;
    text-align: center;
}
.emp-empty-soft .emp-empty-ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(0, 168, 168, 0.1);
    color: var(--mo-teal);
    margin-bottom: 0.35rem;
}
.emp-empty-soft .emp-empty-ico svg { width: 22px; height: 22px; }
.emp-empty-soft h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--mo-navy);
}
.emp-empty-soft p {
    margin: 0;
    font-size: 0.84rem;
    color: var(--mo-muted);
    max-width: 240px;
}

.emp-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--mo-muted);
}
.emp-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.emp-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

/* Upcoming interviews */
.interview-list { display: grid; }
.interview-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--mo-border);
}
.interview-item:last-child { border-bottom: 0; }
.interview-date {
    background: var(--mo-teal-soft);
    color: var(--mo-navy);
    border-radius: 10px;
    text-align: center;
    padding: 0.35rem 0;
    line-height: 1.1;
}
.interview-date strong { display: block; font-size: 1.05rem; font-weight: 700; }
.interview-date span { font-size: 0.65rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mo-muted); }
.interview-info { min-width: 0; }
.interview-info strong {
    display: block;
    font-size: 0.9rem;
    color: var(--mo-navy);
}
.interview-info span {
    font-size: 0.79rem;
    color: var(--mo-muted);
}

/* Definition rows (organization status / subscription summary) */
.emp-deflist { display: grid; }
.emp-deflist > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.62rem 0;
    border-bottom: 1px dashed var(--mo-border);
    font-size: 0.86rem;
}
.emp-deflist > div:last-child { border-bottom: 0; }
.emp-deflist dt, .emp-deflist .k { color: var(--mo-muted); }
.emp-deflist dd, .emp-deflist .v {
    margin: 0;
    color: var(--mo-navy);
    font-weight: 600;
    text-align: right;
}

.emp-progress {
    height: 7px;
    border-radius: 99px;
    background: var(--mo-bg-soft);
    overflow: hidden;
    margin-top: 0.6rem;
}
.emp-progress i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--mo-teal);
}

/* Tabs */
.emp-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--mo-border);
    padding: 0 0.15rem;
    margin-bottom: 1.1rem;
}
.emp-tabs a {
    position: relative;
    padding: 0.6rem 0.85rem 0.8rem;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--mo-muted);
    white-space: nowrap;
}
.emp-tabs a:hover { color: var(--mo-navy); }
.emp-tabs a.is-active { color: var(--mo-navy); }
.emp-tabs a.is-active::after {
    content: '';
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--mo-teal);
}
.emp-tabs-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.emp-tab-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
    border-radius: 99px;
    background: var(--mo-teal);
    color: #fff;
    font-size: 0.65rem;
    line-height: 1;
}

/* Employer job detail — mobile parity actions */
.emp-job-hero {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.1rem;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
}
.emp-job-hero-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(13, 148, 136, 0.12);
    color: #0d9488;
}
.emp-job-hero-icon svg { width: 26px; height: 26px; }
.emp-job-hero-copy h2 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    color: var(--mo-navy);
}
.emp-job-hero-copy p {
    margin: 0 0 0.55rem;
    color: var(--mo-muted);
    font-size: 0.88rem;
}
.emp-job-reject-note {
    margin: 0.55rem 0 0;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
    font-size: 0.86rem;
}
.emp-job-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}
.emp-job-action-form { margin: 0; min-width: 0; }
.emp-job-action {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 76px;
    padding: 0.75rem 0.4rem;
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.emp-job-action svg { width: 22px; height: 22px; }
.emp-job-action.is-edit { background: #0d9488; }
.emp-job-action.is-pause { background: #eab308; color: #1e293b; }
.emp-job-action.is-close { background: #ef4444; }
.emp-job-action.is-repost { background: #3b82f6; }
.emp-job-action.is-delete { background: #f43f5e; }
.emp-job-action:hover { filter: brightness(0.96); color: inherit; text-decoration: none; }
.emp-job-action.is-pause:hover { color: #1e293b; }
.emp-job-specs .emp-deflist .k { min-width: 7.5rem; }
.emp-app-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
    align-items: center;
}
.emp-app-status-form { margin: 0; }
.emp-app-status-form .form-select {
    min-width: 9.5rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.8rem;
}
@media (max-width: 900px) {
    .emp-job-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .emp-job-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Employer Subscription Plans (Figma) ---------- */
.emp-sub-banner {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(0, 2fr) auto;
    gap: 1.25rem 1.5rem;
    align-items: center;
    background: linear-gradient(105deg, #0d8f8f 0%, #00a8a8 48%, #0b9a9a 100%);
    border-radius: 16px;
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.35rem;
    color: #fff;
    box-shadow: 0 12px 28px rgba(0, 120, 120, 0.22);
}
.emp-sub-banner-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
    margin-bottom: 0.45rem;
}
.emp-sub-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0.92rem;
    font-weight: 700;
}
.emp-sub-banner-badge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.emp-sub-banner-valid {
    margin: 0.55rem 0 0;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.95);
    opacity: 1;
}
.emp-sub-banner-valid strong {
    font-weight: 700;
    color: #fff;
}
.emp-sub-banner-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.emp-sub-banner-stats > div {
    display: grid;
    gap: 0.25rem;
    padding: 0 0.85rem;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.emp-sub-banner-stats > div:first-child { border-left: 0; padding-left: 0; }
.emp-sub-banner-stats span {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
}
.emp-sub-banner-stats strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}
.emp-sub-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #fff !important;
    color: var(--mo-navy) !important;
    border: 0 !important;
    border-radius: 10px;
    padding: 0.7rem 1.1rem;
    font-weight: 700;
    font-size: 0.88rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.emp-sub-upgrade:hover {
    background: #f4fbfb !important;
    color: var(--mo-navy) !important;
}
.emp-sub-upgrade svg { width: 18px; height: 18px; }

.emp-plan-history {
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 16px;
    padding: 0.35rem 1.15rem 1.15rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
}
.emp-plan-history-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1rem;
    padding: 0.65rem 0 0.85rem;
    border-bottom: 1px solid var(--mo-border);
    margin-bottom: 0.35rem;
}
.emp-plan-tabs {
    display: flex;
    gap: 0.15rem;
    flex-wrap: wrap;
}
.emp-plan-tab {
    position: relative;
    padding: 0.55rem 0.75rem 0.7rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mo-muted);
}
.emp-plan-tab:hover { color: var(--mo-navy); }
.emp-plan-tab.is-active { color: var(--mo-navy); }
.emp-plan-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0.55rem;
    right: 0.55rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--mo-teal);
}
.emp-plan-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.emp-plan-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: min(220px, 100%);
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--mo-border);
    border-radius: 10px;
    background: #fff;
}
.emp-plan-search svg {
    width: 16px;
    height: 16px;
    color: var(--mo-muted);
    flex-shrink: 0;
}
.emp-plan-search input {
    border: 0;
    outline: none;
    width: 100%;
    font: inherit;
    font-size: 0.86rem;
    background: transparent;
    color: var(--mo-navy);
}
.emp-plan-filters select {
    appearance: none;
    border: 1px solid var(--mo-border);
    border-radius: 10px;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.86rem;
    color: var(--mo-navy);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6b82' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0.7rem center / 12px no-repeat;
    cursor: pointer;
}
.emp-plan-clear {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mo-teal);
}
.emp-plan-table-wrap { overflow-x: auto; }
.emp-plan-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}
.emp-plan-table th {
    text-align: left;
    padding: 0.85rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mo-muted);
    border-bottom: 1px solid var(--mo-border);
    white-space: nowrap;
}
.emp-plan-table td {
    padding: 0.95rem 0.65rem;
    font-size: 0.88rem;
    color: var(--mo-navy);
    border-bottom: 1px solid rgba(11, 31, 58, 0.06);
    vertical-align: middle;
}
.emp-plan-table tbody tr:last-child td { border-bottom: 0; }
.emp-plan-table tbody tr:hover { background: rgba(0, 168, 168, 0.04); }
.emp-plan-table .is-center { text-align: center; }
.emp-plan-name { font-weight: 600; }
.emp-plan-invoice {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--mo-teal);
    background: rgba(0, 168, 168, 0.1);
    transition: background .15s ease;
}
.emp-plan-invoice:hover { background: rgba(0, 168, 168, 0.18); color: var(--mo-teal); }
.emp-plan-invoice svg { width: 18px; height: 18px; }
.emp-plan-invoice.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: rgba(11, 31, 58, 0.06);
    color: var(--mo-muted);
}
.emp-plan-invoice-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.emp-plan-paging {
    margin: 0.85rem 0 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--mo-muted);
}
.emp-plan-empty {
    text-align: center;
    padding: 2.5rem 1rem;
}
.emp-plan-empty h3 {
    margin: 0 0 0.35rem;
    color: var(--mo-navy);
    font-size: 1.05rem;
}
.emp-plan-empty p {
    margin: 0 0 1rem;
    color: var(--mo-muted);
    font-size: 0.9rem;
}
.emp-available-plans { margin-top: 0.5rem; }
.emp-available-head {
    margin-bottom: 1rem;
}
.emp-available-head h2 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    color: var(--mo-navy);
}
.emp-available-head p {
    margin: 0;
    color: var(--mo-muted);
    font-size: 0.9rem;
}

@media (max-width: 980px) {
    .emp-sub-banner {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }
    .emp-sub-banner-stats {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .emp-sub-banner-stats > div {
        border-left: 0;
        padding: 0.55rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }
    .emp-sub-banner-stats > div:first-child { border-top: 0; padding-top: 0; }
    .emp-sub-banner-action { justify-self: start; }
}

/* Toolbar over tables */
.table-toolbar {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 1rem;
}
.table-toolbar form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    min-width: 260px;
}
.table-toolbar .form-control,
.table-toolbar .form-select { min-width: 170px; }

/* Data table */
.data-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--mo-border);
    background: #fff;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
    font-size: 0.87rem;
}
.data-table th {
    text-align: left;
    padding: 0.8rem 1rem;
    background: var(--mo-bg-soft);
    color: var(--mo-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.data-table td {
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--mo-border);
    color: var(--mo-text);
    vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--mo-bg-soft); }
.data-table .cell-person {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}
.data-table .cell-person img,
.candidate-drawer-head .cell-person img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #EEF2F6;
}
.data-table .cell-title {
    color: var(--mo-navy);
    font-weight: 600;
}
.data-table .cell-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--mo-muted);
    font-weight: 400;
}
.data-table .cell-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
}

.table-footnote {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    font-size: 0.83rem;
    color: var(--mo-muted);
}

/* Status pills */
.pill-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--mo-bg-soft);
    color: var(--mo-muted);
}
.pill-status.is-active,
.pill-status.is-selected,
.pill-status.is-accepted { background: rgba(15, 159, 110, 0.12); color: var(--mo-success); }
.pill-status.is-paused,
.pill-status.is-pending,
.pill-status.is-under_review { background: rgba(217, 119, 6, 0.12); color: var(--mo-warning); }
.pill-status.is-closed,
.pill-status.is-rejected,
.pill-status.is-expired { background: rgba(225, 29, 72, 0.1); color: var(--mo-danger); }
.pill-status.is-new,
.pill-status.is-applied { background: rgba(0, 168, 168, 0.13); color: #067d7d; }
.pill-status.is-shortlisted,
.pill-status.is-interview_scheduled,
.pill-status.is-draft { background: rgba(11, 31, 58, 0.08); color: var(--mo-navy); }

/* Candidate / person cards used in community + dashboard strip */
.emp-people-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.emp-person-card {
    background: #fff;
    border: 1px solid rgba(11, 31, 58, 0.07);
    border-radius: 12px;
    padding: 1rem 0.9rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(11, 31, 58, 0.035);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
}
.emp-person-card svg {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    flex-shrink: 0;
}
.emp-person-card .emp-person-actions form {
    margin: 0;
    display: inline-flex;
}
.emp-person-avatar {
    width: 58px;
    height: 58px;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    background: #E8F1F8;
    color: var(--mo-navy);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.2rem;
    overflow: hidden;
}
.emp-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.emp-person-card h4 {
    margin: 0;
    font-size: 0.97rem;
    color: var(--mo-navy);
}
.emp-person-role {
    margin: 0;
    font-size: 0.82rem;
    color: var(--mo-teal);
    font-weight: 500;
}
.emp-person-loc {
    margin: 0;
    font-size: 0.79rem;
    color: var(--mo-muted);
}
.emp-person-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin: 0.35rem 0 0.65rem;
}
.emp-person-card .emp-person-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
    margin-top: auto;
}

/* Candidate detail drawer */
.candidate-drawer {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
}
.candidate-drawer.is-open { display: block; }
.candidate-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 58, 0.45);
}
.candidate-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 100%);
    background: #fff;
    overflow-y: auto;
    box-shadow: -12px 0 34px rgba(11, 31, 58, 0.18);
    padding: 1.35rem;
}
.candidate-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.candidate-drawer-head h3 {
    margin: 0 0 0.2rem;
    font-size: 1.1rem;
    color: var(--mo-navy);
}
.candidate-drawer-close {
    border: 0;
    background: var(--mo-bg-soft);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--mo-muted);
    font-size: 1.1rem;
    line-height: 1;
}
.candidate-drawer h4 {
    margin: 1.25rem 0 0.55rem;
    font-size: 0.9rem;
    color: var(--mo-navy);
}
.candidate-drawer p { font-size: 0.87rem; color: var(--mo-text); line-height: 1.55; }

.interview-schedule-box {
    margin-top: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(0, 168, 168, 0.28);
    border-radius: 12px;
    background: rgba(0, 168, 168, 0.05);
}
.interview-schedule-box h4 { margin-top: 0; }
.form-alert {
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 0.85rem;
}
.form-alert-error {
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.28);
    color: #b02a37;
}
.form-alert-list {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
}
.form-alert-list li { margin: 0.15rem 0; }
.candidate-drawer .form-control.is-invalid,
.candidate-drawer .form-select.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
    display: inline-flex;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--mo-bg-soft);
    border: 1px solid var(--mo-border);
    color: var(--mo-navy);
    font-size: 0.78rem;
    font-weight: 500;
}

@media (max-width: 1280px) {
    .emp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .emp-stats.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .emp-people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
    .emp-menu-toggle { display: flex; }
    .emp-backdrop { display: block; }
    .emp-shell {
        min-height: 100vh;
        min-height: 100dvh;
    }
    .emp-aside {
        top: 0;
        height: 100vh;
        height: 100dvh;
        width: min(280px, 86vw);
        border-radius: 0;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 8px 0 28px rgba(11, 31, 58, 0.25);
        z-index: 45;
    }
    body.emp-nav-open .emp-aside { transform: translateX(0); }
    body.emp-nav-open .emp-backdrop { display: block; }
    .emp-backdrop[hidden] { display: none !important; }
    body.emp-nav-open .emp-backdrop[hidden] { display: block !important; }
    .emp-main {
        margin-left: 0;
        padding: 1rem 1rem 2rem;
        padding-top: calc(0.85rem + 42px + 0.75rem);
    }
    .emp-appbar {
        padding-left: 0.95rem;
    }
    .emp-appbar-user .user-menu-meta {
        display: none;
    }
    .emp-grid-2, .emp-grid-2.is-even { grid-template-columns: 1fr; }
    .emp-people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .emp-topbar {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .emp-topbar-actions {
        width: 100%;
    }
    .emp-topbar-actions .btn {
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 720px) {
    .emp-stats,
    .emp-stats.cols-3,
    .emp-stats.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .np-doc-list { grid-template-columns: 1fr; }
    .np-hero { flex-direction: column; }
    .np-hero-main { width: 100%; }
    .network-card-actions { width: 100%; }
    .network-card-actions .btn,
    .network-card-actions form { flex: 1 1 auto; }
    .np-member-row { flex-wrap: wrap; }
    .np-member-row .btn { margin-left: auto; }
    .emp-people-grid { grid-template-columns: 1fr; }
    .emp-welcome h2,
    .emp-appbar-welcome h2 { font-size: 1.05rem; }
    .emp-main { padding: 0.85rem 0.85rem 1.75rem; padding-top: calc(0.75rem + 42px + 0.65rem); }
    .emp-appbar-welcome p { display: none; }
    .table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .table-toolbar form {
        min-width: 0;
        width: 100%;
    }
    .table-toolbar .form-control,
    .table-toolbar .form-select {
        min-width: 0;
        flex: 1 1 auto;
        width: 100%;
    }
    .table-toolbar .btn {
        width: 100%;
    }
    .data-table {
        min-width: 640px;
    }
    .emp-plan-table {
        min-width: 560px;
    }
    .emp-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 0.35rem;
        padding-bottom: 0.25rem;
    }
    .emp-tabs a,
    .emp-tabs .emp-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}
@media (max-width: 520px) {
    .emp-stats,
    .emp-stats.cols-3,
    .emp-stats.cols-5 { grid-template-columns: 1fr; }
    .emp-stat { padding: 0.8rem 0.85rem; }
    .np-section.surface { border-left-width: 2px; }
    .data-table {
        min-width: 520px;
        font-size: 0.8rem;
    }
    .data-table th,
    .data-table td {
        padding: 0.65rem 0.7rem;
    }
    .emp-panel-head {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }
}

/* Site-wide overflow safety */
.site-body,
.emp-body {
    overflow-x: clip;
}
.emp-main,
.network-main,
.container {
    min-width: 0;
}
img, svg, video, iframe {
    max-width: 100%;
}
@media (max-width: 820px) {
    .site-header .user-menu-meta { display: none; }
    .hero-search,
    .jobs-search-bar,
    .network-search {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-search .btn,
    .jobs-search-bar .btn,
    .network-search .btn {
        width: 100%;
    }
}
@media (max-width: 640px) {
    .auth-card,
    .surface,
    .emp-panel {
        border-radius: 12px;
    }
    .btn-block-sm {
        width: 100%;
        justify-content: center;
    }
    .form-group,
    .mo-field {
        min-width: 0;
    }
}

/* =====================================================================
   Seeker public-layout pages
   ===================================================================== */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--mo-muted);
    margin-bottom: 0.75rem;
}
.breadcrumb a { color: var(--mo-muted); }
.breadcrumb a:hover { color: var(--mo-teal); }
.breadcrumb span[aria-current] { color: var(--mo-navy); font-weight: 600; }
.breadcrumb .sep { color: var(--mo-border); }

.seeker-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.35rem;
}
.page-title-xl {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    color: var(--mo-navy);
    line-height: 1.15;
}
.page-title-xl span { color: var(--mo-teal); }
.seeker-head p {
    margin: 0.35rem 0 0;
    color: var(--mo-muted);
    font-size: 0.9rem;
}

.seeker-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.seeker-layout.is-wide { grid-template-columns: 280px minmax(0, 1fr); }
.seeker-layout.is-alerts { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); }
.seeker-layout.is-split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* Manage Profile side tabs */
.profile-tabs {
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    padding: 1.1rem;
    position: sticky;
    top: calc(var(--mo-header-h) + 1rem);
    box-shadow: var(--mo-shadow-sm);
}
.profile-tabs h3 {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    color: var(--mo-navy);
}
.profile-tabs nav { display: grid; gap: 0.25rem; }
.profile-tabs button {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    padding: 0.68rem 0.75rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mo-text);
    font: inherit;
    font-size: 0.87rem;
    font-weight: 500;
    cursor: pointer;
}
.profile-tabs button svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--mo-muted); }
.profile-tabs button:hover { background: var(--mo-bg-soft); color: var(--mo-navy); }
.profile-tabs button.is-active {
    background: var(--mo-navy);
    color: #fff;
}
.profile-tabs button.is-active svg { color: #fff; }

.profile-panel {
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    padding: 1.35rem;
    box-shadow: var(--mo-shadow-sm);
}
.profile-panel > h2 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    color: var(--mo-navy);
}
.profile-panel > .panel-sub {
    margin: 0 0 1.25rem;
    font-size: 0.86rem;
    color: var(--mo-muted);
}
.profile-panel-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1.35rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--mo-border);
}

/* Gender / choice pills */
.choice-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.choice-pills label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--mo-border);
    border-radius: 999px;
    font-size: 0.86rem;
    cursor: pointer;
    background: #fff;
    color: var(--mo-text);
}
.choice-pills input { accent-color: var(--mo-teal); }
.choice-pills label:has(input:checked) {
    border-color: var(--mo-teal);
    background: var(--mo-teal-soft);
    color: var(--mo-navy);
    font-weight: 600;
}

/* Filter chips row */
.filter-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
}
.filter-chips a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--mo-border);
    border-radius: 999px;
    background: #fff;
    color: var(--mo-text);
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
}
.filter-chips a:hover { border-color: var(--mo-teal); color: var(--mo-navy); }
.filter-chips a.is-active {
    background: var(--mo-navy);
    border-color: var(--mo-navy);
    color: #fff;
}

.seeker-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) auto;
    gap: 0.65rem;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    padding: 0.7rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--mo-shadow-sm);
    align-items: center;
}

/* Application cards */
.app-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    padding: 1.05rem 1.15rem;
    margin-bottom: 0.85rem;
    box-shadow: var(--mo-shadow-sm);
}
.app-card:hover { border-color: rgba(0, 168, 168, 0.35); }
.app-card-logo {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--mo-bg-soft);
    color: var(--mo-navy);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    overflow: hidden;
}
.app-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.app-card-info { min-width: 0; }
.app-card-info h3 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    color: var(--mo-navy);
}
.app-card-info h3 a { color: inherit; }
.app-card-info h3 a:hover { color: var(--mo-teal); }
.app-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    font-size: 0.82rem;
    color: var(--mo-muted);
}
.app-card-side {
    display: grid;
    gap: 0.5rem;
    justify-items: end;
}

/* Application timeline */
.timeline { display: grid; gap: 0; padding-left: 0.35rem; }
.timeline-item {
    position: relative;
    padding: 0 0 1.35rem 1.75rem;
    border-left: 2px solid var(--mo-border);
}
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--mo-border);
}
.timeline-item.is-done { border-left-color: var(--mo-teal); }
.timeline-item.is-done::before { background: var(--mo-teal); border-color: var(--mo-teal); }
.timeline-item.is-current::before { border-color: var(--mo-teal); box-shadow: 0 0 0 4px var(--mo-teal-soft); }
.timeline-item.is-rejected { border-left-color: var(--mo-danger); }
.timeline-item.is-rejected::before { background: var(--mo-danger); border-color: var(--mo-danger); }
.timeline-item strong {
    display: block;
    font-size: 0.9rem;
    color: var(--mo-navy);
    line-height: 1.2;
}
.timeline-item span {
    font-size: 0.8rem;
    color: var(--mo-muted);
}

.status-banner {
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.15rem;
    border: 1px solid var(--mo-border);
    background: var(--mo-bg-soft);
}
.status-banner strong {
    display: block;
    font-size: 1rem;
    color: var(--mo-navy);
    margin-bottom: 0.2rem;
}
.status-banner p { margin: 0; font-size: 0.86rem; color: var(--mo-muted); }
.status-banner.is-selected { background: rgba(15, 159, 110, 0.08); border-color: rgba(15, 159, 110, 0.28); }
.status-banner.is-rejected { background: rgba(225, 29, 72, 0.06); border-color: rgba(225, 29, 72, 0.24); }

/* Filter side panel (saved jobs) */
.filter-panel {
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 14px;
    padding: 1.15rem;
    position: sticky;
    top: calc(var(--mo-header-h) + 1rem);
    box-shadow: var(--mo-shadow-sm);
}
.filter-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
}
.filter-panel-head h3 { margin: 0; font-size: 0.98rem; color: var(--mo-navy); }
.filter-group { border-top: 1px solid var(--mo-border); padding: 0.9rem 0; }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group > strong {
    display: block;
    font-size: 0.85rem;
    color: var(--mo-navy);
    margin-bottom: 0.55rem;
}
.filter-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
    color: var(--mo-text);
    padding: 0.25rem 0;
    cursor: pointer;
}
.filter-group input[type="checkbox"],
.filter-group input[type="radio"] { accent-color: var(--mo-teal); }

/* Job alert rows */
.alert-day {
    margin: 1.5rem 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mo-navy);
    text-transform: capitalize;
}
.alert-day:first-child { margin-top: 0; }
.alert-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.65rem;
}
.alert-row.is-new { border-left: 3px solid var(--mo-teal); }
.alert-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--mo-teal-soft);
    color: var(--mo-teal);
    display: grid;
    place-items: center;
}
.alert-icon svg { width: 18px; height: 18px; }
.alert-body { min-width: 0; }
.alert-body strong {
    display: block;
    font-size: 0.9rem;
    color: var(--mo-navy);
}
.alert-body p {
    margin: 0.15rem 0 0;
    font-size: 0.83rem;
    color: var(--mo-muted);
}
.alert-time {
    font-size: 0.76rem;
    color: var(--mo-muted);
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .seeker-layout,
    .seeker-layout.is-wide,
    .seeker-layout.is-alerts,
    .seeker-layout.is-split { grid-template-columns: 1fr; }
    .profile-tabs,
    .filter-panel { position: static; }
    .profile-tabs nav { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
    .seeker-toolbar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .profile-tabs nav { grid-template-columns: 1fr; }
    .seeker-toolbar { grid-template-columns: 1fr; }
    .app-card { grid-template-columns: 44px minmax(0, 1fr); }
    .app-card-side { grid-column: 1 / -1; justify-items: start; }
    .alert-row { grid-template-columns: 36px minmax(0, 1fr); }
    .alert-time { grid-column: 1 / -1; }
}

/* -- Share job + call actions ----------------------------- */
.share-job {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mo-border);
}
.share-job-label {
    margin: 0 0 .55rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--mo-muted, #64748b);
}
.share-job-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.share-job-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 1 1 calc(50% - .25rem);
    justify-content: center;
    min-height: 40px;
}
.share-job-actions .btn[hidden] {
    display: none !important;
}
.share-job-actions .js-share-copy {
    flex: 1 1 100%;
}
.share-job-actions svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.share-job-actions .js-share-copy.is-copied {
    border-color: var(--mo-teal, #00A8A8);
    color: var(--mo-teal, #00A8A8);
    background: rgba(0, 168, 168, 0.08);
}
.btn-call {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.btn-call svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.emp-person-phone {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: .35rem 0 .1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--mo-teal, #0f766e);
    text-decoration: none;
}
.emp-person-phone:hover { text-decoration: underline; }
.emp-person-contact-wrap {
    margin-top: 0.45rem;
}
.btn-outline.is-danger {
    border-color: #fca5a5;
    color: #b91c1c;
}
.btn-outline.is-danger:hover {
    background: #fee2e2;
    border-color: #f87171;
    color: #991b1b;
}
.alert-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
}
.notif-btn { position: relative; }
.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.emp-nav-count {
    margin-left: auto;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.doc-upload-form {
    background: var(--mo-bg-soft, #f8fafc);
    border: 1px solid var(--mo-border);
    border-radius: 12px;
    padding: 1.1rem;
    margin-bottom: 1.35rem;
}
.doc-upload-form .form-group:last-of-type { margin-bottom: .9rem; }

/* Checkout + plan comparison */
.checkout-page {
    position: relative;
    padding: 0.85rem 0 2rem;
    background:
        linear-gradient(180deg, rgba(230, 247, 247, 0.55) 0%, rgba(247, 250, 252, 0.15) 42%, #fff 100%),
        url('../img/hero-pattern.svg') center top / 420px repeat;
}
.checkout-container { position: relative; z-index: 1; }

.checkout-stage {
    max-width: 960px;
    margin: 0.2rem auto 0;
}

.checkout-banner {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    min-height: 140px;
    margin-bottom: 1rem;
    border: 1px solid rgba(11, 31, 58, 0.08);
    box-shadow: var(--mo-shadow-sm);
    background: #0B1F3A;
}
.checkout-banner-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center 28%;
    display: block;
    opacity: 0.9;
}
.checkout-banner-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 21, 38, 0.82) 0%, rgba(7, 21, 38, 0.4) 55%, rgba(7, 21, 38, 0.12) 100%);
}
.checkout-banner-copy {
    position: absolute;
    left: 1.1rem;
    bottom: 0.9rem;
    right: 1.1rem;
    color: #fff;
    z-index: 1;
}
.checkout-banner-kicker {
    display: inline-block;
    margin-bottom: 0.25rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 168, 168, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.checkout-banner-copy strong {
    display: block;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.25;
    font-weight: 750;
    max-width: 22ch;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.checkout-summary-card,
.checkout-pay-card {
    background: #fff;
    border: 1px solid var(--mo-border);
    border-radius: 16px;
    padding: 1.1rem 1.15rem;
    box-shadow: 0 8px 22px rgba(11, 31, 58, 0.05);
}

.checkout-plan-visual {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}
.checkout-plan-visual img {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}
.checkout-plan-visual h2 {
    margin: 0.15rem 0 0;
    font-size: 1.2rem;
    color: var(--mo-navy);
    line-height: 1.25;
}

.checkout-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(11, 31, 58, 0.08);
    color: var(--mo-navy);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.checkout-cycle {
    margin: 0.2rem 0 0;
    color: var(--mo-teal);
    font-weight: 650;
    font-size: 0.86rem;
}

.checkout-photo-strip {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.55rem;
    margin-bottom: 0.75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(230, 247, 247, 0.95), #fff);
    border: 1px solid rgba(0, 168, 168, 0.16);
}
.checkout-photo-strip img {
    width: 76px;
    height: 58px;
    object-fit: cover;
    border-radius: 9px;
}
.checkout-photo-strip strong {
    display: block;
    font-size: 0.84rem;
    color: var(--mo-navy);
    margin-bottom: 0.1rem;
}
.checkout-photo-strip span {
    display: block;
    font-size: 0.76rem;
    color: var(--mo-muted);
    line-height: 1.35;
}

.checkout-meta {
    margin: 0;
    display: grid;
    gap: 0.5rem;
}
.checkout-meta > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(11, 31, 58, 0.08);
}
.checkout-meta dt {
    margin: 0;
    color: var(--mo-muted);
    font-size: 0.82rem;
}
.checkout-meta dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--mo-text);
    font-size: 0.86rem;
    word-break: break-word;
}
.checkout-order-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem !important;
    font-weight: 550 !important;
}

.checkout-wrap { max-width: 960px; margin: 0 auto; }
.checkout-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.85rem 0 0;
    padding: .75rem .9rem;
    border-radius: 11px;
    background: var(--mo-teal-soft);
}
.checkout-total span { font-size: .84rem; color: var(--mo-navy); font-weight: 600; }
.checkout-total strong { font-size: 1.2rem; color: var(--mo-navy); }

.checkout-pay-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    margin-bottom: 0.85rem;
}
.checkout-pay-thumb {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(11, 31, 58, 0.08);
}
.checkout-pay-card h3 {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    color: var(--mo-navy);
}
.checkout-pay-copy {
    margin: 0;
    color: var(--mo-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}
.checkout-pay-copy strong { color: var(--mo-navy); }

.checkout-trust {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
.checkout-trust li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    padding: 0.75rem 0.4rem 0.7rem;
    border-radius: 12px;
    background: #F3F8FA;
    border: 1px solid rgba(11, 31, 58, 0.06);
}
.checkout-trust-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #00A8A8 0%, #0B1F3A 120%);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(0, 168, 168, 0.22);
}
.checkout-trust-ico svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    color: #fff;
    stroke-width: 2.25;
}
.checkout-trust strong {
    display: block;
    font-size: 0.84rem;
    color: var(--mo-navy);
    line-height: 1.15;
    font-weight: 700;
}
.checkout-trust li > div span {
    display: block;
    font-size: 0.74rem;
    color: var(--mo-muted);
    margin-top: 0.1rem;
    line-height: 1.2;
}

.checkout-secure {
    margin: 0.55rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--mo-muted);
}
.checkout-cancel { margin-top: 0.55rem; }
.checkout-cancel .btn { padding-top: 0.65rem; padding-bottom: 0.65rem; }

@media (max-width: 820px) {
    .checkout-layout {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }
    .checkout-banner-img { height: 130px; }
    .checkout-banner-copy strong { max-width: none; }
}

@media (max-width: 520px) {
    .checkout-page { padding-top: 0.5rem; }
    .checkout-trust {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .checkout-trust li {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 0.7rem;
        padding: 0.65rem 0.75rem;
    }
    .checkout-photo-strip {
        grid-template-columns: 64px 1fr;
    }
    .checkout-photo-strip img {
        width: 64px;
        height: 52px;
    }
}

.plan-buy { display: grid; gap: .5rem; }
.plan-compare { margin-top: 2.25rem; }
.plan-compare-head h2 { font-size: 1.1rem; color: var(--mo-navy); margin: 0 0 .25rem; }
.plan-compare-head p { margin: 0 0 1rem; font-size: .86rem; color: var(--mo-muted); }
.plan-compare-table th, .plan-compare-table td { text-align: center; }
.plan-compare-table th:first-child, .plan-compare-table td:first-child { text-align: left; }
.cmp-tick { width: 17px; height: 17px; color: var(--mo-teal); }
.cmp-cross { color: var(--mo-muted); }
.apply-fee-note {
    margin-bottom: .9rem;
    padding: .7rem .85rem;
    border-radius: 10px;
    background: var(--mo-teal-soft);
    font-size: .85rem;
    color: var(--mo-navy);
}
.apply-fee-note span {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    color: var(--mo-muted);
}

/* Profile picture upload */
.avatar-upload {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--mo-border);
}
.avatar-upload-preview {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--mo-teal-soft);
    color: var(--mo-navy);
    font-size: 1.6rem;
    font-weight: 700;
}
.avatar-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.avatar-upload-actions .form-hint { flex-basis: 100%; }
.user-avatar { overflow: hidden; }
.user-avatar img,
.mo-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ---------- Continue as Employer ---------- */
.auth-page.auth-continue-as .auth-hero {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100vh;
}
.auth-card.auth-card-continue {
    width: min(100%, 640px);
    padding: 1.75rem 1.65rem 1.5rem;
}
.continue-as-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.15rem;
}
.continue-as-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(145deg, #e6f7f6, #d8f0ef);
    color: var(--mo-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.continue-as-badge svg { width: 22px; height: 22px; }
.continue-as-head h1 {
    margin: 0 0 0.3rem;
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    letter-spacing: -0.02em;
    color: var(--mo-navy);
}
.continue-as-head .auth-sub {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #64748b;
}
.continue-as-note {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    margin-bottom: 1.35rem;
    border-radius: 12px;
    background: #f0f9f8;
    border: 1px solid #cceceb;
    color: #0f4c4c;
}
.continue-as-note svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--mo-teal);
}
.continue-as-note p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
}
.continue-as-section {
    margin-bottom: 1.35rem;
    padding: 1.15rem 1.1rem 0.35rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e8eef5;
}
.continue-as-section-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}
.continue-as-section-head span {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--mo-navy);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.continue-as-section-head h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mo-navy);
    letter-spacing: -0.01em;
}
.continue-as-form .form-group {
    margin-bottom: 1.05rem;
    min-width: 0;
}
.continue-as-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
.continue-as-form .form-row > .form-group {
    width: 100%;
}
.continue-as-form .form-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.86rem;
    color: #334155;
}
.continue-as-form .optional-tag {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    background: #e2e8f0;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
}
.continue-as-form .form-control,
.continue-as-form .form-select {
    min-height: 46px;
    border-radius: 12px;
}
.continue-as-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.35rem;
    padding-top: 1.15rem;
    border-top: 1px solid #e8eef5;
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), #fff 35%);
    padding-bottom: 0.25rem;
    z-index: 2;
}
.continue-as-back {
    color: #64748b !important;
    font-weight: 600;
    padding: 0.7rem 1rem;
}
.continue-as-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.35rem;
    font-weight: 700;
    border-radius: 12px;
}
.continue-as-submit svg {
    width: 18px;
    height: 18px;
}
@media (max-width: 720px) {
    .auth-page.auth-continue-as .auth-hero { position: static; min-height: 0; }
    .continue-as-form .form-row { grid-template-columns: 1fr; gap: 0; }
    .continue-as-actions { flex-direction: column-reverse; align-items: stretch; }
    .continue-as-submit,
    .continue-as-back { width: 100%; justify-content: center; text-align: center; }
    .auth-card.auth-card-continue { padding: 1.25rem 1rem 1.25rem; }
}

/* ---------- Contact Us page ---------- */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr);
    gap: 1.5rem;
    align-items: start;
}
.contact-info h2,
.contact-form-card h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--mo-navy);
}
.contact-info-lead {
    margin: 0 0 1.25rem;
    color: var(--mo-muted);
    font-size: 0.95rem;
}
.contact-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.contact-info-list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.contact-info-list strong {
    display: block;
    font-size: 0.78rem;
    color: var(--mo-muted);
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.contact-info-list span,
.contact-info-list a {
    color: var(--mo-navy);
    font-weight: 600;
    word-break: break-word;
}
.contact-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--mo-teal-soft-2, #e7f7f6);
    color: var(--mo-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-ico svg { width: 18px; height: 18px; }
.contact-form .form-group { margin-bottom: 1rem; }

/* FAQ page — full question text, wrap, no ellipsis */
.faq-page {
    max-width: 860px;
}
.faq-item {
    padding: 1rem 1.2rem;
    margin-bottom: .75rem;
}
.faq-question {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    font-weight: 700;
    color: var(--mo-navy, #0B1F3A);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    line-height: 1.45;
}
.faq-badge {
    flex-shrink: 0;
    margin-top: .15rem;
}
.faq-answer {
    margin-top: .85rem;
    color: var(--mo-text);
    line-height: 1.7;
    border-top: 1px solid var(--mo-border);
    padding-top: .85rem;
    white-space: normal;
    word-break: break-word;
}
.contact-form .req { color: #dc2626; }
@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; }
}

/* Seeker / portal plans — entitlements + invoice */
.plan-status-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.9fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.plan-status-card h3,
.plan-invoice-card h3,
.plan-invoice-history h3 {
    margin: 0 0 0.55rem;
    font-size: 1.05rem;
    color: var(--mo-navy);
}
.plan-invoice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.plan-invoice-head h3 { margin: 0; }
.plan-invoice-no {
    margin: 0 0 0.75rem;
    font-weight: 800;
    color: var(--mo-navy);
    letter-spacing: 0.01em;
}
.plan-invoice-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0 0 0.95rem;
}
.plan-invoice-meta dt {
    font-size: 0.72rem;
    color: var(--mo-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.plan-invoice-meta dd {
    margin: 0.15rem 0 0;
    font-weight: 700;
    color: var(--mo-navy);
    font-size: 0.88rem;
}
.plan-invoice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.plan-invoice-history { margin-bottom: 1.25rem; }
.plan-invoice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}
.plan-invoice-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    background: #F5F9FB;
    border: 1px solid rgba(11, 31, 58, 0.06);
    border-radius: 12px;
}
.plan-invoice-list strong {
    display: block;
    color: var(--mo-navy);
    font-size: 0.9rem;
}
.plan-invoice-list span {
    display: block;
    margin-top: 0.15rem;
    color: var(--mo-muted);
    font-size: 0.8rem;
}
@media (max-width: 820px) {
    .plan-status-grid { grid-template-columns: 1fr; }
    .plan-invoice-meta { grid-template-columns: 1fr 1fr; }
    .plan-invoice-list li {
        flex-direction: column;
        align-items: stretch;
    }
    .plan-invoice-list .plan-invoice-actions .btn { flex: 1; justify-content: center; }
}

/* Contact view modal */
body.mo-contact-modal-open { overflow: hidden; }
.mo-contact-modal[hidden] { display: none !important; }
.mo-contact-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mo-contact-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}
.mo-contact-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--mo-border, #e5ebf0);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
    padding: 18px 18px 16px;
}
.mo-contact-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mo-contact-modal-head h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--mo-ink, #0f172a);
}
.mo-contact-modal-x {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}
.mo-contact-modal-sub {
    margin: 4px 0 14px;
    font-size: 0.9rem;
    color: #64748b;
}
.mo-contact-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--mo-border, #e5ebf0);
    border-radius: 10px;
    margin-bottom: 8px;
    background: #f8fafc;
}
.mo-contact-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mo-contact-value {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--mo-teal, #00a8a8);
    text-decoration: none;
    word-break: break-all;
}
.mo-contact-value[data-empty="1"] {
    color: #94a3b8;
    font-weight: 600;
}
.mo-contact-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    flex-wrap: wrap;
}
.mo-contact-modal-locked {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.mo-contact-modal-locked[hidden],
.mo-contact-modal-body[hidden],
.mo-contact-modal-actions[hidden],
.mo-contact-modal-hint[hidden],
#moContactCallBtn[hidden] {
    display: none !important;
}
.mo-contact-modal-hint {
    margin: 10px 0 0;
    font-size: 0.82rem;
}

/* =========================================================
   Mobile-first overflow + shell polish (phones ~390px)
   ========================================================= */
.portal-shell,
.portal-main,
.site-main,
.page-hero,
.section,
.section-sm {
    max-width: 100%;
    min-width: 0;
}
.portal-main .container {
    max-width: 100%;
    padding-inline: 0;
}
.portal-main .page-hero {
    margin: 0 0 1rem;
    padding: 0;
    border-bottom: 0;
    background: transparent;
}
.portal-page-head,
.portal-page-head > div,
.plan-status-card,
.plan-invoice-card,
.pricing-card,
.surface,
.form-hint,
.page-hero p,
.page-hero h1 {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.portal-plans {
    width: 100%;
    max-width: 1100px;
}
.chip,
.chip-row .chip {
    max-width: 100%;
    white-space: normal;
}
.user-dropdown {
    max-width: min(280px, calc(100vw - 1.25rem));
}

@media (max-width: 820px) {
    :root {
        --mo-container-pad: 12px;
        --mo-header-h: 64px;
    }

    .site-header-inner {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 0.5rem;
    }
    .site-logo img { max-height: 32px; }
    .site-header-actions { min-width: 0; gap: 0.35rem; }
    .user-menu-btn {
        max-width: 100%;
        padding-inline: 0.45rem;
    }

    .portal-aside {
        max-width: 100%;
        overflow: hidden;
    }
    .portal-nav {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0.35rem;
    }
    .portal-main {
        padding: 1rem 0.85rem 2rem;
        width: 100%;
        overflow-x: clip;
    }
    .portal-page-head h1 {
        font-size: 1.2rem;
        line-height: 1.3;
    }
    .portal-page-head p {
        font-size: 0.88rem;
    }

    .page-hero h1,
    .page-title-xl {
        font-size: clamp(1.25rem, 6vw, 1.55rem);
    }
    .page-hero p,
    .seeker-head p {
        font-size: 0.88rem;
    }

    .jobs-search-bar,
    .network-search,
    .hero-search {
        display: grid !important;
        grid-template-columns: 1fr !important;
        overflow: visible;
    }
    .jobs-search-actions,
    .network-search-actions {
        width: 100%;
    }
    .jobs-search-actions .btn,
    .network-search-actions .btn,
    .hero-search .hero-search-btn {
        width: 100%;
        min-width: 0;
    }

    .mn-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 1rem;
        max-width: 100%;
    }
    .mn-tab { flex: 0 0 auto; white-space: nowrap; }

    .plan-status-grid,
    .pricing-grid {
        grid-template-columns: 1fr !important;
    }
    .plan-invoice-meta {
        grid-template-columns: 1fr !important;
    }
    .plan-invoice-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .data-table-wrap,
    .table-wrap,
    .mo-table-wrap,
    .emp-plan-table-wrap,
    .plan-compare-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .table-toolbar form {
        width: 100%;
        min-width: 0;
    }
    .table-toolbar .form-control,
    .table-toolbar .form-select {
        min-width: 0;
        width: 100%;
    }

    .seeker-head {
        align-items: stretch;
    }
    .seeker-head .btn {
        width: 100%;
        justify-content: center;
    }
    .alert-row {
        grid-template-columns: 36px minmax(0, 1fr) !important;
    }
    .alert-row > div:last-child {
        grid-column: 1 / -1;
        width: 100%;
        flex-wrap: wrap;
    }
    .filter-chips {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
    }
    .filter-chips a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    :root { --mo-container-pad: 10px; }

    .surface-pad,
    .pricing-card,
    .profile-panel,
    .emp-panel-body {
        padding: 0.9rem !important;
    }
    .portal-main {
        padding: 0.85rem 0.7rem 1.75rem;
    }
    .pricing-price {
        font-size: 1.55rem;
    }
    .footer-grid {
        grid-template-columns: 1fr !important;
    }
    .stats-strip-grid,
    .stats-row,
    .job-grid,
    .category-grid,
    .network-grid {
        grid-template-columns: 1fr !important;
    }
    .auth-btns .btn,
    .btn-block,
    .plan-buy .btn {
        width: 100%;
    }
}