/* Border-box everywhere (matches the EXE). Without this, width:100% + padding
   elements (table tiles, .field inputs, context-menu items) compute too wide and
   overflow their container — the cause of the truncated table-tile text + stray
   horizontal scrollbar. */
* { box-sizing: border-box; }

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Global safety net: keep the unhandled-error bar hidden by default,
   independent of scoped-CSS. Blazor's JS sets an inline display:block to
   reveal it on a genuine error, which still overrides this rule. */
#blazor-error-ui {
    display: none;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== RaceTo3 web chrome — ported from the EXE app.css (W8) so the
   tournament-management UI (tabs, prizes, money inputs) is themed consistently.
   Theme custom properties (--panel, --text, …) come from the shared
   brackets.css :root. Keep visually in sync with the EXE app.css. ===== */

/* Base theme: the dark background + light default text, matching the EXE. The
   web had no body color rule, so any element that didn't set its own colour
   (e.g. prize amounts) fell back to black on the dark panels. (--bg/--text come
   from the shared brackets.css :root.) */
body { background: var(--bg); color: var(--text); }

/* Page layout: breathing room around content on every page. .content is
   intentionally NOT width-capped so the bracket chart can use the full width;
   instead, data-entry forms cap their own width (below) so inputs don't stretch
   edge-to-edge. */
.content { padding: 1.25rem 1.5rem; }

.auth-form { max-width: 480px; }
.auth-form fieldset {
    border: 1px solid var(--border); border-radius: 6px;
    padding: 0.75rem 1rem; margin: 0 0 1rem;
}
.auth-form legend { color: var(--muted); padding: 0 0.4rem; }
.auth-form .checkbox {
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: normal; padding: 0.15rem 0;
}
.auth-form .checkbox input { width: auto; }

.muted { color: var(--muted); font-size: 0.9rem; }
.hint { color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; }
.hint .hint-warn { color: #f59e0b; }
.error, .form-error { color: var(--danger); margin: 0.5rem 0; }
.success, .form-ok { color: var(--success); margin: 0.5rem 0; }

.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: 0.35rem; font-weight: 500; }
.field input, .field select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font: inherit;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); }

button {
    cursor: pointer;
    padding: 0.55rem 1.2rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
    margin-right: 0.5rem;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); }

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
}
.modal-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

/* Tabs */
.tab-strip { display: flex; gap: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tab {
    padding: 0.55rem 1.2rem; margin: 0;
    background: transparent; border: 1px solid transparent; border-bottom: none;
    color: var(--muted); border-radius: 6px 6px 0 0; margin-bottom: -1px;
}
.tab:hover:not(.selected) { color: var(--text); }
.tab.selected { background: var(--panel); border-color: var(--border); color: var(--text); font-weight: 600; }

/* Prize tab + tables */
.prize-card { max-width: 600px; }
.prize-controls { display: flex; gap: 0.75rem; align-items: flex-end; margin-bottom: 1rem; }
.prize-controls .field { margin: 0; }
.prize-controls .field-narrow { flex: 0 0 160px; }
.prize-controls .field-tiny { flex: 0 0 130px; }
.prize-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.prize-table th, .prize-table td { padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--border); }
.prize-table th { color: var(--muted); font-weight: 600; }
.prize-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.prize-table input { width: 100%; text-align: right; }
.prize-table .prize-sum-row { color: var(--muted); font-weight: 600; }
.prize-table .prize-sum-row td { border-bottom: none; padding-top: 0.6rem; }

/* MoneyInput */
.money-input { display: flex; align-items: stretch; }
.money-input .money-prefix {
    display: inline-flex; align-items: center; padding: 0 0.7rem;
    background: var(--panel-2); color: var(--muted);
    border: 1px solid var(--border); border-right: none; border-radius: 4px 0 0 4px;
}
.money-input input { flex: 1; border-radius: 0 !important; border-right: none !important; text-align: right; }
.money-input .money-stepper {
    display: flex; flex-direction: column; background: var(--panel-2);
    border: 1px solid var(--border); border-radius: 0 4px 4px 0; overflow: hidden;
}
.money-input .money-step {
    flex: 1; min-width: 1.8rem; padding: 0 0.4rem; border: none; background: transparent;
    color: var(--muted); font-size: 0.65rem; line-height: 1; margin: 0; border-radius: 0; cursor: pointer;
}
.money-input .money-step:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.money-input .money-step + .money-step { border-top: 1px solid var(--border); }
.money-input.money-input-narrow { width: 110px; }
.money-input.money-input-narrow input { min-width: 0; }

