/* OnBuy Hunter · Team Chat — dark-first theme (2026 redesign).
   Dark slate surfaces separated by hairline borders, one electric
   blue accent; green and red are semantic only. */
:root {
    color-scheme: dark;
    --obh-blue: #3B82F6;
    --obh-blue-dark: #1D4ED8;
    --obh-ink: #E2E8F0;
    --obh-muted: #94A3B8;
    --obh-line: rgba(148, 163, 184, 0.18);
    --obh-bg: #0F172A;
    --obh-card: #1E293B;
    --obh-raised: #273549;
    --obh-inset: #131E33;
    --obh-radius: 14px;
    --obh-shadow: 0 1px 3px rgba(2, 6, 17, 0.45);
}

* { box-sizing: border-box; }

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

body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--obh-bg);
    color: var(--obh-ink);
}

.obh-chat-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 16px 16px;
    gap: 10px;
}

/* ── Header ── */
.obh-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    color: var(--obh-ink);
    background: var(--obh-card);
    border: 1px solid var(--obh-line);
    border-radius: var(--obh-radius);
    box-shadow: var(--obh-shadow);
    flex: none;
}

.obh-chat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    letter-spacing: 0.2px;
}

.obh-conn {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.obh-conn-on { background: rgba(34, 197, 94, 0.16); color: #4ADE80; }
.obh-conn-off { background: rgba(239, 68, 68, 0.14); color: #FCA5A5; }

.obh-header-actions { display: flex; gap: 8px; }

.obh-header-actions .obh-btn {
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid var(--obh-line);
    color: var(--obh-ink);
}

.obh-header-actions .obh-btn:hover { background: rgba(148, 163, 184, 0.24); }

/* ── Buttons ── */
.obh-btn {
    padding: 8px 16px;
    color: #ffffff;
    background: var(--obh-blue);
    border: 1px solid var(--obh-blue);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: background 120ms ease, transform 60ms ease;
}

.obh-btn:hover { background: #60A5FA; border-color: #60A5FA; }
.obh-btn:active { transform: scale(0.97); }

.obh-btn-light {
    color: var(--obh-ink);
    background: var(--obh-raised);
    border-color: var(--obh-line);
}

.obh-btn-light:hover { background: #2F4258; border-color: var(--obh-line); }

.obh-btn-danger {
    color: #ffffff;
    background: #D64541;
    border-color: #D64541;
}

.obh-btn-danger:hover { background: #BE3833; border-color: #BE3833; }

/* ── Banners ── */
/* The announcement banner must catch the eye from across the
   room (user order, v3.8): a strong amber gradient, large bold
   white text, and the author's name as a dark chip. */
.obh-announce {
    padding: 12px 16px;
    color: #ffffff;
    background: linear-gradient(120deg, #92400e, #b45309 55%, #d97706);
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: var(--obh-radius);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.22);
    flex: none;
}

.obh-announce-name {
    display: inline-block;
    padding: 1px 9px;
    color: #fff7e0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    font-weight: 900;
    white-space: nowrap;
}

.obh-notice {
    padding: 10px 14px;
    color: #FCA5A5;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--obh-radius);
    font-size: 13px;
    font-weight: 600;
    flex: none;
}

/* ── Panels (settings, members, admin) ── */
.obh-settings {
    padding: 16px 16px 26px;
    background: var(--obh-card);
    border: 1px solid var(--obh-line);
    border-radius: var(--obh-radius);
    box-shadow: var(--obh-shadow);
    scroll-margin-top: 10px;
    scroll-padding-bottom: 26px;
    flex: none;
    max-height: 42vh;
    overflow-y: auto;
}

.obh-panel-title {
    display: block;
    margin: 2px 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--obh-muted);
}

.obh-settings label {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #CBD5E1;
}

.obh-settings input[type="text"],
.obh-settings input[type="password"] {
    width: 100%;
    margin-top: 5px;
    padding: 9px 12px;
    border: 1px solid var(--obh-line);
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    color: var(--obh-ink);
    background: var(--obh-inset);
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.obh-settings input:focus {
    border-color: var(--obh-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28);
}

.obh-hint {
    font-size: 11px;
    font-weight: 400;
    color: var(--obh-muted);
}

.obh-room-line {
    margin-top: 8px;
    font-size: 12.5px;
    color: #CBD5E1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.obh-owner-note {
    margin-top: 10px;
    padding: 9px 12px;
    color: #FCD34D;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
}

.obh-settings-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.obh-settings-msg { font-size: 12px; color: #4ADE80; font-weight: 600; }

/* ── Members ── */
.obh-members-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.obh-members-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--obh-raised);
    border: 1px solid var(--obh-line);
    border-radius: 10px;
    font-size: 13px;
}

.obh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    flex: none;
}

.obh-member-name { font-weight: 700; }

.obh-member-you { font-size: 11px; color: var(--obh-muted); }

.obh-kick {
    margin-left: auto;
    padding: 4px 11px;
    color: #FCA5A5;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
}

.obh-kick:hover { background: rgba(239, 68, 68, 0.22); }

.obh-lock-btn {
    margin-left: 6px;
    color: #FCD34D;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}

.obh-lock-btn:hover { background: rgba(245, 158, 11, 0.22); }

/* ── Messages ── */
.obh-messages {
    flex: 1;
    min-height: 40vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--obh-card);
    border: 1px solid var(--obh-line);
    border-radius: var(--obh-radius);
    box-shadow: var(--obh-shadow);
}

.obh-msg {
    max-width: 78%;
    padding: 9px 13px;
    background: var(--obh-raised);
    border: 1px solid var(--obh-line);
    border-radius: 16px;
    border-bottom-left-radius: 5px;
    box-shadow: 0 1px 2px rgba(2, 6, 17, 0.35);
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}

.obh-msg-own {
    align-self: flex-end;
    color: #ffffff;
    background: var(--obh-blue);
    border-color: transparent;
    border-radius: 16px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 16px;
}

.obh-msg-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.obh-msg-name { font-size: 12px; font-weight: 700; }

.obh-msg-own .obh-msg-name { color: #DBEAFE; }

.obh-msg-time { font-size: 10px; color: var(--obh-muted); }

.obh-msg-own .obh-msg-time { color: rgba(255, 255, 255, 0.75); }

.obh-msg-text { white-space: pre-wrap; }

.obh-msg-text a { color: var(--obh-blue); }

.obh-msg-own .obh-msg-text a { color: #DBEAFE; }

.obh-msg-announce {
    background: #fff6da;
    border-color: #f0d48a;
}

/* Announcement messages keep dark, readable text on their pale
   background even when they are the viewer's own messages: the
   own-message white (0,1,0) must never win over the announce
   background. These selectors outrank .obh-msg-own on purpose. */
.obh-msg.obh-msg-announce {
    color: #54390a;
}

.obh-msg.obh-msg-announce .obh-msg-time {
    color: #8a6a1c;
}

.obh-msg.obh-msg-announce .obh-msg-text a {
    color: var(--obh-blue-dark);
}

.obh-msg-share { border-color: rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.08); }

.obh-msg-share .obh-msg-text a {
    color: var(--obh-blue);
    word-break: break-all;
    font-weight: 600;
}

.obh-system-line {
    align-self: center;
    padding: 3px 12px;
    color: var(--obh-muted);
    background: var(--obh-raised);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.obh-empty {
    margin: auto;
    max-width: 420px;
    color: var(--obh-muted);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

/* ── Composer ── */
.obh-composer {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: var(--obh-card);
    border: 1px solid var(--obh-line);
    border-radius: 999px;
    box-shadow: var(--obh-shadow);
    flex: none;
}

.obh-composer input {
    flex: 1;
    padding: 9px 14px;
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    outline: none;
    background: transparent;
}

/* ── Panel sections: clearer separation between the Members,
   Super Admin and room admin blocks ── */
.obh-settings .obh-panel-title {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--obh-line);
}

.obh-members-list + .obh-panel-title,
.obh-super-block + .obh-panel-title {
    margin-top: 18px;
}

/* ── Super Admin blocks: brand reports and the user registry ── */
.obh-super-block {
    margin-top: 14px;
    padding: 12px;
    background: #16233A;
    border: 1px solid var(--obh-line);
    border-radius: 12px;
}

.obh-super-block .obh-panel-title { border-bottom: none; padding-bottom: 0; }

.obh-btn-sm {
    padding: 4px 12px;
    font-size: 11px;
}

.obh-report-item {
    padding: 9px 11px;
    margin-bottom: 7px;
    background: var(--obh-raised);
    border: 1px solid var(--obh-line);
    border-radius: 10px;
    font-size: 12.5px;
}

.obh-report-brand { font-weight: 700; font-size: 13px; }

.obh-report-meta { margin-top: 2px; color: var(--obh-muted); font-size: 11px; }

.obh-report-title { margin-top: 3px; word-break: break-word; }

.obh-report-title a { color: var(--obh-blue); font-weight: 600; }

.obh-report-note { margin-top: 3px; color: #CBD5E1; font-style: italic; }

.obh-report-actions {
    display: flex;
    gap: 7px;
    margin-top: 8px;
}

.obh-member-seen {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--obh-muted);
    white-space: nowrap;
}

/* The room admin tools block gets the same breathing room as the
   other panel sections. */
#obh-admin-tools { margin-top: 18px; }

/* ── Conversation switcher (team chat / private chats, v3.8) ── */
.obh-convo-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: none;
}

/* The switcher is shown and hidden through the hidden
   attribute; without this guard the flex rule above would
   keep an empty box (and its column gap) in the layout. */
.obh-convo-switch[hidden] {
    display: none;
}

.obh-convo-active {
    color: #ffffff;
    background: var(--obh-blue);
    border-color: var(--obh-blue);
}

.obh-convo-active:hover { background: #60A5FA; border-color: #60A5FA; }

/* ── Price Check view (v3.10) ── */
.obh-price-view {
    flex: 1;
    min-height: 40vh;
    overflow-y: auto;
    padding: 16px;
    background: var(--obh-card);
    border: 1px solid var(--obh-line);
    border-radius: var(--obh-radius);
    box-shadow: var(--obh-shadow);
}

.obh-price-view[hidden] { display: none; }

.obh-price-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.obh-price-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.obh-price-form input[type="text"] { text-transform: uppercase; }

/* v3.11: the eBay item number is digits only, no uppercasing. */
#obh-price-ebay { text-transform: none; }

.obh-price-list .obh-report-item { background: var(--obh-raised); }

/* ── Saved Products view (v3.12) ── */
.obh-saved-list .obh-report-item { background: var(--obh-raised); }

.obh-saved-item {
    display: flex;
    gap: 11px;
}

.obh-saved-thumb {
    width: 58px;
    height: 58px;
    flex: none;
    object-fit: cover;
    background: var(--obh-inset);
    border: 1px solid var(--obh-line);
    border-radius: 8px;
}

.obh-saved-main { flex: 1; min-width: 0; }

.obh-saved-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.obh-saved-form input[type="text"] {
    width: 170px;
    padding: 6px 9px;
    border: 1px solid var(--obh-line);
    border-radius: 8px;
    font: inherit;
    font-size: 12.5px;
    color: var(--obh-ink);
    background: var(--obh-inset);
    outline: none;
}

.obh-saved-form input[type="text"]:focus {
    border-color: var(--obh-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28);
}

.obh-saved-asin { text-transform: uppercase; }

.obh-saved-form select {
    padding: 6px 8px;
    border: 1px solid var(--obh-line);
    border-radius: 8px;
    font: inherit;
    font-size: 12.5px;
    color: var(--obh-ink);
    background: var(--obh-inset);
}

.obh-saved-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
}

/* ── Hunter list (v3.14) ── */
.obh-saved-source-block {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--obh-line);
    border-radius: 10px;
    background: var(--obh-inset);
}

/* The cheaper of two sources is the highlighted one, and
   it is the price the calculation runs on. */
.obh-saved-source-block.obh-source-best {
    border-color: #22C55E;
    background: rgba(34, 197, 94, 0.10);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.20);
}

.obh-cheaper {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: #22C55E;
    color: #052e12;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.obh-saved-src-thumb {
    width: 46px;
    height: 46px;
    margin-top: 6px;
    object-fit: cover;
    background: var(--obh-card);
    border: 1px solid var(--obh-line);
    border-radius: 7px;
}

.obh-hunter-fields,
.obh-hunter-calc {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 16px;
    margin-top: 6px;
}

.obh-hunter-calc {
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px dashed var(--obh-line);
    border-radius: 10px;
    background: var(--obh-card);
}

.obh-hunter-field { font-size: 12.5px; }

.obh-hunter-k { color: var(--obh-muted); }

.obh-hunter-v { font-weight: 600; }

/* Negative net profit reads red, per the plan. */
.obh-hunter-field.obh-neg .obh-hunter-v { color: #F87171; }

.obh-oos {
    display: inline-block;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.15);
    color: #F87171;
    font-size: 11px;
    font-weight: 700;
}

/* ── Hunter tags + feedback (v3.15; palette finalised v3.17;
   washes replaced by the design alignment pass) ──
   The plan's five tags, one active per row: choosing one
   puts obh-tag-<key> on the row itself and the WHOLE row
   takes the tag's colour. The colours are now the Stitch
   design's deep solid washes (the user's exported code):
   HOT #2D1E05, Rank #06291C, Link #08243D, Simple #141923,
   Loss #380C10 — each rule sets the row's theme variables,
   which the alignment block at the end of this file paints
   with (background, border, dividers, label and seller
   tints, control accents). The old loss-row rule that
   washed every value pink is gone: on the design's Loss
   row the prices stay white and only the labels, seller
   and the (negative) profit carry the red. */

.obh-saved-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
}

.obh-tag-btn {
    padding: 3px 11px;
    border: 1px solid var(--obh-line);
    border-radius: 999px;
    background: var(--obh-inset);
    color: var(--obh-ink);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.obh-tag-btn:hover { filter: brightness(1.25); }

.obh-tag-btn-hot.obh-tag-on { background: rgba(250, 204, 21, 0.32); border-color: #FACC15; color: #FEF9C3; }
.obh-tag-btn-rank.obh-tag-on { background: rgba(74, 222, 128, 0.30); border-color: #4ADE80; color: #DCFCE7; }
.obh-tag-btn-link.obh-tag-on { background: rgba(59, 130, 246, 0.34); border-color: #60A5FA; color: #BFDBFE; }
.obh-tag-btn-simple.obh-tag-on { background: rgba(148, 163, 184, 0.32); border-color: #94A3B8; color: #E2E8F0; }
.obh-tag-btn-loss.obh-tag-on { background: rgba(220, 38, 38, 0.50); border-color: #F87171; color: #FEE2E2; }

/* The Auto Loss badge (v3.17): shown in the right
   section while the system itself holds the row at Loss
   on a negative net profit. */
.obh-auto-loss-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

/* The at-a-glance marker on rows that carry feedback. */
.obh-feedback-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    border: 1px solid rgba(96, 165, 250, 0.40);
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.15);
    color: #93C5FD;
    font-size: 11px;
    font-weight: 700;
}

.obh-saved-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
}

.obh-saved-feedback-text {
    flex: 1 1 220px;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--obh-line);
    border-radius: 8px;
    font: inherit;
    font-size: 12.5px;
    color: var(--obh-ink);
    background: var(--obh-inset);
    resize: vertical;
    outline: none;
}

.obh-saved-feedback-text:focus {
    border-color: var(--obh-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28);
}

/* ── Hunter list v2 (v3.16, Automation Plan v2 Hissa 9) ──
   One row, three EQUAL sections side by side at every
   width — OnBuy left, selling price and sourcing centre,
   net profit right — equal height, content top aligned,
   identical padding, light divider lines only, no cards.
   The sections carry no background of their own, so a tag
   colour still recolours the whole row. */
.obh-saved-item { gap: 0; }
.obh-saved-sec { flex: 1 1 0; min-width: 0; padding: 4px 12px; }
.obh-sec-center, .obh-sec-right { border-left: 1px solid var(--obh-line); }
.obh-sec-head { font-weight: 700; font-size: 12.5px; margin-bottom: 5px; overflow-wrap: anywhere; }
.obh-missing-note { color: var(--obh-muted); font-style: italic; font-weight: 400; font-size: 12px; }
.obh-sell-field .obh-hunter-v { font-size: 15px; font-weight: 800; }
.obh-net-field .obh-hunter-v { font-size: 17px; font-weight: 800; }
.obh-saved-list .obh-neg .obh-hunter-v { color: #c22727; }

/* The OPC: one fixed colour of its own — the same violet
   in every row, still distinct on a tag-coloured row. */
.obh-opc-block { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.obh-opc-label { font-size: 11px; font-weight: 600; color: var(--obh-muted); }
.obh-opc-value { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: #8B5CF6; cursor: copy; text-decoration: underline dotted; }
.obh-opc-copied { font-size: 11px; font-weight: 700; color: #1d7a4f; }
.obh-opc-form { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.obh-opc-input { flex: 1 1 110px; min-width: 0; padding: 5px 8px; border: 1px solid var(--obh-line); border-radius: 7px; font: inherit; font-size: 12.5px; color: var(--obh-ink); background: var(--obh-card); outline: none; }

/* The deal badge: the payable price is the deal price;
   the badge only reports what the source page stated. */
.obh-deal-line { margin-top: 4px; font-size: 11.5px; color: var(--obh-muted); }
.obh-deal { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #1d7a4f; color: #ffffff; font-size: 11px; font-weight: 700; font-style: normal; }

/* The number field always carries its label. */
.obh-num-label { display: block; margin-top: 8px; }

/* Price history, in the centre section only. */
.obh-history-btn { margin-top: 8px; background: none; border: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--obh-blue); cursor: pointer; }
.obh-history-list { margin-top: 4px; font-size: 11.5px; color: var(--obh-muted); }
.obh-history-list[hidden] { display: none; }

/* Reload sits compactly in the right section. */
.obh-saved-reload-row { display: flex; align-items: center; gap: 7px; margin-top: 9px; }

/* The ⋯ row menu: an overlay, so it adds no row height. */
.obh-row-menu-wrap { position: relative; margin-top: 8px; text-align: right; }
.obh-dots-btn { background: none; border: 1px solid var(--obh-line); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 15px; line-height: 1.5; cursor: pointer; color: inherit; }
.obh-row-menu { position: absolute; right: 0; bottom: calc(100% + 4px); min-width: 132px; background: var(--obh-card); border: 1px solid var(--obh-line); border-radius: 10px; box-shadow: var(--obh-shadow); padding: 4px; z-index: 30; text-align: left; }
.obh-row-menu[hidden] { display: none; }
.obh-menu-item { display: block; width: 100%; background: none; border: none; padding: 6px 9px; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; color: inherit; border-radius: 7px; }
.obh-menu-danger { color: #c22727; font-weight: 700; }
.obh-saved-item.obh-selected { outline: 2px solid var(--obh-blue); outline-offset: -2px; }

/* ── v3.18: Bulk Add, the bulk bar, the source marker and
   the ISBN options picker ── */
.obh-saved-bulkadd { margin-top: 10px; }
.obh-saved-bulkadd textarea { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--obh-line); border-radius: 8px; font: inherit; font-size: 12.5px; color: var(--obh-ink); background: var(--obh-card); outline: none; resize: vertical; }
.obh-saved-bulkadd textarea:focus { border-color: var(--obh-blue); }
.obh-saved-bulkadd-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }

.obh-saved-bulk { margin-bottom: 10px; }
.obh-saved-bulk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.obh-saved-bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--obh-blue); border-radius: 10px; background: rgba(59, 130, 246, 0.12); }
.obh-saved-bulk-bar[hidden] { display: none; }
.obh-saved-bulk-count { font-size: 12.5px; font-weight: 700; }
.obh-saved-bulk-bar select { padding: 5px 7px; border: 1px solid var(--obh-line); border-radius: 8px; font: inherit; font-size: 12.5px; color: var(--obh-ink); background: var(--obh-card); }

.obh-source-via { margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--obh-blue); }

.obh-isbn-options { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.obh-isbn-option { display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px 8px; border: 1px solid var(--obh-line); border-radius: 10px; background: var(--obh-card); font: inherit; cursor: pointer; color: inherit; }
.obh-isbn-option:hover { border-color: var(--obh-blue); }
.obh-isbn-thumb { width: 40px; height: 40px; object-fit: contain; flex: none; }
.obh-isbn-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.obh-isbn-title { font-size: 12.5px; font-weight: 600; }
.obh-isbn-meta { font-size: 11.5px; color: var(--obh-muted); }

/* Add Product, above the list. */
.obh-saved-add { margin-bottom: 12px; }
.obh-saved-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.obh-saved-add-row input[type="text"] { flex: 1 1 240px; min-width: 0; padding: 7px 10px; border: 1px solid var(--obh-line); border-radius: 8px; font: inherit; font-size: 12.5px; color: var(--obh-ink); background: var(--obh-card); outline: none; }
.obh-saved-add-manual { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.obh-saved-add-manual[hidden] { display: none; }
.obh-saved-add-manual input[type="text"] { flex: 1 1 170px; min-width: 0; padding: 7px 10px; border: 1px solid var(--obh-line); border-radius: 8px; font: inherit; font-size: 12.5px; color: var(--obh-ink); background: var(--obh-card); outline: none; }

/* ── Private chat blocks (v3.8) ── */
.obh-dm-status { margin-top: 8px; }

#obh-dm-approved-list li { cursor: pointer; }

#obh-dm-approved-list li:hover { background: #2F4258; }

.obh-dot-off {
    background: #64748B;
    box-shadow: none;
}

/* ── Team settings editor (admin) ── */
.obh-admin-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--obh-line);
}

.obh-admin-block textarea {
    width: 100%;
    margin-top: 5px;
    padding: 9px 12px;
    border: 1px solid var(--obh-line);
    border-radius: 10px;
    font: inherit;
    font-size: 12.5px;
    color: var(--obh-ink);
    background: var(--obh-inset);
    resize: vertical;
    outline: none;
}

.obh-admin-block textarea:focus {
    border-color: var(--obh-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28);
}

.obh-inline { display: flex; gap: 6px; margin-top: 5px; }
.obh-inline input { flex: 1; }

.obh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.obh-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--obh-raised);
    border: 1px solid var(--obh-line);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}

.obh-chip-x {
    padding: 0 2px;
    color: #FCA5A5;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
}

/* ── Scrollbars ── */
.obh-messages::-webkit-scrollbar,
.obh-settings::-webkit-scrollbar { width: 8px; }

.obh-messages::-webkit-scrollbar-thumb,
.obh-settings::-webkit-scrollbar-thumb {
    background: #3D5478;
    border-radius: 999px;
}

/* Placeholder text stays muted on the dark inset inputs. */
.obh-chat-app input::placeholder,
.obh-chat-app textarea::placeholder {
    color: #64748B;
}

/* ── 2026 UX pass (website): clearer navigation state, real
   focus rings everywhere, styled Price Check form controls,
   roomier reading, and small-screen layout ── */

/* The header toggle for the view or panel currently on screen
   reads as active (chat.js keeps the class in step). */
.obh-header-actions .obh-btn.obh-convo-active {
    color: #ffffff;
    background: var(--obh-blue);
    border-color: var(--obh-blue);
}

.obh-header-actions .obh-btn.obh-convo-active:hover {
    background: #60A5FA;
    border-color: #60A5FA;
}

/* Keyboard focus is always visible. */
.obh-chat-app :focus-visible {
    outline: 2px solid #93C5FD;
    outline-offset: 2px;
}

.obh-composer input:focus-visible {
    outline: none;
}

.obh-composer:focus-within {
    border-color: var(--obh-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

/* Price Check and Saved Products form controls get the same
   inset-input treatment as the settings panels. */
.obh-price-form input[type="text"],
.obh-price-form select {
    padding: 9px 12px;
    border: 1px solid var(--obh-line);
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    color: var(--obh-ink);
    background: var(--obh-inset);
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.obh-price-form input[type="text"] {
    flex: 1 1 230px;
}

.obh-price-form input[type="text"]:focus,
.obh-price-form select:focus {
    border-color: var(--obh-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28);
}

/* Reading comfort in the message list. */
.obh-messages {
    scroll-behavior: smooth;
}

.obh-msg {
    line-height: 1.55;
}

@media (max-width: 760px) {
    .obh-chat-app {
        padding: 10px;
        gap: 8px;
    }

    .obh-chat-header {
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    .obh-header-actions {
        flex-wrap: wrap;
    }

    .obh-messages {
        padding: 10px;
        min-height: 0;
    }

    .obh-msg {
        max-width: 92%;
    }

    .obh-settings {
        max-height: 62vh;
        padding: 14px 12px 22px;
    }

    .obh-price-view {
        padding: 12px;
        min-height: 0;
    }

    .obh-price-form input[type="text"] {
        flex: 1 1 150px;
    }

    .obh-saved-item {
        flex-wrap: wrap;
    }
}

/* ─────────────────────────────────────────────────────────
   Design alignment pass · the Stitch "Pro Trader Dark"
   dashboard applied same-to-same (the user's exported
   code.html is the reference base; its tokens, surfaces
   and row washes are reused verbatim where the layout
   allows). The signed-in app is reframed as the design's
   dashboard: a 256px sidebar shell (#0A0E17) with the
   brand block, a Live sync pill and the module nav; a
   slim top bar carrying the search and the account; the
   saved list as a full dashboard page with the design's
   four stat cards, its toolbar, and rows washed whole in
   their status colour. Settled rules hold: tag names
   HOT / Rank / Link / Simple / Loss, stats from real rows
   only, three equal row sections at every width, no fee
   breakdown on show. Fonts: Hanken Grotesk for UI,
   JetBrains Mono for numbers, IDs, seller names and
   prices. ─────────────────────────────────────────────── */
:root {
    --obh-bg: #090D16;
    --obh-card: #131926;
    --obh-raised: #1A2338;
    --obh-inset: #0D1322;
    --obh-line: #1E293B;
    --obh-ink: #E2E8F0;
    --obh-muted: #94A3B8;
    --obh-green: #10B981;
    --obh-mint: #4EDEA3;
    --obh-shell: #0A0E17;
    --obh-input: #0F172A;
    --obh-radius: 8px;
    --obh-shadow: 0 1px 2px rgba(2, 6, 17, 0.5);
}

body {
    font-family: "Hanken Grotesk", "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--obh-bg);
}

/* Views are shown and hidden through the hidden attribute;
   these guards keep a display rule from ever leaking the
   chat stream or its composer into another view (the list
   included). */
.obh-messages[hidden],
.obh-composer[hidden] {
    display: none !important;
}

/* ── Frame: sidebar shell + slim top bar ── */
.obh-chat-app {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    background: var(--obh-bg);
}

.obh-sidebar {
    width: 256px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 12px 16px;
    background: var(--obh-shell);
    border-right: 1px solid var(--obh-line);
    overflow-y: auto;
}

.obh-side-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 64px;
    flex: none;
    margin: 0 -12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--obh-line);
}

.obh-logo-tile {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #10B981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.35);
}

.obh-logo-tile img {
    width: 24px;
    height: 24px;
    border-radius: 5px;
}

.obh-side-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.obh-side-brand-text strong {
    font-size: 17px;
    font-weight: 600;
    color: #F1F5F9;
    letter-spacing: 0.1px;
}

.obh-side-brand-text span {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--obh-mint);
}

.obh-live-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--obh-card);
    border: 1px solid var(--obh-line);
    border-radius: 6px;
}

.obh-live-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
    animation: obh-live-pulse 2s ease-in-out infinite;
}

@keyframes obh-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .obh-live-dot { animation: none; }
}

