/* ============================================================
 * CS-God Web Console — stylesheet
 *
 * Design tokens at top, then layout shell (sidebar + main),
 * then components (tables, cards, buttons, …), then page-
 * specific overrides for /farm and /profiles.
 * ============================================================ */

:root {
    /* Background scale (darkest → lightest). */
    --bg-0: #0b0b13;          /* page bg */
    --bg-1: #11111b;          /* cards / sidebar */
    --bg-2: #181824;          /* table headers / hover */
    --bg-3: #20202e;          /* inputs / buttons */
    --bg-4: #2a2a3c;          /* button hover */
    --border-1: #20202e;
    --border-2: #2a2a3c;

    /* Text. */
    --fg-0: #e8e8f0;          /* primary */
    --fg-1: #c8c8d8;          /* secondary */
    --fg-2: #8a8aa3;          /* muted */
    --fg-3: #5a5a72;          /* dim / placeholder */

    /* Accents. */
    --accent: #c78cff;        /* primary purple */
    --accent-dim: #8b5cb8;
    --accent-glow: rgba(199, 140, 255, 0.15);
    --accent-2: #6accff;      /* informational blue */
    --accent-2-dim: #4a8cb8;

    /* Status. */
    --green:   #6cf08c;
    --green-d: #1d4d2a;
    --amber:   #f0c060;
    --amber-d: #4d3d10;
    --red:     #f08060;
    --red-d:   #4d2a1d;

    /* Shape. */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;

    /* Type. */
    --font-sans: -apple-system, BlinkMacSystemFont, "Inter",
                 "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Consolas, "JetBrains Mono",
                 monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--fg-0);
    background: var(--bg-0);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-3);
    color: var(--green);
    padding: 1px 6px;
    border-radius: var(--r-sm);
}

.muted, .subtitle { color: var(--fg-2); font-size: 12px; }
.dim { color: var(--fg-3); }

/* ───────────── Layout shell ─────────────────────────────────── */

body.app-body {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--bg-1);
    border-right: 1px solid var(--border-1);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar-brand {
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--border-1);
}
.brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fg-0);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.brand-link:hover { text-decoration: none; color: var(--accent); }
.brand-mark {
    font-size: 22px;
    color: var(--accent);
    line-height: 1;
    text-shadow: 0 0 16px var(--accent-glow);
}
.brand-sub {
    margin: 4px 0 0 32px;
    font-size: 10px;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
/* App version + git hash readout. Sits just under "Server console" in
   the sidebar brand, monospaced so the hash stays aligned. Mirrors the
   launcher's title bar (`v1.7.2 (3ed7a96)`) so operators can tell which
   build a VM is running without SSHing in. */
.brand-version {
    margin: 2px 0 0 32px;
    font-size: 10px;
    color: var(--fg-4, var(--fg-3));
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    letter-spacing: 0.02em;
    opacity: 0.75;
}

/* Logged-in user readout in the sidebar footer + sign-out button. The
   form wraps both so a single POST /logout submits without extra JS. */
.sidebar-user-form {
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px dashed var(--border-1);
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.sidebar-user-name {
    font-size: 12px;
    color: var(--fg-1, var(--fg-0));
    font-weight: 600;
}
.sidebar-user-role {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--fg-3);
}
.sidebar-user-role.role-admin {
    background: rgba(110, 138, 255, 0.18);
    color: #a4b6ff;
}
.sidebar-logout {
    background: transparent;
    border: 1px solid var(--border-1);
    color: var(--fg-3);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s ease;
}
.sidebar-logout:hover {
    border-color: var(--accent, #6e8aff);
    color: var(--accent, #6e8aff);
}

/* ── Admin / Users page ───────────────────────────────────────── */
.admin-users { max-width: 1300px; }
.admin-users .section-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-2, #9a9aaa);
    margin: 22px 0 4px;
}
.admin-users .section-desc {
    font-size: 12px;
    color: var(--fg-3);
    margin: 0 0 14px;
}
.admin-users .empty-state {
    color: var(--fg-3);
    background: var(--bg-1);
    border: 1px dashed var(--border-1);
    padding: 16px;
    border-radius: 6px;
    text-align: center;
}
.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 8px;
    overflow: hidden;
    font-size: 12px;
}
.admin-users-table th,
.admin-users-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-1);
    vertical-align: middle;
    text-align: left;
}
.admin-users-table thead th {
    background: var(--bg-2);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
}
.admin-users-table .tab-col {
    text-align: center;
    width: 80px;
}
.admin-users-table .tab-cell {
    text-align: center;
}
.admin-users-table .user-cell {
    display: flex;
    flex-direction: column;
}
.admin-users-table .user-name {
    font-weight: 600;
    color: var(--fg-0);
}
.admin-users-table .user-login {
    color: var(--fg-3);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.role-select {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    color: var(--fg-0);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 11px;
}
.role-select.role-admin {
    color: #a4b6ff;
    border-color: rgba(110, 138, 255, 0.4);
}

.pwd-details summary {
    cursor: pointer;
    color: var(--fg-3);
    font-size: 11px;
}
.pwd-details[open] summary {
    color: var(--accent, #6e8aff);
}
.pwd-current {
    margin-top: 6px;
    font-size: 11px;
    color: var(--fg-2);
}
.pwd-current code {
    background: var(--bg-2);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--fg-0);
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.pwd-form {
    margin-top: 6px;
    display: flex;
    gap: 6px;
}
.pwd-form input {
    flex: 1;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    color: var(--fg-0);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 11px;
}
.pwd-form button,
.assign-form button {
    background: var(--accent, #6e8aff);
    border: none;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.grant-btn {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    color: var(--fg-3);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}
.grant-btn:hover {
    border-color: var(--accent, #6e8aff);
    color: var(--accent, #6e8aff);
}
.grant-btn.granted {
    background: rgba(60, 200, 130, 0.15);
    border-color: rgba(60, 200, 130, 0.4);
    color: #6fdfa3;
}
.grant-btn.granted:hover {
    background: rgba(220, 80, 80, 0.18);
    border-color: rgba(220, 80, 80, 0.4);
    color: #ff8e9a;
}
.grant-admin {
    color: #a4b6ff;
    font-size: 16px;
    line-height: 1;
}

.assign-form {
    display: flex;
    gap: 6px;
    align-items: center;
}
.assign-form input,
.assign-form select {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    color: var(--fg-0);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 11px;
}
.assign-form input { flex: 1; }

.sidebar-nav {
    flex: 1;
    padding: 8px 0;
}
.nav-group-label {
    padding: 18px 20px 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-1);
    border-left: 3px solid transparent;
    transition: background .12s, color .12s, border-color .12s;
}
.nav-link:hover {
    background: var(--bg-2);
    color: var(--fg-0);
    text-decoration: none;
}
.nav-link.active {
    background: var(--bg-2);
    color: var(--accent);
    border-left-color: var(--accent);
}
.nav-icon {
    display: inline-flex;
    width: 18px;
    justify-content: center;
    font-size: 14px;
    opacity: 0.85;
}

.sidebar-foot {
    padding: 12px 20px;
    border-top: 1px solid var(--border-1);
    color: var(--fg-3);
    font-size: 11px;
}

.main-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 32px 18px;
    border-bottom: 1px solid var(--border-1);
    gap: 16px;
    flex-wrap: wrap;
}
.page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg-0);
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-body { padding: 24px 32px 40px; }

/* ───────────── Components ──────────────────────────────────── */

.card {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.card-title {
    margin: 0 0 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-2);
    font-weight: 600;
}

.badge-count {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    background: var(--bg-3);
    color: var(--fg-1);
    border-radius: 11px;
    font-size: 12px;
    font-weight: 500;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--bg-3);
    color: var(--fg-0);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}
.btn:hover {
    background: var(--bg-4);
    border-color: var(--accent-dim);
    color: #fff;
    text-decoration: none;
}
.btn:disabled, .btn.btn-busy {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
/* Spinning ↻ while a per-row stats refresh is in flight (queued → SSE). */
.btn.btn-refreshing {
    animation: farm-btn-spin 0.8s linear infinite;
    opacity: 1;
}
@keyframes farm-btn-spin { to { transform: rotate(360deg); } }
.btn-primary {
    background: linear-gradient(180deg, #6a3aa0 0%, #5a2e8f 100%);
    color: #fff;
    border-color: #7d4ab8;
}
.btn-primary:hover {
    background: linear-gradient(180deg, #7a4ab0 0%, #6a3e9f 100%);
    border-color: #9060d0;
}
.btn-danger {
    background: #3a1a1a;
    color: #ff8866;
    border-color: #5a2a2a;
}
.btn-danger:hover { background: #5a2a2a; color: #fff; }

.input-search,
input[type="text"], input[type="search"], input[type="number"] {
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    color: var(--fg-0);
    padding: 7px 12px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-family: inherit;
    min-width: 200px;
}
input:focus, .input-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
input::placeholder { color: var(--fg-3); }

input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    width: 200px;
    height: 4px;
    background: var(--bg-3);
    border-radius: 2px;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 0;
}

/* ───────────── Tables ─────────────────────────────────────── */

.farm-table, .profile-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    overflow: hidden;
}
.farm-table thead, .profile-table thead {
    background: var(--bg-2);
}
.farm-table th, .farm-table td,
.profile-table th, .profile-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-1);
    text-align: left;
    vertical-align: middle;
}
.farm-table tbody tr:last-child td,
.profile-table tbody tr:last-child td {
    border-bottom: 0;
}
.farm-table th, .profile-table th {
    color: var(--fg-2);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.farm-table td.num, .farm-table th.num,
.profile-table td.num, .profile-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.farm-table tbody tr:hover, .profile-table tbody tr:hover {
    background: var(--bg-2);
}

/* ───────────── Filter bar (Accounts page) ──────────────────── */
.filter-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 4px 0 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    flex-wrap: wrap;
}
.filter-bar-label {
    color: var(--fg-2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.filter-pills {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    background: rgba(199, 140, 255, 0.16);
    border: 1px solid var(--accent-dim);
    border-radius: 12px;
    font-size: 11px;
    color: var(--fg-1);
    font-family: var(--font-mono);
}
.filter-pill-text { line-height: 1.5; }
.filter-pill-x {
    background: transparent;
    border: 0;
    color: var(--fg-3);
    font-size: 11px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    border-radius: 50%;
    transition: color .12s, background .12s;
}
.filter-pill-x:hover {
    color: var(--red);
    background: rgba(255, 80, 80, 0.16);
}
.filter-add-btn,
.filter-clear-btn {
    padding: 4px 10px;
    font-size: 11px;
}
.filter-result-stat {
    color: var(--fg-3);
    font-size: 11px;
    font-family: var(--font-mono);
    margin-left: auto;
}

/* Popover for adding a filter — anchored to the bar; sits BELOW. */
.filter-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 14px;
    z-index: 50;
    background: var(--bg-1);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-md);
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    min-width: 320px;
}
.filter-popover-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.filter-popover-row > label {
    color: var(--fg-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.filter-popover-row > select,
.filter-popover-row > #farm-filter-value-slot,
.filter-popover-row > #recent-filter-value-slot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.filter-popover-actions {
    grid-template-columns: 1fr;
    gap: 8px;
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
    margin-bottom: 0;
}
.btn-sm {
    padding: 4px 10px;
    font-size: 11px;
}

/* Sort bar — same chrome as filter-bar, distinct accent color. */
.sort-bar {
    border-color: rgba(120, 200, 255, 0.40);
    background: rgba(80, 140, 200, 0.05);
}
.sort-bar .filter-bar-label { color: rgb(120, 180, 220); }
.sort-pill {
    background: rgba(120, 200, 255, 0.14) !important;
    border-color: rgba(120, 200, 255, 0.45) !important;
    cursor: grab;
}
.sort-pill.dragging { opacity: 0.5; }
.sort-pill.drop-target {
    box-shadow: -3px 0 0 var(--accent);
}
.sort-pill-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 2px;
    padding: 0 5px;
    background: rgba(120, 200, 255, 0.32);
    color: var(--fg-0);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}
.sort-pill-flip {
    background: transparent;
    border: 0;
    color: var(--fg-2);
    font-size: 12px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    border-radius: 50%;
    transition: color .12s, background .12s;
}
.sort-pill-flip:hover {
    color: var(--accent);
    background: rgba(120, 200, 255, 0.18);
}
.sort-hint {
    color: var(--fg-3);
    font-size: 10px;
}
.sort-hint kbd {
    display: inline-block;
    padding: 0 5px;
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--fg-1);
    line-height: 1.4;
}
.sort-popover { left: auto; right: 14px; }

/* Sortable headers (multi-column stack supported) */
.th-sort {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: color .12s, background .12s;
}
.th-sort:hover { color: var(--fg-0); background: var(--bg-3); }
.th-sort .sort-ind {
    margin-left: 5px;
    font-size: 9px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0;
    display: inline-block;
    min-width: 12px;
    text-align: left;
}
.th-sort.is-sorted { color: var(--accent); }
.farm-table th.num.th-sort .sort-ind {
    /* Right-aligned numeric headers — keep indicator on right side. */
    margin-left: 4px;
    text-align: right;
}
.profile-table .actions, .actions { text-align: right; }
.profile-table tr.row-pending td:first-child,
.profile-table tr.row-pending td:nth-child(2) {
    background: rgba(199, 140, 255, 0.04);
}
.profile-table .cell-flash {
    animation: cell-flash 1s ease;
}
@keyframes cell-flash {
    0%   { background: rgba(108, 240, 140, 0.3); }
    100% { background: transparent; }
}
.profile-table th.sortable {
    cursor: pointer;
    user-select: none;
}
.profile-table th.sortable:hover { color: var(--fg-0); }
.profile-table th.sortable::after {
    content: " ⇅";
    color: var(--fg-3);
    font-size: 10px;
}
.profile-table th.sortable.sort-asc::after  { content: " ↑"; color: var(--accent); }
.profile-table th.sortable.sort-desc::after { content: " ↓"; color: var(--accent); }

/* ───────────── Status / events ────────────────────────────── */

.event-info     { color: var(--fg-1); }
.event-warn     { color: var(--amber); }
.event-error    { color: var(--red); }
.event-progress { color: var(--accent-2); }

.event-log-mini, .event-log {
    background: var(--bg-0);
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-1);
    max-height: 280px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.6;
}