/* Ready-to-play list (bracket tab) */
.ready-matches { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.ready-matches li { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
.ready-matches .match-label { color: var(--muted); min-width: 5ch; font-variant-numeric: tabular-nums; }
.ready-matches .vs { color: var(--muted); }

/* Pre-start roster (W9) — ported from EXE app.css */
.roster-panel { margin-bottom: 1rem; }
.roster-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.roster-header h2 { margin: 0; }
.roster-totals { display: flex; gap: 0.75rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.roster-toggle {
    background: transparent; border: 1px solid var(--border); border-radius: 5px;
    color: var(--muted); padding: 0.2rem 0.6rem; font-size: 0.85rem; cursor: pointer;
}
.roster-toggle:hover { color: var(--text); border-color: var(--text); }
.roster-list {
    list-style: none; padding: 0; margin: 0 0 0.75rem;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.2rem 0.75rem;
}
.roster-list li { padding: 0.3rem 0; }
.roster-list label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: normal; margin: 0; }
.roster-list .roster-name { flex: 1; }
.roster-list .roster-amount { font-variant-numeric: tabular-nums; }
.roster-list li.unpaid .roster-name { color: var(--muted); }
.roster-list li.paid .roster-name { color: var(--text); }
.roster-override {
    display: flex; align-items: center; gap: 0.5rem;
    color: var(--danger); font-size: 0.9rem; margin: 0; cursor: pointer;
}
.roster-override input[type="checkbox"] { width: auto; }

/* ===== Tables management + seat context menu + prize side panel (W10) =====
   Ported/adapted from the EXE app.css. The web chart host uses a fixed 70vh
   (vs the EXE's viewport-minus-chrome) and there is no minimap column. */

.bracket-wrap { display: flex; align-items: flex-start; gap: 28px; }
.web-chart-host {
    position: relative; flex: 1 1 auto; min-width: 0;
    height: 70vh; background: #1a1d23;
    border: 1px solid var(--border); border-radius: 6px;
}

/* Right column: prize-pool panel */
.board-right { flex: 0 0 auto; width: 200px; align-self: flex-start; }
.prize-side-panel {
    width: 100%; background: var(--panel); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.8rem 0.9rem; font-size: 0.85rem;
}
.prize-side-panel h3 { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--text); }
.prize-breakdown {
    display: grid; grid-template-columns: max-content 1fr;
    column-gap: 0.6rem; row-gap: 0.2rem; margin: 0 0 0.6rem; font-variant-numeric: tabular-nums;
}
.prize-breakdown dt { color: var(--muted); font-weight: 500; }
.prize-breakdown dd { margin: 0; text-align: right; }
.prize-side-tiers { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prize-side-tiers td { padding: 0.2rem 0; border-bottom: 1px solid var(--border); }
.prize-side-tiers tr:last-child td { border-bottom: none; }
.prize-side-tiers td.num { text-align: right; white-space: nowrap; }
.prize-side-tiers td.po-place { white-space: nowrap; padding-right: 0.4rem; color: var(--muted); }
.prize-side-tiers td.po-name {
    width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; padding-right: 0.4rem; color: var(--text);
}

/* Left tables panel */
.table-side-panel {
    flex: 0 0 auto; width: 180px; align-self: flex-start;
    display: flex; flex-direction: column; max-height: 70vh;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.8rem 0.9rem; font-size: 0.85rem;
}
.table-side-panel h3 { flex: 0 0 auto; margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--text); }
.table-tiles { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; }
.table-tile {
    display: block; width: 100%; text-align: left;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px;
    padding: 0.28rem 0.45rem; margin: 0; color: var(--text); cursor: pointer; font: inherit; user-select: none;
}
.table-tile:hover { border-color: var(--accent); }
.table-tile.occupied { border-left: 3px solid var(--success); }
.table-tile.empty { border-left: 3px solid var(--accent); }
.table-tile.inactive { opacity: 0.55; border-left: 3px solid var(--muted); }
.table-tile.colored { border-left-color: var(--tile-color); }
.table-tile.colored .table-num { color: var(--tile-color); }
.table-tile-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.1rem; }
.table-tile .table-num { font-weight: 600; font-size: 0.82rem; }
.table-tile .table-state { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px; }
.table-tile .table-match { line-height: 1.1; font-size: 0.78rem; }
.table-tile .table-match .vs { font-size: 0.6rem; margin: 0; }
.table-tile .table-empty { font-size: 0.8rem; padding: 0.2rem 0; }
.table-tile .table-remove {
    background: transparent; border: none; color: var(--muted);
    padding: 0 0.2rem; margin: 0 0 0 0.3rem; font-size: 0.95rem; line-height: 1; cursor: pointer; border-radius: 3px;
}
.table-tile .table-remove:hover { color: var(--danger); background: rgba(255, 255, 255, 0.08); }
.table-add {
    flex: 0 0 auto; width: 100%; margin: 0.5rem 0 0; padding: 0.4rem 0.55rem;
    background: var(--panel-2); border: 1px dashed var(--border); border-radius: 4px;
    color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.table-add:hover { color: var(--text); border-color: var(--accent); }

/* Seat context menu (right-click on a chart cell) */
.ctx-menu-backdrop { position: fixed; inset: 0; z-index: 90; }
.ctx-menu {
    position: fixed; z-index: 91; min-width: 280px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
    padding: 0.25rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.ctx-menu-header {
    font-family: monospace; font-size: 0.8rem; color: var(--muted);
    padding: 0.25rem 0.55rem 0.4rem; border-bottom: 1px solid var(--border); margin-bottom: 0.25rem;
}
.ctx-menu-item {
    display: block; width: 100%; text-align: left; padding: 0.45rem 0.7rem; margin: 0;
    background: transparent; border: none; color: var(--text); border-radius: 3px; font: inherit; cursor: pointer;
}
.ctx-menu-item:hover { background: var(--panel-2); }
.ctx-menu-item strong { color: var(--accent); font-weight: 600; }
.ctx-menu-sep { height: 1px; background: var(--border); margin: 0.25rem 0; }
.ctx-menu-cancel { color: var(--muted); }
.ctx-menu-info { font-size: 0.8rem; color: var(--muted); padding: 0.3rem 0.7rem; font-style: italic; }

/* ===== W11: walk-back bar, modals, substitutions, victory overlay =====
   Ported from the EXE app.css. (.modal-actions is already defined above.) */

.walkbar {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; margin-bottom: 0.75rem;
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
}
.walkbar button { padding: 0.3rem 0.7rem; margin: 0; font-family: monospace; font-size: 1rem; }
.walkbar-label { font-variant-numeric: tabular-nums; color: var(--muted); margin: 0 0.5rem; min-width: 12ch; }
.walkbar-history-banner { margin-left: auto; color: #f59e0b; font-size: 0.85rem; }

/* Modals */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal {
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 1.25rem; min-width: 340px; max-width: 480px;
}
.modal h3 { margin: 0 0 1rem 0; font-size: 1.1rem; }

/* Player table (used by the substitutions seat picker) */
.player-table {
    width: 100%; border-collapse: collapse;
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.player-table th, .player-table td {
    text-align: left; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--border);
}
.player-table th { font-weight: 600; color: var(--muted); background: var(--panel-2); }
.player-table tr:last-child td { border-bottom: none; }

/* Substitutions modal */
.sub-modal { min-width: 640px; max-width: 820px; }
.sub-mode-switch {
    display: flex; gap: 1.5rem; margin: 0.5rem 0 1rem;
    padding: 0.5rem 0.75rem; background: var(--panel-2); border-radius: 5px;
}
.sub-mode-switch label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; user-select: none; }
.sub-content { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
.sub-list { max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 5px; }
.seat-picker { width: 100%; margin: 0; border: none; border-radius: 0; }
.seat-picker thead th { position: sticky; top: 0; background: var(--panel-2); z-index: 1; }
.seat-picker .seat-row { cursor: pointer; }
.seat-picker .seat-row:hover td { background: var(--panel-2); }
.seat-picker .seat-row.selected td { background: rgba(79, 138, 255, 0.18); color: var(--text); font-weight: 600; }
.seat-picker .occupant { color: var(--text); }
.sub-form .field { margin-bottom: 0.85rem; }
.sub-form select {
    width: 100%; padding: 0.4rem; background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px; font: inherit;
}

/* Victory overlay */
.victory-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7);
    display: flex; align-items: center; justify-content: center; z-index: 200;
    cursor: pointer; animation: victory-fade-in 400ms ease-out forwards;
}
@keyframes victory-fade-in { from { opacity: 0; } to { opacity: 1; } }
.victory-panel {
    background: linear-gradient(135deg, #4c1d95 0%, #1e3a8a 100%);
    border: 2px solid #facc15; border-radius: 14px; padding: 2.5rem 4rem;
    text-align: center; cursor: default;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(250, 204, 21, 0.15);
    animation: victory-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes victory-pop {
    0%   { transform: scale(0.4) rotate(-6deg); opacity: 0; }
    60%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.victory-eyebrow { color: #facc15; letter-spacing: 4px; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.4rem; }
.victory-name {
    color: #fff; font-size: 3rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem;
    text-shadow: 0 2px 12px rgba(250, 204, 21, 0.4);
    animation: victory-tada 1.2s ease-in-out 700ms infinite alternate;
}
@keyframes victory-tada {
    0%   { transform: scale(1)    rotate(0deg); }
    25%  { transform: scale(1.04) rotate(-1.5deg); }
    50%  { transform: scale(1.06) rotate(1.5deg); }
    100% { transform: scale(1.02) rotate(0deg); }
}
.victory-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti {
    position: absolute; top: -20px; width: 10px; height: 14px; opacity: 0;
    animation: confetti-fall linear forwards;
}
.confetti.circle { width: 10px; height: 10px; border-radius: 50%; }
@keyframes confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
    100% { transform: translateY(110vh)  rotate(var(--end-rotate, 360deg)); opacity: 0.4; }
}

/* ===== Create-tournament single-click player picker (ported from the EXE wizard) ===== */
.newt-form { max-width: 900px; }
.newt-settings { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.add-player-row { display: flex; gap: 0.5rem; }
.add-player-row input { flex: 1; }
.picker-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.picker-column {
    display: flex; flex-direction: column; background: var(--panel-2);
    border: 1px solid var(--border); border-radius: 6px; min-height: 360px; max-height: 480px;
}
.picker-column input {
    width: 100%; padding: 0.45rem 0.6rem; background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px; font: inherit;
}
.picker-header {
    display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.9rem;
}
.picker-header-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; }
.picker-need { margin: 0; font-weight: 400; font-size: 0.8rem; white-space: nowrap; }
.picker-controls {
    padding: 0.5rem 0.55rem 0.4rem; border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 0.4rem;
}
.picker-search { width: 100%; }
.picker-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
.picker-item {
    display: flex; align-items: center; padding: 0.35rem 0.7rem;
    border-bottom: 1px solid var(--border); cursor: pointer; user-select: none;
}
.picker-item:last-child { border-bottom: none; }
.picker-item:hover { background: var(--panel); }
.picker-item .picker-name { flex: 1; }
.picker-item .picker-action { font-size: 0.85rem; opacity: 0; transition: opacity 0.1s; }
.picker-item:hover .picker-action { opacity: 1; }
.picker-item-selected .picker-deselect { display: inline-flex; align-items: center; gap: 0.4rem; flex: 1; cursor: pointer; }
.picker-item-selected .picker-action-left { font-size: 0.85rem; opacity: 0; transition: opacity 0.1s; }
.picker-item-selected:hover .picker-action-left { opacity: 1; }
.picker-empty { padding: 0.6rem 0.75rem; font-size: 0.9rem; font-style: italic; }