.settings-inner-subtabs {
            display: flex;
            gap: 8px;
            margin: 0 0 10px 0;
        }

        .settings-inner-subtab {
            padding: 8px 15px;
            background: #f5f5f5;
            border: none;
            color: #666;
            border-radius: 4px 4px 0 0;
        }

        .settings-inner-subtab.active {
            background: rgb(209, 228, 226);
            color: #000;
            font-weight: 600;
        }

        .settings-inner-subtab-content {
            display: none;
        }

        :root {
            --j-teal: rgb(100,150,145);
            --j-teal-d: #1f7a64;
            --j-teal-dd: #176c58;
            --j-teal-tint: #eef4f3;
            --j-ink: #0f172a;
            --j-slate-800: #1e293b;
            --j-slate-700: #334155;
            --j-slate-600: #475569;
            --j-slate-500: #64748b;
            --j-slate-400: #94a3b8;
            --j-border: #e2e8f0;
            --j-border-in: #cbd5e1;
            --j-panel: #f8fafc;
            --j-panel-2: #f1f5f9;
            --j-good: #1f7a64;
            --j-good-bg: #eaf5f0;
            --j-mid: #b07d18;
            --j-mid-bg: #fbf3e2;
            --j-star: #e0a528;
        }

        /* SaaS redesign tokens (sidebar, Applications grid, Jobs grid) — light + dark */
        :root {
            --slate-0: #ffffff; --slate-50: #f8fbfd; --slate-75: #f5f7fa;
            --slate-100: #f2f5f9; --slate-200: #e6edf4; --slate-300: #d9e1ea;
            --slate-400: #c7d7e7; --slate-500: #9aafbf; --slate-600: #6f8092; --slate-700: #44576b;
            --slate-800: #2f4a63; --slate-900: #1a2b3c; --ink: #243b53;
            --blue-50: #eef5fb; --blue-200: #cfe1f2;
            --blue-500: #2563eb; --blue-600: #1d4ed8; --blue-700: #1e40af;
            --green-50: #edf7f0; --green-500: #1f8a5b; --green-700: #047857;
            --amber-50: #fff6e6; --amber-300: #f0cf88; --amber-500: #d99a2b; --amber-700: #8f6513;
            --red-50: #fbefef; --red-500: #e0523e; --red-700: #b91c1c;
            --indigo-50: #eef2ff; --indigo-600: #4338ca;
            --accent: var(--blue-500); --accent-hover: var(--blue-600); --accent-soft: rgba(37, 99, 235, .08);
            --bg-app: var(--slate-100); --surface: var(--slate-0);
            --border: var(--slate-200); --border-strong: var(--slate-300);
            --sb-w: 264px; --radius: 14px; --radius-sm: 10px;
            --shadow-card: 0 1px 2px rgba(16, 32, 54, .04), 0 4px 16px rgba(16, 32, 54, .05);
            --shadow-pop: 0 18px 44px rgba(15, 23, 42, .16);
            --ring-track: #f1f5f9;
            --pill-active-bg: #1a2b3c; --pill-active-fg: #ffffff;
        }

        :root[data-theme="dark"] {
            --slate-0: #141d2b; --slate-50: #141d2b; --slate-75: #17202e;
            --slate-100: #1b2635; --slate-200: #25344a; --slate-300: #2d3f58;
            --slate-400: #3a4f6b; --slate-500: #6b7c93; --slate-600: #93a3b8; --slate-700: #b7c3d1;
            --slate-800: #d3dce6; --slate-900: #eef2f7; --ink: #dbe4ee;
            --blue-50: rgba(59, 130, 246, .14); --blue-200: #3b5f8a;
            --blue-500: #3b82f6; --blue-600: #8ab4f8; --blue-700: #93c5fd;
            --green-50: rgba(31, 138, 91, .16); --green-500: #2fae74; --green-700: #6fcf9a;
            --amber-50: rgba(217, 154, 43, .16); --amber-300: #f0cf88; --amber-500: #e0ab3f; --amber-700: #f0cf88;
            --red-50: rgba(224, 82, 62, .16); --red-500: #e0523e; --red-700: #f5a08e;
            --indigo-50: rgba(67, 56, 202, .22); --indigo-600: #a5b4fc;
            --accent: var(--blue-500); --accent-hover: #5b9bf7; --accent-soft: rgba(59, 130, 246, .16);
            --bg-app: #0b1420; --surface: var(--slate-0);
            --border: var(--slate-200); --border-strong: var(--slate-300);
            --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
            --shadow-pop: 0 20px 48px rgba(0, 0, 0, .6);
            --ring-track: #26364c;
            --pill-active-bg: #eef2f7; --pill-active-fg: #0b1420;

            /* dark values for the pre-existing --j-* tokens (Jobs/Applications chrome, ~234 call sites) */
            --j-teal: rgb(120, 170, 165);
            --j-teal-d: #2dbf98;
            --j-teal-dd: #23a883;
            --j-teal-tint: rgba(31, 138, 91, .12);
            --j-ink: #e7edf5;
            --j-slate-800: #e2e8f0;
            --j-slate-700: #c7d2e0;
            --j-slate-600: #93a3b8;
            --j-slate-500: #7c8ba0;
            --j-slate-400: #4b5a70;
            --j-border: var(--border);
            --j-border-in: var(--border-strong);
            --j-panel: var(--slate-75);
            --j-panel-2: var(--slate-100);
            --j-good: var(--green-700);
            --j-good-bg: var(--green-50);
            --j-mid: var(--amber-700);
            --j-mid-bg: var(--amber-50);
            --j-star: var(--amber-500);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: var(--bg-app);
            color: var(--ink);
        }

        body.auth-pending {
            visibility: hidden;
        }

        body.auth-ready {
            visibility: visible;
        }

        .mobile-shell,
        .mobile-only {
            display: none;
        }

        body.mobile-ui-active .mobile-only {
            display: block;
        }

        body.mobile-ui-active .mobile-shell {
            display: grid;
        }

        body.mobile-ui-active .container {
            min-height: 100dvh;
            height: auto;
        }

        body.mobile-ui-active .editor-panel {
            width: 100%;
            border-right: none;
            padding: 12px 12px 96px;
        }

        body.mobile-ui-active .preview-panel {
            display: none;
        }

        .mobile-topbar {
            gap: 10px;
            margin-bottom: 12px;
        }

        .mobile-topbar-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 12px 14px;
            border: 1px solid #dce6f1;
            border-radius: 14px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
            box-shadow: 0 8px 22px rgba(31, 59, 87, 0.08);
        }

        .mobile-topbar-copy {
            min-width: 0;
        }

        .mobile-topbar-eyebrow {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #6f8092;
        }

        .mobile-topbar-title {
            margin-top: 4px;
            font-size: 15px;
            font-weight: 700;
            color: #243b53;
        }

        .mobile-topbar-subtitle {
            margin-top: 3px;
            font-size: 12px;
            color: #6b7f92;
        }

        .mobile-topbar-action {
            flex: 0 0 auto;
            min-height: 36px;
            padding: 0 12px;
            border: 1px solid #cfe0ee;
            border-radius: 10px;
            background: #fff;
            color: #37516b;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        .mobile-quick-apply {
            gap: 10px;
            margin-bottom: 14px;
            padding: 14px;
            border: 1px solid #d7e2ed;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffffff 0%, #f6fafe 100%);
            box-shadow: 0 10px 24px rgba(52, 73, 94, 0.08);
        }

        .mobile-section-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .mobile-section-title h3 {
            margin: 0;
            font-size: 15px;
            color: #21384f;
        }

        .mobile-section-caption {
            font-size: 11px;
            color: #6c8194;
        }

        .mobile-quick-apply-grid {
            display: grid;
            gap: 10px;
        }

        .mobile-quick-apply select,
        .mobile-quick-apply input {
            width: 100%;
            min-height: 40px;
            padding: 9px 12px;
            border: 1px solid #d1dce7;
            border-radius: 10px;
            background: #fff;
            color: #34495e;
            font-size: 14px;
        }

        .mobile-quick-apply-actions {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
        }

        .mobile-quick-apply-btn {
            min-height: 42px;
            border: 1px solid #bfd5c2;
            border-radius: 11px;
            background: linear-gradient(135deg, #dbefde 0%, #c9e2ce 100%);
            color: #35553c;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
        }

        .mobile-quick-apply-secondary {
            min-height: 42px;
            padding: 0 12px;
            border: 1px solid #d3deea;
            border-radius: 11px;
            background: #fff;
            color: #45627b;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        .mobile-profile-summary {
            gap: 8px;
            margin-bottom: 14px;
            padding: 14px;
            border: 1px solid #d8e3ee;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        }

        .mobile-profile-summary-name {
            font-size: 15px;
            font-weight: 700;
            color: #243b53;
        }

        .mobile-profile-summary-role {
            margin-top: 2px;
            font-size: 12px;
            color: #5f7488;
        }

        .mobile-profile-summary-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .mobile-profile-summary-pill {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 0 9px;
            border-radius: 999px;
            background: #eef4fa;
            color: #4a647c;
            font-size: 11px;
            font-weight: 700;
        }

        .mobile-bottom-nav {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 6px;
            padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
            border-top: 1px solid #dce6f1;
            background: rgba(250, 252, 254, 0.96);
            backdrop-filter: blur(14px);
        }

        .mobile-bottom-nav-btn {
            display: grid;
            gap: 3px;
            justify-items: center;
            min-height: 58px;
            padding: 7px 4px 6px;
            border: 1px solid transparent;
            border-radius: 14px;
            background: transparent;
            color: #6b7f92;
            font-size: 10px;
            font-weight: 700;
            cursor: pointer;
        }

        .mobile-bottom-nav-btn.is-active {
            border-color: #cfe0ee;
            background: #fff;
            color: #24415c;
            box-shadow: 0 6px 16px rgba(36, 65, 92, 0.08);
        }

        .mobile-bottom-nav-icon {
            font-size: 16px;
            line-height: 1;
        }

        @media (min-width: 481px) {
            body.mobile-ui-active .mobile-shell,
            body.mobile-ui-active .mobile-only {
                display: none;
            }
        }

        .container {
            display: flex;
            height: 100vh;
        }

        /* Application Progress Indicator */
        .application-progress {
            padding: 7px 11px;
            font-size: 12px;
            align-items: center;
            margin-bottom: 25px;
            padding: 15px 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .application-progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            position: relative;
            cursor: default;
        }

        .application-progress-step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 15px;
            left: 50%;
            width: 100%;
            height: 3px;
            background: #dee2e6;
            z-index: 0;
        }

        .application-progress-step.completed:not(:last-child)::after {
            background: #27ae60;
        }

        .application-progress-step.active:not(:last-child)::after {
            background: linear-gradient(90deg, #27ae60 0%, #dee2e6 100%);
        }

        .application-progress-circle {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            background: #dee2e6;
            color: #6c757d;
            border: 3px solid #dee2e6;
            z-index: 1;
            transition: all 0.3s ease;
        }

        .jobs-results-favorites-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 12px;
            border-bottom: 1px solid #e6edf4;
            background: linear-gradient(180deg, #fcfdff 0%, #f6f9fc 100%);
        }

        .jobs-results-favorites-toggle {
            height: 30px;
            border: 1px solid #d4dfea;
            border-radius: 8px;
            padding: 0 10px;
            background: #ffffff;
            color: #47627b;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }

        .jobs-results-favorites-toggle:hover {
            border-color: #b8cbdd;
            background: #f7fbff;
        }

        .jobs-results-favorites-toggle.is-active {
            border-color: #f0cf88;
            background: #fff6e6;
            color: #8f6513;
        }

        .jobs-starred-shelf {
            margin-bottom: 12px;
        }

        .jobs-starred-panel {
            border: 1px solid #d9e3ed;
            border-radius: 14px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
            overflow: hidden;
        }

        .jobs-starred-panel.is-empty {
            background: linear-gradient(180deg, #fbfdff 0%, #f5f8fb 100%);
            box-shadow: none;
        }

        .jobs-starred-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 12px 14px;
            border-bottom: 1px solid #e2eaf2;
        }

        .jobs-starred-panel.is-empty .jobs-starred-header {
            border-bottom-color: #e6edf4;
        }

        .jobs-starred-title {
            font-size: 13px;
            font-weight: 800;
            color: #2f4a63;
            letter-spacing: 0.01em;
        }

        .jobs-starred-panel.is-empty .jobs-starred-title {
            color: #46627b;
        }

        .jobs-starred-subtitle {
            margin-top: 2px;
            font-size: 11px;
            color: #6f8296;
        }

        .jobs-starred-panel.is-empty .jobs-starred-subtitle {
            color: #6f8296;
        }

        .jobs-starred-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 60px;
            height: 28px;
            padding: 0 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid #d8e3ee;
            color: #5f7890;
            font-size: 11px;
            font-weight: 800;
        }

        .jobs-starred-panel.is-empty .jobs-starred-count {
            border-color: #d8e3ee;
            color: #5f7890;
        }

        .jobs-starred-list {
            display: grid;
            gap: 10px;
            padding: 12px 14px 14px;
        }

        .jobs-starred-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 12px;
            align-items: center;
            padding: 12px;
            border-radius: 12px;
            border: 1px solid #dce5ee;
            background: rgba(255, 255, 255, 0.88);
        }

        .jobs-starred-main {
            min-width: 0;
        }

        .jobs-starred-role {
            font-size: 13px;
            font-weight: 700;
            color: #29465f;
            text-decoration: none;
        }

        .jobs-starred-meta {
            margin-top: 4px;
            font-size: 11px;
            color: #61788f;
            display: flex;
            flex-wrap: wrap;
            gap: 6px 10px;
        }

        .jobs-starred-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }

        .jobs-starred-badge {
            display: inline-flex;
            align-items: center;
            height: 22px;
            padding: 0 8px;
            border-radius: 999px;
            background: #edf3f8;
            color: #55708a;
            font-size: 10px;
            font-weight: 700;
        }

        .jobs-starred-badge.is-muted {
            background: #edf3f8;
            color: #55708a;
        }

        .jobs-starred-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
        }

        .jobs-starred-action {
            height: 32px;
            padding: 0 12px;
            border-radius: 9px;
            border: 1px solid #d1dce7;
            background: #ffffff;
            color: #45627b;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }

        .jobs-starred-action:hover {
            border-color: #b8cadc;
            background: #f8fbfe;
        }

        .jobs-starred-action.is-primary {
            border-color: #c7dbca;
            background: linear-gradient(135deg, #dbefde 0%, #c9e2ce 100%);
            color: #446f4c;
        }

        .jobs-starred-action.is-danger {
            border-color: #efd4d4;
            color: #a04e4e;
        }

        .jobs-starred-empty {
            padding: 0 14px 14px;
            font-size: 12px;
            color: #6f8296;
        }

        @media (max-width: 860px) {
            .jobs-starred-item {
                grid-template-columns: 1fr;
            }

            .jobs-starred-actions {
                justify-content: flex-start;
            }
        }
        
        .application-progress-step.completed .application-progress-circle {
            background: #27ae60;
            color: white;
            border-color: #27ae60;
        }
        
        .application-progress-step.active .application-progress-circle {
            background: #3498db;
            color: white;
            border-color: #3498db;
            box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
        }
        
        .application-progress-label {
            font-size: 10px;
            color: #6c757d;
            margin-top: 6px;
            text-align: center;
            max-width: 70px;
            line-height: 1.2;
        }
        
        .application-progress-step.completed .application-progress-label,
        .application-progress-step.active .application-progress-label {
            color: #2c3e50;
            font-weight: 600;
        }

        /* ─── Jobs full-page layout ────────────────────────────── */
        .container.jobs-active .editor-panel {
            width: 100%;
            border-right: none;
            padding: 0;
            background: var(--bg-app);
        }

        .container.jobs-active .preview-panel {
            display: none;
        }

        /* Keep profile in explicit 2-pane mode */
        .container.profile-active {
            flex-direction: row !important;
        }

        .container.single-pane-active .editor-panel {
            width: 100%;
            flex: 1 1 100%;
            border-right: none;
        }

        .container.single-pane-active .preview-panel {
            display: none;
        }

        .container.profile-active .editor-panel {
            width: 48% !important;
            border-right: 1px solid #ddd !important;
        }

        .container.profile-active .preview-panel {
            display: flex !important;
            width: 52% !important;
        }

        #jobsMode,
        #peopleMode {
            max-width: 1620px;
            margin: 0 auto;
            padding: 8px 32px 28px;
        }

        #jobsMode .section {
            background: transparent;
            border: none;
            padding: 0;
            margin: 0;
        }

        #jobsMode .section h2,
        #peopleMode .section h2 {
            margin: 0 0 18px;
            font-size: 18px;
            font-weight: 700;
            color: var(--slate-900);
            letter-spacing: -0.2px;
        }

        #jobsMode .jobs-mode-content,
        #peopleMode .jobs-mode-content {
            display: flex;
            gap: 0;
            align-items: stretch;
        }

        #jobsMode .jobs-main-content,
        #peopleMode .jobs-main-content {
            flex: 1;
            min-width: 0;
            padding: 18px 20px;
            display: flex;
            flex-direction: column;
        }

        /* ─── Jobs redesign (Chunk A) ────────────────────────────── */
        #jobsMode .jobs-mode-content,
        #peopleMode .jobs-mode-content { flex-direction: column; }

        .jf-top {
            display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
            padding: 15px 20px 0;
        }
        #jobsMode .jf-top h2,
        #peopleMode .jf-top h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.2px; }

        .view-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border-strong); background: var(--slate-75); border-radius: 12px; margin-bottom: 16px; align-self: flex-start; }
        .vsw { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px; border: none; border-radius: 9px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--slate-600); cursor: pointer; }
        .vsw:hover { color: var(--slate-900); }
        .vsw.active { background: var(--pill-active-bg); color: var(--pill-active-fg); box-shadow: none; }
        .vsw .c { font-size: 10.5px; font-weight: 800; color: var(--slate-600); background: var(--slate-200); padding: 1px 7px; border-radius: 999px; }
        .vsw.active .c { background: color-mix(in srgb, var(--pill-active-fg) 20%, transparent); color: var(--pill-active-fg); }

        .recent-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
        .recent-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--slate-500); }
        .recent-label svg { width: 13px; height: 13px; stroke: currentColor; }
        .recent-chip { display: inline-flex; align-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; transition: border-color .13s; }
        .recent-chip:hover { border-color: var(--border-strong); }
        .recent-chip .go { border: none; background: none; font-size: 12px; font-weight: 600; color: var(--slate-700); padding: 6px 6px 6px 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
        .recent-chip .go:hover { color: var(--accent); }
        .recent-chip .c { background: var(--slate-200); color: var(--slate-600); border-radius: 999px; padding: 1px 6px; font-size: 10.5px; font-weight: 700; }
        .recent-chip .t { font-size: 10.5px; color: var(--slate-500); font-weight: 600; }
        .recent-chip .rm { border: none; background: none; padding: 6px 10px 6px 4px; color: var(--slate-400); cursor: pointer; }
        .recent-chip .rm:hover { color: var(--red-700); }
        .recent-more, .recent-clear { border: none; background: none; font-size: 12px; font-weight: 700; color: var(--slate-500); cursor: pointer; padding: 0; }
        .recent-more:hover { color: var(--slate-800); }
        .recent-clear:hover { color: var(--red-700); }
        .recent-chip.active .go { color: var(--accent); }

        .panel { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
        .search-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); background-image: linear-gradient(180deg, var(--slate-0) 0%, var(--slate-50) 100%); box-shadow: var(--shadow-card); margin-bottom: 14px; padding: 16px 18px; }
        :root[data-theme="dark"] .search-panel { background-image: none; }
        .panel-h { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
        .panel-h .pt { font-size: 13px; font-weight: 800; color: var(--ink); }
        .panel-h .ct { font-size: 10.5px; font-weight: 800; color: var(--slate-600); background: var(--slate-100); border: 1px solid var(--border); padding: 1px 8px; border-radius: 999px; }
        .panel-h .hint { margin-left: auto; font-size: 11.5px; color: var(--slate-500); }

        .results-wrap { margin-top: 16px; }
        .bottom-switch { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); }
        .bsw { display: inline-flex; align-items: center; gap: 7px; padding: 11px 13px; border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--slate-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
        .bsw:hover { color: var(--slate-700); }
        .bsw.active { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
        .bsw .c { font-size: 10.5px; font-weight: 800; color: var(--slate-600); background: var(--slate-200); padding: 1px 7px; border-radius: 999px; }
        .bsw.active .c { color: var(--accent); background: var(--accent-soft); }
        #jobsResultsTopBar.results-top { display: flex; align-items: center; padding: 10px 2px; }
        .sortbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-family: inherit; font-size: 12px; font-weight: 700; color: var(--slate-700); cursor: pointer; }
        .sortbtn:hover { background: var(--slate-50); }
        .sortbtn .chev { font-size: 10px; color: var(--slate-500); }

        .sjb-intro { font-size: 13px; color: var(--j-slate-600); line-height: 1.55; margin: 0 0 16px; max-width: 640px; }
        .sjb-add { border: 1px solid var(--j-border); border-radius: 13px; background: #fff; padding: 14px; margin-bottom: 20px; }
        .sjb-compose { display: flex; align-items: center; gap: 9px; height: 48px; border: 1px solid var(--j-border-in); border-radius: 11px; padding: 0 8px 0 13px; background: #fff; }
        .sjb-compose:focus-within { border-color: var(--j-teal); box-shadow: 0 0 0 3px rgba(100,150,145,.16); }
        .sjb-compose .lk { color: var(--j-slate-400); flex-shrink: 0; }
        .sjb-compose input { flex: 1; min-width: 0; border: none; outline: none; font-size: 13.5px; color: var(--j-ink); font-family: inherit; background: transparent; }
        .sjb-compose input::placeholder { color: var(--j-slate-400); }
        .sjb-addbtn { height: 34px; padding: 0 15px; border: none; border-radius: 8px; background: var(--j-teal-d); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
        .sjb-addbtn:hover { background: var(--j-teal-dd); }
        .sjb-addbtn:disabled { background: var(--j-panel-2); color: var(--j-slate-400); cursor: not-allowed; }
        .sjb-dropzone { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1.5px dashed var(--j-border-in); border-radius: 11px; padding: 16px; background: var(--j-panel); cursor: pointer; }
        .sjb-dropzone:hover { border-color: var(--j-teal); background: var(--j-teal-tint); }
        .sjb-dropzone.sjb-screenshot-btn--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
        .sjb-dropzone .di { width: 34px; height: 34px; border-radius: 9px; background: #fff; border: 1px solid var(--j-border); display: flex; align-items: center; justify-content: center; color: var(--j-slate-500); flex-shrink: 0; }
        .sjb-dropzone .dz-t { font-size: 13px; font-weight: 700; color: var(--j-slate-700); }
        .sjb-dropzone .dz-h { font-size: 11.5px; color: var(--j-slate-400); margin-top: 1px; display: block; }
        .sjb-sources-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
        .sjb-sources-h .st { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--j-slate-500); }
        .sjb-sources-h .sh { font-size: 12px; color: var(--j-slate-400); }
        .sjb-src-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
        .sjb-src { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--j-border); border-radius: 11px; background: #fff; }
        .sjb-src .thumb { width: 36px; height: 36px; border-radius: 9px; background: var(--j-panel-2); display: flex; align-items: center; justify-content: center; color: var(--j-slate-500); font-size: 15px; flex-shrink: 0; overflow: hidden; }
        .sjb-src .thumb img { width: 100%; height: 100%; object-fit: cover; }
        .sjb-src .sbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .sjb-src .srole { font-size: 13px; font-weight: 600; color: var(--j-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .sjb-src .ssrc { font-size: 11px; font-weight: 700; color: var(--j-slate-400); text-transform: uppercase; letter-spacing: .04em; }
        .sjb-src .sx { width: 28px; height: 28px; border: 1px solid var(--j-border); border-radius: 8px; background: #fff; color: var(--j-slate-400); cursor: pointer; font-size: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
        .sjb-src .sx:hover { background: var(--j-panel-2); color: var(--j-slate-600); }

        /* Chrome-extension recent matches — collapsed-by-default section under a saved link
           whose platform has recently-reported "Sort by CV match" results. Native <details>,
           same chevron-rotate approach as #applicationModal .mv2-section (scoped separately
           since that one is ID-scoped to the modal). */
        .sjb-src-wrap { display: flex; flex-direction: column; gap: 6px; }
        .sjb-matches { margin-top: -2px; border: 1px solid var(--j-border); border-top: none; border-radius: 0 0 11px 11px; background: var(--j-panel-2); }
        .sjb-matches-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 13px; font-size: 12px; font-weight: 600; color: var(--j-slate-500); }
        .sjb-matches-summary::-webkit-details-marker { display: none; }
        .sjb-matches-summary:hover { color: var(--j-slate-600); }
        .sjb-matches-chevron { flex-shrink: 0; color: var(--j-slate-400); transition: transform .15s ease; }
        .sjb-matches[open] .sjb-matches-chevron { transform: rotate(180deg); }
        .sjb-matches-body { display: flex; flex-direction: column; gap: 8px; padding: 0 13px 11px; border-top: 1px solid var(--j-border); }
        .sjb-match-row { display: flex; align-items: center; gap: 9px; padding-top: 9px; border-top: 1px solid var(--j-border); }
        .sjb-match-row:first-child { border-top: none; padding-top: 0; }
        .sjb-match-badge { flex-shrink: 0; padding: 2px 7px; border-radius: 9px; font-size: 11px; font-weight: 700; color: #fff; }
        .sjb-match-body { flex: 1; min-width: 0; }
        .sjb-match-title { display: block; font-size: 12.5px; font-weight: 600; color: var(--j-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .sjb-match-title:hover { text-decoration: underline; }
        .sjb-match-note { color: #b7791f; font-weight: 600; }
        .sjb-match-info { font-size: 11px; color: var(--j-slate-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .sjb-match-info .hl { color: #16794c; font-weight: 700; }
        .sjb-match-connects { flex-shrink: 0; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; color: var(--j-slate-500); background: #fff; }
        .sjb-match-actions { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
        .sjb-match-apply { padding: 3px 10px; font-size: 11px; font-weight: 600; border-radius: 6px; border: 1px solid #2563eb; background: #fff; color: #2563eb; cursor: pointer; }
        .sjb-match-apply:hover { background: #2563eb; color: #fff; }
        .sjb-match-hide { border: none; background: none; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 4px; opacity: .45; transition: opacity .15s; }
        .sjb-match-hide:hover { opacity: 1; }

        /* Jobs Report — modal criteria/keyword-pill picker + the merged-results panel. Reuses
           the same visual language as .sjb-match-* above (score badge/note/info-segment/
           connects styling) for consistency across every "Jobs" panel surface. */
        .jr-criteria { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
        .jr-criterion { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--j-border); border-radius: 8px; background: var(--j-panel-2); }
        .jr-crit-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--j-slate-400); }
        .jr-crit-value { font-size: 13px; font-weight: 600; color: var(--j-ink); }
        .jr-keywords-label { font-size: 12px; font-weight: 700; color: var(--j-slate-500); margin-bottom: 8px; }
        .jr-keywords-loading, .jr-keywords-error { font-size: 13px; color: var(--j-slate-400); padding: 8px 0; }
        .jr-keywords-error { color: #c0392b; }
        .jr-keyword-pills { display: flex; flex-wrap: wrap; gap: 8px; }
        .jr-pill { padding: 7px 14px; font-size: 13px; font-weight: 600; border-radius: 999px; border: 1px solid var(--j-border); background: #fff; color: var(--j-ink); cursor: pointer; }
        .jr-pill:hover { border-color: #2563eb; color: #2563eb; }
        .jr-pill.active { border-color: #2563eb; background: #2563eb; color: #fff; }
        .jr-custom-keyword { display: flex; gap: 8px; margin-top: 10px; }
        .jr-custom-keyword input { flex: 1; padding: 7px 10px; font-size: 13px; border: 1px solid var(--j-border); border-radius: 8px; }
        .jr-custom-keyword button { padding: 7px 14px; font-size: 13px; font-weight: 600; border-radius: 8px; border: 1px solid #2563eb; background: #fff; color: #2563eb; cursor: pointer; }
        .jr-custom-keyword button:disabled { opacity: .4; cursor: default; }

        .jr-progress { display: flex; align-items: center; gap: 10px; padding: 16px; font-size: 13px; color: var(--j-slate-500); }
        .jr-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--j-slate-400); }
        .jr-scan-summary { padding: 8px 12px; font-size: 11.5px; color: var(--j-slate-400); border-bottom: 1px solid var(--j-border); }
        .jr-scan-summary-warn { color: #b7791f; }
        .jr-header { font-weight: 700; padding: 10px 12px 6px; color: var(--j-ink); }
        /* .sjb-match-badge/-body/-title/-note/-info/-connects/-actions/-apply/-hide (defined
           above) are reused directly for report rows — same visual language, no parallel set. */
        .jr-row { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--j-border); }
        .jr-row:last-child { border-bottom: none; }
        .jr-platform { display: inline-block; margin-top: 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--j-slate-400); }

        /* ===== SECTION: Find Similar Jobs by URL/screenshot — widget (.sjb-*) ===== */
        .sjb-consent { display: flex; align-items: flex-start; gap: 9px; font-size: 11.5px; color: var(--j-slate-500); line-height: 1.5; margin-bottom: 16px; cursor: pointer; }
        .sjb-consent .cb { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; background: var(--j-panel-2); border: 1px solid var(--j-border-in); color: transparent; font-size: 11px; font-weight: 800; }
        .sjb-consent.is-checked .cb { background: var(--j-teal-d); border-color: var(--j-teal-d); color: #fff; }
        .sjb-consent a { color: var(--j-teal-d); font-weight: 600; }
        .sjb-cta-row { display: flex; align-items: center; gap: 14px; }
        .sjb-find { height: 48px; padding: 0 22px; border: none; border-radius: 11px; background: var(--j-teal-d); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; }
        .sjb-find:hover { background: var(--j-teal-dd); }
        .sjb-find:disabled { background: var(--j-panel-2); color: var(--j-slate-400); cursor: not-allowed; }
        .sjb-results { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--j-border); }
        .sjb-results-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 13px; flex-wrap: wrap; }
        .sjb-results-h .rt { font-size: 14px; font-weight: 800; color: var(--j-ink); }
        .sjb-results-h .rcount { font-size: 11.5px; font-weight: 800; color: var(--j-teal-d); background: var(--j-teal-tint); padding: 1px 9px; border-radius: 999px; }
        .sjb-results-h .rbasis { margin-left: auto; font-size: 11.5px; color: var(--j-slate-400); }


        /* ─── Applications full-page layout ─────────────────────── */
        #applicationsMode {
            max-width: 1620px;
            margin: 0 auto;
            padding: 14px 32px 28px;
        }

        #applicationsMode .section {
            background: transparent;
            border: none;
            padding: 0;
            margin: 0;
        }

        #applicationsMode .section h2 {
            margin: 0 0 18px;
            font-size: 18px;
            font-weight: 700;
            color: var(--slate-900);
            letter-spacing: -0.2px;
        }

        #applicationsMode .applications-mode-content {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        #applicationsSidebar {
            width: 300px;
            flex-shrink: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px;
            box-shadow: var(--shadow-card);
        }

        #applicationsMain {
            flex: 1;
            min-width: 0;
        }

        #applicationsSidebar .applications-stats-container {
            margin-bottom: 0;
        }

        #applicationsSidebar .applications-time-filters {
            margin-bottom: 12px;
            display: flex;
            flex-wrap: nowrap;
            gap: 4px;
        }

        #applicationsSidebar .applications-time-filters .btn-filter-minimal {
            flex: 1 1 0;
            min-width: 0;
            justify-content: center;
            padding: 7px 8px;
            font-size: 12px;
        }

        #applicationsSidebar #applicationsStats {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }
        /* ===== SECTION: Application list styles (.applications-*) ===== */
        .applications-stats {
            color: var(--slate-700);
            font-weight: 600;
            background: var(--surface);
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 15px;
            box-shadow: var(--shadow-card);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .applications-stats .stats-count,
        .applications-stats .stats-label {
            color: var(--slate-700);
            font-weight: 600;
        }

        .applications-status-period-filters {
            margin-bottom: 12px;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .applications-status-board {
            display: grid;
            gap: 12px;
        }

        .applications-status-primary-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .applications-status-primary-card {
            background: #fff;
            border: 1px solid #dde8f2;
            border-radius: 12px;
            padding: 14px 14px 12px;
            display: grid;
            gap: 6px;
            align-content: start;
            box-shadow: 0 1px 3px rgba(31, 45, 61, 0.04);
        }

        .applications-status-primary-card[data-status="applied"] {
            border-color: #d5e2ef;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
        }

        .applications-status-primary-card[data-status="interview"] {
            border-color: #dce3ef;
            background: linear-gradient(180deg, #ffffff 0%, #f9fafe 100%);
        }

        .applications-status-primary-card[data-status="hired"] {
            border-color: #d9e8de;
            background: linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%);
        }

        .applications-status-primary-card.is-muted {
            border-color: #e6edf3;
            background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
        }

        .applications-status-value {
            font-size: 28px;
            line-height: 1;
            font-weight: 800;
            color: #44576b;
            letter-spacing: -0.03em;
        }

        .applications-status-primary-card[data-status="hired"] .applications-status-value {
            color: #4f6d5c;
        }

        .applications-status-primary-card.is-muted .applications-status-value,
        .applications-status-primary-card.is-muted .applications-status-label,
        .applications-status-primary-card.is-muted .applications-status-subtitle {
            color: #8b99a6;
        }

        .applications-status-label {
            font-size: 11px;
            line-height: 1.2;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #6f8092;
        }

        .applications-status-subtitle {
            font-size: 11px;
            color: #8a99a8;
            line-height: 1.2;
        }

        .applications-status-primary-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .applications-status-delta {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 7px;
            border-radius: 999px;
            font-size: 10px;
            line-height: 1;
            font-weight: 700;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        .applications-status-delta.positive {
            background: #edf7f0;
            color: #587964;
        }

        .applications-status-delta.negative {
            background: #fbefef;
            color: #9b6161;
        }

        .applications-status-delta.neutral {
            background: #f2f5f7;
            color: #81909d;
        }

        .applications-status-secondary-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .applications-status-secondary-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid #e6edf4;
            border-radius: 10px;
            background: #fbfcfd;
        }

        .applications-status-secondary-item .applications-status-label {
            font-size: 12px;
            letter-spacing: 0.01em;
            text-transform: none;
            color: #708090;
            font-weight: 600;
        }

        .applications-status-secondary-value {
            font-size: 16px;
            font-weight: 700;
            color: #708090;
        }

        .applications-status-empty {
            padding: 12px 14px;
            border: 1px solid #e3edf7;
            border-radius: 10px;
            color: #607285;
            background: #fbfdff;
            font-size: 12px;
        }

        /* ===== SECTION: Admin panel styles — early block (.admin-*) ===== */
        .admin-stats-layout {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            align-items: start;
        }

        .admin-stats-section {
            border: 1px solid #dce8f5;
            border-radius: 14px;
            background: linear-gradient(180deg, #fdfefe 0%, #f7fafd 100%);
            padding: 16px;
            display: grid;
            gap: 12px;
        }

        .admin-stats-section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }

        .admin-stats-section-title {
            font-size: 13px;
            color: #46627d;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 800;
        }

        .admin-stats-section-subtitle {
            font-size: 12px;
            color: #7a8da1;
            line-height: 1.4;
        }

        .admin-stats-metrics-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .admin-stats-metrics-grid--user {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .admin-stats-metric-card {
            border: 1px solid #dce8f5;
            border-radius: 12px;
            background: #fff;
            padding: 12px 14px;
            box-shadow: 0 1px 3px rgba(31, 45, 61, 0.04);
        }

        .admin-stats-metric-label {
            font-size: 11px;
            color: #70849a;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 700;
        }

        .admin-stats-metric-value {
            font-size: 24px;
            color: #1f3b57;
            font-weight: 800;
            margin-top: 4px;
            letter-spacing: -0.02em;
        }

        .admin-stats-application-main {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            align-items: start;
        }

        .admin-stats-panel {
            border: 1px solid #dce8f5;
            border-radius: 12px;
            background: #fff;
            padding: 14px;
        }

        @media (max-width: 920px) {
            .admin-stats-layout,
            .admin-stats-metrics-grid,
            .admin-stats-application-main {
                grid-template-columns: 1fr;
            }

            .admin-stats-metrics-grid--user {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 920px) {
            .applications-status-primary-grid,
            .applications-status-secondary-list {
                grid-template-columns: 1fr;
            }
        }

        #applicationsPagination {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            padding: 10px 2px 0;
            flex-wrap: wrap;
        }

        #applicationsPagination .pagination-btn {
            min-width: 30px;
            height: 28px;
            border: 1px solid #d7e0ea;
            border-radius: 6px;
            background: #fff;
            color: #3d5368;
            font-size: 12px;
            cursor: pointer;
            padding: 0 8px;
        }

        #applicationsPagination .pagination-btn:hover:not(:disabled) {
            background: #f3f8fd;
            border-color: #c8d6e5;
        }

        #applicationsPagination .pagination-btn.active {
            background: #1f7bbd;
            border-color: #1f7bbd;
            color: #fff;
            font-weight: 600;
        }

        #applicationsPagination .pagination-btn:disabled {
            opacity: 0.45;
            cursor: default;
        }

        #applicationsPagination .pagination-summary {
            font-size: 11px;
            color: #6f8092;
            margin-right: 4px;
        }

        @media (max-width: 1120px) {
            #applicationsMode .applications-mode-content {
                flex-direction: column;
            }

            #applicationsSidebar {
                width: 100%;
            }
        }

        .jobs-links-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            padding: 10px 10px 8px;
            border-bottom: 1px solid #edf1f5;
        }

        .jobs-links-filters:empty {
            display: none;
        }

        .jobs-link-filter-chip {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            background: #f0f5fa;
            color: #3a6080;
            border: 1px solid #d8e5f0;
        }

        .jobs-link-filter-chip--keyword {
            background: #e8f3fd;
            color: #1a5a8a;
            border-color: #c5dff5;
        }

        .jobs-links-list {
            overflow-x: auto;
        }

        .jobs-links-tagline {
            padding: 6px 10px 5px;
            font-size: 11px;
            color: #9aafbf;
            border-bottom: 1px solid var(--j-border);
            letter-spacing: 0.01em;
        }

        .jpl-drag-handle {
            flex-shrink: 0;
            width: 18px;
            text-align: center;
            font-size: 13px;
            color: #c8d8e4;
            cursor: grab;
            line-height: 1;
            user-select: none;
            transition: color 0.12s;
        }

        .jlt-row:hover .jpl-drag-handle {
            color: #6a9dbf;
        }

        .jpl-drag-handle:active {
            cursor: grabbing;
        }

        .jpl-badge {
            flex-shrink: 0;
            font-size: 9px;
            font-weight: 500;
            padding: 1px 5px;
            border-radius: 3px;
            letter-spacing: 0;
            opacity: 0.45;
            background: #f0f3f6;
            color: #5a6b78;
            border: 1px solid #d8e3ec;
        }

        .jlt-row:hover .jpl-badge {
            opacity: 0.7;
        }

        .jpl-badge--company {
            background: #f3f0f8;
            color: #6a5880;
            border-color: #ddd0ec;
        }

        .jpl-badge--ats {
            background: #f8f2ec;
            color: #806050;
            border-color: #e0d0b8;
        }

        /* ── Jobs links table ──────────────────────────────────── */

        .jobs-links-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }

        .jobs-links-table thead th {
            padding: 7px 8px 6px;
            text-align: left;
            font-size: 10.5px;
            font-weight: 700;
            color: #607285;
            border-bottom: 1px solid #dce8f4;
            white-space: nowrap;
            background: #f5f9fd;
        }

        .jobs-links-table thead tr th:first-child {
            border-radius: 0;
        }

        /* ===== SECTION: Job links table — platform filter-support columns + drag-drop rows (.jlt-*) ===== */
        .jlt-platform-col {
            min-width: 160px;
        }

        .jlt-filter-col {
            text-align: center !important;
            max-width: 72px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .jlt-filter-col--keyword  {
            background: #eef5ff !important;
            color: #1a5a8a !important;
        }
        .jlt-filter-col--location {
        }
        .jlt-filter-col--time {
        }
        .jlt-filter-col--workload {
            background: #f8eeff !important;
            color: #5a0090 !important;
        }
        .jlt-filter-col--language {
            background: #f0f8e8 !important;
            color: #3a5a00 !important;
        }

        .jlt-row {
            transition: background 0.1s;
        }

        .jlt-row:hover {
            background: #f4f9fd;
        }

        .jlt-row.is-dragging {
            opacity: 0.4;
        }

        .jlt-row.drag-over td {
            background: #dbeeff;
            outline: none;
        }

        .jlt-row.drag-over td:first-child {
            border-left: 3px solid #5aabec;
        }

        .jobs-links-table tbody td {
            padding: 10px 8px;
            border-bottom: 1px solid #eef3f8;
            vertical-align: middle;
        }

        .jlt-platform-cell {
            display: flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }

        .jlt-link {
            font-size: 12px;
            font-weight: 600;
            color: #1f6faa;
            text-decoration: none;
            transition: color 0.1s;
        }

        .jlt-link:hover {
            color: #0f4f80;
            text-decoration: underline;
        }

        .jlt-link::after {
            content: ' ↗';
            font-size: 10px;
            color: #a0b8cc;
            transition: color 0.1s;
        }

        .jlt-link:hover::after {
            color: #0f4f80;
        }

        .jlt-support {
            text-align: center;
            font-size: 13px;
            font-weight: 700;
        }

        .jlt-support--yes {
            color: #22a050;
        }

        .jlt-support--no {
            color: #dce6f0;
            font-size: 10px;
            font-weight: 400;
        }

        .jlt-meta-col {
            text-align: center !important;
            white-space: nowrap;
            min-width: 64px;
        }

        .jlt-meta {
            text-align: center;
        }

        .jlt-meta-val {
            display: inline-block;
            font-size: 10px;
            font-weight: 500;
            padding: 2px 7px;
            border-radius: 3px;
        }

        .jlt-meta-val--sort {
            background: #f0f3f6;
            color: #607285;
            border: 1px solid #d8e3ec;
        }

        .jlt-meta-val--loc {
            background: #f0f3f6;
            color: #607285;
            border: 1px solid #d8e3ec;
        }

        .jlt-nd {
            color: #d0dce8;
            font-size: 11px;
        }

        /* ── Similar Jobs by Source (sjb-*) ──────────────────────────────────────── */
        /* ===== SECTION: Find Similar Jobs by URL/screenshot — compose/consent flow (.sjb-*) ===== */
        .sjb-divider {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 10px;
            color: #a8b8c8;
            letter-spacing: 0.02em;
        }

        .sjb-divider::before,
        .sjb-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #dce8f2;
        }

        .sjb-sources-count {
            font-size: 10px;
            color: #8a9aaa;
            font-weight: 600;
        }

        .sjb-loading-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            color: #3498db;
            font-size: 13px;
        }

        .sjb-empty {
            padding: 10px 2px 4px;
            text-align: center;
        }

        .sjb-empty-icon {
            font-size: 0;
            line-height: 0;
            margin-bottom: 0;
        }

        .sjb-empty-hint {
            font-size: 11.5px;
            color: #8a9aaa;
            line-height: 1.55;
            max-width: 340px;
            margin: 0 auto 5px;
        }

        .sjb-empty-sub {
            font-size: 10px;
            color: #b0bec8;
            letter-spacing: 0.02em;
        }

        .sjb-results-query {
            padding: 7px 12px 5px;
            font-size: 10.5px;
            color: #9aacbc;
            border-bottom: 1px solid #edf2f7;
        }

        .sjb-results-query strong { color: #5a7a90; }

        .sjb-result-row {
            padding: 8px 12px;
            border-bottom: 1px solid #f0f5f9;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .sjb-result-row:last-child { border-bottom: none; }

        .sjb-result-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
        }

        .sjb-result-title {
            font-size: 12.5px;
            font-weight: 600;
            color: #1a5a8a;
            text-decoration: none;
            line-height: 1.4;
        }

        .sjb-result-title:hover { color: #0f3f66; text-decoration: underline; }

        .sjb-score {
            flex-shrink: 0;
            font-size: 10.5px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 999px;
            white-space: nowrap;
        }

        .sjb-score--high { background: #e6f9ee; color: #1a7a3a; }
        .sjb-score--mid  { background: #fef6e4; color: #8a5a00; }
        .sjb-score--low  { background: #f0f4f8; color: #6a8a9a; }

        .sjb-result-company {
            font-size: 11px;
            color: #5a7a90;
            font-weight: 500;
        }

        .sjb-result-meta {
            font-size: 10.5px;
            color: #9ab0c0;
        }

        /* ===== SECTION: Find People — candidate card (.candidate-card) ===== */
        .candidate-card {
            display: flex;
            flex-direction: column;
            border: 1px solid var(--border);
            border-radius: 13px;
            background: var(--surface);
            overflow: hidden;
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 16px;
            cursor: pointer;
        }

        .card-header:hover {
            background: var(--slate-50);
        }

        .avatar-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            width: 54px;
        }

        .avatar-circle {
            position: relative;
            overflow: hidden;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 800;
            color: var(--slate-700);
            background: var(--slate-100);
            border: 2px solid var(--border);
        }

        .avatar-circle img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-otw {
            font-size: 9px;
            font-weight: 700;
            line-height: 1.2;
            color: var(--j-good);
            background: var(--j-good-bg);
            border-radius: 6px;
            padding: 2px 3px;
            text-align: center;
            width: 100%;
        }

        .card-identity {
            flex: 1 1 0;
            min-width: 0;
        }

        .card-name-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .card-name {
            font-size: 14px;
            font-weight: 700;
            color: var(--ink);
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        .card-name:hover {
            color: var(--accent);
            text-decoration: underline;
        }

        .copy-inline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 4px;
            color: var(--slate-400);
            cursor: pointer;
            flex-shrink: 0;
            opacity: 0;
            transition: opacity .15s, color .15s;
        }

        .card-header:hover .copy-inline {
            opacity: 1;
        }

        .copy-inline:hover {
            color: var(--accent);
        }

        .copy-inline svg {
            width: 12px;
            height: 12px;
        }

        .card-headline {
            font-size: 12px;
            color: var(--slate-600);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card-sub {
            font-size: 11px;
            color: var(--slate-500);
            margin-top: 2px;
        }

        /* Same fixed grid-template-columns as .stats-grid-headers below, so the
           header labels line up with these pills column-for-column. */
        .card-stats {
            display: grid;
            grid-template-columns: 115px 65px 80px 75px;
            gap: 6px;
            align-items: center;
            flex-shrink: 0;
        }

        .stat-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 3px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: var(--slate-100);
            border: 1px solid var(--border);
            color: var(--slate-600);
        }

        .stat-pill svg {
            width: 11px;
            height: 11px;
            flex-shrink: 0;
        }

        .stat-pill.blue, .stat-pill.note {
            background: var(--blue-50);
            border-color: var(--blue-200);
            color: var(--blue-700);
        }

        .stat-pill.dim {
            background: var(--slate-50);
            border-color: var(--border);
            color: var(--slate-400);
        }

        .skills-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }

        .skills-wrap .tag {
            cursor: default;
        }

        .person-match-slot {
            flex-shrink: 0;
        }

        /* Scoped override, not shared .recent-strip (Find Jobs uses that too) */
        #peopleRecentSearchesStrip {
            padding-top: 10px;
        }

        .person-requirements {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }

        .req-tag {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
        }

        .req-tag.req-match {
            background: var(--j-good-bg);
            color: var(--j-good);
        }

        .req-tag.req-partial {
            background: var(--j-mid-bg);
            color: var(--j-mid);
        }

        .req-tag.req-missing {
            background: var(--slate-100);
            color: var(--slate-500);
            border: 1px dashed var(--slate-300);
        }

        .match-score {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
            width: 60px;
        }

        .candidate-shortlist-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            border: 1px solid var(--border);
            background: var(--surface);
            border-radius: 999px;
            padding: 5px 12px;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--slate-600);
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .candidate-shortlist-btn:hover:not(:disabled) {
            border-color: var(--accent);
            color: var(--accent);
        }

        .candidate-shortlist-btn:disabled {
            opacity: .5;
            cursor: not-allowed;
        }

        .candidate-shortlist-btn.is-shortlisted {
            border-color: var(--j-good);
            color: var(--j-good);
            background: var(--j-good-bg);
            cursor: default;
        }

        .candidate-remove-btn {
            width: 58px;
            text-align: center;
            border: none;
            background: none;
            font-size: 11px;
            font-weight: 700;
            color: var(--slate-500);
            cursor: pointer;
            padding: 4px 6px;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .candidate-remove-btn:hover {
            color: var(--red-700);
        }

        .chevron {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            color: var(--slate-400);
            transition: transform .2s, color .15s;
        }

        .card-header:hover .chevron {
            color: var(--slate-600);
        }

        .card-header.open .chevron {
            transform: rotate(180deg);
            color: var(--accent);
        }

        .card-body {
            display: none;
            border-top: 1px solid var(--border);
        }

        .card-body.open {
            display: block;
        }

        .body-tabs {
            display: flex;
            gap: 4px;
            padding: 8px 16px 0;
            border-bottom: 1px solid var(--border);
        }

        .body-tab {
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 600;
            color: var(--slate-600);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
        }

        .body-tab:hover {
            color: var(--ink);
        }

        .body-tab.active {
            color: var(--ink);
            border-bottom-color: var(--accent);
        }

        .body-pane {
            display: none;
            padding: 16px;
        }

        .body-pane.active {
            display: block;
        }

        .overview-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 18px;
        }

        @media (max-width: 860px) {
            .overview-grid { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 560px) {
            .overview-grid { grid-template-columns: 1fr; }
        }

        .cand-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .cand-section-title {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--slate-500);
            padding-bottom: 6px;
            border-bottom: 1px solid var(--border);
        }

        .about-text {
            font-size: 12px;
            color: var(--slate-600);
            line-height: 1.6;
        }

        .about-text.clamped {
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .read-more {
            font-size: 11px;
            color: var(--accent);
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            text-align: left;
        }

        .read-more:hover {
            text-decoration: underline;
        }

        .exp-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .exp-item {
            display: flex;
            gap: 10px;
        }

        .exp-dot-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 3px;
        }

        .exp-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent);
            flex-shrink: 0;
        }

        .exp-dot.dim {
            background: var(--slate-300);
        }

        .exp-line {
            width: 1px;
            flex: 1;
            background: var(--border);
            margin-top: 3px;
            min-height: 12px;
        }

        .exp-item:last-child .exp-line {
            display: none;
        }

        .exp-role {
            font-size: 12px;
            font-weight: 700;
            color: var(--ink);
        }

        .exp-company {
            font-size: 11px;
            color: var(--slate-600);
        }

        .exp-duration {
            font-size: 11px;
            color: var(--slate-500);
            margin-top: 1px;
        }

        .activity-summary {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .act-summary-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .act-summary-label {
            color: var(--slate-500);
            font-size: 11px;
            min-width: 90px;
        }

        .act-summary-val {
            font-size: 12px;
            color: var(--ink);
            font-weight: 600;
        }

        .act-summary-recent {
            font-size: 11px;
            color: var(--slate-600);
            background: var(--slate-50);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 8px 10px;
            line-height: 1.5;
        }

        .act-summary-recent .act-author {
            font-weight: 700;
            color: var(--ink);
        }

        .act-summary-recent .act-time {
            color: var(--slate-500);
            font-size: 10px;
            margin-left: 4px;
        }

        .match-detail-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 16px;
            margin-bottom: 10px;
        }

        .match-dims {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .match-dim-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11.5px;
        }

        .match-dim-label {
            width: 70px;
            flex-shrink: 0;
            color: var(--slate-600);
            font-weight: 600;
        }

        .match-dim-bar {
            flex: 1;
            height: 6px;
            border-radius: 999px;
            background: var(--slate-100);
            overflow: hidden;
        }

        .match-dim-fill {
            height: 100%;
            border-radius: 999px;
        }

        .match-dim-pct {
            width: 36px;
            flex-shrink: 0;
            text-align: right;
            color: var(--slate-700);
            font-weight: 600;
        }

        .match-detail-reason {
            font-size: 12px;
            font-style: italic;
            color: var(--slate-600);
            margin-bottom: 10px;
        }

        .match-tier-group {
            margin-bottom: 8px;
        }

        .match-tier-label {
            display: block;
            font-size: 10.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: var(--slate-500);
            margin-bottom: 4px;
        }

        /* ===== SECTION: Find People — shortlist (.job-request-*) ===== */
        .job-request-group {
            border-bottom: 1px solid var(--border);
        }

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

        /* Grid, not flex: fixed-width columns keep the badge/time-ago/note
           anchored in the same place on every row regardless of how long the
           job-request title is. (Flex with .jrg-toggle at flex:1 let the
           title's rendered width push everything after it sideways.) */
        .job-request-header {
            display: grid;
            /* Title column gets 3/4 of the leftover space instead of all of it —
               the trailing 1fr is a deliberate empty track that soaks up the
               other 1/4 at the far right, pulling badge/time-ago/note in closer
               to the title instead of stretching all the way across. */
            grid-template-columns: 3fr 140px 50px 300px 1fr;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 0 16px;
        }

        .jrg-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            border: none;
            background: none;
            padding: 13px 0;
            font-family: inherit;
            text-align: left;
            cursor: pointer;
        }

        /* Badge/time-ago default to grid's stretch alignment (which would blow
           them up to fill their column) — pin them to the column's start
           instead so they read as a left-anchored column, not a stretched pill.
           .jr-note is deliberately left at the default stretch — see its own
           rule below, it spans through to the row's end and needs the room. */
        .job-request-header > .badge,
        .job-request-header > .time-ago {
            justify-self: start;
        }

        .jrg-toggle:hover {
            background: var(--slate-50);
        }

        .jrg-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--ink);
            white-space: normal;
            word-break: break-word;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .badge-blue {
            background: var(--blue-50);
            color: var(--blue-700);
            border: 1px solid var(--blue-200);
        }

        .time-ago {
            font-size: 12px;
            color: var(--slate-500);
            flex-shrink: 0;
        }

        /* Spans the note column plus the header's trailing filler track (see
           .job-request-header's grid-template-columns) so it reaches the row's
           true right edge — the trigger sits flush right there (justify-content:
           flex-end), and an existing note's chip (flex:1 below) stretches to
           fill the same span. position:relative so the editor (see .jr-note
           .note-editor below) can float as a popup instead of expanding the
           header row when open. */
        .jr-note {
            position: relative;
            grid-column: 4 / -1;
            display: flex;
            justify-content: flex-end;
            margin-top: 0; /* .note-area defaults to margin-top:8px for stacked layouts — this sits inline in the header row */
        }

        /* .note-trigger/.note-display default paddings & top-aligned layout assume
           they're stacked under a card title — here they sit inline in the header
           row next to jrg-title/badge/time-ago, so give them matching vertical
           centering, a bit more breathing room, and a fully-rounded pill shape
           consistent with the badge/time-ago pills beside them. Border hidden
           until hover (kept, not removed, so hovering doesn't shift layout) —
           the dashed outline read as noisy sitting next to the solid badge and
           plain time-ago text. */
        .jr-note .note-trigger {
            padding: 6px 10px;
            border-radius: 999px;
            border-color: transparent;
        }

        /* An existing note reads as a bordered chip — text with a left accent
           bar, edit/delete actions in the same pill behind a divider — instead
           of bare text next to floating icon buttons. */
        .jr-note .note-display {
            flex: 1;
            margin-top: 0;
            align-items: stretch;
            gap: 0;
            background: var(--j-panel-2);
            border: 1px solid var(--j-border-in);
            border-radius: 999px;
            overflow: hidden;
        }

        .jr-note .note-display-body {
            padding: 5px 12px;
            border-left: 2px solid var(--j-teal);
        }

        .jr-note .note-display-text {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .jr-note .note-display-actions {
            gap: 0;
            border-left: 1px solid var(--j-border-in);
        }

        .jr-note .note-action-btn {
            border-radius: 0;
        }

        /* Floats above the row instead of expanding it — the note column
           has no room for an inline textarea + head/foot. */
        .jr-note .note-editor {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 280px;
            margin-top: 0;
            z-index: 20;
            box-shadow: 0 10px 28px rgba(15,23,42,.15);
        }

        :root[data-theme="dark"] .jr-note .note-editor {
            box-shadow: 0 10px 28px rgba(0,0,0,.5);
        }

        .shortlist-status-select {
            /* Fixed, not content-sized: a native select otherwise resizes
               to the selected option's text, shifting .card-stats/.match-score
               out from under their .stats-col-labels on every status change. */
            width: 122px;
            flex-shrink: 0;
            height: 26px;
            padding: 0 22px 0 10px;
            border-radius: 999px;
            border: 1px solid var(--border-strong);
            font-family: inherit;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f8092' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            transition: background-color .12s, color .12s, border-color .12s;
        }

        .shortlist-status-select:hover {
            border-color: var(--slate-500);
        }

        .shortlist-status-select:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        .shortlist-status-select:disabled {
            opacity: .6;
            cursor: wait;
        }

        .job-request-candidates {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0 16px 14px;
        }

        /* Column labels for the candidate list below — .stats-grid-headers uses the
           exact same grid-template-columns as .card-stats (see above), and left/right
           padding here equals the real row's indent (.job-request-candidates' 16px +
           .candidate-card's 1px border + .card-header's 16px = 33px), so the two rows
           line up column-for-column. */
        .stats-col-labels {
            display: flex;
            align-items: center;
            padding: 5px 33px 4px;
            gap: 14px;
            border-bottom: 1px solid var(--border);
            background: var(--slate-50);
        }

        .col-label {
            font-size: 9px;
            font-weight: 600;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: var(--slate-500);
            text-align: center;
        }

        .col-label.left {
            text-align: left;
        }

        .stats-grid-headers {
            display: grid;
            grid-template-columns: 115px 65px 80px 75px;
            gap: 6px;
            flex-shrink: 0;
        }

        #peopleResultContent {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* ── Job Cards (redesigned) ─────────────────────────────────────── */
        /* ===== SECTION: Job listing/detail styles (.job-*) ===== */
        .job-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .job-card {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            padding: 14px 16px;
            border: 1px solid var(--border);
            border-radius: 13px;
            background: var(--surface);
            transition: border-color .15s, box-shadow .15s;
        }

        .job-card:hover {
            border-color: var(--blue-200);
            box-shadow: 0 4px 14px rgba(15,23,42,.07);
        }

        :root[data-theme="dark"] .job-card:hover {
            box-shadow: 0 6px 20px rgba(0,0,0,.4);
        }

        .job-logo {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 800;
            color: var(--slate-700);
            background: var(--slate-100);
            border: 1px solid var(--border);
        }

        .job-main {
            flex: 1 1 0;
            min-width: 0;
            max-width: 50%;
        }

        .job-title-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--slate-900);
            font-weight: 600;
            font-size: 14.5px;
            line-height: 1.3;
            margin-bottom: 3px;
            text-decoration: none;
            cursor: pointer;
        }

        .job-title-link::after {
            content: "\2197";
            font-size: 12px;
            opacity: 0;
            transform: translateX(-2px);
            transition: opacity .12s, transform .12s;
        }

        .job-title-link:hover {
            color: var(--accent);
            text-decoration: none;
        }

        .job-title-link:hover::after {
            opacity: .85;
            transform: translateX(0);
        }

        .job-meta {
            display: flex;
            align-items: center;
            gap: 7px;
            flex-wrap: wrap;
            font-size: 12.5px;
            color: var(--slate-600);
        }

        .job-meta .job-co {
            font-weight: 600;
            color: var(--slate-700);
        }

        .job-meta .job-dot {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: var(--slate-500);
            flex-shrink: 0;
            display: inline-block;
        }

        .job-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 9px;
        }

        .job-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            height: 24px;
            padding: 0 9px;
            border-radius: 7px;
            background: var(--slate-100);
            color: var(--slate-600);
            font-size: 11.5px;
            font-weight: 600;
        }

        .job-tag.jt-salary {
            background: var(--green-50);
            color: var(--green-500);
        }

        .job-tag.jt-plat {
            background: var(--blue-50);
            color: var(--slate-700);
        }

        .job-skills-row {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 9px;
        }

        .job-skill-chip {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 5px;
            background: var(--slate-100);
            border: 1px solid var(--border);
            font-size: 11px;
            font-weight: 500;
            color: var(--slate-600);
            white-space: nowrap;
        }

        .job-skill-chip.is-more {
            background: transparent;
            border-color: transparent;
            color: var(--slate-500);
            font-weight: 700;
        }

        .job-applicants-line {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            color: var(--slate-600);
            font-weight: 600;
            margin-top: 7px;
        }

        .job-applicants-line.is-hot {
            color: var(--j-mid);
        }

        .job-notes {
            flex: 1 1 0;
            min-width: 0;
            width: auto;
            align-self: center;
        }
        .job-notes .note-area { margin-top: 0; }

        /* ── Match column on starred job cards ──
           Mirrors .app-row-cell-match (its own centered lane between the job
           details and the notes column), but unlike the Applications grid a
           starred job has no score until the user runs matching. So the column
           COLLAPSES to zero width while empty (no wasted lane, no placeholder)
           and reserves a tight lane only once a score ring is actually rendered.
           The per-card .match-slot is populated with appMatchRingHTML() (via
           _starChipHtml) — the exact same ring component as the Applications grid.

           Column budget — empty :  logo 42 · main ≤50% · match 0  · notes flex · right auto
                          scored :  logo 42 · main ≤50% · match 76 · notes flex · right auto */
        .job-match {
            flex-shrink: 0;
            align-self: center;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 0;            /* collapsed by default → no empty space before matching */
            transition: width .15s ease;
        }
        /* Reset the inline-stack margin .match-slot had when it lived in .job-right. */
        .job-match .match-slot {
            margin-top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Reserve a lane ONLY once a score ring is rendered inside the slot.
           76px fits the 54px ring with balanced padding on each side. */
        .job-match:has(.match-slot:not(:empty)) {
            width: 76px;
        }
        /* While empty the slot contributes no width at all. */
        .job-match .match-slot:empty {
            display: none;
        }

        /* Search-tab jobs aren't scored yet (no CV/profile chosen) — show a fixed-width
           idle placeholder ring instead of collapsing, so the row shape matches Starred/Similar. */
        .job-match.job-match-idle {
            width: 68px;
        }

        .job-right {
            flex-shrink: 0;
            /* Pin the action cluster to the right edge of the card. .job-main is
               capped at max-width:50%; once it hits that cap the leftover row
               space has no flex-grow owner, so without this auto margin the
               cluster would float in the middle with empty space on its right.
               margin-left:auto absorbs exactly that leftover (it is 0 in the
               starred view, where the .job-notes column already owns the gap). */
            margin-left: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
        }

        .job-starred-date {
            font-size: 10.5px;
            color: var(--slate-500);
            font-weight: 500;
            white-space: nowrap;
        }

        .job-card-actions {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .job-icon-btn {
            width: 34px;
            height: 34px;
            border: 1px solid var(--border-strong);
            border-radius: 9px;
            background: var(--surface);
            color: var(--slate-500);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            padding: 0;
            line-height: 1;
        }

        .job-icon-btn:hover {
            background: var(--slate-100);
        }

        .job-icon-btn.is-starred {
            color: var(--amber-500);
            border-color: var(--amber-300);
            background: var(--amber-50);
        }

        .job-apply-btn {
            height: 34px;
            padding: 0 16px;
            border: 1px solid var(--blue-200);
            border-radius: 9px;
            background: var(--blue-50);
            color: var(--accent);
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: background .15s, border-color .15s, color .15s;
        }

        .job-apply-btn:hover {
            background: var(--blue-200);
            border-color: var(--accent);
            color: var(--blue-700);
        }

        .job-applied-jump-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border: 1px solid var(--green-500);
            border-radius: 999px;
            background: var(--green-50);
            color: var(--green-700);
            cursor: pointer;
            padding: 0;
            opacity: .8;
            transition: opacity .15s, background .15s, color .15s;
        }

        .job-applied-jump-btn:hover {
            opacity: 1;
            background: var(--green-500);
            color: #fff;
        }

        .job-hide-btn {
            width: 28px;
            height: 28px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--surface);
            color: var(--slate-500);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            padding: 0;
        }

        .job-hide-btn:hover {
            background: var(--slate-100);
            color: var(--slate-700);
        }

        /* ── Starred Jobs: note component ── */
        /* ===== SECTION: Job note editor (.note-*) ===== */
        .note-area { margin-top: 8px; }

        .note-trigger {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 7px;
            border-radius: 6px;
            border: 1px dashed var(--j-border-in);
            background: transparent;
            color: var(--j-slate-400);
            font-size: 11.5px;
            font-weight: 500;
            cursor: pointer;
            transition: border-color .12s, color .12s, background .12s;
            font-family: inherit;
        }
        .note-trigger:hover {
            border-color: var(--j-teal);
            color: var(--j-teal-d);
            background: var(--j-teal-tint);
        }
        .note-trigger svg { flex-shrink: 0; opacity: .7; }

        .note-editor {
            margin-top: 8px;
            border: 1px solid var(--j-border-in);
            border-radius: 9px;
            background: var(--j-panel);
            overflow: hidden;
            transition: box-shadow .15s;
        }
        .note-editor:focus-within {
            border-color: var(--j-slate-400);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }
        .note-editor-head {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 7px 10px 5px;
            border-bottom: 1px solid var(--j-border);
        }
        .note-editor-label {
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: var(--j-slate-500);
        }
        .note-editor-charcount {
            margin-left: auto;
            font-size: 10px;
            color: var(--j-slate-400);
            font-variant-numeric: tabular-nums;
        }
        .note-editor textarea {
            display: block;
            width: 100%;
            padding: 8px 10px;
            border: none;
            outline: none;
            background: transparent;
            font-family: inherit;
            font-size: 13px;
            color: var(--j-slate-700);
            resize: none;
            line-height: 1.55;
        }
        .note-editor textarea::placeholder { color: var(--j-slate-400); }
        .note-editor-foot {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px 8px;
            border-top: 1px solid var(--j-border);
        }
        .note-editor-hint {
            font-size: 10.5px;
            color: var(--j-slate-400);
        }
        .note-editor-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .note-editor-saved-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 600;
            color: var(--j-good);
            opacity: 0;
            transition: opacity .2s;
        }
        .note-editor-saved-tag.is-visible { opacity: 1; }
        .note-editor-discard {
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px 11px;
            border-radius: 7px;
            font-size: 12px;
            font-weight: 600;
            color: var(--j-slate-500);
            font-family: inherit;
            transition: background .12s, color .12s;
        }
        .note-editor-discard:hover {
            background: rgba(15,23,42,.05);
            color: var(--j-slate-600);
        }
        .note-editor-save {
            background: var(--j-teal-d);
            border: 1px solid var(--j-teal-d);
            cursor: pointer;
            padding: 5px 14px;
            border-radius: 7px;
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            font-family: inherit;
            transition: background .12s;
        }
        .note-editor-save:hover { background: var(--j-teal-dd); }
        .note-editor-save:disabled {
            background: var(--j-slate-300);
            border-color: var(--j-slate-300);
            cursor: default;
        }

        .note-display {
            margin-top: 6px;
            display: flex;
            align-items: flex-start;
            gap: 7px;
        }
        .note-display-body {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }
        .note-display-text {
            font-size: 11.5px;
            color: var(--slate-700); /* was a hardcoded #52606d with no dark-mode override — barely readable on a dark surface */
            line-height: 1.4;
            word-break: break-word;
        }
        .note-display-text.is-clamped {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .note-display-more {
            display: inline-block;
            margin-top: 3px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            font-family: inherit;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--j-teal-d);
        }
        .note-display-more:hover { color: var(--j-teal-dd); text-decoration: underline; }
        .note-display-actions {
            display: flex;
            align-items: center;
            gap: 3px;
            flex-shrink: 0;
        }
        .note-action-btn {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            border: none;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--j-slate-400);
            transition: background .12s, color .12s;
        }
        .note-action-btn:hover {
            background: rgba(15,23,42,.07);
            color: var(--j-slate-600);
        }
        .note-action-btn.is-delete:hover {
            background: #fef2f2;
            color: #b91c1c;
        }

        .jr-note .note-action-btn.is-delete {
            font-size: 16px;
            line-height: 1;
        }

        /* ── Starred Jobs: matching toolbar ── */
        .match-toolbar {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            padding: 12px 16px;
            background: var(--j-panel);
            border-bottom: 1px solid var(--j-border);
            border-radius: 10px 10px 0 0;
        }
        .mt-context {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .mt-ic {
            width: 26px;
            height: 26px;
            border-radius: 7px;
            background: var(--j-panel-2);
            border: 1px solid var(--j-border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            color: var(--j-slate-500);
            flex-shrink: 0;
        }
        .mt-label {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--j-slate-500);
        }
        /* ===== SECTION: Profile styles — early block (.profile-*) ===== */
        .profile-switch-wrap { position: relative; }
        .profile-switch {
            display: flex;
            align-items: center;
            gap: 9px;
            background: var(--surface);
            border: 1px solid var(--j-border-in);
            border-radius: 9px;
            padding: 5px 10px 5px 6px;
            cursor: pointer;
            transition: border-color .15s;
            font-family: inherit;
            min-width: 200px;
            max-width: 280px;
        }
        .profile-switch:hover { border-color: var(--j-slate-400); }
        .profile-av {
            width: 28px;
            height: 28px;
            border-radius: 7px;
            background: var(--j-slate-300);
            color: #fff;
            font-weight: 800;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background .15s;
        }
        .profile-switch.has-profile .profile-av { background: var(--j-teal); }
        .profile-meta { flex: 1; min-width: 0; text-align: left; }
        .profile-meta .nm {
            display: block;
            font-size: 12px;
            font-weight: 700;
            color: var(--j-ink);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'SF Mono','Fira Code',ui-monospace,monospace;
        }
        .profile-meta .rl {
            display: block;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .03em;
            color: var(--j-slate-500);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .profile-switch .chev { color: var(--j-slate-400); font-size: 10px; flex-shrink: 0; }
        .profile-menu {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            min-width: 290px;
            background: #fff;
            border: 1px solid var(--j-border);
            border-radius: 11px;
            box-shadow: 0 12px 30px rgba(15,23,42,.13);
            padding: 5px;
            z-index: 20;
            display: none;
        }
        .profile-menu.is-open { display: block; }
        .profile-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 8px 9px;
            border: none;
            background: none;
            border-radius: 8px;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
            transition: background .12s;
        }
        .profile-menu-item:hover { background: var(--j-panel); }
        .profile-menu-item .profile-av { background: var(--j-teal); }
        .profile-menu-item .pm-meta { min-width: 0; }
        .profile-menu-item .pm-meta .nm {
            display: block;
            font-size: 12px;
            font-weight: 700;
            color: var(--j-ink);
            font-family: 'SF Mono','Fira Code',ui-monospace,monospace;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .profile-menu-item .pm-meta .rl {
            display: block;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .03em;
            color: var(--j-slate-500);
        }
        .mt-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .mt-hint {
            font-size: 11.5px;
            color: var(--j-slate-400);
        }
        .run-match-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            height: 34px;
            padding: 0 16px;
            border: 1px solid var(--j-teal-d);
            border-radius: 9px;
            background: var(--j-teal-d);
            color: #fff;
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            transition: background .15s;
        }
        .run-match-btn:hover:not(:disabled) { background: var(--j-teal-dd); }
        .run-match-btn:disabled {
            background: var(--j-slate-300);
            border-color: var(--j-slate-300);
            cursor: not-allowed;
        }
        .run-match-btn .spin {
            width: 13px;
            height: 13px;
            border: 2px solid rgba(255,255,255,.45);
            border-top-color: #fff;
            border-radius: 50%;
            animation: rmspin .7s linear infinite;
        }
        @keyframes rmspin { to { transform: rotate(360deg); } }

        /* ── Per-card match result chip ── */
        /* ===== SECTION: Match score styles (.match-*) ===== */
        .match-slot { margin-top: 6px; }
        .match-slot:empty { display: none; }
        .match-loading {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 5px 10px;
            border: 1px solid var(--j-border);
            border-radius: 99px;
            background: var(--j-panel);
        }
        .match-loading .ml-bar {
            width: 46px;
            height: 6px;
            border-radius: 99px;
            background: linear-gradient(90deg, var(--j-panel-2) 25%, #e4ebf1 37%, var(--j-panel-2) 63%);
            background-size: 400% 100%;
            animation: mlshimmer 1.3s ease infinite;
        }
        .match-loading .ml-text { font-size: 11px; color: var(--j-slate-400); font-weight: 600; white-space: nowrap; }
        @keyframes mlshimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
        .match-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 4px 10px 4px 5px;
            border: 1px solid var(--mr-c);
            border-radius: 99px;
            background: #fff;
            cursor: pointer;
            font-family: inherit;
            transition: background .12s;
            white-space: nowrap;
        }
        .match-chip:hover { background: color-mix(in srgb, var(--mr-c) 8%, #fff); }
        .match-chip .mc-ring {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            background: conic-gradient(var(--mr-c) calc(var(--mr-pct) * 1%), var(--j-panel-2) 0);
        }
        .match-chip .mc-ring .inner {
            width: 27px;
            height: 27px;
            border-radius: 50%;
            background: #fff;
            display: grid;
            place-items: center;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: -.02em;
            color: var(--mr-c);
        }
        .match-chip .mc-verdict {
            font-size: 11.5px;
            font-weight: 700;
            color: var(--mr-c);
        }
        .match-chip .mc-arrow {
            display: grid;
            place-items: center;
            width: 15px;
            height: 15px;
            flex-shrink: 0;
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            background: var(--mr-c);
            border-radius: 50%;
            line-height: 1;
        }

        /* Starred-limit modal */
        /* ── Starred Limit Modal ────────────────────────── */
        /* ===== SECTION: Starred-limit modal (.slm-*) ===== */
        .slm-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(15,23,42,.52); z-index: 9100;
            align-items: center; justify-content: center; padding: 16px;
        }
        .slm-overlay.is-open { display: flex; }
        .slm-card {
            width: min(560px, 96vw); background: #fff;
            border-radius: 16px; box-shadow: 0 20px 52px rgba(15,23,42,.22);
            display: flex; flex-direction: column; overflow: hidden;
        }
        .slm-head {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid #e2e8f0;
            background: linear-gradient(180deg,#fff 0%,#fdfefe 100%);
        }
        .slm-head-left { display: flex; align-items: flex-start; gap: 12px; }
        .slm-icon {
            width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
            background: #fef9ec; border: 1px solid #f0e0a0; color: #e0a528;
            font-size: 17px; display: flex; align-items: center; justify-content: center;
        }
        .slm-title { font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 2px; }
        .slm-sub { font-size: 12px; color: #64748b; line-height: 1.4; }
        .slm-close {
            width: 30px; height: 30px; border: none; background: transparent;
            border-radius: 8px; color: #94a3b8; font-size: 20px; line-height: 1;
            cursor: pointer; flex-shrink: 0; margin-top: -2px;
            display: flex; align-items: center; justify-content: center;
        }
        .slm-close:hover { background: #f1f5f9; color: #475569; }
        .slm-list-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 18px 6px;
        }
        .slm-list-label { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
        .slm-sort-note { font-size: 10.5px; color: #94a3b8; font-weight: 500; }
        .slm-list { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
        .slm-list::-webkit-scrollbar { width: 5px; }
        .slm-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .slm-row {
            display: grid; grid-template-columns: 36px 1fr auto;
            align-items: center; gap: 11px;
            padding: 10px 18px; border-bottom: 1px solid #e2e8f0; transition: background .12s;
        }
        .slm-row:last-of-type { border-bottom: none; }
        .slm-row:hover { background: #f8fafc; }
        .slm-job-logo {
            width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 800; color: #475569;
            background: #f1f5f9; border: 1px solid #e2e8f0;
        }
        .slm-job-title { font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .slm-job-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11.5px; color: #64748b; flex-wrap: wrap; }
        .slm-company { font-weight: 600; color: #475569; }
        .slm-dot { color: #cbd5e1; }
        .slm-plat { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: #f1f5f9; color: #64748b; }
        .slm-job-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
        .slm-date { font-size: 10.5px; color: #94a3b8; white-space: nowrap; font-weight: 500; }
        .slm-remove {
            height: 26px; padding: 0 10px; border: 1px solid #cbd5e1;
            border-radius: 7px; background: #fff; font-size: 11px; font-weight: 700;
            color: #64748b; cursor: pointer; white-space: nowrap;
            display: flex; align-items: center; gap: 4px;
        }
        .slm-remove:hover { border-color: #e0b4b4; background: #fef5f5; color: #c0392b; }
        .slm-foot {
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            padding: 12px 18px; border-top: 1px solid #e2e8f0; background: #f8fafc;
        }
        .slm-foot-note { font-size: 11.5px; color: #64748b; }
        .slm-cancel {
            height: 32px; padding: 0 16px; border: 1px solid #cbd5e1;
            border-radius: 8px; background: #fff; font-size: 12.5px;
            font-weight: 700; color: #475569; cursor: pointer;
        }
        .slm-cancel:hover { background: #f1f5f9; }

        /* Group variant sub-rows */
        .job-group-variants {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
        }

        .job-variant-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 9px;
            background: var(--slate-50);
            border: 1px solid var(--border);
            font-size: 12px;
            color: var(--slate-700);
        }

        .job-variant-loc {
            font-weight: 700;
            color: var(--slate-800);
            min-width: 80px;
        }

        .job-variant-meta {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            flex: 1;
            color: var(--slate-600);
        }

        .job-variant-actions {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-shrink: 0;
        }

        .job-group-toggle {
            margin-top: 8px;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--accent);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        /* Ghost/empty state */
        /* ===== SECTION: Ghost buttons + skeleton-loading placeholders (generic UI pattern, .ghost-*) ===== */
        .ghost-results {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-top: 14px;
        }

        .ghost-card {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            padding: 14px 16px;
            border: 1px solid var(--border);
            border-radius: 13px;
            background: var(--surface);
        }

        .ghost-card .gc-logo {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            background: var(--slate-100);
            flex-shrink: 0;
        }

        .ghost-card .gc-main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-top: 3px;
        }

        .ghost-card .gc-line {
            height: 11px;
            border-radius: 5px;
            background: var(--slate-100);
        }

        .ghost-card .gc-line.w1 { width: 58%; }
        .ghost-card .gc-line.w2 { width: 38%; height: 9px; }

        .ghost-card .gc-tags {
            display: flex;
            gap: 6px;
            margin-top: 3px;
        }

        .ghost-card .gc-tag {
            height: 18px;
            width: 62px;
            border-radius: 6px;
            background: var(--slate-100);
        }

        .ghost-card .gc-tag.sm { width: 46px; }

        .ghost-card .gc-right {
            width: 60px;
            height: 24px;
            border-radius: 999px;
            background: var(--slate-100);
            flex-shrink: 0;
        }

        .ghost-results .ghost-card:nth-child(2) { opacity: .7; }
        .ghost-results .ghost-card:nth-child(3) { opacity: .4; }

        .ghost-prompt {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 5px;
            background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, transparent) 0%, color-mix(in srgb, var(--surface) 92%, transparent) 60%);
        }

        .ghost-prompt .gp-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            box-shadow: 0 2px 8px rgba(15,23,42,.05);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--slate-500);
            margin-bottom: 8px;
        }

        .ghost-prompt .gp-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--slate-600);
        }

        .ghost-prompt .gp-desc {
            font-size: 12px;
            color: var(--slate-500);
            max-width: 280px;
            line-height: 1.5;
        }

        /* Results count + sort bar */
        .results-top {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 2px 8px;
        }

        .results-top .results-count-text {
            font-size: 12.5px;
            color: var(--j-slate-500);
        }

        .results-top .results-count-text b {
            color: var(--j-ink);
            font-weight: 800;
        }

        .results-sort-btn {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 30px;
            padding: 0 11px;
            border: 1px solid var(--j-border-in);
            border-radius: 8px;
            background: #fff;
            font-family: inherit;
            font-size: 12px;
            font-weight: 700;
            color: var(--j-slate-600);
            cursor: pointer;
        }

        .results-sort-btn:hover {
            background: var(--j-panel);
        }

        .sjb-results-header {
            display: flex;
            align-items: baseline;
            gap: 9px;
            margin-bottom: 13px;
            flex-wrap: wrap;
        }

        .sjb-results-header .sjb-rh-title {
            font-size: 14px;
            font-weight: 800;
            color: var(--j-ink);
        }

        .sjb-results-header .sjb-rh-count {
            font-size: 11.5px;
            font-weight: 800;
            color: var(--j-teal-d);
            background: var(--j-teal-tint);
            padding: 1px 9px;
            border-radius: 999px;
        }

        .sjb-results-header .sjb-rh-basis {
            margin-left: auto;
            font-size: 11.5px;
            color: var(--j-slate-400);
        }

        .admin-platform-toggle-col {
            width: 52px;
            text-align: center;
            white-space: nowrap;
        }

        /* ===== SECTION: Job search results panel — cards, grouping, filters (.jobs-*) ===== */
        .jobs-results-shell {
            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            overflow: visible;
        }

        .jobs-search-grid {
            display: grid;
            gap: 10px;
            align-items: start;
        }

        .jobs-primary-search-row {
            display: flex;
            gap: 12px;
            align-items: flex-end;
        }

        .jobs-main-search-group {
            display: flex;
            flex: 1;
            gap: 12px;
            align-items: flex-end;
            min-width: 0;
        }

        .jobs-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
            flex: 1;
            margin: 0;
        }

        .jobs-field-label {
            display: block;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--slate-600);
        }

        .jobs-field--keyword {
            flex: 1;
        }

        .jobs-field--keyword .jobs-field-label { }

        .jobs-field--location {
            flex: 0 0 230px;
            position: relative;
        }

        .jobs-field--location .jobs-field-label { }

        .jobs-input,
        .jobs-select {
            width: 100%;
            height: 46px;
            padding: 0 14px;
            border: 1px solid var(--border-strong);
            border-radius: 11px;
            font-size: 14px;
            color: var(--ink);
            background: var(--surface);
            font-family: inherit;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        .jobs-input:focus,
        .jobs-select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        /* The global "input[type=text], textarea { margin-bottom: 12px }" rule
           (specificity 0,1,1) beats a bare .jobs-input (0,1,0) and would inflate
           the keyword field by 12px, pushing its label up and floating the input
           above the location trigger / search button. Scope the margin reset to
           fields (0,2,0) so every control in the row shares one height. */
        .jobs-field .jobs-input,
        .jobs-field .jobs-select {
            margin: 0;
        }

        .jobs-location-other {
            margin-top: 6px;
        }

        .jobs-location-preset-select {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        .jobs-keyword-input-wrap {
            position: relative;
            width: 100%;
            height: 46px;
            display: flex;
            align-items: stretch;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .jobs-keyword-input-wrap .jobs-input {
            height: 100%;
            margin: 0;
            line-height: 20px;
        }

        .jobs-keyword-chip {
            display: none;
            align-items: center;
            gap: 6px;
            max-width: min(62%, 240px);
            padding: 3px 8px;
            box-sizing: border-box;
            border: 1px solid var(--blue-200);
            border-radius: 7px;
            background: var(--blue-50);
            color: var(--accent);
            font-size: 12.5px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.01em;
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
            position: absolute;
            left: 8px;
            top: 8px;
            bottom: 8px;
            transform: none;
            margin: 0;
            z-index: 2;
            -webkit-appearance: none;
            appearance: none;
        }

        .jobs-keyword-chip:hover {
            border-color: var(--blue-200);
            background: var(--accent-soft);
            color: var(--accent);
        }

        .jobs-keyword-chip:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        .jobs-keyword-chip-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 220px;
        }

        .jobs-keyword-chip-remove {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            border-radius: 999px;
            background: var(--accent-soft);
            color: var(--accent);
            font-size: 11px;
            font-weight: 800;
        }

        .jobs-input.jobs-input--has-keyword {
            border-color: var(--blue-200);
            background: var(--blue-50);
            box-shadow: inset 0 0 0 1px var(--accent-soft);
            padding-left: 150px;
            color: transparent;
            caret-color: transparent;
        }

        .jobs-filter-box {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            height: 38px;
            padding: 0 12px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--slate-50);
            white-space: nowrap;
        }

        .jobs-secondary-filter-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin-top: 14px;
        }

        .pf-status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 0 2px; height: 34px; color: var(--slate-500); font-size: 11.5px; font-weight: 600; cursor: default; }
        .pf-status svg { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; }

        /* Filter pills: match .fpill from design */
        .jobs-secondary-filter-row .jobs-filter-dropdown-trigger {
            width: auto;
            min-width: 0;
            height: 30px;
            padding: 0 11px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            font-size: 12px;
            font-weight: 500;
            color: var(--slate-800);
            gap: 6px;
        }

        .jobs-secondary-filter-row .jobs-filter-dropdown-trigger-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--slate-500);
            text-transform: none;
            letter-spacing: 0;
        }

        .jobs-secondary-filter-row .jobs-filter-dropdown-trigger-value {
            max-width: none;
            font-size: 12px;
            font-weight: 600;
            color: var(--slate-800);
        }

        .jobs-secondary-filter-row .jobs-filter-dropdown-trigger::after {
            font-size: 9px;
            color: var(--slate-500);
        }

        /* Set state — color the value like the keyword chip, no special background */
        .jobs-secondary-filter-row .jobs-filter-dropdown[data-filter-set] .jobs-filter-dropdown-trigger-value {
            color: var(--accent);
            font-weight: 600;
        }

        .jobs-filter-dropdown {
            position: relative;
            flex-shrink: 0;
        }

        .jobs-filter-dropdown summary {
            list-style: none;
        }

        .jobs-filter-dropdown summary::-webkit-details-marker {
            display: none;
        }

        .jobs-filter-dropdown-trigger {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            width: 100%;
            height: 46px;
            padding: 0 13px;
            border: 1px solid var(--border-strong);
            border-radius: 11px;
            background: var(--surface);
            color: var(--ink);
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            transition: border-color 0.15s;
        }

        .jobs-filter-dropdown-trigger-text {
            flex: 1;
            min-width: 0;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            overflow: hidden;
        }

        .jobs-filter-dropdown-trigger-label {
            font-size: 13.5px;
            font-weight: 600;
            color: var(--slate-500);
            white-space: nowrap;
        }

        .jobs-filter-dropdown-trigger-meta {
            flex-shrink: 0;
            color: var(--slate-500);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .jobs-filter-dropdown-trigger-value {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--ink);
            font-size: 13.5px;
            font-weight: 600;
            text-align: left;
        }

        .jobs-filter-dropdown-trigger-value.is-required {
            color: var(--slate-500);
        }

        .jobs-filter-dropdown-trigger::after {
            content: '▾';
            font-size: 11px;
            color: var(--slate-500);
            flex-shrink: 0;
            transition: transform 0.15s ease;
        }

        .jobs-filter-dropdown[open] .jobs-filter-dropdown-trigger {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        .jobs-filter-dropdown[open] .jobs-filter-dropdown-trigger::after {
            transform: rotate(180deg);
        }

        .jobs-filter-dropdown-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            z-index: 40;
            min-width: 220px;
            padding: 11px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--surface);
            box-shadow: var(--shadow-pop);
        }

        .jobs-filter-dropdown-menu .jobs-field {
            gap: 6px;
            grid-template-rows: auto auto;
        }

        .jobs-filter-dropdown-menu .jobs-field-label {
            min-height: auto;
            font-size: 10px;
        }

        .jobs-filter-dropdown-menu .jobs-filter-box {
            display: grid;
            gap: 6px;
            height: auto;
            padding: 8px;
            background: var(--slate-50);
            white-space: normal;
        }

        .jobs-filter-dropdown-menu .jobs-select {
            margin: 0;
        }

        .jobs-filter-option-list {
            display: grid;
            gap: 6px;
        }

        .jobs-filter-option {
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            color: var(--slate-700);
            height: 32px;
            font-size: 12px;
            font-weight: 600;
            text-align: left;
            padding: 0 10px;
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease;
        }

        .jobs-filter-option:hover {
            border-color: var(--border-strong);
            background: var(--slate-75);
        }

        .jobs-filter-option.is-active {
            border-color: var(--blue-200);
            background: var(--blue-50);
            color: var(--blue-700);
        }

        .jobs-location-group-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--slate-500);
            padding: 7px 2px 3px;
            margin-top: 4px;
            border-top: 1px solid var(--border);
        }

        .jobs-location-group-label.is-active {
            color: var(--accent);
        }

        .jobs-location-city-group {
            display: grid;
            gap: 4px;
            padding-left: 8px;
        }

        .jobs-filter-option--city {
            height: 28px;
            font-size: 12px;
            font-weight: 500;
        }

        .jobs-checkbox-label--city {
            padding-left: 14px;
            font-size: 11.5px;
        }

        .jobs-filter-option--clear {
            margin-top: 6px;
            border-top: 1px solid var(--border);
            color: var(--slate-600);
            font-weight: 600;
        }

        .jobs-salary-min-label {
            margin-top: 8px;
            font-size: 10px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--slate-500);
            font-weight: 700;
        }

        .jobs-salary-min-controls {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 82px;
            gap: 8px;
            margin-top: 5px;
        }

        .jobs-input--money {
            text-align: right;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.02em;
            min-width: 0;
        }

        .jobs-salary-min-hint {
            margin-top: 6px;
            font-size: 11px;
            color: var(--amber-700);
        }

        .jobs-checkbox-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 450;
            color: var(--slate-600);
            cursor: pointer;
            padding: 5px 8px;
            border-radius: 8px;
            border: 1px solid transparent;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
        }

        .jobs-checkbox-label:hover {
            background: var(--slate-75);
            border-color: var(--border);
            color: var(--slate-700);
        }

        .jobs-checkbox-label:has(input:checked) {
            background: var(--slate-50);
            border-color: var(--border);
            color: var(--slate-700);
        }

        .jobs-checkbox-label input {
            margin: 0;
            width: 14px;
            height: 14px;
            accent-color: var(--slate-400);
            opacity: 0.82;
        }

        .admin-platform-access-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px;
        }

        .admin-platform-access-option {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid #d7e3ee;
            background: rgba(255, 255, 255, 0.76);
            color: #466177;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        }

        .admin-platform-access-option:hover {
            background: #ffffff;
            border-color: #b9cad8;
            transform: translateY(-1px);
        }

        .admin-platform-access-option:has(input:checked) {
            border-color: #8bb4d7;
            background: linear-gradient(180deg, #f7fbff 0%, #eef6fc 100%);
            color: #27445d;
        }

        .admin-platform-access-option input {
            margin: 0;
            width: 15px;
            height: 15px;
            accent-color: #2f7fc1;
        }

        .admin-platform-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
            margin-top: 12px;
        }

        .jobs-action-heading {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            cursor: default;
        }

        .jobs-action-info-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border: 1px solid #c7d6e3;
            border-radius: 999px;
            background: linear-gradient(180deg, #ffffff 0%, #f3f8fc 100%);
            color: #2f6f9f;
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
        }

        .jobs-action-info-button:hover {
            border-color: #84abc8;
            box-shadow: 0 5px 12px rgba(49, 96, 132, 0.18);
            transform: translateY(-1px);
        }

        .jobs-action-info-button:focus-visible {
            outline: 2px solid #4b89b8;
            outline-offset: 1px;
        }

        .jobs-action-info-modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: transparent;
            display: none;
        }

        .jobs-action-info-modal {
            position: fixed;
            width: min(500px, calc(100vw - 24px));
            border-radius: 14px;
            border: 1px solid #d8e6f2;
            background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
            box-shadow: 0 18px 46px rgba(18, 40, 58, 0.24);
            color: #2b465a;
            overflow: hidden;
        }

        .jobs-action-info-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 14px 16px 10px;
            border-bottom: 1px solid #e4eef6;
        }

        .jobs-action-info-modal-title {
            margin: 0;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.01em;
            color: #2a526d;
        }

        .jobs-action-info-modal-close {
            border: none;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: #edf4fa;
            color: #39607b;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.15s ease, transform 0.15s ease;
        }

        .jobs-action-info-modal-close:hover {
            background: #dcecf8;
            transform: scale(1.04);
        }

        .jobs-action-info-modal-close:focus-visible {
            outline: 2px solid #4b89b8;
            outline-offset: 1px;
        }

        .jobs-action-info-modal-body {
            padding: 12px 16px 16px;
            font-size: 13px;
            line-height: 1.5;
        }

        .jobs-action-info-modal-body p {
            margin: 0 0 8px;
        }

        .admin-danone-status-body {
            display: grid;
            gap: 12px;
        }

        .admin-danone-status-grid {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 8px 12px;
            align-items: start;
        }

        .admin-danone-status-label {
            font-weight: 700;
            color: #2f546d;
            white-space: nowrap;
        }

        .admin-danone-status-value {
            color: #486173;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .admin-danone-status-note {
            padding: 10px 12px;
            border-radius: 10px;
            background: #f3f8fc;
            color: #486173;
            font-size: 12px;
        }

        .jobs-action-info-list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: 8px;
        }

        .jobs-action-info-list li {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #37586f;
        }

        .jobs-action-info-list .jobs-hide-button,
        .jobs-action-info-list .jobs-favorite-button,
        .jobs-action-info-list .jobs-apply-button {
            margin-left: 0;
        }

        .jobs-part-time-indicator {
            display: inline-block;
            margin-left: 6px;
            color: #6e7883;
            font-size: 18px;
            font-weight: 600;
            line-height: 1;
            vertical-align: middle;
            cursor: default;
        }

        .jobs-remote-stack {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            height: 16px;
        }

        /* .jobs-remote-stack .jobs-part-time-indicator { removed, no longer stacked with remote } */

        .jobs-remote-check {
            display: inline-block;
            width: 12px;
            text-align: center;
            color: #7b8c9d;
            font-weight: 700;
        }

        .jobs-search-button {
            height: 46px;
            padding: 0 22px;
            border: none;
            border-radius: 11px;
            background: var(--accent);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            flex-shrink: 0;
            box-shadow: 0 2px 6px rgba(37, 99, 235, .26);
            transition: background .15s, transform .15s;
        }

        .jobs-search-button svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            stroke-width: 1.9;
            flex-shrink: 0;
        }

        .jobs-search-button:hover:not(:disabled) {
            background: var(--accent-hover);
            transform: translateY(-1px);
        }

        .jobs-search-button:disabled {
            background: var(--slate-100);
            color: var(--slate-500);
            cursor: not-allowed;
            box-shadow: none;
        }

        .jobs-search-action {
            display: flex;
            align-items: flex-end;
            flex-shrink: 0;
        }

        .jobs-action-buttons {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        #findJobsBtn {
            height: 46px;
        }

        .jobs-search-action .jobs-field-label {
            display: none;
        }

        .jobs-search-results {
            width: 100%;
            margin: 0;
            border: 1px solid #dbe3eb;
            border-radius: 12px;
            background: #ffffff;
            overflow-x: auto;
            overflow-y: visible;
            box-shadow: 0 10px 24px rgba(31, 45, 61, 0.05);
        }

        .jobs-search-results thead,
        .jobs-search-results thead tr,
        .jobs-search-results th {
            overflow: visible;
        }

        .jobs-search-results th {
            position: relative;
        }

        .jobs-results-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
            font-size: 12px;
        }

        .jobs-results-table thead,
        .jobs-results-table thead tr {
            overflow: visible;
        }

        .jobs-results-table thead tr {
            background: linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
            border-bottom: 1px solid #dbe3eb;
        }

        .jobs-results-table th {
            padding: 10px 10px;
            text-align: left;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: #627587;
            overflow: visible;
            position: relative;
        }

        .jobs-results-table td {
            padding: 9px 10px;
            vertical-align: top;
            border-bottom: 1px solid #edf2f7;
        }

        .jobs-results-table tbody tr:hover {
            background: #f9fbfd;
        }

        .jobs-role-link {
            color: #1a6aa2;
            text-decoration: none;
            font-weight: 600;
            line-height: 1.35;
            font-size: 14px;
        }

        .jobs-role-link:hover {
            color: #124c74;
            text-decoration: underline;
        }

        .jobs-company {
            margin-top: 3px;
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 3px 0;
            min-width: 0;
        }

        .jobs-company-name {
            font-size: 11px;
            color: var(--slate-600);
            font-weight: 500;
            letter-spacing: 0.01em;
            white-space: normal;
            word-break: break-word;
            line-height: 1.4;
        }

        .jobs-company-interest-chip {
            font-size: 10px;
            color: #76879a;
            font-weight: 500;
            margin-left: 6px;
            padding-left: 6px;
            border-left: 1px solid #dbe3ec;
            letter-spacing: 0.01em;
            white-space: nowrap;
            line-height: 1.2;
        }

        .jobs-company-interest-chip.is-low {
            color: #5d8b6d;
        }

        .jobs-company-interest-chip.is-high {
            color: #93666a;
        }

        .jobs-remote-check.is-yes {
            color: #4d8f64;
        }

        .jobs-remote-check.is-no {
            color: #8c98a5;
        }

        .jobs-company-salary {
            font-size: 11px;
            color: #7f8f9f;
            font-weight: 500;
            white-space: normal;
            line-height: 1.4;
            margin-left: 6px;
            padding-left: 6px;
            border-left: 1px solid #dbe3ec;
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            min-width: 0;
        }
        .jobs-company-salary::before {
            content: none;
        }

        .salary-line {
            display: block;
            white-space: normal;
            word-break: break-word;
            color: #7f8f9f;
            font-size: 11px;
            line-height: 1.25;
            font-weight: 500;
        }

        .salary-line + .salary-line {
            color: #95a3b1;
            font-size: 10.5px;
        }

        .jobs-column-job {
            width: 37%;
        }

        .jobs-column-remote {
            width: 8%;
        }

        .jobs-column-skills {
            width: 34%;
        }

        .jobs-column-posted {
            width: 9%;
        }

        .jobs-column-action {
            width: 12%;
        }

        .jobs-salary,
        .jobs-posted {
            font-size: 11px;
            color: #52606d;
        }

        .jobs-remote {
            text-align: center;
            font-size: 14px;
            font-weight: 700;
        }

        .jobs-mobile-remote-pill {
            display: none;
            margin-left: 8px;
            padding: 1px 8px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            line-height: 1.6;
            background: #eef4fa;
            color: #4c657d;
            border: 1px solid #d7e3ef;
            max-width: 100%;
        }

        .jobs-mobile-remote-pill.is-remote {
            background: #eaf6ef;
            color: #2f6b49;
            border-color: #cfe5d9;
        }

        .jobs-mobile-remote-pill.is-onsite {
            background: #f5f7fa;
            color: #5f6f81;
            border-color: #dbe3ec;
        }

        .jobs-skill-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .jobs-skill-tag {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 3px;
            background: #f0f4f7;
            border: 1px solid #dde3e9;
            font-size: 10.5px;
            font-weight: 500;
            color: #607285;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        .jobs-empty-skill {
            font-size: 11px;
            color: #98a2ad;
        }

        .jobs-apply-cell {
            text-align: center;
            white-space: nowrap;
        }

        .jobs-group-summary {
            margin-top: 7px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }

        .jobs-group-count-badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 999px;
            background: #edf5ff;
            border: 1px solid #d4e3f3;
            color: #2f5f8a;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .jobs-group-locations {
            font-size: 11px;
            color: #6f8193;
            line-height: 1.4;
        }

        .jobs-group-toggle {
            padding: 5px 9px;
            border: 1px solid #cfdbe7;
            border-radius: 6px;
            background: #f8fbfe;
            color: #2f5f8a;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
        }

        .jobs-group-toggle:hover {
            background: #eef5fb;
            border-color: #bfd2e3;
        }

        .jobs-group-details-row td {
            padding: 0 10px 12px;
            background: #fbfdff;
        }

        .jobs-group-variants {
            border: 1px solid #e3ebf3;
            border-radius: 10px;
            background: #ffffff;
            overflow: hidden;
        }

        .jobs-group-variant-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            padding: 10px 12px;
            border-top: 1px solid #edf2f7;
        }

        .jobs-group-variant-row:first-child {
            border-top: none;
        }

        .jobs-group-variant-main {
            min-width: 0;
        }

        .jobs-group-variant-location {
            font-size: 12px;
            font-weight: 600;
            color: #334e68;
            line-height: 1.35;
        }

        .jobs-group-variant-meta {
            margin-top: 3px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px 10px;
            font-size: 11px;
            color: #728396;
        }

        .jobs-group-variant-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
            flex-wrap: wrap;
        }

        .jobs-group-open-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 8px;
            border: 1px solid #d4dee8;
            border-radius: 4px;
            background: #fff;
            color: #4f6b86;
            font-size: 11px;
            font-weight: 600;
            text-decoration: none;
        }

        .jobs-group-open-link:hover {
            background: #f5f8fb;
            color: #35546f;
        }

        .jobs-hide-button {
            width: 22px;
            height: 22px;
            padding: 0;
            border: 1px solid #dde3ea;
            border-radius: 50%;
            background: transparent;
            color: #a0aab4;
            font-size: 13px;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.12s, color 0.12s, border-color 0.12s;
            margin-left: 5px;
            vertical-align: middle;
            flex-shrink: 0;
        }

        .jobs-hide-button:hover {
            background: #fdecea;
            color: #c0392b;
            border-color: #f5c2be;
        }

        .jobs-favorite-button {
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            color: #f59e0b;
            padding: 0 2px;
            margin-left: 5px;
            vertical-align: middle;
            flex-shrink: 0;
        }

        .jobs-apply-button {
            min-width: 72px;
            height: 32px;
            padding: 0 12px;
            border: 1px solid #c4dcc8;
            border-radius: 8px;
            background: linear-gradient(135deg, #d8efdd 0%, #c5e3cd 100%);
            color: #4a7a54;
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
        }

        .jobs-results-count {
            padding: 10px 12px;
            font-size: 11px;
            color: var(--slate-600);
            background: var(--slate-50);
        }

        @media (max-width: 1280px) {
            .jobs-search-results {
                width: min(100%, 1120px);
            }

            .jobs-primary-search-row {
                grid-template-columns: minmax(0, 1fr) max-content;
            }

            .jobs-main-search-group {
                grid-template-columns: minmax(0, 1fr) 180px;
            }
        }

        @media (max-width: 900px) {
            html,
            body {
                overflow-x: hidden;
            }

            .container {
                height: auto;
                min-height: 100dvh;
            }

            .editor-panel {
                overflow-y: visible;
            }

            .jobs-search-results {
                width: 100%;
                overflow: visible;
                border: none;
                box-shadow: none;
                background: transparent;
            }

            .jobs-results-table {
                display: block;
                width: 100%;
                table-layout: auto;
            }

            .jobs-results-table thead {
                display: none;
            }

            .jobs-results-table tbody {
                display: grid;
                gap: 10px;
            }

            .jobs-results-table tbody tr {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 10px;
                border: 1px solid #dce6ef;
                border-radius: 14px;
                background: #fff;
                box-shadow: 0 7px 18px rgba(31, 45, 61, 0.07);
                padding: 12px;
            }

            .jobs-results-table td {
                display: block;
                border-bottom: none;
                padding: 0;
                margin: 0;
            }

            .jobs-results-table td:nth-child(2),
            .jobs-results-table td:nth-child(4) {
                display: none;
            }

            .jobs-results-table td:nth-child(1) {
                order: 1;
            }

            .jobs-results-table td:nth-child(3) {
                order: 2;
            }

            .jobs-results-table td:nth-child(5) {
                order: 3;
            }

            .jobs-results-table td:nth-child(3)::before,
            .jobs-results-table td:nth-child(5)::before {
                display: block;
                margin-bottom: 5px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.06em;
                text-transform: uppercase;
                color: #7b8fa2;
            }

            .jobs-results-table td:nth-child(3)::before {
                content: 'Skills';
            }

            .jobs-results-table td:nth-child(5)::before {
                content: 'Actions';
            }

            .jobs-results-table td:nth-child(1) .jobs-company {
                gap: 6px 0;
                align-items: center;
            }

            .jobs-results-table td:nth-child(1) .jobs-company-name {
                flex: 1 1 100%;
                border-bottom: none;
            }

            .jobs-results-table td:nth-child(1) .jobs-company-salary {
                margin-left: 0;
                padding-left: 0;
                border-left: none;
            }

            .jobs-results-table td:nth-child(1) .jobs-mobile-remote-pill {
                display: inline-flex;
                align-items: center;
            }

            .jobs-results-table td:nth-child(1) .jobs-part-time-indicator {
                margin-left: 0 !important;
            }

            .jobs-results-table td:nth-child(3) .jobs-skill-tags {
                gap: 6px;
            }

            .jobs-apply-cell {
                display: flex !important;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: center;
                gap: 8px;
                text-align: left;
                white-space: normal;
            }

            .jobs-group-details-row td {
                padding: 0 0 10px;
                border-bottom: none;
            }

            .jobs-group-variant-row {
                grid-template-columns: 1fr;
                align-items: stretch;
            }

            .jobs-group-variant-actions {
                justify-content: flex-start;
            }

            .jobs-apply-button {
                min-width: 124px;
            }

            .jobs-search-grid {
                gap: 8px;
            }

            .search-panel {
                padding: 9px;
            }

            .jobs-primary-search-row,
            .jobs-main-search-group {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .jobs-primary-search-row {
                gap: 8px;
            }

            .jobs-main-search-group {
                border-right: 1px solid var(--border);
                border-radius: 10px;
            }

            .jobs-search-action {
                padding: 8px;
                border-left: 1px solid var(--border);
                border-radius: 10px;
            }

            .jobs-secondary-filter-row {
                flex-wrap: wrap;
                gap: 8px;
            }

            .jobs-secondary-filter-row .jobs-filter-dropdown {
                flex: 1 1 calc(50% - 4px);
                min-width: 0;
            }

            .jobs-filter-dropdown,
            .jobs-filter-dropdown-trigger {
                width: 100%;
            }

            .jobs-filter-dropdown-menu {
                width: 100%;
                min-width: 0;
                max-width: calc(100vw - 24px);
                left: 0;
                right: auto;
            }

            .jobs-keyword-chip {
                max-width: min(64%, 210px);
            }

            .jobs-input.jobs-input--has-keyword {
                padding-left: 138px;
            }
        }

        @media (max-width: 520px) {
            .jobs-secondary-filter-row .jobs-filter-dropdown {
                flex: 1 1 calc(50% - 4px);
            }

            .jobs-secondary-filter-row .jobs-filter-dropdown[data-test="dropdown-element-salary"] {
                flex: 1 1 100%;
            }

            .jobs-filter-dropdown-menu {
                max-width: calc(100vw - 16px);
            }

            .jobs-secondary-filter-row .jobs-filter-dropdown[data-test="dropdown-element-salary"] .jobs-filter-dropdown-menu {
                width: 100%;
                max-width: 100%;
            }

            .jobs-salary-min-controls {
                grid-template-columns: minmax(0, 1fr) minmax(74px, 88px);
                gap: 8px;
            }

            #jobsSalaryMinMonthlyInput {
                min-width: 0;
                font-size: 15px;
                padding-left: 12px;
                padding-right: 12px;
            }

            #jobsSalaryMinCurrencyInput {
                min-width: 0;
                font-size: 14px;
                padding-left: 8px;
                padding-right: 26px;
            }
        }
        
        @media (max-width: 1200px) {
            .application-progress-label {
                font-size: 9px;
                max-width: 60px;
            }
            .application-progress-circle {
                width: 28px;
                height: 28px;
                font-size: 12px;
            }
        }
        
        @media (max-width: 768px) {
            .application-progress {
                flex-wrap: wrap;
                gap: 10px;
            }
            .application-progress-step {
                flex: 0 0 30%;
            }
            .application-progress-step:not(:last-child)::after {
                display: none;
            }
            .application-progress-label {
                font-size: 8px;
                max-width: 50px;
            }
        }
        .editor-panel {
            width: 48%;
            background: var(--surface);
            color: var(--ink);
            overflow-y: auto;
            padding: 20px;
            border-right: 1px solid var(--border);
        }
        .preview-panel {
            width: 52%;
            background: #e0e0e0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .pv-scroll {
            flex: 1;
            overflow-y: auto;
            overflow-x: visible;
            padding: 26px 18px 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        @media (max-width: 480px) {
            .container {
                display: block;
                height: auto;
                min-height: 100dvh;
            }

            .editor-panel,
            .preview-panel {
                width: 100%;
            }

            .editor-panel {
                height: auto;
                max-height: none;
                border-right: none;
                border-bottom: none;
                overflow: visible;
            }

            .preview-panel {
                display: none;
            }

            .preview-wrapper {
                width: 100% !important;
                max-width: 100%;
                margin-left: 8px;
            }
            .preview-wrapper .page {
                width: 100% !important;
                max-width: 100%;
                min-height: auto;
                padding: 10mm 6mm 10mm 8mm;
                margin-bottom: 10px;
                box-sizing: border-box;
            }
            .zoom-controls {
                position: static;
                margin-bottom: 5px;
                width: 100%;
                justify-content: center;
            }
            .zoom-btn {
                width: 32px;
                height: 32px;
                font-size: 16px;
            }
        }
        /* ===== SECTION: Preview toolbar / zoom controls (.preview-*) ===== */
        .preview-wrapper {
            background: none;
            box-shadow: none;
            width: 210mm;
            min-height: 0;
            padding: 0;
            margin: 0 auto;
            display: block;
            transform: scale(1);
            transform-origin: top center;
            transition: transform 0.2s ease;
        }
        .preview-wrapper .page {
            background: white;
            width: 210mm;
            height: 297mm;
            min-height: 297mm;
            max-height: 297mm;
            margin: 0 auto 24px auto;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 18mm 12mm 18mm 12mm;
            box-sizing: border-box;
            display: block;
        }
        .preview-wrapper .page.sidebar-layout {
            padding: 0 !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: stretch;
        }
        .preview-wrapper .page.executive-layout {
            padding: 0 !important;
        }
        .preview-wrapper .page.sidebar-layout .sidebar {
            display: block;
            height: 100%;
        }
        .preview-wrapper .page.sidebar-layout .main-content {
            display: block;
            height: 100%;
        }
        .preview-wrapper.pdf-preview-mode {
            width: 100%;
            min-height: 900px;
            background: #525659;
        }
        .preview-wrapper.pdf-preview-mode .pdf-inline-frame {
            width: 100%;
            min-height: 900px;
            height: 900px;
            border: 0;
            display: block;
            background: #525659;
        }
        .preview-wrapper .page:last-child {
            margin-bottom: 0;
        }
        .preview-empty-state {
            width: 210mm;
            min-height: 297mm;
            margin: 0 auto;
            background: linear-gradient(180deg, #f9fcff 0%, #eef5fb 100%);
            border: 1px solid #d8e5f2;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24mm 18mm;
            box-sizing: border-box;
            text-align: center;
        }
        .preview-empty-state-card {
            max-width: 540px;
            background: #ffffff;
            border: 1px solid #dbe7f3;
            border-radius: 14px;
            padding: 26px 24px;
            box-shadow: 0 8px 20px rgba(31, 63, 92, 0.08);
        }
        .preview-empty-state-title {
            margin: 0 0 10px 0;
            color: #274766;
            font-size: 28px;
            letter-spacing: 0.4px;
        }
        .preview-empty-state-text {
            margin: 0;
            color: #51697f;
            font-size: 15px;
            line-height: 1.55;
        }
        .preview-empty-state-hint {
            margin-top: 14px;
            color: #2e6da3;
            font-size: 13px;
            font-weight: 600;
        }
        .zoom-controls {
            position: sticky;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 5px;
            justify-content: flex-end;
            margin-bottom: 10px;
            z-index: 100;
        }
        .zoom-btn {
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 36px;
            height: 36px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            color: #333;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .zoom-btn:hover {
            background: rgb(209, 228, 226);
            border-color: rgb(100, 150, 145);
            color: #000;
        }
        .zoom-btn:active {
            transform: scale(0.95);
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes thinkingBounce {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
            30% { transform: translateY(-4px); opacity: 1; }
        }

        @keyframes thinkingFade {
            0%, 100% { opacity: 0.65; }
            50% { opacity: 1; }
        }

        .thinking-dots {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }

        .thinking-dots span {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: currentColor;
            animation: thinkingBounce 1.2s ease-in-out infinite;
        }

        .thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
        .thinking-dots span:nth-child(3) { animation-delay: 0.30s; }

        .thinking-text {
            animation: thinkingFade 2.4s ease-in-out infinite;
        }

        /* Job Post Summary HTML styling */
        .summary-section {
            margin-bottom: 8px;
            padding-bottom: 8px;
        }
        
        .summary-section h4 {
            font-size: 13px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 4px;
            padding: 0;
        }
        
        .summary-section p {
            font-size: 12px;
            color: #555;
            line-height: 1.3;
            margin: 0;
            padding: 0;
        }
        
        .tags-container {
            margin: 4px 0;
            padding: 0;
        }
        
        .tags-container strong {
            font-size: 11px;
            color: #666;
            margin-right: 6px;
            display: inline;
        }
        
        .skill-tag {
            display: inline-block;
            background-color: #3498db;
            color: white;
            padding: 2px 5px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 500;
            margin: 0 3px 2px 0;
        }
        
        .experience-tag {
            display: inline-block;
            background-color: #2ecc71;
            color: white;
            padding: 2px 5px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 500;
            margin: 0 3px 2px 0;
        }
        
        h1 {
            margin: 0 0 20px 0;
            font-size: 24px;
            color: #333;
        }
        .editor-panel .section {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }
        .editor-panel .section:last-child {
            border-bottom: none;
        }
        .editor-panel .section h2 {
            font-size: 16px;
            color: var(--j-teal-d);
            margin: 0 0 15px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-size: 13px;
            font-weight: 500;
            color: var(--slate-700);
        }
        /* Color only (not sizing) — applies to every <select> in the app without
           disturbing dropdowns elsewhere that rely on their own width/margin rules. */
        select {
            background: var(--surface);
            color: var(--ink);
            border-color: var(--border-strong);
        }
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        textarea {
            width: 100%;
            padding: 8px 10px;
            margin-bottom: 12px;
            border: 1px solid var(--border-strong);
            border-radius: 4px;
            background: var(--surface);
            color: var(--ink);
            font-size: 13px;
            font-family: inherit;
        }
        textarea {
            resize: vertical;
            min-height: 60px;
        }
        .experience-item,
        .skill-item {
            background: var(--slate-75);
            padding: 12px;
            margin-bottom: 10px;
            border-radius: 4px;
            border-left: 3px solid var(--j-teal);
        }
        .experience-item input,
        .experience-item textarea {
            margin-bottom: 8px;
        }
        .experience-row {
            display: flex;
            gap: 10px;
            margin-bottom: 8px;
        }
        .experience-row > div {
            flex: 1;
        }
        .experience-row label {
            display: block;
            margin-bottom: 5px;
        }
        .experience-row input {
            width: 100%;
            margin-bottom: 0;
        }
        .form-row {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
        }
        .form-row > div {
            flex: 1;
        }
        .form-row label {
            display: block;
            margin-bottom: 5px;
        }
        .form-row input {
            width: 100%;
            margin-bottom: 0;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .btn-primary {
            background: rgb(100, 150, 145);
            color: white;
        }
        .btn-primary:hover {
            background: rgb(80, 130, 125);
        }
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        .btn-secondary:hover {
            background: #5a6268;
        }
        .btn-success {
            background: #28a745;
            color: white;
        }
        .btn-success:hover {
            background: #218838;
        }
        .btn-info {
            background: #17a2b8;
            color: white;
        }
        .btn-info:hover {
            background: #138496;
        }
        /* ===== SECTION: CV export/download UI (.cv-*) ===== */
        .cv-profile-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .cv-profile-selector {
            padding: 8px;
            border-radius: 8px;
            border: 1px solid #d8dee4;
            font-size: 13px;
            cursor: pointer;
            flex: 1;
            min-width: 220px;
            background: #fff;
            color: #2f3a44;
        }
        .cv-profile-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .cv-profile-actions .btn {
            margin: 0;
            padding: 8px 12px;
            font-size: 12px;
            border-radius: 8px;
            border: 1px solid transparent;
            transition: all 0.2s ease;
            box-shadow: none;
        }
        .cv-profile-actions .btn:hover {
            transform: translateY(-1px);
        }
        .cv-profile-actions .btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            transform: none;
        }
        .cv-profile-actions .btn-update,
        .cv-profile-actions .btn-new {
            background: #1f7a64;
            color: #fff;
        }
        .cv-profile-actions .btn-update:hover,
        .cv-profile-actions .btn-new:hover {
            background: #176c58;
        }
        .cv-profile-actions .btn-rename {
            background: #fff;
            color: #2f3a44;
            border-color: #d8dee4;
        }
        .cv-profile-actions .btn-rename:hover {
            background: #f4f7f9;
            border-color: #c9d2da;
        }
        .cv-profile-actions .btn-translate-pl {
            background: #fff;
            color: #1a56a0;
            border-color: #b8d0ef;
        }
        .cv-profile-actions .btn-translate-pl:hover {
            background: #f0f6ff;
            border-color: #8ab4e0;
        }
        .cv-profile-actions .btn-delete {
            background: #fff;
            color: #b02a37;
            border-color: #e8c7cc;
        }
        .cv-profile-actions .btn-delete:hover {
            background: #fff5f6;
            border-color: #dca8b0;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        /* Job Summary Tabs */
        /* ===== SECTION: Job listing/detail styles — continued (.job-*) ===== */
        .job-summary-tab-button {
            padding: 10px 15px;
            border: 1px solid #d6dde5;
            border-bottom: 1px solid #d6dde5;
            background: #f8fafc;
            color: #4f6478;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            border-radius: 4px 4px 0 0;
            margin-right: 5px;
            transition: all 0.2s;
        }
        .job-summary-tab-button:hover {
            background: #f1f5f9;
            color: #3f556a;
        }
        .job-summary-tab-button.active {
            background: #fbfdff;
            color: #3f5f7e;
            border-color: #d6dde5;
            border-bottom: 2px solid #7aa3c9;
            font-weight: 600;
        }
        .job-summary-tab-content {
            display: none;
        }
        .job-summary-tab-content.active {
            display: block;
        }
        /* Job Summary Right Tabs (Preview Area) */
        .job-summary-right-tab-button {
            padding: 10px 15px;
            border: 1px solid #d6dde5;
            border-bottom: 1px solid #d6dde5;
            background: #f8fafc;
            color: #4f6478;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            border-radius: 4px 4px 0 0;
            margin-right: 5px;
            transition: all 0.2s;
        }
        .job-summary-right-tab-button:hover {
            background: #f1f5f9;
            color: #3f556a;
        }
        .job-summary-right-tab-button.active {
            background: #fbfdff;
            color: #3f5f7e;
            border-color: #d6dde5;
            border-bottom: 2px solid #7aa3c9;
            font-weight: 600;
        }
        .job-summary-right-tab-content {
            display: none;
        }
        .job-summary-right-tab-content.active {
            display: block;
        }

        .job-post-preview-meta-inline {
            min-height: 20px;
            display: inline-flex;
            align-items: center;
            font-size: 11px;
            font-weight: 500;
            color: #798897;
            letter-spacing: 0.01em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 75%;
        }

        .job-post-summary-preparing {
            border-color: #d6e4f0 !important;
            background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%) !important;
            cursor: progress !important;
        }

        .job-post-summary-preparing-title {
            font-size: 13px;
            font-weight: 600;
            color: #34516d;
            margin-bottom: 4px;
        }

        .job-post-summary-preparing-sub {
            font-size: 12px;
            color: #6b839b;
            margin-bottom: 12px;
        }

        .job-post-summary-skeleton {
            height: 11px;
            border-radius: 999px;
            margin-bottom: 8px;
            background: linear-gradient(90deg, #ebf1f7 0%, #dce8f3 50%, #ebf1f7 100%);
            background-size: 200% 100%;
            animation: shimmerJobPostSummary 1.2s linear infinite;
        }

        .job-post-summary-skeleton:last-child {
            width: 62%;
            margin-bottom: 0;
        }

        @keyframes shimmerJobPostSummary {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        /* ─── Company Info Bar ───────────────────────────── */
        .company-info-bar {
            position: relative;
            background: #f8f4fc;
            border: 1px solid #c9aee0;
            border-radius: 6px;
            padding: 5px 10px;
            margin-bottom: 8px;
            font-size: 11px;
            color: #4a3060;
        }
        .company-info-bar-line {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 8px;
            overflow: hidden;
            white-space: nowrap;
        }
        .company-info-bar-line a { color: #7b3fa3; text-decoration: none; }
        .company-info-bar-line a:hover { text-decoration: underline; }
        .company-info-bar-sep { color: #c9aee0; }
        .company-info-bar-expanded {
            display: none;
            position: absolute;
            left: 0; right: 0;
            top: calc(100% + 3px);
            background: #f8f4fc;
            border: 1px solid #c9aee0;
            border-radius: 6px;
            padding: 8px 12px;
            font-size: 12px;
            color: #333;
            z-index: 50;
            box-shadow: 0 4px 14px rgba(80,30,120,0.13);
            line-height: 1.7;
        }
        .company-info-bar:hover .company-info-bar-expanded { display: block; }

        /* ─── Adapt Profile Wizard ─────────────────────────────────────── */
        #adaptProfileModal {
            position: fixed; inset: 0; z-index: 10000;
            background: rgba(0,0,0,0.55);
            display: flex; align-items: flex-start; justify-content: center;
            overflow-y: auto; padding: 16px 8px 32px;
        }
        #adaptProfileModal .apw-card {
            background: #fff; border-radius: 12px;
            width: 100%; max-width: min(900px, 96vw);
            box-shadow: 0 8px 40px rgba(0,0,0,0.22);
            display: flex; flex-direction: column; overflow: hidden;
        }
        #adaptProfileModal .apw-header {
            padding: 16px 20px 12px;
            border-bottom: 1px solid #e8edf2;
            display: flex; align-items: center; justify-content: space-between;
            background: #f8fafc;
        }
        #adaptProfileModal .apw-title {
            font-size: 15px; font-weight: 700; color: #1e3a52;
        }
        #adaptProfileModal .apw-context-pill {
            font-size: 11px; font-weight: 600; color: #1f7a64;
            background: #eef7f4; border: 1px solid #c4e8df;
            border-radius: 999px; padding: 3px 10px;
            margin: 0 8px 0 auto; white-space: nowrap;
            max-width: 180px; overflow: hidden; text-overflow: ellipsis;
        }
        #adaptProfileModal .apw-close {
            background: none; border: none; font-size: 20px; line-height: 1;
            cursor: pointer; color: #8898aa; padding: 2px 6px; border-radius: 4px;
        }
        #adaptProfileModal .apw-close:hover { background: #f0f0f0; color: #333; }
        #adaptProfileModal .apw-main {
            display: flex; flex-direction: row; flex: 1; min-height: 0; overflow: hidden;
        }
        #adaptProfileModal .apw-rail {
            width: 210px; min-width: 210px; background: #f8fafc;
            border-right: 1px solid #e2e8f0;
            display: flex; flex-direction: column;
            padding: 20px 0 16px; overflow-y: auto; flex-shrink: 0;
        }
        #adaptProfileModal .apw-rail-step {
            display: flex; align-items: center; gap: 10px; padding: 7px 16px;
        }
        #adaptProfileModal .apw-rail-circle {
            width: 24px; height: 24px; border-radius: 50%;
            background: #dce4ef; color: #63788f;
            font-size: 11px; font-weight: 700;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
            transition: background 0.15s, color 0.15s;
        }
        #adaptProfileModal .apw-rail-step.active .apw-rail-circle,
        #adaptProfileModal .apw-rail-step.done .apw-rail-circle {
            background: #1f7a64; color: #fff;
        }
        #adaptProfileModal .apw-rail-step-name {
            font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        #adaptProfileModal .apw-rail-step.active .apw-rail-step-name { color: #1f7a64; font-weight: 600; }
        #adaptProfileModal .apw-rail-footer {
            margin-top: auto; padding: 12px 16px 0;
            font-size: 11px; color: #94a3b8; line-height: 1.4;
        }
        #adaptProfileModal .apw-body {
            padding: 20px; flex: 1; overflow-y: auto; min-height: 200px; min-width: 0;
        }
        #adaptProfileModal .apw-resume-banner {
            background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px;
            padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: #856404;
        }
        #adaptProfileModal .apw-profile-context {
            margin-bottom: 12px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid #d5e2f0;
            background: #f5f9fd;
            color: #304860;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }
        #adaptProfileModal .apw-footer {
            padding: 12px 20px; border-top: 1px solid #e8edf2;
            display: flex; gap: 10px; justify-content: flex-end;
            background: #f8fafc;
        }
        #adaptProfileModal .apw-btn {
            min-height: 40px; padding: 0 18px; border-radius: 6px;
            font-size: 13px; font-weight: 600; cursor: pointer; border: none;
            transition: opacity 0.15s, background 0.15s;
        }
        #adaptProfileModal .apw-btn:disabled { opacity: 0.45; cursor: not-allowed; }
        #adaptProfileModal .apw-btn-primary { background: #1f7a64; color: #fff; }
        #adaptProfileModal .apw-btn-primary:hover:not(:disabled) { background: #185f4f; }
        #adaptProfileModal .apw-btn-success { background: #27ae60; color: #fff; }
        #adaptProfileModal .apw-btn-success:hover:not(:disabled) { background: #1e8e4e; }
        #adaptProfileModal .apw-btn-ghost {
            background: transparent; color: #5f6c75;
            border: 1px solid #d0d8e1;
        }
        #adaptProfileModal .apw-btn-ghost:hover:not(:disabled) { background: #f0f3f6; }
        #adaptProfileModal .apw-btn-danger { background: #e74c3c; color: #fff; }
        #adaptProfileModal .apw-item-card {
            border: 1px solid #e0e8f0; border-radius: 8px;
            padding: 14px 16px; margin-bottom: 12px; background: #fafcfe;
        }
        #adaptProfileModal .apw-item-label {
            font-size: 14px; font-weight: 600; color: #1e3a52;
            margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
        }
        #adaptProfileModal .apw-choice-row {
            display: flex; gap: 8px; flex-wrap: wrap;
        }
        #adaptProfileModal .apw-choice-btn {
            flex: 1; min-width: 80px; min-height: 44px;
            border-radius: 6px; border: 2px solid #dce4ef;
            background: #fff; color: #4a5568; font-size: 13px; font-weight: 600;
            cursor: pointer; transition: all 0.15s; padding: 0 10px;
            touch-action: manipulation;
        }
        #adaptProfileModal .apw-choice-btn:hover { border-color: #1f7a64; color: #1f7a64; }
        #adaptProfileModal .apw-choice-btn.selected-yes { border-color: #27ae60; background: #eafaf1; color: #1e8e4e; }
        #adaptProfileModal .apw-choice-btn.selected-similar { border-color: #f39c12; background: #fef9e7; color: #b7770d; }
        #adaptProfileModal .apw-choice-btn.selected-no { border-color: #e74c3c; background: #fdf3f2; color: #c0392b; }
        #adaptProfileModal .apw-choice-row.compact {
            align-items: center;
            gap: 6px;
            justify-content: flex-end;
            width: 100%;
        }
        #adaptProfileModal .apw-choice-btn.apw-choice-btn-sm {
            flex: 0 0 auto;
            min-width: 0;
            min-height: 30px;
            padding: 0 9px;
            font-size: 11px;
            border-width: 1px;
        }
        #adaptProfileModal .apw-similar-input {
            margin-top: 8px; width: 100%; padding: 8px 10px;
            border: 1px solid #d0d8e1; border-radius: 6px;
            font-size: 13px; color: #333; box-sizing: border-box;
        }
        #adaptProfileModal .apw-chip {
            display: inline-block; padding: 4px 10px; border-radius: 14px;
            font-size: 12px; font-weight: 600; margin: 3px;
        }
        #adaptProfileModal .apw-chip-add { background: #d4edda; color: #155724; }
        #adaptProfileModal .apw-chip-remove { background: #f8d7da; color: #721c24; }
        #adaptProfileModal .apw-chip-linked { background: #eef7f4; color: #1f7a64; border: 1px solid #c4e8df; }
        #adaptProfileModal .apw-section-label {
            font-size: 12px; font-weight: 700; color: #555; text-transform: uppercase;
            letter-spacing: 0.04em; margin: 12px 0 6px;
        }
        #adaptProfileModal .apw-diff-row {
            display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;
        }
        #adaptProfileModal .apw-diff-col {
            border: 1px solid #e0e8f0; border-radius: 6px; padding: 10px;
            font-size: 12px; line-height: 1.6; color: #333; background: #fff;
            white-space: pre-wrap; word-break: break-word;
        }
        #adaptProfileModal .apw-diff-col.original { background: #fafafa; border-color: #dce4ef; }
        #adaptProfileModal .apw-diff-col.adapted { background: #f0fff4; border-color: #b7e4c7; }
        #adaptProfileModal .apw-original-details { margin-bottom: 8px; }
        #adaptProfileModal .apw-original-details summary {
            cursor: pointer; font-size: 12px; color: #6b7280; padding: 4px 0;
            user-select: none; list-style: none; display: flex; align-items: center; gap: 5px;
        }
        #adaptProfileModal .apw-original-details summary::-webkit-details-marker { display: none; }
        #adaptProfileModal .apw-original-details summary::before { content: '▶'; font-size: 10px; transition: transform 0.15s; }
        #adaptProfileModal .apw-original-details[open] summary::before { transform: rotate(90deg); }
        #adaptProfileModal .apw-exp-block {
            border: 1px solid #e0e8f0; border-radius: 8px;
            padding: 12px 14px; margin-bottom: 10px; background: #fff;
        }
        #adaptProfileModal .apw-exp-title {
            font-size: 13px; font-weight: 700; color: #1e3a52; margin-bottom: 8px;
        }
        #adaptProfileModal .apw-resp-textarea {
            width: 100%; min-height: 100px; padding: 8px 10px;
            border: 1px solid #d0d8e1; border-radius: 6px; font-size: 12px;
            font-family: inherit; resize: none; box-sizing: border-box;
            line-height: 1.55; color: #333; overflow-y: hidden;
        }
        /* Summary step — editable adapted textarea (white = editable) */
        #adaptProfileModal .apw-editable-ta {
            background: #fff; border: 1px solid #93c5b6; cursor: text;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        #adaptProfileModal .apw-editable-ta:hover { border-color: #27ae60; }
        #adaptProfileModal .apw-editable-ta:focus { outline: none; border-color: #27ae60; box-shadow: 0 0 0 3px rgba(39,174,96,0.18); }
        #adaptProfileModal .apw-check-row {
            display: flex; align-items: flex-start; gap: 10px;
            padding: 8px 0; border-bottom: 1px solid #f0f3f6;
        }
        #adaptProfileModal .apw-check-row:last-child { border-bottom: none; }
        #adaptProfileModal .apw-check-row input[type=checkbox] {
            width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0; cursor: pointer;
        }
        #adaptProfileModal .apw-check-label {
            font-size: 13px; color: #333; cursor: pointer; line-height: 1.4;
        }
        #adaptProfileModal .apw-check-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 2px 18px;
            align-items: start;
        }
        #adaptProfileModal .apw-check-grid .apw-check-row {
            border-bottom: none;
            padding: 6px 0;
        }
        #adaptProfileModal .apw-alert {
            padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 12px;
        }
        #adaptProfileModal .apw-alert-error { background: #fdf3f2; border: 1px solid #f5c6cb; color: #721c24; }
        #adaptProfileModal .apw-alert-info { background: #e8f4fd; border: 1px solid #bee5f8; color: #1a5276; }
        #adaptProfileModal .apw-loading {
            text-align: center; padding: 30px; color: #666; font-size: 14px;
        }
        #adaptProfileModal .apw-spinner {
            display: inline-block; width: 28px; height: 28px;
            border: 3px solid #dce4ef; border-top-color: #1f7a64;
            border-radius: 50%; animation: apwSpin 0.7s linear infinite;
            margin-bottom: 10px;
        }
        @keyframes apwSpin { to { transform: rotate(360deg); } }
        #adaptProfileModal .apw-preview-scroll {
            border: 1px solid #e0e8f0; border-radius: 8px;
            overflow: auto; max-height: 360px; background: #fff;
            padding: 16px; font-size: 12px; line-height: 1.6;
        }
        #adaptProfileModal .apw-preview-step-head {
            font-size: 12px;
            color: #5b6b7a;
            margin: 0 0 10px;
        }
        #adaptProfileModal .zoom-controls.apw-preview-controls {
            position: static;
            width: 100%;
            margin-bottom: 10px;
            padding: 6px;
            border: 1px solid #dbe5ef;
            border-radius: 8px;
            background: #f3f8fd;
            box-sizing: border-box;
            gap: 8px;
            flex-wrap: wrap;
        }
        #adaptProfileModal .zoom-controls.apw-preview-controls .zoom-btn {
            min-height: 34px;
            min-width: 34px;
            line-height: 1;
        }
        #adaptProfileModal .zoom-controls.apw-preview-controls select {
            flex: 1 1 220px;
            min-width: 180px;
            max-width: 100%;
            margin-left: 0 !important;
            min-height: 34px;
        }
        #adaptProfileModal .apw-preview-viewport {
            width: 100%;
            max-height: min(480px, calc(100dvh - 280px));
            overflow: auto;
            border: 1px solid #dbe5ef;
            border-radius: 10px;
            background: #eef3f9;
            padding: 6px;
            box-sizing: border-box;
        }
        #adaptProfileModal .apw-preview-content {
            transform-origin: top left;
            will-change: transform;
        }
        #adaptProfileModal .apw-preview-content .page {
            margin: 0 auto 8px !important;
            box-shadow: 0 3px 14px rgba(17, 37, 58, 0.18);
        }
        #adaptProfileModal .apw-preview-content * {
            pointer-events: none !important;
        }
        #adaptProfileModal .apw-gap-divider {
            border: none; border-top: 1px solid #e8edf2;
            margin: 18px 0;
        }
        #adaptProfileModal .apw-tab-bar {
            display: flex; gap: 0; border-bottom: 2px solid #e5e7eb;
            margin-bottom: 14px; flex-wrap: wrap;
        }
        #adaptProfileModal .apw-tab {
            padding: 6px 14px; font-size: 12px; font-weight: 500;
            cursor: pointer; border: none; background: none; color: #6b7280;
            border-bottom: 2px solid transparent; margin-bottom: -2px;
            border-radius: 0; transition: color 0.15s; white-space: nowrap;
        }
        #adaptProfileModal .apw-tab:hover { color: #374151; }
        #adaptProfileModal .apw-tab.active { color: #1f7a64; border-bottom-color: #1f7a64; font-weight: 600; }
        /* Step 5 — Order list */
        #adaptProfileModal .order-hint {
            display: flex; align-items: center; gap: 6px;
            font-size: 11.5px; color: #94a3b8; margin-bottom: 9px;
        }
        #adaptProfileModal .order-list {
            display: flex; flex-direction: column; gap: 4px;
            max-height: 340px; overflow-y: auto;
            border: 1px solid #e2e8f0; border-radius: 10px; padding: 6px;
        }
        #adaptProfileModal .order-row {
            display: flex; align-items: center; gap: 9px;
            padding: 5px 9px; border: 1px solid transparent;
            border-radius: 8px; background: #f8fafc;
            transition: background 0.1s, border-color 0.1s;
        }
        #adaptProfileModal .order-row:hover { background: #fff; border-color: #e2e8f0; }
        #adaptProfileModal .order-row.apw-drag-over { border-top: 2px solid #1f7a64; }
        #adaptProfileModal .order-row .grip {
            color: #94a3b8; font-size: 14px; cursor: grab; flex-shrink: 0; user-select: none;
        }
        #adaptProfileModal .order-row .ord-n {
            width: 19px; text-align: center; color: #94a3b8;
            font-size: 11px; font-weight: 800; flex-shrink: 0;
        }
        #adaptProfileModal .order-row .ol {
            flex: 1; font-size: 12.5px; font-weight: 600; color: #0f172a;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        #adaptProfileModal .order-row.njp .ol { color: #64748b; font-weight: 500; }
        #adaptProfileModal .nj-mark {
            display: inline-flex; align-items: center; flex-shrink: 0;
            font-size: 14px; line-height: 1; opacity: 0.85;
            vertical-align: middle;
        }
        #adaptProfileModal .order-row .ob {
            width: 24px; height: 24px; border: none; border-radius: 6px;
            background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px;
            display: none; align-items: center; justify-content: center; flex-shrink: 0;
            padding: 0; line-height: 1;
        }
        #adaptProfileModal .order-row:hover .ob { display: inline-flex; }
        #adaptProfileModal .order-row .ob:hover { background: #f1f5f9; color: #475569; }
        #adaptProfileModal .order-row .ob.top:hover { color: #1f7a64; }
        #adaptProfileModal .order-row .ob.pen:hover { color: #1f7a64; }
        #adaptProfileModal .order-row .ob.x:hover { color: #c0392b; }
        /* Step 2 — Attribution matrix */
        #adaptProfileModal .apw-matrix-wrap {
            overflow-x: auto; -webkit-overflow-scrolling: touch;
            border: 1px solid #e0e8f0; border-radius: 8px; max-width: 100%;
        }
        #adaptProfileModal .apw-matrix { border-collapse: collapse; min-width: 100%; font-size: 12px; }
        #adaptProfileModal .apw-matrix th,
        #adaptProfileModal .apw-matrix td {
            border: 1px solid #e8edf2; padding: 6px 8px;
            text-align: center; vertical-align: middle; white-space: nowrap;
        }
        #adaptProfileModal .apw-matrix th.apw-matrix-item {
            text-align: left; background: #f8fafc; font-weight: 600; color: #1e3a52;
            position: sticky; left: 0; z-index: 2;
            min-width: 130px; max-width: 160px; white-space: normal;
        }
        #adaptProfileModal .apw-matrix thead th {
            background: #f8fafc; font-weight: 600; color: #1e3a52;
            position: sticky; top: 0; z-index: 1; min-width: 100px;
        }
        #adaptProfileModal .apw-matrix thead th:first-child { z-index: 3; }
        #adaptProfileModal .apw-matrix tr:hover td { background: #f5f9fd; }
        #adaptProfileModal .apw-matrix .apw-matrix-group-header td {
            background: #eef7f4; color: #1f7a64; font-weight: 700;
            font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
            text-align: left; padding: 5px 10px; position: sticky; left: 0;
        }
        #adaptProfileModal .apw-matrix input[type=checkbox] {
            width: 16px; height: 16px; accent-color: #1f7a64; cursor: pointer;
        }
        /* Gap step — inline experience attribution chips */
        #adaptProfileModal .apw-exp-chip {
            display: inline-flex; align-items: center; padding: 3px 10px;
            border-radius: 12px; font-size: 11px; font-weight: 600;
            border: 1px solid #d0d8e1; background: #fff; color: #5f6c75;
            cursor: pointer; transition: all 0.15s; user-select: none;
        }
        #adaptProfileModal .apw-exp-chip:hover { border-color: #1f7a64; color: #1f7a64; }
        #adaptProfileModal .apw-exp-chip.linked { border-color: #1f7a64; background: #eef7f4; color: #1f7a64; }
        @media (max-width: 600px) {
            #adaptProfileModal .apw-card { max-width: 100vw; border-radius: 0; }
            #adaptProfileModal .apw-rail { display: none; }
        }
        @media (max-width: 540px) {
            #adaptProfileModal .apw-diff-row { grid-template-columns: 1fr; }
        }
        @media (max-width: 500px) {
            #adaptProfileModal .apw-check-grid { grid-template-columns: 1fr; gap: 0; }
            #adaptProfileModal .apw-choice-btn { font-size: 14px; }
            #adaptProfileModal .apw-btn { min-height: 44px; font-size: 14px; touch-action: manipulation; }
            #adaptProfileModal .zoom-controls.apw-preview-controls { padding: 6px; gap: 6px; }
            #adaptProfileModal .zoom-controls.apw-preview-controls select { flex-basis: 100%; min-width: 0; }
            #adaptProfileModal .apw-preview-viewport { max-height: min(360px, calc(100dvh - 300px)); padding: 4px; }
        }
        /* ─── End Adapt Profile Wizard ─────────────────────────────────── */

        /* Work Area Tabs */
        .work-area-tab-button {
            padding: 10px 15px;
            border: 1px solid #d6dde5;
            border-bottom: 1px solid #d6dde5;
            background: #f8fafc;
            color: #4f6478;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            border-radius: 4px 4px 0 0;
            margin-right: 5px;
            transition: all 0.2s;
        }
        .work-area-tab-button:hover {
            background: #f1f5f9;
            color: #3f556a;
        }
        .work-area-tab-button.active {
            background: #fbfdff;
            color: #3f5f7e;
            border-color: #d6dde5;
            border-bottom: 2px solid #7aa3c9;
            font-weight: 600;
        }
        .work-area-tab-content {
            display: none;
        }
        .work-area-tab-content.active {
            display: block;
        }
        
        /* AI Recommendation Sub-tabs */
        .ai-recommendation-subtab-button {
            padding: 8px 16px;
            border: none;
            border-bottom: 2px solid transparent;
            background: transparent;
            color: #555;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s;
        }
        .ai-recommendation-subtab-button:hover {
            background: #f0f0f0;
            color: #333;
        }
        .ai-recommendation-subtab-button.active {
            border-bottom-color: #3498db;
            color: #3498db;
            font-weight: 600;
        }
        .ai-recommendation-subtab-content {
            display: none;
        }
        .ai-recommendation-subtab-content.active {
            display: block;
        }
        
        .subtabs {
            display: flex;
            gap: 5px;
            margin-bottom: 15px;
            border-bottom: 1px solid var(--border);
        }
        .subtab {
            padding: 8px 15px;
            background: var(--slate-100);
            border: none;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            color: var(--slate-600);
            border-radius: 4px 4px 0 0;
            transition: all 0.2s;
        }
        .subtab:hover {
            background: var(--slate-200);
            color: var(--slate-900);
        }
        .subtab.active {
            background: var(--j-teal-tint);
            color: var(--ink);
            font-weight: 600;
            border-bottom: 1px solid var(--j-teal-tint);
        }
        .subtab-content {
            display: none;
        }
        .subtab-content.active {
            display: block;
        }

        .danger-card {
            border: 1px solid #f3e8e3;
            background: linear-gradient(120deg, #f9fafb 0%, #f3f4f6 100%);
            border-radius: 10px;
            padding: 16px 18px;
            margin-bottom: 18px;
            box-shadow: 0 1px 8px rgba(220, 38, 38, 0.04);
            max-width: 420px;
            font-size: 14px;
            color: #7c2d12;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .danger-card::before {
            display: none;
        }

        .danger-title {
            margin: 0 0 8px 0;
            color: #a16207;
            font-size: 15px;
            font-weight: 700;
        }

        .danger-text {
            color: #7c2d12;
            font-size: 13px;
            line-height: 1.5;
            margin: 0 0 10px 0;
        }

        .danger-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(220, 38, 38, 0.1);
        }

        .settings-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        /* ===== SECTION: Cookie consent banner (.cookie-*) ===== */
        .cookie-security-card {
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
            font-size: 13px;
            color: #334155;
            max-width: 420px;
        }

        .cookie-security-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }

        .cookie-security-kicker {
            margin: 0 0 4px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #64748b;
            font-weight: 700;
        }

        .cookie-security-title {
            margin: 0;
            font-size: 15px;
            color: #0f172a;
            font-weight: 700;
        }

        .cookie-security-meta {
            display: grid;
            gap: 8px;
        }

        .cookie-security-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 10px;
            border: 1px solid #e5eaf0;
            border-radius: 8px;
            background: #ffffff;
        }

        .cookie-security-label {
            color: #475569;
            font-size: 12px;
            font-weight: 600;
        }

        .cookie-security-value {
            color: #0f172a;
            font-size: 13px;
            font-weight: 600;
            text-align: right;
        }

        .cookie-consent-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.03em;
            border: 1px solid transparent;
            min-width: 90px;
        }

        .cookie-consent-badge.active {
            color: #166534;
            background: #e8f8ef;
            border-color: #9ee8be;
        }

        .cookie-consent-badge.pending {
            color: #334155;
            background: #f1f5f9;
            border-color: #cbd5e1;
        }

        .account-usage-card {
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--surface);
            padding: 16px;
            margin-bottom: 16px;
        }

        .account-usage-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }

        .account-usage-kicker {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--slate-600);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .account-usage-title {
            margin: 0;
            font-size: 18px;
            color: var(--ink);
            font-weight: 700;
            line-height: 1.2;
        }

        .account-usage-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .usage-plan-badge {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--border-strong);
            background: var(--surface);
            color: var(--slate-700);
            border-radius: 999px;
            padding: 3px 10px;
            font-size: 12px;
            font-weight: 700;
        }

        .usage-date {
            font-size: 12px;
            color: var(--slate-600);
            font-weight: 600;
        }

        .account-usage-body {
            display: grid;
            grid-template-columns: 1fr;
            gap: 9px;
        }

        .account-usage-empty {
            border: 1px dashed var(--border-strong);
            border-radius: 8px;
            padding: 12px;
            font-size: 13px;
            color: var(--slate-600);
            background: var(--surface);
        }

        .usage-row {
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface);
            padding: 10px 12px;
        }

        .usage-row-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
        }

        .usage-metric-label {
            font-size: 13px;
            color: var(--ink);
            font-weight: 600;
        }

        .usage-metric-value {
            font-size: 12px;
            color: var(--slate-600);
            font-weight: 700;
            white-space: nowrap;
        }

        .usage-progress-bar {
            width: 100%;
            height: 6px;
            border-radius: 999px;
            background: var(--ring-track);
            overflow: hidden;
        }

        .usage-progress-fill {
            height: 100%;
            width: 0%;
            border-radius: 999px;
            background: #6b8aa6;
            transition: width 0.25s ease;
        }

        .usage-progress-fill.warning {
            background: #d18a00;
        }

        .usage-progress-fill.critical {
            background: #c13f2d;
        }

        .account-usage-footer {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
        }

        .account-usage-note {
            font-size: 12px;
            color: var(--slate-600);
        }

        .upgrade-btn {
            border: 1px solid #2f5e8b;
            border-radius: 8px;
            background: linear-gradient(180deg, #3a6d9d 0%, #2f5e8b 100%);
            color: #fff;
            padding: 8px 14px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s, transform 0.15s;
            box-shadow: 0 1px 3px rgba(19, 41, 63, 0.18);
        }

        .upgrade-btn:hover {
            background: linear-gradient(180deg, #325f8a 0%, #2a537a 100%);
            transform: translateY(-1px);
        }

        .danger-confirm-label {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 12px;
            color: #7f1d1d;
            margin-top: 10px;
        }

        .danger-confirm-label input[type="checkbox"] {
            margin-top: 2px;
            accent-color: #dc2626;
        }

        .settings-btn {
            border: 1px solid #cbd5e1;
            background: #fff;
            color: #334155;
            border-radius: 7px;
            padding: 8px 12px;
            font-weight: 600;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .settings-btn:hover {
            background: #f8fafc;
            border-color: #94a3b8;
        }

        .danger-input {
            flex: 1;
            min-width: 190px;
            border: 1px solid #fed7d7;
            border-radius: 8px;
            padding: 7px 9px;
            font-size: 12px;
            outline: none;
            background: #fffbfb;
            color: #7f1d1d;
            transition: all 0.2s;
        }

        .danger-input::placeholder {
            color: #f08787;
        }

        .danger-input:focus {
            border-color: #ef4444;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
        }

        .danger-btn {
            border: none;
            background: #dc2626;
            color: #fff;
            border-radius: 8px;
            padding: 7px 11px;
            font-weight: 600;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .danger-btn:hover {
            background: #b91c1c;
            box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
            transform: translateY(-2px);
        }

        .danger-btn:active {
            transform: translateY(0);
        }

        .danger-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            transform: none;
        }

        @media (max-width: 768px) {
            .account-usage-header {
                flex-direction: column;
                align-items: stretch;
            }

            .upgrade-btn {
                width: 100%;
            }

            .danger-actions {
                flex-direction: column;
                align-items: stretch;
            }

            .danger-input,
            .danger-btn {
                width: 100%;
            }
        }
        .list-container {
            margin-top: 10px;
        }
        .remove-btn {
            background: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
            margin-top: 5px;
        }
        .remove-btn:hover {
            background: #c82333;
        }
        .add-btn {
            background: rgb(100, 150, 145);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            margin-top: 10px;
        }
        .add-btn:hover {
            background: rgb(80, 130, 125);
        }
        .collapsible-header {
            cursor: pointer;
            user-select: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .collapsible-header:hover {
            color: var(--j-teal-d);
        }
        .toggle-icon {
            transition: transform 0.2s;
            font-size: 12px;
        }
        .collapsible-content {
            max-height: none;
            overflow: visible;
            transition: max-height 0.3s ease-out;
        }
        .collapsible-content.collapsed {
            max-height: 0;
            overflow: hidden;
        }
        /* Tag input styles */
        /* ===== SECTION: Skill/tool tag chips (.tag-*) ===== */
        .tag-input-container {
            border: 1px solid var(--border-strong);
            border-radius: 4px;
            padding: 8px;
            min-height: 44px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            cursor: text;
            background: var(--surface);
            margin-bottom: 12px;
        }
        .tag-input-container:focus-within {
            border-color: var(--j-teal);
            outline: 2px solid rgba(100, 150, 145, 0.2);
        }
        .tag {
            display: inline-flex;
            align-items: center;
            background: var(--j-teal-tint);
            color: var(--ink);
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid var(--j-teal);
            gap: 6px;
            cursor: move;
            transition: background-color 0.2s, opacity 0.2s;
        }
        .tag.dragging {
            opacity: 0.5;
        }
        .tag.drop-target {
            background-color: rgba(100, 150, 145, 0.1);
        }
        .tag-text {
            white-space: nowrap;
        }
        .tag-remove {
            background: none;
            border: none;
            color: var(--slate-600);
            font-size: 16px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-radius: 50%;
        }
        .tag-remove:hover {
            background: rgba(127,127,127,0.2);
            color: var(--slate-900);
        }
        .tag-input {
            border: none;
            outline: none;
            flex: 1;
            min-width: 140px;
            font-size: 13px;
            font-family: inherit;
            padding: 4px 6px;
            background: transparent;
            color: var(--ink);
        }
        .tag-input::placeholder {
            color: var(--slate-500);
        }
        .tag-helper {
            font-size: 12px;
            color: var(--slate-500);
            margin-top: -8px;
            margin-bottom: 12px;
        }
        /* Skills/Tools group editor */
        /* ===== SECTION: Job result grouping controls (.grp-*) ===== */
        .grp { border: 1px solid var(--border); border-radius: 9px; margin-bottom: 12px; background: var(--slate-50); overflow: hidden; transition: border-color .15s, box-shadow .15s, background .15s; }
        .grp.drop-active { border-color: var(--j-teal); background: var(--j-teal-tint); box-shadow: 0 0 0 3px rgba(100,150,145,.12); }
        .grp.ungrouped { background: var(--slate-75); border-style: dashed; }
        .grp-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
        .grp.ungrouped .grp-head { border-bottom-color: var(--border); }
        .grp-handle { color: var(--slate-400); cursor: grab; font-size: 14px; line-height: 1; user-select: none; }
        .grp.ungrouped .grp-handle { visibility: hidden; }
        .grp-name { font-size: 13.5px; font-weight: 700; color: var(--slate-800); letter-spacing: .2px; }
        .grp.ungrouped .grp-name { color: var(--slate-500); font-weight: 600; text-transform: uppercase; font-size: 11.5px; letter-spacing: .6px; }
        .grp-count { font-size: 11px; font-weight: 700; color: var(--j-good); background: var(--j-teal-tint); border-radius: 999px; padding: 1px 8px; min-width: 20px; text-align: center; }
        .grp-spacer { flex: 1; }
        .grp-act { background: none; border: none; cursor: pointer; color: var(--slate-500); width: 26px; height: 26px; border-radius: 6px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
        .grp-act:hover { background: var(--j-teal-tint); color: var(--j-teal-d); }
        .grp-act.del:hover { background: var(--red-50); color: var(--red-700); }
        .tag-input-container { border: none; padding: 10px 12px; min-height: 46px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; cursor: text; background: transparent; }
        .tag { display: inline-flex; align-items: center; background: var(--j-teal-tint); color: var(--ink); padding: 4px 6px 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid var(--j-teal); gap: 6px; cursor: grab; transition: opacity .15s, box-shadow .15s; }
        .tag.dragging { opacity: .4; }
        .tag-text { white-space: nowrap; }
        .tag-remove { background: none; border: none; color: #557; font-size: 15px; cursor: pointer; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; }
        .tag-remove:hover { background: rgba(0,0,0,.12); color: #000; }
        .tag-input { border: none; outline: none; flex: 1; min-width: 130px; font-size: 13px; font-family: inherit; padding: 4px 6px; background: transparent; }
        .tag-input::placeholder { color: #aab2b0; }
        .empty-hint { font-size: 12px; color: #b4bcba; font-style: italic; padding: 4px 2px; }
        .add-grp { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; background: var(--surface); border: 1px dashed var(--border-strong); color: var(--j-good); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-family: inherit; }
        .add-grp:hover { border-color: var(--j-teal); background: var(--j-teal-tint); }
        .grp-add-btn { background: none; border: none; color: var(--j-teal); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; opacity: 0.7; }
        .grp-add-btn:hover { opacity: 1; background: var(--j-teal-tint); }
        /* Suggest Groups toolbar */
        .sec-toolbar { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
        .sec-toolbar .add-grp { margin-top: 0; }
        .suggest-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--j-teal-d); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; }
        .suggest-btn:hover { background: var(--j-panel-2); border-color: var(--slate-400); }
        .suggest-btn[disabled] { opacity: 0.6; cursor: default; pointer-events: none; }
        .suggest-btn .sx { font-style: normal; display: inline-block; }
        .suggest-btn.busy .sx { animation: sg-spin 1s linear infinite; }
        @keyframes sg-spin { to { transform: rotate(360deg); } }
        /* Review panel */
        .review { border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; padding: 14px; margin-bottom: 14px; }
        .review-h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
        .review-h .ic { font-size: 15px; color: #94a3b8; margin-top: 1px; flex-shrink: 0; }
        .review-h .tt { flex: 1; min-width: 0; }
        .review-h .tt .t { display: block; font-size: 13.5px; font-weight: 700; color: #0f172a; }
        .review-h .tt .sub { display: block; font-size: 12px; color: #64748b; margin-top: 3px; line-height: 1.4; }
        .review-h .x { width: 26px; height: 26px; border: none; background: none; cursor: pointer; color: #94a3b8; font-size: 16px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .review-h .x:hover { background: #e2e8f0; color: #334155; }
        /* ===== SECTION: Skill/tool suggestions (.sug-*) ===== */
        .sug-grp { background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 10px 12px; margin-bottom: 9px; transition: opacity .15s; }
        .sug-grp:last-of-type { margin-bottom: 0; }
        .sug-grp.off { opacity: 0.5; }
        .sug-grp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
        .sug-check { width: 18px; height: 18px; border: 2px solid rgb(100,150,145); border-radius: 4px; background: rgb(100,150,145); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: #fff; font-size: 11px; user-select: none; }
        .sug-grp.off .sug-check { background: #fff; border-color: #cbd5e1; color: transparent; }
        .sug-name { font-size: 13px; font-weight: 700; color: #0f172a; }
        .sug-count { font-size: 11px; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 1px 8px; }
        .sug-tags { display: flex; flex-wrap: wrap; gap: 6px; }
        .sug-tag { font-size: 12.5px; font-weight: 500; background: #fff; border: 1px solid #cbd5e1; border-radius: 999px; padding: 4px 11px; color: #334155; }
        .review-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
        .review-foot .apply { background: #1f7a64; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; padding: 9px 16px; cursor: pointer; font-family: inherit; }
        .review-foot .apply:hover { background: #176c58; }
        .review-foot .discard { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; font-weight: 600; padding: 9px 14px; cursor: pointer; font-family: inherit; color: #475569; }
        .review-foot .discard:hover { background: #f1f5f9; }
        /* Key Projects editor */
        /* ===== SECTION: Experience project editor (.proj-*) ===== */
        .proj-edit { border-top: 1px dashed var(--border-strong); margin-top: 10px; padding-top: 10px; }
        .proj-edit-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
        .proj-edit-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--j-teal); }
        .proj-edit-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; background: var(--j-teal-tint); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--j-good); padding: 0 5px; }
        .proj-edit-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
        .proj-edit-row { display: flex; gap: 6px; align-items: flex-start; }
        .proj-edit-name { flex: 1; min-width: 0; font-size: 13px; }
        .proj-edit-desc { flex: 4; min-width: 0; font-size: 13px; min-height: 36px; resize: none; overflow: hidden; }
        .proj-edit-remove { width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--red-500); background: var(--surface); color: var(--red-700); border-radius: 6px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; padding: 0; }
        .proj-edit-remove:hover { background: var(--red-50); }
        .proj-edit-fixlang { width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--border-strong); background: var(--surface); color: var(--j-teal-d); border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 0; }
        .proj-edit-fixlang:hover { border-color: var(--j-teal); background: var(--j-teal-tint); }
        .proj-edit-fixlang:disabled { opacity: .6; cursor: default; }
        .proj-edit-add { background: none; border: 1px dashed var(--border-strong); color: var(--j-teal-d); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-family: inherit; margin-top: 2px; }
        .proj-edit-add:hover { border-color: var(--j-teal); background: var(--j-teal-tint); }
        .filter-buttons .btn-filter {
            background: #f0f0f0;
            color: #555;
            border: 1px solid #ccc;
            padding: 6px 12px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 13px;
        }
        .filter-buttons .btn-filter:hover {
            background: #e0e0e0;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: linear-gradient(120deg, #f8fafc 0%, #f1f5f9 100%);
            padding: 24px 28px 20px 28px;
            margin-bottom: 22px;
            box-shadow: 0 2px 16px rgba(31, 64, 102, 0.07);
            font-size: 15px;
            color: #1a2533;
            max-width: 440px;
            transition: box-shadow 0.2s, border 0.2s;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 12px 16px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }
        
        .applications-filter-bar .filter-label {
            font-size: 13px;
            font-weight: 600;
            color: #495057;
            margin-right: 4px;
        }
        
        .applications-filter-pills {
            display: flex;
            gap: 4px;
            background: var(--slate-100);
            padding: 4px;
            border-radius: 8px;
        }

        /* ===== SECTION: Buttons (.btn-*) ===== */
        .btn-filter-minimal {
            background: transparent;
            color: var(--slate-600);
            border: none;
            padding: 8px 14px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }

        .btn-filter-minimal:hover {
            background: rgba(255, 255, 255, 0.7);
            color: var(--slate-900);
        }

        .btn-filter-minimal.active {
            background: var(--surface);
            color: var(--accent);
            box-shadow: var(--shadow-card);
            font-weight: 600;
        }

        /* Status-colored dots for filter pills */
        .btn-filter-minimal .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }

        .btn-filter-minimal[data-status-filter=""] .status-dot { background: var(--slate-500); }
        .btn-filter-minimal[data-status-filter="draft"] .status-dot { background: var(--slate-500); }
        .btn-filter-minimal[data-status-filter="pending"] .status-dot { background: var(--amber-500); }
        .btn-filter-minimal[data-status-filter="applied"] .status-dot { background: var(--blue-500); }
        .btn-filter-minimal[data-status-filter="interview"] .status-dot { background: var(--indigo-600); }
        .btn-filter-minimal[data-status-filter="rejected"] .status-dot { background: var(--red-500); }
        .btn-filter-minimal[data-status-filter="skipped"] .status-dot { background: var(--slate-500); }
        .btn-filter-minimal[data-status-filter="hired"] .status-dot { background: var(--green-500); }

        /* Count badges */
        .btn-filter-minimal .filter-count {
            background: rgba(0, 0, 0, 0.1);
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
            min-width: 20px;
            text-align: center;
        }

        .btn-filter-minimal.active .filter-count {
            background: var(--accent-soft);
            color: var(--accent);
        }

        /* Filter actions group */
        .applications-context-filter {
            display: none;
            align-items: center;
            gap: 8px;
            margin-left: auto;
            padding: 4px 8px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--slate-50);
        }

        .applications-context-filter-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: var(--slate-700);
            white-space: nowrap;
        }

        .applications-context-filter select {
            min-width: 80px;
            max-width: 100px;
            padding: 5px 8px;
            border: 1px solid var(--border-strong);
            border-radius: 6px;
            background: var(--surface);
            font-size: 12px;
            color: var(--ink);
            height: 30px;
        }

        .applications-filter-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .applications-filter-actions select {
            padding: 5px 8px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            background: var(--surface);
            color: var(--slate-600);
            font-weight: 500;
        }
        
        /* Responsive filter bar */
        @media (max-width: 900px) {
            .applications-filter-bar {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
            }
            
            .applications-filter-bar .filter-label {
                display: none;
            }
            
            .applications-filter-pills {
                width: 100%;
                justify-content: flex-start;
                overflow-x: auto;
                padding: 6px;
            }
            
            .btn-filter-minimal {
                padding: 8px 12px;
                font-size: 12px;
            }
            
            .applications-filter-actions {
                margin-left: 0;
                width: 100%;
                justify-content: space-between;
            }

            .applications-context-filter {
                margin-left: 0;
                width: 100%;
                justify-content: space-between;
            }

            .applications-context-filter select {
                min-width: 0;
                width: 100%;
            }
            
            .applications-filter-actions select {
            padding: 5px 8px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            background: white;
            color: #495057;
            font-weight: 500;
        }
        }
        
        @media (max-width: 600px) {
            .applications-filter-pills {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            
            .applications-filter-pills::-webkit-scrollbar {
                display: none;
            }
            
            .btn-filter-minimal {
                padding: 8px 10px;
                font-size: 11px;
            }
            
            .btn-filter-minimal .filter-count {
                display: none;
            }
            
            .applications-filter-actions {
                flex-direction: column;
                gap: 8px;
            }

            .applications-context-filter {
                flex-direction: column;
                align-items: stretch;
                gap: 6px;
            }
            
            .applications-filter-actions select {
            padding: 5px 8px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            background: white;
            color: #495057;
            font-weight: 500;
        }
        }

        /* Applications grid should visually match Jobs table */
        .applications-grid-container {
            margin-bottom: 20px;
            overflow-x: hidden;
            width: 100%;
        }

        /* ===== SECTION: Applications list/grid UI (.app-*) ===== */
        .app-grid-shell {
            margin-bottom: 0;
        }

        .app-filter-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0;
            margin-bottom: 16px;
        }

        .app-row {
            display: grid;
            grid-template-columns: minmax(0, 2.6fr) 34px 96px 1.95fr 156px;
            gap: 0;
            align-items: stretch;
            position: relative;
            min-height: 52px;
            padding: 0 10px;
            margin-bottom: 10px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-card);
            transition: border-color .15s, box-shadow .15s, transform .15s;
        }
        .app-row:last-child {
            margin-bottom: 0;
        }

        .app-row-on-behalf::before {
            content: '';
            position: absolute;
            left: 0;
            top: 6px;
            bottom: 6px;
            width: 3px;
            border-radius: 3px;
            background: linear-gradient(180deg, var(--j-teal) 0%, var(--j-teal-d) 100%);
            box-shadow: 0 0 0 1px rgba(31, 143, 136, 0.12);
        }

        .app-row:hover {
            border-color: var(--blue-200);
            box-shadow: 0 6px 22px rgba(16, 32, 54, .09);
            transform: translateY(-1px);
        }

        .app-row-cell {
            padding: 8px 6px;
            font-size: 12px;
            color: var(--slate-600);
            display: flex;
            align-items: center;
            min-width: 0;
        }

        .app-row-cell-main {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 2px;
            padding-left: 30px;
        }

        .app-row-cell-main .jobs-company {
            width: 100%;
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 0 6px;
            row-gap: 0;
        }

        .app-row-cell-main .jobs-company-name {
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .app-row-cell-main .jobs-company-salary {
            margin-left: 0;
            min-width: 0;
        }

        .app-row-cell-status,
        .app-row-cell-remote,
        .app-row-cell-progress {
            justify-content: center;
            text-align: center;
            flex-direction: column;
            gap: 3px;
            padding-left: 2px;
            padding-right: 2px;
        }

        .app-row-cell-actions {
            justify-content: flex-end;
            gap: 6px;
            padding-right: 8px;
        }

        .app-icons {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 4px;
        }

        .app-icon-tile {
            width: 20px;
            height: 20px;
            border-radius: 6px;
            background: var(--blue-50);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--slate-500);
            flex-shrink: 0;
            opacity: .8;
        }

        .app-icon-tile svg {
            width: 11px;
            height: 11px;
        }

        .app-icon-tile.remote .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--blue-500);
            box-shadow: 0 0 0 2px var(--blue-200);
        }

        .app-job-title {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            max-width: 100%;
            color: var(--slate-900);
            font-weight: 600;
            font-size: 14px;
            line-height: 1.35;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
        }

        .app-job-title .t {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .app-job-title::after {
            content: "\203A";
            font-size: 15px;
            font-weight: 700;
            flex-shrink: 0;
            opacity: 0;
            transform: translateX(-3px);
            transition: opacity .12s, transform .12s;
        }

        .app-job-title:hover {
            color: var(--accent);
            text-decoration: none;
        }

        .app-job-title:hover::after {
            opacity: .9;
            transform: translateX(0);
        }

        .app-part-time-icon {
            margin-right: 3px;
        }

        .app-status-lozenge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            border: 1px solid var(--border);
            background: var(--slate-100);
            color: var(--slate-700);
            white-space: nowrap;
        }

        .app-status-line {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .app-status-draft,
        .app-status-pending,
        .app-status-rejected,
        .app-status-skipped,
        .app-status-hired,
        .app-status-accepted,
        .app-status-offer,
        .app-status-inprogress {
            background: var(--slate-100);
            color: var(--slate-700);
            border-color: var(--border);
        }
        .app-status-applied { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-200); }
        .app-status-interview { background: var(--indigo-50); color: var(--indigo-600); border-color: var(--indigo-50); }
        .app-status-lozenge.app-status-draft,
        .app-status-lozenge.app-status-pending {
            padding: 0;
            border: none;
            border-radius: 0;
            background: transparent;
            text-transform: none;
            letter-spacing: 0;
            font-size: 11px;
            font-weight: 500;
            color: var(--slate-700);
        }

        .app-date-label,
        .app-meta-label {
            font-size: 10px;
            color: var(--slate-500);
            line-height: 1.2;
        }

        .app-meta-value {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            color: var(--ink);
            font-size: 11px;
            line-height: 1.2;
            font-weight: 600;
        }

        .app-progress-wrap {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            min-width: 54px;
        }

        .app-progress-track {
            width: 54px;
            height: 5px;
            border-radius: 999px;
            background: var(--slate-200);
            overflow: hidden;
        }

        .app-progress-bar {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--blue-500) 0%, var(--blue-700) 100%);
            transition: width 180ms ease;
        }

        .app-score,
        .app-apply-time {
            font-size: 10px;
            line-height: 1.2;
        }

        .app-score {
            display: inline-block;
            width: 3px;
            height: 14px;
            border-radius: 999px;
            background: var(--slate-300);
            flex: 0 0 auto;
            margin-right: 0;
        }

        .app-score.app-score-status {
            width: 6px;
            height: 12px;
        }

        /* Match-score pill — soft-tinted 999px lozenge, same language as .app-status-lozenge.
           Colour tiers reuse the existing score semantics: high=green, medium=amber, low=red. */
        .app-score-pill {
            display: inline-flex;
            align-items: center;
            padding: 1px 7px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--slate-100);
            color: var(--slate-700);
            font-size: 10px;
            font-weight: 700;
            line-height: 1.3;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        .app-score-pill.app-score-high { background: var(--green-50); color: var(--green-700); border-color: var(--green-500); }
        .app-score-pill.app-score-medium { background: var(--amber-50); color: var(--amber-700); border-color: var(--amber-300); }
        .app-score-pill.app-score-low { background: var(--red-50); color: var(--red-700); border-color: var(--red-500); }
        /* In the single-status view the score sits under the date — keep a small gap. */
        .app-row-cell-status.app-status-updated-only .app-score-pill { margin-top: 4px; }

        .app-apply-time {
            color: var(--green-500);
            font-weight: 500;
        }

        .app-notes-text {
            font-size: 11px;
            color: var(--slate-600);
            line-height: 1.35;
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-word;
        }

        .app-attachment-button,
        .app-link-button,
        .app-edit-button,
        .app-delete-button {
            border: 1px solid var(--border-strong);
            background: var(--surface);
            color: var(--slate-600);
            border-radius: 8px;
            padding: 4px 8px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.12s, color 0.12s, border-color 0.12s;
        }

        .app-link-button {
            padding: 4px 6px;
            color: var(--accent);
        }

        .app-edit-button {
            min-height: 28px;
            min-width: 44px;
            padding: 6px 10px;
        }

        .app-attachment-button {
            padding: 4px 6px;
            font-size: 13px;
        }

        .app-edit-button:hover,
        .app-link-button:hover,
        .app-attachment-button:hover {
            background: var(--slate-75);
            color: var(--accent);
            border-color: var(--blue-200);
        }

        .app-delete-button:hover {
            background: var(--red-50);
            color: var(--red-700);
            border-color: var(--red-500);
        }

        .app-remote-icon {
            font-size: 14px;
            color: var(--slate-500);
            font-weight: 700;
        }

        /* ── Redesigned grid: match column cell ── */
        .app-row-cell-match {
            justify-content: center;
            text-align: center;
            flex-direction: column;
            gap: 3px;
            padding: 8px 4px;
        }

        /* ── Redesigned grid: vertical progress rail — a single nub slides down a
           rail track to encode stage 1-5, rather than filling discrete segments. ── */
        .app-row::before {
            content: "";
            position: absolute;
            left: 10px;
            top: 20%;
            bottom: 20%;
            width: 2px;
            background: var(--slate-200);
            border-radius: 1px;
        }
        .app-step-nub {
            position: absolute;
            left: 9px;
            width: 4px;
            height: 10px;
            background: var(--accent);
            border-radius: 2px;
            transition: top .3s cubic-bezier(.4,0,.2,1), transform .15s;
        }
        .app-row.s1 .app-step-nub { top: 20%; }
        .app-row.s2 .app-step-nub { top: 35%; }
        .app-row.s3 .app-step-nub { top: 50%; }
        .app-row.s4 .app-step-nub { top: 65%; }
        .app-row.s5 .app-step-nub { top: 80%; background: var(--green-500); }
        .app-row:hover .app-step-nub { transform: scaleX(1.5); }

        /* ── Redesigned grid: match ring ── */
        .app-match-ring {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            cursor: default;
        }
        .app-ring-wrap {
            position: relative;
            width: 54px;
            height: 54px;
        }
        .app-ring-wrap svg { display: block; }
        .app-ring-num {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 800;
            color: var(--slate-900);
            letter-spacing: -0.03em;
        }
        .app-match-verdict {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }
        .app-match-none {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .app-ring-empty {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            border: 2px dashed var(--border-strong);
            display: grid;
            place-items: center;
            color: var(--slate-400);
        }
        .app-score-btn {
            border: none;
            background: none;
            cursor: pointer;
            font-family: inherit;
            font-size: 9.5px;
            font-weight: 700;
            color: var(--j-teal-d);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            padding: 0;
        }
        .app-score-btn:hover { text-decoration: underline; }

        /* ── Redesigned grid: next-step context button ── */
        .app-continue-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            height: 30px;
            padding: 0 11px;
            border-radius: 8px;
            font-family: inherit;
            font-size: 11.5px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            border: 1px solid var(--border-strong);
            background: var(--surface);
            color: var(--slate-700);
            transition: background 0.12s, border-color 0.12s, color 0.12s;
        }
        .app-continue-btn:hover {
            background: var(--slate-75);
            color: var(--slate-900);
        }
        .app-continue-btn.go {
            border-color: var(--j-teal-d);
            background: var(--j-teal-d);
            color: #fff;
            font-weight: 700;
        }
        .app-continue-btn.go:hover { background: var(--j-teal-dd); }
        .app-continue-btn.done,
        .app-continue-btn.terminal {
            border-color: var(--border);
            background: var(--slate-75);
            cursor: default;
        }
        .app-continue-btn.done,
        .app-continue-btn.done:hover { color: var(--green-500); }
        .app-continue-btn.terminal { color: var(--slate-600); }
        .app-continue-btn.done:hover,
        .app-continue-btn.terminal:hover { border-color: var(--border); }

        /* ── Redesigned grid: icon buttons in actions cell ── */
        .app-icon-btn {
            width: 30px;
            height: 30px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--slate-600);
            border-radius: 8px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.12s, color 0.12s, border-color 0.12s;
            flex-shrink: 0;
        }
        .app-icon-btn:hover {
            background: var(--slate-75);
            color: var(--accent);
            border-color: var(--blue-200);
        }
        .app-icon-btn-del:hover {
            background: var(--red-50);
            color: var(--red-700);
            border-color: var(--red-500);
        }

        /* ── Redesigned grid: meta line ── */
        .app-job-meta-line {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 6px;
            width: 100%;
            min-width: 0;
        }
        .app-meta-sep {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: #cbd5e1;
            flex-shrink: 0;
        }
        .app-meta-updated {
            font-size: 11.5px;
            color: var(--slate-500);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .app-notes-empty {
            font-size: 11.5px;
            color: #cbd5e1;
            font-style: italic;
        }

        .application-workflow-step {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            padding: 4px 8px;
            border: 1px solid transparent;
            border-radius: 8px;
            background: transparent;
            color: #6d7f90;
            font-size: 11px;
            line-height: 1;
            font-weight: 500;
            white-space: nowrap;
            transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
        }

        .application-workflow-step-circle {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 1px solid #b8c6d4;
            background: #ffffff;
            flex-shrink: 0;
            transition: background 0.16s ease, border-color 0.16s ease;
        }

        .application-workflow-step-label {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .application-workflow-step.completed {
            color: #5f7367;
        }

        .application-workflow-step.completed .application-workflow-step-circle {
            background: #7b9487;
            border-color: #7b9487;
        }

        .application-workflow-step.current {
            background: #f6f9fc;
            border-color: #d8e3ee;
            color: #354f67;
            font-weight: 600;
        }

        .application-workflow-step.current .application-workflow-step-circle {
            background: #607f9d;
            border-color: #607f9d;
        }

        .application-workflow-step.pending {
            color: #7f8f9e;
            opacity: 0.92;
        }

        .experience-tabs-nav {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
            flex: 0 0 auto;
        }

        .experience-nav-btn {
            width: 28px;
            height: 28px;
            border: 1px solid #d9e1ea;
            border-radius: 6px;
            background: #ffffff;
            color: #6f8092;
            cursor: pointer;
            font-size: 15px;
            font-weight: 700;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
        }

        .experience-nav-btn:hover:not(:disabled) {
            background: rgba(37,99,235,.08);
            border-color: #2563eb;
            color: #1a2b3c;
        }

        .experience-nav-btn:disabled {
            opacity: 0.38;
            cursor: not-allowed;
        }

        @media (max-width: 1100px) {
            .app-row {
                grid-template-columns: minmax(0, 2.4fr) 34px 82px 1.7fr 140px;
            }
        }

        @media (max-width: 860px) {
            .app-row {
                grid-template-columns: minmax(0, 2fr) 34px 78px 0fr 134px;
            }

            .app-row-cell-notes {
                display: none;
            }
        }

        body.mobile-ui-active #jobsMode,
        body.mobile-ui-active #peopleMode,
        body.mobile-ui-active #applicationsMode {
            padding: 6px 0 20px;
        }

        body.mobile-ui-active #jobsMode .section h2,
        body.mobile-ui-active #peopleMode .section h2,
        body.mobile-ui-active #applicationsMode .section h2 {
            margin-bottom: 10px;
            font-size: 16px;
        }

        body.mobile-ui-active #jobsMode .jobs-mode-content,
        body.mobile-ui-active #peopleMode .jobs-mode-content,
        body.mobile-ui-active #applicationsMode .applications-mode-content {
            display: block;
        }

        body.mobile-ui-active #applicationsSidebar {
            width: 100%;
            margin-bottom: 12px;
            padding: 10px;
        }

        body.mobile-ui-active .jobs-search-grid,
        body.mobile-ui-active .jobs-results-shell,
        body.mobile-ui-active .app-grid-shell {
            border-radius: 14px;
        }

        body.mobile-ui-active .jobs-search-results {
            border: none;
            box-shadow: none;
            background: transparent;
            overflow: visible;
        }

        body.mobile-ui-active .jobs-results-table {
            display: block;
            width: 100%;
            table-layout: auto;
        }

        body.mobile-ui-active .jobs-results-table thead {
            display: none;
        }

        body.mobile-ui-active .jobs-results-table tbody {
            display: grid;
            gap: 10px;
        }

        body.mobile-ui-active .jobs-results-table tbody tr {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 10px;
            border: 1px solid #dce6ef;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 7px 18px rgba(31, 45, 61, 0.07);
            padding: 12px;
        }

        body.mobile-ui-active .jobs-results-table td {
            display: block;
            border-bottom: none;
            padding: 0;
            margin: 0;
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(2),
        body.mobile-ui-active .jobs-results-table td:nth-child(4) {
            display: none;
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(1) {
            order: 1;
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(3) {
            order: 2;
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(5) {
            order: 3;
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(3)::before,
        body.mobile-ui-active .jobs-results-table td:nth-child(5)::before {
            display: block;
            margin-bottom: 5px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #7b8fa2;
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(3)::before {
            content: 'Skills';
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(5)::before {
            content: 'Actions';
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(1) .jobs-company {
            gap: 6px 0;
            align-items: center;
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(1) .jobs-company-name {
            flex: 1 1 100%;
            border-bottom: none;
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(1) .jobs-company-salary {
            margin-left: 0;
            padding-left: 0;
            border-left: none;
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(1) .jobs-mobile-remote-pill {
            display: inline-flex;
            align-items: center;
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(1) .jobs-part-time-indicator {
            margin-left: 0 !important;
        }

        body.mobile-ui-active .jobs-results-table td:nth-child(3) .jobs-skill-tags {
            gap: 6px;
        }

        body.mobile-ui-active .jobs-apply-cell {
            display: flex !important;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            gap: 8px;
            text-align: left;
            white-space: normal;
        }

        body.mobile-ui-active .jobs-group-details-row td {
            padding: 0 0 10px;
            border-bottom: none;
        }

        body.mobile-ui-active .jobs-group-variant-row {
            grid-template-columns: 1fr;
            align-items: stretch;
        }

        body.mobile-ui-active .jobs-group-variant-actions {
            justify-content: flex-start;
        }

        body.mobile-ui-active .jobs-apply-button {
            min-width: 124px;
        }

        body.mobile-ui-active .jobs-results-count {
            margin-top: 10px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface);
        }

        body.mobile-ui-active .jobs-starred-header,
        body.mobile-ui-active .jobs-starred-list,
        body.mobile-ui-active .jobs-starred-empty {
            padding-left: 10px;
            padding-right: 10px;
        }

        body.mobile-ui-active .jobs-starred-item {
            grid-template-columns: 1fr;
            gap: 10px;
            border-color: #dce6ef;
            border-radius: 12px;
            box-shadow: 0 7px 16px rgba(31, 45, 61, 0.05);
        }

        body.mobile-ui-active .jobs-starred-actions {
            justify-content: flex-start;
            width: 100%;
        }

        body.mobile-ui-active .jobs-starred-action {
            min-width: 96px;
        }

        body.mobile-ui-active .applications-grid-container,
        body.mobile-ui-active .app-grid-shell {
            border: none;
            border-radius: 0;
            box-shadow: none;
            background: transparent;
            overflow: visible;
        }

        body.mobile-ui-active .app-filter-bar {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            padding: 0;
            border: none;
            background: transparent;
            margin-bottom: 10px;
        }

        body.mobile-ui-active .applications-filter-pills {
            overflow-x: auto;
            padding-bottom: 2px;
        }

        body.mobile-ui-active .applications-context-filter,
        body.mobile-ui-active .applications-filter-actions {
            width: 100%;
            margin-left: 0;
        }

        body.mobile-ui-active .applications-context-filter select,
        body.mobile-ui-active .applications-filter-actions select {
            width: 100%;
            min-height: 36px;
        }

        body.mobile-ui-active .app-grid-rows {
            display: grid;
            gap: 10px;
        }

        /* NOTE: .app-row / .app-row-cell[data-mobile-label]::before card
           layout for mobile is owned by the single consolidated block further down
           ("MOBILE — card layout for the applications grid", @media max-width:640px) —
           don't add a second copy here, it was previously duplicated and silently shadowed. */
        body.mobile-ui-active .app-row-cell {
            padding: 0;
            justify-content: flex-start;
            text-align: left;
            min-height: 0;
        }

        body.mobile-ui-active .app-row-cell[data-mobile-label] {
            display: grid;
            gap: 4px;
        }

        body.mobile-ui-active .app-row-cell-main,
        body.mobile-ui-active .app-row-cell-actions {
            display: flex;
        }

        body.mobile-ui-active .app-row-cell-main::before,
        body.mobile-ui-active .app-row-cell-actions::before {
            content: none;
        }

        body.mobile-ui-active .app-row-cell-remote,
        body.mobile-ui-active .app-row-cell-progress {
            align-items: flex-start;
        }

        body.mobile-ui-active .app-step-nub,
        body.mobile-ui-active .app-row::before { display: none; }

        body.mobile-ui-active .app-edit-button {
            min-width: 72px;
        }

        body.mobile-ui-active #applicationsPagination {
            justify-content: flex-start;
            padding-top: 12px;
        }

        body.mobile-ui-active #applicationsPagination .pagination-summary {
            width: 100%;
            margin-right: 0;
            margin-bottom: 4px;
        }

        /* Application modal — mobile layout */
        body.mobile-ui-active #applicationModal .modal-content {
            padding: 14px;
            max-height: 100dvh;
            height: 100dvh;
            border-radius: 0;
            width: 100%;
        }

        body.mobile-ui-active #appModalTwoPaneRow {
            display: none !important;
        }

        /* Left pane: show only the header bar by default (collapsed) */
        body.mobile-ui-active #appModalLeftPane {
            display: block !important;
            flex: none !important;
            width: 100% !important;
            margin-bottom: 8px;
        }

        body.mobile-ui-active #appModalLeftPaneTitle {
            display: none;
        }

        body.mobile-ui-active #appMobileProfileRow {
            display: flex !important;
        }

        body.mobile-ui-active #appModalLeftPaneToggle {
            display: inline-flex !important;
        }

        body.mobile-ui-active #appModalLeftPaneBody {
            display: none;
            overflow: hidden;
        }

        /* Expanded state */
        body.mobile-ui-active #appModalLeftPane.mobile-pane-open #appModalLeftPaneBody {
            display: block;
        }

        body.mobile-ui-active #appModalLeftPane.mobile-pane-open #appModalLeftPaneToggleIcon {
            transform: rotate(180deg);
        }

        /* Right pane always full width on mobile */
        body.mobile-ui-active #appModalRightPane {
            flex: 1 1 100% !important;
            width: 100% !important;
            min-width: 0 !important;
        }

        @media print {
            html, body {
                width: 210mm !important;
                height: auto !important;
                max-width: 210mm !important;
                margin: 0 auto !important;
                padding: 0 !important;
                background: white !important;
                overflow: visible !important;
                position: relative !important;
                left: 0 !important;
                right: 0 !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            body::before {
                content: '' !important;
                display: block !important;
                width: 210mm !important;
                height: 0 !important;
            }
            .container {
                display: block !important;
                height: auto !important;
                width: 210mm !important;
                max-width: 210mm !important;
                margin: 0 auto !important;
                padding: 0 !important;
                position: relative !important;
                left: 0 !important;
                right: 0 !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            .editor-panel {
                display: none !important;
            }
            .sidebar, .topbar-links {
                display: none !important;
            }
            .preview-panel {
                width: 210mm !important;
                height: auto !important;
                min-height: auto !important;
                padding: 0 !important;
                margin: 0 auto !important;
                background: white !important;
                overflow: visible !important;
                display: block !important;
                float: none !important;
                border: none !important;
                left: 0 !important;
                right: 0 !important;
                position: relative !important;
            }
            .preview-wrapper {
                box-shadow: none !important;
                width: 210mm !important;
                height: auto !important;
                min-height: auto !important;
                transform: none !important;
                transform-origin: top left !important;
                overflow: visible !important;
                background: white !important;
                display: block !important;
                margin: 0 !important;
                padding: 0 !important;
                float: none !important;
                clear: both !important;
            }
            .preview-wrapper .page {
                width: 210mm !important;
                height: 297mm !important;
                min-height: 297mm !important;
                margin: 0 auto !important;
                padding: 5mm 12mm 18mm 12mm !important;
                box-shadow: none !important;
                background: white !important;
                overflow: hidden !important;
                page-break-after: always !important;
                float: none !important;
                left: 0 !important;
                right: 0 !important;
                position: relative !important;
                margin-left: auto !important;
                margin-right: auto !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                transform: none !important;
            }
            .preview-wrapper .page:last-child {
                page-break-after: auto !important;
            }
            .preview-wrapper .page.executive-layout {
                padding: 0 !important;
            }
            #preview {
                padding: 0 !important;
                margin: 0 !important;
            }
            .pv-toolbar {
                display: none !important;
            }
            .pv-scroll {
                padding: 0 !important;
                overflow: visible !important;
                display: block !important;
            }
            .zoom-controls {
                display: none !important;
            }
            * {
                box-sizing: border-box !important;
            }
            .header, .section, .content {
                page-break-inside: avoid !important;
            }
            @page {
                size: 210mm 297mm !important;
                margin: 0mm !important;
            }
            @page :left {
                size: 210mm 297mm !important;
                margin: 0mm !important;
            }
            @page :right {
                size: 210mm 297mm !important;
                margin: 0mm !important;
            }
            @page :first {
                size: 210mm 297mm !important;
                margin: 0mm !important;
            }
        }
        
        /* Toast notification styles */
        /* ===== SECTION: Toast notifications (.toast-*) ===== */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 20001;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .toast {
            background: rgb(100, 150, 145);
            color: white;
            padding: 12px 20px;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            font-size: 14px;
            font-weight: 500;
            max-width: 300px;
            opacity: 0;
            transform: translateX(100px);
            transition: all 0.3s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
        }
        .toast-message {
            flex: 1;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
        }
        .toast.show {
            opacity: 1;
            transform: translateX(0);
        }
        .toast.success {
            background: rgb(100, 150, 145);
        }
        .toast.error {
            background: #dc3545;
        }
        .toast.info {
            background: #17a2b8;
        }
        .toast.warning {
            background: #ffc107;
            color: #000;
        }
        .toast-close {
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            opacity: 0.8;
        }
        .toast-close:hover {
            opacity: 1;
        }
        .toast.warning .toast-close {
            color: #000;
        }

        .cookie-modal {
            display: none;
            position: fixed;
            right: 18px;
            bottom: 18px;
            width: min(460px, calc(100vw - 24px));
            padding: 16px;
            border-radius: 14px;
            border: 1px solid #d7e6e0;
            background: linear-gradient(180deg, #ffffff 0%, #f6fbf9 100%);
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
            z-index: 20002;
        }

        .cookie-modal-title {
            margin: 0 0 8px;
            font-size: 16px;
            color: #125246;
            font-weight: 700;
        }

        .cookie-modal-text {
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
            color: #2d3a43;
        }

        .cookie-modal-link {
            color: #186d5f;
            text-decoration: underline;
            font-weight: 600;
        }

        .cookie-modal-actions {
            margin-top: 12px;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .cookie-btn {
            border: 1px solid transparent;
            border-radius: 9px;
            padding: 7px 14px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
        }

        .cookie-btn-accept {
            background: #1f7a6a;
            color: #fff;
        }

        .cookie-btn-reject {
            background: #eef3f1;
            color: #2c3a42;
            border-color: #d7e2de;
        }

        /* Image Upload Modal Styles */
        .image-upload-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.45);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(3px);
        }
        .image-upload-modal.show {
            display: flex;
        }
        .image-upload-modal-content {
            background: white;
            border-radius: 16px;
            width: min(1100px, 96vw);
            max-height: 90vh;
            overflow-y: auto;
            padding: 24px;
            box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
        }
        .image-upload-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 18px;
            padding-bottom: 14px;
            border-bottom: 1px solid #e5e7eb;
        }
        .image-upload-modal-header h2 {
            margin: 0;
            color: #0f172a;
            font-size: 1.2rem;
            font-weight: 700;
        }
        .image-upload-modal-close {
            background: #f8fafc;
            color: #475569;
            border: none;
            border-radius: 50%;
            width: 34px;
            height: 34px;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .image-upload-modal-close:hover {
            background: #e2e8f0;
            color: #0f172a;
        }

        .modern-profile-tabs {
            display: grid;
            grid-template-columns: repeat(3, minmax(140px, 1fr));
            gap: 10px;
            margin-bottom: 14px;
        }

        .profile-source-panel {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 14px;
            background: #f8fafc;
            margin-bottom: 12px;
        }

        .profile-source-title {
            font-size: 14px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 8px;
        }

        .profile-source-help {
            margin: 0 0 10px;
            color: #64748b;
            font-size: 13px;
        }

        .linkedin-fetch-row {
            display: flex;
            justify-content: center;
            gap: 10px;
            align-items: center;
        }

        .linkedin-fetch-row #linkedinProfileUrlInput {
            width: min(50%, 460px);
            min-width: 260px;
        }

        /* ===== SECTION: Profile styles — later block (.profile-*) ===== */
        .profile-draft-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
            gap: 16px;
            margin-top: 10px;
        }

        .profile-draft-form,
        .profile-draft-preview-wrap {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #fff;
            padding: 14px;
        }

        .profile-grid-two {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .profile-label {
            display: block;
            margin-top: 10px;
            margin-bottom: 5px;
            font-size: 12px;
            font-weight: 700;
            color: #334155;
        }

        .profile-input,
        .profile-textarea {
            width: 100%;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            padding: 10px;
            font-size: 13px;
            color: #0f172a;
            background: #fff;
        }

        .profile-input:focus,
        .profile-textarea:focus {
            outline: none;
            border-color: #64748b;
            box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
        }

        .profile-name-row {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 10px;
            align-items: stretch;
        }

        @media (max-width: 640px) {
            .profile-name-row {
                grid-template-columns: 1fr;
            }
        }

        .profile-convention-hint {
            margin-top: 6px;
            color: #64748b;
            font-size: 12px;
        }

        .profile-draft-preview {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 14px;
            min-height: 220px;
            font-size: 13px;
            color: #334155;
            line-height: 1.45;
        }

        .profile-preview-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }

        .profile-preview-name {
            font-size: 16px;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 2px;
        }

        .profile-preview-role {
            font-size: 13px;
            font-weight: 600;
            color: #64748b;
        }

        .profile-preview-linkedin {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 999px;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            color: #334155;
            text-decoration: none;
            flex-shrink: 0;
        }

        .profile-preview-section {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 9px 10px;
            margin-bottom: 8px;
        }

        .profile-preview-section-title {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: #64748b;
            margin-bottom: 6px;
            text-transform: uppercase;
        }

        .profile-preview-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5px 8px;
        }

        .profile-preview-item {
            font-size: 12px;
            color: #334155;
        }

        .profile-preview-muted {
            font-size: 12px;
            color: #94a3b8;
        }

        .upload-list {
            display: grid;
            gap: 8px;
            margin-top: 10px;
        }

        .image-upload-actions.compact {
            justify-content: flex-start;
            margin-top: 12px;
        }

        .modern-footer-actions {
            border-top: 1px solid #e5e7eb;
            padding-top: 14px;
            margin-top: 14px;
            justify-content: flex-end;
        }
        
        /* Add Profile Modal Styles */
        /* ===== SECTION: Add-button styles (.add-*) ===== */
        .add-profile-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            z-index: 10001;
            align-items: center;
            justify-content: center;
        }
        .add-profile-modal.show {
            display: flex;
        }
        .add-profile-modal-content {
            background: white;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            padding: 25px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
        }
        .add-profile-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .add-profile-modal-header h2 {
            margin: 0;
            font-size: 20px;
            color: #2c3e50;
        }
        .add-profile-modal-close {
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #999;
            padding: 0;
            line-height: 1;
        }
        .add-profile-modal-close:hover {
            color: #c0392b;
        }
        .add-profile-form-group {
            margin-bottom: 15px;
        }
        .add-profile-form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #2c3e50;
            font-size: 14px;
        }
        .add-profile-form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .add-profile-form-group input:focus {
            outline: none;
            border-color: #3498db;
        }
        .add-profile-modal-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        .cv-profiles-manager-body {
            max-height: 340px;
            overflow-y: auto;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #fbfdff;
            padding: 8px;
        }
        .cv-profiles-manager-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 6px;
            border: 1px solid #e7edf4;
            background: #fff;
            margin-bottom: 8px;
        }
        .cv-profiles-manager-row:last-child {
            margin-bottom: 0;
        }
        .cv-profiles-manager-row label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            flex: 1;
            cursor: pointer;
        }
        .cv-profiles-manager-name {
            font-size: 13px;
            font-weight: 600;
            color: #2c3e50;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .cv-profiles-manager-key {
            font-size: 11px;
            color: #6b7f93;
            margin-left: 6px;
        }
        .cv-profiles-manager-badge {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #385b7d;
            background: #eaf2fa;
            border: 1px solid #c9dbee;
            border-radius: 999px;
            padding: 3px 8px;
            white-space: nowrap;
        }
        .cv-profiles-manager-topbar {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .cv-profiles-manager-hint {
            font-size: 12px;
            color: #607285;
            margin-bottom: 10px;
        }
        
        /* ===== SECTION: Image/photo upload styles (.image-*) ===== */
        .image-upload-area {
            border: 2px dashed #94a3b8;
            border-radius: 12px;
            padding: 30px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 10px;
            background: #ffffff;
        }
        .image-upload-area:hover {
            border-color: #64748b;
            background: #f8fafc;
        }
        .image-upload-area.dragover {
            border-color: #0f766e;
            background: #f0fdfa;
        }
        .image-upload-area p {
            margin: 8px 0;
            color: #64748b;
        }
        .image-upload-area input[type="file"] {
            display: none;
        }
        .image-upload-icon {
            font-size: 15px;
            margin-bottom: 8px;
            font-weight: 700;
            color: #334155;
        }
        .image-preview {
            max-width: 100%;
            max-height: 300px;
            margin: 20px 0;
            border-radius: 8px;
            display: none;
        }
        .image-preview.show {
            display: block;
        }
        .image-upload-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 12px;
        }
        .image-upload-actions .btn {
            padding: 10px 16px;
            font-size: 13px;
        }
        .extracted-data-section {
            margin-top: 25px;
            padding-top: 20px;
            border-top: 2px solid #e9ecef;
            display: none;
        }
        .extracted-data-section.show {
            display: block;
        }
        .extracted-data-section h3 {
            color: #2c3e50;
            margin-bottom: 15px;
        }
        .extracted-field {
            margin-bottom: 12px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
            border-left: 4px solid #3498db;
        }
        .extracted-field strong {
            color: #2c3e50;
            display: block;
            margin-bottom: 5px;
        }
        .extracted-field .field-content {
            color: #555;
            font-size: 14px;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .extracted-field.editable .field-content {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            resize: vertical;
            min-height: 60px;
        }
        .extracted-field .edit-btn {
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 12px;
            font-size: 12px;
            cursor: pointer;
            margin-top: 5px;
        }
        .extracted-field .edit-btn:hover {
            background: #2980b9;
        }
        .loading-spinner {
            display: none;
            text-align: center;
            padding: 30px;
        }
        .loading-spinner.show {
            display: block;
        }
        .loading-spinner .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #475569;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }

        @media (max-width: 980px) {
            .profile-draft-layout {
                grid-template-columns: 1fr;
            }

            .modern-profile-tabs {
                grid-template-columns: 1fr;
            }

            .profile-grid-two {
                grid-template-columns: 1fr;
            }

            .image-upload-modal-content {
                width: min(760px, 96vw);
                padding: 16px;
            }
        }

        /* ===== SECTION: Sidebar navigation (SaaS redesign) ===== */
        .sidebar {
            position: fixed;
            top: 0; left: 0; bottom: 0;
            width: 64px;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            z-index: 500;
            transition: width .2s cubic-bezier(.4,0,.2,1), background-color .2s ease, border-color .2s ease;
        }
        html[data-sidebar="expanded"] .sidebar { width: var(--sb-w); }

        body {
            padding-left: 64px;
            transition: padding-left .2s cubic-bezier(.4,0,.2,1);
        }
        html[data-sidebar="expanded"] body { padding-left: var(--sb-w); }

        .sb-brand {
            display: flex; align-items: center; gap: 0;
            padding: 16px 0; justify-content: center;
            transition: padding .2s, gap .2s;
        }
        html[data-sidebar="expanded"] .sb-brand { justify-content: flex-start; padding: 18px 20px; gap: 10px; }
        .sb-mark { flex-shrink: 0; }
        .sb-brand .wm {
            font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--slate-900);
            white-space: nowrap; overflow: hidden; opacity: 0; max-width: 0;
            transition: opacity .16s ease, max-width .2s cubic-bezier(.23,1,.32,1);
        }
        html[data-sidebar="expanded"] .sb-brand .wm { opacity: 1; max-width: 160px; transition-delay: .04s, 0s; }

        .sb-new {
            position: relative; margin: 2px auto 14px; width: 40px; padding: 0;
            display: flex; align-items: center; justify-content: center; gap: 0;
            height: 40px; border-radius: var(--radius-sm); border: none;
            background: var(--accent); color: #fff; cursor: pointer;
            font-size: 13.5px; font-weight: 700; box-shadow: 0 2px 6px rgba(37,99,235,.28);
            transition: background .15s, transform .15s, gap .22s cubic-bezier(.23,1,.32,1);
            flex-shrink: 0;
        }
        html[data-sidebar="expanded"] .sb-new { margin: 2px 16px 12px; width: auto; gap: 8px; padding: 0 12px; justify-content: flex-start; }
        .sb-new:hover { background: var(--accent-hover); transform: translateY(-1px); }
        .sb-new svg { flex-shrink: 0; }
        .sb-new .lbl {
            display: inline-block; white-space: nowrap; overflow: hidden; opacity: 0; max-width: 0;
            transition: opacity .16s ease, max-width .2s cubic-bezier(.23,1,.32,1);
        }
        html[data-sidebar="expanded"] .sb-new .lbl { opacity: 1; max-width: 150px; transition-delay: .04s, 0s; }

        .sb-nav { padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; }

        /* ===== SECTION: Navigation styles (.nav-*) ===== */
        .nav-item {
            position: relative;
            display: flex; align-items: center; gap: 0; justify-content: center;
            padding: 10px 0; border: none; background: none; border-radius: var(--radius-sm);
            color: var(--slate-700); font-size: 14px; font-weight: 600; width: 100%;
            text-align: left; cursor: pointer;
            transition: background .13s ease, color .13s ease, gap .2s cubic-bezier(.23,1,.32,1), padding .2s;
        }
        html[data-sidebar="expanded"] .nav-item { padding: 9px 12px; justify-content: flex-start; gap: 11px; }
        .nav-item svg { width: 19px; height: 19px; flex-shrink: 0; stroke: currentColor; transition: transform .15s cubic-bezier(.23,1,.32,1); }
        .nav-item:hover svg { transform: scale(1.08); }
        .nav-item:hover { background: var(--slate-75); color: var(--slate-900); }
        .nav-item.active { background: var(--accent-soft); color: var(--accent); }

        .nav-item .lbl {
            display: inline-block; white-space: nowrap; overflow: hidden; opacity: 0; max-width: 0;
            transition: opacity .16s ease, max-width .2s cubic-bezier(.23,1,.32,1);
        }
        html[data-sidebar="expanded"] .nav-item .lbl { opacity: 1; max-width: 150px; transition-delay: .04s, 0s; }

        .nav-item .nav-count {
            display: inline-block; opacity: 0; max-width: 0; overflow: hidden; padding: 0;
            font-size: 11px; font-weight: 700; color: var(--slate-500); background: var(--slate-100);
            border-radius: 999px;
            transition: opacity .16s ease, max-width .2s cubic-bezier(.23,1,.32,1), padding .2s;
        }
        /* margin-left:auto only makes sense once the badge sits after a visible label —
           applied here (expanded-only) rather than on the base rule, otherwise a flex
           item's auto-margin still claims the row's free space in collapsed mode even
           at 0 width, pushing the icon off-center instead of letting it stay centered. */
        html[data-sidebar="expanded"] .nav-item .nav-count:not(:empty) { opacity: 1; max-width: 40px; padding: 2px 8px; margin-left: auto; transition-delay: .04s, 0s, 0s; }
        .nav-item.active .nav-count { background: var(--surface); color: var(--accent); }

        .nav-tip {
            position: absolute; left: calc(100% + 12px); top: 50%;
            transform: translateY(-50%) translateX(-5px);
            background: var(--slate-900); color: var(--surface);
            font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 7px;
            white-space: nowrap; pointer-events: none; opacity: 0;
            box-shadow: var(--shadow-pop);
            transition: opacity .14s ease, transform .14s cubic-bezier(.23,1,.32,1);
            z-index: 80;
        }
        .nav-item:hover .nav-tip,
        .sb-new:hover .nav-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
        html[data-sidebar="expanded"] .nav-tip { display: none; }

        .sb-expand {
            margin: auto 12px 12px; height: 34px; border-radius: 9px;
            border: 1px solid var(--border); background: var(--surface); color: var(--slate-600);
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            transition: border-color .15s, color .15s, background .15s;
        }
        .sb-expand:hover { border-color: var(--border-strong); color: var(--slate-900); background: var(--slate-75); }
        .sb-expand svg { transition: transform .25s cubic-bezier(.23,1,.32,1); }
        html[data-sidebar="expanded"] .sb-expand svg { transform: rotate(180deg); }

        .sb-foot { padding: 0 12px 14px; display: flex; flex-direction: column; gap: 8px; }

        .sb-theme-toggle {
            display: flex; align-items: center; justify-content: center; gap: 0;
            height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border);
            background: var(--surface); color: var(--slate-700); cursor: pointer;
            transition: background .13s, gap .2s;
        }
        html[data-sidebar="expanded"] .sb-theme-toggle { justify-content: flex-start; padding: 0 12px; gap: 9px; }
        .sb-theme-toggle:hover { background: var(--slate-75); }
        .sb-theme-toggle svg { flex-shrink: 0; }
        .sb-theme-toggle .ic-dark { display: none; }
        :root[data-theme="dark"] .sb-theme-toggle .ic-light { display: none; }
        :root[data-theme="dark"] .sb-theme-toggle .ic-dark { display: inline; }
        .sb-theme-toggle .lbl {
            display: inline-block; white-space: nowrap; overflow: hidden; opacity: 0; max-width: 0; font-size: 13px; font-weight: 600;
            transition: opacity .16s ease, max-width .2s cubic-bezier(.23,1,.32,1);
        }
        html[data-sidebar="expanded"] .sb-theme-toggle .lbl { opacity: 1; max-width: 100px; margin-left: 2px; }

        .sb-user {
            display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: var(--radius-sm);
        }
        .sb-user .auth-user-info { flex: 1; min-width: 0; }
        .su-out {
            flex-shrink: 0; color: var(--slate-500); background: none; border: none; padding: 6px; border-radius: 6px;
            display: flex; cursor: pointer; transition: color .13s, background .13s;
        }
        .su-out:hover { color: var(--red-700); background: var(--red-50); }

        .scrim {
            display: none; position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 490;
        }

        @media (max-width: 860px) {
            html[data-sidebar="expanded"] .sidebar { position: fixed; width: var(--sb-w); box-shadow: var(--shadow-pop); }
            html[data-sidebar="expanded"] .scrim { display: block; }
        }

        body.mobile-ui-active .sidebar,
        body.mobile-ui-active .scrim,
        body.mobile-ui-active .topbar-links {
            display: none;
        }
        body.mobile-ui-active {
            padding-left: 0 !important;
        }

        /* Slim legal-links bar (replaces the old top nav's right-hand links) */
        .topbar-links {
            display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
            gap: 6px 14px; padding: 8px 24px; border-bottom: 1px solid var(--border); background: var(--surface);
        }

        .auth-header-link {
            font-size: 12px;
            color: var(--slate-600);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: color 0.2s, border-color 0.2s, background-color 0.2s;
            white-space: nowrap;
            padding: 4px 2px;
            line-height: 1.2;
        }

        .auth-header-link:hover {
            color: var(--slate-900);
            border-bottom-color: var(--border-strong);
        }

        button.auth-header-link {
            border: none;
            background: transparent;
            cursor: pointer;
            font-family: inherit;
        }

        .auth-user-info {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--slate-600);
            padding: 0;
            border: none;
        }

        .auth-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.01em;
            cursor: default;
            position: relative;
            flex-shrink: 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 0 0 2px rgba(255,255,255,0.55);
            user-select: none;
            transition: box-shadow 0.15s;
        }

        .auth-avatar:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 2px rgba(255,255,255,0.8);
        }

        .auth-avatar-tooltip {
            position: absolute;
            bottom: calc(100% + 7px);
            left: 0;
            background: var(--slate-900);
            color: var(--surface);
            font-size: 11px;
            font-weight: 400;
            padding: 5px 9px;
            border-radius: 6px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s, transform 0.15s;
            transform: translateY(3px);
            z-index: 200;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .auth-avatar-tooltip::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 9px;
            border: 4px solid transparent;
            border-top-color: var(--slate-900);
        }

        .auth-avatar:hover .auth-avatar-tooltip {
            opacity: 1;
            transform: translateY(0);
        }

        /* Admin: Job Search Settings UX refresh */
        /* ===== SECTION: Admin panel styles — later block (.admin-*) ===== */
        .admin-search-grid {
            display: grid;
            grid-template-columns: minmax(320px, 0.95fr) minmax(520px, 1.35fr);
            gap: 14px;
            align-items: start;
        }

        .admin-tier-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
            gap: 12px;
            align-items: start;
        }

        .admin-tier-table {
            table-layout: fixed;
            width: 100%;
        }

        .admin-tier-table th,
        .admin-tier-table td {
            padding: 8px 8px;
            font-size: 12px;
            vertical-align: middle;
        }

        .admin-tier-table th:nth-child(1),
        .admin-tier-table td:nth-child(1) {
            width: 72%;
        }

        .admin-tier-table th:nth-child(2),
        .admin-tier-table td:nth-child(2) {
            width: 28%;
        }

        .admin-tier-table .admin-input-sm {
            width: 60px;
        }

        .admin-tier-action {
            font-size: 12px;
            color: #1f3955;
            font-weight: 500;
        }

        .admin-tier-toggles {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 12px;
            margin-top: 5px;
        }

        .admin-tier-feature-toggle {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            color: #607285;
            cursor: pointer;
        }

        .admin-tier-feature-toggle input {
            margin: 0;
            accent-color: #1f7bbd;
        }

        .admin-tier-no-limit {
            color: #b0bec5;
            font-size: 12px;
        }

        .admin-card {
            background: linear-gradient(180deg, #f9fcff 0%, #f2f7fd 100%);
            border: 1px solid #dce8f5;
            border-radius: 12px;
            padding: 16px;
        }

        .admin-card-title {
            font-weight: 700;
            margin-bottom: 12px;
            color: #28435c;
        }

        .admin-settings-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }

        .admin-settings-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 14px;
        }

        .admin-settings-environment {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 0;
            border: 0;
            background: transparent;
            color: #4a6178;
        }

        .admin-settings-environment-value {
            display: inline-flex;
            align-items: center;
            min-width: 0;
            justify-content: center;
            padding: 3px 8px;
            border: 1px solid #dfe7ef;
            border-radius: 999px;
            background: #f7fafc;
            color: #708090;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.01em;
            text-transform: capitalize;
        }

        .admin-settings-environment-value[data-env="staging"] {
            background: #f9f2e8;
            color: #8a6a43;
        }

        .admin-settings-environment-value[data-env="production"] {
            background: #edf6ef;
            color: #4d725b;
        }

        .admin-settings-app-version {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 0;
            border: 0;
            background: transparent;
            color: #4a6178;
        }

        .admin-settings-app-version-value {
            display: inline-flex;
            align-items: center;
            min-width: 0;
            justify-content: center;
            padding: 3px 8px;
            border: 1px solid #dfe7ef;
            border-radius: 999px;
            background: #f7fafc;
            color: #617389;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.01em;
            text-transform: none;
        }

        .admin-left-stack {
            display: grid;
            gap: 12px;
        }

        .admin-field-grid {
            display: grid;
            grid-template-columns: minmax(180px, 1fr) minmax(110px, 160px);
            gap: 10px;
            align-items: center;
        }

        .admin-label {
            font-weight: 600;
            color: #3f556b;
        }

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

        .admin-table {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
        }

        .admin-table th {
            text-align: left;
            border-bottom: 1px solid #dce3eb;
            padding: 10px;
            color: #4a6278;
            font-size: 13px;
            white-space: nowrap;
        }

        .admin-table td {
            padding: 10px;
            border-bottom: 1px solid #eef2f7;
            vertical-align: middle;
        }

        .admin-table tbody tr:last-child td {
            border-bottom: none;
        }

        .admin-input-sm {
            width: 100px;
        }

        /* Admin action buttons */
        .admin-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 5px 13px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.4;
            letter-spacing: 0.01em;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s, border-color 0.15s, color 0.15s;
        }
        .admin-action-btn:focus-visible {
            outline: 2px solid #93c5fd;
            outline-offset: 2px;
        }
        .admin-action-btn--neutral {
            background: #f1f5f9;
            color: #3f5369;
            border: 1px solid #cbd5e1;
        }
        .admin-action-btn--neutral:hover {
            background: #e2e8f0;
            border-color: #94a3b8;
        }
        .admin-action-btn--save {
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }
        .admin-action-btn--save:hover {
            background: #dbeafe;
            border-color: #93c5fd;
        }
        /* Block/Unblock buttons are intentionally quiet by default (transparent,
           muted slate text) so they don't draw the eye on every row; they reveal
           their red/green semantic color only on hover. */
        .admin-action-btn--danger {
            background: transparent;
            color: #64748b;
            border: 1px solid #e2e8f0;
        }
        .admin-action-btn--danger:hover {
            background: #fef2f2;
            color: #dc2626;
            border-color: #fecaca;
        }
        .admin-action-btn--success {
            background: transparent;
            color: #64748b;
            border: 1px solid #e2e8f0;
        }
        .admin-action-btn--success:hover {
            background: #f0fdf4;
            color: #16a34a;
            border-color: #bbf7d0;
        }
        /* Status badge */
        .admin-status-badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
            vertical-align: middle;
        }
        /* "Active" is the normal/default condition — muted slate so it doesn't
           compete for attention. "Blocked" stays red (a notable state). */
        .admin-status-badge--active {
            background: #f1f5f9;
            color: #64748b;
            border: 1px solid #e2e8f0;
        }
        .admin-status-badge--blocked {
            background: #fff5f5;
            color: #dc2626;
            border: 1px solid #fecaca;
        }

        /* Invite row (User Management): keeps the email input, role select and
           Send Invite button on a single responsive line. */
        .admin-invite-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }
        /* `input.admin-invite-input` ties the global `input[type=email]` rule's
           specificity (0,1,1) and wins by source order, overriding its
           width:100% + margin-bottom:12px — which otherwise stretch the input
           across the whole row and push the role select + Send Invite button
           onto a new line. */
        input.admin-invite-input {
            flex: 0 1 260px;
            min-width: 180px;
            max-width: 320px;
            width: auto;
            margin-bottom: 0;
        }
        /* Primary action variant for .admin-action-btn (e.g. Send Invite).
           Built on the --accent token so it adapts to dark mode automatically. */
        .admin-action-btn--primary {
            background: var(--accent);
            color: #ffffff;
            border: 1px solid var(--accent);
        }
        .admin-action-btn--primary:hover {
            background: var(--accent-hover);
            border-color: var(--accent-hover);
        }

        /* ===== Admin panel — dark mode support (1/2): surfaces, tables, buttons ===== */
        :root[data-theme="dark"] .admin-card {
            background: linear-gradient(180deg, var(--slate-50) 0%, var(--slate-100) 100%);
            border-color: var(--border);
        }
        :root[data-theme="dark"] .admin-card-title {
            color: var(--slate-900);
        }
        :root[data-theme="dark"] .admin-table {
            background: var(--surface);
        }
        :root[data-theme="dark"] .admin-table th {
            border-bottom-color: var(--border-strong);
            color: var(--slate-700);
        }
        :root[data-theme="dark"] .admin-table td {
            border-bottom-color: var(--border);
        }
        /* The session-max-age input is type=number, which the global form-control
           rule (text/email/tel) doesn't cover, so give it a dark surface explicitly. */
        :root[data-theme="dark"] #adminSubtab_users input[type="number"] {
            background: var(--slate-100);
            color: var(--ink);
            border: 1px solid var(--border-strong);
            border-radius: 6px;
            padding: 5px 8px;
        }
        :root[data-theme="dark"] .admin-action-btn--neutral {
            background: var(--slate-100);
            color: var(--slate-700);
            border-color: var(--border-strong);
        }
        :root[data-theme="dark"] .admin-action-btn--neutral:hover {
            background: var(--slate-200);
            border-color: var(--slate-400);
        }
        :root[data-theme="dark"] .admin-action-btn--save {
            background: var(--blue-50);
            color: var(--blue-700);
            border-color: var(--blue-200);
        }
        :root[data-theme="dark"] .admin-action-btn--save:hover {
            background: rgba(59, 130, 246, .22);
            border-color: var(--blue-600);
        }
        /* Block/Unblock: quiet by default in dark mode, semantic color on hover. */
        :root[data-theme="dark"] .admin-action-btn--danger {
            background: transparent;
            color: var(--slate-600);
            border-color: var(--border);
        }
        :root[data-theme="dark"] .admin-action-btn--danger:hover {
            background: var(--red-50);
            color: var(--red-700);
            border-color: var(--red-500);
        }
        :root[data-theme="dark"] .admin-action-btn--success {
            background: transparent;
            color: var(--slate-600);
            border-color: var(--border);
        }
        :root[data-theme="dark"] .admin-action-btn--success:hover {
            background: var(--green-50);
            color: var(--green-700);
            border-color: var(--green-500);
        }
        /* ===== Admin panel — dark mode support (2/2): badges, options, header, user rows ===== */
        :root[data-theme="dark"] .admin-status-badge--active {
            background: var(--slate-100);
            color: var(--slate-600);
            border-color: var(--border);
        }
        :root[data-theme="dark"] .admin-status-badge--blocked {
            background: var(--red-50);
            color: var(--red-700);
            border-color: var(--red-500);
        }
        :root[data-theme="dark"] .admin-platform-access-option {
            border-color: var(--border-strong);
            background: rgba(20, 29, 43, .5);
            color: var(--slate-700);
        }
        :root[data-theme="dark"] .admin-platform-access-option:hover {
            background: var(--slate-100);
            border-color: var(--slate-400);
        }
        :root[data-theme="dark"] .admin-platform-access-option:has(input:checked) {
            border-color: var(--blue-200);
            background: var(--blue-50);
            color: var(--slate-900);
        }
        :root[data-theme="dark"] .admin-settings-environment-value,
        :root[data-theme="dark"] .admin-settings-app-version-value {
            border-color: var(--border-strong);
            background: var(--slate-100);
            color: var(--slate-600);
        }
        :root[data-theme="dark"] .admin-settings-environment-value[data-env="staging"] {
            background: var(--amber-50);
            color: var(--amber-700);
        }
        :root[data-theme="dark"] .admin-settings-environment-value[data-env="production"] {
            background: var(--green-50);
            color: var(--green-700);
        }
        /* Consent pills + active-today indicator (User Management table) — light + dark */
        .admin-consent-pill {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            font-size: 11px;
            font-weight: 700;
            border-radius: 4px;
            padding: 1px 5px;
        }
        .admin-consent-pill--accepted {
            color: #1f7a3d;
            background: #edfaf3;
            border: 1px solid #b7e4cb;
        }
        .admin-consent-pill--missing {
            color: #9aabbb;
            background: #f4f6f8;
            border: 1px solid #dce3ea;
        }
        :root[data-theme="dark"] .admin-consent-pill--accepted {
            color: var(--green-700);
            background: var(--green-50);
            border-color: var(--green-500);
        }
        :root[data-theme="dark"] .admin-consent-pill--missing {
            color: var(--slate-600);
            background: var(--slate-100);
            border-color: var(--border-strong);
        }
        .admin-active-today { font-weight: 700; }
        .admin-active-today.is-active { color: #1f7a3d; }
        .admin-active-today.is-inactive { color: #607285; }
        :root[data-theme="dark"] .admin-active-today.is-active { color: var(--green-700); }
        :root[data-theme="dark"] .admin-active-today.is-inactive { color: var(--slate-600); }

        /* Sortable table headers + pagination (User Management) */
        .admin-th-sortable {
            cursor: pointer;
            user-select: none;
            transition: color 0.15s;
        }
        .admin-th-sortable:hover {
            color: var(--accent);
        }
        .admin-th-sortable[data-sort-active="true"] {
            color: var(--accent);
        }
        .admin-sort-indicator {
            font-size: 10px;
            margin-left: 2px;
        }
        .admin-users-pagination {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        .admin-users-page-info {
            font-size: 12px;
            color: var(--slate-600);
            white-space: nowrap;
        }
        .admin-users-page-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* Legacy toggle btn — styled to match admin-action-btn--neutral */
        .jobs-platform-toggle-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 5px 13px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.4;
            cursor: pointer;
            white-space: nowrap;
            background: #f1f5f9;
            color: #3f5369;
            border: 1px solid #cbd5e1;
            transition: background 0.15s, border-color 0.15s;
        }
        .jobs-platform-toggle-btn:hover {
            background: #e2e8f0;
            border-color: #94a3b8;
        }

        .jobs-platform-toggle-btn--compact {
            padding: 3px 9px;
            font-size: 11px;
            line-height: 1.2;
        }

        .admin-platform-table {
            min-width: 640px;
        }

        .admin-platform-table th:nth-child(4),
        .admin-platform-table td:nth-child(4) {
            width: 68px;
        }

        .admin-platform-table th:nth-child(5),
        .admin-platform-table td:nth-child(5) {
            width: 46px;
        }

        .admin-platform-table td:nth-child(4) .admin-input-sm {
            width: 50px;
            max-width: 50px;
        }

        .admin-platform-pages-cell .admin-input-sm {
            width: 40px;
            max-width: 40px;
        }

        .admin-platform-actions-cell {
            min-width: 188px;
        }

        .admin-platform-inline-actions {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }

        .admin-platform-table .admin-result-col {
            width: 140px;
            white-space: normal;
        }

        .admin-platform-table .admin-result-value {
            display: inline-block;
            max-width: 140px;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .admin-platform-settings-cell {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
        }

        .admin-platform-settings-summary {
            font-size: 11px;
            line-height: 1.4;
            color: #607285;
            white-space: normal;
            max-width: 220px;
        }

        .admin-platform-settings-modal {
            position: fixed;
            inset: 0;
            background: rgba(23, 35, 49, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 25000;
        }

        .admin-platform-settings-modal-card {
            width: min(760px, 100%);
            max-height: min(84vh, 880px);
            overflow: auto;
            background: #ffffff;
            border-radius: 12px;
            border: 1px solid #d9e3ee;
            box-shadow: 0 24px 48px rgba(27, 53, 79, 0.22);
        }

        .admin-platform-settings-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 14px 16px;
            border-bottom: 1px solid #e3ebf5;
            background: linear-gradient(180deg, #f8fbff 0%, #f2f7fd 100%);
        }

        .admin-platform-settings-modal-header h3 {
            margin: 0;
            font-size: 16px;
            color: #29435f;
        }

        .admin-platform-settings-modal-close {
            border: 0;
            border-radius: 8px;
            width: 32px;
            height: 32px;
            background: #e9f0f8;
            color: #3c5670;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
        }

        .admin-platform-settings-modal-close:hover {
            background: #dfeaf6;
        }

        .admin-platform-settings-modal-body {
            padding: 16px;
        }

        .admin-platform-settings-grid {
            display: grid;
            grid-template-columns: 220px minmax(220px, 1fr);
            gap: 10px 12px;
            align-items: center;
        }

        .admin-platform-settings-modal-footer {
            padding: 0 16px 16px;
            display: flex;
            justify-content: flex-end;
        }

        .admin-platform-json-examples {
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed #d7e3ef;
        }

        .admin-platform-json-note {
            margin: 0 0 8px;
            font-size: 12px;
            line-height: 1.45;
            color: #425e79;
        }

        .admin-platform-json-label {
            margin: 8px 0 4px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: #2f4f6e;
        }

        .admin-platform-json-pre {
            margin: 0;
            padding: 9px 10px;
            border: 1px solid #d7e3ef;
            border-radius: 8px;
            background: #f6f9fc;
            color: #2a4259;
            font-size: 11px;
            line-height: 1.45;
            white-space: pre-wrap;
            word-break: break-word;
        }

        @media (max-width: 1150px) {
            .admin-search-grid {
                grid-template-columns: 1fr;
            }

            .admin-tier-grid {
                grid-template-columns: 1fr;
            }
        }

        .profile-return-control {
            display: none;
            justify-content: flex-end;
            margin: 0 0 10px;
        }

        .profile-return-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 30px;
            padding: 5px 10px;
            border: 1px solid #bfd9ef;
            border-radius: 999px;
            background: #f4f9ff;
            color: #2f5f86;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            transition: background 0.12s ease, border-color 0.12s ease;
        }

        .profile-return-btn:hover {
            background: #eaf4ff;
            border-color: #a8c9e4;
        }

        /* Main Application Progress Bar (Professional, Modern) */
        /* ===== SECTION: Main content layout + progress bar (.main-*) ===== */
        .main-progress-bar {
            margin-bottom: 16px;
            padding: 10px 0 14px 0;
            border-bottom: 1px solid #eef2f6;
        }

        .main-progress-label {
            font-size: 12px;
            color: #64778a;
            font-weight: 600;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        .main-progress-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
        }

        .main-progress-title-wrap {
            display: inline-flex;
            align-items: baseline;
            gap: 8px;
            min-width: 0;
        }

        .main-progress-track-shell {
            flex: 1;
            min-width: 0;
        }

        .main-progress-bar-outer {
            flex: 1;
            height: 8px;
            background: #e6edf5;
            border-radius: 999px;
            overflow: hidden;
            position: relative;
        }

        .main-progress-bar-inner {
            height: 100%;
            background: linear-gradient(90deg, #4aa3df 0%, #2c5282 100%);
            border-radius: 999px;
            transition: width 0.3s cubic-bezier(.4,1.3,.6,1);
        }

        .main-progress-stepper {
            display: grid;
            grid-template-columns: repeat(var(--step-count, 5), minmax(0, 1fr));
            width: 100%;
            column-gap: clamp(18px, 2.6vw, 34px);
            row-gap: 0;
            margin-top: 10px;
            padding: 0;
            position: relative;
            z-index: 1;
            align-items: start;
            justify-items: stretch;
        }

        .main-progress-step {
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 0 4px;
        }

        .main-progress-step-circle {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid #a4b4c4;
            background: #fff;
            box-shadow: 0 0 0 2px #fff;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
            flex-shrink: 0;
        }

        .main-progress-step.completed .main-progress-step-circle {
            background: #8fa0b1;
            border-color: #8fa0b1;
        }

        .main-progress-step.current .main-progress-step-circle {
            border-color: #4aa3df;
            box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(74, 163, 223, 0.18);
            transform: scale(1.02);
        }

        .main-progress-percent {
            font-size: 14px;
            font-weight: 600;
            color: #2c5282;
            min-width: 0;
            text-align: left;
        }

        .main-progress-step-label {
            margin-top: 8px;
            font-size: 11px;
            line-height: 1.3;
            color: #7f8f9e;
            font-weight: 500;
            white-space: normal;
            letter-spacing: 0.01em;
            max-width: none;
            width: 100%;
        }

        .main-progress-step-label.completed {
            color: #5f7367;
        }

        .main-progress-step-label.current {
            color: #2c5282;
            font-weight: 600;
        }

        .main-progress-step-next-badge {
            display: inline-block;
            margin-left: 6px;
            padding: 1px 6px;
            border-radius: 999px;
            border: 1px solid #d8e3ee;
            background: #eef4fa;
            color: #3f5e7d;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            vertical-align: middle;
        }

        @media (max-width: 1200px) {
            .main-progress-step-label {
                font-size: 10px;
            }

            .main-progress-stepper {
                column-gap: 10px;
            }
        }

        @media (max-width: 880px) {
            .main-progress-head {
                flex-wrap: wrap;
            }

        }

        /* ── CV PDF Download Icon Button ──────────────────────────────────── */
        .jobs-pdf-dl-btn {
            border: none;
            background: transparent;
            color: #7ab8e0;
            border-radius: 4px;
            padding: 3px 6px;
            font-size: 13px;
            cursor: pointer;
            line-height: 1;
            flex-shrink: 0;
        }
        .jobs-pdf-dl-btn:hover { color: #1f7bbd; }

        /* ── CV PDF Download Modal ───────────────────────────────────────── */
        /* ===== SECTION: CV PDF download modal (.cvpdf-*) ===== */
        .cvpdf-modal-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            width: 100%;
            max-width: 480px;
            max-height: 90dvh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
            box-shadow: 0 18px 40px rgba(19, 40, 65, 0.2);
        }
        .cvpdf-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cvpdf-modal-title {
            font-size: 16px;
            font-weight: 700;
            color: #1f3955;
        }
        .cvpdf-modal-close {
            border: none;
            background: transparent;
            font-size: 22px;
            line-height: 1;
            color: #7b8794;
            cursor: pointer;
            padding: 0 4px;
        }
        .cvpdf-modal-subtitle {
            margin: 0;
            font-size: 12px;
            color: #607285;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cvpdf-profile-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .cvpdf-profile-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }
        .cvpdf-profile-row:hover { border-color: #a0b4c8; }
        .cvpdf-profile-row.selected { border-color: #1f7bbd; background: #f0f7ff; }
        .cvpdf-profile-row.recommended { border-color: #2e7d32; }
        .cvpdf-profile-row.selected.recommended { border-color: #1f7bbd; }
        .cvpdf-profile-name {
            font-weight: 600;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cvpdf-recommended-badge {
            font-size: 10px;
            font-weight: 700;
            color: #fff;
            background: #2e7d32;
            border-radius: 4px;
            padding: 2px 6px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .cvpdf-score-bar {
            height: 4px;
            background: #e2e8f0;
            border-radius: 2px;
            margin-top: 5px;
        }
        .cvpdf-score-fill {
            height: 100%;
            background: #1f7bbd;
            border-radius: 2px;
        }
        .cvpdf-modal-footer {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            padding-top: 4px;
        }
        .cvpdf-btn-secondary {
            border: 1px solid #c5cad1;
            background: transparent;
            color: #44627e;
            border-radius: 6px;
            padding: 8px 16px;
            font-size: 13px;
            cursor: pointer;
        }
        .cvpdf-btn-secondary:hover { background: #f0f4f8; }
        .cvpdf-btn-primary {
            border: none;
            background: #1f7bbd;
            color: #fff;
            border-radius: 6px;
            padding: 8px 18px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
        }
        .cvpdf-btn-primary:hover:not(:disabled) { background: #1669a0; }
        .cvpdf-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

        @media (max-width: 520px) {
            .cvpdf-modal-card { padding: 14px; border-radius: 8px; }
            .cvpdf-modal-footer { flex-direction: column-reverse; }
            .cvpdf-btn-primary, .cvpdf-btn-secondary { width: 100%; text-align: center; }
        }

        /* ── Terms Consent Modal ─────────────────────────────────────────── */
        /* ===== SECTION: Terms/legal text styles (.terms-*) ===== */
        .terms-consent-card {
            background: #fff;
            border-radius: 16px;
            padding: 28px 28px 24px;
            width: 100%;
            max-width: 420px;
            box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .terms-consent-header {
            display: flex;
            align-items: center;
        }
        .terms-consent-logo {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #94a3b8;
        }
        .terms-consent-title {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.25;
        }
        .terms-consent-body {
            margin: 0;
            font-size: 13px;
            color: #526273;
            line-height: 1.6;
        }
        .terms-consent-checks {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .terms-consent-check-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            cursor: pointer;
            font-size: 13px;
            color: #334155;
            line-height: 1.5;
        }
        .terms-consent-check-row input[type="checkbox"] {
            margin: 2px 0 0;
            flex-shrink: 0;
            width: 15px;
            height: 15px;
            accent-color: #1f7bbd;
            cursor: pointer;
        }
        .terms-consent-check-row a {
            color: #1f7bbd;
            font-weight: 600;
            text-decoration: none;
        }
        .terms-consent-check-row a:hover { text-decoration: underline; }
        .terms-consent-actions {
            display: flex;
            gap: 10px;
            padding-top: 4px;
        }
        .terms-consent-skip {
            flex: 1;
            border: 1px solid #d8e1eb;
            background: transparent;
            color: #526273;
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 13px;
            cursor: pointer;
        }
        .terms-consent-skip:hover { background: #f1f5f9; }
        .terms-consent-accept {
            flex: 2;
            border: none;
            background: #1f7bbd;
            color: #fff;
            border-radius: 8px;
            padding: 10px 18px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }
        .terms-consent-accept:hover:not(:disabled) { background: #1669a0; }
        .terms-consent-accept:disabled { background: #b0c8de; cursor: not-allowed; }
        @media (max-width: 480px) {
            .terms-consent-card { padding: 20px 18px 18px; border-radius: 12px; }
            .terms-consent-actions { flex-direction: column-reverse; }
        }

/* =========================================================================
   Create CV Profile modal — redesign styles
   ========================================================================= */

/* ---- Step labels --------------------------------------------------------- */
.cv-step {
    display: flex; align-items: center; gap: 9px;
    margin: 20px 0 12px;
}
.cv-step-n {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgb(100,150,145); color: #fff;
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cv-step-t { font-size: 13px; font-weight: 800; color: #0f172a; }
.cv-step-meta { font-size: 12px; color: #64748b; margin-left: auto; }

/* ---- Source picker cards ------------------------------------------------- */
.profile-create-tabs.source-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.source-card {
    position: relative;
    display: flex; flex-direction: column; gap: 7px;
    text-align: left; cursor: pointer;
    padding: 13px;
    border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.source-card:hover { border-color: #94a3b8; transform: translateY(-1px); }
.source-card .sc-ic {
    width: 34px; height: 34px; border-radius: 9px;
    background: #f8fafc; border: 1px solid #e2e8f0; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.source-card .sc-lab { font-size: 13.5px; font-weight: 700; color: #0f172a; }
.source-card .sc-desc { font-size: 11.5px; line-height: 1.35; color: #64748b; }
.source-card .sc-check {
    position: absolute; top: 11px; right: 11px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgb(100,150,145); color: #fff;
    display: none; align-items: center; justify-content: center; font-size: 11px;
}
.source-card[aria-selected="true"] {
    border-color: rgb(100,150,145); background: #eef4f3;
    box-shadow: 0 0 0 3px rgba(100,150,145,.16);
}
.source-card[aria-selected="true"] .sc-ic {
    background: #fff; border-color: rgb(100,150,145); color: rgb(100,150,145);
}
.source-card[aria-selected="true"] .sc-check { display: flex; }

/* ---- Active source panel — connected look -------------------------------- */
.profile-source-panel {
    border: 1.5px solid rgb(100,150,145);
    background: #eef4f3;
    border-radius: 12px;
    padding: 14px;
    margin-top: -4px;
    margin-bottom: 12px;
}

/* =========================================================================
   MOBILE — full-screen sheet
   ========================================================================= */
@media (max-width: 640px) {
    .image-upload-modal { align-items: flex-end; }
    .image-upload-modal-content {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        padding: 0;
        display: flex; flex-direction: column;
    }
    .image-upload-modal-header {
        position: sticky; top: 0; z-index: 5;
        margin: 0; padding: 16px 18px 14px;
        background: #fff;
    }
    .image-upload-modal-content > .image-upload-modal-header
        ~ *:not(.image-upload-actions.modern-footer-actions) {
        padding-left: 18px; padding-right: 18px;
    }
    .profile-create-tabs.source-cards { grid-template-columns: 1fr; }
    .source-card { min-height: 58px; }
    .profile-draft-layout { display: block; }
    .profile-draft-preview-wrap { margin-top: 12px; }
    .profile-grid-two,
    .profile-name-row { grid-template-columns: 1fr; }
    .image-upload-actions.modern-footer-actions {
        position: sticky; bottom: 0; z-index: 5;
        margin: 0; padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
        background: #fff; border-top: 1px solid #eef1f5;
        display: flex; flex-direction: column-reverse; gap: 8px;
    }
    .image-upload-actions.modern-footer-actions .btn {
        width: 100%; margin: 0; height: 50px; border-radius: 12px; font-size: 15px;
    }
}

/* tablet: 2-up cards */
@media (max-width: 820px) and (min-width: 641px) {
    .profile-create-tabs.source-cards { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   Applications grid — adaptive status cell (web) + mobile cards
   ============================================================================ */

/* ---- WEB: single-status view shows the date instead of a lozenge ---------- */
.app-row-cell-status.app-status-updated-only {
    align-items: center;
    justify-content: center;
    text-align: center;
}
.app-updated-value {
    font-size: 12.5px;
    color: var(--slate-600);
    font-weight: 500;
}

/* ============================================================================
   MOBILE — card layout for the applications grid
   ============================================================================ */
@media (max-width: 640px) {
    body.mobile-ui-active .app-row {
        display: block;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 13px 14px;
        margin-bottom: 10px;
        box-shadow: var(--shadow-card);
        min-height: 0;
    }

    /* hide eyebrow labels — status is known from the active filter pill */
    body.mobile-ui-active .app-row-cell::before { display: none !important; }

    /* top row: title + (updated stamp OR lozenge) */
    body.mobile-ui-active .app-row-cell-main { padding: 0; }
    body.mobile-ui-active .app-job-title {
        font-size: 15px; font-weight: 700; color: var(--slate-900);
        white-space: normal;
    }
    body.mobile-ui-active .jobs-company { font-size: 12.5px; color: var(--slate-600); }

    /* status cell floats to the top-right of the card */
    body.mobile-ui-active .app-row-cell-status {
        position: absolute; top: 13px; right: 14px;
        padding: 0; text-align: right; align-items: flex-end;
    }
    body.mobile-ui-active .app-row { position: relative; }
    /* in single-status view the date acts as the muted top-right stamp */
    body.mobile-ui-active .app-status-updated-only .app-updated-value {
        font-size: 11.5px; color: var(--slate-500); font-weight: 600;
    }
    body.mobile-ui-active .app-status-updated-only .app-date-label { display: none; }

    /* meta row: remote + progress, with a top divider */
    body.mobile-ui-active .app-row-cell-remote,
    body.mobile-ui-active .app-row-cell-progress {
        display: inline-flex; vertical-align: middle; padding: 0; margin-top: 11px;
    }
    body.mobile-ui-active .app-row-cell-remote { margin-right: 14px; }

    /* icon tiles: horizontal row under the title on narrow cards */
    body.mobile-ui-active .app-icons {
        flex-direction: row; justify-content: flex-start; padding: 0; margin-top: 8px;
    }

    /* notes: full width under the meta row */
    body.mobile-ui-active .app-row-cell[data-mobile-label="Notes"] {
        padding: 8px 0 0; display: block;
    }
    body.mobile-ui-active .app-notes-text { -webkit-line-clamp: 2; }

    /* actions: tidy row, no Preview (matches desktop) */
    body.mobile-ui-active .app-row-cell-actions {
        display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; padding: 0; justify-content: flex-start;
    }
    body.mobile-ui-active .app-edit-button {
        flex: 1; height: 38px; border-radius: 10px; font-size: 12.5px;
    }
    body.mobile-ui-active .app-link-button,
    body.mobile-ui-active .app-delete-button,
    body.mobile-ui-active .app-attachment-button {
        width: 42px; height: 38px; border-radius: 10px;
        border: 1px solid var(--border-strong); background: var(--surface);
    }
}

/* ===== SECTION: Profile Editor Redesign ===== */
/* Redesign of the left profile header, preview toolbar, privacy note, and mobile action bar */

/* --- Profile header (redesign of .cv-profile-toolbar wrapper) --- */
.ed-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.ed-head-top {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.profile-switch {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--slate-75);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 8px 12px;
    cursor: pointer;
    transition: border-color .15s;
    text-align: left;
}

.profile-switch:hover { border-color: var(--slate-400); }

.profile-av {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgb(100,150,145);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-meta { flex: 1; min-width: 0; }
.profile-meta .nm { display: block; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-meta .rl { display: block; font-size: 12px; color: var(--slate-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-switch .chev { color: var(--slate-500); font-size: 12px; flex-shrink: 0; }

.btn-new-profile {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #1f7a64;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 14px;
    height: 52px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.btn-new-profile:hover { background: #176c58; }
.btn-new-profile .plus { font-size: 17px; line-height: 1; }

.ed-head-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    color: var(--j-teal-d);
    border: 1px solid var(--j-border-in);
    border-radius: 8px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.save-btn:not(:disabled):hover { filter: brightness(.97); }
.save-btn:disabled { opacity: .5; cursor: not-allowed; }
.save-btn.dirty { background: var(--j-teal-d); color: #fff; border-color: var(--j-teal-d); }

.ghost-act {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--j-slate-500);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 7px 9px;
    border-radius: 8px;
}
.ghost-act:hover { background: var(--j-panel); color: var(--j-ink); }
.ghost-act.danger:hover { color: var(--red-700); background: var(--red-50); }
/* Mask toggle button */
.mask-toggle { border: 1px solid var(--j-border) !important; border-radius: 7px !important; }
.mask-toggle.on { color: var(--j-teal-d) !important; background: var(--j-panel-2) !important; border-color: var(--j-slate-400) !important; }
.mask-toggle:hover { background: var(--j-panel-2) !important; }
/* Masked form inputs */
input.masked { color: var(--j-slate-400) !important; background: var(--j-panel) !important; letter-spacing: .06em; }
input.masked:focus { outline: none; box-shadow: none; }

/* ─── Portfolio links section ───────────────────────────── */
.portfolio-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--j-border, #e2e8f0);
}
.portfolio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.portfolio-header label {
    font-size: 13px;
    font-weight: 600;
    color: var(--j-slate-700, #334155);
    margin: 0;
}
.portfolio-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px dashed var(--j-border-in, #cbd5e1);
    border-radius: 8px;
    background: var(--surface);
    color: var(--j-teal-d, #1f7a64);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.portfolio-add-btn:hover {
    border-color: var(--j-teal, rgb(100,150,145));
    background: var(--j-teal-tint, #eef4f3);
}
.portfolio-add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.portfolio-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.portfolio-item {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--j-border, #e2e8f0);
    border-radius: 9px;
    background: var(--j-panel, #f8fafc);
}
.portfolio-item input {
    border: 1px solid var(--j-border-in, #cbd5e1);
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 13px;
    font-family: inherit;
    background: var(--surface);
    color: var(--j-ink, #0f172a);
    min-width: 0;
    width: 100%;
}
.portfolio-item input:focus {
    outline: none;
    border-color: var(--j-teal, rgb(100,150,145));
    box-shadow: 0 0 0 3px rgba(100,150,145,.14);
}
.portfolio-item input.masked {
    color: var(--j-slate-400) !important;
    background: var(--j-panel-2) !important;
    letter-spacing: .06em;
}
.portfolio-remove-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #f2c9c9;
    border-radius: 7px;
    background: #fff5f5;
    color: #c0392b;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.portfolio-remove-btn:hover {
    background: #fee;
}
.portfolio-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 14px;
    border: 1px dashed var(--j-border-in, #cbd5e1);
    border-radius: 10px;
    background: var(--j-panel, #f8fafc);
    color: var(--j-slate-400, #94a3b8);
    text-align: center;
}
.portfolio-empty-icon {
    color: var(--j-slate-400, #94a3b8);
    opacity: 0.6;
}
.portfolio-empty-text {
    font-size: 12px;
    font-weight: 600;
}
.portfolio-section.is-masked .portfolio-empty-text {
    color: #b0bcc9;
}
.portfolio-section.is-masked .portfolio-empty-icon {
    opacity: 0.3;
}
.ed-head-spacer { margin-left: auto; }

/* --- Profile dropdown --- */
.dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 300;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    box-shadow: 0 16px 34px rgba(31,45,61,.18);
    padding: 6px;
    display: none;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
}
.dropdown.show { display: block; }
.dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #334155;
}
.dd-item:hover { background: #f8fafc; }
.dd-item.active { background: #eef4f3; color: #1f7a64; font-weight: 700; }
.dd-item .dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(100,150,145); flex-shrink: 0; }

/* --- Delegation context bar (act on behalf of) --- */
.delegation-ctx {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 11px;
    margin-bottom: 11px;
    padding: 8px 11px;
    border: 1px solid #d7e3ef;
    border-radius: 10px;
    background: #f7fbff;
    transition: background .15s, border-color .15s;
}
.delegation-ctx .ctx-ic {
    width: 24px; height: 24px; border-radius: 7px;
    background: #e7f0fa; color: #36536b;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.delegation-ctx .ctx-label {
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em;
    color: #36536b; white-space: nowrap;
}
.ctx-select {
    flex: 1; min-width: 0; height: 34px;
    border: 1px solid #cbd5e1; border-radius: 8px;
    padding: 0 10px; font-size: 13px; font-weight: 600;
    color: #0f172a; background: #fff; font-family: inherit; cursor: pointer;
}
.ctx-select:focus { outline: none; border-color: rgb(100,150,145); box-shadow: 0 0 0 3px rgba(100,150,145,.16); }
.ctx-delegate {
    flex-shrink: 0; appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid #cbd5e1; color: #64748b;
    border-radius: 8px; height: 34px; padding: 0 12px;
    font-family: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer; box-sizing: border-box; line-height: 1;
    white-space: nowrap;
}
.ctx-delegate:hover { background: #fff; color: #334155; border-color: #94a3b8; }
/* Amber "Acting as" state — shown when editing on behalf of someone else */
.delegation-ctx.acting { background: #fff7e8; border-color: #f0d8a0; }
.delegation-ctx.acting .ctx-ic { background: #fbe9c3; color: #8a6312; }
.delegation-ctx.acting .ctx-label { color: #8a6312; }
.delegation-ctx.acting .ctx-select { border-color: #e6c478; }

/* --- Privacy note --- */
.privacy-note {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--slate-600);
    line-height: 1.35;
    flex-wrap: wrap;
}
.privacy-note .lk { color: var(--j-teal); flex-shrink: 0; display: inline-flex; }
.privacy-note .more {
    background: none;
    border: none;
    color: var(--slate-500);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.privacy-pop {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 40;
    width: 280px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: 0 16px 36px rgba(31,45,61,.18);
    padding: 13px 14px;
    display: none;
}
.privacy-pop.show { display: block; }
.privacy-pop h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; color: var(--slate-900); display: flex; align-items: center; gap: 7px; }
.privacy-pop h4 .lk { color: var(--j-teal); }
.privacy-pop ul { margin: 0; padding: 0; list-style: none; }
.privacy-pop li { position: relative; padding: 0 0 0 18px; margin-bottom: 7px; font-size: 11.5px; line-height: 1.45; color: var(--slate-700); }
.privacy-pop li:last-child { margin-bottom: 0; }
.privacy-pop li::before { content: "✓"; position: absolute; left: 0; top: 0; color: rgb(100,150,145); font-weight: 800; font-size: 11px; }

/* --- Preview toolbar (redesign of .zoom-controls) --- */
.pv-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: #fff;
    border-bottom: 1px solid #d8dee6;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.zoomset {
    display: inline-flex;
    border: 1px solid #dfe5ec;
    border-radius: 9px;
    overflow: hidden;
}
.zoomset .zoom-btn {
    border: none;
    border-right: 1px solid #dfe5ec;
    border-radius: 0;
    background: #fff;
    color: #334155;
    width: 34px;
    height: 34px;
    font-size: 15px;
    cursor: pointer;
    box-shadow: none;
}
.zoomset .zoom-btn:last-child { border-right: none; }

.tpl-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    background: #fff;
    border: 1px solid #d3dae3;
    border-radius: 9px;
    padding: 0 10px;
    height: 34px;
}
.tpl-select-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
.tpl-select-wrap select {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    padding: 4px 2px;
    outline: none;
    max-width: 190px;
}

.lang-toggle {
    display: inline-flex;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    overflow: hidden;
    height: 36px;
}
.lang-toggle button {
    border: none;
    background: #fff;
    color: #64748b;
    padding: 0 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
}
.lang-toggle button.on { background: #1f7a64; color: #fff; }

.print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 9px;
    height: 38px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.print-btn:hover { background: #1e293b; }

/* --- Accent color picker --- */
.accent-pick { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; background: #fff; border: 1px solid #d3dae3; border-radius: 10px; padding: 5px 11px 5px 12px; height: 38px; }
.accent-pick .lab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.accent-pick .lab .cur { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #0f172a; margin-top: 1px; }
.swatches { display: inline-flex; gap: 7px; align-items: center; }
.swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px #dfe5ec; transition: transform .12s, box-shadow .12s; position: relative; }
.swatch:hover { transform: scale(1.12); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
.swatch[aria-checked="true"]::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 800; }

/* --- Mobile action bar --- */
.m-actionbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom) + 78px);
    z-index: 90;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 16px rgba(15,23,42,.08);
}

/* Extra bottom padding when action bar is visible above bottom nav */
body.mobile-profile-actionbar-active .editor-panel {
    padding-bottom: calc(96px + 70px) !important;
}

.m-act {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 50px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 12px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
}
.m-act .ai { font-size: 16px; line-height: 1; }
.m-act.primary { background: #0f172a; color: #fff; border-color: #0f172a; }
.m-act .badge { font-size: 10px; font-weight: 800; color: #1f7a64; }
.m-act.primary .badge { color: #9fd9c8; }

/* --- Bottom sheets --- */
.sheet-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    display: none;
    z-index: 310;
}
.sheet-scrim.show { display: block; }

.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 22px 22px 0 0;
    z-index: 320;
    transform: translateY(100%);
    transition: transform .26s ease;
    max-height: 86%;
    display: flex;
    flex-direction: column;
}
.sheet.show { transform: translateY(0); }
.sheet-grab { width: 38px; height: 5px; border-radius: 99px; background: #dfe5ec; margin: 9px auto 4px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 18px 12px; border-bottom: 1px solid #eef1f5; flex-shrink: 0; }
.sheet-head h2 { margin: 0; font-size: 17px; font-weight: 800; color: #0f172a; }
.sheet-x { width: 32px; height: 32px; border: none; border-radius: 50%; background: #f1f5f9; color: #475569; font-size: 17px; cursor: pointer; }
.sheet-body { overflow-y: auto; padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); }

/* Template list in sheet */
.tpl-row { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1.5px solid #e2e8f0; border-radius: 12px; margin-bottom: 9px; cursor: pointer; }
.tpl-row[aria-selected="true"] { border-color: rgb(100,150,145); background: #eef4f3; }
.tpl-thumb { width: 38px; height: 48px; border-radius: 5px; background: #fff; border: 1px solid #cbd5e1; flex-shrink: 0; position: relative; overflow: hidden; }
.tpl-thumb::before { content: ""; position: absolute; left: 5px; right: 5px; top: 6px; height: 5px; border-radius: 2px; background: rgb(100,150,145); }
.tpl-thumb::after { content: ""; position: absolute; left: 5px; right: 14px; top: 15px; bottom: 6px; background: repeating-linear-gradient(#e7ecf1 0 2px,transparent 2px 5px); }
.tpl-thumb.side::before { left: 5px; right: 18px; }
.tpl-info { flex: 1; }
.tpl-info .nm { font-size: 14px; font-weight: 700; color: #0f172a; }
.tpl-info .ds { font-size: 12px; color: #64748b; margin-top: 1px; }
.tpl-row .rdo { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tpl-row[aria-selected="true"] .rdo { border-color: rgb(100,150,145); background: rgb(100,150,145); color: #fff; font-size: 11px; }

/* ===== SECTION: Application Modal Redesign ===== */
/* CSS variables inherited from :root in handover, mapped to teal palette */
#applicationModal .am-modal {
    background: var(--surface); border-radius: 16px; overflow: hidden;
    box-shadow: var(--shadow-pop);
    display: flex; flex-direction: column;
    width: 98%; max-width: 1400px; max-height: 92vh;
}
/* HEADER */
#applicationModal .am-head {
    padding: 20px 24px 10px; border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0; position: relative;
}
#applicationModal .am-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
#applicationModal .am-eyebrow .lbl { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); }
#applicationModal .am-ctx-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--blue-50); color: var(--accent-hover); font-size: 11px; font-weight: 700; }
#applicationModal .am-ctx-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-hover); flex-shrink: 0; }
#applicationModal .am-close { position: absolute; top: 18px; right: 20px; width: 34px; height: 34px; border: 1px solid var(--border); background: var(--surface); border-radius: 9px; color: var(--slate-500); font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#applicationModal .am-close:hover { background: var(--slate-100); color: var(--slate-700); }
#applicationModal .am-titlerow { display: flex; align-items: flex-start; gap: 18px; }
#applicationModal .am-titlecol { flex: 1; min-width: 0; padding-right: 44px; }
#applicationModal .am-title { display: block; min-width: 0; margin: 0; font-size: 22px; font-weight: 800; color: var(--slate-900); letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#applicationModal .am-title-inp { width: 100%; height: 42px; border: 1px solid var(--border-strong); border-radius: 9px; padding: 0 12px; font-size: 18px; font-weight: 700; color: var(--slate-900); font-family: inherit; }
#applicationModal .am-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#applicationModal .am-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
#applicationModal .am-pill.company { background: var(--slate-100); color: var(--slate-800); font-weight: 700; }
#applicationModal .am-pill.soft { background: transparent; border: 1px solid var(--border); color: var(--slate-500); font-weight: 500; }
#applicationModal .am-pill.rate { background: var(--slate-100); border: 1px solid var(--border); color: var(--slate-800); font-weight: 700; }
/* Status wrapper */
#applicationModal .am-statuswrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; margin-right: 44px; }
#applicationModal .am-status { position: relative; }
#applicationModal .am-status select { appearance: none; -webkit-appearance: none; height: 36px; padding: 0 34px 0 14px; border-radius: 9px; border: 1px solid var(--border-strong); font-family: inherit; font-size: 13px; font-weight: 700; color: var(--slate-900); background: var(--surface); cursor: pointer; }
#applicationModal .am-status::after { content: "▾"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--slate-500); pointer-events: none; }
#applicationModal .am-status.is-draft select { background: var(--slate-100); color: var(--slate-700); border-color: var(--border-strong); }
#applicationModal .am-status.is-pending select { background: var(--slate-100); color: var(--slate-700); border-color: var(--border-strong); }
#applicationModal .am-status.is-applied select { background: var(--accent-soft); color: var(--blue-700); border-color: var(--blue-200); }
#applicationModal .am-status.is-interview select { background: var(--amber-50); color: var(--amber-700); border-color: var(--amber-300); }
#applicationModal .am-status.is-rejected select { background: var(--red-50); color: var(--red-700); border-color: var(--red-500); }
#applicationModal .am-status.is-skipped select { background: var(--slate-100); color: var(--slate-700); border-color: var(--border-strong); }
#applicationModal .am-status.is-hired select { background: var(--green-50); color: var(--green-700); border-color: var(--green-500); }
/* Progress stepper */
#applicationModal .am-progress { margin-top: 12px; padding: 0; margin-bottom: 0; border-bottom: none; }
#applicationModal .am-prog-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#applicationModal .am-prog-head .lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); }
#applicationModal .am-prog-head .pct { font-size: 12px; font-weight: 800; color: var(--accent); margin-left: auto; }
#applicationModal .am-track { height: 6px; border-radius: 99px; background: var(--slate-100); overflow: hidden; margin-bottom: 12px; }
#applicationModal .am-track .fill { height: 100%; border-radius: 99px; background: var(--slate-500); transition: width .35s ease; }
#applicationModal .am-steps { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#applicationModal .am-step { display: flex; align-items: center; gap: 7px; padding: 0; border: none; background: none; min-width: 0; }
#applicationModal .am-step::after { content: ""; width: 14px; height: 1px; background: var(--border-strong); flex-shrink: 0; }
#applicationModal .am-step:last-child::after { display: none; }
#applicationModal .am-step .ck { width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border: 1.5px solid var(--border-strong); color: var(--slate-500); background: var(--surface); }
#applicationModal .am-step .stxt { font-size: 11.5px; font-weight: 600; color: var(--slate-500); white-space: nowrap; }
#applicationModal .am-step.done .ck { background: transparent; border-color: var(--border-strong); color: var(--slate-500); }
#applicationModal .am-step.done .stxt { color: var(--slate-500); }
#applicationModal .am-step.current .ck { border-color: var(--accent); color: var(--accent); font-weight: 800; }
#applicationModal .am-step.current .stxt { color: var(--slate-900); font-weight: 700; }
/* Job URL row */
#applicationModal .am-joburl-row { border-bottom: 1px solid var(--border); }
#applicationModal .am-joburl { display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: var(--slate-50); min-height: 52px; }
#applicationModal .am-joburl .urlic { width: 30px; height: 30px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
#applicationModal .am-joburl .urltext { flex: 1; min-width: 0; font-size: 12.5px; color: var(--slate-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#applicationModal .am-mini { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--slate-700); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; }
#applicationModal .am-mini:hover { background: var(--slate-100); }
#applicationModal .am-mini.icon { width: 30px; padding: 0; justify-content: center; }
#applicationModal .am-cvfile { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 12px; color: var(--slate-500); cursor: pointer; }
#applicationModal .am-cvfile.has-file { border-style: solid; color: var(--slate-700); }
#applicationModal .am-joburl-full { padding: 12px 24px; }
/* BODY */
#applicationModal .am-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
/* LEFT PANE */
#applicationModal .am-left { flex: 0 0 42%; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface); min-width: 0; overflow: hidden; }
#applicationModal .pane-head { display: none; }
#applicationModal .pane-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
#applicationModal .pane-kicker .num { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }
#applicationModal .pane-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--slate-900); }
#applicationModal .pane-head .hint { font-size: 11.5px; color: var(--slate-500); margin-left: auto; }
/* Left toolbar */
#applicationModal .left-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
#applicationModal .prof-select { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); cursor: pointer; }
#applicationModal .prof-select .pav { width: 24px; height: 24px; border-radius: 6px; background: var(--slate-700); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#applicationModal .prof-select .pname { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--slate-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#applicationModal .prof-select .chev { color: var(--slate-500); font-size: 11px; }
#applicationModal .prof-actions { display: flex; gap: 6px; flex-shrink: 0; }
#applicationModal .am-ghost { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--slate-700); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#applicationModal .am-ghost:hover { background: var(--slate-100); }
#applicationModal .am-ghost:disabled { opacity: 0.45; cursor: not-allowed; }
/* Left tabs */
#applicationModal .left-tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
#applicationModal .ltab { border: none; background: none; color: var(--slate-500); font-family: inherit; font-size: 13px; font-weight: 700; padding: 14px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
#applicationModal .ltab:hover { color: var(--slate-700); }
#applicationModal .ltab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Left body */
#applicationModal .left-body { flex: 1; overflow-y: auto; padding: 16px 20px 20px; min-height: 0; }
/* Field styles inside left body */
#applicationModal .am-fld { margin-bottom: 12px; }
#applicationModal .am-fld:last-child { margin-bottom: 0; }
#applicationModal .am-fld-l { display: block; font-size: 11.5px; font-weight: 700; color: var(--slate-700); margin-bottom: 5px; }
#applicationModal .am-fld-l .opt { font-size: 10.5px; font-weight: 500; color: var(--slate-500); }
/* RIGHT PANE */
#applicationModal .am-right { flex: 1; display: flex; flex-direction: column; background: var(--slate-50); min-width: 0; }
#applicationModal .right-tabs { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; overflow-x: auto; }
#applicationModal .rtab { border: none; background: none; color: var(--slate-500); font-family: inherit; font-size: 13px; font-weight: 700; padding: 14px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0; }
#applicationModal .rtab:hover { color: var(--slate-700); }
#applicationModal .rtab.active { color: var(--accent); border-bottom-color: var(--accent); }
#applicationModal .rtab .badge { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
#applicationModal .right-body { flex: 1; overflow-y: auto; padding: 18px 22px 22px; min-height: 0; }
/* Wizard action buttons */
#applicationModal .wiz-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
#applicationModal .am-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
#applicationModal .am-btn.primary { background: var(--accent); color: #fff; }
#applicationModal .am-btn.primary:hover { background: var(--accent-hover); }
#applicationModal .am-btn.primary:disabled { background: var(--slate-500); cursor: not-allowed; }
#applicationModal .am-btn.adapt { background: var(--surface); color: var(--accent); border-color: var(--accent); }
#applicationModal .am-btn.adapt:hover { background: var(--accent-soft); }
#applicationModal .am-btn.ghost-btn { background: var(--surface); color: var(--slate-700); border-color: var(--border-strong); }
#applicationModal .am-btn.ghost-btn:hover { background: var(--slate-100); }
/* FOOTER */
#applicationModal .am-foot { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
#applicationModal .foot-notes { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
#applicationModal .foot-notes .nlabel { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); white-space: nowrap; }
#applicationModal .foot-notes .note-inp, #applicationModal .foot-notes input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--border-strong); border-radius: 9px; padding: 0 12px; font-size: 12.5px; color: var(--slate-900); background: var(--slate-50); font-family: inherit; }
#applicationModal .foot-notes .note-inp:focus, #applicationModal .foot-notes input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
#applicationModal .foot-acts { display: flex; gap: 10px; flex-shrink: 0; }
#applicationModal .am-btn-cancel { background: var(--surface); color: var(--slate-700); border: 1px solid var(--border-strong); border-radius: 10px; height: 40px; padding: 0 18px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
#applicationModal .am-btn-cancel:hover { background: var(--slate-100); }
#applicationModal .am-btn-save { background: var(--accent); color: #fff; border: none; border-radius: 10px; height: 40px; padding: 0 22px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
#applicationModal .am-btn-save:hover { background: var(--accent-hover); }
#applicationModal .am-btn-save .sv { width: 6px; height: 6px; border-radius: 50%; background: var(--surface); opacity: .85; display: inline-block; margin-right: 4px; }
/* URL inline edit input */
#applicationModal .url-inline-input { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 7px; font-size: 12.5px; font-family: inherit; color: var(--slate-900); outline: none; background: var(--surface); }
/* Matching view placeholder */
#applicationModal .mv-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--slate-500); padding: 28px 20px; }
#applicationModal .mv-placeholder .pic { font-size: 28px; margin-bottom: 10px; }
#applicationModal .mv-placeholder .pt { font-size: 13px; font-weight: 700; color: var(--slate-700); }

/* ===== Matching view v2: dashboard (ring + breakdown) + Action Plan ===== */
#applicationModal .mv2 { width: 100%; }
#applicationModal .mv2-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; }
#applicationModal .mv2-dashboard { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px; }
@media (min-width: 560px) { #applicationModal .mv2-dashboard { flex-direction: row; align-items: flex-start; gap: 24px; } }
#applicationModal .mv2-ring-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
#applicationModal .mv2-ring { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; }
#applicationModal .mv2-ring-inner { width: 80px; height: 80px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
#applicationModal .mv2-ring-pct { font-size: 26px; font-weight: 800; color: var(--slate-900); line-height: 1; }
#applicationModal .mv2-ring-pct-sub { font-size: 13px; color: var(--slate-500); margin-left: 1px; }
#applicationModal .mv2-verdict { margin-top: 9px; font-size: 12.5px; font-weight: 700; color: var(--slate-800); }
#applicationModal .mv2-ring-cap { font-size: 10.5px; color: var(--slate-500); margin-top: 1px; }
#applicationModal .mv2-breakdown { flex: 1; min-width: 0; }
#applicationModal .mv2-bd-title { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 13px; }
#applicationModal .mv2-bd-grid { display: grid; grid-template-columns: 1fr; gap: 13px; }
@media (min-width: 520px) { #applicationModal .mv2-bd-grid { grid-template-columns: 1fr 1fr; gap: 13px 26px; } }
#applicationModal .mv2-bd-item.na { opacity: .6; }
#applicationModal .mv2-bd-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
#applicationModal .mv2-bd-left { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
#applicationModal .mv2-bd-nm { font-size: 12px; font-weight: 700; color: var(--slate-700); }
#applicationModal .mv2-bd-wt { font-size: 10.5px; color: var(--slate-500); }
#applicationModal .mv2-bd-track { height: 6px; border-radius: 99px; background: var(--slate-100); overflow: hidden; }
#applicationModal .mv2-bd-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
#applicationModal .mv2-bd-fill.good { background: var(--green-500); }
#applicationModal .mv2-bd-fill.mid { background: var(--amber-500); }
#applicationModal .mv2-bd-fill.low { background: var(--red-500); }
#applicationModal .mv2-bd-val { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--slate-600); }
#applicationModal .mv2-bd-val.good { color: var(--green-700); }
#applicationModal .mv2-bd-val.mid { color: var(--amber-700); }
#applicationModal .mv2-bd-val.low { color: var(--red-700); }
#applicationModal .mv2-bd-val.na { color: var(--slate-500); }
/* Action plan */
#applicationModal .mv2-actions { display: flex; flex-direction: column; gap: 12px; }
#applicationModal .mv2-actions-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; }
#applicationModal .mv2-actions-title { font-size: 13px; font-weight: 800; color: var(--slate-900); }
#applicationModal .mv2-actions-sub { font-size: 11.5px; font-weight: 600; color: var(--slate-500); }
#applicationModal .mv2-section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
#applicationModal .mv2-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
#applicationModal .mv2-summary::-webkit-details-marker { display: none; }
#applicationModal .mv2-summary:hover { background: color-mix(in srgb, var(--slate-100) 55%, transparent); border-radius: 12px; }
#applicationModal .mv2-sec-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
#applicationModal .mv2-sec-icon.gaps { background: var(--red-50); color: var(--red-700); }
#applicationModal .mv2-sec-icon.quality { background: var(--amber-50); color: var(--amber-700); }
#applicationModal .mv2-sec-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#applicationModal .mv2-sec-title { font-size: 12.5px; font-weight: 700; color: var(--slate-900); }
#applicationModal .mv2-sec-sub { font-size: 11px; color: var(--slate-500); margin-top: 1px; }
#applicationModal .mv2-chevron { flex: 0 0 auto; color: var(--slate-400); transition: transform .15s ease; }
#applicationModal .mv2-section[open] .mv2-chevron { transform: rotate(180deg); }
#applicationModal .mv2-sec-body { padding: 4px 10px 12px; border-top: 1px solid var(--border); }
#applicationModal .mv2-group-title { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); margin: 10px 4px 4px; }
#applicationModal .mv2-group-title:first-child { margin-top: 4px; }
#applicationModal .mv2-empty { font-size: 12px; color: var(--slate-500); padding: 10px 4px; }
/* Gap rows */
#applicationModal .mv2-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; border: 1px solid transparent; transition: background .12s, border-color .12s; }
#applicationModal .mv2-row + .mv2-row { margin-top: 1px; }
#applicationModal .mv2-row:hover { background: var(--slate-100); border-color: var(--border); }
#applicationModal .mv2-ico { flex: 0 0 auto; width: 18px; height: 18px; display: grid; place-items: center; }
#applicationModal .mv2-ico.miss { color: var(--slate-400); }
#applicationModal .mv2-ico.weak { color: var(--amber-500); }
#applicationModal .mv2-ico.info { color: var(--blue-500); }
#applicationModal .mv2-ico.done { color: var(--green-500); }
#applicationModal .mv2-row-body { flex: 1; min-width: 0; }
#applicationModal .mv2-name { font-size: 12.5px; font-weight: 700; color: var(--slate-900); }
#applicationModal .mv2-desc { font-size: 11px; color: var(--slate-500); margin-top: 1px; line-height: 1.4; }
#applicationModal .mv2-row-actions { flex: 0 0 auto; display: flex; gap: 6px; }
#applicationModal .mv2-btn { font-family: inherit; cursor: pointer; padding: 4px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--slate-700); transition: background .12s, border-color .12s, color .12s; }
#applicationModal .mv2-btn:hover { background: var(--slate-100); border-color: var(--border-strong); }
#applicationModal .mv2-btn.skill { color: var(--blue-700); border-color: color-mix(in srgb, var(--blue-500) 35%, var(--border)); }
#applicationModal .mv2-btn.skill:hover { background: var(--blue-50); }
#applicationModal .mv2-btn.tool { color: var(--green-700); border-color: color-mix(in srgb, var(--green-500) 35%, var(--border)); }
#applicationModal .mv2-btn.tool:hover { background: var(--green-50); }
#applicationModal .mv2-btn.skip { color: var(--slate-500); }
#applicationModal .mv2-btn.skip:hover { background: var(--slate-100); color: var(--slate-700); }
/* Done state */
#applicationModal .mv2-row.done { opacity: .82; }
#applicationModal .mv2-row.done .mv2-name,
#applicationModal .mv2-row.done .mv2-desc { text-decoration: line-through; color: var(--slate-500); }
#applicationModal .mv2-done-tag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--green-50); color: var(--green-700); }
#applicationModal .mv2-done-tag::before { content: "\2713"; font-weight: 800; }
/* Skipped state — acknowledged, not resolved, so no strikethrough, just dimmed */
#applicationModal .mv2-row.skipped { opacity: .55; }
#applicationModal .mv2-skip-tag { flex: 0 0 auto; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--slate-100); color: var(--slate-500); }
/* Quality rows (no buttons) */
#applicationModal .mv2-q-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: 8px; }
#applicationModal .mv2-q-row + .mv2-q-row { border-top: 1px solid var(--border); }
#applicationModal .mv2-q-row .mv2-ico { margin-top: 1px; }
#applicationModal .mv2-q-body { flex: 1; min-width: 0; }
#applicationModal .mv-placeholder .pd { font-size: 12px; margin-top: 5px; max-width: 280px; line-height: 1.5; }
/* Override old work-area-tab & job-summary-right-tab class display handling */
#applicationModal .work-area-tab-content { display: none; }
#applicationModal .work-area-tab-content.active { display: block; }
/* Grammar/matching sub-tab content visible when active class set by JS */
#applicationModal .ai-recommendation-subtab-content { display: none; }
#applicationModal .ai-recommendation-subtab-content.active { display: block; }

/* ── Chip actions (v1.1) ── */
#applicationModal .am-chip-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
#applicationModal .am-chipbtn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--slate-700); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; max-width: 340px; }
#applicationModal .am-chipbtn:hover { background: var(--slate-100); border-color: var(--border-strong); }
#applicationModal .am-chipbtn .ic { width: 14px; height: 14px; flex-shrink: 0; color: var(--slate-500); }
#applicationModal .am-chipbtn .src { color: var(--slate-900); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
#applicationModal .am-chipbtn .ext { color: var(--slate-500); font-size: 11px; margin-left: 1px; }
#applicationModal .am-chipbtn .count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 800; }
#applicationModal .am-chipbtn.empty { border-style: dashed; color: var(--slate-500); }

/* am-title-linkgroup — inline job-link edit affordance in the title row */
#applicationModal .am-title-wrap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
#applicationModal .am-title-linkgroup { display: flex; align-items: center; gap: 2px; }
#applicationModal .am-title-linkicon { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--slate-400); flex-shrink: 0; transition: background .13s, color .13s; }
#applicationModal .am-title-linkicon:hover { background: var(--slate-100); color: var(--slate-700); }
#applicationModal .am-title-linkgroup.has-link .am-title-linkicon { color: var(--accent); }
#applicationModal .am-title-linkgroup.has-link .am-title-linkicon:hover { background: var(--accent-soft); color: var(--accent-hover); }
#applicationModal .am-title-editbtn { width: 20px; height: 20px; border-radius: 6px; border: none; background: transparent; color: var(--border-strong); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .13s, color .13s; }
#applicationModal .am-title-editbtn:hover { background: var(--slate-100); color: var(--slate-700); }
#applicationModal .am-title-linkinput { display: none; height: 26px; border: 1px solid var(--accent); border-radius: 7px; padding: 0 8px; font-size: 12.5px; font-family: inherit; color: var(--slate-900); width: 230px; max-width: 60vw; }
#applicationModal .am-title-linkinput:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
#applicationModal .am-title-linkgroup.editing .am-title-linkicon, #applicationModal .am-title-linkgroup.editing .am-title-editbtn { display: none; }
#applicationModal .am-title-linkgroup.editing .am-title-linkinput { display: block; }

/* ── Tab-save (v1.1) ── */
#applicationModal .tab-save { margin-left: auto; align-self: center; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
#applicationModal .tab-save:hover { background: var(--accent-hover); border-color: var(--accent-hover); }


/* ── Tagbox — skills/tools tag inputs (v1.3) ── */
#applicationModal .tagbox { border: 1px solid var(--border-strong); border-radius: 9px; padding: 9px; background: var(--surface); min-height: 48px; }
#applicationModal .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
#applicationModal .tag-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border-radius: 7px; background: var(--slate-100); color: var(--slate-700); font-size: 12px; font-weight: 600; }
#applicationModal .tag-chip .x { width: 15px; height: 15px; border-radius: 5px; background: var(--border-strong); color: var(--slate-500); font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#applicationModal .tag-chip.new { background: var(--indigo-50); color: var(--accent-hover); }
#applicationModal .tag-input { width: 100%; border: none; outline: none; font-size: 12.5px; padding: 3px 2px; font-family: inherit; color: var(--slate-900); }
#applicationModal .tag-input::placeholder { color: var(--slate-500); }

/* ── Sub-modal overlay (dlg) (v1.1) ── */
.dlg-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(15,23,42,.48); display: flex; align-items: center; justify-content: center; }
.dlg { width: min(444px, calc(100vw - 32px)); background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.dlg-head { position: relative; padding: 18px 20px 15px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.dlg-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--slate-900); }
.dlg-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--slate-500); line-height: 1.45; }
.dlg-close { position: absolute; top: 15px; right: 16px; width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; color: var(--slate-500); font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dlg-close:hover { background: var(--slate-100); }
.dlg-body { padding: 18px 20px; overflow-y: auto; }
.dlg-fld { margin-bottom: 14px; }
.dlg-fld:last-child { margin-bottom: 0; }
.dlg-fld label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--slate-700); margin-bottom: 6px; }
.dlg-fld label .opt { font-size: 10.5px; font-weight: 600; color: var(--slate-500); }
.dlg-fld .inp { width: 100%; height: 42px; border: 1px solid var(--border-strong); border-radius: 9px; padding: 0 12px; font-size: 13.5px; color: var(--slate-900); background: var(--surface); font-family: inherit; }
.dlg-fld .inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dlg-fld select.inp { appearance: none; -webkit-appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%239aafbf' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; padding-right: 30px; }
.dlg-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--slate-50); flex-shrink: 0; }

/* Attachment drop zone + list */
.att-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1.5px dashed var(--border-strong); border-radius: 11px; padding: 18px; text-align: center; color: var(--slate-500); font-size: 12.5px; background: var(--slate-50); margin-bottom: 15px; cursor: pointer; }
.att-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.att-drop b { color: var(--accent); font-weight: 700; }
#attachmentsList, #mobileAttachmentsList { display: flex; flex-direction: column; gap: 9px; }
.att-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.att-ic { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; letter-spacing: .02em; }
.att-ic.pdf { background: #d8584e; }
.att-ic.doc { background: #3a76c4; }
.att-ic.img { background: #5aa17f; }
.att-txt { flex: 1; min-width: 0; }
.att-txt .nm { font-size: 13px; font-weight: 700; color: var(--slate-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.att-txt .sub { font-size: 11px; color: var(--slate-500); margin-top: 1px; display: block; }
.att-txt .sub .send { color: var(--accent); font-weight: 700; }
.att-rm { width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--slate-500); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.att-rm:hover { background: var(--red-50); color: var(--red-700); border-color: var(--red-500); }

/* ── Mobile sheet extensions (v1.1) ── */
#applicationModal .sheet-grip { width: 38px; height: 4px; border-radius: 99px; background: var(--border-strong); margin: 9px auto 2px; flex-shrink: 0; }
#applicationModal .sheet-head { display: flex; align-items: flex-start; gap: 10px; padding: 8px 18px 13px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#applicationModal .sheet-head .sh-txt { flex: 1; min-width: 0; }
#applicationModal .sheet-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--slate-900); }
#applicationModal .sheet-head p { margin: 3px 0 0; font-size: 12px; color: var(--slate-500); line-height: 1.4; }
#applicationModal .sh-close { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--slate-500); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#applicationModal .sheet-body { padding: 16px 18px; overflow-y: auto; }
#applicationModal .sheet-foot { display: flex; gap: 10px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
#applicationModal .sheet-foot .s-cancel { flex: 0 0 auto; min-width: 90px; height: 46px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--slate-700); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
#applicationModal .sheet-foot .s-save { flex: 1; height: 46px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
#applicationModal .sheet-foot .s-save .sv { width: 6px; height: 6px; border-radius: 50%; background: var(--surface); opacity: .85; }
#applicationModal .s-fld { margin-bottom: 14px; }
#applicationModal .s-fld:last-child { margin-bottom: 0; }
#applicationModal .s-fld label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--slate-700); margin-bottom: 6px; }
#applicationModal .s-fld label .opt { font-size: 10.5px; font-weight: 600; color: var(--slate-500); }
#applicationModal .s-fld input, #applicationModal .s-fld select { width: 100%; height: 46px; border: 1px solid var(--border-strong); border-radius: 11px; padding: 0 13px; font-size: 13.5px; color: var(--slate-900); background: var(--surface); font-family: inherit; }
#applicationModal .s-fld select { appearance: none; -webkit-appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%239aafbf' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
#applicationModal .s-link-preview { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--slate-50); margin-bottom: 16px; }
#applicationModal .s-link-preview .fav { width: 36px; height: 36px; border-radius: 9px; background: var(--blue-50); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; font-size: 13px; }
#applicationModal .s-link-preview .lp { flex: 1; min-width: 0; }
#applicationModal .s-link-preview .lp .src { font-size: 13.5px; font-weight: 700; color: var(--slate-900); display: block; }
#applicationModal .s-link-preview .lp .full { font-size: 11.5px; color: var(--slate-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#applicationModal .s-link-preview .open { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--slate-500); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
#applicationModal .s-drop { display: flex; flex-direction: column; align-items: center; gap: 9px; border: 1.5px dashed var(--border-strong); border-radius: 13px; padding: 20px; text-align: center; color: var(--slate-500); font-size: 12.5px; background: var(--slate-50); margin-bottom: 16px; cursor: pointer; }
#applicationModal .s-drop .browse { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; }
#applicationModal .s-att-list { display: flex; flex-direction: column; gap: 9px; }
#applicationModal .s-att-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; }
#applicationModal .s-att-ic { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; }
#applicationModal .s-att-ic.pdf { background: #d8584e; }
#applicationModal .s-att-ic.doc { background: #3a76c4; }
#applicationModal .s-att-txt { flex: 1; min-width: 0; }
#applicationModal .s-att-txt .nm { font-size: 13.5px; font-weight: 700; color: var(--slate-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#applicationModal .s-att-txt .sub { font-size: 11px; color: var(--slate-500); margin-top: 1px; }
#applicationModal .s-att-txt .sub .send { color: var(--accent); font-weight: 700; }
#applicationModal .s-att-row .rm { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--slate-500); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#applicationModal .s-att-row .rm:hover { background: var(--red-50); color: var(--red-700); border-color: var(--red-500); }

/* ===== MOBILE APPLICATION MODAL ===== */
#applicationModal .m-appbar { display: none; align-items: center; gap: 10px; padding: 6px 14px 12px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
#applicationModal .m-back { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--slate-700); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#applicationModal .m-appbar .ttl { flex: 1; min-width: 0; }
#applicationModal .m-appbar .ttl .k { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); }
#applicationModal .m-appbar .ttl .j { font-size: 15px; font-weight: 800; color: var(--slate-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
#applicationModal .m-status-pill select { appearance: none; -webkit-appearance: none; height: 30px; padding: 0 24px 0 11px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--slate-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%239aafbf' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--slate-700); cursor: pointer; }
#applicationModal .m-prog { display: none; align-items: center; gap: 10px; padding: 9px 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
#applicationModal .m-prog .track { flex: 1; height: 6px; border-radius: 99px; background: var(--slate-100); overflow: hidden; }
#applicationModal .m-prog .track .fill { height: 100%; border-radius: 99px; background: var(--accent); transition: width .35s; }
#applicationModal .m-prog .pct { font-size: 11.5px; font-weight: 800; color: var(--accent); flex-shrink: 0; }
#applicationModal .m-scroll { display: none; flex: 1; overflow-y: auto; padding: 14px 14px 100px; min-height: 0; flex-direction: column; gap: 0; }
#applicationModal .m-sec { margin-bottom: 14px; }
#applicationModal .m-sec-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; }
#applicationModal .m-sec-head .num { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#applicationModal .m-sec-head h3 { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-700); }
#applicationModal .m-sec-head .act { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; text-decoration: none; }
#applicationModal .m-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--surface); }
#applicationModal .m-profctx { display: flex; align-items: center; gap: 12px; }
#applicationModal .m-profctx .pav { width: 42px; height: 42px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#applicationModal .m-profctx .pinfo { flex: 1; min-width: 0; }
#applicationModal .m-profctx .pinfo .nm { font-size: 14.5px; font-weight: 800; color: var(--slate-900); }
#applicationModal .m-profctx .pinfo .rl { font-size: 12px; color: var(--slate-500); margin-top: 1px; }
#applicationModal .m-profctx .review { flex-shrink: 0; align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--slate-500); border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; background: var(--surface); }
#applicationModal .m-ctx-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
#applicationModal .m-ctx-meta .mp { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: var(--slate-100); color: var(--slate-700); font-size: 11.5px; font-weight: 600; }
#applicationModal .m-readonly-note { display: flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 11px; color: var(--slate-500); line-height: 1.4; }
#applicationModal .m-job .jp-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#applicationModal .m-job .jp-link { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--border); color: var(--accent); font-size: 11.5px; font-weight: 600; text-decoration: none; }
#applicationModal .m-job h4 { margin: 14px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--slate-800); }
#applicationModal .m-job h4:first-child { margin-top: 0; }
#applicationModal .m-job p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--slate-700); }
#applicationModal .m-clamp { position: relative; max-height: 120px; overflow: hidden; }
#applicationModal .m-clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42px; background: linear-gradient(180deg,transparent 0%,var(--surface) 90%); }
#applicationModal .m-more { display: block; width: 100%; margin-top: 10px; height: 34px; border: 1px solid var(--border); border-radius: 9px; background: var(--slate-50); color: var(--slate-700); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
#applicationModal .m-match-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
#applicationModal .m-ring { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: conic-gradient(var(--accent) 0% 0%, var(--ring-track) 0% 100%); transition: background .4s; }
#applicationModal .m-ring .inner { width: 64px; height: 64px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
#applicationModal .m-ring .pct { font-size: 20px; font-weight: 800; color: var(--slate-900); line-height: 1; }
#applicationModal .m-ring .lab { font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-500); }
#applicationModal .m-match-verdict .v { font-size: 14px; font-weight: 800; color: var(--accent); }
#applicationModal .m-match-verdict .vd { font-size: 12px; color: var(--slate-500); line-height: 1.45; margin-top: 3px; }
#applicationModal .m-mb { margin-bottom: 10px; }
#applicationModal .m-mb:last-child { margin-bottom: 0; }
#applicationModal .m-mb-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
#applicationModal .m-mb-top .nm { font-size: 12px; font-weight: 600; color: var(--slate-700); }
#applicationModal .m-mb-top .vl { font-size: 11.5px; font-weight: 800; color: var(--slate-800); }
#applicationModal .m-mb-top .vl.good { color: var(--green-700); }
#applicationModal .m-mb-top .vl.mid { color: var(--amber-700); }
#applicationModal .m-mb-top .vl.low { color: var(--red-700); }
#applicationModal .m-mb-bar { height: 6px; border-radius: 99px; background: var(--slate-100); overflow: hidden; }
#applicationModal .m-mb-bar .fl { height: 100%; border-radius: 99px; background: var(--slate-500); }
#applicationModal .m-wiz-divider { height: 1px; background: var(--border); margin: 14px 0; }
#applicationModal .m-wiz-actions { display: flex; flex-direction: column; gap: 9px; }
#applicationModal .m-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; border: 1px solid transparent; width: 100%; }
#applicationModal .m-btn.primary { background: var(--accent); color: #fff; }
#applicationModal .m-btn.adapt { background: var(--surface); color: var(--accent); border-color: var(--accent); }
#applicationModal .m-btn.ghost { background: var(--surface); color: var(--slate-700); border-color: var(--border-strong); }
#applicationModal .m-notes textarea { width: 100%; min-height: 84px; border: 1px solid var(--border-strong); border-radius: 11px; padding: 11px 12px; font-size: 12.5px; line-height: 1.5; color: var(--slate-900); background: var(--surface); font-family: inherit; resize: vertical; }
#applicationModal .m-notes textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#applicationModal .m-savebar { display: none; gap: 10px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); flex-shrink: 0; }
#applicationModal .m-savebar .m-cancel { flex: 0 0 auto; width: 96px; height: 48px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--slate-700); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
#applicationModal .m-savebar .m-save { flex: 1; height: 48px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
/* Mobile show/hide */
body.mobile-ui-active #applicationModal .am-modal { max-height: 100vh; max-width: 100vw; width: 100%; border-radius: 0; }
body.mobile-ui-active #applicationModal .am-head { display: none; }
body.mobile-ui-active #applicationModal .am-body { display: none; }
body.mobile-ui-active #applicationModal .am-foot { display: none; }
body.mobile-ui-active #applicationModal .am-joburl-row { display: none; }
body.mobile-ui-active #applicationModal .m-appbar { display: flex; }
body.mobile-ui-active #applicationModal .m-prog { display: flex; }
body.mobile-ui-active #applicationModal .m-scroll { display: flex; }
body.mobile-ui-active #applicationModal .m-savebar { display: flex; }
/* Legacy overrides — neutralize inline styles added by old JS for elements now managed by new classes */
#applicationModal .am-left > .pane-head + .left-toolbar { }
/* Fix the old modal-content vertical scroll since am-modal uses flex-column */
#applicationModal.modal { align-items: center; }

/* Form participates in am-modal flex column */
#applicationModal #applicationForm {
    display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}

/* Dark-mode chevron for native <select> arrows — the SVG stroke color is baked into
   the data URI (can't reference a CSS var), so dark mode needs its own encoded copy. */
:root[data-theme="dark"] .dlg-fld select.inp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%236b7c93' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] #applicationModal .s-fld select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%236b7c93' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] #applicationModal .m-status-pill select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%236b7c93' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }