/* ═══════════════════════════════════════ */
/* GROUPSMIX — Jobs Section Styles v2.0   */
/* Premium Production Design              */
/* ═══════════════════════════════════════ */

/* ── Fade In Animation (CSS only, lightweight) ── */
@keyframes jobsFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Jobs Hero ──────────────────────────── */
.jobs-hero {
    text-align: center;
    padding: var(--space-8) 0 var(--space-6);
    animation: jobsFadeIn 0.4s ease;
}

.jobs-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: var(--space-3);
}

.jobs-hero__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    margin-bottom: var(--space-2);
}

.jobs-hero__subtitle {
    color: var(--text-secondary);
    margin-top: var(--space-2);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

/* ── Stats Row ──────────────────────────── */
.jobs-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}

.jobs-stats__item {
    text-align: center;
}

.jobs-stats__value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-extrabold);
    color: var(--accent-primary);
}

.jobs-stats__label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
}

/* ═══════════════════════════════════════ */
/* SMART SEARCH SECTION                    */
/* ═══════════════════════════════════════ */
.jobs-search-section {
    margin-bottom: var(--space-6);
    animation: jobsFadeIn 0.4s ease 0.1s both;
}

.jobs-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-full);
    height: 52px;
    padding: 0 var(--space-4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jobs-search-bar:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
}

.jobs-search-bar__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--text-tertiary);
    margin-right: var(--space-3);
}

.jobs-search-bar__icon svg {
    width: 20px;
    height: 20px;
}

.jobs-search-bar__input {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    font-size: var(--text-base);
    color: var(--text-primary);
    outline: none;
}

.jobs-search-bar__input::placeholder {
    color: var(--text-muted);
}

.jobs-search-bar__ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-bold);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
    color: var(--accent-tertiary);
    border: 1px solid rgba(139, 92, 246, 0.25);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ── AI Suggestions ────────────────────── */
.jobs-ai-suggestions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: 0 var(--space-2);
    flex-wrap: wrap;
}

.jobs-ai-suggestions__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--accent-tertiary);
    font-weight: var(--font-semibold);
    white-space: nowrap;
}

.jobs-ai-suggestions__list {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.jobs-ai-suggestion {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.jobs-ai-suggestion:hover {
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* ═══════════════════════════════════════ */
/* FILTER CHIPS                            */
/* ═══════════════════════════════════════ */
.jobs-filter-chips {
    margin-top: var(--space-4);
    animation: jobsFadeIn 0.4s ease 0.15s both;
}

.jobs-filter-group {
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.jobs-filter-group__label {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .06em;
    min-width: 65px;
    flex-shrink: 0;
}

.jobs-filter-group__chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.jobs-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.jobs-chip:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.jobs-chip--active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

.jobs-chip--active:hover {
    background: var(--accent-primary-hover);
    color: #fff;
    border-color: var(--accent-primary-hover);
}

.jobs-filter-chips__post-btn {
    margin-top: var(--space-3);
}

/* ── Toggle & Collapsible Filters ─────── */
.jobs-filter-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.jobs-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.jobs-filter-toggle:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.jobs-filter-toggle--open {
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.jobs-filter-toggle__arrow {
    transition: transform 0.25s ease;
}

.jobs-filter-toggle--open .jobs-filter-toggle__arrow {
    transform: rotate(180deg);
}

.jobs-filter-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    color: #fff;
    font-size: 11px;
    font-weight: var(--font-bold);
    line-height: 1;
}

.jobs-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-medium);
    background: transparent;
    color: var(--text-tertiary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.jobs-filter-clear:hover {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.08);
}

.jobs-extra-filters {
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--border-primary);
    margin-bottom: var(--space-1);
    animation: jobsSlideDown 0.25s ease both;
}

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

/* ═══════════════════════════════════════ */
/* SMART MATCH BANNER                      */
/* ═══════════════════════════════════════ */
.jobs-match-banner {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.jobs-match-banner__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--accent-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    flex-shrink: 0;
    color: var(--accent-primary);
}

.jobs-match-banner__text {
    flex: 1;
}

.jobs-match-banner__title {
    font-weight: var(--font-semibold);
    font-size: var(--text-md);
    margin-bottom: var(--space-1);
}

.jobs-match-banner__desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════ */
/* SKILLS PROFILE BANNER                   */
/* ═══════════════════════════════════════ */
.jobs-skills-banner {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.jobs-skills-banner__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(0, 206, 201, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--success);
}

.jobs-skills-banner__icon svg {
    width: 24px;
    height: 24px;
}

.jobs-skills-banner__text {
    flex: 1;
}

.jobs-skills-banner__title {
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-1);
}

.jobs-skills-banner__desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════ */
/* JOB LIST CONTAINER                      */
/* ═══════════════════════════════════════ */
.job-list {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: jobsFadeIn 0.4s ease 0.2s both;
}

.job-list__section-title {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
}

/* ═══════════════════════════════════════ */
/* JOB CARD (List View)                    */
/* ═══════════════════════════════════════ */
.job-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1.5px solid var(--border-secondary, rgba(128, 128, 128, 0.18));
    transition: background 0.2s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
}