.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--fg-2);
}
.empty-state h3 {
    color: var(--fg-0);
    font-weight: 500;
    margin: 0 0 8px;
}

.alert {
    padding: 12px 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-2);
    margin-bottom: 16px;
}
.alert-info  { background: rgba(106, 204, 255, 0.06); border-color: var(--accent-2-dim); }
.alert-error { background: rgba(240, 128, 96, 0.06); border-color: var(--red-d); color: var(--red); }

/* ───────────── Form ───────────────────────────────────────── */

.form { display: grid; gap: 14px; max-width: 560px; }
.form label { display: block; font-size: 12px; color: var(--fg-2); }
.form label > span { display: block; margin-bottom: 4px; }
.form input[type="text"] { width: 100%; }
.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.form small.muted { display: block; margin-top: 4px; font-size: 11px; }

/* ───────────── Wingman rank tag ───────────────────────────── */

.rank-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    min-width: 38px;
    text-align: center;
}
.rank-unranked { color: var(--fg-3); }
.rank-silver   { color: #b8b8c8; border-color: #404054; }
.rank-gold     { color: var(--amber); border-color: var(--amber-d); }
.rank-eagle    { color: var(--red);   border-color: var(--red-d); }

/* ───────────── Trust score ────────────────────────────────── */

.trust-cell { white-space: nowrap; }
.trust-score {
    display: inline-block;
    min-width: 22px;
    margin: 0 6px;
    text-align: center;
    font-weight: 600;
    font-family: var(--font-mono);
}
.trust-high { color: var(--green); }
.trust-mid  { color: var(--amber); }
.trust-low  { color: var(--red); }

.btn-trust-nudge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: var(--bg-3);
    color: var(--fg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.btn-trust-nudge:hover {
    background: var(--bg-4);
    color: var(--accent);
}
.btn-trust-nudge:disabled, .btn-trust-nudge.btn-busy {
    opacity: 0.4; cursor: not-allowed;
}

/* ───────────── Win / Tie / Loss colour ───────────────────── */

.stat-w { color: var(--green); font-weight: 600; }
.stat-t { color: var(--amber); font-weight: 600; }
.stat-l { color: var(--red);   font-weight: 600; }

/* ───────────── Flag toggle (farm / loot) ─────────────────── */

.flag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    padding: 0;
    background: var(--bg-3);
    color: var(--fg-3);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.flag-btn:hover { background: var(--bg-4); color: var(--fg-0); }
.flag-btn.flag-on {
    background: rgba(108, 240, 140, 0.10);
    color: var(--green);
    border-color: var(--green-d);
}
.flag-btn.btn-busy { opacity: 0.4; }

.copyable { cursor: pointer; transition: color .12s; }
.copyable:hover { color: var(--accent-2); }

.timestamp { font-size: 11px; }

/* ───────────── VM tags / status ──────────────────────────── */

.vm-tag {
    display: inline-block;
    padding: 2px 7px;
    background: rgba(106, 204, 255, 0.10);
    color: var(--accent-2);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
}
.vm-status { font-family: var(--font-mono); font-size: 12px; }
.vm-running { color: var(--green); }
.vm-stopped { color: var(--fg-3); }
.vm-unknown { color: var(--amber); }
.vm-acc-tag {
    display: inline-block;
    padding: 2px 7px;
    margin: 2px 4px 2px 0;
    background: var(--bg-3);
    color: var(--fg-1);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 11px;
}
.vm-acc-tag.vm-acc-inactive { color: var(--fg-3); text-decoration: line-through; }

/* VM slot/VPN binding controls (cells in farm-table.vm-bind-table) */
.vm-bind-select {
    background: var(--bg-2);
    color: var(--fg-1);
    border: 1px solid var(--bg-3);
    border-radius: var(--r-sm);
    padding: 3px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    max-width: 220px;
}
.vm-bind-select:focus {
    outline: none;
    border-color: var(--accent, #4a9eff);
}
.vm-locked-pill {
    display: inline-block;
    padding: 2px 7px;
    background: var(--bg-3);
    color: var(--fg-2);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: not-allowed;
}
.vm-unbind-btn {
    margin-left: 4px;
    padding: 0 5px;
    background: transparent;
    color: var(--fg-3);
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    font-size: 11px;
    line-height: 16px;
    cursor: pointer;
}
.vm-unbind-btn:hover {
    color: var(--red);
    border-color: var(--red);
}
.vm-unbind-btn:disabled {
    opacity: 0.4;
    cursor: wait;
}
.vm-locked-login {
    margin-left: 4px;
    color: var(--fg-1);
    opacity: 0.85;
}
.vm-bind-save-btn {
    font-size: 11px;
    padding: 4px 10px;
}
.vm-bind-save-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ───────────── AutoFarm dashboard ─────────────────────────── */

.af-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.af-stat-card {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    padding: 18px 20px;
}
.af-stat-card-wide { grid-column: span 2; }
.af-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.af-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--fg-0);
    line-height: 1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.af-stat-card .controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.af-stat-card .controls input[type="number"] { min-width: 0; width: 64px; }

.af-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    margin-left: 10px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.af-pill-on  { background: rgba(108, 240, 140, 0.12); color: var(--green); }
.af-pill-off { background: var(--bg-3); color: var(--fg-3); }

/* Server LAN IP click-to-copy chips in the Farm header.
   Visual style: monospace endpoint text on a faint accent background,
   with a hover highlight to telegraph the click affordance. Mirrors the
   legacy tkinter `▶  ip:PORT` strip from app_recording.py. */
.af-iplist {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    flex-wrap: wrap;
}
.af-ip-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: 1px solid var(--border-2);
    border-radius: 11px;
    background: var(--bg-2);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.af-ip-chip:hover {
    background: var(--bg-3);
    border-color: var(--accent-dim);
}
.af-ip-chip-copied {
    background: rgba(108, 240, 140, 0.15);
    color: var(--green);
    border-color: var(--green);
}

/* Connected recording clients table — Farm page block.
   Mirrors the legacy tkinter "Таблица клиентов" view from
   app_recording.py with web-friendly styling. */
.rec-clients-table {
    width: 100%;
    margin-top: 6px;
}
.rec-clients-table th, .rec-clients-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-1);
    font-size: 12px;
    text-align: left;
}
.rec-clients-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rec-clients-table tbody tr:hover { background: var(--bg-2); }

.rec-cl-name { font-weight: 600; color: var(--fg-0); }

/* Auth dots — green = registered, dim = handshake in progress. */
.rec-cl-auth-ok      { color: var(--green); margin-right: 4px; }
.rec-cl-auth-pending { color: var(--fg-3);  margin-right: 4px; }

/* State badges — reuse colors from the legacy tkinter mapping
   (BLUE/RED/AMBER/PURP/GREEN/DIM) so operators recognise the
   palette they're used to. */