.obh-live-pill .obh-conn {
    padding: 0;
    background: none;
    border-radius: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.obh-live-pill .obh-conn-on { background: none; color: #34D399; }
.obh-live-pill .obh-conn-off { background: none; color: #F87171; }

.obh-side-modules {
    padding: 2px 6px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748B;
}

.obh-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.obh-nav-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #94A3B8;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.obh-nav-btn::before {
    content: "";
    width: 17px;
    height: 17px;
    flex: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
    opacity: 0.85;
}

.obh-nav-btn[data-nav="saved"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/></svg>");
}

.obh-nav-btn[data-nav="chat"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linejoin='round'><path d='M21 11.5a8.5 8.5 0 0 1-8.5 8.5c-1.5 0-3-.4-4.2-1.1L3 20l1.1-5.3A8.5 8.5 0 1 1 21 11.5z'/></svg>");
}

.obh-nav-btn[data-nav="price"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linejoin='round'><path d='M12 2H2v10l9.3 9.3a1 1 0 0 0 1.4 0l8.6-8.6a1 1 0 0 0 0-1.4L12 2z'/><circle cx='7' cy='7' r='1.6'/></svg>");
}

.obh-nav-btn[data-nav="members"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round'><circle cx='9' cy='8' r='3.5'/><path d='M2.5 20c.8-3.2 3.4-5 6.5-5s5.7 1.8 6.5 5'/><path d='M16 5.2a3.5 3.5 0 0 1 0 5.6M17.8 15.4c2 .6 3.2 2 3.7 4.6'/></svg>");
}

.obh-nav-btn[data-nav="settings"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 1.55V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.55-1H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.55V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1 1.51 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.24.6.86 1 1.51 1H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.51 1z'/></svg>");
}

.obh-nav-btn[data-nav="admin"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linejoin='round'><path d='M12 22s8-3.6 8-10V5l-8-3-8 3v7c0 6.4 8 10 8 10z'/></svg>");
}

.obh-nav-btn:hover {
    background: var(--obh-card);
    color: #E2E8F0;
}

.obh-nav-btn.obh-nav-active {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: var(--obh-mint);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
}

.obh-nav-btn[hidden] { display: none; }

.obh-side-note {
    margin-top: auto;
    padding: 10px;
    background: var(--obh-card);
    border: 1px solid var(--obh-line);
    border-radius: 6px;
    color: #94A3B8;
    font-size: 12px;
    line-height: 1.5;
}

.obh-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.obh-topbar {
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    background: rgba(10, 14, 23, 0.95);
    border-bottom: 1px solid var(--obh-line);
}

.obh-topbar-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 560px;
    display: block;
}

/* v3.24: the topbar search belongs to the Dashboard view;
   view isolation hides it in every other view. */
.obh-topbar-search[hidden] {
    display: none;
}

.obh-topbar-search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: #64748B;
    pointer-events: none;
}