.job-card:last-child {
    border-bottom: none;
}

.job-card:hover {
    background: var(--bg-card-hover, rgba(108, 92, 231, 0.03));
}

.job-card--promoted {
    background: rgba(253, 203, 110, 0.03);
    border-left: 3px solid var(--accent-gold);
}

.job-card--promoted:hover {
    background: rgba(253, 203, 110, 0.06);
}

/* ── Job Card Icon ──────────────────────── */
.job-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.job-card__icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent-primary);
}

.job-card__icon--design { background: rgba(139, 92, 246, 0.12); }
.job-card__icon--design svg { color: #8B5CF6; }
.job-card__icon--programming { background: rgba(16, 185, 129, 0.12); }
.job-card__icon--programming svg { color: #10B981; }
.job-card__icon--marketing { background: rgba(99, 102, 241, 0.12); }
.job-card__icon--marketing svg { color: #6366F1; }
.job-card__icon--writing { background: rgba(253, 203, 110, 0.12); }
.job-card__icon--writing svg { color: #FDCB6E; }
.job-card__icon--community { background: rgba(0, 206, 201, 0.12); }
.job-card__icon--community svg { color: #00CEC9; }

/* ── Job Card Info ──────────────────────── */
.job-card__info {
    flex: 1;
    min-width: 0;
}

.job-card__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.job-card__title {
    font-weight: var(--font-semibold);
    font-size: var(--text-md);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-card__promoted-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--font-bold);
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
}

.job-card__premium-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: var(--font-extrabold);
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    flex-shrink: 0;
    line-height: 1;
}

.job-card__company {
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.job-card__meta {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.job-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium, 500);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.job-card__tag--remote {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
}

.job-card__tag--fulltime,
.job-card__tag--full-time {
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-primary);
}

.job-card__tag--parttime,
.job-card__tag--part-time {
    background: rgba(139, 92, 246, 0.12);
    color: #8B5CF6;
}

.job-card__tag--freelance {
    background: rgba(0, 206, 201, 0.12);
    color: #00CEC9;
}

.job-card__tag--contract {
    background: rgba(253, 203, 110, 0.12);
    color: #D4A017;
}

.job-card__tag--internship {
    background: rgba(116, 185, 255, 0.12);
    color: #74B9FF;
}

.job-card__tag--category {
    background: rgba(99, 102, 241, 0.08);
    color: var(--accent-primary);
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.job-card__time {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* ── Job Card Action (Right Side) ───────── */
.job-card__action {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
}

.job-card__salary {
    font-weight: var(--font-bold);
    color: var(--success);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.job-card__match {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-bold);
}

.job-card__match--high {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.job-card__match--medium {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-primary);
}

.job-card__match--low {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

/* ── AI Match Progress Bar ─────────────── */
.job-card__match-bar {
    width: 60px;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.job-card__match-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.job-card__match-fill--high { background: #10B981; }
.job-card__match-fill--medium { background: var(--accent-primary); }
.job-card__match-fill--low { background: var(--text-tertiary); }

/* ── Card Actions Row (Save + More) ────── */
.job-card__actions-row {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.job-card:hover .job-card__actions-row {
    opacity: 1;
}

.job-card__save-btn,
.job-card__more-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-muted);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    padding: 0;
}

.job-card__save-btn svg,
.job-card__more-btn svg {
    width: 14px;
    height: 14px;
}

.job-card__save-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
}

.job-card__save-btn--saved {
    color: var(--accent-primary);
    opacity: 1;
}

.job-card__save-btn--saved svg {
    fill: var(--accent-primary);
}

.job-card__more-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ── Three-Dots Dropdown Menu ──────────── */
.job-card__menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 140px;
    z-index: 50;
    padding: var(--space-1) 0;
    animation: jobsFadeIn 0.15s ease;
}

.job-card__menu button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.job-card__menu button:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ── Description Preview ───────────────── */
.job-card__preview {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    margin-top: 2px;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Location/Platform/Language Tags ───── */
.job-card__tag--hybrid {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.job-card__tag--onsite {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.job-card__tag--platform {
    background: rgba(139, 92, 246, 0.08);
    color: #8B5CF6;
}

.job-card__tag--lang {
    background: rgba(20, 184, 166, 0.08);
    color: #14B8A6;
}

/* ── View Job Button Row ───────────────── */
.job-card__btn-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ═══════════════════════════════════════ */
/* SPOTLIGHT BANNER (Native Ad)            */
/* ═══════════════════════════════════════ */
.spotlight-banner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(139, 92, 246, 0.04));
    border-bottom: 1px solid var(--border-primary);
    border-top: 1px solid var(--border-primary);
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}

.spotlight-banner:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
}

.spotlight-banner__badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 9px;
    font-weight: var(--font-bold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.spotlight-banner__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--accent-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.spotlight-banner__icon svg {
    width: 22px;
    height: 22px;
    color: var(--accent-primary);
}

.spotlight-banner__info {
    flex: 1;
    min-width: 0;
}

.spotlight-banner__title {
    font-weight: var(--font-semibold);
    font-size: var(--text-md);
    color: var(--text-primary);
    margin-bottom: 2px;
}

.spotlight-banner__desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.spotlight-banner__action {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════ */
/* SKELETON LOADING                        */
/* ═══════════════════════════════════════ */
@keyframes jobsShimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.job-skeleton {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-primary);
}

.job-skeleton__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-primary) 50%, var(--bg-tertiary) 75%);
    background-size: 200px 100%;
    animation: jobsShimmer 1.5s infinite;
    flex-shrink: 0;
}

.job-skeleton__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.job-skeleton__line {
    height: 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-primary) 50%, var(--bg-tertiary) 75%);
    background-size: 200px 100%;
    animation: jobsShimmer 1.5s infinite;
}

.job-skeleton__line--short { width: 40%; }
.job-skeleton__line--medium { width: 65%; }
.job-skeleton__line--long { width: 85%; }

.job-skeleton__action {
    width: 80px;
    height: 36px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-primary) 50%, var(--bg-tertiary) 75%);
    background-size: 200px 100%;
    animation: jobsShimmer 1.5s infinite;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════ */