.rec-cl-state {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 500;
}
.rec-cl-state-conn      { color: #7eb3ff; background: rgba(126, 179, 255, 0.10); }
.rec-cl-state-recording { color: #ff7070; background: rgba(255, 112, 112, 0.10); }
.rec-cl-state-sending   { color: #ffaa40; background: rgba(255, 170, 64, 0.10); }
.rec-cl-state-done      { color: #c084fc; background: rgba(192, 132, 252, 0.10); }
.rec-cl-state-disc      { color: var(--fg-3); background: var(--bg-3); }

.rec-cl-replay {
    color: var(--green);
    font-size: 11px;
    font-weight: 500;
}

/* Selected row in Connected clients table — pick a client to send
   commands to. Persistent across the 5s polling refresh because the
   render JS re-applies .rec-cl-selected when rebuilding rows. */
.rec-cl-row { transition: background 0.1s; }
.rec-cl-row:hover { background: var(--bg-2); }
.rec-cl-selected,
.rec-cl-selected:hover {
    background: rgba(192, 132, 252, 0.10);
    outline: 1px solid var(--accent-dim);
    outline-offset: -1px;
}
.rec-cl-row-disabled { opacity: 0.55; }

/* ── Remote command toolbar ──────────────────────────────────
   Single horizontal bar that appears under the Connected clients
   table when the operator picks a client. Compact by design — even
   with 4-5 connected VMs, the bar takes one row, leaving the
   clients table itself the visual focus. Layout (left→right):
     [client chip]  [account picker]  [action buttons]
   Account meta + activity log live OUTSIDE the bar so they only
   add vertical space when populated.
*/
.rec-cmd-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0 8px;
    padding: 8px 12px;
    background: var(--bg-1);
    border: 1px solid var(--border-2);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ── Client chip — compact pill with inline ✕ ────────────── */
.rec-cmd-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 10px;
    background: var(--bg-3);
    border: 1px solid var(--accent-dim);
    border-radius: 16px;
}
.rec-cmd-chip-icon {
    color: var(--accent);
    font-size: 13px;
    line-height: 1;
}
.rec-cmd-chip-name {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    padding: 0;
}
.rec-cmd-chip-meta {
    color: var(--fg-3);
    font-size: 10px;
    font-family: var(--font-mono);
}
.rec-cmd-chip-clear {
    background: transparent;
    border: none;
    color: var(--fg-3);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}
.rec-cmd-chip-clear:hover {
    background: rgba(248, 113, 113, 0.18);
    color: var(--red);
}

/* ── Account picker (search + select) — composite ────────── */
.rec-cmd-picker {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: border-color 0.12s;
}
.rec-cmd-picker:focus-within { border-color: var(--accent); }
.rec-cmd-picker-search {
    flex: 0 0 140px;
    background: var(--bg-2);
    border: none;
    border-right: 1px solid var(--border-1);
    color: var(--fg-0);
    padding: 6px 10px;
    font-size: 12px;
    outline: none;
}
.rec-cmd-picker-search::placeholder { color: var(--fg-3); }
.rec-cmd-picker-select {
    flex: 0 1 320px;
    min-width: 200px;
    background: var(--bg-3);
    border: none;
    color: var(--fg-0);
    padding: 6px 10px;
    font-size: 12px;
    font-family: var(--font-mono);
    outline: none;
    cursor: pointer;
}

/* ── Inline actions row (within the toolbar) ─────────────── */
.rec-cmd-actions-inline {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.rec-cmd-divider {
    display: inline-block;
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--border-2);
}

/* ── Account meta + activity log — outside the bar ───────── */
.rec-cmd-acc-meta {
    margin: 4px 0 0 12px;
    color: var(--fg-2);
    font-size: 11px;
    font-family: var(--font-mono);
}
.rec-cmd-acc-meta:empty { display: none; }

/* ── Buttons ──────────────────────────────────────────────── */
.rec-cmd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    background: var(--bg-3);
    color: var(--fg-0);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.rec-cmd-btn:hover:not(:disabled) {
    background: var(--bg-1);
    transform: translateY(-1px);
}
.rec-cmd-btn:active:not(:disabled) { transform: translateY(0); }
.rec-cmd-btn:disabled { opacity: 0.5; cursor: wait; }
.rec-cmd-btn-icon { font-size: 13px; line-height: 1; }
.rec-cmd-btn-text { line-height: 1; }

/* Tinted variants — strong color on icon, subtle border tint */
.rec-cmd-btn-steam-on {
    color: var(--green);
    border-color: rgba(108, 240, 140, 0.3);
}
.rec-cmd-btn-steam-on:hover:not(:disabled) {
    background: rgba(108, 240, 140, 0.08);
    border-color: var(--green);
}
.rec-cmd-btn-cs-on {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.3);
}
.rec-cmd-btn-cs-on:hover:not(:disabled) {
    background: rgba(56, 189, 248, 0.08);
    border-color: #38bdf8;
}
.rec-cmd-btn-launch {
    color: var(--accent);
    border-color: var(--accent-dim);
    font-weight: 600;
}
.rec-cmd-btn-launch:hover:not(:disabled) {
    background: rgba(192, 132, 252, 0.08);
    border-color: var(--accent);
}
.rec-cmd-btn-cs-off {
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.3);
}
.rec-cmd-btn-cs-off:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.08);
    border-color: #94a3b8;
}
.rec-cmd-btn-steam-off {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
}
.rec-cmd-btn-steam-off:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.08);
    border-color: #f87171;
}
.rec-cmd-btn-neutral { color: var(--fg-1); }
.rec-cmd-btn-neutral:hover:not(:disabled) {
    background: var(--bg-1);
    border-color: var(--fg-2);
}

/* Full logout — explicit "kill everything" button. Visually distinct
   (red tint always, not just on hover) so operators don't mistake it
   for the regular Steam-toggle stop. Hover doubles down with a more
   saturated red. Always sends logout_steam regardless of toggle. */
.rec-cmd-btn-full-logout {
    color: var(--red);
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.4);
    font-weight: 600;
}
.rec-cmd-btn-full-logout:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.18);
    border-color: var(--red);
    color: #ff8585;
}

/* ── Activity log ─────────────────────────────────────────── */
.rec-cmd-log {
    max-height: 160px;
    overflow-y: auto;
    margin-top: 16px;
    padding: 10px 12px;
    background: var(--bg-0);
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.55;
    color: var(--fg-2);
}
.rec-cmd-log:empty { display: none; }
.rec-cmd-log-line { padding: 1px 0; }
.rec-cmd-log-ok    { color: var(--green); }
.rec-cmd-log-error { color: var(--red); }
.rec-cmd-log-warn  { color: var(--amber); }

/* ───────────── Loot sections ─────────────────────────────── */

.loot-section { margin-bottom: 28px; }
.loot-section h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-0);
}

/* ───────────── Profiles page (legacy) ────────────────────── */

.account-inv-row { background: var(--bg-1); }
.account-inv-grid {
    padding: 12px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.account-inv-empty { color: var(--fg-3); padding: 20px; }

.acc-section { margin-top: 16px; }
.acc-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-1);
}
.acc-section-head h4 {
    margin: 0;
    font-size: 11px;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.acc-section-head h4 .acc-listings-count {
    margin-left: 6px;
    color: var(--fg-3);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.acc-market-lock {
    display: inline-block;
    padding: 1px 6px;
    margin-top: 3px;
    background: var(--amber-d);
    color: var(--amber);
    border-radius: var(--r-sm);
    font-size: 10px;
    font-weight: 500;
}

.inv-tile {
    width: 110px;
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    transition: border-color .12s;
}
.inv-tile:hover { border-color: var(--accent-dim); }
.inv-tile img {
    width: 100%;
    height: auto;
    background: var(--bg-2);
    border-radius: var(--r-sm);
}
.inv-tile .listing-foot { display: flex; flex-direction: column; gap: 2px; }
.inv-tile-hold-badge {
    display: inline-block;
    padding: 1px 5px;
    background: var(--amber-d);
    color: var(--amber);
    border-radius: var(--r-sm);
    font-size: 9px;
    margin-top: 2px;
}
.inv-tile-held { opacity: 0.7; }

.bulk-label {
    display: block;
    margin: 8px 0 4px;
    font-size: 11px;
    color: var(--fg-2);
}
.bulk-buy-input { width: 90px; }

.btn-expand {
    background: var(--bg-3);
    color: var(--accent-2);
    border-color: var(--border-2);
}
.btn-expand:hover { background: var(--bg-4); color: #fff; }
.btn-expand.is-open {
    background: var(--accent-glow);
    color: var(--accent);
    border-color: var(--accent-dim);
}

.btn-buy {
    background: rgba(108, 240, 140, 0.08);
    color: var(--green);
    border-color: var(--green-d);
}
.btn-buy:hover { background: rgba(108, 240, 140, 0.16); color: #fff; }
.btn-sell {
    background: rgba(106, 204, 255, 0.08);
    color: var(--accent-2);
    border-color: var(--accent-2-dim);
}
.btn-sell:hover { background: rgba(106, 204, 255, 0.16); color: #fff; }

.btn-trade-locked {
    background: var(--amber-d);
    color: var(--amber);
    border-color: var(--amber);
}

/* Per-account daily auto-refresh toggle.
   Operator spec 2026-05-02: показывает что dailу auto-refresh
   включён (🔄, зелёная подсветка) или выключен (⏸, серая,
   с пунктирной рамкой) для конкретного аккаунта. Полезно для
   аккаунтов в market-lock period — auto-disable + visual cue. */
.btn-auto-refresh-toggle {
    min-width: 32px;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
}
.btn-auto-refresh-toggle.auto-refresh-on {
    background: rgba(108, 240, 140, 0.10);
    border-color: rgba(108, 240, 140, 0.45);
    color: var(--green);
}
.btn-auto-refresh-toggle.auto-refresh-on:hover {
    background: rgba(108, 240, 140, 0.20);
    border-color: var(--green);
}
.btn-auto-refresh-toggle.auto-refresh-off {
    background: var(--bg-3);
    border: 1px dashed var(--fg-3);
    color: var(--fg-3);
    opacity: 0.85;
}
.btn-auto-refresh-toggle.auto-refresh-off:hover {
    background: var(--bg-4);
    color: var(--fg-1);
    border-color: var(--fg-2);
}

/* Section toggle (collapsible h2). */
.section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    margin-right: 8px;
    padding: 0;
    background: var(--bg-3);
    color: var(--fg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    font-size: 11px;
    cursor: pointer;
    user-select: none;
    transition: transform .15s, background .12s;
}
.section-toggle:hover {
    background: var(--bg-4);
    color: var(--accent);
}
.section-collapsed .section-toggle { transform: rotate(-90deg); }
.section-collapsed .section-body { display: none !important; }
.section-collapsible h2 { cursor: pointer; user-select: none; }

/* ───────────── Queue bar (sidebar foot) ──────────────────── */

.queue-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
}
.queue-bar-idle { color: var(--fg-3); }
.queue-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
}
.queue-step { color: var(--fg-2); }
.queue-pbar {
    width: 100%;
    height: 4px;
    background: var(--bg-3);
    border-radius: 2px;
    overflow: hidden;
}
.queue-pbar-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width .25s ease-out;
}
.queue-pbar-outer .queue-pbar-fill { background: var(--accent-2); }

/* ───────────── Profile detail extras ─────────────────────── */

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.wallet-chip {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    background: var(--bg-3);
    color: var(--fg-0);
    border: 1px solid var(--border-2);
    border-radius: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
}
.wallet-chip-pending {
    background: var(--amber-d);
    color: var(--amber);
    border-color: var(--amber);
    font-size: 11px;
    opacity: 0.85;
}

/* Path / identity card. */
.kv-card { padding: 0; }
.kv-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-1);
}
.kv-row:last-child { border-bottom: 0; }
.kv-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-2);
    font-weight: 500;
}
.kv-value { color: var(--fg-1); }
.kv-value code {
    background: var(--bg-3);
    color: var(--fg-0);
    word-break: break-all;
}

/* Profile-progress bar (kept hidden by default — see template).
 * If we ever bring it back, it'll have proper styling here. */
.profile-progress-track {
    display: inline-block;
    width: 200px;
    height: 4px;
    background: var(--bg-3);
    border-radius: 2px;
    overflow: hidden;
    vertical-align: middle;
    margin-left: 8px;
}
.profile-progress-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width .25s ease-out;
}

/* h2 / h3 inside profile sections — give them proper spacing. */
.page-body h2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--fg-0);
    margin: 28px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-body h2 .muted {
    font-size: 13px;
    font-weight: 400;
}
.page-body h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-1);
    margin: 18px 0 10px;
}

/* ───────────── Pair-member display (AutoFarm pairs table) ── */
.pair-member {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.pair-member-login {
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-0);
}
.pair-member-meta {
    font-size: 11px;
    color: var(--fg-2);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Rich per-member card: login + persona + VM/trust/rank/WR/lvl·XP pills. */
.pair-member-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.3;
}
.pair-member-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.pair-member-persona {
    font-size: 11px;
    color: var(--fg-2);
}
.pair-member-stats {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.pms-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-family: var(--font-mono);
    line-height: 1.4;
    background: var(--bg-3);
    color: var(--fg-1);
    white-space: nowrap;
}
.pms-pill-muted { color: var(--fg-3); font-style: italic; }
.pms-trust.trust-high { background: rgba(60, 200, 80, 0.16); color: var(--green); }
.pms-trust.trust-mid  { background: rgba(255, 191, 0, 0.18); color: var(--amber); }
.pms-trust.trust-low  { background: rgba(255, 80, 80, 0.18); color: var(--red); }
.pms-wr  { color: var(--fg-1); }
.pms-lvl { color: var(--fg-2); }
.pms-record {
    /* Pill that contains three coloured stat spans (W·T·L) — collapse
     * inner gaps so the pill stays compact. */
    gap: 3px;
    background: var(--bg-3);
}
.pms-record .stat-w,
.pms-record .stat-t,
.pms-record .stat-l { font-weight: 600; }

/* Pair-key chip in the AutoFarm table — monospaced, mid-prominence,
 * shows the matchmaking signature (trust_rank_(W-L)_lvl). Operators
 * can eyeball matching keys to predict who'll match against whom. */