.obh-topbar-search input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 33px;
    background: var(--obh-card);
    border: 1px solid var(--obh-line);
    border-radius: 4px;
    color: #E2E8F0;
    font: inherit;
    font-size: 13px;
    outline: none;
}

.obh-topbar-search input::placeholder { color: #64748B; }

.obh-topbar-search input:focus {
    border-color: var(--obh-mint);
    box-shadow: 0 0 0 3px rgba(78, 222, 163, 0.15);
}

/* The other views keep their panel surfaces, spaced inside
   the frame. */
.obh-main > .obh-announce,
.obh-main > .obh-notice {
    margin: 12px 16px 0;
    flex: none;
}

.obh-main > .obh-settings,
.obh-main > .obh-price-view:not(.obh-saved-view) {
    margin: 12px 16px 16px;
}

.obh-main > .obh-convo-switch {
    margin: 12px 16px 0;
}

.obh-main > .obh-messages {
    padding: 14px 16px;
}

.obh-main > .obh-composer {
    margin: 0 16px 14px;
    flex: none;
}

/* ── The saved list as a dashboard page ── */
.obh-saved-view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 20px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.obh-saved-view[hidden] { display: none; }

/* ── v3.24: the worker CAPTCHA notice ──
   Shown on the Saved Products view only (it lives inside
   that section, so view isolation contains it) while the
   price worker is paused on a robot check. Amber on the
   Obsidian surface, impossible to miss, with the product
   link and the resume action side by side. */
.obh-captcha-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.55);
    border-radius: var(--obh-radius);
    color: #FDE68A;
    font-size: 13px;
    font-weight: 600;
}

.obh-captcha-banner[hidden] { display: none; }

.obh-captcha-text { flex: 1 1 260px; }

.obh-captcha-link {
    color: #FCD34D;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    word-break: break-all;
}

.obh-captcha-resume { flex: none; }

/* ── Stat cards (the design's four, from real rows) ── */
.obh-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.obh-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--obh-card);
    border: 1px solid var(--obh-line);
    border-radius: 6px;
}

.obh-stat-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.obh-stat-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
    white-space: nowrap;
}

.obh-stat-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.1;
    color: #F1F5F9;
}

