/* ===== Recently Reposted (orange brand accent) ===== */
    .job-card.job-card--reposted { border-left: 3px solid #EB6600; }
    .jl-date-line { font-size: 12px; color: #6b7280; margin-top: 6px; }
    .jl-date-line .jl-date-reposted { color: #EB6600; font-weight: 600; }
    .jl-badge-reposted {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        background: linear-gradient(135deg, #EB6600 0%, #f59e0b 100%);
        color: #ffffff;
        box-shadow: 0 1px 3px rgba(235,102,0,0.25);
        margin-top: 6px;
    }
    .jl-badge-reposted svg { width: 11px; height: 11px; }
    .filter-chip--fresh {
        background: #fff1e6;
        color: #EB6600;
        border: 1px solid #ffd9b8;
    }
    .filter-chip--fresh.filter-chip--active {
        background: linear-gradient(135deg, #EB6600 0%, #f59e0b 100%);
        color: #ffffff;
        border-color: #EB6600;
    }

    /* ===== Hero / Search ===== */
    .jobs-hero {
        background-color: var(--primary-color);
        padding: 140px 20px 60px;
        text-align: center;
    }
    .jobs-hero-inner {
        max-width: 900px;
        margin: 0 auto;
    }
    .jobs-hero h1 {
        color: #ffffff;
        font-size: 2.6rem;
        font-weight: 800;
        margin-bottom: 12px;
        letter-spacing: -0.5px;
    }
    .jobs-hero-sub {
        color: rgba(255,255,255,0.85);
        font-size: 1.1rem;
        margin-bottom: 36px;
    }

    /* Search Form */
    .jobs-search-form {
        background: #ffffff;
        border-radius: 8px;
        padding: 8px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    }
    .search-row {
        display: flex;
        gap: 0;
        align-items: stretch;
    }
    .search-field {
        flex: 1;
        padding: 12px 16px;
    }
    .search-field label {
        display: block;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        font-weight: 600;
        color: #6b7280;
        margin-bottom: 4px;
        font-family: var(--font-heading);
    }
    .search-field input {
        width: 100%;
        border: none;
        outline: none;
        font-size: 1rem;
        font-family: var(--font-body);
        color: var(--text-main);
        padding: 4px 0;
        background: transparent;
    }
    .search-field input::placeholder {
        color: #b0b8c4;
    }
    .search-field--keyword {
        border-right: 1px solid #e5e7eb;
    }
    .search-field--location {
        border-right: 1px solid #e5e7eb;
    }
    .search-field--btn {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding: 8px;
    }
    .btn-job-search {
        background-color: var(--accent-color);
        color: #ffffff;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.95rem;
        padding: 14px 32px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.2s ease;
        white-space: nowrap;
    }
    .btn-job-search:hover {
        background-color: var(--accent-hover);
    }

    /* ===== Filter Bar ===== */
    .jobs-results-section {
        background-color: #f8f9fa;
        padding: 0 20px 60px;
    }
    .jobs-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    .jobs-filter-bar {
        padding: 24px 0 20px;
    }
    .filter-form {
        width: 100%;
    }
    .filter-form--mobile {
        display: none;
    }
    .jobs-filter-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        width: 100%;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 18px;
        padding: 12px;
        box-shadow: 0 10px 28px rgba(8,16,128,0.06);
    }
    .jobs-filter-pills {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        min-width: 0;
    }
    .jobs-filter-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 14px;
        border: 1px solid #e5e7eb;
        border-radius: 100px;
        font-size: 0.85rem;
        font-weight: 700;
        color: #374151;
        background: #ffffff;
        cursor: pointer;
        transition: all 0.15s ease;
        font-family: var(--font-body);
        line-height: 1;
        box-shadow: 0 1px 2px rgba(17,24,39,0.04);
    }
    .jobs-filter-pill input[type="checkbox"] {
        display: none;
    }
    .jobs-filter-pill:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
    }
    .jobs-filter-pill--active {
        background-color: var(--primary-color);
        color: #ffffff;
        border-color: var(--primary-color);
    }
    .jobs-filter-pill--active:hover {
        color: #ffffff;
    }
    .jobs-filter-pill--fresh {
        background: #fff4ec;
        color: var(--accent-color);
        border-color: #ffd7b5;
    }
    .jobs-filter-pill--fresh.jobs-filter-pill--active {
        background: var(--accent-color);
        color: #ffffff;
        border-color: var(--accent-color);
    }
    .jobs-filter-dropdown {
        position: relative;
    }
    .jobs-filter-dropdown > summary {
        list-style: none;
    }
    .jobs-filter-dropdown > summary::-webkit-details-marker {
        display: none;
    }
    .jobs-filter-dropdown[open] > summary {
        border-color: var(--primary-color);
        color: var(--primary-color);
        background: #eef0ff;
    }
    .jobs-filter-dropdown[open] > summary.jobs-filter-pill--active {
        background: var(--primary-color);
        color: #ffffff;
    }
    .jobs-filter-caret {
        font-size: 0.7rem;
        opacity: 0.75;
    }
    .jobs-filter-count {
        min-width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(255,255,255,0.24);
        color: inherit;
        font-size: 0.7rem;
    }
    .jobs-filter-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        width: 330px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 18px;
        box-shadow: 0 24px 58px rgba(8,16,128,0.18);
        padding: 16px;
        z-index: 20;
    }
    .jobs-filter-menu::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 32px;
        width: 14px;
        height: 14px;
        background: #ffffff;
        border-left: 1px solid #e5e7eb;
        border-top: 1px solid #e5e7eb;
        transform: rotate(45deg);
    }
    .jobs-filter-menu--narrow {
        width: 280px;
    }
    .jobs-filter-menu--salary {
        width: 360px;
    }
    .jobs-filter-menu-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }
    .jobs-filter-menu-head strong {
        color: var(--primary-color);
        font-family: var(--font-heading);
        font-size: 0.96rem;
    }
    .jobs-filter-menu-head span {
        color: #6b7280;
        font-size: 0.78rem;
        font-weight: 600;
    }
    .jobs-filter-option {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid #e5e7eb;
        border-radius: 13px;
        padding: 10px 12px;
        color: #374151;
        font-weight: 600;
        font-size: 0.88rem;
        margin-bottom: 8px;
        cursor: pointer;
    }
    .jobs-filter-option:hover {
        border-color: var(--primary-color);
        background: #f8f9ff;
    }
    .jobs-filter-option input {
        accent-color: var(--primary-color);
    }
    .results-count {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        color: #374151;
        font-weight: 700;
        white-space: nowrap;
    }
    .results-count span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        background: #eef0ff;
        color: var(--primary-color);
        font-family: var(--font-heading);
        font-weight: 800;
    }
    .jobs-active-filters {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding: 12px 14px 0;
    }
    .jobs-active-label {
        color: #6b7280;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .jobs-active-filter {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        background: #eef0ff;
        color: var(--primary-color);
        padding: 6px 10px;
        font-size: 0.8rem;
        font-weight: 700;
    }
    .jobs-salary-input-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .jobs-salary-input-row label,
    .jobs-company-field {
        display: grid;
        gap: 6px;
        color: #374151;
        font-size: 0.78rem;
        font-weight: 700;
    }
    .jobs-salary-input-row input,
    .jobs-company-field input {
        width: 100%;
        min-width: 0;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        font-size: 0.9rem;
        color: #374151;
        background: #ffffff;
    }
    .jobs-salary-input-row input:focus,
    .jobs-company-field input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(8,16,128,0.08);
    }
    .jobs-filter-menu-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        border-top: 1px solid #e5e7eb;
        margin-top: 14px;
        padding-top: 14px;
    }
    .btn-filter-apply {
        padding: 10px 16px;
        background: var(--primary-color);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        font-family: var(--font-heading);
        transition: background 0.15s;
    }
    .btn-filter-apply:hover {
        background: #0a1490;
    }
    .btn-filter-clear {
        padding: 7px 11px;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--accent-color);
        text-decoration: none;
        border: 1px solid #ffd7b5;
        border-radius: 999px;
        transition: background 0.15s;
    }
    .btn-filter-clear:hover {
        background: #fff4ec;
        color: var(--accent-hover);
    }
    .btn-filter-cancel {
        padding: 10px 16px;
        background: #ffffff;
        color: #374151;
        border: 1px solid #d1d5db;
        border-radius: 10px;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        font-family: var(--font-heading);
    }
    .jobs-mobile-filter-row,
    .jobs-mobile-results-row,
    .jobs-filter-sheet {
        display: none;
    }
    /* ─── Pagination ─── */
    .jobs-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        padding: 28px 0 8px;
    }
    .pagination-btn {
        padding: 8px 20px;
        background: #fff;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--primary-color);
        text-decoration: none;
        transition: background 0.15s, border-color 0.15s;
    }
    .pagination-btn:hover {
        background: #f0f2ff;
        border-color: var(--primary-color);
    }
    .pagination-info {
        font-size: 0.88rem;
        color: #6b7280;
    }

    /* ===== Grid Layout ===== */
    .jobs-grid-layout {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 24px;
        min-height: 500px;
    }

    /* Card List */
    .jobs-card-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: 700px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 8px;
    }
    .jobs-card-list::-webkit-scrollbar {
        width: 5px;
    }
    .jobs-card-list::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 10px;
    }

    .job-card {
        display: block;
        background: #ffffff;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        padding: 20px 24px;
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        cursor: pointer;
    }
    .job-card:hover {
        border-color: var(--primary-color);
        box-shadow: 0 4px 16px rgba(8,16,128,0.08);
    }
    .job-card--active {
        border-color: var(--primary-color);
        box-shadow: 0 4px 16px rgba(8,16,128,0.10);
        background: #f0f2ff;
    }
    .job-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }
    .job-card-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 2px;
        line-height: 1.3;
        flex: 1;
    }
    .job-card-title-link {
        color: inherit;
        text-decoration: none;
    }
    .job-card-title-link:hover,
    .job-card-title-link:focus-visible {
        color: var(--accent-color);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .job-card-title-link:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 3px;
    }
    .jl-save-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        color: #9ca3af;
        transition: color 0.2s ease, transform 0.15s ease;
        flex-shrink: 0;
        line-height: 1;
    }
    .jl-save-btn:hover {
        color: #ef4444;
        transform: scale(1.15);
    }
    .jl-save-btn--active {
        color: #ef4444;
    }
    .jl-save-btn--active svg {
        fill: #ef4444;
    }
    .job-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 8px;
    }
    .job-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.82rem;
        color: #6b7280;
    }
    .job-meta-item svg {
        flex-shrink: 0;
    }
    .job-meta-company {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem;
        color: #374151;
        font-weight: 500;
        text-decoration: none;
    }
    a.job-meta-company:hover {
        color: var(--primary-color);
    }
    .job-meta-company img {
        width: 18px;
        height: 18px;
        border-radius: 3px;
        object-fit: contain;
        background: #f3f4f6;
        flex-shrink: 0;
    }
    .detail-company {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        color: #374151;
        font-weight: 500;
        margin-bottom: 4px;
    }
    .detail-company a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: inherit;
        text-decoration: none;
    }
    .detail-company a:hover {
        color: var(--primary-color);
    }

    .job-card-date {
        font-size: 0.78rem;
        color: #9ca3af;
    }

    /* Detail Preview */
    .jobs-detail-preview {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 40px;
        position: sticky;
        top: 100px;
        max-height: 700px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .detail-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 100%;
        min-height: 300px;
        color: #9ca3af;
    }
    .detail-placeholder svg {
        margin-bottom: 16px;
    }
    .detail-placeholder p {
        font-size: 0.95rem;
        color: #9ca3af;
    }

    /* Empty State */
    .jobs-empty-state {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 80px 20px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }
    .jobs-empty-state svg {
        margin-bottom: 20px;
    }
    .jobs-empty-state h3 {
        color: var(--text-main);
        font-size: 1.4rem;
        margin-bottom: 8px;
    }
    .jobs-empty-state p {
        max-width: 480px;
        color: #6b7280;
        font-size: 0.95rem;
    }

    /* ===== CTA Banner ===== */
    .jobs-cta-banner {
        background-color: var(--primary-color);
        padding: 60px 20px;
        text-align: center;
    }
    .jobs-cta-inner {
        max-width: 700px;
        margin: 0 auto;
    }
    .jobs-cta-banner h2 {
        color: #ffffff;
        font-size: 2rem;
        margin-bottom: 12px;
    }
    .jobs-cta-banner p {
        color: rgba(255,255,255,0.85);
        font-size: 1.05rem;
        margin-bottom: 28px;
    }
    .btn-cta-submit {
        display: inline-block;
        background-color: var(--accent-color);
        color: #ffffff;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 1rem;
        padding: 14px 36px;
        border-radius: 6px;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }
    .btn-cta-submit:hover {
        background-color: var(--accent-hover);
    }

    /* ===== Responsive ===== */
    @media (max-width: 992px) {
        .jobs-grid-layout {
            grid-template-columns: 1fr;
        }
        .jobs-detail-preview {
            display: none;
        }
        .jobs-card-list {
            max-height: none;
            overflow-y: visible;
            padding-right: 0;
        }
        .job-card {
            /* On mobile, cards link to detail page */
        }
    }
    @media (max-width: 768px) {
        .jobs-hero {
            padding: 120px 16px 40px;
        }
        .jobs-hero h1 {
            font-size: 1.8rem;
        }
        .search-row {
            flex-direction: column;
        }
        .search-field--keyword,
        .search-field--location {
            border-right: none;
            border-bottom: 1px solid #e5e7eb;
        }
        .search-field--btn {
            padding: 12px 16px;
        }
        .btn-job-search {
            width: 100%;
            text-align: center;
        }
        .filter-form--desktop {
            display: none;
        }
        .filter-form--mobile {
            display: block;
        }
        .jobs-filter-bar {
            padding: 16px 0 18px;
        }
        .jobs-mobile-filter-row {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            padding: 10px;
            box-shadow: 0 8px 24px rgba(8,16,128,0.06);
            overflow: hidden;
        }
        .jobs-mobile-filter-trigger {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
            border-radius: 999px;
            background: var(--primary-color);
            color: #ffffff;
            padding: 10px 14px;
            font-family: var(--font-heading);
            font-size: 0.84rem;
            font-weight: 800;
            white-space: nowrap;
            cursor: pointer;
        }
        .jobs-mobile-filter-trigger span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
            height: 20px;
            padding: 0 7px;
            border-radius: 999px;
            background: var(--accent-color);
            font-size: 0.68rem;
        }
        .jobs-mobile-quick-filters {
            display: flex;
            align-items: center;
            gap: 7px;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            flex: 1;
        }
        .jobs-mobile-quick-filters::-webkit-scrollbar {
            display: none;
        }
        .jobs-mobile-quick-chip {
            display: inline-flex;
            align-items: center;
            border: 1px solid #e5e7eb;
            border-radius: 999px;
            background: #ffffff;
            color: #374151;
            padding: 9px 12px;
            font-size: 0.8rem;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
        }
        .jobs-mobile-quick-chip input {
            display: none;
        }
        .jobs-mobile-quick-chip--active {
            background: #fff4ec;
            color: var(--accent-color);
            border-color: #ffd7b5;
        }
        .jobs-mobile-results-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 4px 0;
            color: #6b7280;
            font-size: 0.85rem;
            font-weight: 600;
        }
        .jobs-mobile-results-row strong {
            color: var(--primary-color);
            font-family: var(--font-heading);
        }
        .jobs-mobile-results-row a {
            color: var(--accent-color);
            font-weight: 800;
            text-decoration: none;
        }
        .jobs-filter-sheet {
            display: block;
            position: fixed;
            inset: 0;
            z-index: 1100;
        }
        .jobs-filter-sheet[hidden] {
            display: none;
        }
        .jobs-filter-sheet-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(17,24,39,0.52);
        }
        .jobs-filter-sheet-panel {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            max-height: 88vh;
            overflow-y: auto;
            background: #ffffff;
            border-radius: 24px 24px 0 0;
            box-shadow: 0 -24px 56px rgba(8,16,128,0.20);
            padding: 12px 16px 18px;
            animation: jobs-sheet-in 0.2s ease-out;
        }
        @keyframes jobs-sheet-in {
            from { transform: translateY(24px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .jobs-filter-sheet-handle {
            width: 44px;
            height: 4px;
            border-radius: 999px;
            background: #d1d5db;
            margin: 0 auto 14px;
        }
        .jobs-filter-sheet-head {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: flex-start;
            margin-bottom: 14px;
        }
        .jobs-filter-sheet-head h2 {
            color: var(--primary-color);
            font-size: 1.2rem;
            margin: 0 0 4px;
        }
        .jobs-filter-sheet-head p {
            color: #6b7280;
            font-size: 0.86rem;
            margin: 0;
        }
        .jobs-filter-sheet-close {
            border: none;
            background: #f3f4f6;
            color: #6b7280;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            font-size: 1.35rem;
            line-height: 1;
            cursor: pointer;
        }
        .jobs-filter-sheet-section {
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            padding: 14px;
            margin-bottom: 12px;
            background: #ffffff;
        }
        .jobs-filter-sheet-section h3 {
            color: var(--primary-color);
            font-size: 0.95rem;
            margin: 0 0 10px;
        }
        .jobs-filter-option-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .jobs-filter-sheet-actions {
            display: grid;
            grid-template-columns: 1fr 1.35fr;
            gap: 10px;
            padding-top: 4px;
        }
        .job-card {
            padding: 14px 16px;
        }
        .job-card-title {
            font-size: 0.95rem;
        }
        .job-meta-item {
            font-size: 0.78rem;
        }
        .job-card-meta {
            gap: 10px;
        }
        .jobs-pagination {
            gap: 10px;
        }
    }
    @media (max-width: 480px) {
        .jobs-hero {
            padding: 100px 12px 32px;
        }
        .jobs-hero h1 {
            font-size: 1.5rem;
        }
        .job-card {
            padding: 12px;
        }
        .job-card-title {
            font-size: 0.9rem;
        }
        .job-card-meta {
            gap: 8px;
        }
        .job-meta-item {
            font-size: 0.75rem;
            gap: 3px;
        }
        .job-card-date {
            font-size: 0.72rem;
        }
        .jobs-filter-option-grid,
        .jobs-salary-input-row,
        .jobs-filter-sheet-actions {
            grid-template-columns: 1fr;
        }
        .jobs-filter-sheet-panel {
            padding-left: 12px;
            padding-right: 12px;
        }
        .pagination-btn {
            padding: 6px 14px;
            font-size: 0.82rem;
        }
    }

    /* ===== Detail Panel Content ===== */
    .detail-header {
        margin-bottom: 16px;
    }
    .detail-location {
        font-size: 0.85rem;
        color: #6b7280;
        font-weight: 500;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .detail-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--primary-color);
        line-height: 1.25;
        margin-bottom: 0;
    }
    .detail-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 8px;
    }
    .detail-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.82rem;
        color: #6b7280;
        background: #f3f4f6;
        padding: 5px 12px;
        border-radius: 100px;
        font-weight: 500;
    }
    .detail-pill svg {
        flex-shrink: 0;
    }
    .detail-date {
        font-size: 0.78rem;
        color: #9ca3af;
        margin-bottom: 16px;
    }
    .detail-division-tags {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
        margin: -4px 0 18px;
    }
    .detail-division-tags[hidden] {
        display: none;
    }
    .detail-division-tag {
        display: inline-flex;
        align-items: center;
        border-radius: 7px;
        padding: 6px 10px;
        background: #eef0ff;
        border: 1px solid #d7dcff;
        color: var(--primary-color);
        font-size: 0.78rem;
        font-weight: 800;
        line-height: 1;
    }
    .detail-apply-row {
        margin-bottom: 0;
    }
    .btn-detail-apply {
        display: inline-block;
        background-color: var(--accent-color);
        color: #ffffff;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.95rem;
        padding: 12px 32px;
        border-radius: 6px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .btn-detail-apply:hover {
        background-color: var(--accent-hover);
    }
    .btn-detail-view {
        display: inline-block;
        background: #ffffff;
        color: var(--primary-color);
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.95rem;
        padding: 12px 28px;
        border-radius: 6px;
        border: 2px solid var(--primary-color);
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .btn-detail-view:hover {
        background-color: var(--primary-color);
        color: #ffffff;
    }
    .jl-share-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
    }
    .jl-share-label {
        font-size: 0.78rem;
        font-weight: 600;
        color: #6b7280;
        margin-right: 2px;
        white-space: nowrap;
    }
    .jl-share-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        text-decoration: none;
        transition: opacity 0.2s ease;
        color: #ffffff;
    }
    .jl-share-btn:hover { opacity: 0.8; }
    .jl-share-linkedin { background-color: #0A66C2; }
    .jl-share-facebook { background-color: #1877F2; }
    .jl-share-x { background-color: #000000; }
    .jl-share-email { background-color: #6b7280; color: #ffffff; }
    .jl-share-email svg { stroke: #ffffff; }
    .jl-share-whatsapp { background-color: #25D366; }
    .jl-share-sms { background-color: #5b21b6; color: #ffffff; }
    .jl-share-sms svg { stroke: #ffffff; }
    .detail-divider {
        border: none;
        border-top: 1px solid #e5e7eb;
        margin: 20px 0;
    }
    .detail-section h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 12px;
    }
    .detail-body {
        color: var(--text-light);
        line-height: 1.7;
        font-size: 0.95rem;
    }
    .detail-body p {
        margin-bottom: 14px;
    }
    .detail-body ul, .detail-body ol {
        padding-left: 22px;
        margin-bottom: 14px;
    }
    .detail-body li {
        margin-bottom: 5px;
        line-height: 1.6;
    }
    /* Iframe for descriptions with embedded CSS (complete isolation) */
    .detail-description-iframe {
        width: 100%;
        border: none;
        overflow: hidden;
        display: block;
        min-height: 200px;
    }

    /*
     * Sanitise embedded Loxo description HTML in preview panel.
     * Custom descriptions may contain a full HTML document with
     * <style>, <meta>, <title>, wrapper divs, duplicate headings,
     * and their own CSS. Neutralise everything so it renders cleanly.
     */
    .detail-body style,
    .detail-body meta,
    .detail-body title,
    .detail-body link {
        display: none !important;
    }
    .detail-body .job-container {
        background: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-width: none !important;
        margin: 0 !important;
    }
    .detail-body .header {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .detail-body .header h1,
    .detail-body .header .job-meta {
        display: none !important;
    }
    .detail-body h1,
    .detail-body h2,
    .detail-body h3 {
        color: var(--primary-color) !important;
        font-family: var(--font-heading) !important;
        border-left: none !important;
        padding-left: 0 !important;
        font-size: revert !important;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .detail-body h2 {
        font-size: 1.15rem !important;
        font-weight: 700;
    }
    .detail-body h3 {
        font-size: 1rem !important;
        font-weight: 600;
    }
    .detail-body p,
    .detail-body span {
        color: var(--text-light) !important;
        font-family: var(--font-body) !important;
        font-size: 0.95rem !important;
    }
    .detail-body strong,
    .detail-body .highlight {
        color: var(--text-main) !important;
        font-weight: 600;
    }
    .detail-body .footer-action {
        background-color: #f0f2ff !important;
        border: 1px solid #dde0f5;
        border-radius: 8px !important;
        padding: 20px !important;
        text-align: center;
        margin-top: 24px !important;
    }
    .detail-body .footer-action h3 {
        color: var(--primary-color) !important;
        border-bottom: none !important;
        margin-top: 0 !important;
    }
    .detail-body .footer-action .btn,
    .detail-body .footer-action a {
        display: inline-block !important;
        background-color: var(--accent-color) !important;
        color: #ffffff !important;
        font-family: var(--font-heading) !important;
        font-weight: 700 !important;
        font-size: 0.85rem !important;
        padding: 10px 22px !important;
        border-radius: 6px !important;
        text-decoration: none !important;
    }
    .detail-body .footer-action .btn:hover,
    .detail-body .footer-action a:hover {
        background-color: #d45a00 !important;
    }
    /* Hide inline company logo headers from descriptions */
    .detail-body div[style*="display:flex"][style*="align-items:center"]:has(> img[src*="img.logo.dev"]) { display: none !important; }

    .detail-footer-meta {
        font-size: 0.82rem;
        color: #9ca3af;
    }

    /* ===== Pre-Apply Resume Modal (job list) ===== */
    .jl-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .jl-modal-overlay[hidden] { display: none; }
    .jl-modal-content {
        background: #fff;
        border-radius: 12px;
        max-width: 520px;
        width: 100%;
        padding: 32px;
        position: relative;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        animation: jl-modal-in 0.2s ease-out;
    }
    @keyframes jl-modal-in {
        from { opacity: 0; transform: translateY(12px) scale(0.97); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .jl-modal-close {
        position: absolute;
        top: 12px;
        right: 16px;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #9ca3af;
        cursor: pointer;
        line-height: 1;
        padding: 4px;
    }
    .jl-modal-close:hover { color: #374151; }
    .jl-modal-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 4px;
    }
    .jl-modal-subtitle {
        font-size: 0.9rem;
        color: #6b7280;
        margin-bottom: 24px;
    }
    .jl-modal-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .jl-modal-option {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        text-decoration: none;
        color: #1f2937;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
    .jl-modal-option:hover {
        border-color: var(--primary-color);
        box-shadow: 0 2px 8px rgba(8, 16, 128, 0.08);
        background: #f8f9ff;
    }
    .jl-modal-option--primary {
        border-color: var(--primary-color);
        background: #f0f1ff;
    }
    .jl-modal-option-icon {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #f3f4f6;
        color: #6b7280;
    }
    .jl-modal-option--primary .jl-modal-option-icon {
        background: #e0e3ff;
        color: var(--primary-color);
    }
    .jl-modal-option-text {
        flex: 1;
    }
    .jl-modal-option-text strong {
        display: block;
        font-size: 0.95rem;
        margin-bottom: 2px;
    }
    .jl-modal-option-text span {
        font-size: 0.82rem;
        color: #6b7280;
    }

    /* Step 2: Upload zone */
    .jl-modal-back {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: none;
        border: none;
        color: #6b7280;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        padding: 0;
        margin-bottom: 12px;
    }
    .jl-modal-back:hover { color: var(--primary-color); }
    .jl-upload-zone {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 40px 24px;
        border: 2px dashed #d1d5db;
        border-radius: 12px;
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease;
        text-align: center;
    }
    .jl-upload-zone:hover {
        border-color: var(--primary-color);
        background: #f8f9ff;
    }
    .jl-upload-zone.jl-upload-zone--dragover {
        border-color: var(--primary-color);
        background: #eef0ff;
    }
    .jl-upload-zone svg { color: #9ca3af; }
    .jl-upload-zone strong { font-size: 0.95rem; color: #1f2937; }
    .jl-upload-zone span { font-size: 0.85rem; color: #6b7280; }
    .jl-upload-formats { font-size: 0.78rem !important; color: #9ca3af !important; margin-top: 4px; }

    .jl-upload-parsing:not([hidden]),
    .jl-upload-success:not([hidden]),
    .jl-upload-error:not([hidden]) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 40px 24px;
        text-align: center;
    }
    .jl-upload-parsing strong, .jl-upload-success strong, .jl-upload-error strong {
        font-size: 0.95rem;
        color: #1f2937;
    }
    .jl-upload-parsing span, .jl-upload-success span, .jl-upload-error span {
        font-size: 0.85rem;
        color: #6b7280;
    }
    .jl-upload-spinner {
        width: 36px;
        height: 36px;
        border: 3px solid #e5e7eb;
        border-top-color: var(--primary-color);
        border-radius: 50%;
        animation: jl-spin 0.8s linear infinite;
    }
    @keyframes jl-spin { to { transform: rotate(360deg); } }
    .jl-upload-continue-btn {
        margin-top: 8px;
        padding: 10px 24px;
        background: var(--accent-color);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease;
    }
    .jl-upload-continue-btn:hover { background: var(--accent-hover); }
    .jl-upload-retry-btn {
        padding: 6px 16px;
        background: none;
        color: #6b7280;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 0.82rem;
        cursor: pointer;
        transition: border-color 0.15s ease, color 0.15s ease;
    }
    .jl-upload-retry-btn:hover { border-color: #9ca3af; color: #374151; }
    .jl-upload-cancel-btn {
        padding: 6px 16px;
        background: none;
        color: #6b7280;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 0.82rem;
        cursor: pointer;
        margin-top: 4px;
        transition: border-color 0.15s ease, color 0.15s ease;
    }
    .jl-upload-cancel-btn:hover { border-color: #9ca3af; color: #374151; }
    .jl-upload-hint {
        font-size: 0.78rem;
        color: #9ca3af;
        font-style: italic;
    }
    button.jl-modal-option {
        width: 100%;
        background: none;
        text-align: left;
        font: inherit;
        cursor: pointer;
    }