.pair-key {
    display: inline-block;
    padding: 3px 8px;
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    color: var(--fg-1);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.pair-key-single {
    color: var(--fg-3);
    border-style: dashed;
}
.pair-key-vm-conflict {
    color: var(--red);
    border-color: rgba(255, 80, 80, 0.55);
    background: rgba(255, 80, 80, 0.10);
}

/* W−L diff pill — sign-coloured so the operator doesn't have to do
 * the math in their head. Sits right after the rank tag. */
.pms-wl { font-weight: 700; }
.pms-wl.wl-pos {
    color: var(--green);
    background: rgba(60, 200, 80, 0.16);
}
.pms-wl.wl-neg {
    color: var(--red);
    background: rgba(255, 80, 80, 0.16);
}
.pms-wl.wl-zero {
    color: var(--fg-3);
    background: var(--bg-3);
}
/* When the .rank-tag itself is a pill, neutralise its block-level
 * margins so it sits next to other pms-pills. */
.pair-member-stats .rank-tag {
    margin: 0;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
}

/* Unpaired/"no partner" placeholder shown on the empty side of a
 * leftover row in the reform preview. Same height as a real card so
 * the row aligns. */
.pair-member-empty {
    opacity: 0.55;
    border: 1px dashed var(--border-2);
    border-radius: var(--r-sm);
    padding: 8px;
    background: transparent;
}
.pair-member-login-empty {
    color: var(--fg-3);
    font-style: italic;
    font-size: 11px;
}
.pair-member-clickable {
    cursor: pointer;
    transition: opacity .12s, background .12s, border-color .12s;
}
.pair-member-clickable:hover {
    opacity: 0.95;
    border-color: var(--accent);
    background: rgba(199, 140, 255, 0.06);
}

/* Manual pair-up flow: picker dropdown, chosen card, action bar. */
.single-b-slot { position: relative; }
.manual-pair-picker {
    background: var(--bg-1);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-md);
    padding: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.manual-pair-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--fg-2);
    font-size: 11px;
    padding: 4px 6px 8px;
    border-bottom: 1px solid var(--border-2);
    margin-bottom: 6px;
}
.manual-pair-picker-head code {
    color: var(--accent);
}
.btn-ghost {
    background: transparent;
    border: 0;
    color: var(--fg-3);
    font-size: 13px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.btn-ghost:hover { color: var(--red); }
.manual-pair-picker-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}
.manual-pair-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: left;
    transition: background .12s, border-color .12s;
}
.manual-pair-option:hover {
    background: var(--bg-3);
    border-color: var(--accent);
}
.manual-pair-opt-login {
    color: var(--fg-0);
    font-size: 11px;
    font-family: var(--font-mono);
    flex: 0 0 auto;
    min-width: 110px;
}

/* Chosen-but-not-yet-confirmed partner card. */
.pair-member-chosen {
    background: rgba(199, 140, 255, 0.06);
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    padding: 8px;
    box-shadow: 0 0 0 3px rgba(199, 140, 255, 0.10);
}
.pair-member-vm-warn {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(255, 80, 80, 0.10) !important;
}
.manual-pair-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.manual-pair-warn {
    color: var(--red);
    font-size: 10px;
    font-weight: 700;
}

/* Leftover "Unpaired" banner row inside the reform preview table. */
.pair-row-leftover-header td {
    background: rgba(255, 191, 0, 0.06) !important;
    border-top: 1px solid var(--amber);
    padding: 12px 16px !important;
}
.leftover-banner {
    color: var(--amber);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
}
.leftover-banner .badge-count {
    margin: 0 6px;
    background: rgba(255, 191, 0, 0.18);
    color: var(--amber);
}
.pair-row-leftover {
    background: rgba(255, 191, 0, 0.03);
}

/* Reshuffle-VMs modal — narrow variant of the shared modal stack. */
.modal-narrow { width: min(440px, 100%); }
.modal-body { padding: 20px; }
.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-1);
    background: var(--bg-2);
    border-radius: 0 0 var(--r-md) var(--r-md);
}
.modal-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-0);
}
.modal-field-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.modal-field-row > label {
    width: 90px;
    color: var(--fg-2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.modal-field-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Active pairs heading row — title on the left, Reform button right. */
.active-pairs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 12px;
}
.active-pairs-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

/* ───────────── Consolidated /farm dashboard sections ─────────── */
.farm-section {
    margin-bottom: 28px;
    background: var(--bg-1);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    overflow: hidden;
}
.farm-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border-1);
    cursor: pointer;
    user-select: none;
    transition: background .12s;
}
.farm-section-head:hover { background: var(--bg-3); }
.farm-section-chevron {
    background: transparent;
    border: 0;
    color: var(--fg-2);
    font-size: 14px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, color .12s;
}
.farm-section-head:hover .farm-section-chevron { color: var(--fg-0); }
.farm-section-title {
    margin: 0;
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--fg-0);
}
.farm-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.farm-section-body {
    padding: 18px;
    /* Operator spec 2026-05-17: max ~10 rows visible per section,
       overflow via scroll. ~440px = thead (~36) + 10 rows × ~36 +
       padding (18×2) + slack. Применяется ко всем 4 sections
       (VMs / Accounts / Pairs / Schedule) однообразно. */
    max-height: 460px;
    overflow-y: auto;
    transition: max-height .25s ease, padding .15s ease, opacity .15s ease;
}
/* Accounts section: show ~16 rows without scrolling (operator spec
   2026-06-08). It carries the filter + sort bars on top of the table, so it
   needs more headroom than the other sections. ~16 rows × ~52px + thead +
   the two bars + padding. */
#section-accounts .farm-section-body {
    max-height: 1000px;
}
/* Pairs section: pair rows are two-line member cards (~65px), so show
   ~10 of them before scrolling (operator spec 2026-06-14). Sticky thead
   keeps the column headers in view while scrolling the rest. */
#section-pairs .farm-section-body {
    max-height: 720px;
}
#section-pairs .farm-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-2);
}
/* Unpaired-only filter toggle (operator spec 2026-06-14). */
.pairs-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}
.btn-pairs-filter {
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    color: var(--fg-2);
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: 6px;
    padding: 4px 10px;
    transition: all .12s ease;
}
.btn-pairs-filter:hover {
    color: var(--fg-1);
    border-color: var(--accent);
}
.btn-pairs-filter[aria-pressed="true"] {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
/* When active: hide formed pairs, keep the "⚠ Unpaired" header + singles. */
#af-active-pairs-wrap.show-unpaired-only .pair-row {
    display: none;
}
.farm-section.collapsed .farm-section-body {
    display: none;
}
.farm-section.collapsed .farm-section-head {
    border-bottom: 0;
}

/* AutoFarm runtime controls bar (Start/Stop/Tick + status pill) —
 * inside the Pairs section now, replaces the old top-level page_actions. */
.af-runtime-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    flex-wrap: wrap;
}

/* Recent steam accounts — header toolbar (filter + page size) + pager. */
.recent-accs-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.recent-accs-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.recent-accs-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 14px 0 4px;
    flex-wrap: wrap;
}
.recent-accs-pager:empty { display: none; }
.recent-accs-pager .pager-btn {
    padding: 4px 10px;
    font-size: 11px;
    min-width: 32px;
}

/* Drop-transfer wizard — Step 5 live progress checkmarks. Each row is
   one `_TX_STEPS` entry; the leading `<span class="tx-step-mark">` is
   filled with ⏳ / ✓ / ✕ / — by JS. Active rows highlight in accent
   blue, done rows fade to muted, fails are red. */