.obh-stat-num-green { color: #10B981; text-shadow: 0 0 12px rgba(16, 185, 129, 0.35); }
.obh-stat-num-cyan { color: #38BDF8; text-shadow: 0 0 12px rgba(56, 189, 248, 0.35); }
.obh-stat-num-red { color: #F87171; text-shadow: 0 0 12px rgba(248, 113, 113, 0.3); }

.obh-stat-icon {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 6px;
    border: 1px solid;
}

.obh-stat-icon svg { width: 21px; height: 21px; }

.obh-stat-icon-slate { background: #1E293B; border-color: #334155; color: #94A3B8; }
.obh-stat-icon-green { background: #06291C; border-color: rgba(5, 150, 105, 0.4); color: #34D399; }
.obh-stat-icon-cyan { background: #08243D; border-color: rgba(2, 132, 199, 0.4); color: #38BDF8; }
.obh-stat-icon-red { background: #380C10; border-color: rgba(239, 68, 68, 0.4); color: #F87171; }

/* ── Toolbar card ── */
.obh-saved-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--obh-card);
    border: 1px solid var(--obh-line);
    border-radius: 6px;
}

.obh-toolbar-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.obh-saved-toolbar .obh-saved-add {
    flex: 1 1 400px;
    min-width: 0;
    margin-bottom: 0;
}

.obh-saved-toolbar .obh-saved-add-row {
    flex-wrap: nowrap;
}

.obh-saved-toolbar .obh-saved-add-row input[type="text"] {
    flex: 1 1 170px;
    height: 32px;
    background: var(--obh-input);
    border-color: var(--obh-line);
    border-radius: 4px;
}

.obh-saved-toolbar .obh-saved-add-row input[type="text"]:focus {
    border-color: var(--obh-mint);
    box-shadow: 0 0 0 3px rgba(78, 222, 163, 0.15);
    outline: none;
}

.obh-add-btn {
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    background: #10B981;
    border: 1px solid #10B981;
    border-radius: 4px;
    color: #002113;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
    white-space: nowrap;
}

.obh-add-btn svg { width: 15px; height: 15px; }
.obh-add-btn:hover { background: #059669; border-color: #059669; }

.obh-btn-dark {
    height: 32px;
    padding: 0 12px;
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 4px;
    color: #E2E8F0;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.obh-btn-dark:hover { background: #334155; }
.obh-btn-dark:disabled { opacity: 0.45; cursor: default; }

.obh-toolbar-sel {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.obh-sel-count {
    padding: 4px 9px;
    background: var(--obh-shell);
    border: 1px solid var(--obh-line);
    border-radius: 4px;
    color: #94A3B8;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.obh-sel-count:empty { display: none; }

.obh-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.obh-filter-tab {
    height: 28px;
    padding: 0 11px;
    background: #1E293B;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #94A3B8;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.obh-filter-tab:hover { background: #334155; color: #E2E8F0; }

.obh-filter-tab.obh-filter-active {
    background: var(--obh-mint);
    color: #002113;
    font-weight: 700;
}

.obh-filter-tab[hidden] { display: none; }

.obh-saved-add-msg:empty { display: none; }

.obh-saved-toolbar .obh-saved-add-manual input[type="text"] {
    background: var(--obh-input);
    border-color: var(--obh-line);
    border-radius: 4px;
}

.obh-saved-toolbar .obh-saved-bulkadd {
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid var(--obh-line);
}

.obh-saved-toolbar .obh-saved-bulkadd textarea {
    background: var(--obh-input);
    border-color: var(--obh-line);
    border-radius: 4px;
    min-height: 52px;
}

.obh-saved-toolbar .obh-saved-bulkadd textarea:focus {
    border-color: var(--obh-mint);
    outline: none;
}

.obh-saved-bulk-bar {
    margin-top: 0;
    padding: 9px 11px;
    background: #08243D;
    border: 1px solid rgba(2, 132, 199, 0.6);
    border-radius: 4px;
    color: #E0F2FE;
}

.obh-saved-bulk-bar select {
    background: var(--obh-shell);
    border-color: #1E293B;
    border-radius: 4px;
    color: #E2E8F0;
}

.obh-saved-bulk-bar .obh-btn {
    border-radius: 4px;
}

.obh-saved-bulk-bar #obh-saved-bulk-update {
    background: #0284C7;
    border-color: #0284C7;
    color: #ffffff;
}

.obh-saved-bulk-bar #obh-saved-bulk-update:hover { background: #0369A1; }

.obh-saved-bulk-bar #obh-saved-bulk-delete {
    background: #93000A;
    border-color: #93000A;
    color: #ffffff;
}

.obh-saved-bulk-bar #obh-saved-bulk-delete:hover { background: #7F1D1D; }

/* ── Rows: the whole row washed in its status colour ── */
.obh-saved-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.obh-saved-list .obh-saved-item {
    --row-bg: #131926;
    --row-border: #1E293B;
    --row-accent: #4EDEA3;
    --row-label: #94A3B8;
    --row-seller: #E2E8F0;
    --row-divider: #1E293B;
    --row-control: rgba(2, 6, 17, 0.45);
    background: var(--row-bg);
    border: 1px solid var(--row-border);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
}

.obh-saved-item.obh-tag-hot {
    --row-bg: #2D1E05;
    --row-border: rgba(180, 83, 9, 0.6);
    --row-accent: #F59E0B;
    --row-label: #FDE68A;
    --row-seller: #FDE047;
    --row-divider: rgba(180, 83, 9, 0.3);
}

.obh-saved-item.obh-tag-rank {
    --row-bg: #06291C;
    --row-border: #059669;
    --row-accent: #10B981;
    --row-label: #A7F3D0;
    --row-seller: #4ADE80;
    --row-divider: rgba(5, 150, 105, 0.35);
}

.obh-saved-item.obh-tag-link {
    --row-bg: #08243D;
    --row-border: #0284C7;
    --row-accent: #38BDF8;
    --row-label: #BAE6FD;
    --row-seller: #7DD3FC;
    --row-divider: rgba(2, 132, 199, 0.3);
}

.obh-saved-item.obh-tag-simple {
    --row-bg: #141923;
    --row-border: #334155;
    --row-accent: #94A3B8;
    --row-label: #CBD5E1;
    --row-seller: #CBD5E1;
    --row-divider: rgba(51, 65, 85, 0.55);
}

.obh-saved-item.obh-tag-loss {
    --row-bg: #380C10;
    --row-border: #EF4444;
    --row-accent: #EF4444;
    --row-label: #FCA5A5;
    --row-seller: #FCA5A5;
    --row-divider: rgba(239, 68, 68, 0.3);
}

.obh-saved-item.obh-buybox-mine {
    outline: 2px solid rgba(16, 185, 129, 0.55);
    outline-offset: -2px;
}

.obh-saved-item.obh-buybox-other {
    outline: 2px solid rgba(245, 158, 11, 0.55);
    outline-offset: -2px;
}

.obh-saved-item.obh-selected {
    outline: 2px solid #38BDF8;
    outline-offset: -2px;
}

.obh-saved-item .obh-saved-sec {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 2px 14px;
}

.obh-saved-item .obh-sec-left { padding-left: 0; }
.obh-saved-item .obh-sec-right { padding-right: 0; }

.obh-saved-item .obh-sec-center,
.obh-saved-item .obh-sec-right {
    border-left: 1px solid var(--row-divider);
}

.obh-saved-item .obh-hunter-k {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--row-label);
}

.obh-saved-item .obh-hunter-v {
    font-family: "JetBrains Mono", monospace;
}

.obh-saved-item .obh-hint {
    color: var(--row-label);
    opacity: 0.8;
}

.obh-saved-item .obh-report-note {
    color: #CBD5E1;
    font-size: 12px;
}

/* LEFT */
.obh-left-top {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.obh-saved-item .obh-saved-thumb {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    border: 1px solid var(--row-border);
    background: rgba(2, 6, 17, 0.35);
}

.obh-left-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.obh-seller-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.obh-saved-item .obh-seller-head {
    margin: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--row-seller);
}

.obh-tag-badge {
    flex: none;
    padding: 2px 7px;
    border: 1px solid;
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.obh-tag-badge-hot { background: #451A03; border-color: #B45309; color: #FBBF24; }
.obh-tag-badge-rank { background: #022C22; border-color: #059669; color: #34D399; }
.obh-tag-badge-link { background: #082F49; border-color: #0284C7; color: #38BDF8; }
.obh-tag-badge-simple { background: #1E293B; border-color: #475569; color: #94A3B8; }
.obh-tag-badge-loss { background: #450A0A; border-color: #B91C1C; color: #F87171; }

.obh-auto-loss-badge {
    display: inline-block;
    flex: none;
    margin: 0;
    padding: 2px 8px;
    border-radius: 4px;
    background: #EF4444;
    color: #ffffff;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

.obh-saved-item .obh-report-title { margin: 0; }

.obh-saved-item .obh-report-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #F1F5F9;
}

.obh-saved-item .obh-report-title a:hover { color: var(--row-accent); }

.obh-buybox-badge {
    align-self: flex-start;
    padding: 1px 8px;
    border: 1px solid;
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.obh-buybox-badge-mine { background: rgba(16, 185, 129, 0.16); border-color: rgba(16, 185, 129, 0.55); color: #34D399; }
.obh-buybox-badge-other { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.55); color: #FBBF24; }

.obh-saved-item .obh-opc-block {
    margin-top: 0;
    gap: 6px;
}

.obh-saved-item .obh-opc-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--row-label);
}

.obh-opc-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: #312E81;
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 4px;
    color: #A5B4FC;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: copy;
}

.obh-opc-value svg { width: 13px; height: 13px; color: #C7D2FE; }
.obh-opc-value:hover { background: #3730A3; }

.obh-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--row-label, #94A3B8);
    cursor: pointer;
}

.obh-icon-btn svg { width: 14px; height: 14px; }
.obh-icon-btn:hover { background: rgba(148, 163, 184, 0.14); color: #E2E8F0; }

.obh-opc-copied { color: #34D399; }

.obh-saved-item .obh-opc-form input {
    background: var(--obh-input);
    border-color: var(--obh-line);
    border-radius: 4px;
    color: #E2E8F0;
}

.obh-sell-line {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.obh-sell-field .obh-hunter-v {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
}

.obh-delivery-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 4px;
    color: #CBD5E1;
    font-size: 11px;
    font-weight: 600;
}

.obh-saved-item .obh-report-meta {
    color: var(--row-label);
    opacity: 0.65;
    font-size: 11px;
}

/* CENTER */
.obh-src-headrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.obh-saved-item .obh-src-label {
    margin: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94A3B8;
    padding-top: 2px;
}

.obh-src-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.obh-deal-chip {
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(120, 53, 15, 0.55);
    border: 1px solid rgba(217, 119, 6, 0.5);
    color: #F87171;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
}

.obh-deal-ends {
    color: #FDE68A;
    font-size: 10px;
    font-weight: 600;
}

.obh-price-change {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid;
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.obh-hiked { background: #200508; border-color: rgba(239, 68, 68, 0.6); color: #FF4D5E; }
.obh-dropped { background: #052E16; border-color: rgba(34, 197, 94, 0.5); color: #4ADE80; }

.obh-via-chip {
    margin: 0;
    padding: 2px 8px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 4px;
    color: #CBD5E1;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 600;
}

.obh-oos-chip {
    padding: 2px 8px;
    border-radius: 4px;
    background: #450A0A;
    border: 1px solid #B91C1C;
    color: #F87171;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
}

.obh-saved-item .obh-saved-source-block {
    margin-top: 0;
    padding: 7px 9px;
    background: rgba(2, 6, 17, 0.25);
    border: 1px solid var(--row-divider);
    border-radius: 6px;
}

.obh-saved-item .obh-saved-source-block.obh-source-best {
    border-color: rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.08);
    box-shadow: none;
}

.obh-saved-item .obh-saved-source {
    margin: 0;
    font-size: 13px;
    font-style: normal;
    color: #CBD5E1;
}

.obh-saved-item .obh-saved-source a {
    color: #E6EDF7;
    font-weight: 600;
}

.obh-saved-item .obh-hunter-fields {
    margin-top: 5px;
    gap: 3px 16px;
}

.obh-src-price-field .obh-hunter-v {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
}

.obh-num-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.obh-saved-item .obh-num-label {
    display: block;
    margin-top: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--row-label);
}

.obh-saved-item .obh-num-label::after { content: ":"; }

.obh-saved-item .obh-saved-form {
    margin-top: 0;
    gap: 6px;
}

.obh-saved-item .obh-saved-form input[type="text"] {
    flex: 1 1 130px;
    width: auto;
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    background: #312E81;
    border: 1px solid rgba(99, 102, 241, 0.55);
    border-radius: 4px;
    color: #C7D2FE;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.obh-saved-item .obh-saved-form input[type="text"]::placeholder {
    color: rgba(129, 140, 248, 0.65);
    text-transform: none;
    font-weight: 500;
}

.obh-saved-item .obh-saved-form input[type="text"]:focus {
    border-color: #818CF8;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
    outline: none;
}

.obh-saved-item .obh-saved-form select {
    height: 28px;
    padding: 0 6px;
    background: var(--row-control);
    border: 1px solid var(--row-divider);
    border-radius: 4px;
    color: #E2E8F0;
    font-size: 12px;
}

.obh-saved-item .obh-saved-form .obh-btn {
    height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.obh-history-btn {
    align-self: flex-end;
    margin-top: auto;
    padding-top: 4px;
    color: #38BDF8;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 600;
}

.obh-history-btn:hover { text-decoration: underline; }

.obh-history-list {
    padding: 8px 10px;
    background: rgba(2, 6, 17, 0.3);
    border: 1px solid var(--row-divider);
    border-radius: 6px;
    color: #CBD5E1;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    line-height: 1.6;
}

.obh-saved-item .obh-isbn-option {
    background: rgba(2, 6, 17, 0.3);
    border-color: var(--row-divider);
    border-radius: 6px;
    color: #E2E8F0;
}

.obh-saved-item .obh-isbn-option:hover { border-color: var(--row-accent); }

/* RIGHT */
.obh-net-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.obh-net-headbox {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.obh-saved-item .obh-net-label {
    margin: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--row-label);
}

.obh-net-line {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.obh-net-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    color: #10B981;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.obh-net-value.obh-neg {
    color: #F87171;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
}

.obh-net-margin {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    font-weight: 700;
    color: #34D399;
}

.obh-net-value.obh-neg ~ .obh-net-margin { color: #F87171; }

.obh-net-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.obh-fetched {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--row-label);
    opacity: 0.85;
    white-space: nowrap;
}

.obh-reload-btn {
    height: 28px;
    padding: 0 10px;
    background: var(--row-control);
    border: 1px solid var(--row-border);
    border-color: color-mix(in srgb, var(--row-accent) 55%, transparent);
    border-radius: 4px;
    color: var(--row-label);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 700;
}

.obh-reload-btn::before { content: "↻ "; }
.obh-reload-btn:hover { background: rgba(2, 6, 17, 0.65); }

.obh-saved-item .obh-dots-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    background: var(--row-control);
    border: 1px solid var(--row-border);
    border-color: color-mix(in srgb, var(--row-accent) 55%, transparent);
    border-radius: 4px;
    color: var(--row-label);
    font-size: 15px;
    line-height: 1;
}

/* The menu hangs below its button now that the button sits
   in the section's top row (the base rule opens it upward,
   for its old place at the row's foot). */
.obh-net-actions .obh-row-menu {
    top: calc(100% + 4px);
    bottom: auto;
    background: #131926;
    border-color: #334155;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(2, 6, 17, 0.6);
}

.obh-net-actions .obh-menu-item { border-radius: 4px; }
.obh-net-actions .obh-menu-item:hover { background: #1E293B; }
.obh-net-actions .obh-menu-danger { color: #F87171; }

.obh-saved-item .obh-saved-tags {
    margin-top: 0;
    gap: 8px;
}

.obh-status-select {
    height: 28px;
    min-width: 104px;
    padding: 0 6px;
    background: var(--row-control);
    border: 1px solid var(--row-border);
    border-color: color-mix(in srgb, var(--row-accent) 55%, transparent);
    border-radius: 4px;
    color: var(--row-label);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.obh-status-select:focus {
    outline: none;
    border-color: var(--row-accent);
}

.obh-feedback-badge {
    align-self: flex-start;
    margin: 0;
    padding: 2px 8px;
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.13);
    color: #34D399;
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.obh-saved-item .obh-saved-feedback {
    margin-top: 0;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 6px;
}

.obh-saved-item .obh-saved-feedback-text {
    flex: none;
    width: 100%;
    min-height: 30px;
    padding: 6px 8px;
    background: var(--row-control);
    border: 1px solid var(--row-border);
    border-color: color-mix(in srgb, var(--row-accent) 45%, transparent);
    border-radius: 4px;
    color: #F1F5F9;
    font-size: 12px;
    resize: vertical;
}

.obh-saved-item .obh-saved-feedback-text::placeholder { color: rgba(148, 163, 184, 0.55); }

.obh-saved-item .obh-saved-feedback-text:focus {
    border-color: var(--row-accent);
    box-shadow: 0 0 0 3px rgba(78, 222, 163, 0.12);
    outline: none;
}

.obh-saved-item .obh-saved-feedback-save {
    align-self: flex-start;
    height: 26px;
    padding: 0 10px;
    background: var(--row-control);
    border: 1px solid var(--row-divider);
    border-radius: 4px;
    color: var(--row-label);
    font-size: 11.5px;
    font-weight: 600;
}

/* Buttons elsewhere in the app take the design's small
   radius; the pill goes away inside the signed-in shell. */
.obh-chat-app .obh-btn { border-radius: 4px; }

/* ── Narrow widths: the shell stacks, the rows never do ── */
@media (max-width: 1100px) {
    .obh-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .obh-chat-app { flex-direction: column; height: auto; min-height: 100%; }
    .obh-sidebar {
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-right: none;
        border-bottom: 1px solid var(--obh-line);
        overflow: visible;
    }
    .obh-side-brand { height: auto; margin: 0; padding: 0; border-bottom: none; }
    .obh-side-brand-text span { display: none; }
    .obh-side-modules { display: none; }
    .obh-nav { flex-direction: row; flex-wrap: wrap; }
    .obh-nav-btn { width: auto; }
    .obh-side-note { display: none; }
    .obh-main { height: auto; flex: 1; }
    .obh-topbar { padding: 0 12px; gap: 10px; }
    .obh-saved-view { padding: 12px; }
    .obh-saved-item .obh-saved-sec { padding: 2px 8px; }
    .obh-saved-item .obh-sec-left { padding-left: 0; }
    .obh-saved-item .obh-sec-right { padding-right: 0; }
}

/* ════════════════════════════════════════════════════════════
   CODE-AS-BASE DENSITY (user's order, 2026-11-13): the saved
   list is laid out on his exported Stitch code.html itself —
   its spacing scale (space-xs 4px / space-sm 8px / space-md
   12px), its 12px card padding, its one-line control rows and
   its foot rows — with our classes carrying the same values,
   so a row stands at the design's height instead of ~430px.
   Nothing is removed and no writer changes: every control
   keeps its place; only the arrangement and density follow
   the exported code. This block comes last on purpose: it
   refines the alignment block above at the same specificity.
   ════════════════════════════════════════════════════════════ */

/* The page frame: the design's main padding (24px sides,
   ~16px top) and 10-12px rhythm between blocks. */
.obh-saved-view { padding: 14px 24px 18px; gap: 10px; }
.obh-stat { padding: 12px; }
.obh-saved-toolbar { padding: 12px; gap: 8px; }
.obh-toolbar-main { gap: 8px; }

/* An empty message line takes no height (the design's
   operational header has no standing message row). */
.obh-saved-toolbar .obh-hint:empty { display: none; }

/* Bulk Add at the design's density: the 2-row textarea and
   its button share one line instead of stacking. */
.obh-saved-bulkadd { display: flex; gap: 8px; align-items: flex-start; margin-top: 2px; }
.obh-saved-bulkadd textarea { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.obh-saved-bulkadd-row { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 4px; }

/* The stream: the design's 12px (space-md) row gap and
   12px row padding. */
.obh-saved-list { gap: 12px; }
.obh-saved-item { padding: 12px; }

/* Columns: the design's 12px (space-md) side padding and
   a tight 5px internal rhythm; the first and last columns
   stay flush with the row's edges. */
.obh-saved-item .obh-saved-sec { gap: 5px; padding: 0 12px; }
.obh-saved-item .obh-sec-left { padding-left: 0; }
.obh-saved-item .obh-sec-right { padding-right: 0; }

/* ── Left column ── */
.obh-saved-item .obh-left-top { gap: 8px; }
.obh-row-check {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex: none;
    accent-color: #10B981;
    cursor: pointer;
}
.obh-saved-item .obh-left-main { gap: 2px; }
.obh-saved-item .obh-report-title { font-size: 13.5px; line-height: 1.3; margin-top: 1px; }
/* The foot row: OPC cluster left, Selling Price right,
   one baseline (the design's arrangement). */
.obh-left-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3px 10px;
}
.obh-saved-item .obh-opc-block { margin-top: 0; }
.obh-saved-item .obh-sell-line { margin-top: 0; padding-top: 0; }
.obh-saved-item .obh-report-meta { margin-top: 1px; }

/* ── Centre column ── */
.obh-saved-item .obh-saved-source-block { padding: 4px 8px; }
/* The source line reads as the design's source title:
   a plain semibold line, not an italic note. */
.obh-saved-item .obh-saved-source { margin-top: 0; font-style: normal; font-size: 13px; line-height: 1.32; }
.obh-saved-item .obh-saved-source a { color: #F1F5F9; font-weight: 600; }
.obh-saved-item .obh-saved-source a:hover { color: #4EDEA3; }
.obh-saved-item .obh-saved-src-thumb { width: 34px; height: 34px; }
.obh-saved-item .obh-hunter-fields { margin-top: 3px; gap: 2px 12px; }
.obh-saved-item .obh-hunter-field { font-size: 12px; }
/* The number controls on ONE compact line: label, field,
   copy, market select, Save — the design's chip row shape.
   A message wraps to its own line only while it has text. */
.obh-saved-item .obh-num-wrap { gap: 0; }
.obh-saved-item .obh-num-label { display: inline; margin: 0; white-space: nowrap; }
.obh-saved-item .obh-saved-form { gap: 4px; align-items: center; }
.obh-saved-item .obh-saved-form input.obh-saved-number { height: 26px; flex: 1 1 56px; min-width: 48px; font-size: 12px; }
.obh-saved-item .obh-saved-form select { height: 26px; font-size: 11.5px; padding: 0 2px; }
.obh-saved-item .obh-saved-form .obh-btn { height: 26px; padding: 0 8px; }
.obh-saved-item .obh-saved-form .obh-hint:not(:empty) { flex: 1 1 100%; }
/* The centre foot: helper line left, Price History right,
   one line held at the section's foot (margin-top auto on
   the foot, as the design's justify-between does). */
.obh-center-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}
.obh-center-foot .obh-hint { flex: 1 1 auto; min-width: 0; font-size: 11px; line-height: 1.35; }
.obh-saved-item .obh-history-btn { margin-top: 0; align-self: center; }

/* ── Right column ── */
.obh-saved-item .obh-net-top { gap: 6px; }
.obh-saved-item .obh-saved-tags { gap: 6px; }
.obh-saved-item .obh-feedback-badge { font-size: 10.5px; }
/* Feedback on ONE slim line (the design's shape): label,
   single-line field, save — the message wraps below only
   while it has text. */
.obh-saved-item .obh-saved-feedback { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.obh-saved-item .obh-saved-feedback-text {
    flex: 1 1 auto;
    width: auto;
    min-width: 70px;
    height: 28px;
    min-height: 28px;
    padding: 0 8px;
    resize: none;
}
.obh-saved-item .obh-saved-feedback-save { height: 28px; }
.obh-saved-item .obh-saved-feedback .obh-hint:not(:empty) { flex: 1 1 100%; }

/* Small screens keep the compact page padding the earlier
   media block set (this section sits after it in the file). */
@media (max-width: 900px) {
    .obh-saved-view { padding: 12px; }
    .obh-saved-item .obh-saved-sec { padding: 0 8px; }
    .obh-saved-item .obh-sec-left { padding-left: 0; }
    .obh-saved-item .obh-sec-right { padding-right: 0; }
}

/* ── Code-as-base density, round 2 (measured, not eyeballed:
   the first measured run stood at 277-335px per row; these
   rules close the remaining stacking the bounding boxes
   showed — the number form's second line, the feedback
   button's wrap, the header chips' wrap, and the estimate
   badge's own line). ── */

/* Left foot: both clusters start at the same top; the
   Selling Price cluster may wrap INSIDE itself (a long
   delivery wording drops under the price) instead of
   pushing the whole cluster to a second line. */
.obh-left-foot { align-items: flex-start; }
.obh-saved-item .obh-sell-line { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }

/* The number line, tightened to fit one line at the
   design's column width: 20px copy button, fixed-width
   market select, slimmer Save, label as a 26px flex cell
   so its top aligns with the controls exactly. */
.obh-saved-item .obh-num-label { display: inline-flex; align-items: center; height: 26px; font-size: 11px; }
.obh-saved-item .obh-saved-form input.obh-saved-number { flex-basis: 44px; min-width: 40px; }
.obh-saved-item .obh-saved-form .obh-num-copy { width: 20px; height: 20px; }
.obh-saved-item .obh-saved-form select { width: 86px; }
.obh-saved-item .obh-saved-form .obh-btn { padding: 0 6px; font-size: 11.5px; }

/* Feedback: the field takes the line's slack from a zero
   basis, so the save button can never be pushed off the
   line by the field's natural width. */
.obh-saved-item .obh-saved-feedback-text { flex: 1 1 0; }

/* Centre header chips at the design's chip size, on one
   line: label, deal chip with its ends, marker. */
.obh-saved-item .obh-src-badges { flex-wrap: nowrap; }
.obh-saved-item .obh-deal-chip,
.obh-saved-item .obh-via-chip,
.obh-saved-item .obh-oos-chip { font-size: 10px; padding: 1px 5px; }
.obh-saved-item .obh-deal-ends { font-size: 10px; white-space: nowrap; }
.obh-saved-item .obh-price-change { font-size: 10px; padding: 1px 5px; white-space: nowrap; }

/* The fields flow tighter, and the delivery-estimate badge
   rides inside it as a chip among the fields. */
.obh-saved-item .obh-hunter-fields { gap: 2px 8px; }
.obh-saved-item .obh-hunter-field { font-size: 11.5px; }
.obh-hunter-fields .obh-delivery-badge { font-size: 10px; padding: 1px 6px; }

/* Centre foot: smaller helper text so the badge, the
   helper and Price History hold one line. */
.obh-center-foot .obh-hint { font-size: 10.5px; }

/* ── Code-as-base density, round 3 (from the second measured
   run's breakdowns: the source thumbnail took a line of its
   own in the centre block, and the left foot's price cluster
   could not shrink). ── */

/* The sourcing thumbnail sits at the source block's top
   right corner, out of the flow (26px) — in flow it stole
   width from the fields line and forced wraps. */
.obh-saved-item .obh-saved-source-block { position: relative; }
.obh-saved-item .obh-saved-src-thumb { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; margin: 0; }
.obh-saved-item .obh-saved-source { padding-right: 30px; }

/* The left foot: the OPC cluster never shrinks; the price
   cluster takes what remains and wraps inside itself. */
.obh-left-foot .obh-opc-block { flex: none; }
.obh-left-foot .obh-sell-line { min-width: 0; }

/* The right header: the Fetched line never wraps inside
   itself, so the Reload and menu stay on the same line. */
.obh-saved-item .obh-fetched { white-space: nowrap; }
.obh-saved-item .obh-net-actions { flex-wrap: nowrap; }

/* ── Code-as-base density, round 4 (from the third measured
   run: the foot's price cluster wrapped as a whole instead
   of shrinking, and the centre header label wrapped). ── */

/* One foot line, always: the price cluster shrinks and
   wraps inside itself rather than dropping below the OPC. */
.obh-left-foot { flex-wrap: nowrap; }

/* The centre header label never wraps; the badge row takes
   the remaining width. */
.obh-saved-item .obh-src-label { white-space: nowrap; }
.obh-saved-item .obh-src-badges { min-width: 0; }

/* ── Code-as-base density, round 5 (from the fourth measured
   run's breakdowns: sections at 162-210 with the source
   block the driver, the toolbar at 165 with its pills
   wrapped, and the number field too narrow to read). ── */

/* Page chrome at the design's tightest: 8px rhythm, slimmer
   stat cards and toolbar, one-line toolbar (add, selection
   and filter pills share the row, as the design's
   operational header lays them out). */
.obh-saved-view { padding: 12px 24px 14px; gap: 8px; }
.obh-stat { padding: 10px 12px; }
.obh-stat-num { font-size: 26px; }
.obh-saved-toolbar { padding: 10px 12px; gap: 6px; }
.obh-saved-add { flex-basis: 300px; }
.obh-filter-tab { padding: 0 8px; font-size: 11px; }
.obh-toolbar-sel .obh-btn { padding: 0 8px; }
.obh-saved-bulkadd textarea { min-height: 40px; }

/* Rows: 10px padding, 8px stream gap. */
.obh-saved-list { gap: 8px; }
.obh-saved-item { padding: 10px 12px; }

/* The fields flow at 11px with 6px gaps, so an eBay row's
   price, postage and total hold one line and the estimate
   badge takes at most one more. */
.obh-saved-item .obh-hunter-fields { gap: 2px 6px; }
.obh-saved-item .obh-hunter-field { font-size: 11px; }

/* The number line rebalanced so the field itself stays
   readable: the typed number or ASIN is the point of the
   line, so it takes the width the tighter select and Save
   free up. */
.obh-saved-item .obh-saved-form input.obh-saved-number { flex-basis: 84px; font-size: 11.5px; }
.obh-saved-item .obh-saved-form select { width: 78px; font-size: 10.5px; }
.obh-saved-item .obh-saved-form .obh-btn { padding: 0 5px; font-size: 11px; }

/* The centre foot's helper never wraps: one slim line,
   ellipsised only if a narrow row ever forces it. */
.obh-center-foot .obh-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Code-as-base density, round 6 (from the fifth measured
   run: the number form still wrapped by ~29px of fixed
   parts, and the centre header badges wrapped). ── */

/* The number field absorbs the line's slack from a zero
   basis; the fixed parts (label, copy, select, Save) are
   sized so their sum always leaves it a readable width. */
.obh-saved-item .obh-saved-form input.obh-saved-number { flex: 1 1 0; min-width: 60px; }
.obh-saved-item .obh-saved-form select { width: 74px; }
.obh-saved-item .obh-saved-form .obh-btn { padding: 0 4px; }
.obh-saved-item .obh-num-label { letter-spacing: 0; }

/* The centre header never wraps: label left, badges right,
   one line (higher specificity so the wrap setting from
   the alignment block cannot reassert itself). */
.obh-saved-item .obh-sec-center .obh-src-headrow { flex-wrap: nowrap; }
.obh-saved-item .obh-sec-center .obh-src-badges { flex-wrap: nowrap; }

/* ── Code-as-base density, round 7 (from the sixth measured
   run: the Price History button measured 36px tall and
   dragged the centre foot with it). ── */
.obh-saved-item .obh-history-btn { height: 22px; padding-top: 0; padding-bottom: 0; }

/* ── Code-as-base density, round 8 (from the seventh measured
   run: rows at 172-204 with the cap and the four-row screen
   both missed by a few pixels of accumulated gaps). ── */
.obh-saved-view { padding-top: 10px; }
.obh-stat { padding: 8px 12px; }
.obh-stat-num { font-size: 24px; }
.obh-saved-list { gap: 6px; }
.obh-saved-item { padding: 8px 12px; }
.obh-saved-item .obh-saved-sec { gap: 4px; }
.obh-saved-bulkadd textarea { padding-top: 4px; padding-bottom: 4px; }

/* ── Code-as-base density, round 9 (from the eighth measured
   run's badge debug: the header chips measured 30px tall on
   inherited line-height, though the design's chips are one
   slim line). ── */
.obh-saved-item .obh-deal-chip,
.obh-saved-item .obh-via-chip,
.obh-saved-item .obh-oos-chip,
.obh-saved-item .obh-price-change {
    display: inline-flex;
    align-items: center;
    height: 20px;
    line-height: 1;
}
.obh-hunter-fields .obh-delivery-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    font-size: 9.5px;
    padding: 1px 4px;
    line-height: 1;
}

/* ════════════════════════════════════════════════════════════
   LOVABLE RESKIN (the user's order, 2026-11-13): the design he
   built in Lovable, applied design-only over the whole signed-in
   app. Tokens are copied verbatim from the export's styles.css
   (light chrome, dark sidebar, deep-teal primary, hunter tag
   triplets); layout numbers come from the export's own markup,
   measured against a static reference mock before this layer
   was written. Settled rules hold: tag names HOT / Rank / Link /
   Simple / Loss (the export's Listed/Unlisted map onto Link /
   Simple), three EQUAL row sections, no fee breakdown, stats
   from real rows only. Where the export's row rule would paint
   an UNTAGGED row near-white on white (its demo data always
   carried a tag), untagged rows take the light palette instead.
   ════════════════════════════════════════════════════════════ */
:root {
    color-scheme: light;
    --lv-bg: oklch(0.974 0.012 218);
    --lv-fg: oklch(0.20 0.027 232);
    --lv-card: oklch(0.999 0.003 215);
    --lv-primary: oklch(0.40 0.094 195);
    --lv-primary-fg: oklch(0.99 0.003 190);
    --lv-secondary: oklch(0.941 0.016 220);
    --lv-secondary-fg: oklch(0.28 0.035 229);
    --lv-muted-fg: oklch(0.49 0.032 227);
    --lv-accent: oklch(0.92 0.06 92);
    --lv-accent-fg: oklch(0.28 0.045 67);
    --lv-destructive: oklch(0.50542 0.19049 27.52);
    --lv-border: oklch(0.882 0.02 222);
    --lv-ring: oklch(0.515 0.083 197);
    --lv-sidebar: oklch(0.20 0.027 232);
    --lv-sidebar-fg: oklch(0.957 0.009 211);
    --lv-sidebar-primary: oklch(0.77294 0.15349 163.22);
    --lv-sidebar-accent: oklch(0.33311 0.03650 227.86);
    --lv-sidebar-accent-fg: oklch(0.98 0.005 210);
    --lv-green: oklch(0.59597 0.12742 163.23);
    --ht-hot-bg: oklch(0.27912 0.07420 45.64);
    --ht-hot-border: oklch(0.55528 0.14551 49);
    --ht-hot-text: oklch(0.83686 0.16442 84.43);
    --ht-rank-bg: oklch(0.26210 0.04875 172.55);
    --ht-rank-border: oklch(0.59597 0.12742 163.23);
    --ht-rank-text: oklch(0.77294 0.15349 163.22);
    --ht-link-bg: oklch(0.29346 0.06324 243.16);
    --ht-link-border: oklch(0.58762 0.13887 241.97);
    --ht-link-text: oklch(0.75351 0.13899 232.66);
    --ht-simple-bg: oklch(0.27950 0.03685 260.03);
    --ht-simple-border: oklch(0.44553 0.03745 257.28);
    --ht-simple-text: oklch(0.71067 0.03511 256.79);
    --ht-loss-bg: oklch(0.25752 0.08856 26.04);
    --ht-loss-border: oklch(0.50542 0.19049 27.52);
    --ht-loss-text: oklch(0.71063 0.16615 22.22);
    /* The app-wide variables are re-pointed at the Lovable
       tokens, so every var-driven rule from the earlier layers
       follows the new palette. */
    --obh-bg: var(--lv-bg);
    --obh-card: var(--lv-card);
    --obh-raised: var(--lv-secondary);
    --obh-inset: var(--lv-card);
    --obh-line: var(--lv-border);
    --obh-ink: var(--lv-fg);
    --obh-muted: var(--lv-muted-fg);
    --obh-blue: var(--lv-primary);
    --obh-blue-dark: var(--lv-primary);
    --obh-green: var(--lv-primary);
    --obh-mint: var(--lv-sidebar-primary);
    --obh-shell: var(--lv-sidebar);
    --obh-input: var(--lv-card);
    --obh-radius: 8px;
    --obh-shadow: 0 1px 2px rgba(15, 35, 50, 0.07);
}

body {
    background: var(--lv-bg);
    color: var(--lv-fg);
}

/* ── Frame ── */
.obh-chat-app {
    background: var(--lv-bg);
}

/* ── Sidebar: the export's dark brand surface, 248px ── */
.obh-sidebar {
    width: 248px;
    gap: 10px;
    padding: 20px 16px 16px;
    background: var(--lv-sidebar);
    border-right: 1px solid var(--lv-sidebar-accent);
    color: var(--lv-sidebar-fg);
}

.obh-side-brand {
    height: auto;
    margin: 0;
    padding: 0 8px;
    border-bottom: none;
}

.obh-logo-tile {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
}

.obh-logo-tile img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
}

.obh-side-brand-text strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--lv-sidebar-fg);
}

.obh-side-brand-text span {
    font-family: "Hanken Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: color-mix(in oklab, var(--lv-sidebar-fg) 65%, transparent);
}

.obh-live-pill {
    margin-top: 18px;
    padding: 8px 12px;
    background: var(--lv-sidebar-accent);
    border: 1px solid transparent;
    border-radius: 4px;
}

.obh-live-dot {
    background: var(--lv-primary);
    box-shadow: none;
}

.obh-live-pill .obh-conn {
    font-family: "Hanken Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--lv-sidebar-fg);
}

.obh-live-pill .obh-conn-on { color: var(--lv-sidebar-primary); }
.obh-live-pill .obh-conn-off { color: oklch(0.82 0.09 25); }

.obh-side-modules {
    margin-top: 22px;
    padding: 0 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: color-mix(in oklab, var(--lv-sidebar-fg) 55%, transparent);
}

.obh-nav { gap: 4px; }

.obh-nav-btn {
    height: 40px;
    padding: 0 12px;
    gap: 12px;
    border: none;
    border-radius: 6px;
    color: color-mix(in oklab, var(--lv-sidebar-fg) 80%, transparent);
    font-size: 14px;
    font-weight: 500;
}

.obh-nav-btn::before {
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    opacity: 0.9;
}

.obh-nav-btn:hover {
    background: color-mix(in oklab, var(--lv-sidebar-accent) 70%, transparent);
    color: var(--lv-sidebar-fg);
}

.obh-nav-btn.obh-nav-active {
    background: var(--lv-sidebar-accent);
    border-color: transparent;
    color: var(--lv-sidebar-accent-fg);
    box-shadow: none;
}

.obh-side-note {
    padding: 8px;
    background: none;
    border: none;
    border-radius: 0;
    color: color-mix(in oklab, var(--lv-sidebar-fg) 65%, transparent);
    font-size: 11px;
}

/* ── Top bar: pale, blurred, with the view title the export
   shows on the left (the title text itself is pure CSS, keyed
   off the sidebar's active state — no script reads it). ── */
.obh-topbar {
    height: 65px;
    padding: 0 28px;
    gap: 16px;
    background: color-mix(in oklab, var(--lv-bg) 95%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--lv-border);
}

.obh-topbar-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: none;
}

.obh-view-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: var(--lv-fg);
    white-space: nowrap;
}

.obh-view-name::after { content: "Team Chat"; }

.obh-view-crumb {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1;
    color: var(--lv-muted-fg);
    white-space: nowrap;
}

.obh-view-crumb::after { content: "OnBuy Hunter / Team Chat"; }

.obh-chat-app:has(.obh-nav-btn[data-nav="saved"].obh-nav-active) .obh-view-name::after { content: "Dashboard"; }
.obh-chat-app:has(.obh-nav-btn[data-nav="saved"].obh-nav-active) .obh-view-crumb::after { content: "OnBuy Hunter / Dashboard"; }
.obh-chat-app:has(.obh-nav-btn[data-nav="price"].obh-nav-active) .obh-view-name::after { content: "Price Check"; }
.obh-chat-app:has(.obh-nav-btn[data-nav="price"].obh-nav-active) .obh-view-crumb::after { content: "OnBuy Hunter / Price Check"; }
.obh-chat-app:has(.obh-nav-btn[data-nav="members"].obh-nav-active) .obh-view-name::after { content: "Members"; }
.obh-chat-app:has(.obh-nav-btn[data-nav="members"].obh-nav-active) .obh-view-crumb::after { content: "OnBuy Hunter / Members"; }
.obh-chat-app:has(.obh-nav-btn[data-nav="settings"].obh-nav-active) .obh-view-name::after { content: "Settings"; }
.obh-chat-app:has(.obh-nav-btn[data-nav="settings"].obh-nav-active) .obh-view-crumb::after { content: "OnBuy Hunter / Settings"; }
.obh-chat-app:has(.obh-nav-btn[data-nav="admin"].obh-nav-active) .obh-view-name::after { content: "Admin"; }
.obh-chat-app:has(.obh-nav-btn[data-nav="admin"].obh-nav-active) .obh-view-crumb::after { content: "OnBuy Hunter / Admin"; }

.obh-topbar-search {
    flex: 0 1 300px;
    width: 300px;
    margin-left: auto;
}

.obh-topbar-search svg { color: var(--lv-muted-fg); }

.obh-topbar-search input {
    height: 36px;
    padding: 0 12px 0 36px;
    background: transparent;
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    color: var(--lv-fg);
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(15, 35, 50, 0.05);
}

.obh-topbar-search input::placeholder { color: var(--lv-muted-fg); }

.obh-topbar-search input:focus {
    border-color: var(--lv-ring);
    box-shadow: 0 0 0 1px var(--lv-ring);
}

/* Account block in the top bar (its colours live in web.css;
   the button shape is the app button system below). */
.obh-account-bar .obh-btn {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
}

/* ── Buttons and inputs, app-wide (the export's primitives:
   36px, 6px radius, deep-teal primary, outline secondary) ── */
.obh-chat-app .obh-btn {
    padding: 0 16px;
    min-height: 36px;
    background: var(--lv-primary);
    border: 1px solid var(--lv-primary);
    border-radius: 6px;
    color: var(--lv-primary-fg);
    font-size: 14px;
    font-weight: 500;
}

.obh-chat-app .obh-btn:hover {
    background: color-mix(in oklab, var(--lv-primary) 90%, var(--lv-bg));
    border-color: color-mix(in oklab, var(--lv-primary) 90%, var(--lv-bg));
}

.obh-chat-app .obh-btn-light {
    background: var(--lv-card);
    border-color: var(--lv-border);
    color: var(--lv-fg);
}

.obh-chat-app .obh-btn-light:hover {
    background: var(--lv-secondary);
    border-color: var(--lv-border);
    color: var(--lv-fg);
}

.obh-chat-app .obh-btn-danger {
    background: var(--lv-destructive);
    border-color: var(--lv-destructive);
    color: #ffffff;
}

.obh-chat-app .obh-btn-danger:hover {
    background: color-mix(in oklab, var(--lv-destructive) 90%, var(--lv-bg));
    border-color: color-mix(in oklab, var(--lv-destructive) 90%, var(--lv-bg));
}

.obh-chat-app .obh-btn-sm {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
}

.obh-chat-app :focus-visible {
    outline: 2px solid var(--lv-ring);
    outline-offset: 2px;
}

.obh-chat-app input::placeholder,
.obh-chat-app textarea::placeholder {
    color: var(--lv-muted-fg);
}

/* ── Banners above the views ── */
.obh-main > .obh-announce,
.obh-main > .obh-notice {
    margin: 16px 24px 0;
}

.obh-announce { border-radius: 8px; }

.obh-notice {
    color: var(--lv-destructive);
    background: color-mix(in oklab, var(--lv-destructive) 7%, var(--lv-card));
    border-color: color-mix(in oklab, var(--lv-destructive) 35%, transparent);
    border-radius: 8px;
}

/* ── Dashboard page ── */
.obh-saved-view {
    padding: 24px 36px 28px;
    gap: 16px;
}

/* Stat cards: the export's hairline-divided strip — one
   bordered grid, 1px gaps showing the border colour through,
   white cells, sentence-case labels, mono numbers. */
.obh-stats {
    /* The saved view is a height-constrained flex column: fixed-format
       furniture must never flex-shrink (a shrunk strip clips its numbers
       behind overflow:hidden — found by measurement, lovable round). */
    flex: none;
    gap: 1px;
    background: var(--lv-border);
    border: 1px solid var(--lv-border);
    border-radius: 4px;
    overflow: hidden;
}

.obh-saved-toolbar,
.obh-list-head {
    flex: none;
}

.obh-stat {
    min-height: 105px;
    padding: 16px 20px;
    background: var(--lv-card);
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.obh-stat-label {
    font-family: "Hanken Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lv-muted-fg);
}

.obh-stat-num {
    font-size: 24px;
    color: var(--lv-fg);
}

.obh-stat-num-green { color: var(--lv-primary); text-shadow: none; }
.obh-stat-num-cyan { color: var(--lv-primary); text-shadow: none; }
.obh-stat-num-red { color: var(--lv-destructive); text-shadow: none; }

.obh-stat-icon {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 4px;
    background: var(--lv-secondary);
}

.obh-stat-icon svg { width: 16px; height: 16px; }

.obh-stat-icon-slate { background: var(--lv-secondary); color: var(--lv-fg); }
.obh-stat-icon-green { background: var(--lv-secondary); color: var(--lv-primary); }
.obh-stat-icon-cyan { background: var(--lv-secondary); color: var(--lv-primary); }
.obh-stat-icon-red { background: var(--lv-secondary); color: var(--lv-destructive); }

/* Toolbar: our add / selection / filter controls on one
   white card, in the export's control language. */
.obh-saved-toolbar {
    gap: 12px;
    padding: 16px;
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 35, 50, 0.05);
}

.obh-saved-toolbar .obh-saved-add-row input[type="text"],
.obh-saved-toolbar .obh-saved-add-manual input[type="text"] {
    height: 36px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    color: var(--lv-fg);
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(15, 35, 50, 0.05);
}

.obh-saved-toolbar .obh-saved-add-row input[type="text"]:focus,
.obh-saved-toolbar .obh-saved-add-manual input[type="text"]:focus {
    border-color: var(--lv-ring);
    box-shadow: 0 0 0 1px var(--lv-ring);
    outline: none;
}

.obh-add-btn {
    height: 36px;
    padding: 0 16px;
    background: var(--lv-primary);
    border: 1px solid var(--lv-primary);
    border-radius: 6px;
    color: var(--lv-primary-fg);
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
}

.obh-add-btn:hover {
    background: color-mix(in oklab, var(--lv-primary) 90%, var(--lv-bg));
    border-color: color-mix(in oklab, var(--lv-primary) 90%, var(--lv-bg));
}

.obh-btn-dark {
    height: 36px;
    padding: 0 12px;
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    color: var(--lv-fg);
    font-size: 13px;
    font-weight: 500;
}

.obh-btn-dark:hover { background: var(--lv-secondary); }
.obh-btn-dark:disabled { opacity: 0.45; }

.obh-sel-count {
    padding: 4px 9px;
    background: var(--lv-secondary);
    border: none;
    border-radius: 4px;
    color: var(--lv-secondary-fg);
}

.obh-filter-tab {
    height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 4px;
    color: var(--lv-fg);
    font-family: "Hanken Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.obh-filter-tab::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--lv-border);
}

.obh-filter-tab[data-filter="hot"]::before { background: var(--ht-hot-border); border-color: var(--ht-hot-border); }
.obh-filter-tab[data-filter="rank"]::before { background: var(--ht-rank-border); border-color: var(--ht-rank-border); }
.obh-filter-tab[data-filter="link"]::before { background: var(--ht-link-border); border-color: var(--ht-link-border); }
.obh-filter-tab[data-filter="simple"]::before { background: var(--ht-simple-border); border-color: var(--ht-simple-border); }
.obh-filter-tab[data-filter="loss"]::before { background: var(--ht-loss-border); border-color: var(--ht-loss-border); }

.obh-filter-tab:hover { background: var(--lv-secondary); color: var(--lv-fg); }

.obh-filter-tab.obh-filter-active {
    background: var(--lv-primary);
    border-color: var(--lv-primary);
    color: var(--lv-primary-fg);
    font-weight: 500;
}

.obh-filter-tab.obh-filter-active::before { border-color: color-mix(in oklab, var(--lv-primary-fg) 55%, transparent); }

.obh-saved-toolbar .obh-saved-bulkadd {
    padding-top: 12px;
    border-top: 1px solid var(--lv-border);
}

.obh-saved-toolbar .obh-saved-bulkadd textarea {
    background: transparent;
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    color: var(--lv-fg);
    font-size: 13px;
}

.obh-saved-toolbar .obh-saved-bulkadd textarea:focus {
    border-color: var(--lv-ring);
    box-shadow: 0 0 0 1px var(--lv-ring);
    outline: none;
}

.obh-saved-bulk-bar {
    padding: 8px 12px;
    background: color-mix(in oklab, var(--lv-secondary) 60%, transparent);
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    color: var(--lv-fg);
}

.obh-saved-bulk-bar select {
    height: 32px;
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 4px;
    color: var(--lv-fg);
    font-size: 12.5px;
}

.obh-saved-bulk-bar #obh-saved-bulk-update {
    background: var(--lv-primary);
    border-color: var(--lv-primary);
    color: var(--lv-primary-fg);
}

.obh-saved-bulk-bar #obh-saved-bulk-update:hover {
    background: color-mix(in oklab, var(--lv-primary) 90%, var(--lv-bg));
}

.obh-saved-bulk-bar #obh-saved-bulk-delete {
    background: var(--lv-destructive);
    border-color: var(--lv-destructive);
    color: #ffffff;
}

.obh-saved-bulk-bar #obh-saved-bulk-delete:hover {
    background: color-mix(in oklab, var(--lv-destructive) 90%, var(--lv-bg));
}

/* The v3.24 CAPTCHA notice in the design's pale-yellow accent. */
.obh-captcha-banner {
    background: color-mix(in oklab, var(--lv-accent) 45%, white);
    border: 1px solid color-mix(in oklab, var(--lv-accent-fg) 45%, transparent);
    border-radius: 6px;
    color: var(--lv-accent-fg);
}

.obh-captcha-link { color: var(--lv-primary); }

/* The list's column header strip (presentational labels,
   aligned to the rows' three equal sections). */
.obh-list-head {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 10px 16px;
    background: color-mix(in oklab, var(--lv-secondary) 55%, transparent);
    border: 1px solid var(--lv-border);
    border-bottom: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lv-muted-fg);
}

.obh-list-head span:nth-child(2),
.obh-list-head span:nth-child(3) { padding-left: 20px; }

/* ── Product rows: one bordered list, rows divided by
   hairlines, a 2px tag-colour spine on the left. An untagged
   row is a white card row; a tagged row takes the export's
   dark hunter tint for that tag, whole-row. ── */
.obh-saved-list {
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-top: none;
    gap: 0;
}

.obh-saved-list > .obh-hint {
    padding: 48px 20px;
    text-align: center;
    color: var(--lv-muted-fg);
    font-size: 14px;
    line-height: 1.6;
}

.obh-saved-list .obh-saved-item {
    --row-bg: var(--lv-card);
    --row-border: var(--lv-border);
    --row-accent: var(--lv-primary);
    --row-ink: var(--lv-fg);
    --row-link: var(--lv-fg);
    --row-subtle: var(--lv-fg);
    --row-faint: var(--lv-muted-fg);
    --row-divider: color-mix(in oklab, var(--lv-border) 40%, transparent);
    --row-control-bg: var(--lv-card);
    --row-control-border: var(--lv-border);
    --row-control-ink: var(--lv-fg);
    --row-pill-bg: transparent;
    --row-net-neg: var(--lv-destructive);
    --row-label: var(--row-subtle);
    --row-seller: var(--row-ink);
    background: var(--row-bg);
    color: var(--row-ink);
    border: none;
    border-bottom: 1px solid var(--lv-border);
    border-left: 2px solid var(--row-border);
    border-radius: 0;
    box-shadow: none;
    padding: 12px 16px;
    margin: 0;
}

.obh-saved-list .obh-saved-item:last-child { border-bottom: none; }

/* Every tagged row is a tinted row (the export's
   .hunter-row-tinted): near-white text, pale-blue subtle
   text, dark translucent controls. */
.obh-saved-list .obh-saved-item[class*="obh-tag-"] {
    --row-ink: oklch(0.97 0.009 215);
    --row-link: oklch(0.98 0.008 215);
    --row-subtle: oklch(0.78 0.017 220);
    --row-faint: oklch(0.78 0.017 220);
    --row-control-bg: oklch(0.12 0.02 225 / 45%);
    --row-control-border: oklch(1 0 0 / 18%);
    --row-control-ink: oklch(0.95 0.008 215);
    --row-pill-bg: oklch(1 0 0 / 12%);
    --row-net-neg: var(--ht-loss-text);
    --row-label: var(--row-subtle);
    --row-seller: var(--row-ink);
}

.obh-saved-list .obh-saved-item.obh-tag-hot {
    --row-bg: var(--ht-hot-bg);
    --row-border: var(--ht-hot-border);
    --row-accent: var(--ht-hot-text);
}

.obh-saved-list .obh-saved-item.obh-tag-rank {
    --row-bg: var(--ht-rank-bg);
    --row-border: var(--ht-rank-border);
    --row-accent: var(--ht-rank-text);
}

.obh-saved-list .obh-saved-item.obh-tag-link {
    --row-bg: var(--ht-link-bg);
    --row-border: var(--ht-link-border);
    --row-accent: var(--ht-link-text);
}

.obh-saved-list .obh-saved-item.obh-tag-simple {
    --row-bg: var(--ht-simple-bg);
    --row-border: var(--ht-simple-border);
    --row-accent: var(--ht-simple-text);
}

.obh-saved-list .obh-saved-item.obh-tag-loss {
    --row-bg: var(--ht-loss-bg);
    --row-border: var(--ht-loss-border);
    --row-accent: var(--ht-loss-text);
}

.obh-saved-item.obh-buybox-mine {
    outline: 2px solid color-mix(in oklab, var(--lv-green) 65%, transparent);
    outline-offset: -2px;
}

.obh-saved-item.obh-buybox-other {
    outline: 2px solid oklch(0.75 0.13 75 / 65%);
    outline-offset: -2px;
}

.obh-saved-item.obh-selected {
    outline: 2px solid var(--lv-ring);
    outline-offset: -2px;
}

/* Equal thirds, measured: flex base sizes clamp at padding+border, so every
   section carries the SAME horizontal padding+border total (40px desktop);
   the two divider sections trade 1px of left padding for their 1px border. */
.obh-saved-item .obh-saved-sec { gap: 8px; padding: 0 20px; }
.obh-saved-item .obh-sec-left { padding-left: 20px; }
.obh-saved-item .obh-sec-right { padding-right: 20px; }

.obh-saved-item .obh-sec-center,
.obh-saved-item .obh-sec-right {
    border-left: 1px solid var(--row-divider);
    padding-left: 19px;
}

.obh-saved-item .obh-hunter-k {
    color: var(--row-subtle);
    font-size: 11px;
    font-weight: 600;
}

.obh-saved-item .obh-hunter-v { color: var(--row-ink); }

.obh-saved-item .obh-hint { color: var(--row-faint); }

.obh-saved-item .obh-report-note {
    color: var(--row-faint);
    font-size: 12px;
    font-style: normal;
}

.obh-saved-item .obh-missing-note {
    color: var(--row-faint);
    font-style: normal;
    font-size: 11px;
}

/* LEFT */
.obh-row-check { accent-color: var(--lv-primary); }

.obh-saved-item .obh-saved-thumb {
    width: 54px;
    height: 54px;
    object-fit: contain;
    background: transparent;
    border: none;
    border-radius: 0;
}

.obh-saved-item .obh-seller-head {
    font-size: 10px;
    letter-spacing: 0.03em;
    color: var(--row-seller);
}

.obh-tag-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.68rem;
}

.obh-tag-badge-hot { background: var(--ht-hot-bg); border-color: var(--ht-hot-border); color: var(--ht-hot-text); }
.obh-tag-badge-rank { background: var(--ht-rank-bg); border-color: var(--ht-rank-border); color: var(--ht-rank-text); }
.obh-tag-badge-link { background: var(--ht-link-bg); border-color: var(--ht-link-border); color: var(--ht-link-text); }
.obh-tag-badge-simple { background: var(--ht-simple-bg); border-color: var(--ht-simple-border); color: var(--ht-simple-text); }
.obh-tag-badge-loss { background: var(--ht-loss-bg); border-color: var(--ht-loss-border); color: var(--ht-loss-text); }

.obh-auto-loss-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0.15rem 0.5rem;
    background: var(--ht-loss-bg);
    border: 1px solid var(--ht-loss-border);
    border-radius: 4px;
    color: var(--ht-loss-text);
    font-size: 0.68rem;
    box-shadow: none;
}

.obh-saved-item .obh-report-title a {
    color: var(--row-link);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.375;
}

.obh-saved-item .obh-report-title a:hover {
    color: var(--row-link);
    text-decoration: underline;
}

.obh-buybox-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.68rem;
}

.obh-buybox-badge-mine {
    background: color-mix(in oklab, var(--lv-primary) 10%, transparent);
    border-color: color-mix(in oklab, var(--lv-primary) 30%, transparent);
    color: var(--lv-primary);
}

.obh-buybox-badge-other {
    background: color-mix(in oklab, var(--lv-accent) 45%, white);
    border-color: color-mix(in oklab, var(--lv-accent-fg) 40%, transparent);
    color: var(--lv-accent-fg);
}

.obh-saved-item .obh-opc-label {
    font-size: 10px;
    color: var(--lv-muted-fg);
}

.obh-opc-value {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0.15rem 0.5rem;
    background: color-mix(in oklab, var(--lv-primary) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--lv-primary) 30%, transparent);
    border-radius: 4px;
    color: var(--lv-primary);
    font-size: 10px;
}

.obh-opc-value svg { color: currentColor; }
.obh-opc-value:hover { background: color-mix(in oklab, var(--lv-primary) 18%, transparent); }

.obh-icon-btn { color: var(--row-subtle); border-radius: 4px; }

.obh-icon-btn:hover {
    background: color-mix(in oklab, var(--row-ink) 10%, transparent);
    color: var(--row-ink);
}

.obh-opc-copied { color: var(--row-accent); }

.obh-saved-item .obh-opc-form input {
    height: 28px;
    background: var(--row-control-bg);
    border: 1px solid var(--row-control-border);
    border-radius: 4px;
    color: var(--row-control-ink);
}

.obh-left-foot {
    border-top: 1px solid var(--row-divider);
    padding-top: 8px;
}

.obh-saved-item .obh-sell-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.obh-sell-field .obh-hunter-k {
    font-family: "Hanken Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--row-subtle);
}

.obh-saved-item .obh-sell-field .obh-hunter-v {
    font-size: 24.8px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--row-ink);
}

.obh-delivery-badge {
    background: var(--row-control-bg);
    border: 1px solid var(--row-divider);
    border-radius: 999px;
    color: var(--row-subtle);
    font-size: 10px;
}

.obh-saved-item .obh-report-meta {
    color: var(--row-faint);
    opacity: 1;
    font-size: 11px;
}

/* CENTER */
.obh-saved-item .obh-src-label {
    font-family: "Hanken Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--row-subtle);
}

.obh-saved-item .obh-deal-chip {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 23px;
    padding: 0.15rem 0.5rem;
    background: var(--ht-hot-bg);
    border: 1px solid var(--ht-hot-border);
    border-radius: 4px;
    color: var(--ht-hot-text);
    font-size: 0.68rem;
}

.obh-saved-item .obh-deal-ends { color: var(--row-subtle); }

.obh-saved-item .obh-price-change {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 23px;
    padding: 0.12rem 0.48rem;
    background: var(--row-pill-bg);
    border: none;
    border-radius: 999px;
    font-size: 0.7rem;
}

.obh-saved-item .obh-hiked { background: var(--row-pill-bg); color: var(--lv-destructive); }
.obh-saved-item .obh-dropped { background: var(--row-pill-bg); color: var(--lv-primary); }

.obh-saved-item .obh-via-chip {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 22px;
    padding: 2px 6px;
    background: var(--row-control-bg);
    border: 1px solid var(--row-divider);
    border-radius: 4px;
    color: var(--row-subtle);
    font-size: 10px;
}

.obh-saved-item .obh-oos-chip {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 23px;
    padding: 0.15rem 0.5rem;
    background: var(--ht-loss-bg);
    border: 1px solid var(--ht-loss-border);
    border-radius: 4px;
    color: var(--ht-loss-text);
    font-size: 0.68rem;
}

.obh-saved-item .obh-saved-source-block {
    background: transparent;
    border: none;
    border-top: 1px solid var(--row-divider);
    border-radius: 0;
    box-shadow: none;
    padding: 8px 0 2px;
}

.obh-saved-item .obh-saved-source-block.obh-source-best {
    background: color-mix(in oklab, var(--lv-green) 9%, transparent);
    border-top: 1px solid color-mix(in oklab, var(--lv-green) 45%, transparent);
    box-shadow: none;
}

.obh-saved-item .obh-saved-source {
    color: var(--row-subtle);
    font-size: 13px;
    font-style: normal;
}

.obh-saved-item .obh-saved-source a { color: var(--row-link); font-weight: 600; }
.obh-saved-item .obh-saved-source a:hover { color: var(--row-link); text-decoration: underline; }

.obh-cheaper {
    background: var(--lv-primary);
    border-radius: 4px;
    color: var(--lv-primary-fg);
    padding: 1px 6px;
    font-size: 10px;
}

.obh-oos {
    background: color-mix(in oklab, var(--lv-destructive) 12%, transparent);
    border-radius: 4px;
    color: var(--lv-destructive);
}

.obh-saved-item .obh-src-price-field .obh-hunter-v {
    font-size: 19px;
    font-weight: 700;
    color: var(--row-ink);
}

.obh-saved-item .obh-num-label {
    font-family: "Hanken Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--row-subtle);
}

.obh-saved-item .obh-saved-form input[type="text"] {
    height: 28px;
    background: var(--row-control-bg);
    border: 1px solid var(--row-control-border);
    border-radius: 4px;
    color: var(--row-control-ink);
    font-size: 11.5px;
}

.obh-saved-item .obh-saved-form input[type="text"]::placeholder {
    color: color-mix(in oklab, var(--row-control-ink) 55%, transparent);
    text-transform: none;
}

.obh-saved-item .obh-saved-form input[type="text"]:focus {
    border-color: var(--lv-ring);
    box-shadow: 0 0 0 1px var(--lv-ring);
    outline: none;
}

.obh-saved-item .obh-saved-form select {
    height: 28px;
    background: var(--row-control-bg);
    border: 1px solid var(--row-control-border);
    border-radius: 4px;
    color: var(--row-control-ink);
}

/* One-line number form (settled v2 arrangement: label, field, market
   select and Save share one line). The Lovable sections carry 20px
   side padding — 16px narrower than the Obsidian build — so the form
   trims a few px to stay on one line at desktop widths. */
.obh-saved-item .obh-saved-form { gap: 3px; }
.obh-saved-item .obh-saved-form input.obh-saved-number { min-width: 34px; }
.obh-saved-item .obh-saved-form select { width: 76px; }
.obh-saved-item .obh-saved-form .obh-btn { padding: 0 5px; }

.obh-saved-item .obh-saved-form .obh-btn {
    height: 28px;
    min-height: 28px;
    background: var(--row-control-bg);
    border: 1px solid var(--row-control-border);
    border-radius: 4px;
    color: var(--row-control-ink);
    font-size: 11.5px;
}

.obh-saved-item .obh-saved-form .obh-btn:hover { border-color: var(--row-accent); }

.obh-saved-item .obh-isbn-option {
    background: var(--row-control-bg);
    border: 1px solid var(--row-divider);
    border-radius: 6px;
    color: var(--row-ink);
}

.obh-saved-item .obh-isbn-option:hover { border-color: var(--row-accent); }
.obh-saved-item .obh-isbn-meta { color: var(--row-faint); }

.obh-center-foot {
    border-top: 1px solid var(--row-divider);
    padding-top: 8px;
}

.obh-history-btn {
    color: var(--row-ink);
    font-family: "Hanken Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
}

.obh-history-btn:hover { text-decoration: underline; }

.obh-history-list {
    background: transparent;
    border: 1px solid var(--row-divider);
    border-radius: 4px;
    color: var(--row-subtle);
}

/* RIGHT */
.obh-saved-item .obh-net-label {
    font-family: "Hanken Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--row-subtle);
}

.obh-saved-item .obh-net-value {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 24.8px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--lv-primary);
    text-shadow: none;
}

.obh-saved-item .obh-net-value.obh-neg {
    color: var(--row-net-neg);
    text-shadow: none;
}

.obh-net-margin {
    font-family: "Hanken Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--row-subtle);
}

.obh-saved-item .obh-net-value.obh-neg ~ .obh-net-margin { color: var(--row-net-neg); }

.obh-fetched {
    font-size: 10px;
    color: var(--row-faint);
    opacity: 1;
}

.obh-reload-btn {
    height: 28px;
    padding: 0 8px;
    background: var(--lv-bg);
    border: 1px solid var(--lv-border);
    border-radius: 4px;
    color: var(--lv-fg);
    font-size: 10px;
}

.obh-reload-btn:hover { background: var(--lv-secondary); }

.obh-saved-item .obh-dots-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--row-ink);
}

.obh-saved-item .obh-dots-btn:hover {
    background: color-mix(in oklab, var(--row-ink) 10%, transparent);
}

.obh-row-menu {
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 35, 50, 0.18);
    color: var(--lv-fg);
}

.obh-net-actions .obh-row-menu {
    background: var(--lv-card);
    border-color: var(--lv-border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 35, 50, 0.18);
}

.obh-net-actions .obh-menu-item:hover { background: var(--lv-secondary); }
.obh-net-actions .obh-menu-danger { color: var(--lv-destructive); }

.obh-status-select {
    height: 28px;
    background: var(--row-control-bg);
    border: 1px solid var(--row-control-border);
    border-radius: 4px;
    color: var(--row-control-ink);
    font-family: "Hanken Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
}

.obh-status-select:focus { border-color: var(--row-accent); }

.obh-feedback-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0.15rem 0.5rem;
    background: color-mix(in oklab, var(--lv-primary) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--lv-primary) 30%, transparent);
    border-radius: 4px;
    color: var(--lv-primary);
    font-size: 0.68rem;
}