/* LOAD MORE / PAGINATION                  */
/* ═══════════════════════════════════════ */
.jobs-load-more {
    text-align: center;
    margin-top: var(--space-6);
}

/* ═══════════════════════════════════════ */
/* CTA SECTION                             */
/* ═══════════════════════════════════════ */
.jobs-cta {
    margin-top: var(--space-8);
    padding: var(--space-8);
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
}

.jobs-cta__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: var(--accent-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    color: var(--accent-primary);
}

.jobs-cta__title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-2);
}

.jobs-cta__text {
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Plans Grid ────────────────────────── */
.jobs-cta__plans {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.jobs-cta__plan {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    min-width: 160px;
    text-align: center;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jobs-cta__plan:hover {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: var(--shadow-sm);
}

.jobs-cta__plan--featured {
    border-color: var(--accent-gold);
    background: rgba(255, 215, 0, 0.04);
}

.jobs-cta__plan--featured:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.1);
}

.jobs-cta__plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 12px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--font-bold);
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.jobs-cta__plan-name {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.jobs-cta__plan-price {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.jobs-cta__plan-price span {
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    color: var(--text-tertiary);
}

.jobs-cta__plan-desc {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* ═══════════════════════════════════════ */
/* EMPTY STATE                             */
/* ═══════════════════════════════════════ */
.jobs-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--text-tertiary);
}

.jobs-empty__icon {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.jobs-empty__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

/* ═══════════════════════════════════════ */
/* REPORT MODAL                            */
/* ═══════════════════════════════════════ */
.report-reasons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}

.report-reason {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.report-reason:hover {
    border-color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.report-reason--selected {
    border-color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.report-reason__radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-secondary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease;
}

.report-reason--selected .report-reason__radio {
    border-color: var(--accent-primary);
}

.report-reason--selected .report-reason__radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
}

.report-reason__text {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════ */
/* QUICK QUESTION MODAL                    */
/* ═══════════════════════════════════════ */
.quick-question-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.quick-question-form__hint {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════ */
/* QUICK APPLY FORM                        */
/* ═══════════════════════════════════════ */
.quick-apply-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.quick-apply-form .form-row {
    display: flex;
    gap: var(--space-3);
}

.quick-apply-form .form-row .form-group {
    flex: 1;
}

/* ═══════════════════════════════════════ */
/* JOB DETAIL MODAL                        */
/* ═══════════════════════════════════════ */
.job-detail {
    padding: var(--space-2) 0;
}

.job-detail__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-primary);
}

.job-detail__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.job-detail__icon svg {
    width: 28px;
    height: 28px;
    color: var(--accent-primary);
}

.job-detail__title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-1);
}