.tx-progress-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--border, #2a2e34);
    border-radius: 6px;
    padding: 10px 14px;
    background: var(--bg-2, #181b20);
}
.tx-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--fg-2, #b0b3b8);
    transition: color .15s;
}
.tx-step-mark {
    display: inline-block;
    min-width: 16px;
    text-align: center;
    font-weight: 700;
    color: var(--fg-3, #707276);
}
.tx-progress-row.is-active {
    color: var(--accent, #6d8aff);
}
.tx-progress-row.is-active .tx-step-mark {
    color: var(--accent, #6d8aff);
}
.tx-progress-row.is-done .tx-step-mark {
    color: var(--green, #6cba6c);
}
.tx-progress-row.is-done {
    color: var(--fg-3, #707276);
    text-decoration: line-through;
    text-decoration-color: rgba(120,120,120,0.3);
}
.tx-progress-row.is-skipped .tx-step-mark { color: var(--fg-3, #707276); }
.tx-progress-row.is-skipped { opacity: 0.45; }
.tx-progress-row.is-fail .tx-step-mark { color: var(--red, #d76a6a); }
.tx-progress-row.is-fail { color: var(--red, #d76a6a); }

/* Profile-assign dropdown cell on the recent-accounts row. Compact —
   the row already has 11 columns, so the select + ➕ button stay tight
   together (no gap). Once an account is assigned the cell collapses to
   a single muted name (.profile-assigned). */
.profile-assign-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.profile-assign-select {
    background: var(--bg-2, #1a1d22);
    color: var(--fg, #e6e6e6);
    border: 1px solid var(--border, #2a2e34);
    border-radius: 4px;
}
.profile-assigned {
    color: var(--green, #6cba6c);
    font-size: 11px;
    font-weight: 600;
}

/* SRT schedule editor — header bar, meta row, editable table. */
.schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 28px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 12px;
}
.schedule-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.schedule-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.schedule-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.schedule-meta-row label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
    font-weight: 600;
}
#sched-table input.input-search {
    padding: 4px 8px;
    font-size: 11px;
}

/* Schedule table — compact priority view. Login is the focus, vm
 * is muted secondary info on the same line. */
.sched-table .sched-login {
    display: inline-block;
    margin-right: 6px;
    color: var(--fg-0);
    font-size: 12px;
    font-weight: 500;
}
.sched-table td { vertical-align: middle; }

/* ───────────── Manual Farm panel ─────────────────────────────── */
.manual-farm-card {
    border: 1px solid var(--border-2);
    border-left: 3px solid var(--accent);
}
.manual-farm-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-end;
    margin-bottom: 14px;
}
.manual-farm-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.manual-farm-field > label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
}
.manual-farm-detail {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    flex-wrap: wrap;
}
.manual-farm-team {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 12px;
    border-left: 3px solid var(--accent-dim);
    flex: 1 1 240px;
}
#mf-p2-detail { border-left-color: rgb(120, 200, 255); }
.manual-farm-team-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--fg-2);
    text-transform: uppercase;
}
.manual-farm-vs {
    font-weight: 600;
    font-size: 14px;
    align-self: center;
    padding: 0 8px;
}
.manual-farm-side {
    display: flex;
    align-items: center;
    gap: 6px;
}
.manual-farm-side code {
    color: var(--fg-0);
    font-size: 12px;
    font-weight: 500;
}

/* Per-account phase pills (operator spec 2026-04-30) — small VM /
   St / CS / Pty badges next to each login that light up green when
   the launcher reports the matching event back. Default state is a
   muted grey "step not yet reached", green "mf-phase-on" means
   confirmed by the recording protocol.

   Cascade rule (also in JS): Steam off forces CS + Party off because
   logout drags both down. */
.mf-acct-phases {
    display: inline-flex;
    gap: 3px;
    margin-left: 6px;
}
.mf-phase-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    color: var(--fg-3);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.mf-phase-pill.mf-phase-on {
    background: rgba(108, 240, 140, 0.18);
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 0 4px rgba(108, 240, 140, 0.25);
}
/* search_go (op 2026-06-20): the pair PRESSED GO and is ACTIVELY in the
   matchmaking queue — PULSE the SEARCH pill so the operator can SEE it's really
   searching, vs a static green pill = on the search screen / ready-check /
   stranger-decline hold = «ждёт». Placed after .mf-phase-on so it wins. */
.mf-phase-pill.mf-phase-searching {
    border-color: var(--green);
    color: var(--green);
    animation: mf-search-pulse 1s ease-in-out infinite;
}
@keyframes mf-search-pulse {
    0%, 100% { background: rgba(108, 240, 140, 0.16);
               box-shadow: 0 0 3px rgba(108, 240, 140, 0.30); }
    50%      { background: rgba(108, 240, 140, 0.42);
               box-shadow: 0 0 9px rgba(108, 240, 140, 0.70); }
}

/* «−» clear-replay button (op 2026-06-20): empties a playing bot's role CSV so
   it stands next replay → re-record F8 from 0. Only shown for playing pairs. */
.af-clear-replay {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; padding: 0; line-height: 1;
    font-size: 14px; font-weight: 700;
    border: 1px solid var(--red, #e26d6d); border-radius: 3px;
    background: rgba(226, 109, 109, 0.12);
    color: var(--red, #e26d6d); cursor: pointer; user-select: none;
}
.af-clear-replay:hover:not(:disabled) { background: rgba(226, 109, 109, 0.32); }
.af-clear-replay:disabled { opacity: 0.6; cursor: default; }

/* Dead-player nick fade (op 2026-06-20): GSI per-round health=0 → ник тускнеет
   и зачёркивается; respawn/новый раунд снимает класс. */
.sched-login[data-af-nick] { transition: opacity 0.55s ease, filter 0.55s ease; }
.sched-login.af-nick-dead {
    opacity: 0.30; text-decoration: line-through; filter: grayscale(0.7);
}

/* Trust pill — independent of phase pills, driven by data-trust attr.
   Operator spec 2026-04-30 + farm_v2_design.md §4.2.
     unknown  → muted grey (no observation yet)
     pending  → amber pulsing (cmd_trust_check in flight)
     equal    → green tint (no banner — trust matches)
     yellow   → amber tint (banner: "slightly lower")
     red      → red tint (banner: "substantially lower")
     error    → muted red (capture failed / cs2 not running) */
.mf-phase-pill.mf-trust-pill[data-trust="unknown"] {
    background: var(--bg-3);
    border-color: var(--border-1);
    color: var(--fg-3);
}
.mf-phase-pill.mf-trust-pill[data-trust="pending"] {
    background: rgba(240, 192, 96, 0.10);
    border-color: rgba(240, 192, 96, 0.55);
    color: var(--amber);
    animation: mf-trust-pulse 1.2s ease-in-out infinite;
}
.mf-phase-pill.mf-trust-pill[data-trust="equal"] {
    background: rgba(108, 240, 140, 0.18);
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 0 4px rgba(108, 240, 140, 0.25);
}
.mf-phase-pill.mf-trust-pill[data-trust="yellow"] {
    background: rgba(240, 192, 96, 0.18);
    border-color: var(--amber);
    color: var(--amber);
    box-shadow: 0 0 4px rgba(240, 192, 96, 0.30);
}
.mf-phase-pill.mf-trust-pill[data-trust="red"] {
    background: rgba(240, 96, 96, 0.20);
    border-color: var(--red);
    color: var(--red);
    box-shadow: 0 0 5px rgba(240, 96, 96, 0.35);
}
.mf-phase-pill.mf-trust-pill[data-trust="error"] {
    background: rgba(248, 113, 113, 0.06);
    border-color: rgba(248, 113, 113, 0.4);
    color: var(--red-d);
    text-decoration: line-through;
}
@keyframes mf-trust-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Per-pair action toolbar — operator spec 2026-04-29.
   Sits inside each .manual-farm-team card under the two member rows.
   Each button (VM / Steam / CS2 / Party) toggles between start and
   stop based on _mfPairState[pairKey][target]. */
.mf-pair-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border-1);
}
.mf-pair-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 11px;
    border: 1px solid var(--border-2);
    background: var(--bg-3);
    color: var(--fg-1);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.mf-pair-btn:hover:not(:disabled) {
    background: var(--bg-1);
    border-color: var(--accent-dim);
    color: var(--fg-0);
}
.mf-pair-btn:disabled, .mf-pair-btn.btn-busy {
    opacity: 0.55;
    cursor: wait;
}
.mf-pair-btn .mf-pair-btn-icon { font-size: 12px; line-height: 1; }
.mf-pair-btn .mf-pair-btn-text { line-height: 1; }

/* "On" state — destructive-tinted (red) so the operator visually
   knows clicking will STOP / CLOSE / LOGOUT something already
   running. Off state is the default neutral pill above. */
.mf-pair-btn.mf-pair-btn-on {
    background: rgba(248, 113, 113, 0.10);
    border-color: rgba(248, 113, 113, 0.4);
    color: #f87171;
}
.mf-pair-btn.mf-pair-btn-on:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.18);
    border-color: #f87171;
    color: #ff8585;
}

/* Trust button — purple/accent tint, distinct from VM/Steam/CS/Party
   toggles (it's a one-shot detection trigger, not a state morph).
   Disabled by default; _mfPairBtnRefresh enables it only when steam,
   cs and party are all on. Operator spec 2026-04-30. */
.mf-pair-btn.mf-pair-btn-trust {
    background: rgba(167, 139, 250, 0.06);
    border-color: rgba(167, 139, 250, 0.45);
    color: var(--accent);
}
.mf-pair-btn.mf-pair-btn-trust:hover:not(:disabled) {
    background: rgba(167, 139, 250, 0.18);
    border-color: var(--accent);
    color: #d4b8ff;
}
.mf-pair-btn.mf-pair-btn-trust.mf-pair-btn-trust-ready {
    box-shadow: 0 0 6px rgba(167, 139, 250, 0.20);
}

/* Stop All — emergency kill switch styled distinctly from the
   per-target Stop variants. Always red, always present (not a
   toggle). Operator spec 2026-04-30. */
.mf-pair-btn.mf-pair-btn-stopall {
    background: rgba(248, 113, 113, 0.06);
    border-color: rgba(248, 113, 113, 0.5);
    color: var(--red);
    margin-left: auto;   /* push to the right edge of the button row */
}
.mf-pair-btn.mf-pair-btn-stopall:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.22);
    border-color: var(--red);
    color: #ff8585;
}

/* Recording button — same as Game but red-amber, indicates "ARMED to write demos". */
.mf-record-btn {
    color: var(--amber);
    border-color: rgba(255, 191, 0, 0.45);
    background: transparent;
}
.mf-record-btn:hover {
    background: rgba(255, 191, 0, 0.10);
    color: var(--amber);
}
.mf-record-btn.mf-record-active {
    background: rgba(255, 80, 80, 0.18);
    color: var(--red);
    border-color: var(--red);
    animation: rec-pulse 1.6s ease-in-out infinite;
}
@keyframes rec-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 80, 80, 0.45); }
    50%      { box-shadow: 0 0 0 4px rgba(255, 80, 80, 0.0); }
}
.manual-farm-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-top: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
    margin-bottom: 14px;
}
.manual-farm-spacer { flex: 1 1 auto; }

/* Wingman map picker — sits inline before the 🔍 Search button. */
.mf-map-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border-left: 1px solid var(--border-2);
    margin-left: 4px;
}
.mf-map-picker-label {
    color: var(--fg-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mf-map-select.input-search {
    min-width: 110px;
    height: 26px;
    padding: 2px 6px;
    font-size: 12px;
    text-transform: capitalize;
}

.manual-stage-btn { transition: background .12s, color .12s, transform .12s; }
.manual-stage-btn.btn-stage-done {
    background: rgba(60, 200, 80, 0.16);
    color: var(--green);
    border-color: var(--green);
}
.manual-stop-btn { color: var(--red); border-color: var(--red); }
.manual-stop-btn:hover { background: rgba(255, 80, 80, 0.10); }
.manual-stop-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--fg-3);
    border-color: var(--border-2);
}
.btn-stop-style {
    background: rgba(255, 80, 80, 0.18);
    color: var(--red);
    border-color: var(--red);
}
.manual-farm-log-wrap { margin-top: 4px; }

/* Account → Machine sub-block (Manual Farm only). 4 rows = 4 accounts;
 * each row: side tag · login · machine dropdown. */
.manual-farm-machines {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
}
.manual-farm-machines-head {
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}
.manual-farm-machine-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
}
.manual-farm-machine-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.mf-mach-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 7px;
    border-radius: 8px;
    flex: 0 0 auto;
}
.mf-mach-p1 {
    background: rgba(199, 140, 255, 0.18);
    color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-dim);
}
.mf-mach-p2 {
    background: rgba(120, 200, 255, 0.18);
    color: rgb(120, 200, 255);
    box-shadow: 0 0 0 1px rgba(120, 200, 255, 0.45);
}
.mf-mach-login {
    flex: 0 0 auto;
    min-width: 110px;
    color: var(--fg-0);
    font-size: 12px;
}
.mf-machine-select {
    flex: 1 1 auto;
    min-width: 180px;
    padding: 4px 8px;
    font-size: 11px;
}
.manual-farm-machines-foot {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.manual-farm-machines-foot .muted { flex: 1 1 auto; }
@media (max-width: 980px) {
    .manual-farm-machine-grid { grid-template-columns: 1fr; }
}

/* Replays sub-panel inside the Manual Farm card. */
.replays-subpanel {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
}
.replays-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.replays-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-0);
}
.replays-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.replays-stats {
    font-size: 11px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--fg-1);
}
.replays-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
}
.rep-card {
    background: var(--bg-1);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rep-card-label {
    font-size: 11px;
    color: var(--fg-1);
    font-family: var(--font-mono);
    font-weight: 500;
}
.rep-card-stats {
    display: flex;
    gap: 6px;
}
.rep-stat {
    flex: 1 1 50%;
    text-align: center;
    padding: 3px 0;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
}
.rep-stat.rep-have {
    background: rgba(60, 200, 80, 0.16);
    color: var(--green);
}
.rep-stat.rep-miss {
    background: rgba(255, 80, 80, 0.10);
    color: var(--red);
}

/* Segmented control (used for match_type + outcome pickers). */
.seg-control {
    display: inline-flex;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.seg-btn {
    background: transparent;
    border: 0;
    color: var(--fg-2);
    padding: 6px 12px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background .12s, color .12s;
    border-right: 1px solid var(--border-2);
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { background: var(--bg-3); color: var(--fg-0); }
.seg-btn.is-active {
    background: var(--accent);
    color: #fff;
}

/* Upcoming queue — status badges per pair. */
.queue-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-transform: lowercase;
}
.queue-status-flight {
    color: var(--green);
    background: rgba(60, 200, 80, 0.16);
    box-shadow: 0 0 0 1px rgba(60, 200, 80, 0.40);
}
.queue-status-manual {
    color: var(--accent);
    background: rgba(199, 140, 255, 0.18);
    box-shadow: 0 0 0 1px rgba(199, 140, 255, 0.40);
}
.queue-status-next {
    color: rgb(120, 200, 255);
    background: rgba(120, 200, 255, 0.16);
    box-shadow: 0 0 0 1px rgba(120, 200, 255, 0.40);
}
.queue-status-queued {
    color: var(--fg-2);
    background: var(--bg-3);
}
.queue-status-rest {
    color: var(--amber);
    background: rgba(255, 191, 0, 0.14);
}

.input-pwd {
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    color: var(--fg-0);
    font-size: 12px;
    font-family: var(--font-mono);
    padding: 6px 10px;
    width: 200px;
    transition: border-color .12s, background .12s;
}
.input-pwd:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-3);
}
.input-pwd-bad {
    border-color: var(--red) !important;
    background: rgba(255, 80, 80, 0.10) !important;
    animation: pwd-shake .35s ease;
}
@keyframes pwd-shake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-4px); }
    40%  { transform: translateX(4px); }
    60%  { transform: translateX(-3px); }
    80%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