.obh-saved-item .obh-saved-feedback-text {
    height: 28px;
    background: var(--row-control-bg);
    border: 1px solid var(--row-control-border);
    border-radius: 4px;
    color: var(--row-control-ink);
    font-size: 11px;
}

.obh-saved-item .obh-saved-feedback-text::placeholder {
    color: color-mix(in oklab, var(--row-control-ink) 55%, transparent);
}

.obh-saved-item .obh-saved-feedback-text:focus {
    border-color: var(--lv-ring);
    box-shadow: 0 0 0 1px var(--lv-ring);
    outline: none;
}

.obh-saved-item .obh-saved-feedback-save {
    height: 28px;
    background: var(--row-control-bg);
    border: 1px solid var(--row-control-border);
    border-radius: 4px;
    color: var(--row-control-ink);
}

/* ── Settings view: the export's plain form column — no card,
   hairline rules above and below, labelled fields. ── */
#obh-settings {
    width: calc(100% - 48px);
    max-width: 672px;
    margin: 24px auto;
    max-height: calc(100dvh - 140px);
    padding: 20px 0 26px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--lv-border);
    border-bottom: 1px solid var(--lv-border);
    border-radius: 0;
    box-shadow: none;
}

.obh-settings label {
    color: var(--lv-fg);
    font-size: 14px;
    font-weight: 500;
}

