:root {
            --bg-base: #f8fafc;
            --bg-surface: #ffffff;
            --accent-cyan: #0284c7;
            --accent-blue: #2563eb;
            --border-subtle: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #64748b;

            --apply-green: #059669;
            --review-amber: #d97706;
            --ignore-slate: #64748b;

            --route-tr:      #0284c7;
            --route-ready:   #16a34a;
            --route-gap:     #ea580c;
            --route-nogo:    #64748b;
            --status-active: #2563eb;
        }

        /* ── Dark theme (BidPilot classic dark) ────────────────────────── */
        :root[data-theme="dark"],
        :root[data-theme="default"] {
            --bg-base: #0b0f19;
            --bg-surface: #131a2e;
            --accent-cyan: #06b6d4;
            --accent-blue: #3b82f6;
            --border-subtle: #222d4a;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;

            --apply-green: #10b981;
            --review-amber: #f59e0b;
            --ignore-slate: #64748b;

            --route-tr:      #38bdf8;
            --route-ready:   #4ade80;
            --route-gap:     #fb923c;
            --route-nogo:    #94a3b8;
            --status-active: #60a5fa;
        }

        /* ── NOVUS theme ──────────────────────────────────────────────────
           Palette lifted from the NOVUS landing app (novus-landing/app/
           globals.css): obsidian plate with champagne gold, which is also
           what the NOVUS brand mark uses. Champagne and obsidian carry the
           product's identity — they are its two most-used tokens by a wide
           margin — so the accent cyan becomes gold and the blue-black base
           becomes obsidian.

           Status hues keep their meaning (green = apply, amber = review) but
           are warmed toward the champagne family so they sit in the palette
           instead of fighting it. */
        :root[data-theme="novus"] {
            --bg-base: #050506;
            --bg-surface: #0f0e0c;
            --accent-cyan: #d4af37;
            --accent-blue: #b89868;
            --border-subtle: rgba(212, 175, 55, 0.18);
            --text-main: #f7f6f3;
            --text-muted: #a9a396;

            --apply-green: #b7c48a;
            --review-amber: #d4af37;
            --ignore-slate: #6a6a66;

            --route-tr:      #c8c8c0;
            --route-ready:   #b7c48a;
            --route-gap:     #d4af37;
            --route-nogo:    #6a6a66;
            --status-active: #b89868;
        }

        /* ── Light theme explicit alias ──────────────────────────────────── */
        :root[data-theme="light"] {
            --bg-base: #f8fafc;
            --bg-surface: #ffffff;
            --accent-cyan: #0284c7;
            --accent-blue: #2563eb;
            --border-subtle: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #64748b;

            --apply-green: #059669;
            --review-amber: #d97706;
            --ignore-slate: #64748b;

            --route-tr:      #0284c7;
            --route-ready:   #16a34a;
            --route-gap:     #ea580c;
            --route-nogo:    #64748b;
            --status-active: #2563eb;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: var(--bg-base);
            color: var(--text-main);
            padding: 16px;
            max-width: 600px;
            margin: 0 auto;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Typography */
        h1,
        h2,
        h3,
        h4 {
            font-family: 'Outfit', sans-serif;
            font-weight: 700;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid var(--border-subtle);
            margin-bottom: 20px;
        }

        .logo {
            font-size: 1.4rem;
            color: var(--accent-cyan);
            letter-spacing: -0.5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Filter Bar */
        .filter-bar {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            overflow-x: auto;
            padding-bottom: 8px;
            scrollbar-width: none;
        }

        .filter-bar::-webkit-scrollbar {
            display: none;
        }

        .pill {
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            color: var(--text-muted);
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
        }

        .pill.active {
            background: var(--accent-blue);
            color: white;
            border-color: var(--accent-blue);
        }

        /* Short Notice carries the same amber the urgency badge does, so the
           tab and the rows inside it read as one thing. */
        .pill-short:not(.active) {
            background: color-mix(in srgb, var(--review-amber) 12%, transparent);
            color: var(--review-amber);
            border-color: color-mix(in srgb, var(--review-amber) 45%, transparent);
        }
        .pill-short.active {
            background: var(--review-amber);
            border-color: var(--review-amber);
        }

        /* Ignore is demoted, not hidden: quieter than its neighbours, still a
           pill, still one click. */
        .pill-muted:not(.active) {
            background: transparent;
            border-style: dashed;
            opacity: 0.8;
        }

        /* ── Sort variants ───────────────────────────────────────────────
           A sort, never a filter. Nothing leaves the list when it changes. */
        .sort-bar {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin: -8px 0 18px;
        }

        .sort-bar-label {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .sort-variants {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .sort-variant {
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            color: var(--text-muted);
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 0.76rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
        }

        .sort-variant[aria-pressed="true"] {
            background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
            border-color: var(--accent-blue);
            color: var(--accent-blue);
        }

        .sort-bar-note {
            font-size: 0.74rem;
            color: var(--text-muted);
            flex: 1 1 220px;
            min-width: 0;
        }

        /* The tier letter on a card. One shape, six colours; S borrows the
           accent because it is the one Hakan asked to always see. */
        .badge-tier {
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.04em;
        }
        .badge-tier-S { background: color-mix(in srgb, var(--accent-blue) 15%, transparent); color: var(--accent-blue); border: 1px solid color-mix(in srgb, var(--accent-blue) 40%, transparent); }
        .badge-tier-A { background: color-mix(in srgb, var(--apply-green) 15%, transparent); color: var(--apply-green); border: 1px solid color-mix(in srgb, var(--apply-green) 40%, transparent); }
        .badge-tier-B { background: color-mix(in srgb, var(--review-amber) 15%, transparent); color: var(--review-amber); border: 1px solid color-mix(in srgb, var(--review-amber) 40%, transparent); }
        .badge-tier-C,
        .badge-tier-D,
        .badge-tier-E,
        .badge-tier-x { background: color-mix(in srgb, var(--ignore-slate) 15%, transparent); color: var(--ignore-slate); border: 1px solid color-mix(in srgb, var(--ignore-slate) 40%, transparent); }

        /* Tender Card List */
        .tender-card {
            background: var(--bg-surface);
            border-radius: 6px;
            padding: 18px;
            margin-bottom: 14px;
            border: 1px solid var(--border-subtle);
            cursor: pointer;
            transition: border-color 0.2s, transform 0.1s;
            overflow: auto;
        }

        .tender-card:active {
            transform: scale(0.98);
        }

        .card-body {
            /* flows around floated gauge */
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .badge {
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 0.7rem;
            font-family: 'JetBrains Mono', monospace;
            font-weight: 700;
            text-transform: uppercase;
        }

        /* Tints are derived from the token rather than hardcoded, so a theme
           switch recolours the badge instead of leaving a stale rgba() behind. */
        .badge-apply {
            background: color-mix(in srgb, var(--apply-green) 15%, transparent);
            color: var(--apply-green);
            border: 1px solid var(--apply-green);
        }

        .badge-review {
            background: color-mix(in srgb, var(--review-amber) 15%, transparent);
            color: var(--review-amber);
            border: 1px solid var(--review-amber);
        }

        .badge-ignore {
            background: color-mix(in srgb, var(--ignore-slate) 15%, transparent);
            color: var(--ignore-slate);
            border: 1px solid var(--ignore-slate);
        }

        /* Fit Engine v2 delivery route — see specs/2026-08-11-fit-engine-v2-design.md §4.6 */
        .badge-route {
            margin-left: 6px;
            background: color-mix(in srgb, var(--route-color) 18%, transparent);
            color: var(--route-color);
            border: 1px solid var(--route-color);
        }

        .badge-route-tr    { --route-color: var(--route-tr); }
        .badge-route-ready { --route-color: var(--route-ready); }
        .badge-route-gap   { --route-color: var(--route-gap); }
        .badge-route-nogo  { --route-color: var(--route-nogo); }

        .badge-status {
            margin-left: 6px;
            background: color-mix(in srgb, var(--status-active) 20%, transparent);
            color: var(--status-active);
            border: 1px solid var(--status-active);
        }

        /* ── View switching ───────────────────────────────────────────────
           Driven by body[data-view], so a media query can decide that two
           views are on screen at once. Below 1024px the behaviour is exactly
           as before: one view at a time. */
        #view-list, #view-analytics, #view-detail { display: none; }

        /* The search box, the last-search line and the filter pills belong to
           the tender queue. They used to disappear with it because they lived
           inside #view-list; now that the header is shared they have to be
           hidden explicitly, or Analytics carries a tender toolbar it cannot
           use. */
        .devex-search-bar {
            display: flex;
            gap: 6px;
            align-items: center;
            width: 100%;
            max-width: 360px;
        }

        /* !important because #devex-last-run-status carries a JS-managed inline
           display, and an inline style outranks any selector. Scoped to the
           views where the toolbar does not belong, so it cannot mask a bug
           elsewhere. */
        body:not([data-view="list"]):not([data-view="detail"]) .devex-search-bar,
        body:not([data-view="list"]):not([data-view="detail"]) #devex-last-run-status,
        body:not([data-view="list"]):not([data-view="detail"]) .filter-bar { display: none !important; }
        body[data-view="list"]      #view-list     { display: block; }
        body[data-view="analytics"] #view-analytics { display: block; }
        body[data-view="detail"]    #view-detail   { display: flex; }

        .detail-empty { display: none; }

        /* ── Desktop workspace ────────────────────────────────────────────
           Until now the only breakpoint was 768px, so a 27-inch monitor got
           the 768px layout stretched: one column, four tenders on screen, and
           opening one replaced the list entirely. Above 1024px the list stays
           put and the tender opens beside it. */
        @media (min-width: 1024px) {
            /* The app was capped at 600px on every screen — a phone column
               centred on a 27-inch monitor. This is the line that made the
               desktop layout impossible, not the absence of one. */
            body {
                max-width: 1560px;
                padding: 20px 28px;
            }

            .workspace {
                display: grid;
                grid-template-columns: minmax(340px, 30%) 1fr;
                gap: 20px;
                align-items: start;
            }

            /* Both panes stay mounted; the state only decides what the detail
               pane shows. */
            body[data-view="list"]   #view-detail,
            body[data-view="detail"] #view-list { display: block; }
            body[data-view="detail"] #view-detail { display: flex; }
            body[data-view="analytics"] .workspace { display: block; }

            /* The list scrolls against a pinned detail pane, so a long tender
               never drags the queue off screen.

               overflow-x is pinned to hidden on purpose: setting overflow-y to
               auto makes the other axis compute to auto as well, and a few
               pixels of overflow then draw a horizontal scrollbar across the
               column. */
            /* The panes fill whatever the header leaves, measured by the
               layout rather than guessed with a subtraction — the header wraps
               at some widths, and every magic number was wrong at one of
               them. body is already a flex column. */
            body { height: 100vh; min-height: 0; overflow: hidden; }

            /* Only the workspace may give up space. body is a flex column, so
               a fixed height makes every child shrinkable by default — on a
               short screen that crushed the filter bar from 26px to 10px and
               sliced the pills in half. */
            body > header,
            #devex-last-run-status,
            .filter-bar { flex: 0 0 auto; }

            .workspace { flex: 1 1 auto; min-height: 0; }

            #view-list,
            #view-detail {
                height: 100%;
                overflow-y: auto;
                overflow-x: hidden;
            }

            #view-list { padding-right: 6px; }

            /* Nothing selected: say so, rather than leaving half the screen
               blank and unexplained. */
            body[data-view="list"] #view-detail > *:not(.detail-empty) { display: none; }
            body[data-view="list"] .detail-empty {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 320px;
                gap: 10px;
                color: var(--text-muted);
                text-align: center;
                padding: 40px 20px;
            }

            .tender-card.active {
                border-color: var(--accent-cyan);
                background: color-mix(in srgb, var(--accent-cyan) 8%, var(--bg-surface));
            }

            /* One tender per row is a phone layout. */
            .card-meta { font-size: 0.8rem; }
        }

        @media (min-width: 1600px) {
            .workspace { grid-template-columns: minmax(380px, 26%) 1fr; }
        }

        /* Fit Engine v2: the record was judged on its headline alone. Dashed,
           so it reads as an open question rather than a verdict. */
        .badge-needs-detail {
            background: transparent;
            color: var(--text-muted);
            border: 1px dashed var(--text-muted);
            margin-left: 6px;
        }

        /* Token-derived, not a hardcoded rgba: a literal colour here survives a
           theme switch and stops matching the palette around it. */
        .badge-urgent {
            background: color-mix(in srgb, var(--review-amber) 18%, transparent);
            color: var(--review-amber);
            border: 1px solid var(--review-amber);
            margin-left: 6px;
            font-variant-numeric: tabular-nums;
        }

        .card-title {
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 12px;
            color: var(--text-main);
        }

        /* The normalised title, under the name the funder published. Quieter
           than the meta line below it, because it is the same tender said
           differently rather than another fact about it. */
        .card-subtitle {
            font-size: 0.82rem;
            line-height: 1.35;
            color: var(--text-muted);
            /* Pulls up into the title's 12px, leaving 4px between the two
               names and the full 12px before the meta line. */
            margin-top: -8px;
            margin-bottom: 12px;
        }

        .card-meta {
            font-size: 0.8rem;
            color: var(--text-muted);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* Circular Score Gauge */
        .score-gauge {
            position: relative;
            float: right;
            width: 50px;
            height: 50px;
            margin: 0 0 8px 12px;
        }

        .score-gauge svg {
            transform: rotate(-90deg);
        }

        .gauge-bg {
            fill: none;
            stroke: var(--border-subtle);
            stroke-width: 4;
        }

        .gauge-fill {
            fill: none;
            stroke-width: 4;
            stroke-linecap: square;
            transition: stroke-dashoffset 0.5s ease-out;
        }

        .gauge-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.75rem;
            font-weight: 700;
        }

        /* Fullscreen Login Page */
        #login-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: var(--bg-base);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .login-card {
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            width: 100%;
            max-width: 380px;
            padding: 32px 24px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
        }

        .login-header {
            text-align: center;
            margin-bottom: 24px;
        }

        .login-header h2 {
            font-size: 1.5rem;
            color: var(--text-main);
            margin-bottom: 6px;
        }

        .login-header p {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .input-group {
            margin-bottom: 18px;
        }

        .input-group label {
            display: block;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 6px;
            font-weight: 600;
        }

        .input-group input {
            width: 100%;
            background: var(--bg-base);
            border: 1px solid var(--border-subtle);
            color: var(--text-main);
            padding: 12px;
            border-radius: 4px;
            font-size: 0.95rem;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .input-group input:focus {
            border-color: var(--accent-cyan);
            box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15);
        }

        .btn-login {
            width: 100%;
            background: linear-gradient(135deg, var(--accent-blue), #2563eb);
            color: white;
            border: none;
            padding: 14px;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            margin-top: 8px;
        }

        .btn-login:active {
            opacity: 0.9;
        }

        #view-detail { display: none; flex-direction: column; flex: 1; min-height: 0; }
        .detail-scroll {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-right: 8px;
        }
        .detail-bid-footer {
            flex-shrink: 0;
            position: sticky;
            bottom: 0;
            background: var(--bg-base);
            padding: 12px 0 0 0;
            border-top: 1px solid var(--border-subtle);
            z-index: 10;
            display: flex;
            flex-direction: column;
        }
        .detail-top {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0 16px 0;
            border-bottom: 1px solid var(--border-subtle);
            margin-bottom: 16px;
            position: sticky;
            top: 0;
            background: var(--bg-base);
            z-index: 10;
        }
        .detail-top-right {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .btn-back {
            background: transparent;
            border: none;
            color: var(--accent-cyan);
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            padding: 8px 0;
        }
        /* The operator's own verdict. The endpoint behind this has worked since
           20 Aug and nothing called it, so when Hakan was asked which tenders
           he would bid on he answered by opening bid workspaces — the only mark
           the product let him make. */
        .decision-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 14px;
            padding: 10px 12px;
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
        }
        .decision-label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-muted);
            margin-right: 2px;
        }
        .decision-btn {
            background: transparent;
            border: 1px solid var(--border-subtle);
            color: var(--text-muted);
            padding: 5px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
        }
        .decision-btn:hover:not(:disabled) { color: var(--text-main); }
        .decision-btn:disabled { cursor: default; opacity: 0.6; }
        .decision-btn[aria-pressed="true"] {
            border-color: currentColor;
        }
        .decision-btn[data-rec="apply"][aria-pressed="true"] {
            color: var(--apply-green);
            background: color-mix(in srgb, var(--apply-green) 15%, transparent);
        }
        .decision-btn[data-rec="review"][aria-pressed="true"] {
            color: var(--review-amber);
            background: color-mix(in srgb, var(--review-amber) 15%, transparent);
        }
        .decision-btn[data-rec="ignore"][aria-pressed="true"] {
            color: var(--ignore-slate);
            background: color-mix(in srgb, var(--ignore-slate) 15%, transparent);
        }
        .decision-state {
            flex: 1 1 100%;
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        .decision-clear {
            background: transparent;
            border: none;
            color: var(--accent-cyan);
            cursor: pointer;
            font-size: 0.75rem;
            padding: 0;
            text-decoration: underline;
        }

        .incomplete-row {
            display: flex;
            align-items: stretch;
            gap: 10px;
            margin-bottom: 14px;
        }
        .incomplete-msg {
            flex: 1;
            display: flex;
            align-items: center;
            background: rgba(6, 182, 212, 0.1);
            border: 1px solid rgba(6, 182, 212, 0.4);
            color: #38bdf8;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        .incomplete-msg.pulsing {
            animation: pulseGlow 1.5s infinite ease-in-out;
        }
        @keyframes pulseGlow {
            0%, 100% { background: rgba(6, 182, 212, 0.1); }
            50% { background: rgba(6, 182, 212, 0.25); border-color: rgba(6, 182, 212, 0.7); }
        }
        .btn-rescrape {
            background: rgba(6, 182, 212, 0.15);
            border: 1px solid rgba(6, 182, 212, 0.5);
            color: #38bdf8;
            padding: 8px 14px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            white-space: nowrap;
            transition: all 0.2s ease;
        }
        .btn-rescrape:hover {
            background: rgba(6, 182, 212, 0.3);
            border-color: #38bdf8;
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
        }
        .btn-rescrape:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            box-shadow: none;
        }
        .btn-rescrape .icon.spin {
            display: inline-block;
            animation: spinIcon 1s linear infinite;
        }
        @keyframes spinIcon {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .detail-meta {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 14px;
        }
        /* The normalised title, shown under the funder's own wording. */
        .detail-subtitle {
            font-size: 0.85rem;
            line-height: 1.4;
            color: var(--text-muted);
            margin: -4px 0 12px;
        }
        .detail-section { margin-bottom: 16px; }
        .detail-section h4 {
            font-size: 0.9rem;
            color: var(--accent-cyan);
            margin: 0 0 8px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .detail-section p {
            font-size: 0.88rem;
            line-height: 1.5;
            color: var(--text-muted);
            white-space: pre-wrap;
        }

        .drawer-facts {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 14px;
        }

        .fact-chip {
            font-size: 0.75rem;
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
            color: var(--text-muted);
            border: 1px solid var(--border-subtle);
            background: var(--bg-base);
            padding: 4px 8px;
            border-radius: 3px;
        }

        .fact-chip.urgent {
            color: var(--review-amber);
            border-color: var(--review-amber);
        }

        .detail-body h3 {
            font-size: 1.25rem;
            margin-bottom: 12px;
            line-height: 1.3;
        }

        .detail-body h4 {
            font-size: 0.9rem;
            color: var(--accent-cyan);
            margin: 20px 0 8px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .detail-body p {
            font-size: 0.88rem;
            line-height: 1.5;
            color: var(--text-muted);
            margin-bottom: 12px;
        }

        .btn-bid {
            width: 100%;
            padding: 14px;
            background: var(--apply-green);
            color: #0b0f19;
            font-weight: 700;
            border: none;
            border-radius: 4px;
            margin-top: 0;
            font-size: 1rem;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .btn-bid:active {
            opacity: 0.8;
        }

        .btn-bid:disabled {
            cursor: default;
            opacity: 0.85;
            background: var(--border-subtle);
            color: var(--text-muted);
        }

        .btn-bid-secondary {
            width: 100%;
            padding: 12px;
            margin-top: 8px;
            background: transparent;
            color: var(--accent-cyan);
            font-weight: 600;
            border: 1px solid rgba(34, 211, 238, 0.35);
            border-radius: 4px;
            font-size: 0.9rem;
            cursor: pointer;
        }

        .btn-bid-secondary:active {
            opacity: 0.8;
        }

        .score-bar-container {
            background: var(--border-subtle);
            height: 6px;
            border-radius: 3px;
            overflow: hidden;
            margin: 6px 0 16px 0;
        }

        .score-bar-fill {
            height: 100%;
            border-radius: 3px;
        }

        .score-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .score-row strong {
            font-family: 'JetBrains Mono', monospace;
            color: var(--text-main);
            font-weight: 700;
        }

        .btn-archive {
            background: transparent;
            border: 1px solid rgba(239, 68, 68, 0.35);
            color: #f87171;
            font-size: 0.8rem;
            font-weight: 500;
            padding: 4px 10px;
            border-radius: 6px;
            cursor: pointer;
            white-space: nowrap;
        }

        .btn-archive:active {
            opacity: 0.75;
        }

        /* Match recommendation badge + Remove height in detail top bar */
        .detail-top-right .badge,
        .detail-top-right .btn-archive {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 28px;
            padding: 0 10px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1;
        }

        /* Dark scrollbars (detail + experts list) */
        .detail-scroll,
        .experts-checkbox-list {
            scrollbar-width: thin;
            scrollbar-color: var(--border-subtle) var(--bg-base);
        }

        .detail-scroll::-webkit-scrollbar,
        .experts-checkbox-list::-webkit-scrollbar {
            width: 8px;
        }

        .detail-scroll::-webkit-scrollbar-track,
        .experts-checkbox-list::-webkit-scrollbar-track {
            background: var(--bg-base);
        }

        .detail-scroll::-webkit-scrollbar-thumb,
        .experts-checkbox-list::-webkit-scrollbar-thumb {
            background: var(--border-subtle);
            border-radius: 4px;
        }

        .detail-scroll::-webkit-scrollbar-thumb:hover,
        .experts-checkbox-list::-webkit-scrollbar-thumb:hover {
            background: color-mix(in srgb, var(--border-subtle) 60%, var(--text-main));
        }

        .detail-scroll::-webkit-scrollbar-button {
            display: none;
            height: 0;
            width: 0;
        }

        .experts-checkbox-list::-webkit-scrollbar-button {
            display: none;
            height: 0;
            width: 0;
        }

        .experts-panel {
            display: none;
            background: var(--bg-base);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            padding: 14px;
            margin: 16px 0;
        }

        .experts-panel-title {
            font-size: 0.85rem;
            color: var(--accent-cyan);
            margin: 0 0 10px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .experts-toolbar {
            display: flex;
            gap: 8px;
            align-items: stretch;
            margin-bottom: 8px;
        }

        .experts-search {
            flex: 1;
            min-width: 0;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            color: var(--text-main);
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 0.8rem;
            outline: none;
        }

        .experts-selected-only {
            flex-shrink: 0;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            color: var(--text-muted);
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }

        .experts-selected-only.active {
            background: var(--accent-blue);
            color: white;
            border-color: var(--accent-blue);
        }

        .experts-checkbox-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 12px;
            max-height: 150px;
            overflow-y: auto;
            padding-right: 4px;
        }

        .experts-checkbox-list label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.8rem;
            color: var(--text-main);
            cursor: pointer;
        }

        .experts-filter-empty {
            display: none;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin: -4px 0 12px 0;
        }

        .experts-directive-label {
            display: block;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: 4px;
            font-weight: 600;
        }

        .experts-directive-input {
            width: 100%;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            color: var(--text-main);
            padding: 8px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            outline: none;
            resize: vertical;
        }

        .btn-reassemble {
            width: 100%;
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
            color: white;
            font-weight: 700;
            border: none;
            padding: 10px;
            border-radius: 4px;
            font-size: 0.85rem;
            cursor: pointer;
        }

        .btn-reassemble:disabled {
            opacity: 0.7;
            cursor: default;
        }

        /* Responsive Navigation */
        @media (max-width: 767px) {
            .desktop-only { display: none !important; }
            .mobile-only { display: inline-flex !important; }
        }
        @media (min-width: 768px) {
            .desktop-only { display: inline-flex !important; }
            .mobile-only { display: none !important; }
        }

        .nav-tabs {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .nav-tab {
            background: transparent;
            border: 1px solid var(--border-subtle);
            color: var(--text-muted);
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
        }

        .nav-tab.active, .nav-tab:hover {
            background: var(--bg-surface);
            color: var(--accent-cyan);
            border-color: var(--accent-cyan);
        }

        /* Mobile Drawer */
        #mobile-drawer {
            position: fixed;
            top: 0;
            right: -280px;
            width: 280px;
            height: 100vh;
            background: var(--bg-surface);
            border-left: 1px solid var(--border-subtle);
            z-index: 3000;
            transition: right 0.3s ease;
            padding: 24px 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            box-shadow: -5px 0 25px rgba(0,0,0,0.5);
        }

        #mobile-drawer.open {
            right: 0;
        }

        #drawer-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0,0,0,0.6);
            z-index: 2999;
            display: none;
        }

        .drawer-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px;
            border-radius: 6px;
            background: var(--bg-base);
            color: var(--text-main);
            font-weight: 600;
            font-size: 0.9rem;
            border: 1px solid var(--border-subtle);
            cursor: pointer;
        }

        .drawer-item.active {
            border-color: var(--accent-cyan);
            color: var(--accent-cyan);
        }

        .drawer-section-label {
            margin: 18px 0 8px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        /* Header Quick Dark/Light Toggle */
        .theme-toggle-btn {
            background: transparent;
            border: 1px solid var(--border-subtle);
            color: var(--text-muted);
            width: 32px;
            height: 32px;
            padding: 0;
            border-radius: 4px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 6px;
            transition: all 0.2s ease;
        }

        .theme-toggle-btn:hover {
            background: var(--bg-surface);
            color: var(--accent-cyan);
            border-color: var(--accent-cyan);
        }

        .theme-picker {
            display: flex;
            gap: 8px;
        }

        .theme-swatch {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px;
            border-radius: 6px;
            background: var(--bg-base);
            border: 1px solid var(--border-subtle);
            color: var(--text-main);
            font-family: inherit;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
        }

        .theme-swatch.active {
            border-color: var(--accent-cyan);
            color: var(--accent-cyan);
        }

        .swatch-chip {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            flex: 0 0 auto;
            border: 1px solid var(--border-subtle);
        }

        /* The chips preview each palette, so they are deliberately literal
           rather than token-driven — a swatch that restyled itself with the
           active theme would show the same two colours twice. */
        .swatch-chip-light   { background: linear-gradient(135deg, #ffffff 50%, #0284c7 50%); }
        .swatch-chip-dark,
        .swatch-chip-default { background: linear-gradient(135deg, #0b0f19 50%, #06b6d4 50%); }
        .swatch-chip-novus   { background: linear-gradient(135deg, #050506 50%, #d4af37 50%); }

        /* SVG Line Icon Styling (Monochrome) */
        .icon-mono {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* Partner Selection Modal & Candidate Cards */
        .partner-modal-box {
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            width: 100%;
            max-width: 760px;
            padding: 24px;
            max-height: 88vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
        }

        .partner-card {
            background: var(--bg-base);
            border: 1px solid var(--border-subtle);
            padding: 14px 16px;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }

        .partner-card:hover {
            border-color: var(--border-focus);
        }

        .partner-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
        }

        .partner-card-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 10px;
            margin-top: 4px;
            padding-top: 10px;
            border-top: 1px solid var(--border-subtle);
            flex-wrap: wrap;
        }

        /* Analytics Dashboard View */
        .analytics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }

        .kpi-card {
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            padding: 16px;
        }

        .kpi-title {
            font-size: 0.8rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .kpi-value {
            font-size: 1.8rem;
            font-weight: 800;
            font-family: 'JetBrains Mono', monospace;
            color: var(--text-main);
        }

        /* Partner Panel & Upload Dropzone */
        .partner-panel {
            background: var(--bg-base);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            padding: 14px;
            margin: 16px 0;
        }

        .dropzone {
            border: 2px dashed var(--border-subtle);
            border-radius: 8px;
            padding: 24px;
            text-align: center;
            background: var(--bg-surface);
            cursor: pointer;
            transition: border-color 0.2s;
        }

        .dropzone:hover, .dropzone.dragover {
            border-color: var(--accent-cyan);
        }