/* Pair invariant drift — visual cue when trust/rank no longer match
 * within a pair (e.g. operator nudged trust by ±N after formation). */
.pair-row-drift {
    background: rgba(255, 80, 80, 0.06) !important;
    box-shadow: inset 3px 0 0 var(--red);
}
.pair-row-drift:hover {
    background: rgba(255, 80, 80, 0.10) !important;
}
.pair-drift-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    color: var(--red);
    background: rgba(255, 80, 80, 0.14);
    letter-spacing: 0.04em;
    cursor: help;
}
.pair-manual-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(199, 140, 255, 0.14);
    letter-spacing: 0.04em;
    cursor: help;
}
.pair-row-manual {
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Inline break-pair confirm — replaces the ✕ break button in-place
 * with title + password input + Confirm/Cancel. Same password gate
 * as the top-level Reform action. */
.pair-break-confirm {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 260px;
    padding: 8px 10px;
    background: var(--bg-1);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-sm);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.pair-break-confirm-title {
    font-size: 11px;
    color: var(--fg-1);
}
.pair-break-confirm-title code {
    color: var(--accent);
    font-size: 10px;
}
.pair-break-confirm-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.input-pwd-sm {
    width: 130px;
    padding: 4px 8px;
    font-size: 11px;
}

/* Break-pair button on every active pair row. */
.btn-pair-break {
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    color: var(--fg-3);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: color .12s, border-color .12s, background .12s;
}
.btn-pair-break:hover {
    color: var(--red);
    border-color: var(--red);
    background: rgba(255, 80, 80, 0.08);
}
.btn-pair-break.btn-busy { opacity: 0.5; cursor: not-allowed; }
.badge-drift {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    color: var(--red);
    background: rgba(255, 80, 80, 0.16);
    cursor: help;
    vertical-align: middle;
}
.badge-singles {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    color: var(--amber);
    background: rgba(255, 191, 0, 0.16);
    cursor: help;
    vertical-align: middle;
}

/* AutoFarm capacity nudge buttons. */
.af-capacity-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ───────────── Profile sections — uniform spacing ────────── */
/* Every collapsible section on profile_detail gets a consistent
 * card-like outer block with the same margin/padding. The header
 * row (h2 + action buttons) is normalised through CSS so legacy
 * inline-style markup AND .section-header markup both work. */

.section-collapsible {
    margin: 0 0 18px;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    padding: 18px 20px;
}
.section-collapsible.section-collapsed {
    padding-bottom: 18px;
}
/* Direct child wrapper that holds h2 + buttons. Targets BOTH the
 * `.section-header` class AND the inline-style flex divs that some
 * sections use, so the header looks identical regardless of markup. */
.section-collapsible > .section-header,
.section-collapsible > div:first-child {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}
.section-collapsible > .section-header h2,
.section-collapsible > div:first-child > h2,
.section-collapsible > h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--fg-0);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
.section-collapsible > .section-header h2 .muted,
.section-collapsible > div:first-child > h2 .muted,
.section-collapsible > h2 .muted {
    font-weight: 400;
    font-size: 12px;
    color: var(--fg-2);
}
.section-collapsible > .section-header > div,
.section-collapsible > .section-actions,
.section-collapsible > div:first-child > div {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.section-collapsible .section-body {
    margin-top: 16px;
}
.section-collapsible.section-collapsed .section-body {
    display: none !important;
}
/* Override the legacy `<dl class="kv">` if any survives. */
dl.kv {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 6px 16px;
    margin: 0;
}
dl.kv dt { color: var(--fg-2); font-size: 12px; }
dl.kv dd { margin: 0; color: var(--fg-1); }



/* Inventory grid (Aggregated + per-account) */

.inv-grid, .account-inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
}
.account-inv-row { background: var(--bg-1); }
.account-inv-row td { padding: 14px 20px; }
.account-inv-empty { color: var(--fg-3); padding: 20px; text-align: center; }

.inv-tile {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    padding: 8px;
    gap: 6px;
    font-size: 11px;
    transition: border-color .12s, background .12s;
}
.inv-tile-clickable { cursor: pointer; }
.inv-tile-clickable:hover {
    background: var(--bg-3);
    border-color: var(--accent-dim);
}
.inv-tile-held { opacity: 0.65; }

.inv-tile-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1.6 / 1;
    background: var(--bg-0);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.inv-tile-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.inv-tile-count {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 1px 6px;
    background: rgba(199, 140, 255, 0.85);
    color: #fff;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
}
.inv-tile-hold-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    padding: 1px 6px;
    background: rgba(77, 61, 16, 0.95);
    color: var(--amber);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 600;
}

.inv-tile-name {
    color: var(--fg-1);
    font-size: 11px;
    line-height: 1.3;
    min-height: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.inv-tile-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px;
}
.inv-tile-total {
    color: var(--green);
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 12px;
}
.inv-tile-unit {
    color: var(--fg-3);
    font-family: var(--font-mono);
    font-size: 10px;
}

/* Pager (inventory grid) */

.inv-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 16px 0 4px;
}
.pager-btn {
    padding: 5px 10px;
    background: var(--bg-3);
    color: var(--fg-1);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.pager-btn:hover { background: var(--bg-4); color: var(--fg-0); }
.pager-btn.is-active {
    background: var(--accent-dim);
    color: #fff;
    border-color: var(--accent);
}
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Main account card (hero above accounts) */

.main-card {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    padding: 18px 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.main-card-head {
    display: flex;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.main-avatar, .main-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: var(--r-sm);
    background: var(--bg-3);
    flex-shrink: 0;
    object-fit: cover;
}
.main-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-3);
    font-size: 24px;
}
.main-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg-0);
    margin: 0 0 4px;
}
.main-sub { font-size: 12px; color: var(--fg-2); }
.main-card-meta {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--fg-2);
    flex-wrap: wrap;
}
.main-card-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Listings tables (sells / buy orders) */

.listing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.listing-table th, .listing-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-1);
    text-align: left;
}
.listing-table th {
    color: var(--fg-2);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.listing-table tbody tr:hover { background: var(--bg-2); }
.listing-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Item cell — image + name, side-by-side. Without an explicit size on
   the image, Steam's CDN serves at its native resolution (~200×150)
   which blows up the row height. Constrain to a thumbnail. */
.prof-listing-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.prof-listing-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prof-listing-img {
    width: 48px;
    height: 36px;
    object-fit: contain;
    background: var(--bg-0);
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    flex-shrink: 0;
}

.listings-refresh-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--fg-2);
}
.listings-refresh-bar {
    display: inline-block;
    width: 140px;
    height: 4px;
    background: var(--bg-3);
    border-radius: 2px;
    overflow: hidden;
}
.listings-refresh-fill {
    display: block;
    height: 100%;
    background: var(--accent-2);
    transition: width .25s ease-out;
}

/* Bulk progress (modal-side) */

.bulk-progress {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    margin: 12px 0;
}
.bulk-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.bulk-progress-status {
    font-size: 12px;
    color: var(--fg-1);
    font-weight: 500;
    flex-shrink: 0;
}
.bulk-progress-counts {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-2);
    flex-shrink: 0;
    white-space: nowrap;
}
/* The bar lives in the middle of a flex row (status | bar | counts).
   Without flex:1 it collapses to 0 width — the fill % becomes invisible
   even when the JS is updating it. inline-block + min-width keeps the
   track visible while flex:1 lets it fill remaining space. */
.bulk-progress-bar {
    flex: 1 1 auto;
    display: inline-block;
    min-width: 120px;
    height: 5px;
    background: var(--bg-3);
    border-radius: 2px;
    overflow: hidden;
}
.bulk-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width .25s ease-out;
}
.bulk-progress-log {
    max-height: 140px;
    overflow-y: auto;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-2);
    line-height: 1.5;
}

/* Buy / sell modal INPUTS (NOT .bulk-sell — that's a container,
 * styled as a flex row below). */

.bulk-sell-input, .buy-price-input, .buy-qty-input {
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    color: var(--fg-0);
    padding: 5px 8px;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 12px;
    min-width: 0;
    width: 100px;
}
.buy-qty-input { width: 60px; }
.bulk-sell-input:focus, .buy-price-input:focus, .buy-qty-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Modal (item detail) */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
/* `display: flex` above clobbers the native `[hidden]` semantics.
 * Restore it so a hidden modal stays hidden on page load. */
.modal-backdrop[hidden] { display: none !important; }
.modal-dialog {
    background: var(--bg-1);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    width: min(880px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
/* Buy from Steam Market modal — needs more horizontal room than the
   default 880px because the eligible-accounts table has 6 columns
   (login, persona, balance, max price, qty, action) plus per-row
   inputs. At 880px the Action column got clipped and a horizontal
   scrollbar appeared (operator screenshot 2026-04-29). 1100px on
   wide screens, fall back to 96vw on narrow ones. */
#buy-modal .modal-dialog {
    width: min(1100px, 96vw);
}
#buy-modal #buy-modal-content { padding: 0 4px; }
#buy-modal .profile-table {
    width: 100%;
    table-layout: auto;
}
#buy-modal .profile-table th,
#buy-modal .profile-table td {
    padding: 6px 8px;
    white-space: nowrap;
}
/* Per-row inputs already have explicit widths inline; just ensure
   the cells around them don't stretch awkwardly. */
#buy-modal .profile-table td.num { font-variant-numeric: tabular-nums; }
.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-1);
    gap: 16px;
}
.modal-close {
    background: transparent;
    color: var(--fg-2);
    border: 0;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.modal-close:hover { color: var(--fg-0); }

.modal-item-img,
.modal-item-img-placeholder {
    width: 92px;
    height: 64px;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    object-fit: contain;
    flex-shrink: 0;
}
.modal-item-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg-0);
    margin: 0 0 4px;
}
.modal-item-mhn {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
}
.modal-item-meta {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--fg-2);
}
.modal-item-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.modal-tag {
    padding: 2px 8px;
    background: var(--bg-3);
    color: var(--fg-1);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
.modal-tag-warn {
    background: var(--amber-d);
    color: var(--amber);
}
.modal-section { padding: 16px 20px; border-bottom: 1px solid var(--border-1); }
.modal-section:last-child { border-bottom: 0; }
.modal-section-head {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.modal-holders { width: 100%; border-collapse: collapse; }
.modal-holders th, .modal-holders td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-1);
    font-size: 12px;
    text-align: left;
}
.modal-holders th {
    color: var(--fg-2);
    font-size: 10px;
    text-transform: uppercase;
}
.modal-holders tbody tr:hover { background: var(--bg-2); }

.form-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.form-control {
    display: block;
    width: 100%;
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    color: var(--fg-0);
    padding: 7px 12px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-family: inherit;
}
.form-control:focus {
    outline: none;
    border-color: var(--accent);
}

.count-cell {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}


/* main-card MUST be vertical: header strip on top, items grid below
 * spanning the full width. The earlier flex-row layout shoved the
 * grid into the right column and squeezed it to ~3 tiles. */
.main-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
}
.main-card-head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}
.main-card-meta {
    flex: 1;
    min-width: 0;
    display: block;
    margin: 0;
}
.main-card-meta .main-name { margin: 0 0 4px; }
.main-card-meta .main-sub { margin-top: 2px; }
.main-card-actions { margin-left: auto; }

/* When account-inv-grid is INSIDE main-card it should take the full
 * remaining width (not be squeezed by main-card-head's flex). */
/* Compact tile sizing — used by BOTH main-card AND the aggregated
 * inventory grid (#agg-inv-grid). Operator spec 2026-05-02: aggregate
 * tiles should match main-card sizing so the page reads as one
 * consistent grid density rather than two visually competing scales.
 *
 * `.inv-grid` is currently only used by #agg-inv-grid in the
 * profile detail; if a new caller wants the original 140px tiles
 * they should use a different class. */