.obh-settings .obh-hint { color: var(--lv-muted-fg); }

.obh-settings input:not([type="checkbox"]) {
    height: 36px;
    padding: 0 12px;
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    color: var(--lv-fg);
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(15, 35, 50, 0.05);
}

.obh-settings input:focus {
    border-color: var(--lv-ring);
    box-shadow: 0 0 0 1px var(--lv-ring);
    outline: none;
}

.obh-settings-msg { color: var(--lv-green); }

.obh-settings .obh-panel-title {
    padding-bottom: 0;
    border-bottom: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lv-fg);
}

/* ── Members and Admin: one panel root, two views. The panel
   itself is a plain column; the tool blocks are white cards. ── */
#obh-members-panel {
    width: calc(100% - 48px);
    max-width: 896px;
    margin: 24px auto;
    max-height: calc(100dvh - 140px);
    padding: 20px 0 26px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--lv-border);
    border-bottom: 1px solid var(--lv-border);
    border-radius: 0;
    box-shadow: none;
}

.obh-room-line { color: var(--lv-fg); font-size: 13.5px; }

.obh-members-list li {
    padding: 12px 2px;
    margin-bottom: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--lv-border);
    border-radius: 0;
    font-size: 14px;
    color: var(--lv-fg);
}

#obh-dm-approved-list li:hover { background: var(--lv-secondary); }

