/* ── Reset & Base ──────────────────────────────────────── */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --bg: #08090b;
            --surface: #111318;
            --surface2: #181c24;
            --border: #222832;
            --text: #eceef4;
            --text-dim: #5c6480;
            --primary: #0fd9a0;
            --primary-glow: rgba(15,217,160,0.14);
            --primary-dim: #0ab87f;
            --gold: #fbbf24;
            --gold-glow: rgba(251,191,36,0.12);
            --red: #f43f5e;
            --red-glow: rgba(244,63,94,0.10);
            --blue: #38bdf8;
            --blue-glow: rgba(56,189,248,0.13);
            --radius: 14px;
            --radius-sm: 10px;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100dvh;
            padding: 0 0 100px 0;
            -webkit-font-smoothing: antialiased;
        }

        /* ── Utility ───────────────────────────────────────────── */
        .is-hidden { display: none !important; }

        /* ── Header (sticky — logo + nav + totals bar) ─────────── */
        .header {
            background: linear-gradient(180deg, #0e1117 0%, var(--bg) 100%);
            border-bottom: 1px solid rgba(15,217,160,0.12);
            padding: 18px 20px 14px;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        .logo {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .logo-img {
            width: 52px;
            height: 52px;
            border-radius: 10px;
            object-fit: cover;
            object-position: center 18%;
            flex-shrink: 0;
            box-shadow: 0 2px 12px rgba(0,0,0,0.5);
        }
        .logo-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            line-height: 1;
        }
        .header h1 {
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -0.5px;
            line-height: 1;
        }
        .header h1 .lot    { color: var(--text); }
        .header h1 .bounty { color: var(--primary); }
        .header .tagline {
            font-size: 10px;
            color: var(--text-dim);
            margin-top: 3px;
            font-weight: 500;
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }

        /* ── Tool Navigation ────────────────────────────────────── */
        .tool-nav {
            display: flex;
            gap: 6px;
            justify-content: center;
            margin-top: 12px;
            padding: 0 4px;
        }
        .tool-nav-link {
            flex: 1;
            max-width: 200px;
            padding: 8px 16px;
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            text-align: center;
            text-decoration: none;
            color: var(--text-dim);
            background: var(--surface2);
            border: 1px solid var(--border);
            transition: all 0.15s;
        }
        .tool-nav-link:hover {
            color: var(--text);
            border-color: rgba(15,217,160,0.4);
        }
        .tool-nav-link.active {
            color: var(--primary);
            background: var(--primary-glow);
            border-color: var(--primary);
        }

        /* ── Totals Bar (inside sticky header) ──────────────────── */
        /*
         * Layout: [Market $X]  [60% 70% 80% 90%]  [Offer $Y]
         * The four rate mini-buttons live in the center so the vendor
         * can change the buy rate without scrolling to the rate panel.
         */
        .totals-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
            gap: 6px;
        }
        .total-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 0 0 auto;
            min-width: 58px;
            gap: 2px;
        }
        .total-label {
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--text-dim);
        }
        .total-value {
            font-size: 16px;
            font-weight: 800;
            color: var(--text);
            letter-spacing: -0.3px;
        }
        .total-value-offer {
            color: var(--primary);
        }
        .total-divider {
            width: 1px;
            height: 32px;
            background: var(--border);
            flex-shrink: 0;
        }
        /* Rate mini-buttons — center cluster in the totals bar */
        .totals-rate-row {
            display: flex;
            gap: 4px;
            align-items: center;
            flex-shrink: 0;
        }
        .rate-mini-btn {
            padding: 5px 7px;
            background: var(--surface2);
            color: var(--text-dim);
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
            line-height: 1;
        }
        .rate-mini-btn:hover {
            color: var(--text);
            border-color: rgba(15,217,160,0.4);
        }
        .rate-mini-btn-active {
            color: var(--primary);
            background: var(--primary-glow);
            border-color: var(--primary);
        }

        /* ── Container ─────────────────────────────────────────── */
        .container {
            max-width: 480px;
            margin: 0 auto;
            padding: 16px;
        }

        /* ── Section Label ─────────────────────────────────────── */
        .section-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            padding-left: 2px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .section-label-mt { margin-top: 24px; }

        .card-count-badge {
            font-size: 10px;
            font-weight: 700;
            background: var(--primary-glow);
            color: var(--primary);
            border: 1px solid var(--primary);
            border-radius: 99px;
            padding: 1px 8px;
            letter-spacing: 0;
            text-transform: none;
        }

        /* ── Inputs & Selects ──────────────────────────────────── */
        label {
            display: block;
            font-size: 10px;
            font-weight: 600;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        .label-spacer { visibility: hidden; }

        input, select {
            width: 100%;
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 10px;
            font-size: 15px;
            font-family: 'Inter', sans-serif;
            color: var(--text);
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
            -webkit-appearance: none;
        }
        input:focus, select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-glow);
        }
        input::placeholder { color: var(--text-dim); opacity: 0.5; }
        select { cursor: pointer; }

        /* ── Buttons ───────────────────────────────────────────── */
        .btn-row {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        .btn {
            flex: 1;
            padding: 14px 16px;
            border: none;
            border-radius: var(--radius);
            font-size: 15px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
        .btn-secondary {
            background: var(--surface2);
            color: var(--text);
            border: 1px solid var(--border);
        }
        .btn-secondary:hover { background: var(--border); }
        .btn-primary {
            background: var(--primary);
            color: #000;
            font-weight: 700;
            box-shadow: 0 2px 12px var(--primary-glow);
        }
        .btn-primary:hover { background: #12f0b0; }
        .btn-primary:disabled {
            background: var(--surface2);
            color: var(--text-dim);
            cursor: not-allowed;
            box-shadow: none;
        }

        /* ── How-to Guide ─────────────────────────────────────── */
        .buy-guide-toggle {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 13px 14px;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text);
            cursor: pointer;
            margin-bottom: 10px;
            transition: border-color 0.15s, background 0.15s;
        }
        .buy-guide-toggle:hover {
            border-color: var(--primary-dim);
            background: var(--surface2);
        }
        .buy-guide-toggle[aria-expanded="true"] {
            border-color: rgba(15,217,160,0.3);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: 0;
        }
        .buy-guide-chevron {
            font-size: 9px;
            color: var(--text-dim);
            transition: transform 0.2s;
        }
        .buy-guide-chevron.open { transform: rotate(180deg); }
        .buy-guide-panel {
            background: var(--surface);
            border: 1px solid rgba(15,217,160,0.3);
            border-top: none;
            border-bottom-left-radius: var(--radius);
            border-bottom-right-radius: var(--radius);
            padding: 14px 16px;
            margin-bottom: 14px;
            animation: slideIn 0.18s ease-out;
        }
        .buy-guide-steps {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .buy-guide-steps li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        .bgs-num {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary-glow);
            border: 1px solid var(--primary);
            color: var(--primary);
            font-size: 11px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 1px;
        }
        .bgs-text {
            font-size: 12.5px;
            line-height: 1.55;
            color: var(--text);
        }
        .bgs-text strong { color: var(--primary); font-weight: 600; }
        .bgs-text em { color: var(--text-dim); font-style: normal; }

        /* ── Quick Add Form ────────────────────────────────────── */
        .quick-add {
            background: var(--surface);
            border: 1px solid var(--border);
            border-top: 1px solid rgba(15,217,160,0.18);
            border-radius: var(--radius);
            padding: 14px;
            margin-bottom: 4px;
        }
        .qa-row { margin-bottom: 10px; }
        .qa-row:last-of-type { margin-bottom: 0; }
        .qa-row-details {
            display: grid;
            grid-template-columns: 1fr 80px auto;
            gap: 8px;
            align-items: end;
        }
        .btn-add {
            width: 100%;
            padding: 10px 14px;
            background: var(--primary);
            color: #000;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s;
        }
        .btn-add:hover { background: #12f0b0; }
        .btn-add:active { background: var(--primary-dim); transform: scale(0.98); }

        .qa-error {
            font-size: 13px;
            color: var(--red);
            margin-top: 8px;
            padding: 8px 10px;
            background: var(--red-glow);
            border-radius: var(--radius-sm);
            border: 1px solid rgba(244,63,94,0.25);
        }

        /* ── Autocomplete Dropdown ─────────────────────────────── */
        .autocomplete-wrap {
            position: relative;
        }
        /* Clear (×) button — sits inside the input on the right */
        .qa-name-clear {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--text-dim);
            font-size: 18px;
            line-height: 1;
            padding: 2px 4px;
            cursor: pointer;
            border-radius: 4px;
            transition: color 0.15s;
            z-index: 10;
        }
        .qa-name-clear:hover { color: var(--text); }
        /* Push input text left so it doesn't run under the × button */
        .autocomplete-wrap input { padding-right: 32px; }
        .autocomplete-dropdown {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: var(--surface2);
            border: 1px solid var(--primary);
            border-radius: var(--radius-sm);
            box-shadow: 0 8px 24px rgba(0,0,0,0.55);
            z-index: 200;
            overflow: hidden;
            max-height: 280px;
            overflow-y: auto;
        }
        .ac-item {
            padding: 10px 12px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text);
            cursor: pointer;
            border-bottom: 1px solid var(--border);
            transition: background 0.1s, color 0.1s;
            user-select: none;
        }
        .ac-item:last-child {
            border-bottom: none;
        }
        .ac-item:hover,
        .ac-item.ac-item-active {
            background: var(--primary-glow);
            color: var(--primary);
        }

        /* ── Empty State ───────────────────────────────────────── */
        .empty-state {
            text-align: center;
            padding: 28px 16px;
            border: 1px dashed var(--border);
            border-radius: var(--radius);
            margin-bottom: 4px;
        }
        .empty-primary {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-dim);
            margin-bottom: 4px;
        }
        .empty-sub {
            font-size: 13px;
            color: var(--text-dim);
            opacity: 0.6;
        }

        /* ── Buy Card (session card items) ─────────────────────── */
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .buy-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-top: 1px solid rgba(15,217,160,0.12);
            border-radius: var(--radius);
            padding: 12px 14px;
            margin-bottom: 8px;
            animation: slideIn 0.18s ease-out;
            transition: opacity 0.2s;
        }
        .buy-card.excluded {
            opacity: 0.4;
            border-color: var(--border);
            border-top-color: var(--border);
        }

        /* Display mode */
        .bc-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
        }
        .bc-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .excluded .bc-name {
            text-decoration: line-through;
            color: var(--text-dim);
        }
        .bc-remove {
            background: none;
            border: none;
            color: var(--text-dim);
            font-size: 20px;
            line-height: 1;
            padding: 0 2px;
            cursor: pointer;
            flex-shrink: 0;
            transition: color 0.15s;
        }
        .bc-remove:hover { color: var(--red); }

        .bc-bottom {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .condition-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            flex-shrink: 0;
        }
        .cond-nm  { color: var(--primary); background: var(--primary-glow);         border: 1px solid rgba(15,217,160,0.3); }
        .cond-lp  { color: #a3e635;        background: rgba(163,230,53,0.10);       border: 1px solid rgba(163,230,53,0.3); }
        .cond-mp  { color: var(--gold);    background: var(--gold-glow);            border: 1px solid rgba(251,191,36,0.3); }
        .cond-hp  { color: #fb923c;        background: rgba(251,146,60,0.10);       border: 1px solid rgba(251,146,60,0.3); }
        .cond-dmg { color: var(--red);     background: var(--red-glow);             border: 1px solid rgba(244,63,94,0.3); }

        .bc-values {
            flex: 1;
            font-size: 13px;
        }
        .bc-market {
            font-weight: 700;
            color: var(--text);
        }
        .bc-offer-per-card {
            color: var(--primary);
            font-size: 12px;
            margin-left: 4px;
        }

        .bc-actions {
            display: flex;
            gap: 6px;
            margin-left: auto;
        }
        .bc-action-btn {
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-dim);
            font-size: 12px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            padding: 5px 10px;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
        .bc-action-btn:hover {
            color: var(--text);
            border-color: rgba(15,217,160,0.4);
        }
        .bc-action-btn.excl-active {
            color: var(--gold);
            background: var(--gold-glow);
            border-color: rgba(251,191,36,0.4);
        }

        /* Edit mode */
        .buy-card-editing {
            border-top-color: var(--gold);
            border-color: rgba(251,191,36,0.3);
        }
        .bc-edit-fields { margin-bottom: 10px; }
        .bc-edit-name-row { margin-bottom: 8px; }
        .bc-edit-bottom {
            display: grid;
            grid-template-columns: 1fr 80px;
            gap: 8px;
        }
        .bc-edit-actions {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }
        .bc-save-btn {
            flex: 1;
            padding: 9px;
            background: var(--primary);
            color: #000;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: background 0.15s;
        }
        .bc-save-btn:hover { background: #12f0b0; }
        .bc-cancel-btn {
            padding: 9px 16px;
            background: var(--surface2);
            color: var(--text-dim);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
        .bc-cancel-btn:hover { color: var(--text); }

        /* ── Margin Panel ──────────────────────────────────────── */
        .margin-panel {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 14px;
            margin-bottom: 4px;
        }
        /* ── Fees Toggle ────────────────────────────────────────── */
        .fees-toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }
        .fees-toggle-label-group {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .fees-toggle-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
        }
        .fees-toggle-desc {
            font-size: 11px;
            color: var(--text-dim);
        }
        .fees-toggle-btn {
            flex-shrink: 0;
            min-width: 52px;
            padding: 7px 14px;
            background: var(--surface2);
            color: var(--text-dim);
            border: 1px solid var(--border);
            border-radius: 99px;
            font-size: 13px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.18s;
            text-align: center;
        }
        .fees-toggle-btn:hover {
            color: var(--text);
            border-color: rgba(15,217,160,0.4);
        }
        .fees-toggle-btn-on {
            color: var(--primary);
            background: var(--primary-glow);
            border-color: var(--primary);
        }

        .margin-divider {
            height: 1px;
            background: var(--border);
            margin-bottom: 14px;
        }

        .margin-presets {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-bottom: 12px;
        }
        .margin-btn {
            padding: 10px 6px;
            background: var(--surface2);
            color: var(--text-dim);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            text-align: center;
            transition: all 0.15s;
        }
        .margin-btn:hover {
            color: var(--text);
            border-color: rgba(15,217,160,0.4);
        }
        .margin-btn-active {
            color: var(--primary);
            background: var(--primary-glow);
            border-color: var(--primary);
        }

        .margin-custom-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .margin-custom-row label {
            margin-bottom: 0;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .margin-custom-wrap {
            position: relative;
            max-width: 100px;
        }
        .margin-custom-wrap input {
            padding-right: 28px;
        }
        .margin-pct-sym {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
            font-weight: 600;
            color: var(--text-dim);
            pointer-events: none;
        }
        .margin-hint {
            font-size: 12px;
            color: var(--text-dim);
            line-height: 1.5;
        }

        /* ── Offer Summary ─────────────────────────────────────── */
        .offer-summary {
            background: var(--surface);
            border: 1px solid var(--border);
            border-top: 2px solid var(--primary);
            border-radius: var(--radius);
            padding: 16px;
            margin-top: 16px;
        }
        .offer-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            border-bottom: 1px solid var(--border);
        }
        .offer-line:last-of-type { border-bottom: none; }
        .offer-line-result {
            padding-top: 12px;
            margin-top: 4px;
            border-top: 2px solid var(--border);
        }
        .offer-line-label {
            font-size: 13px;
            color: var(--text-dim);
        }
        .offer-line-val {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
        }
        .offer-price-big {
            font-size: 28px;
            font-weight: 800;
            color: var(--primary);
            letter-spacing: -0.5px;
        }
        .offer-footnote {
            font-size: 11px;
            color: var(--text-dim);
            margin-top: 12px;
            line-height: 1.5;
            opacity: 0.7;
        }

        /* ── Cross-Tool Transfer ───────────────────────────────── */
        .btn-transfer {
            display: block;
            width: 100%;
            margin-top: 10px;
            padding: 11px 16px;
            background: none;
            color: var(--text-dim);
            border: 1px dashed var(--border);
            border-radius: var(--radius);
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            text-align: center;
            transition: all 0.18s;
        }
        .btn-transfer:hover {
            color: var(--primary);
            border-color: var(--primary);
            border-style: solid;
            background: var(--primary-glow);
        }
        .transfer-notice {
            display: none;
            margin-top: 10px;
            padding: 10px 14px;
            background: var(--primary-glow);
            border: 1px solid rgba(15,217,160,0.3);
            border-radius: var(--radius-sm);
            font-size: 13px;
            color: var(--primary);
            font-weight: 500;
        }
        .transfer-notice.visible { display: block; }

        /* ── Save Deal Button ──────────────────────────────────── */
        .btn-save-deal {
            width: 100%;
            margin-top: 10px;
            padding: 16px;
            background: var(--primary-glow);
            color: var(--primary);
            border: 1px solid var(--primary);
            border-radius: var(--radius);
            font-size: 16px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.18s;
            letter-spacing: 0.2px;
        }
        .btn-save-deal:hover {
            background: var(--primary);
            color: #000;
        }
        .btn-save-deal:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* ── Deal History Panel ────────────────────────────────── */
        .history-panel {
            margin-top: 28px;
        }
        .history-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .history-header .section-label {
            margin-top: 0;
            margin-bottom: 0;
        }
        .history-meta {
            font-size: 11px;
            color: var(--text-dim);
        }
        .history-clear-btn {
            background: none;
            border: none;
            color: var(--text-dim);
            font-size: 11px;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            padding: 2px 0;
            text-decoration: underline;
            text-underline-offset: 2px;
            transition: color 0.15s;
        }
        .history-clear-btn:hover { color: var(--red); }

        /* Running totals row across all deals */
        .history-totals {
            display: flex;
            align-items: center;
            justify-content: space-around;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 12px 16px;
            margin-bottom: 12px;
            gap: 4px;
        }
        .ht-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            gap: 2px;
        }
        .ht-label {
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--text-dim);
        }
        .ht-val {
            font-size: 16px;
            font-weight: 800;
            color: var(--text);
        }
        .ht-val-primary { color: var(--primary); }
        .ht-divider {
            width: 1px;
            height: 28px;
            background: var(--border);
            flex-shrink: 0;
        }

        /* Individual deal entry card */
        .deal-entry {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 11px 14px;
            margin-bottom: 8px;
            animation: slideIn 0.18s ease-out;
        }
        .de-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 6px;
        }
        .de-names {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* Wrapper for detail-toggle + delete buttons */
        .de-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .de-toggle-btn {
            background: none;
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-dim);
            font-size: 11px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            padding: 3px 8px;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s;
            line-height: 1.4;
        }
        .de-toggle-btn:hover {
            color: var(--primary);
            border-color: var(--primary);
            background: var(--primary-glow);
        }
        .de-delete {
            background: none;
            border: none;
            color: var(--text-dim);
            font-size: 18px;
            line-height: 1;
            padding: 0 2px;
            cursor: pointer;
            flex-shrink: 0;
            transition: color 0.15s;
        }
        .de-delete:hover { color: var(--red); }

        /* ── Deal Detail Expanded Panel ─────────────────────────── */
        @keyframes detailOpen {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .de-detail {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
            animation: detailOpen 0.15s ease-out;
        }
        /* Column layout: [cond badge] [name] [market] [offer] */
        .de-detail-header {
            display: grid;
            grid-template-columns: 36px 1fr 58px 58px;
            gap: 6px;
            padding-bottom: 6px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 2px;
        }
        .de-detail-header span {
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-dim);
        }
        .de-detail-col-right { text-align: right; }

        .de-detail-row {
            display: grid;
            grid-template-columns: 36px 1fr 58px 58px;
            gap: 6px;
            align-items: center;
            padding: 5px 0;
            border-bottom: 1px solid rgba(34,40,50,0.6);
        }
        .de-detail-row:last-of-type { border-bottom: none; }
        .de-detail-row-excluded {
            opacity: 0.38;
        }
        .de-detail-row-excluded .de-detail-name {
            text-decoration: line-through;
        }
        .de-detail-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .de-detail-mkt {
            font-size: 12px;
            font-weight: 600;
            color: var(--text);
            text-align: right;
        }
        .de-detail-offer {
            font-size: 12px;
            font-weight: 700;
            color: var(--primary);
            text-align: right;
        }
        .de-detail-row-excluded .de-detail-offer {
            color: var(--text-dim);
        }

        /* Totals row at the bottom of the detail panel */
        .de-detail-totals {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 8px;
            margin-top: 6px;
            border-top: 1px solid var(--border);
        }
        .de-detail-totals-label {
            font-size: 11px;
            color: var(--text-dim);
        }
        .de-detail-totals-vals {
            display: grid;
            grid-template-columns: 58px 58px;
            gap: 6px;
            text-align: right;
        }
        .de-detail-totals-mkt {
            font-size: 12px;
            font-weight: 700;
            color: var(--text);
        }
        .de-detail-totals-offer {
            font-size: 12px;
            font-weight: 800;
            color: var(--primary);
        }

        .de-bottom {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            font-size: 12px;
        }
        .de-time  { color: var(--text-dim); }
        .de-cards { color: var(--text-dim); }
        .de-market { color: var(--text); font-weight: 600; }
        .de-offer {
            color: var(--primary);
            font-weight: 700;
            margin-left: auto;
        }
        .de-margin { color: var(--text-dim); font-weight: 400; }

        .history-empty {
            text-align: center;
            font-size: 13px;
            color: var(--text-dim);
            padding: 20px 0;
            opacity: 0.7;
        }

        /* ── Footer ────────────────────────────────────────────── */
        .footer {
            text-align: center;
            font-size: 11px;
            color: var(--text-dim);
            margin-top: 32px;
            padding-bottom: 8px;
        }
        .footer-link {
            color: var(--text-dim);
            text-decoration: none;
        }
        .footer-link:hover { color: var(--primary); }

        /* ── Customer Overlay ──────────────────────────────────── */
        /* Full-screen view for showing offer to customer across a table.
         * Clean, large text — no card detail visible here. */
        .customer-overlay {
            position: fixed;
            inset: 0;
            z-index: 500;
            background: var(--bg);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px 24px;
        }
        .cv-inner {
            width: 100%;
            max-width: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .cv-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            width: 100%;
            text-align: center;
        }
        .cv-label {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-dim);
        }
        .cv-count {
            font-size: 36px;
            font-weight: 800;
            color: var(--text);
            letter-spacing: -1px;
        }
        .cv-market {
            font-size: 48px;
            font-weight: 800;
            color: var(--text);
            letter-spacing: -2px;
        }
        .cv-divider {
            width: 60px;
            height: 2px;
            background: var(--border);
            margin: 12px 0;
        }
        .cv-row-offer { margin-top: 4px; }
        .cv-label-offer {
            color: var(--primary);
        }
        .cv-offer {
            font-size: 72px;
            font-weight: 800;
            color: var(--primary);
            letter-spacing: -3px;
            line-height: 1;
            text-shadow: 0 0 60px var(--primary-glow);
        }
        .cv-done-btn {
            margin-top: 40px;
            padding: 16px 48px;
            background: var(--surface2);
            color: var(--text);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 16px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
        .cv-done-btn:hover {
            background: var(--border);
        }