.main-card .account-inv-grid,
.inv-grid {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 6px;
}
.main-card .inv-tile,
.inv-grid .inv-tile {
    padding: 5px;
    gap: 4px;
    font-size: 10px;
}
.main-card .inv-tile-img,
.inv-grid .inv-tile-img {
    aspect-ratio: 1.6 / 1;
}
.main-card .inv-tile-name,
.inv-grid .inv-tile-name {
    font-size: 10px;
    line-height: 1.2;
    min-height: 24px;
    -webkit-line-clamp: 2;
}
.main-card .inv-tile-total,
.inv-grid .inv-tile-total { font-size: 11px; }
.main-card .inv-tile-unit,
.inv-grid .inv-tile-unit  { font-size: 9px; }
.main-card .inv-tile-count,
.inv-grid .inv-tile-count {
    padding: 0 4px;
    font-size: 9px;
    line-height: 1.4;
}
.main-card .inv-tile-hold-badge,
.inv-grid .inv-tile-hold-badge {
    padding: 0 4px;
    font-size: 8px;
}

/* Price grid inside the item-detail modal. */
.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.price-cell {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.price-cell-ccy {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.price-cell-val {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg-0);
    font-family: var(--font-mono);
}
.price-cell-val .muted { font-weight: 400; font-size: 13px; }
.price-cell-meta {
    font-size: 10px;
    color: var(--fg-3);
    display: flex;
    gap: 8px;
}
.price-cell .btn {
    margin-top: 4px;
    align-self: flex-start;
    font-size: 11px;
    padding: 5px 10px;
}

/* modal-section-head needs a proper flex layout when it has
 * "Prices" h3 + "Refresh all" button side by side. */
.modal-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.modal-section-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.modal-section h3 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-1);
}

/* Bulk-sell row: horizontal flex with label + per-currency inputs +
 * action buttons. Wraps gracefully on narrow screens. */
.bulk-sell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    margin: 12px 0;
}
.bulk-label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bulk-sell .btn {
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
}
.bulk-sell-input, .sell-price-input, .buy-price-input, .buy-qty-input {
    width: 90px;
    padding: 5px 8px;
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    color: var(--fg-0);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 12px;
    min-width: 0;
}
.buy-qty-input { width: 60px; }


/* Per-row sell controls inside the holders table.
 * Layout: [input] [ccy chip] [Sell btn] then projection BELOW
 * as a compact muted line (smaller font, no extra margin). */
/* Per-row sell controls: flex row [input] [ccy] [Sell btn], with the
 * sell-projection on its own line below. Flex (not grid) so each
 * child takes its natural width without auto-track collapse. */
.sell-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.sell-controls .sell-price-input {
    flex: 0 0 90px;        /* fixed-width input, no shrink */
    width: 90px;
    padding: 5px 8px;
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    color: var(--fg-0);
    font-family: var(--font-mono);
    font-size: 12px;
    box-sizing: border-box;
}
.sell-controls .sell-price-input:focus {
    outline: none;
    border-color: var(--accent);
}
.sell-controls .sell-ccy {
    flex: 0 0 auto;
    color: var(--fg-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
}
.sell-controls .btn-sell {
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    min-width: 56px;
    justify-content: center;
}
.sell-controls .sell-projection {
    flex: 1 0 100%;          /* full width on next row */
    color: var(--fg-3);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sell-projection .sp-net    { color: var(--green); }
.sell-projection .sp-bal    { color: var(--fg-2); }
.sell-projection .sp-loss   { color: var(--red); }

/* Tighten the bulk-sell row so 5 controls + 2 inputs fit one line at
 * 1200px. Smaller gaps, smaller buttons, no wrap of inner button text. */
.bulk-sell {
    gap: 8px !important;
    padding: 8px 10px !important;
}
.bulk-sell .btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
}
.bulk-sell-input {
    width: 80px !important;
    padding: 4px 6px !important;
}
.bulk-sell .bulk-label {
    margin-right: 2px;
}


/* Modal head — proper flex layout: image | meta column | flexible
 * tag wrap area. Close button is absolute top-right of dialog. */
.modal-dialog { position: relative; }
.modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--fg-2);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}
.modal-close:hover {
    background: var(--bg-3);
    color: var(--fg-0);
    border-color: var(--border-2);
}

.modal-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 48px 18px 20px;
    border-bottom: 1px solid var(--border-1);
}
.modal-item-img,
.modal-item-img-placeholder {
    width: 96px;
    height: 72px;
    flex-shrink: 0;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    object-fit: contain;
}
.modal-item-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.modal-item-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--fg-0);
    line-height: 1.2;
}
.modal-item-mhn { line-height: 1; }
.modal-item-mhn code {
    background: var(--bg-3);
    color: var(--fg-2);
    font-size: 11px;
    padding: 2px 6px;
    word-break: break-all;
}
.modal-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}
.modal-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    background: var(--bg-3);
    color: var(--fg-1);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}
.modal-tag-warn {
    background: var(--amber-d);
    color: var(--amber);
    border-color: var(--amber);
}

/* ───────────── Cost Tracker (page /costs) ────────────────────── */

/* Form-row wrapper used by the Add-expense modal — vertical stack
   with consistent spacing. Distinct from `.form-control` which only
   styles the input itself. */
.form-row {
    display: block;
    margin-bottom: 10px;
}
.form-row > input[type="text"],
.form-row > input[type="number"],
.form-row > input[type="date"],
.form-row > textarea,
.form-row > select {
    display: block;
    width: 100%;
    background: var(--bg-3);
    color: var(--fg-1);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
    transition: border-color .12s;
}
.form-row > input:focus,
.form-row > textarea:focus,
.form-row > select:focus {
    border-color: var(--accent);
    outline: none;
}
.form-row > .form-label {
    /* `.form-label` is defined elsewhere; nest under .form-row for
       inheritance of the consistent margin. */
    margin-bottom: 4px;
}

/* Grand total card — single PLN-converted summary at the top of /costs.
   Replaces the old per-currency cards + breakdown which the operator
   considered "useless split" (2026-05-04 feedback). The breakdown line
   under the big number shows the source-currency raw amounts as small
   pills, so the conversion is auditable without bloating the UI. */
.grand-total-card {
    background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md, 8px);
    padding: 18px 22px;
    margin: 14px 0 20px;
}
.grand-total-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.grand-total-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    font-weight: 600;
}
.grand-total-value {
    font-size: 32px;
    font-weight: 600;
    color: var(--fg-0);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.grand-total-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-1);
}
.grand-total-pill {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    color: var(--fg-2);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.grand-total-warn {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(240, 164, 88, 0.12);
    border: 1px solid rgba(240, 164, 88, 0.4);
    border-radius: 6px;
    color: #f0c98a;
    font-size: 12px;
}

/* Project-scoped expenses table inside each project section + the
   slot-link pill that shows which slot a cost is wired to. */
.project-expenses-table {
    margin-top: 4px;
    font-size: 12px;
}
.project-expenses-table th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-3);
}
.slot-link-pill {
    display: inline-block;
    background: rgba(110, 138, 255, 0.12);
    color: #a4b6ff;
    border: 1px solid rgba(110, 138, 255, 0.4);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 500;
}

/* ────────────────────────────────────────────────────────────────
 * Cost Tracker: Project sections (hardware + ip)
 *
 * Each project gets:
 *   - title + subtitle + stats row (4 big numbers)
 *   - components grid with slot-cards (status dot, model, details,
 *     planned price, actual spent pills)
 *   - specs grid (key/value reference blocks)
 *   - setup steps (numbered checklist)
 *   - warnings list (yellow accent)
 *   - total bar with progress percentage
 *
 * Visual cues:
 *   - status dots:    green=done, blue=ordered, orange=todo
 *   - card borders:   tinted by status_color so the eye scans quickly
 *   - card hover:     interactive feel for admins (clickable -> edit modal)
 * ──────────────────────────────────────────────────────────────── */

.project-section {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md, 8px);
    padding: 22px 24px 18px;
    margin: 14px 0 18px;
}
.project-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.project-head-titles { flex: 1; min-width: 0; }
.project-name {
    font-size: 22px;
    font-weight: 600;
    color: var(--fg-0);
    margin: 0 0 2px;
}
.project-subtitle {
    font-size: 13px;
    color: var(--fg-3);
    margin: 0;
}
.project-head-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* <details>/<summary> collapse: hide the default triangle and put our
   own arrow on the project name so the whole header is the click target. */
details.project-section { display: block; }
details.project-section > summary {
    list-style: none;
    cursor: pointer;
}
details.project-section > summary::-webkit-details-marker { display: none; }
details.project-section > summary::marker              { content: ''; }
details.project-section .project-name::before {
    content: '▾';
    display: inline-block;
    margin-right: 6px;
    color: var(--fg-3);
    transition: transform .15s ease;
    transform: rotate(0deg);
}
details.project-section:not([open]) .project-name::before {
    transform: rotate(-90deg);
}
details.project-section .project-body {
    padding-top: 8px;
}

/* Top-of-project progress bars (budget + readiness, side by side). */
.project-progress-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 14px 0 0;
}
.project-progress {
    display: flex;
    flex-direction: column;
}
.project-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    font-size: 11px;
}
.project-progress-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--fg-3);
}
.project-progress-num {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--fg-1, var(--fg-0));
    font-weight: 600;
}
.project-progress-track {
    height: 8px;
    background: var(--bg-2);
    border-radius: 999px;
    overflow: hidden;
}
.project-progress-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #6e8aff 0%, #a4b6ff 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.project-progress-fill.is-ready {
    background: linear-gradient(90deg, #6fdfa3 0%, #a8e7c4 100%);
}
.project-progress-fill.is-over {
    background: linear-gradient(90deg, #f25f5c 0%, #ff8e9a 100%);
}

@media (max-width: 700px) {
    .project-progress-row { grid-template-columns: 1fr; }
}

/* Slot quantity badge + mini progress bar inside each component card. */
.slot-qty-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-1);
}
.slot-qty-text {
    font-size: 11px;
    color: var(--fg-2);
    margin-bottom: 4px;
}
.slot-qty-num {
    color: var(--fg-0);
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.slot-qty-track {
    height: 4px;
    background: var(--bg-1);
    border-radius: 999px;
    overflow: hidden;
}
.slot-qty-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #6fdfa3 0%, #6e8aff 100%);
    border-radius: 999px;
    transition: width 0.25s ease;
}

/* Big number stats row, like the HTML mockup */
.project-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
}
.project-stat {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md, 8px);
    padding: 14px 12px;
    text-align: center;
}
.project-stat-num {
    font-size: 28px;
    font-weight: 600;
    color: var(--fg-0);
    line-height: 1.05;
}
.project-stat-lbl {
    font-size: 11px;
    color: var(--fg-3);
    margin-top: 4px;
    text-transform: lowercase;
}

.section-title-line {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    margin: 22px 0 10px;
}

/* Inner-section collapse: each subsection (Components / Specs /
   Setup steps / Warnings / Expenses inside a project) is a <details>
   so it can fold independently of the parent project. The summary
   reuses .section-title-line styling and adds a chevron via ::before. */
details.project-subsection {
    display: block;
    margin: 22px 0 0;
}
details.project-subsection > summary {
    list-style: none;
    cursor: pointer;
    margin: 0 0 10px;
}
details.project-subsection > summary::-webkit-details-marker { display: none; }
details.project-subsection > summary::marker              { content: ''; }
details.project-subsection > summary::before {
    content: '▾';
    display: inline-block;
    margin-right: 6px;
    color: var(--fg-3);
    font-size: 10px;
    transition: transform .15s ease;
    transform: rotate(0deg);
}
details.project-subsection:not([open]) > summary::before {
    transform: rotate(-90deg);
}
details.project-subsection > summary.section-title-line {
    /* Inherit from .section-title-line but kill the bottom margin
       since it's now a flex-row with the chevron. */
    margin: 22px 0 10px;
}