.obh-dot {
    background: var(--lv-green);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--lv-green) 18%, transparent);
}

.obh-dot-off { background: var(--lv-muted-fg); box-shadow: none; }

.obh-member-you { color: var(--lv-muted-fg); }
.obh-member-seen { color: var(--lv-muted-fg); }

.obh-kick {
    color: var(--lv-destructive);
    background: color-mix(in oklab, var(--lv-destructive) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--lv-destructive) 35%, transparent);
    border-radius: 6px;
}

.obh-kick:hover { background: color-mix(in oklab, var(--lv-destructive) 16%, transparent); }

.obh-lock-btn {
    color: var(--lv-accent-fg);
    background: color-mix(in oklab, var(--lv-accent) 45%, white);
    border-color: color-mix(in oklab, var(--lv-accent-fg) 35%, transparent);
}

.obh-lock-btn:hover { background: color-mix(in oklab, var(--lv-accent) 65%, white); }

.obh-super-block {
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    padding: 16px;
}

.obh-owner-note {
    color: var(--lv-accent-fg);
    background: color-mix(in oklab, var(--lv-accent) 40%, white);
    border: 1px solid color-mix(in oklab, var(--lv-accent-fg) 35%, transparent);
    border-radius: 6px;
}

.obh-report-item {
    background: var(--lv-secondary);
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    color: var(--lv-fg);
}