.job-detail__company {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.job-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.job-detail__stats {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.job-detail__stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.job-detail__stat svg {
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
}

.job-detail__salary {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--success);
    margin-bottom: var(--space-4);
}

.job-detail__section {
    margin-bottom: var(--space-5);
}

.job-detail__section-title {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.job-detail__description {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    white-space: pre-wrap;
}

.job-detail__description h2,
.job-detail__description h3 {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: var(--space-3) 0 var(--space-1);
}

.job-detail__description ul {
    padding-left: var(--space-4);
    list-style: disc;
}

.job-detail__description li {
    margin-bottom: var(--space-1);
}

.job-detail__skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.job-detail__skill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background: var(--accent-primary-light);
    color: var(--accent-primary);
}

.job-detail__skill--matched {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.job-detail__skill--matched::before {
    content: '\2713';
    font-size: 10px;
}

/* ── Apply Section ─────────────────────── */
.job-detail__apply-section {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-primary);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.job-detail__apply-btn {
    flex: 2;
    min-width: 180px;
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-5);
}

.job-detail__question-btn {
    flex: 1;
    min-width: 120px;
}

.job-detail__apply-section .btn {
    min-width: 100px;
}

/* ── Secondary Actions (Save/Share/Report) ── */
.job-detail__secondary-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-secondary);
    margin-top: var(--space-3);
}

.job-detail__secondary-actions .btn-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    padding: var(--space-1) var(--space-3);
}

.job-detail__secondary-actions .btn-icon:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

/* ── Improved Markdown Description ────── */
.job-detail__description h2 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.job-detail__description h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.job-detail__description ul {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0;
}

.job-detail__description li {
    position: relative;
    padding-left: var(--space-5);
    margin-bottom: var(--space-1);
    line-height: var(--leading-relaxed);
}

.job-detail__description li::before {
    content: '\2022';
    position: absolute;
    left: var(--space-2);
    color: var(--accent-primary);
    font-weight: bold;
}

/* ═══════════════════════════════════════ */
/* POST JOB PAGE STYLES (keep existing)    */
/* ═══════════════════════════════════════ */
.post-job-page {
    max-width: var(--container-md);
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
}

.post-job-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

.post-job__ai-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
    color: var(--accent-tertiary);
    border: 1px solid rgba(139, 92, 246, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: var(--space-1);
}