/* Components grid: cards laid out in a responsive grid */
.slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.slot-card {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md, 8px);
    padding: 14px 16px;
    transition: border-color .12s ease, transform .12s ease;
    cursor: default;
    position: relative;
}
.slot-card[onclick] { cursor: pointer; }
.slot-card[onclick]:hover {
    border-color: var(--accent, #6e8aff);
    transform: translateY(-1px);
}
/* Tint the left border by status_color so the eye scans the grid */
.slot-card.status-green  { border-left: 3px solid #6fdfa3; }
.slot-card.status-blue   { border-left: 3px solid #6e8aff; }
.slot-card.status-orange { border-left: 3px solid #f0a458; }
.slot-card.status-red    { border-left: 3px solid #f25f5c; }
.slot-card.status-gray   { border-left: 3px solid var(--fg-3); }

.slot-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    gap: 8px;
}
.slot-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.slot-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-0);
    font-family: ui-monospace, SFMono-Regular, monospace;
}

/* Two-line price stack on the slot card head: "план / факт" with the
   actual amount tinted green if matching plan, red if exceeding it,
   neutral otherwise. */
.slot-prices {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-end;
    text-align: right;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.slot-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.slot-price-lbl {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
    min-width: 28px;
    text-align: right;
}
.slot-price-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-0);
}
.slot-price-row.is-over .slot-price-val   { color: #ff8e9a; }
.slot-price-row.is-match .slot-price-val  { color: #6fdfa3; }

/* Compact stats line under each project progress bar (план / факт). */
.project-progress-stats {
    margin-top: 4px;
    font-size: 10px;
    color: var(--fg-2);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.project-progress-stats strong {
    color: var(--fg-0);
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-weight: 600;
}

/* Two stacked mini-bars (Заказано + Факт) showing commitment + actual
   spend relative to the same total-planned denominator. Different
   colors per row so the operator immediately reads the deviation. */
.budget-dual-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}
.budget-bar-row {
    display: grid;
    grid-template-columns: 64px 1fr 110px;
    align-items: center;
    gap: 8px;
}
.budget-bar-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-3);
    text-align: right;
}
.budget-bar-track {
    height: 8px;
    background: var(--bg-2);
    border-radius: 999px;
    overflow: hidden;
}
.budget-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.budget-bar-fill.is-committed {
    background: linear-gradient(90deg, #6e8aff 0%, #a4b6ff 100%);
}
.budget-bar-fill.is-actual {
    background: linear-gradient(90deg, #6fdfa3 0%, #a8e7c4 100%);
}
.budget-bar-fill.is-over {
    background: linear-gradient(90deg, #f25f5c 0%, #ff8e9a 100%);
}
.budget-bar-num {
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: var(--fg-1, var(--fg-0));
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .budget-bar-row {
        grid-template-columns: 50px 1fr 90px;
        gap: 6px;
    }
}
.slot-model {
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-1, var(--fg-0));
    margin-bottom: 6px;
}
.slot-details {
    font-size: 12px;
    color: var(--fg-2);
    line-height: 1.5;
    white-space: pre-wrap;
}
.slot-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--fg-3);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-1);
}
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.dot-green  { background: #6fdfa3; }
.status-dot.dot-blue   { background: #6e8aff; }
.status-dot.dot-orange { background: #f0a458; }
.status-dot.dot-red    { background: #f25f5c; }
.status-dot.dot-gray   { background: var(--fg-3); }

.slot-spent {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-1);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.slot-spent-pill {
    background: rgba(110, 138, 255, 0.12);
    color: #a4b6ff;
    border: 1px solid rgba(110, 138, 255, 0.4);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-weight: 500;
}

/* Specs (key/value blocks) */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.spec-card {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md, 8px);
    padding: 12px 14px;
    position: relative;
}
.spec-card-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.spec-card-body {
    font-size: 12px;
    color: var(--fg-1, var(--fg-0));
    line-height: 1.5;
    margin: 0;
    font-family: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}
.spec-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-1);
}

/* Setup steps */
.steps-card {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md, 8px);
    padding: 6px 14px;
}
.setup-step {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-1);
    align-items: flex-start;
}
.setup-step:last-child { border-bottom: none; }
.step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--fg-0);
    color: var(--bg-0);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.step-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fg-1, var(--fg-0));
}
.step-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Warnings */
.warnings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.warning-card {
    background: rgba(240, 164, 88, 0.10);
    border: 1px solid rgba(240, 164, 88, 0.4);
    border-radius: var(--r-md, 8px);
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
.warning-body {
    flex: 1;
    font-size: 13px;
    color: #f0c98a;
    line-height: 1.5;
}
.warning-body strong { color: #ffd9a0; font-weight: 600; }
.warning-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.project-note-add-row {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

/* Total bar */
.project-total-bar {
    background: var(--bg-0, #0e0e13);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md, 8px);
    padding: 16px 20px;
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.project-total-amounts {
    text-align: right;
    min-width: 200px;
}
.project-total-amount {
    font-size: 26px;
    font-weight: 600;
    color: var(--fg-0);
}
.project-total-bar-track {
    height: 6px;
    background: var(--bg-2);
    border-radius: 999px;
    margin-top: 8px;
    overflow: hidden;
}
.project-total-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #6fdfa3 0%, #6e8aff 100%);
    border-radius: 999px;
    transition: width .3s ease;
}

/* FX rates section */
.fx-section {
    margin: 18px 0;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md, 8px);
    padding: 12px 16px;
}
.fx-section summary {
    cursor: pointer;
    color: var(--fg-2);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.fx-section[open] summary { color: var(--accent, #6e8aff); }
.fx-table-wrap { margin-top: 12px; }
.fx-table { width: auto; border-collapse: collapse; font-size: 12px; }
.fx-table th, .fx-table td {
    padding: 5px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-1);
}
.fx-table th {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--fg-3);
}
.fx-rate-input {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    color: var(--fg-0);
    padding: 3px 6px;
    border-radius: 4px;
    width: 90px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
}
.fx-rate-status { font-size: 11px; }
.fx-rate-status.ok { color: #6fdfa3; }
.fx-rate-status.err { color: #ff8e9a; }

/* Tiny inline action buttons (edit/delete inside cards) */
.btn-link-tiny {
    background: transparent;
    border: none;
    color: var(--fg-3);
    font-size: 11px;
    text-transform: lowercase;
    cursor: pointer;
    padding: 2px 4px;
    transition: color .12s ease;
}
.btn-link-tiny:hover { color: var(--accent, #6e8aff); }
.btn-link-tiny.danger:hover { color: #ff8e9a; }

.btn-ghost {
    background: transparent;
    border: 1px dashed var(--border-1);
    color: var(--fg-3);
}
.btn-ghost:hover {
    border-color: var(--accent, #6e8aff);
    color: var(--accent, #6e8aff);
}

/* ── Cost Tracker: per-currency category breakdown ───────────────
   One card per currency (PLN/USD/EUR), each holding horizontal bars
   for each category. Bar width is the category's percentage of the
   per-currency total. Currencies don't combine -- each card stands
   alone so no FX conversion is implied. Color cycle distinguishes
   categories visually; uncategorized rows land muted at the bottom. */
.cost-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin: 14px 0 0;
}
.cost-cat-card {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md, 8px);
    padding: 14px 16px 12px;
}
.cost-cat-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--border-1);
    padding-bottom: 6px;
}
.cost-cat-card-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
}
.cost-cat-card-ccy {
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-1, var(--fg-0));
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.cost-cat-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cost-cat-row {
    display: grid;
    grid-template-columns: 1fr 50px;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
}
.cost-cat-row-label {
    grid-column: 1 / 2;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}
.cost-cat-name {
    color: var(--fg-1, var(--fg-0));
    font-weight: 500;
    text-transform: capitalize;
}
.cost-cat-amount {
    color: var(--fg-2);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
}
.cost-cat-bar-track {
    grid-column: 1 / 2;
    height: 6px;
    background: var(--bg-2);
    border-radius: 999px;
    overflow: hidden;
}
.cost-cat-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent, #6e8aff);
    transition: width 0.3s ease;
}
.cost-cat-row-pct {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: center;
    text-align: right;
    font-size: 11px;
    color: var(--fg-3);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
/* Color cycle by category index. The first 8 categories pick up
   distinct hues (we cap at 8 because anything with 9+ categories per
   currency is operator soup anyway -- wraps back to color 0). Pure
   CSS, no inline JS or per-element style needed. */
.cost-cat-row[data-cat-idx="0"] .cost-cat-bar-fill { background: #6e8aff; }
.cost-cat-row[data-cat-idx="1"] .cost-cat-bar-fill { background: #6fdfa3; }
.cost-cat-row[data-cat-idx="2"] .cost-cat-bar-fill { background: #f0a458; }
.cost-cat-row[data-cat-idx="3"] .cost-cat-bar-fill { background: #d978c4; }
.cost-cat-row[data-cat-idx="4"] .cost-cat-bar-fill { background: #5cc6e0; }
.cost-cat-row[data-cat-idx="5"] .cost-cat-bar-fill { background: #f25f5c; }
.cost-cat-row[data-cat-idx="6"] .cost-cat-bar-fill { background: #c5a046; }
.cost-cat-row[data-cat-idx="7"] .cost-cat-bar-fill { background: #8a8aff; }
/* Uncategorized rows always render muted regardless of index, so the
   eye doesn't read "uncategorized = same color as my N-th real cat". */
.cost-cat-row.is-uncat .cost-cat-bar-fill {
    background: var(--fg-3) !important;
    opacity: 0.5;
}
.cost-cat-row.is-uncat .cost-cat-name {
    color: var(--fg-3);
    font-style: italic;
}

/* Receipt thumbnails on the cost list. Square 40px so the row stays
   compact; full-size view is in the lightbox. */
.cost-receipt-thumb {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    cursor: zoom-in;
    transition: border-color .12s, transform .12s;
}
.cost-receipt-thumb:hover {
    border-color: var(--accent);
    transform: scale(1.04);
}

/* Cost Tracker — payments expand row.
   Operator spec 2026-05-02: each cost can have N payments, expanded
   inline. The chevron button + sub-row CSS lives here. */
.cost-expand-btn {
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    padding: 1px 6px;
    font-size: 11px;
    color: var(--fg-2);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    line-height: 1.4;
    min-width: 22px;
}
.cost-expand-btn:hover {
    background: var(--bg-3);
    border-color: var(--accent);
}
.cost-payments-row td { padding: 14px 28px; }

/* ───────────── Account actions row — single-line, compact ──────
   Operator spec 2026-05-02: keep all per-account action buttons
   on ONE LINE in the regular accounts table. Uses flex+nowrap on
   the cell so a tight viewport scrolls horizontally rather than
   wrapping the trash button to a second row.
   `.btn-icon` strips the padding for icon-only buttons; pairs with
   `.btn-sm` for tighter overall height. */
.actions-row {
    white-space: nowrap;
}
.actions-row > .btn,
.actions-row > a.btn {
    /* Inline-flex for icon alignment without baseline shift. */
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.btn-icon {
    /* Square-ish icon button — tight padding so emoji glyph
       (16-18px) doesn't get inflated by a normal text-button's
       horizontal padding. */
    padding: 4px 7px;
    line-height: 1;
    min-width: 28px;
    justify-content: center;
}
.btn-icon img {
    /* Steam favicon (or any other tiny icon) sits centred in the
       button without inheriting bizarre spacing from `<a>`'s
       default `vertical-align: baseline`. */
    margin: 0;
    vertical-align: middle;
}