.obh-report-title a { color: var(--lv-primary); }
.obh-report-note { color: var(--lv-muted-fg); }
.obh-report-meta { color: var(--lv-muted-fg); }

.obh-admin-block textarea {
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    color: var(--lv-fg);
}

.obh-admin-block textarea:focus {
    border-color: var(--lv-ring);
    box-shadow: 0 0 0 1px var(--lv-ring);
    outline: none;
}

.obh-chip {
    background: var(--lv-secondary);
    border: 1px solid var(--lv-border);
    color: var(--lv-fg);
}

.obh-chip-x { color: var(--lv-destructive); }

/* ── Price Check view: plain column, flat divided rows ── */
#obh-price-view {
    width: calc(100% - 48px);
    max-width: 896px;
    margin: 24px auto;
    padding: 8px 0 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.obh-price-head .obh-panel-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lv-fg);
}

.obh-price-form input[type="text"],
.obh-price-form select {
    height: 36px;
    padding: 0 12px;
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    color: var(--lv-fg);
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(15, 35, 50, 0.05);
}

.obh-price-form input[type="text"]:focus,
.obh-price-form select:focus {
    border-color: var(--lv-ring);
    box-shadow: 0 0 0 1px var(--lv-ring);
    outline: none;
}

.obh-price-list .obh-report-item {
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--lv-border);
    border-radius: 0;
}

/* ── Team Chat view: a white card column — message stream on
   top, the composer as its foot. Own messages sit on the
   pale secondary surface, everyone else's on the page tint. ── */
.obh-main > .obh-convo-switch {
    width: min(896px, calc(100% - 48px));
    margin: 16px auto 0;
}

.obh-main > .obh-messages {
    width: min(896px, calc(100% - 48px));
    margin: 12px auto 0;
    padding: 16px;
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    box-shadow: none;
}

.obh-main > .obh-composer {
    width: min(896px, calc(100% - 48px));
    margin: 0 auto 16px;
    padding: 12px;
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 0 0 6px 6px;
    box-shadow: none;
}

.obh-composer input {
    height: 36px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    color: var(--lv-fg);
    font-size: 14px;
}

.obh-composer:focus-within {
    border-color: var(--lv-border);
    box-shadow: none;
}

.obh-composer input:focus {
    border-color: var(--lv-ring);
    box-shadow: 0 0 0 1px var(--lv-ring);
    outline: none;
}

.obh-msg {
    max-width: 82%;
    padding: 8px 12px;
    background: var(--lv-bg);
    border: 1px solid var(--lv-border);
    border-radius: 4px;
    box-shadow: none;
    color: var(--lv-fg);
}

.obh-msg-own {
    background: var(--lv-secondary);
    color: var(--lv-fg);
    border-color: var(--lv-border);
    border-radius: 4px;
}

.obh-msg-name { font-size: 11px; color: var(--lv-primary); }
.obh-msg-own .obh-msg-name { color: var(--lv-primary); }

.obh-msg-time { color: var(--lv-muted-fg); }
.obh-msg-own .obh-msg-time { color: var(--lv-muted-fg); }

.obh-msg-text a { color: var(--lv-primary); }
.obh-msg-own .obh-msg-text a { color: var(--lv-primary); }

.obh-msg.obh-msg-announce {
    background: oklch(0.96 0.055 92);
    border-color: color-mix(in oklab, var(--lv-accent-fg) 30%, transparent);
    color: oklch(0.35 0.07 70);
}

.obh-msg.obh-msg-announce .obh-msg-time { color: color-mix(in oklab, oklch(0.35 0.07 70) 70%, transparent); }
.obh-msg.obh-msg-announce .obh-msg-text a { color: var(--lv-primary); }

.obh-msg-share {
    border-color: color-mix(in oklab, var(--lv-primary) 45%, transparent);
    background: color-mix(in oklab, var(--lv-primary) 6%, var(--lv-card));
}

.obh-system-line {
    background: var(--lv-secondary);
    color: var(--lv-muted-fg);
}

.obh-empty { color: var(--lv-muted-fg); }

.obh-convo-active {
    color: var(--lv-primary-fg);
    background: var(--lv-primary);
    border-color: var(--lv-primary);
}

.obh-convo-active:hover {
    background: color-mix(in oklab, var(--lv-primary) 90%, var(--lv-bg));
    border-color: color-mix(in oklab, var(--lv-primary) 90%, var(--lv-bg));
}

/* ── Scrollbars ── */
.obh-messages::-webkit-scrollbar-thumb,
.obh-settings::-webkit-scrollbar-thumb {
    background: oklch(0.85 0.015 220);
}

/* ── Narrow widths (this layer's own adjustments, after the
   earlier media blocks so they hold at the same widths) ── */
@media (max-width: 1100px) {
    .obh-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .obh-sidebar { padding: 10px 12px; }
    .obh-live-pill { margin-top: 0; }
    .obh-side-modules { margin-top: 0; }
    .obh-topbar { padding: 0 12px; gap: 10px; }
    .obh-view-crumb { display: none; }
    .obh-topbar-search { flex: 1 1 auto; width: auto; }
    .obh-saved-view { padding: 16px 12px; }
    #obh-settings,
    #obh-members-panel,
    #obh-price-view { width: calc(100% - 24px); margin: 16px auto; }
    .obh-main > .obh-convo-switch,
    .obh-main > .obh-messages,
    .obh-main > .obh-composer { width: calc(100% - 24px); }
    .obh-stat { min-height: 0; }
    .obh-saved-item .obh-saved-sec { padding: 0 10px; }
    .obh-saved-item .obh-sec-left { padding-left: 10px; }
    .obh-saved-item .obh-sec-right { padding-right: 10px; }
    .obh-saved-item .obh-sec-center,
    .obh-saved-item .obh-sec-right { padding-left: 9px; }
    .obh-list-head span:nth-child(2),
    .obh-list-head span:nth-child(3) { padding-left: 10px; }
}