.post-job__ai-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(99, 102, 241, 0.25));
    border-color: var(--accent-tertiary);
    transform: translateY(-1px);
}

.post-job__ai-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.post-job__ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--font-bold);
    background: linear-gradient(135deg, #8B5CF6, #6366F1);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.post-job__enhanced-preview {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-height: 300px;
    overflow-y: auto;
}

.post-job__enhanced-preview h2,
.post-job__enhanced-preview h3 {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: var(--space-3) 0 var(--space-1);
}

.post-job__enhanced-preview ul {
    padding-left: var(--space-4);
    list-style: disc;
}

.post-job__enhanced-preview li {
    margin-bottom: var(--space-1);
}

.post-job__skills-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-input);
    border: 2px solid var(--border-primary);
    border-radius: 12px;
    transition: border-color 0.3s ease;
}

.post-job__skills-input:focus-within {
    border-color: var(--accent-primary);
}

.post-job__skill-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background: var(--accent-primary-light);
    color: var(--accent-primary);
}

.post-job__skill-tag button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: transparent;
    color: var(--accent-primary);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    border: none;
    padding: 0;
    line-height: 1;
}

.post-job__skill-tag button:hover {
    background: rgba(99, 102, 241, 0.2);
}

.post-job__skill-field {
    flex: 1;
    min-width: 100px;
    border: none;
    background: transparent;
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--text-primary);
    outline: none;
}

.post-job__skill-field::placeholder {
    color: var(--text-muted);
}

/* ── Salary Range Inputs ────────────────── */
.salary-row {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
}

.salary-row .form-group {
    flex: 1;
}

/* ── AI Status Indicator ────────────────── */
.ai-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    margin-top: var(--space-2);
}

.ai-status--checking {
    background: rgba(116, 185, 255, 0.1);
    color: var(--info);
}

.ai-status--valid {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.ai-status--invalid {
    background: rgba(225, 112, 85, 0.1);
    color: var(--error);
}

.ai-status__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(116, 185, 255, 0.3);
    border-top-color: var(--info);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ── Skills Modal ───────────────────────── */
.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}

