.ag-canvas { max-width: 1500px; margin: 0 auto; padding: 28px 28px 48px; }

    .ag-pagehead {
        display: flex; align-items: flex-end; gap: 32px;
        margin-bottom: 20px; padding-bottom: 24px;
        border-bottom: 1px solid var(--st-border);
        position: relative;
    }
    .ag-pagehead::before {
        content: ""; position: absolute; left: 0; bottom: -1px;
        width: 64px; height: 3px; background: var(--st-primary);
    }
    .ag-pagehead-title { flex: 1; min-width: 0; }
    .ag-pagehead h1 {
        font-family: 'Montserrat', sans-serif;
        font-size: clamp(22px, 2.6vw, 28px);
        line-height: 1.15; letter-spacing: -0.01em;
        margin: 6px 0 4px; font-weight: 500;
    }
    .ag-pagehead-sub { color: var(--st-text-muted); font-size: 13px; max-width: 580px; }
    .ag-pagehead-stats {
        flex: 0 0 auto;
        display: flex; gap: 24px; text-align: right;
    }
    .ag-stat-num {
        font-family: 'Montserrat', sans-serif;
        font-size: 36px; font-weight: 700; line-height: 1;
        font-feature-settings: "tnum"; color: var(--st-text);
    }
    .ag-stat-label {
        font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
        text-transform: uppercase; color: var(--st-text-muted);
        font-family: 'Montserrat', sans-serif;
    }

    .ag-toolbar {
        display: flex; gap: 12px; align-items: center; margin-bottom: 22px;
        flex-wrap: wrap;
    }
    .ag-search {
        flex: 1; max-width: 420px;
        padding: 10px 14px;
        background: var(--st-card-bg);
        border: 1px solid var(--st-border);
        border-radius: 5px;
        color: var(--st-text);
        font-family: inherit; font-size: 13px;
        outline: none;
    }
    .ag-search:focus {
        border-color: var(--st-primary);
        box-shadow: 0 0 0 3px rgba(201,80,47,0.15);
    }
    .ag-chip {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px; font-weight: 600;
        padding: 7px 12px; border-radius: 999px;
        background: transparent; color: var(--st-text-muted);
        border: 1px solid var(--st-border);
        cursor: pointer; transition: all 0.15s;
    }
    .ag-chip:hover { color: var(--st-text); border-color: var(--st-text-muted); }
    .ag-chip.ag-chip-active {
        background: var(--st-primary); color: #fff; border-color: var(--st-primary);
    }
    .ag-chip-count {
        font-family: ui-monospace, monospace;
        font-size: 10px; opacity: 0.75; margin-left: 6px;
    }

    /* ─── Roster grid ─────────────────────────────────────────── */
    .ag-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 14px;
    }
    .ag-card {
        background: var(--st-card-bg);
        border: 1px solid var(--st-border);
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        display: flex; flex-direction: column;
        transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
        text-decoration: none; color: inherit;
        aspect-ratio: 3 / 4;
        font: inherit; text-align: left;
        padding: 0; /* reset button default */
    }
    .ag-card:focus-visible {
        outline: 3px solid var(--st-header-accent, var(--st-warning));
        outline-offset: 2px;
        border-color: var(--st-header-accent, var(--st-warning));
    }
    .ag-card:hover {
        transform: translateY(-3px);
        border-color: var(--st-primary);
        box-shadow: 0 8px 24px var(--st-shadow-md, rgba(0,0,0,0.18));
    }
    .ag-card-photo {
        flex: 1; min-height: 0;
        background: linear-gradient(135deg, var(--st-surface), var(--st-surface-2));
        position: relative; overflow: hidden;
    }
    .ag-card-photo img {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        filter: saturate(0.92);
        transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.3s;
    }
    .ag-card:hover .ag-card-photo img {
        transform: scale(1.04); filter: saturate(1.1);
    }
    .ag-card-photo::after {
        /* vignette + subtle scanline atmosphere */
        content: ""; position: absolute; inset: 0;
        background:
            linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%),
            repeating-linear-gradient(0deg, transparent 0, transparent 3px,
                                            rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
        pointer-events: none;
    }
    .ag-card-fallback {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700; font-size: 56px;
        color: var(--st-text-muted);
        background: linear-gradient(135deg, var(--st-surface), var(--st-surface-2));
        font-feature-settings: "tnum";
    }
    .ag-card-meta {
        position: relative; z-index: 1;
        padding: 10px 12px 12px;
        background: var(--st-card-bg);
        border-top: 1px solid var(--st-border);
    }
    .ag-card-name {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700; font-size: 14px;
        margin: 0;
        color: var(--st-text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        letter-spacing: -0.01em;
    }
    .ag-card-role {
        font-size: 11px; color: var(--st-text-muted);
        margin-top: 2px; font-style: italic;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ag-card-default {
        position: absolute; top: 8px; left: 8px;
        /* Was amber-on-indigo (#e8a030 / #2d1b69) — replaced with rust pill
           so default-persona identity tracks the brand instead of a
           detached editorial colour. */
        background: var(--st-primary);
        color: #fff;
        font-family: 'Montserrat'; font-size: 9px; font-weight: 700;
        letter-spacing: 0.1em;
        padding: 2px 7px; border-radius: 9px;
        z-index: 2;
        text-transform: uppercase;
    }
    /* Status dot — only shown when the persona is actually wired up
       to Azure AI Foundry (azure_id present + active + configured).
       Inactive personas get NO dot at all so the roster reads honestly:
       a green dot means "you can chat with this agent right now".
       Earlier behaviour painted every persona green by default with
       an amber "busy" override on working — invertedly suggesting that
       unconfigured agents were the live ones. */
    .ag-card-status {
        position: absolute; top: 8px; right: 8px;
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--st-success);
        z-index: 2;
        box-shadow: 0 0 6px rgba(34,197,94,0.7);
    }
    .ag-card-status.ag-card-status-inactive {
        /* Subtle gray "registered but not wired up" dot. Only used in
           the "Inactive" filter view to keep the layout consistent —
           hidden in All/Active views via the JS render path. */
        background: var(--st-text-muted);
        box-shadow: none;
        opacity: 0.45;
    }

    /* Supervisor pill — shown bottom-left of the card when the persona
       has connected SMEs. Indigo to mirror M4gentic's accent in the
       drawer + signal "this one orchestrates others". */
    .ag-card-sup {
        /* Top-left of card — replaces the area DEFAULT badge would
           occupy (supervisors can't be is_default so no collision).
           Was bottom-left, which overlapped the role text on cards
           with longer role names. */
        position: absolute; top: 8px; left: 8px;
        background: var(--sup-accent-soft);
        color: var(--sup-accent-line);
        font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700;
        letter-spacing: 0.06em;
        padding: 2px 7px 2px 6px; border-radius: 9px;
        z-index: 2;
        display: inline-flex; align-items: center; gap: 4px;
        border: 1px solid var(--sup-accent-strong);
        pointer-events: none;  /* Don't intercept the card click. */
    }
    .ag-card-sup i { font-size: 8px; }

    /* Create-supervisor modal — same backdrop blur + indigo accent. */
    .ag-create-sup-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,0.55);
        z-index: 9000; backdrop-filter: blur(2px);
    }
    /* Visually-hidden but screen-reader-accessible utility. Used for
       live-region announcements (canvas add/remove). */
    .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;
    }

    /* Page-wide supervisor/orchestrator accent tokens. Used by the
       agent-roster supervisor pill AND the create-supervisor wizard
       so "supervisor / orchestrator" reads as one visual concept
       across this page. Scoped to body so the tokens outlive the
       modal lifecycle and reach the roster cards too. */
    body {
        --sup-accent:          #6366f1;
        --sup-accent-deep:     #4338ca;
        --sup-accent-line:     #4f46e5;
        --sup-accent-faintest: var(--sup-accent-faintest);
        --sup-accent-faint:    rgba(99,102,241,0.08);
        --sup-accent-light:    var(--sup-accent-light);
        --sup-accent-soft:     rgba(99,102,241,0.15);
        --sup-accent-glow:     var(--sup-accent-glow);
        --sup-accent-mid:      rgba(99,102,241,0.30);
        --sup-accent-shadow:   rgba(99,102,241,0.40);
        --sup-accent-strong:   rgba(99,102,241,0.45);
    }

    .ag-create-sup-modal {
        position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
        z-index: 9001; width: min(960px, 94vw);
        max-height: 92vh; display: flex; flex-direction: column;
        background: var(--st-card-bg);
        border: 1px solid var(--st-border);
        border-radius: 8px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.55);
        overflow: hidden;
    }
    .ag-create-sup-header {
        display: flex; align-items: center; gap: 12px;
        padding: 14px 20px; border-bottom: 1px solid var(--st-border);
        background: linear-gradient(180deg, var(--sup-accent-faintest), transparent);
    }
    .ag-create-sup-header h2 {
        margin: 0; font-size: 16px; font-weight: 600; flex: 1;
        display: flex; align-items: center; gap: 10px;
    }
    .ag-create-sup-body {
        flex: 1; overflow: hidden;
        display: flex; flex-direction: column;
    }
    .ag-create-sup-actions {
        display: flex; justify-content: flex-end; gap: 8px;
        padding: 14px 20px; border-top: 1px solid var(--st-border);
    }
    /* The drawer's primary button declares `flex: 1` so it stretches
       in that footer; in this `justify-content: flex-end` footer that
       would balloon the Create button across the modal. Pin both
       footer buttons to their natural width. */
    .ag-create-sup-actions .ag-drawer-btn,
    .ag-create-sup-actions .ag-drawer-btn-primary {
        flex: 0 0 auto;
    }
    /* Drawer's primary button also lacks a :disabled style — without
       this the in-flight POST leaves the Create button visually
       indistinguishable from active and users can mash it. */
    .ag-create-sup-actions .ag-drawer-btn-primary:disabled,
    .ag-create-sup-actions .ag-drawer-btn-primary[aria-disabled="true"] {
        opacity: 0.55; cursor: not-allowed;
        background: var(--sup-accent-deep);
        border-color: var(--sup-accent-deep);
    }
    /* Make the wizard's primary button wear the supervisor accent
       in every theme (the inherited rust-orange clashed with the
       indigo wizard in light + dark-rust themes). */
    .ag-create-sup-actions .ag-drawer-btn-primary {
        background: var(--sup-accent);
        border-color: var(--sup-accent);
    }
    .ag-create-sup-actions .ag-drawer-btn-primary:hover:not(:disabled) {
        background: var(--sup-accent-deep);
        border-color: var(--sup-accent-deep);
    }

    /* ── Wizard layout ── */
    .sup-wiz-top {
        display: flex; gap: 14px; align-items: center;
        padding: 14px 20px; border-bottom: 1px solid var(--st-border);
        flex-wrap: wrap;
    }
    .sup-wiz-name-wrap {
        flex: 1 1 280px; min-width: 240px;
    }
    .sup-wiz-name-wrap input {
        width: 100%; padding: 10px 14px; font-size: 18px; font-weight: 600;
        background: var(--st-bg); color: var(--st-text);
        border: 1px solid var(--st-border); border-radius: 6px;
        outline: none;
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .sup-wiz-name-wrap input:focus {
        border-color: var(--sup-accent);
        box-shadow: 0 0 0 3px var(--sup-accent-soft);
        outline: none;  /* Suppress the global rust focus outline so it
                            doesn't paint on top of our indigo halo. */
    }
    .sup-wiz-name-hint {
        font-size: 11px; color: var(--st-text-muted); margin-top: 4px;
        line-height: 1.4;
    }
    .sup-wiz-name-hint strong { color: var(--sup-accent); font-weight: 600; }
    /* Inline validation error — appears when the backend returns 409
       (name collision) instead of forcing the user to read the footer. */
    .sup-wiz-name-error {
        font-size: 11px; color: var(--st-danger); margin-top: 4px;
        line-height: 1.4; font-weight: 500;
        display: flex; gap: 6px; align-items: center;
    }
    .sup-wiz-name-wrap input[aria-invalid="true"] {
        border-color: var(--st-danger);
        box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
    }

    .sup-wiz-strategies {
        display: flex; gap: 4px; flex: 0 0 auto;
        background: var(--st-bg); padding: 3px; border-radius: 7px;
        border: 1px solid var(--st-border);
    }
    .sup-wiz-strat {
        background: transparent; border: 0; padding: 7px 13px;
        font-size: 11px; font-weight: 600; color: var(--st-text-muted);
        cursor: pointer; border-radius: 5px;
        transition: background 0.12s, color 0.12s;
        font-family: inherit;
    }
    .sup-wiz-strat:hover { color: var(--st-text); }
    .sup-wiz-strat.sup-wiz-strat-active {
        background: var(--sup-accent); color: #fff;
    }
    .sup-wiz-strat-tip {
        font-size: 10px; color: var(--st-text-muted); margin-top: 4px;
        font-style: italic;
        flex-basis: 100%;
    }

    /* ── Two-pane work area ── */
    .sup-wiz-stage {
        flex: 1; display: flex; min-height: 380px;
        overflow: hidden;
    }
    .sup-wiz-pool {
        flex: 0 0 280px; display: flex; flex-direction: column;
        border-right: 1px solid var(--st-border);
        background: var(--st-bg);
    }
    .sup-wiz-pool-head {
        padding: 10px 14px; font-size: 10px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.14em;
        color: var(--st-text-muted);
        border-bottom: 1px solid var(--st-border);
    }
    .sup-wiz-pool-search {
        margin: 8px 12px; padding: 6px 10px;
        background: var(--st-card-bg); color: var(--st-text);
        border: 1px solid var(--st-border); border-radius: 4px;
        font-size: 12px; outline: none;
    }
    .sup-wiz-pool-search:focus { border-color: var(--sup-accent); }
    .sup-wiz-pool-list {
        flex: 1; overflow-y: auto; padding: 4px 8px 14px;
        display: flex; flex-direction: column; gap: 4px;
    }
    .sup-wiz-pool-item {
        display: flex; align-items: center; gap: 9px;
        padding: 6px 8px; border-radius: 4px;
        background: var(--st-card-bg); cursor: grab;
        border: 1px solid var(--st-border);
        transition: background 0.12s, border-color 0.12s, transform 0.12s;
        user-select: none;
        /* Reset button defaults (now <button id="agents-button"> not <div> so keyboard
           + click-to-add work without a separate code path). */
        font: inherit; color: inherit; text-align: left;
        width: 100%;
    }
    .sup-wiz-pool-item:focus-visible {
        outline: 2px solid var(--sup-accent); outline-offset: 1px;
        background: var(--sup-accent-faint);
    }
    .sup-wiz-pool-item:hover {
        border-color: var(--sup-accent); background: var(--sup-accent-faint);
    }
    .sup-wiz-pool-item:active { cursor: grabbing; }
    .sup-wiz-pool-item.sup-wiz-pool-dragging {
        opacity: 0.4; transform: scale(0.97);
    }
    .sup-wiz-pool-item.sup-wiz-pool-used {
        /* AA contrast: 0.42 dropped name+role text below 4.5:1.
           0.65 keeps the "this is dimmed" cue while staying legible. */
        opacity: 0.65; cursor: default;
        background: var(--st-bg); border-style: dashed;
        border-color: var(--sup-accent-mid);
    }
    .sup-wiz-pool-item.sup-wiz-pool-used:hover {
        border-color: var(--st-border); background: var(--st-bg);
    }
    .sup-wiz-pool-item img,
    .sup-wiz-pool-item .ag-card-fallback {
        width: 28px; height: 28px; border-radius: 50%;
        object-fit: cover; font-size: 11px; flex-shrink: 0;
    }
    .sup-wiz-pool-item-text { flex: 1; min-width: 0; }
    .sup-wiz-pool-item-name {
        font-size: 12px; font-weight: 600; color: var(--st-text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sup-wiz-pool-item-role {
        font-size: 10px; color: var(--st-text-muted);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sup-wiz-pool-empty {
        font-size: 11px; color: var(--st-text-muted);
        font-style: italic; padding: 12px; text-align: center;
    }

    /* ── Orchestration canvas ── */
    .sup-wiz-canvas {
        flex: 1; position: relative; overflow: hidden;
        background:
            radial-gradient(ellipse at center, var(--sup-accent-faint), transparent 65%),
            var(--st-card-bg);
        transition: background 0.2s;
    }
    .sup-wiz-canvas.sup-wiz-canvas-dropping {
        background:
            radial-gradient(ellipse at center, var(--sup-accent-glow), transparent 65%),
            var(--st-card-bg);
    }
    .sup-wiz-canvas-hint {
        position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
        font-size: 10px; color: var(--st-text-muted);
        text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    /* Canvas-empty sits BELOW the supervisor centre node, not behind
       it (was top:50% which placed it under the 110px centre and hid
       the icon). Position relative to the centre + a fixed offset. */
    .sup-wiz-canvas-empty {
        position: absolute; top: calc(50% + 80px); left: 50%;
        transform: translateX(-50%);
        text-align: center; pointer-events: none;
        color: var(--st-text-muted); font-size: 12px;
        max-width: 240px;
    }
    .sup-wiz-canvas-empty i {
        font-size: 22px; color: var(--sup-accent-strong);
        margin-bottom: 6px; display: block;
    }
    /* When the canvas is empty, soften the central supervisor node
       so the eye treats it as a placeholder, not a finished thing. */
    .sup-wiz-canvas.sup-wiz-canvas-empty-state .sup-wiz-supervisor-node {
        opacity: 0.55;
        box-shadow: 0 4px 14px var(--sup-accent-glow);
    }
    .sup-wiz-stage-svg {
        position: absolute; inset: 0; pointer-events: none;
    }
    .sup-wiz-stage-svg line {
        stroke: var(--sup-accent-strong); stroke-width: 1.5;
        stroke-dasharray: 4 4;
        animation: sup-wiz-line-flow 1.4s linear infinite;
    }
    @keyframes sup-wiz-line-flow {
        from { stroke-dashoffset: 0; }
        to   { stroke-dashoffset: -16; }
    }
    .sup-wiz-supervisor-node {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 110px; height: 110px; border-radius: 50%;
        background: linear-gradient(135deg, var(--sup-accent), var(--sup-accent-deep));
        color: #fff; display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        font-weight: 700; box-shadow: 0 8px 24px var(--sup-accent-shadow),
                                       inset 0 -3px 6px rgba(0,0,0,0.15);
        z-index: 2; border: 2.5px solid rgba(255,255,255,0.18);
        /* Strategy-specific layouts move the supervisor node off-centre
           — animate the position change so switching strategies feels
           like a layout flip, not a teleport. */
        transition: top 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
                    left 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
                    width 0.3s, height 0.3s;
    }
    /* Sequential: smaller centre node, anchored to the left edge.
       Chain reads left→right with arrows between consecutive SMEs. */
    .sup-wiz-canvas[data-layout="sequential"] .sup-wiz-supervisor-node {
        top: 50%; left: 90px;
        width: 80px; height: 80px;
    }
    /* Conditional: smaller centre, anchored to top, SMEs branch below. */
    .sup-wiz-canvas[data-layout="conditional"] .sup-wiz-supervisor-node {
        top: 70px; left: 50%;
        width: 90px; height: 90px;
    }
    .sup-wiz-supervisor-node .sup-wiz-sup-mark {
        font-size: 26px; line-height: 1;
    }
    .sup-wiz-supervisor-node .sup-wiz-sup-name {
        font-size: 10px; text-transform: uppercase;
        letter-spacing: 0.1em; opacity: 0.9; margin-top: 4px;
        max-width: 90px; overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sup-wiz-orbit-node {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 64px; display: flex; flex-direction: column;
        align-items: center; gap: 3px;
        z-index: 3;
        transition: top 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
                    left 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
        animation: sup-wiz-orbit-in 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
    }
    @keyframes sup-wiz-orbit-in {
        from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    .sup-wiz-orbit-node img,
    .sup-wiz-orbit-node .ag-card-fallback {
        width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
        border: 2.5px solid var(--sup-accent); background: var(--st-card-bg);
        box-shadow: 0 4px 10px rgba(0,0,0,0.25);
        font-size: 14px;
    }
    .sup-wiz-orbit-node .sup-wiz-orbit-name {
        font-size: 10px; color: var(--st-text); font-weight: 600;
        max-width: 80px; text-align: center;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        text-shadow: 0 1px 2px var(--st-card-bg);
    }
    .sup-wiz-orbit-remove {
        position: absolute; top: -4px; right: -4px;
        width: 18px; height: 18px; border-radius: 50%;
        background: var(--st-danger); color: #fff;
        border: 2px solid var(--st-card-bg); font-size: 9px;
        cursor: pointer; opacity: 0;
        display: flex; align-items: center; justify-content: center;
        transition: opacity 0.12s, transform 0.12s;
        padding: 0; line-height: 1;
    }
    /* Reveal the remove button on hover OR when keyboard-focused so
       keyboard-only users can actually use it (was opacity:0 with no
       focus selector — the X was tabbable but invisible). */
    /* Sequence-position badge — only shown when strategy=sequential.
       Lives next to the avatar so the order is glanceable. */
    .sup-wiz-orbit-order {
        position: absolute; top: -4px; left: -4px;
        width: 20px; height: 20px; border-radius: 50%;
        background: var(--sup-accent); color: #fff;
        border: 2px solid var(--st-card-bg);
        font-size: 10px; font-weight: 700;
        display: flex; align-items: center; justify-content: center;
        font-variant-numeric: tabular-nums;
    }
    .sup-wiz-orbit-reorderable {
        cursor: grab;
    }
    .sup-wiz-orbit-reorderable:active {
        cursor: grabbing;
    }
    .sup-wiz-orbit-reorder-dragging {
        opacity: 0.4;
    }
    .sup-wiz-orbit-reorder-target {
        outline: 3px dashed var(--sup-accent);
        outline-offset: 4px;
        border-radius: 50%;
    }
    /* Tap-friendly reorder controls for Sequential strategy. Drag is
       fine for mouse, but touch + keyboard need a click target. */
    .sup-wiz-orbit-step {
        position: absolute; bottom: -10px;
        width: 22px; height: 22px; border-radius: 50%;
        background: var(--st-card-bg); color: var(--sup-accent);
        border: 1px solid var(--sup-accent-mid);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; padding: 0;
        font-size: 10px; line-height: 1;
        opacity: 0; transition: opacity 0.15s;
    }
    .sup-wiz-orbit-step-prev { left: -8px; }
    .sup-wiz-orbit-step-next { right: -8px; }
    .sup-wiz-orbit-node:hover .sup-wiz-orbit-step,
    .sup-wiz-orbit-node:focus-within .sup-wiz-orbit-step,
    .sup-wiz-orbit-step:focus-visible { opacity: 1; }
    .sup-wiz-orbit-step:hover { background: var(--sup-accent); color: #fff; }
    .sup-wiz-orbit-step:disabled {
        opacity: 0; pointer-events: none;
    }

    .sup-wiz-orbit-node:hover .sup-wiz-orbit-remove,
    .sup-wiz-orbit-node:focus-within .sup-wiz-orbit-remove,
    .sup-wiz-orbit-remove:focus-visible { opacity: 1; }
    .sup-wiz-orbit-remove:hover { transform: scale(1.18); }
    .sup-wiz-orbit-remove:focus-visible {
        outline: 2px solid var(--sup-accent); outline-offset: 2px;
    }

    /* ── Bottom: collapsible base prompt ── */
    .sup-wiz-bottom {
        border-top: 1px solid var(--st-border);
        max-height: 200px; overflow-y: auto;
    }
    .sup-wiz-advanced-toggle {
        display: flex; gap: 8px; align-items: center;
        padding: 9px 20px; cursor: pointer; user-select: none;
        font-size: 11px; color: var(--st-text-muted);
        text-transform: uppercase; letter-spacing: 0.12em;
        font-weight: 600; background: var(--st-bg);
        border: 0; width: 100%; text-align: left;
        font-family: inherit;
    }
    .sup-wiz-advanced-toggle:hover { color: var(--st-text); }
    .sup-wiz-advanced-toggle i { transition: transform 0.15s; }
    .sup-wiz-advanced-toggle.sup-wiz-open i { transform: rotate(90deg); }
    .sup-wiz-advanced-body {
        padding: 12px 20px 14px;
    }
    .sup-wiz-advanced-body textarea {
        width: 100%; min-height: 100px; padding: 10px;
        background: var(--st-log-bg); color: var(--st-log-text);
        border: 1px solid var(--st-log-border); border-radius: 4px;
        font-family: ui-monospace, monospace; font-size: 12px;
        line-height: 1.5; outline: none; resize: vertical;
    }
    .sup-wiz-advanced-hint {
        font-size: 10px; color: var(--st-text-muted); margin-top: 6px;
        line-height: 1.5;
    }

    .sup-wiz-status {
        font-size: 11px; flex: 1; line-height: 1.5;
        color: var(--st-text-muted);
    }

    /* Prompt-preview tooltip — appears above the Create button on
       hover, shows the assembled system prompt fetched from the
       backend so the user can see exactly what Foundry will receive. */
    .sup-wiz-preview-tip {
        position: absolute; bottom: calc(100% + 8px); right: 0;
        width: min(640px, 86vw); max-height: 380px;
        background: var(--st-log-bg, #0f1117);
        color: var(--st-log-text, #d1d5db);
        border: 1px solid var(--st-border);
        border-radius: 6px;
        padding: 12px 14px;
        font-family: ui-monospace, 'SF Mono', monospace;
        font-size: 11px; line-height: 1.55;
        white-space: pre-wrap;
        overflow-y: auto;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        opacity: 0; pointer-events: none;
        transition: opacity 0.18s;
        z-index: 9002;
    }
    .sup-wiz-preview-tip.sup-wiz-preview-visible {
        opacity: 1;
    }
    .sup-wiz-preview-tip-head {
        font-family: 'Helvetica Neue', sans-serif;
        font-size: 9px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.18em;
        color: var(--sup-accent); margin-bottom: 8px;
        border-bottom: 1px solid var(--sup-accent-soft);
        padding-bottom: 6px;
    }
    .sup-wiz-preview-trigger {
        position: relative;  /* so tooltip can position relative to it */
    }

    /* The backdrop + modal use display:flex/block via their class
       rules, which tie on specificity with [hidden] and so override the
       browser's default [hidden]{display:none}. Force-hide explicitly. */
    .ag-create-sup-backdrop[hidden],
    .ag-create-sup-modal[hidden] { display: none !important; }
    .ag-card.ag-card-supervisor {
        /* Faint indigo wash on the card edge so the supervisor reads as
           a different *kind* of agent at a glance, not just a regular
           one with a badge. */
        border-color: rgba(99, 102, 241, 0.45);
    }
    .ag-card.ag-card-supervisor:hover {
        border-color: rgba(99, 102, 241, 0.85);
    }

    .ag-card.ag-card-inactive .ag-card-photo img {
        /* Subtle desaturation so an inactive persona reads as
           "available in catalog, not online" without being invisible. */
        filter: saturate(0.55) brightness(0.92);
    }

    .ag-empty {
        text-align: center; padding: 60px 20px;
        background: var(--st-card-bg);
        border: 1px dashed var(--st-border);
        border-radius: 6px;
        color: var(--st-text-muted);
        font-family: ui-monospace, monospace;
        font-size: 12px;
    }
    .ag-loading {
        padding: 40px; text-align: center;
        color: var(--st-text-muted);
        font-family: ui-monospace, monospace;
        font-size: 12px;
    }

    /* ─── Detail drawer (slide-in from right) ─────────────────── */
    .ag-drawer-backdrop {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 900;
        opacity: 0;
        transition: opacity 0.18s;
        pointer-events: none;
    }
    .ag-drawer-backdrop.ag-open {
        opacity: 1; pointer-events: auto;
    }
    .ag-drawer {
        position: fixed;
        top: 60px;  /* 56px topbar + 4px andon strip */
        right: 0; bottom: 0;
        /* Drawer width grew from 540px → 760px so the Configure tab's
           seven tabs and its 140px-label / 1fr-input grid actually fit
           on screen. Below 1100px viewport we fall back to 92vw so the
           drawer doesn't crowd the page. */
        width: min(760px, 92vw);
        background: var(--st-bg);
        border-left: 1px solid var(--st-border);
        z-index: 901;
        transform: translateX(100%);
        transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
        display: flex; flex-direction: column;
        box-shadow: -16px 0 40px rgba(0,0,0,0.25);
    }
    .ag-drawer.ag-open { transform: translateX(0); }

    .ag-drawer-hero {
        padding: 24px 28px 18px;
        border-bottom: 1px solid var(--st-border);
        display: flex; gap: 18px; align-items: center;
        background: linear-gradient(180deg, var(--st-card-bg), var(--st-bg));
        position: relative;
    }
    .ag-drawer-close {
        position: absolute; top: 14px; right: 14px;
        background: transparent; border: 0;
        width: 32px; height: 32px; border-radius: 4px;
        color: var(--st-text-muted); cursor: pointer;
        font-size: 14px;
    }
    .ag-drawer-close:hover {
        background: var(--st-surface-2);
        color: var(--st-text);
    }
    .ag-drawer-photo {
        width: 96px; height: 96px;
        border-radius: 6px; overflow: hidden;
        flex: 0 0 auto;
        background: linear-gradient(135deg, var(--st-surface), var(--st-surface-2));
        position: relative;
        border: 1px solid var(--st-border);
    }
    .ag-drawer-photo img {
        position: absolute; inset: 0;
        width: 100%; height: 100%; object-fit: cover;
    }
    .ag-drawer-photo .ag-card-fallback {
        font-size: 36px;
    }
    .ag-drawer-text { flex: 1; min-width: 0; }
    .ag-drawer-text h2 {
        font-family: 'Montserrat', sans-serif;
        font-size: 22px; font-weight: 700; margin: 0 0 4px;
        letter-spacing: -0.01em;
    }
    .ag-drawer-role {
        color: var(--st-text-muted);
        font-style: italic;
        font-size: 13px;
        margin-bottom: 10px;
    }
    .ag-drawer-id {
        font-family: ui-monospace, monospace;
        font-size: 10px;
        color: var(--st-text-muted);
        background: var(--st-surface-2);
        padding: 2px 7px; border-radius: 3px;
        display: inline-block;
    }
    .ag-drawer-tabs {
        display: flex; gap: 0;
        border-bottom: 1px solid var(--st-border);
        padding: 0 28px;
        background: var(--st-card-bg);
        /* Eight tabs (supervisors also show Connected Agents) overflow the
           760px drawer. The previous fix was overflow-x:auto with a HIDDEN
           scrollbar — which made the last tab (Publish) invisible and
           undiscoverable rather than scrollable-to. Wrap instead: every
           tab is always visible; a second row appears when needed. */
        flex-wrap: wrap;
    }
    .ag-drawer-tab { flex: 0 0 auto; white-space: nowrap; }
    .ag-drawer-tab {
        background: transparent; border: 0;
        padding: 12px 13px;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px; font-weight: 600;
        color: var(--st-text-muted);
        cursor: pointer;
        position: relative;
        letter-spacing: 0.04em;
    }
    .ag-drawer-tab:hover { color: var(--st-text); }
    .ag-drawer-tab.ag-tab-active { color: var(--st-text); }
    .ag-drawer-tab.ag-tab-active::after {
        content: ""; position: absolute;
        left: 16px; right: 16px; bottom: -1px;
        height: 2px; background: var(--st-primary);
    }
    .ag-drawer-body {
        flex: 1; overflow-y: auto;
        padding: 20px 28px;
    }
    .ag-drawer-body h4 {
        font-family: 'Montserrat'; font-size: 11px; font-weight: 700;
        letter-spacing: 0.18em; text-transform: uppercase;
        color: var(--st-text-muted); margin: 18px 0 8px;
    }
    .ag-drawer-body h4:first-child { margin-top: 0; }
    .ag-drawer-body p {
        margin: 0 0 12px; line-height: 1.6;
        font-size: 13px; color: var(--st-text);
    }
    .ag-drawer-body pre {
        background: var(--st-card-bg);
        border: 1px solid var(--st-border);
        border-radius: 4px;
        padding: 12px 14px;
        font-family: ui-monospace, 'SF Mono', monospace;
        font-size: 11px; line-height: 1.5;
        color: var(--st-text);
        overflow-x: auto;
        white-space: pre-wrap;
        max-height: 360px; overflow-y: auto;
    }
    .ag-drawer-version {
        display: flex; align-items: center; gap: 12px;
        padding: 8px 0;
        border-bottom: 1px solid var(--st-border);
        font-size: 12px;
    }
    .ag-drawer-version:last-child { border-bottom: 0; }
    .ag-drawer-version-num {
        font-family: ui-monospace, monospace;
        font-size: 11px;
        background: var(--st-surface-2);
        padding: 2px 7px; border-radius: 3px;
        flex: 0 0 auto;
        color: var(--st-text);
    }
    .ag-drawer-version-meta {
        flex: 1;
        font-family: ui-monospace, monospace;
        font-size: 10px;
        color: var(--st-text-muted);
    }
    .ag-drawer-actions {
        padding: 16px 28px;
        border-top: 1px solid var(--st-border);
        display: flex; gap: 8px;
        background: var(--st-card-bg);
    }
    .ag-drawer-btn {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 18px;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px; font-weight: 600;
        border-radius: 5px;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid var(--st-border);
        background: var(--st-card-bg); color: var(--st-text);
        transition: all 0.15s;
    }
    .ag-drawer-btn:hover { border-color: var(--st-primary); }
    .ag-drawer-btn-primary {
        background: var(--st-primary); color: #fff;
        border-color: var(--st-primary);
        flex: 1; justify-content: center;
    }
    .ag-drawer-btn-primary:hover {
        background: var(--st-primary-hover); border-color: var(--st-primary-hover);
    }
    .ag-drawer-btn-danger {
        color: var(--st-danger);
        border-color: var(--st-danger);
        background: var(--st-card-bg);
    }
    .ag-drawer-btn-danger:hover {
        background: var(--st-danger);
        color: #fff;
        border-color: var(--st-danger);
    }
    .ag-drawer-btn-danger:disabled,
    .ag-drawer-btn-danger[aria-disabled="true"] {
        opacity: 0.45; cursor: not-allowed;
    }

    /* ── Configure tab ───────────────────────────────────────────── */
    .ag-cfg-section {
        margin-bottom: 22px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--st-border);
    }
    .ag-cfg-section:last-of-type { border-bottom: 0; }
    .ag-cfg-section h5 {
        font-family: 'Montserrat'; font-size: 11px; font-weight: 700;
        letter-spacing: 0.06em; text-transform: uppercase;
        color: var(--st-text-muted);
        margin: 0 0 10px;
    }
    .ag-cfg-row {
        display: grid; grid-template-columns: 140px 1fr;
        gap: 12px; align-items: center;
        padding: 6px 0;
    }
    @media (max-width: 760px) { .ag-cfg-row { grid-template-columns: 1fr; } }
    .ag-cfg-row label {
        font-size: 11px; font-weight: 600;
        color: var(--st-text-muted);
    }
    .ag-cfg-row input[type="text"],
    .ag-cfg-row input[type="password"],
    .ag-cfg-row select {
        padding: 7px 10px;
        background: var(--st-bg); color: var(--st-text);
        border: 1px solid var(--st-border); border-radius: 4px;
        font-size: 12px; font-family: ui-monospace, monospace;
        outline: none; width: 100%;
    }
    .ag-cfg-row input:focus, .ag-cfg-row select:focus {
        border-color: var(--st-primary);
        box-shadow: 0 0 0 3px var(--st-primary-ring);
    }
    .ag-cfg-toggle {
        display: inline-flex; align-items: center; gap: 8px;
        cursor: pointer; user-select: none;
        font-size: 12px;
    }
    .ag-cfg-toggle input { width: 16px; height: 16px; accent-color: var(--st-primary); }
    .ag-cfg-hint {
        font-size: 10px; color: var(--st-text-muted);
        line-height: 1.5; margin-top: 4px; grid-column: 2;
    }
    @media (max-width: 760px) { .ag-cfg-hint { grid-column: 1; } }
    .ag-cfg-pill {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 3px 9px; border-radius: 999px;
        font-family: 'Montserrat'; font-size: 10px; font-weight: 700;
        letter-spacing: 0.04em; text-transform: uppercase;
        border: 1px solid var(--st-border); color: var(--st-text-muted);
    }
    .ag-cfg-pill.ag-cfg-pill-ok { background: rgba(34,197,94,0.12); color: var(--st-success); border-color: var(--st-success); }
    .ag-cfg-pill.ag-cfg-pill-warn { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: #f59e0b; }
    .ag-cfg-pill.ag-cfg-pill-err  { background: rgba(239,68,68,0.12); color: var(--st-danger); border-color: var(--st-danger); }
    .ag-cfg-key-row { display: flex; gap: 6px; align-items: center; }
    .ag-cfg-eye {
        background: var(--st-card-bg); color: var(--st-text);
        border: 1px solid var(--st-border); border-radius: 4px;
        padding: 6px 10px; cursor: pointer;
    }
    .ag-cfg-eye:hover { border-color: var(--st-primary); }
    .ag-cfg-status {
        font-size: 11px; color: var(--st-text-muted);
        font-family: ui-monospace, monospace;
    }
    .ag-cfg-status.ag-cfg-status-ok    { color: var(--st-success); }
    .ag-cfg-status.ag-cfg-status-error { color: var(--st-danger); }

    /* ── Welcome tab ─────────────────────────────────────────────── */
    .ag-wl-textarea {
        width: 100%; min-height: 90px; padding: 10px 12px;
        background: var(--st-bg); color: var(--st-text);
        border: 1px solid var(--st-border); border-radius: 4px;
        font-size: 13px; line-height: 1.5; outline: none; resize: vertical;
        font-family: inherit;
    }
    .ag-wl-textarea:focus {
        border-color: var(--st-primary);
        box-shadow: 0 0 0 3px var(--st-primary-ring);
    }
    .ag-wl-suggestions { display: flex; flex-direction: column; gap: 8px; }
    .ag-wl-sugg-row {
        display: flex; gap: 6px; align-items: center;
    }
    .ag-wl-sugg-row input {
        flex: 1;
        padding: 8px 10px;
        background: var(--st-bg); color: var(--st-text);
        border: 1px solid var(--st-border); border-radius: 4px;
        font-size: 12px; outline: none; font-family: inherit;
    }
    .ag-wl-sugg-row input:focus {
        border-color: var(--st-primary);
        box-shadow: 0 0 0 3px var(--st-primary-ring);
    }
    .ag-wl-sugg-row .ag-wl-sugg-num {
        font-family: ui-monospace, monospace; font-size: 11px;
        color: var(--st-text-muted);
        min-width: 16px;
    }
    .ag-wl-sugg-remove {
        background: var(--st-card-bg); color: var(--st-text-muted);
        border: 1px solid var(--st-border); border-radius: 4px;
        padding: 6px 10px; cursor: pointer;
    }
    .ag-wl-sugg-remove:hover {
        color: var(--st-danger); border-color: var(--st-danger);
    }
    .ag-wl-add {
        align-self: flex-start;
        background: transparent; color: var(--st-primary);
        border: 1px dashed var(--st-primary); border-radius: 4px;
        padding: 6px 12px; font-size: 12px; cursor: pointer;
        font-family: inherit;
    }
    .ag-wl-add:hover { background: var(--st-primary-ring); }
    .ag-wl-add:disabled { opacity: 0.4; cursor: not-allowed; }

    /* ── About tab — identity editor + avatar manager ───────────── */
    .ag-id-row {
        display: grid; grid-template-columns: 140px 1fr;
        gap: 12px; align-items: center;
        padding: 6px 0;
    }
    @media (max-width: 760px) { .ag-id-row { grid-template-columns: 1fr; } }
    .ag-id-row label {
        font-size: 11px; font-weight: 600;
        color: var(--st-text-muted);
    }
    .ag-id-row input[type="text"],
    .ag-id-row textarea {
        padding: 8px 10px;
        background: var(--st-bg); color: var(--st-text);
        border: 1px solid var(--st-border); border-radius: 4px;
        font-size: 13px; outline: none; width: 100%;
        font-family: inherit;
    }
    .ag-id-row textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
    .ag-id-row input:focus, .ag-id-row textarea:focus {
        border-color: var(--st-primary);
        box-shadow: 0 0 0 3px var(--st-primary-ring);
    }
    .ag-id-readonly {
        font-family: ui-monospace, monospace;
        font-size: 12px; color: var(--st-text);
        padding: 7px 0;
    }
    .ag-avatar-block {
        display: flex; gap: 14px; align-items: flex-start;
    }
    .ag-avatar-current {
        /* `position: relative` is REQUIRED — `.ag-card-fallback` inside
           uses `position: absolute; inset: 0;` and without a positioned
           ancestor the fallback would anchor to the viewport, covering
           the entire drawer and stealing every click. Bug surfaced when
           supervisor agents (created via wizard, no avatar) hit the
           fallback path; regular agents with `image_path` rendered
           `<img>` instead and side-stepped the issue. */
        position: relative;
        width: 80px; height: 80px; border-radius: 8px;
        background: var(--st-card-bg);
        border: 1px solid var(--st-border);
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
        flex: 0 0 auto;
    }
    .ag-avatar-current img { width: 100%; height: 100%; object-fit: cover; }
    .ag-avatar-current .ag-card-fallback {
        font-size: 24px;
        background: transparent;
    }
    .ag-avatar-actions {
        display: flex; flex-direction: column; gap: 6px; flex: 1;
    }
    .ag-avatar-actions button {
        align-self: flex-start;
        background: var(--st-card-bg); color: var(--st-text);
        border: 1px solid var(--st-border); border-radius: 4px;
        padding: 7px 12px; font-size: 12px; cursor: pointer;
        font-family: inherit;
    }
    .ag-avatar-actions button:hover { border-color: var(--st-primary); }
    .ag-avatar-library {
        margin-top: 12px;
        display: none;
        max-height: 280px; overflow-y: auto;
        padding: 12px;
        background: var(--st-bg);
        border: 1px solid var(--st-border); border-radius: 4px;
    }
    .ag-avatar-library.ag-open { display: block; }
    .ag-avatar-library-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 8px;
    }
    .ag-avatar-lib-tile {
        aspect-ratio: 1;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        background: var(--st-card-bg);
        border: 2px solid transparent;
        padding: 0;
        transition: border-color 0.12s, transform 0.12s;
    }
    .ag-avatar-lib-tile img { width: 100%; height: 100%; object-fit: cover; }
    .ag-avatar-lib-tile:hover {
        border-color: var(--st-primary);
        transform: scale(1.05);
    }
    .ag-avatar-lib-tile.ag-avatar-lib-current {
        border-color: var(--st-success);
    }

    @media (max-width: 540px) {
        .ag-drawer { width: 100vw; }
    }

/* ── Quality tab (agent evals, 46.39) ─────────────────────────────── */
.ag-q-section { margin-top: 14px; }
.ag-q-sec-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--st-text-muted); margin-bottom: 6px; }
.ag-q-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--st-border); }
.ag-q-runrow { cursor: pointer; }
.ag-q-name { flex: 1; font-size: 13px; color: var(--st-text); }
.ag-q-score { font-weight: 800; font-variant-numeric: tabular-nums; }
.ag-q-muted { font-size: 11px; color: var(--st-text-muted); }
.ag-q-chip { font-size: 10px; padding: 2px 7px; border-radius: 9px; background: rgba(128,128,128,.15); color: var(--st-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.ag-q-chip.is-baseline { background: rgba(30,60,110,.18); }
.ag-q-chip.is-pass { background: rgba(47,150,80,.15); color: var(--st-success); }
.ag-q-chip.is-fail, .ag-q-chip.is-error { background: rgba(201,80,47,.15); color: #c9502f; }
.ag-q-chip.is-running, .ag-q-chip.is-stale { background: rgba(201,150,47,.15); color: #b5841f; }
.ag-q-case { border-left: 3px solid var(--st-border); padding: 6px 10px; margin: 6px 0; }
.ag-q-case.is-pass { border-left-color: rgba(47,150,80,.6); }
.ag-q-case.is-fail, .ag-q-case.is-error { border-left-color: rgba(201,80,47,.6); }
.ag-q-case-head { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.ag-q-notes { font-size: 12px; color: var(--st-text-muted); margin-top: 3px; }
.ag-q-out { font-size: 11px; white-space: pre-wrap; max-height: 220px; overflow: auto; background: rgba(128,128,128,.08); padding: 8px; border-radius: 6px; }

/* ── Quality tab P4 (candidate trials, compare, export, pre-publish) ── */
.ag-q-chip.is-candidate { background: rgba(100,60,180,.15); color: #7c4fd0; text-transform: none; }
.ag-q-candidate-bar, .ag-q-compare-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ag-q-candidate-bar input[type="text"] { flex: 1; min-width: 180px; padding: 6px 9px; font-size: 12px; border: 1px solid var(--st-border); border-radius: 5px; background: var(--st-bg); color: var(--st-text); }
.ag-q-candidate-bar select, .ag-q-compare-bar select { padding: 6px 8px; font-size: 12px; border: 1px solid var(--st-border); border-radius: 5px; background: var(--st-bg); color: var(--st-text); max-width: 240px; }
.ag-q-export { display: inline-flex; gap: 6px; margin-left: auto; text-transform: none; letter-spacing: normal; }
.ag-q-prepub { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(201,150,47,.4); border-left: 3px solid #b5841f; border-radius: 6px; background: rgba(201,150,47,.08); font-size: 12.5px; }
.ag-q-prepub i { color: #b5841f; }
.ag-q-prepub span { flex: 1; }