.skills-grid__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.skills-grid__chip:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.skills-grid__chip--active {
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* ── Early Access Banner ────────────────── */
.jobs-early-access {
    background: linear-gradient(135deg, rgba(253, 203, 110, 0.1), rgba(255, 215, 0, 0.08));
    border: 1px solid rgba(253, 203, 110, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.jobs-early-access__icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.jobs-early-access__text {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.jobs-early-access__text strong {
    color: var(--accent-gold);
}

/* ── Submit Steps (Post Job form) ──────── */
.submit-steps {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.submit-steps > * + * {
    margin-left: var(--space-4);
}
@supports (gap: 1px) {
    .submit-steps > * + * {
        margin-left: 0;
    }
}

.submit-step {
    flex: 1;
    text-align: center;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.submit-step--active {
    background: var(--accent-primary);
    color: #fff;
}

.submit-step--done {
    background: var(--success-light);
    color: var(--success);
}

/* ═══════════════════════════════════════ */
/* RESPONSIVE — TABLET (max-width: 768px) */
/* ═══════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── Hero: tighter on tablet ── */
    .jobs-hero {
        padding: var(--space-6) 0 var(--space-4);
    }
    .jobs-hero__title {
        font-size: var(--text-2xl);
    }
    .jobs-hero__subtitle {
        font-size: var(--text-sm);
        padding: 0 var(--space-2);
    }
    .jobs-stats {
        gap: var(--space-4);
    }
    .jobs-stats__value {
        font-size: var(--text-xl);
    }

    /* ── Filter chips: scrollable row ── */
    .jobs-filter-group {
        gap: var(--space-2);
    }
    .jobs-filter-group__label {
        min-width: auto;
    }
    .jobs-filter-group__chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        max-width: 100%;
    }
    .jobs-filter-group__chips::-webkit-scrollbar {
        display: none;
    }

    /* ── AI Suggestions: scrollable ── */
    .jobs-ai-suggestions {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .jobs-ai-suggestions::-webkit-scrollbar {
        display: none;
    }
    .jobs-ai-suggestions__list {
        flex-wrap: nowrap;
    }

    /* ── CTA plans: stack ── */
    .jobs-cta {
        padding: var(--space-6);
    }
    .jobs-cta__plans {
        flex-direction: column;
        align-items: center;
    }
    .jobs-cta__plan {
        width: 100%;
        max-width: 280px;
    }

    /* ── Job detail modal ── */
    .job-detail__stats {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
}

/* ═══════════════════════════════════════ */
/* RESPONSIVE — MOBILE (max-width: 640px) */
/* ═══════════════════════════════════════ */
@media (max-width: 640px) {
    /* ── Hero: compact mobile ── */
    .jobs-hero {
        padding: var(--space-4) 0 var(--space-3);
    }
    .jobs-hero__badge {
        font-size: 10px;
        padding: 3px 10px;
    }
    .jobs-hero__title {
        font-size: var(--text-xl);
    }
    .jobs-hero__subtitle {
        font-size: var(--text-xs);
        max-width: 320px;
    }
    .jobs-stats {
        gap: var(--space-3);
        margin-top: var(--space-3);
    }
    .jobs-stats__value {
        font-size: var(--text-lg);
    }
    .jobs-stats__label {
        font-size: 10px;
    }

    /* ── Search bar: compact ── */
    .jobs-search-bar {
        height: 44px;
        padding: 0 var(--space-3);
    }
    .jobs-search-bar__input {
        font-size: var(--text-sm);
    }
    .jobs-search-section {
        margin-bottom: var(--space-4);
    }

    /* ── Filters: single-row horizontal scroll per group ── */
    .jobs-filter-chips {
        margin-top: var(--space-3);
    }
    .jobs-filter-group {
        flex-direction: row;
        align-items: center;
        margin-bottom: var(--space-2);
        gap: var(--space-2);
    }
    .jobs-filter-group__label {
        font-size: 10px;
        min-width: 56px;
        flex-shrink: 0;
    }
    .jobs-filter-group__chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .jobs-filter-group__chips::-webkit-scrollbar {
        display: none;
    }
    .jobs-chip {
        padding: 5px 12px;
        font-size: 11px;
        flex-shrink: 0;
    }
    .jobs-chip svg {
        width: 12px;
        height: 12px;
    }

    .jobs-filter-chips__post-btn {
        width: 100%;
    }

    /* ── AI Suggestions: single row scroll ── */
    .jobs-ai-suggestions {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: var(--space-1);
        margin-top: var(--space-2);
    }
    .jobs-ai-suggestions::-webkit-scrollbar {
        display: none;
    }
    .jobs-ai-suggestions__list {
        flex-wrap: nowrap;
        gap: var(--space-1);
    }
    .jobs-ai-suggestion {
        padding: 2px 10px;
        font-size: 11px;
        flex-shrink: 0;
    }

    /* ── Job cards: compact card layout ── */
    .job-card {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }
    .job-card__icon {
        width: 40px;
        height: 40px;
    }
    .job-card__icon svg {
        width: 20px;
        height: 20px;
    }
    .job-card__title {
        font-size: var(--text-sm);
    }
    .job-card__company {
        font-size: var(--text-xs);
        margin-bottom: var(--space-1);
    }
    .job-card__meta {
        gap: var(--space-1);
    }
    .job-card__tag {
        padding: 1px 8px;
        font-size: 10px;
    }
    .job-card__time {
        font-size: 10px;
    }
    .job-card__action {
        gap: var(--space-1);
    }
    .job-card__salary {
        font-size: var(--text-xs);
    }
    .job-card__action .btn-sm {
        padding: 4px 10px;
        font-size: 11px;
    }
    .job-card__report-btn {
        opacity: 1;
        width: 24px;
        height: 24px;
    }
    .job-card__report-btn svg {
        width: 12px;
        height: 12px;
    }
    .job-card__promoted-badge {
        font-size: 9px;
        padding: 1px 6px;
    }
    .job-card__match {
        font-size: 10px;
        padding: 1px 6px;
    }
    .job-card__match-bar {
        width: 48px;
        height: 3px;
    }

    /* ── Section titles ── */
    .job-list__section-title {
        padding: var(--space-2) var(--space-4);
        font-size: 10px;
    }

    /* ── Spotlight banner: compact row ── */
    .spotlight-banner {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }
    .spotlight-banner__icon {
        width: 36px;
        height: 36px;
    }
    .spotlight-banner__icon svg {
        width: 18px;
        height: 18px;
    }
    .spotlight-banner__title {
        font-size: var(--text-sm);
    }
    .spotlight-banner__desc {
        font-size: var(--text-xs);
    }
    .spotlight-banner__badge {
        font-size: 8px;
        top: var(--space-1);
        right: var(--space-2);
    }

    /* ── Banners: stack nicely ── */
    .jobs-match-banner {
        flex-direction: row;
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }
    .jobs-match-banner__icon {
        width: 40px;
        height: 40px;
    }
    .jobs-match-banner__title {
        font-size: var(--text-sm);
    }
    .jobs-match-banner__desc {
        font-size: var(--text-xs);
    }
    .jobs-skills-banner {
        flex-direction: row;
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }
    .jobs-skills-banner__icon {
        width: 40px;
        height: 40px;
    }
    .jobs-skills-banner__title {
        font-size: var(--text-sm);
    }
    .jobs-skills-banner__desc {
        font-size: var(--text-xs);
    }

    /* ── CTA section ── */
    .jobs-cta {
        padding: var(--space-5) var(--space-4);
        margin-top: var(--space-5);
    }
    .jobs-cta__icon {
        width: 48px;
        height: 48px;
    }
    .jobs-cta__icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    .jobs-cta__title {
        font-size: var(--text-lg);
    }
    .jobs-cta__text {
        font-size: var(--text-sm);
    }
    .jobs-cta__plans {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    .jobs-cta__plan {
        width: 100%;
        max-width: none;
        padding: var(--space-4);
    }

    /* ── Job detail modal: compact ── */
    .job-detail__header {
        gap: var(--space-3);
    }
    .job-detail__icon {
        width: 48px;
        height: 48px;
    }
    .job-detail__icon svg {
        width: 22px;
        height: 22px;
    }
    .job-detail__title {
        font-size: var(--text-lg);
    }
    .job-detail__salary {
        font-size: var(--text-md);
    }
    .job-detail__stats {
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }
    .job-detail__stat {
        font-size: var(--text-xs);
    }
    .job-detail__apply-section {
        flex-direction: column;
        gap: var(--space-2);
    }
    .job-detail__apply-section .btn {
        width: 100%;
        min-width: auto;
    }
    .job-detail__apply-section .btn-ghost {
        width: auto;
        align-self: center;
    }

    /* ── Skeleton: compact ── */
    .job-skeleton {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }
    .job-skeleton__icon {
        width: 40px;
        height: 40px;
    }
    .job-skeleton__action {
        width: 60px;
        height: 28px;
    }

    /* ── Forms: compact ── */
    .salary-row {
        flex-direction: column;
    }
    .post-job-card {
        padding: var(--space-4);
    }
    .quick-apply-form .form-row {
        flex-direction: column;
    }
    .submit-steps {
        flex-direction: column;
    }

    /* ── Load more ── */
    .jobs-load-more {
        margin-top: var(--space-4);
    }
    .jobs-load-more .btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════ */
/* RESPONSIVE — SMALL MOBILE (max: 380px) */
/* ═══════════════════════════════════════ */
@media (max-width: 380px) {
    .jobs-hero__subtitle {
        max-width: 260px;
    }
    .jobs-stats {
        gap: var(--space-2);
    }
    .jobs-stats__value {
        font-size: var(--text-md);
    }
    .job-card {
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
    }
    .job-card__icon {
        width: 36px;
        height: 36px;
    }
    .job-card__icon svg {
        width: 18px;
        height: 18px;
    }
    .job-card__title {
        font-size: var(--text-xs);
    }
    .spotlight-banner {
        padding: var(--space-2) var(--space-3);
    }
}