/* FlipTrack self-hosted brand fonts (Chakra Petch + Barlow). See fonts/fonts.css. */
  @import url("fonts/fonts.css");
  :root {
    /* FlipTrack palette (Pass 1 reskin) — was OTM blue/light; now FlipTrack red/light. */
    --bg:#eef0f4;--surface:#ffffff;--surface2:#f7f8fa;--border:#e2e5ea;--border2:#eef0f4;
    --accent:#17a35a;--accent2:#f59e0b;--green:#1e8a3c;--yellow:#b8860b;
    --red:#d0021b;--orange:#d4620a;--text:#1a1d26;--muted:#6b7280;--muted2:#9aa0ab;
    /* Brand type: Chakra Petch for headings/UI/numbers, Barlow for body copy. */
    --font-head:'Chakra Petch',system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
    /* Excel row colors */
    --row-sold:#e8f5e2;--row-sold-text:#1a5c1a;
    --row-trade:#c6efce;--row-trade-text:#276221;
    --row-x:#e8e8e8;--row-x-text:#555;
    --row-active:#ffffff;
    --row-listed:#fdecea;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
  /* Chakra Petch (squared display) only where blocky reads well: headings, eyebrow labels, logo.
     Everything interactive (nav, buttons) uses Barlow — cleaner, lighter, easier to read. */
  h1,h2,h3,h4,.nav-label{font-family:var(--font-head)}
  body::before{content:'';position:fixed;top:-200px;left:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(23,163,90,.05) 0%,transparent 70%);pointer-events:none;z-index:0}
  .sticky-note{position:fixed;border-radius:4px;box-shadow:2px 4px 16px rgba(0,0,0,.25);z-index:99990;font-family:Arial,sans-serif;display:flex;flex-direction:column;min-width:180px;min-height:120px;transition:box-shadow .2s;resize:both;overflow:hidden}
  .sticky-note:hover{box-shadow:3px 6px 20px rgba(0,0,0,.35)}
  .sticky-note .sn-titlebar{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 4px;cursor:grab;user-select:none}
  .sticky-note .sn-titlebar:active{cursor:grabbing}
  .sticky-note .sn-color-dot{width:12px;height:12px;border-radius:50%;border:2px solid rgba(0,0,0,.15);cursor:pointer;flex-shrink:0;transition:transform .15s}
  .sticky-note .sn-color-dot:hover{transform:scale(1.3)}
  .sticky-note .sn-title{font-size:13px;font-weight:700;color:#333;outline:none;flex:1;margin:0 8px;border:none;background:transparent;padding:0;font-family:inherit}
  .sticky-note .sn-delete{cursor:pointer;color:rgba(0,0,0,.3);font-size:14px;font-weight:700;padding:0 2px;transition:color .15s}
  .sticky-note .sn-delete:hover{color:rgba(0,0,0,.7)}
  .sticky-note .sn-body{flex:1;padding:4px 10px 8px;font-size:12px;color:#444;line-height:1.6;outline:none;resize:none;border:none;background:transparent;font-family:inherit;min-height:60px}
  .sticky-note .sn-footer{padding:4px 10px 6px;font-size:10px;color:rgba(0,0,0,.25);text-align:right}
  .sn-color-yellow{background:#FFF9C4}.sn-color-pink{background:#F8BBD0}.sn-color-blue{background:#BBDEFB}.sn-color-green{background:#C8E6C9}.sn-color-purple{background:#E1BEE7}
  .layout{display:flex;min-height:100vh;position:relative;z-index:1}
  .sidebar{width:244px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
  .logo{padding:18px 14px 16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:5px;align-items:flex-start}
  /* FlipTrack brand lockup — built to the logo build-spec (2026-08-03, v2). Oval capsule + italic
     skewed wordmark + waving checkered flag SVG. App-sidebar size. Do NOT "simplify" — see the
     spec's failure modes (nowrap, flex:0 0 <size>, capsule not circle, skewX required). */
  .ft-logo{display:inline-flex;align-items:center;gap:7px;border:4.5px solid #1a1d26;border-radius:999px;padding:6px 14px}
  .ft-word{font-family:var(--font-head);font-weight:700;font-style:italic;font-size:17px;line-height:1;letter-spacing:.3px;color:#1a1d26;white-space:nowrap;transform:skewX(-13deg);display:inline-block}
  .ft-word-accent{color:#17a35a}
  .ft-flag{width:26px;height:26px;flex:0 0 26px;display:block}
  .ft-sub{font:600 10px/1 var(--font-head);letter-spacing:.5px;color:var(--muted2);margin-left:4px}
  .nav{padding:16px 12px;flex:1}
  .nav-label{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;padding:0 8px;margin-bottom:8px;margin-top:16px}
  .nav-label:first-child{margin-top:0}
  .nav-acc-head{cursor:pointer;display:flex;align-items:center;justify-content:flex-start;user-select:none}
  .nav-acc-head:hover{color:var(--text)}
  .nav-acc-head .nav-chevron{font-size:15px;opacity:.75;transition:transform .15s ease;order:-1;margin-right:8px}
  .nav-acc-head.collapsed .nav-chevron{transform:rotate(-90deg)}
  .nav-acc-body.collapsed{display:none}
  .nav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:none;background:none;color:#2a2e38;font-family:var(--font-head);font-size:14px;font-weight:600;cursor:pointer;border-radius:9px;transition:all .15s;text-align:left}
  .nav-btn:hover{background:var(--surface2);color:var(--text)}
  .nav-btn.active{background:rgba(23,163,90,.12);color:var(--accent)}
  .nav-btn .icon{font-size:16px;width:20px;text-align:center}
  .nav-count{margin-left:auto;font-size:11px;font-weight:700;background:var(--surface2);color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:1px 7px;min-width:18px;text-align:center}
  .nav-btn.active .nav-count{background:rgba(23,163,90,.2);color:var(--accent);border-color:rgba(23,163,90,.3)}
  .main{flex:1;min-width:0;padding:32px;overflow:hidden}
  .page{display:none}
  .page.active{display:block;animation:fadeIn .2s ease}
  @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  /* Right clearance for the fixed #help-corner-btn (44px wide, right:0 — see index.html).
     .main already pads 32px from the viewport edge, so +20px here = ~52px total
     (44 + 8px gap) between the last toolbar control and the "?" (owner 2026-09-28). */
  .page-header{margin-bottom:28px;padding-right:20px}
  .page-header h2{font-size:28px;font-weight:800;letter-spacing:-.5px}
  .page-header p{color:var(--muted);font-size:13px;margin-top:4px}
  .kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-bottom:28px}
  .kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;position:relative;overflow:hidden;transition:border-color .2s}
  .kpi-card:hover{border-color:rgba(91,127,255,.3)}
  .kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--kpi-color,var(--accent));opacity:.6}
  .kpi-card .kpi-label{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px}
  .kpi-card .kpi-value{font-size:26px;font-weight:800;letter-spacing:-1px;font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;color:var(--text)}
  .kpi-card .kpi-sub{font-size:11px;color:var(--muted);margin-top:4px;font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace}
  .kpi-card .kpi-icon{position:absolute;top:16px;right:16px;font-size:22px;opacity:.25}
  .charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}
  .charts-grid.wide{grid-template-columns:2fr 1fr}
  .chart-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px}
  .chart-card h3{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:.2px}
  .chart-card .chart-sub{font-size:11px;color:var(--muted);margin-bottom:16px;font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace}
  canvas{max-height:260px}
  td.num,th.num{text-align:right;font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace}
  .table-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:20px;padding:18px 20px}
  .audit-summary{font-size:13px;padding:10px 20px;font-weight:600}
  .audit-group-hdr{font-size:12px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px;padding:10px 20px;background:rgba(0,0,0,.02);border-top:1px solid var(--border);position:relative}
  .audit-group-hdr .badge{padding:2px 8px;border-radius:4px;font-weight:700}
  .audit-note{font-size:12px;padding:10px 20px;color:var(--muted);font-style:italic;border-top:1px solid var(--border)}
  .audit-date-grid{display:flex;gap:14px;align-items:flex-start}
  .audit-date-grid .adc{display:flex;flex-direction:column;gap:1px;min-width:62px}
  .audit-date-grid .dk{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
  .audit-date-grid .adc span:last-child{font-size:11px;white-space:nowrap}
  .th-sub{color:var(--muted);font-weight:600}
  .table-card>h3{font-size:15px;font-weight:700;margin:0 0 14px}
  .table-card>.data-table,.table-card>table{margin:0 -20px -18px;width:calc(100% + 40px)}
  .table-header{margin:-18px -20px 0;padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .table-header h3{font-size:15px;font-weight:700}
  .table-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .search-input{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 12px;color:var(--text);font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:12px;width:200px;outline:none;transition:border-color .2s}
  .search-input:focus{border-color:var(--accent)}
  .search-input::placeholder{color:var(--muted)}
  .filter-select{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;color:var(--text);font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:12px;outline:none;cursor:pointer}
  .btn-clear-filters{background:rgba(208,2,27,.08);border:1px solid rgba(208,2,27,.35);border-radius:8px;padding:7px 12px;color:var(--red);font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
  .btn-clear-filters:hover:not(:disabled){border-color:var(--red);color:#fff;background:var(--red)}
  .btn-clear-filters:disabled{opacity:.3;cursor:default;pointer-events:none;background:var(--surface2);border-color:var(--border);color:var(--muted);font-weight:400}
  .table-wrap{overflow-x:auto;overflow-y:auto;max-height:65vh}
  .table-wrap table{border-collapse:collapse;width:100%}
  .table-wrap thead th{position:sticky;top:0;z-index:10;background:var(--surface);box-shadow:0 1px 0 var(--border)}
  table{width:100%;border-collapse:collapse;font-size:12px}
  thead th{padding:10px 16px;text-align:left;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:1px;text-transform:uppercase;background:var(--surface2);border-bottom:1px solid var(--border);white-space:nowrap;user-select:none}
  thead th.sortable{cursor:pointer}
  thead th.sortable:hover{color:var(--text)}
  thead th.sort-asc,thead th.sort-desc{color:var(--accent)}
  thead th.sort-asc::after{content:" ↑";font-size:10px}
  thead th.sort-desc::after{content:" ↓";font-size:10px}
  tbody tr{border-bottom:1px solid rgba(37,42,58,.5);transition:background .1s}
  tbody tr:hover td{filter:brightness(.95)}
  tbody tr:last-child{border-bottom:none}

  /* ── Audit tables: stronger row hover + pair separator ────────────────────
     The audit pages pair an eBay/Etsy/etc row with an OTM row. Each row has
     its own action button (Keep eBay vs Keep OTM) and the button colors match
     the row tints — a weak hover made it easy to click the wrong button.
     Uses :has() for the pair-highlight (Chrome 105+, Safari 15.4+, Firefox 121+). */
  #ebay-audit-tbody tr:hover td,
  #etsy-audit-tbody tr:hover td,
  #mercari-audit-tbody tr:hover td,
  #whatnot-audit-tbody tr:hover td,
  #fbm-audit-tbody tr:hover td{
    background-color:rgba(255,210,0,.18)!important;
    filter:none;
    box-shadow:inset 0 0 0 9999px rgba(255,210,0,.10);
  }
  /* Pair-aware highlight: when hovering an OTM row (next-sibling pattern in JS),
     also light up the platform row above it via :has(+ tr:hover). Likewise the
     OTM row when the platform row is hovered. */
  #ebay-audit-tbody tr:has(+ tr:hover) td,
  #etsy-audit-tbody tr:has(+ tr:hover) td,
  #mercari-audit-tbody tr:has(+ tr:hover) td,
  #whatnot-audit-tbody tr:has(+ tr:hover) td,
  #fbm-audit-tbody tr:has(+ tr:hover) td{
    background-color:rgba(255,210,0,.10)!important;
  }
  /* Pair separator — between the original 3px subtle var(--border) and the
     too-strong 5px var(--text). Mid-weight: 4px solid var(--muted). */
  #ebay-audit-tbody tr[style*="border-top"],
  #etsy-audit-tbody tr[style*="border-top"],
  #mercari-audit-tbody tr[style*="border-top"],
  #whatnot-audit-tbody tr[style*="border-top"]{
    border-top:4px solid var(--muted)!important;
  }
  tbody td{padding:5px 12px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
  tbody td:last-child{overflow:visible;max-width:none}
  .td-item{color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;font-weight:400;max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* "Sales Not in OTM" (unmatched) sections: let item titles word-wrap so the full text is
     visible — useful when matching against suggestions where the full title disambiguates
     near-duplicates. Scoped to the unmatched section IDs only — does NOT affect the
     Mismatched Sales tables, inventory tables, or anywhere else .td-item is used. */
  #etsy-unmatched-section .td-item, #ebay-unmatched-section .td-item, #mercari-unmatched-section .td-item, #fbm-unlinked-section .td-item,
  #etsy-unmatched-section td.td-item, #ebay-unmatched-section td.td-item, #mercari-unmatched-section td.td-item, #fbm-unlinked-section td.td-item{
    white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word;max-width:380px;
  }
  .badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
  /* Excel-style row colors */
  tr.row-sold td{background:var(--row-sold)!important}
  tr.row-sold:hover td{background:#dff0d8!important}
  tr.row-trade td{background:var(--row-trade)!important}
  tr.row-trade:hover td{background:#b8e6be!important}
  tr.row-x td{background:var(--row-x)!important;color:var(--row-x-text)!important}
  tr.row-x:hover td{background:#ddd!important}
  tr.row-listed td{background:var(--row-listed)!important}
  tr.row-listed:hover td{background:#e0e7ff!important}
  tr.row-active td{background:var(--row-active)!important}
  .b-sold{background:rgba(30,138,60,.15);color:var(--green)}
  .b-active{background:rgba(91,127,255,.15);color:var(--accent)}
  .b-listed{background:rgba(255,153,64,.15);color:var(--orange)}
  .b-other{background:rgba(245,200,66,.12);color:var(--yellow)}
  .b-ebay{background:rgba(245,200,66,.15);color:var(--yellow)}
  .b-fbm{background:rgba(255,89,106,.12);color:var(--red)}
  .b-etsy{background:rgba(255,153,64,.15);color:var(--orange)}
  .b-mercari{background:rgba(124,92,255,.15);color:var(--accent2)}
  .b-offerup{background:rgba(62,207,142,.15);color:var(--green)}
  .b-whatnot{background:rgba(91,127,255,.15);color:var(--accent)}
  .b-cat{background:rgba(91,127,255,.08);color:#8a9fd8;font-size:10px}
  .pager{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace}
  .pager-btns{display:flex;gap:6px}
  .pager-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:11px;font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;transition:all .15s}
  .pager-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
  .pager-btn:disabled{opacity:.3;cursor:default}
  .stat-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
  .stat-chip{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-size:12px;font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace}
  .stat-chip strong{color:var(--accent)}
  .cat-bar-item{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .cat-bar-name{font-size:11px;font-weight:600;min-width:130px;color:var(--muted);text-align:right}
  .cat-bar-track{flex:1;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
  .cat-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
  .cat-bar-count{font-size:10px;font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;color:var(--muted);min-width:35px}
  .loading{text-align:center;padding:40px;color:var(--muted);font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:13px}

  /* Add Items button */
  .btn-add{display:flex;align-items:center;gap:8px;padding:9px 18px;background:var(--accent);color:#fff;border:none;border-radius:9px;font-family:var(--font-head);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
  .btn-add:hover{filter:brightness(.94);transform:translateY(-1px)}
  .btn-add .plus{font-size:18px;line-height:1}
  /* Selected/current page — a clear green ring + green text so you can tell which one is active */
  .btn-add.active{box-shadow:inset 0 0 0 2px var(--accent);background:rgba(23,163,90,.10);color:var(--accent)}

  /* Modal overlay */
  .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center}
  .modal-overlay.open{display:flex}
  .modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:1100px;max-width:98vw;max-height:95vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.6)}
  .modal-header{padding:24px 28px 0;display:flex;align-items:center;justify-content:space-between}
  .modal-header h3{font-size:20px;font-weight:800;letter-spacing:-.3px}
  .modal-close{background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;padding:4px;line-height:1;border-radius:6px;transition:color .15s}
  .modal-close:hover{color:var(--text)}
  /* Sync All overlay's own Cancel button (SA-contract.md) — same red as the per-platform
     sync log modal's #sync-log-cancel, as a reusable class instead of that button's inline style. */
  .btn-sync-cancel{padding:5px 12px;background:var(--red,#f85149);border:1px solid var(--red,#f85149);border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;color:#fff;white-space:nowrap;transition:opacity .15s}
  .btn-sync-cancel:disabled{opacity:.5;cursor:not-allowed}
  /* Generic show/hide toggle class (SA-contract.md fix round 2) — used in place of a direct
     style.display write wherever JS only needs to show/hide an element. !important so it
     reliably hides an element that already carries an inline display style (e.g. an overlay
     a prior step set to style.display='flex'). */
  .ft-hidden{display:none !important}
  /* Contextual help icon (owner ruling 2026-09-27) — plain circled "?", app's existing muted/accent icon colors. */
  .ft-help-icon{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;flex-shrink:0;border:1.5px solid var(--muted2);border-radius:50%;color:var(--muted2);font-size:12px;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;transition:color .15s,border-color .15s}
  .ft-help-icon:hover{color:var(--accent);border-color:var(--accent)}
  #ret-aligned-rows input.form-input{border-left:3px solid var(--orange);background:rgba(255,165,0,0.04)}
  #ret-aligned-rows input.form-input:focus{border-left:3px solid var(--orange);background:rgba(255,165,0,0.08);box-shadow:0 0 0 2px rgba(255,165,0,0.15)}
  .modal-body{padding:24px 28px 28px}
  .form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
  .form-group{display:flex;flex-direction:column;gap:6px}
  .form-group.full{grid-column:1/-1}
  /* Add/Edit Item "Video needed" checkbox (GitHub #361, owner GO 2026-10-11) — reusable
     checkbox-+-label row class, classes only (no inline style), for any future on/off
     flag placed inside this same form-grid. */
  .form-check-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}
  .form-check-input{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
  .form-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
  .form-input,.form-select,.form-textarea{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:13px;outline:none;transition:border-color .2s;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none}
  .form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent)}
  .form-input::placeholder,.form-textarea::placeholder{color:var(--muted)}
  select.form-input,select.form-select{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>');background-repeat:no-repeat;background-position:right 10px center;background-size:12px;padding-right:32px;line-height:1.5}
  /* Settings: Store code, fixed display-only text (brief-storeid-build.md section E, owner:
     "once the db is named, it's named") — audits.js _acctStoreCodeFieldHtml(). The editable
     #acct-store-code input this used to describe was removed (brief-integration.md item 5,
     2026-10-05: every store has a code from creation, so the box is always this fixed text). */
  .settings-store-code-fixed{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:13px}
  .settings-store-code-locked-msg{font-size:11px;color:var(--muted);margin-top:4px}
  .form-select option{background:var(--surface2)}
  .form-textarea{resize:vertical;min-height:70px}
  .form-section{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;grid-column:1/-1;margin-top:8px;padding-top:14px;border-top:1px solid var(--border)}
  .form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
  .btn-cancel{padding:9px 18px;background:none;border:1px solid var(--border);color:var(--muted);border-radius:9px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
  .btn-cancel:hover{border-color:var(--text);color:var(--text)}
  .btn-submit{padding:9px 24px;background:var(--accent);color:#fff;border:none;border-radius:9px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
  .btn-submit:hover{filter:brightness(.94)}
  .currency-input::-webkit-inner-spin-button,.currency-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  .currency-input{-moz-appearance:textfield}
  /* Currency $ prefix — every .currency-input shows a $ at its left edge so
     the field reads as currency at a glance. <input type="number"> won't
     accept $ in its value, so we use an SVG background-image instead — works
     on any input without wrapping/JS. The fill is gray normally, green when
     .gt100 is applied (high-value Insurance Shipping reminder).
     !important on repeat/position is required because .gt100 below uses the
     `background:` shorthand which would otherwise reset them to defaults. */
  .currency-input{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18"><text x="1" y="14" font-family="system-ui,sans-serif" font-size="13" font-weight="700" fill="%23888">$</text></svg>') !important;background-repeat:no-repeat !important;background-position:8px center !important;padding-left:22px !important}
  .currency-input.gt100{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18"><text x="1" y="14" font-family="system-ui,sans-serif" font-size="13" font-weight="700" fill="%2316a34a">$</text></svg>') !important;background-repeat:no-repeat !important;background-position:8px center !important}
  /* High-value reminder: any input or display showing a $ value > $100 gets
     a green tint to remind the user to use Insurance Shipping Policies. Apply
     class="gt100" on inputs (via gt100Highlight helper), table <td>s, and
     drawer detail-val divs. The !important rules win over per-element inline
     color so the highlight is consistent everywhere. */
  .gt100{background:rgba(62,207,142,0.18) !important;color:var(--green) !important;font-weight:700 !important}
  input.gt100{border-color:var(--green) !important}
  .detail-val.gt100{padding:2px 6px;border-radius:4px;display:inline-block}

  /* Toast */
  .toast{position:fixed;bottom:28px;right:28px;background:var(--green);color:#0d0f14;padding:12px 20px;border-radius:10px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;font-weight:700;z-index:2000;transform:translateY(80px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1)}
  .toast.show{transform:translateY(0);opacity:1}

  /* Print Report Modal */
  .rpt-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:1100;align-items:center;justify-content:center}
  .rpt-overlay.open{display:flex}
  .rpt-modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:900px;max-width:96vw;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.6)}
  .rpt-modal .modal-header{padding:24px 28px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
  .rpt-modal .modal-header h3{font-size:18px;font-weight:800}
  .rpt-body{padding:24px 28px 28px}
  .rpt-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .rpt-row.full{grid-template-columns:1fr}
  .rpt-summary{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin:16px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}
  .rpt-summary-item .rpt-s-val{font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:20px;font-weight:700;color:var(--green)}
  .rpt-summary-item .rpt-s-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
  #rpt-preview-area table{width:100%;border-collapse:collapse;font-size:11px}
  #rpt-preview-area th{background:var(--surface2);padding:3px 5px;text-align:left;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0}
  #rpt-preview-area td{padding:5px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
  #rpt-preview-area tr:last-child td{border-bottom:none}
  #rpt-preview-area .num{text-align:right;font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace}
  #rpt-preview-area .green{color:var(--green);font-weight:600}
  #rpt-preview-area .red{color:var(--red)}
  #rpt-preview-area .bold{font-weight:700}
  #rpt-preview-area .item-col{max-width:180px;overflow:hidden;text-overflow:ellipsis}
  /* Mark Sold button */
  .btn-mark-sold{padding:7px 14px;background:rgba(30,138,60,.12);color:var(--green);border:1px solid rgba(30,138,60,.3);border-radius:8px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
  .btn-mark-sold:hover{background:rgba(30,138,60,.22)}
  /* Sold modal */
  .sold-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:1200;align-items:center;justify-content:center}
  .sold-overlay.open{display:flex}
  .batch-sku-dropdown{position:absolute;top:100%;left:0;right:0;max-height:320px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:10;margin-top:4px}
  .batch-sku-dropdown .sku-option{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px}
  .batch-sku-dropdown .sku-option:last-child{border-bottom:none}
  .batch-sku-dropdown .sku-option:hover,.batch-sku-dropdown .sku-option.active{background:var(--surface2)}
  .batch-sku-dropdown .sku-option .sku-num{font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-weight:700;color:var(--accent);white-space:nowrap}
  .batch-sku-dropdown .sku-option .sku-name{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;flex:1}
  textarea.auto-resize{resize:none;overflow:hidden;min-height:38px;line-height:1.4;field-sizing:content}
  .cond-search-wrap{position:relative}
  .cond-search-dropdown{position:absolute;top:100%;left:0;right:0;max-height:260px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:100;margin-top:4px;display:none}
  .cond-search-dropdown .cond-option{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px}
  .cond-search-dropdown .cond-option:last-child{border-bottom:none}
  .cond-search-dropdown .cond-option:hover{background:var(--surface2)}
  .cond-search-dropdown .cond-option .cond-val{font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-weight:700;color:var(--accent);white-space:nowrap}
  .cond-search-dropdown .cond-option .cond-lbl{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;flex:1}
  .cond-search-dropdown .cond-option.cond-other{color:var(--accent);font-weight:600;font-style:italic}
  .sold-modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:640px;max-width:96vw;max-height:92vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.4)}
  .sold-modal .modal-header{padding:22px 26px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:16px}
  .sold-modal .modal-header h3{font-size:17px;font-weight:700}
  .sold-body{padding:20px 26px 26px}
  .sold-plat-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
  .sold-plat-tab{padding:6px 14px;border:1px solid var(--border);border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;background:var(--surface2);color:var(--muted);transition:all .15s;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
  .sold-plat-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
  .sold-section{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin:16px 0 10px;padding-bottom:6px;border-top:1px solid var(--border);padding-top:14px}
  .sold-section:first-of-type{margin-top:0;border-top:none;padding-top:0}
  .sold-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px}
  .sold-grid.three{grid-template-columns:1fr 1fr 1fr}
  .sold-calc{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 18px;margin-top:14px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;text-align:center}
  .sold-calc-item .sc-val{font-size:18px;font-weight:700;font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace}
  .sold-calc-item .sc-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
  .sc-green{color:var(--green)}
  .sc-red{color:var(--red)}
  .sc-blue{color:var(--accent)}
  .btn-add-item{padding:8px 16px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
  .btn-add-item:hover{opacity:.88}
  /* To Ship "Show the other platforms" + failed-platform banner (sheet line 40 fix round) --
     same visual shapes as the page's existing accent/secondary buttons and failed-row styling
     (to-ship.js _renderToShipPoll's own failed row, inline there, pre-existing, out of scope),
     named as classes here only because this build adds no new inline styles (owner rule). */
  .toship-show-other-wrap{text-align:center;margin-top:12px}
  .toship-show-other-btn{padding:6px 16px;background:var(--surface2,rgba(0,0,0,.04));color:var(--text);border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:700;cursor:pointer}
  .toship-failed-banner{background:rgba(229,62,62,.06);border:1px solid rgba(229,62,62,.3);border-radius:10px;margin-bottom:14px}
  .toship-failed-banner-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid rgba(229,62,62,.15)}
  .toship-failed-banner-icon{width:24px;text-align:center;font-size:16px}
  .toship-failed-banner-label{font-weight:700;min-width:90px}
  .toship-failed-banner-msg{color:#e53e3e;font-size:13px;flex:1}
  .toship-failed-banner-retry{padding:4px 14px;background:var(--accent);color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
  /* Create Bundle modal (#bundle-create-overlay) field look, for the FB Bundle first-pick
     drop-down only (sheet line 33 fix round, owner review) -- the same spacing/label/padding
     every pre-existing field in that modal already gets from its own (untouched, out of scope)
     inline style, so the new drop-down needs none of its own. .bc-modal-field only overrides
     .form-input's default padding (9px 12px) to match this modal's own 10px 14px; .form-input
     already supplies width:100% and font-size:13px. */
  .bc-modal-group{margin-bottom:16px}
  .bc-modal-label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;display:block;margin-bottom:6px}
  .bc-modal-field{padding:10px 14px}
  /* Create Bundle modal, FB Bundle listing-price display (owner 08:30/09:45, "we need to know
     the listing price on the create bundle" / "I need to see the listing price on that
     platform in the modal on each line") -- fb_order mode only. .bc-member-listed-th/-td are
     the member table's own "Listed" column (job A, 09:45 correction, replaces the earlier
     under-the-name sub-label, which is removed, not kept alongside it), matching the table's
     existing th/td padding (6px 10px) with the header right-aligned like COG's own. #bc-order-
     total keeps the existing #bc-total-cog line's look (right-aligned, bold, small) but in
     var(--accent) instead of var(--yellow), so it reads visually apart from "Total COG"
     (cost). No inline styles -- all three are new markup, not pre-existing fields. */
  .bc-member-listed-th{padding:6px 10px;text-align:right}
  .bc-member-listed-td{padding:6px 10px;text-align:right}
  .bc-order-total{text-align:right;margin-top:4px;font-size:13px;font-weight:700;color:var(--accent)}
  /* Restore card (brief-restore.md, 2026-10-05) -- same visual shapes as the existing "Back up
     databases now" row's inline styles (#ahb-card, admin.html), named as classes here only
     because this session adds no new inline styles (owner rule 2026-10-04). */
  .nr-flex-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
  .nr-muted-line{font-size:13px;color:var(--muted);margin-bottom:10px}
  .nr-summary{font-weight:700;margin-bottom:8px}
  /* Fix round 2026-10-05: replaces summary.style.color JS assignments in both the backup and
     restore cards (#ahb-summary, #ahr-summary) -- toggled, never set as an inline style. */
  .nr-ok{color:var(--green)}
  .nr-err{color:var(--red)}
  .nr-log{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:10px;max-height:260px;overflow:auto;font-family:ui-monospace,monospace;font-size:12px;white-space:pre-wrap;margin:0}
  #ahr-fks{flex:1;max-width:360px}
  @keyframes etsy-pulse{0%,100%{box-shadow:0 2px 8px rgba(240,165,0,.4)}50%{box-shadow:0 2px 18px rgba(240,165,0,.8)}}
  @keyframes save-pulse{0%,100%{box-shadow:0 2px 8px rgba(30,138,60,.3)}50%{box-shadow:0 2px 18px rgba(30,138,60,.7)}}
  @keyframes backupPulse{0%{transform:translateX(-120%)}100%{transform:translateX(420%)}}
  @keyframes spin{to{transform:rotate(360deg)}}
  .btn-print{padding:9px 22px;background:var(--green);color:#0d0f14;border:none;border-radius:9px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
  .btn-print:hover{background:#33ba7a}

  /* Taxonomy page responsive */
  @media (max-width: 1400px) { .taxonomy-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
  @media (max-width: 760px)  { .taxonomy-grid { grid-template-columns: 1fr !important; } }

  /* Print styles */
  @media print {
    body * { visibility: hidden; }
    #print-area, #print-area * { visibility: visible; }
    #print-area { position: fixed; inset: 0; background: white; color: #111; font-family: Arial, sans-serif; padding: 32px; }
    .print-header { margin-bottom: 24px; border-bottom: 2px solid #333; padding-bottom: 12px; }
    .print-header h1 { font-size: 22px; margin-bottom: 4px; }
    .print-header p { font-size: 12px; color: #555; }
    .print-kpis { display: flex; gap: 24px; margin-bottom: 20px; }
    .print-kpi { text-align: center; }
    .print-kpi .val { font-size: 22px; font-weight: 700; color: #1a1a1a; }
    .print-kpi .lbl { font-size: 10px; color: #666; text-transform: uppercase; }
    .print-table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .print-table th { background: #f0f0f0; padding: 7px 10px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid #ccc; }
    .print-table td { padding: 6px 10px; border-bottom: 1px solid #e8e8e8; }
    .print-table tr:nth-child(even) td { background: #fafafa; }
    .print-footer { margin-top: 16px; font-size: 10px; color: #888; text-align: right; }
  }

  /* Detail / Edit drawer */
  .drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);z-index:900}
  .drawer-overlay.open{display:block}
  .drawer{position:fixed;top:0;right:0;width:720px;max-width:96vw;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:901;overflow-y:auto;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:-24px 0 80px rgba(0,0,0,.5)}
  .drawer.open{transform:translateX(0)}
  .drawer-head{padding:16px 24px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2}
  .drawer-head-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .drawer-title{font-size:15px;font-weight:700;line-height:1.35;color:var(--text)}
  .drawer-sku{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .sku-badge{font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:14px;font-weight:700;color:var(--text);background:var(--hover);border:1px solid var(--border);border-radius:6px;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}
  .sku-copy-btn{background:none;border:none;cursor:pointer;color:var(--muted);padding:0;line-height:1;display:inline-flex;align-items:center;opacity:.6;transition:opacity .15s,color .15s}
  .sku-copy-btn:hover{opacity:1;color:var(--accent)}
  .btn-edit{padding:7px 14px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
  .btn-edit:hover{filter:brightness(.94)}
  .btn-delete{padding:7px 14px;background:rgba(255,91,106,.12);color:var(--red);border:1px solid rgba(255,91,106,.25);border-radius:8px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
  .btn-delete:hover{background:rgba(255,91,106,.22)}
  .btn-drawer-close{padding:7px 10px;background:none;border:1px solid var(--border);color:var(--muted);border-radius:8px;font-size:14px;cursor:pointer;transition:all .15s;line-height:1}
  .btn-drawer-close:hover{color:var(--text);border-color:var(--text)}
  .drawer-body{padding:20px 24px 32px}
  .drawer-section{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin:20px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
  .drawer-section:first-child{margin-top:0}
  .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .detail-group{display:flex;flex-direction:column;gap:5px}
  .detail-group.full{grid-column:1/-1}
  .detail-group.money{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;border-bottom:1px dotted var(--border)}
  .detail-group.money .detail-val{text-align:right;flex:0 0 auto}
  .detail-group.money + .detail-group:not(.money){margin-top:8px}
  .detail-label{font-size:10px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.7px}
  .detail-val{font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:13px;color:var(--text);padding:2px 0;min-height:18px;line-height:1.4}
  /* Inline edit input — used by the eBay item # field in the drawer */
  .detail-edit-input{background:var(--surface2);border:1px solid var(--accent);border-radius:7px;padding:8px 11px;color:var(--text);font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:13px;outline:none;width:100%}
  /* Platform links */
  .plat-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
  .plat-link-wrap{display:inline-flex;align-items:stretch;gap:0;position:relative}
  .plat-link-wrap .plat-link{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
  .plat-link-wrap .plat-delist-btn{display:flex;align-items:center;padding:0 8px;border:1px solid var(--border);border-left:1px solid rgba(229,62,62,.2);border-radius:0 8px 8px 0;background:rgba(229,62,62,.06);color:var(--red);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
  .plat-link-wrap .plat-delist-btn:hover{background:rgba(229,62,62,.18);color:#ff3b3b}
  .plat-link-wrap:only-child .plat-link,.plat-link-wrap:not(:has(.plat-delist-btn)) .plat-link{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right:1px solid var(--border)}
  .plat-link{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:700;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;text-decoration:none;border:1px solid var(--border);color:var(--muted);background:var(--surface2);transition:all .15s;white-space:nowrap}
  .plat-link:hover{color:var(--text);border-color:rgba(91,127,255,.4);background:rgba(91,127,255,.08)}
  .plat-link.has-price{color:var(--text);border-color:rgba(91,127,255,.3)}
  .plat-link.sold-here{border-color:rgba(62,207,142,.4);color:var(--green);background:rgba(62,207,142,.06)}
  .plat-link .plat-price{font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:11px;opacity:.7;margin-left:2px}
  .ebay-id-row{display:flex;align-items:center;gap:8px;margin-top:10px}
  .ebay-id-row .detail-label{min-width:80px}
  .ebay-id-input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:7px 11px;color:var(--text);font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:12px;outline:none;transition:border-color .2s}
  .ebay-id-input:focus{border-color:var(--accent)}
  .btn-ebay-go{padding:7px 12px;background:none;border:1px solid var(--border);color:var(--muted);border-radius:7px;font-size:12px;cursor:pointer;text-decoration:none;font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;transition:all .15s;white-space:nowrap}
  .btn-ebay-go:hover{color:var(--yellow);border-color:var(--yellow)}
  /* Clickable table rows */
  tbody tr.clickable{cursor:pointer}
  tbody tr.clickable:hover td{background:rgba(91,127,255,.06)}
  .row-edit-btn{opacity:1;background:rgba(91,127,255,.15);border:none;color:var(--accent);border-radius:5px;padding:3px 8px;font-size:10px;font-weight:700;cursor:pointer;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}

  /* ── Tabulator override — "All Activity" table ──────────────────────────────
     Tabulator ships its own base theme; these rules re-skin it to match the app's
     dark theme (fonts, colors, borders, header style, hover, cell padding) — real
     data columns, not a re-themed HTML table. Scoped to .ev-tabulator-wrap so no
     other table is touched. IMPORTANT: never override structural layout props
     here (tabulator-tableholder overflow, row/cell display or min-height) — those
     are owned by Tabulator's virtual-DOM renderer via the `height` option passed
     in JS. Overriding them collapses the body into a vertical stack. */
  /* Neutralize the generic .table-wrap max-height/overflow — Tabulator owns its own
     scroll region via the `height` option passed in JS; a second scroll container here
     would fight it and is what caused the original vertical-stack layout bug. */
  .ev-tabulator-wrap{margin:0 -20px -18px;width:calc(100% + 40px);padding:0 20px 18px;overflow-x:hidden;overflow-y:visible;max-height:none;position:relative}
  /* The Tabulator mount needs an explicit, position:relative box or fitColumns has no
     boundary to fill and the table renders narrower than the panel (Tabulator docs). */
  #ev-tbody{position:relative;width:100%}
  /* Table always fills the panel exactly — never narrower. scrollbar-gutter:stable reserves
     the vertical-scrollbar space up front so fitColumns can't come up a gutter-width short. */
  .ev-tabulator-wrap .tabulator{background:transparent;border:none;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;color:var(--text);width:100% !important;max-width:100% !important}
  .ev-tabulator-wrap .tabulator-tableholder{scrollbar-gutter:stable;overflow-x:hidden !important}
  .ev-tabulator-wrap .tabulator-header,
  .ev-tabulator-wrap .tabulator-headers,
  .ev-tabulator-wrap .tabulator-header .tabulator-col-content{background:transparent !important}
  .ev-tabulator-wrap .tabulator-header{border-bottom:1px solid var(--border)}
  /* Dividers ONLY in the header row (cells stay borderless — see .tabulator-cell rule). */
  .ev-tabulator-wrap .tabulator-col{background:transparent !important;border-right:1px solid var(--muted) !important}
  .ev-tabulator-wrap .tabulator-col.tabulator-frozen{background:transparent !important}
  .ev-tabulator-wrap .tabulator-col:last-child{border-right:none !important}
  .ev-tabulator-wrap .tabulator-col-title{font-size:14px;font-weight:600;color:var(--text);letter-spacing:1px;text-transform:uppercase;white-space:nowrap;text-align:center}
  .ev-tabulator-wrap .tabulator-col .tabulator-col-content{justify-content:center}
  .ev-tabulator-wrap .tabulator-col.tabulator-sortable:hover .tabulator-col-title{color:var(--text)}
  .ev-tabulator-wrap .tabulator-col .tabulator-arrow{border-bottom-color:var(--muted)}
  .ev-tabulator-wrap .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-arrow,
  .ev-tabulator-wrap .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-arrow{border-bottom-color:var(--accent)}
  .ev-tabulator-wrap .tabulator-col .tabulator-col-content{padding:8px 4px}
  .ev-tabulator-wrap .tabulator-row{background:var(--surface);border-bottom:1px solid rgba(37,42,58,.5)}
  .ev-tabulator-wrap .tabulator-row.tabulator-row-even{background:var(--surface2)}
  /* Hover: a clear blue tint (not a faint brightness shift that reads like the zebra shade). */
  .ev-tabulator-wrap .tabulator-row:hover,
  .ev-tabulator-wrap .tabulator-row.ev-tab-row.clickable:hover{background:rgba(91,127,255,.14) !important;filter:none}
  /* Frozen body cells inherit their ROW's background (Tabulator's default) so the zebra
     stripe / hover tint carries across the sticky column instead of showing a mismatched
     patch — must stay opaque, not transparent, since a sticky column floats over the rows. */
  .ev-tabulator-wrap .tabulator-row .tabulator-cell.tabulator-frozen{background:inherit !important}
  .ev-tabulator-wrap .tabulator-cell{padding:5px 12px;font-size:15px;color:var(--text);border-right:none !important}
  .ev-tabulator-wrap .tabulator-cell .td-item{color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
  /* Item name: wrap to the 2-line row height (no ellipsis), clip anything beyond. */
  /* display:block removes the cell from Tabulator's default inline-flex sizing, so the inner
     .td-item span uses the cell's full content width instead of shrinking to the base
     max-width:380px — the item title then wraps only at the true column edge. */
  .ev-tabulator-wrap .tabulator-cell.ev-col-item{white-space:normal;overflow:hidden}
  .ev-tabulator-wrap .tabulator-cell.ev-col-item .td-item{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;line-height:1.35;max-width:none;min-width:0;width:100%}
  /* Platform price pills: wrap onto the 2nd line within the 2-line-high row (don't clip). */
  .ev-tabulator-wrap .tabulator-cell.ev-col-plats{white-space:normal;line-height:1.2;overflow:hidden !important}
  /* No table outline / no frozen-column divider line. */
  .ev-tabulator-wrap .tabulator,.ev-tabulator-wrap .tabulator-tableholder,.ev-tabulator-wrap .tabulator-header{outline:none;border-left:none;border-right:none}
  .ev-tabulator-wrap .tabulator-cell.tabulator-frozen,.ev-tabulator-wrap .tabulator-col.tabulator-frozen{border-left:none !important;box-shadow:none !important}
  .ev-tabulator-wrap .tabulator-cell.num{font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;text-align:right}
  .ev-tabulator-wrap .tabulator-cell .ev-sku{font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;color:var(--muted)}
  .ev-tabulator-wrap .tabulator-placeholder{color:var(--muted);font-family:ui-monospace,'Cascadia Code','Consolas','Courier New',monospace;font-size:13px}
  .ev-tabulator-wrap .row-edit-btn{opacity:1;background:rgba(91,127,255,.15);border:none;color:var(--accent);border-radius:5px;padding:3px 8px;font-size:10px;font-weight:700;cursor:pointer;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
  .ev-tabulator-wrap .tabulator-tableholder::-webkit-scrollbar{width:10px;height:10px}
  .ev-tabulator-wrap .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}

  /* ── On/off switch (owner ruling 2026-09-23: iOS-style slider, not a delete button) ──
     One reusable class for every active/default toggle. Markup: <label class="ft-switch">
     <input type="checkbox" ...><span class="ft-switch-track"></span></label> */
  .ft-switch{position:relative;display:inline-block;width:34px;height:19px;flex-shrink:0;vertical-align:middle}
  .ft-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
  .ft-switch .ft-switch-track{position:absolute;inset:0;background:var(--border2);border:1px solid var(--border);border-radius:19px;transition:background-color .15s,border-color .15s}
  .ft-switch .ft-switch-track::before{content:'';position:absolute;left:2px;top:2px;width:13px;height:13px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
  .ft-switch input:checked + .ft-switch-track{background:var(--green);border-color:var(--green)}
  .ft-switch input:checked + .ft-switch-track::before{transform:translateX(15px)}
  .ft-switch input:disabled + .ft-switch-track{opacity:.5;cursor:default}
  .ft-switch input:focus-visible + .ft-switch-track{outline:2px solid var(--accent);outline-offset:2px}

  /* ── Mileage route map (board 2026-09-24 23:40 UTC — website map/stops/split) ──
     Per-run Leaflet map container (js/pages/mileage.js, only rendered when a run has
     at least one trip with a saved route). ft-mileage-div-icon resets Leaflet's own
     default .leaflet-div-icon white box/border so a numbered- or stop-marker's own
     inline-styled <div> (built in JS) is the whole visual, in both themes. */
  .ft-mileage-map{height:300px;border-radius:10px;overflow:hidden;margin-top:10px;border:1px solid var(--border)}
  .ft-mileage-div-icon{background:transparent;border:none}

  /* ── List Flip Review — modal body (Task 9, 2026-09-25, plan lines 374-398) ──────────────
     Values copied from docs/mockups/listing-review-interactive-2026-09-25.html's .form .sec,
     .kv, .ai, .ai.eb, .ident, .rpanel, .rtabs, .qside, .menu, .dlg blocks, renamed under an
     lr- prefix so this global stylesheet never collides with an existing/future .card, .sec,
     .kv, etc. elsewhere in the app. #lr-body (js/items/list-review.js) uses the lr-sec/lr-kv/
     lr-ai/lr-ident/lr-card/lr-two/lr-* rules below now; .lr-rpanel/.lr-rtabs/.lr-qside/
     .lr-menu/.lr-dlg are reserved here (unused markup yet) for Task 10's panel/Sell similar/
     Change item work, so that task does not need a second CSS pass to draw them. */
  :root{--lr-ai:#5a2ca0;--lr-aibg:#efe8fb;--lr-amber:#8a5a00;--lr-amberbg:#fff3d6}
  #lr-body .lr-sec{border-top:1px solid var(--border);padding:12px 0 10px}
  #lr-body .lr-sec:first-of-type{border-top:0}
  #lr-body .lr-sec h3{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin:0}
  #lr-body .lr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;gap:8px}
  #lr-body .lr-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #lr-body .lr-kv{display:grid;grid-template-columns:152px 1fr;gap:6px 10px;align-items:center;font-size:13px}
  #lr-body .lr-kv .lr-k{color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:6px;white-space:nowrap;grid-column:1 / -1}

  /* ── Item specifics panel (owner 2026-10-07): eBay's own "Complete your listing" row layout —
     docs/design/ebay-complete-your-listing-2026-10-07.pdf pp.3-4. One row per specific, label in
     a left column, a full-width control on the right; grouped Essential/Optional (list-review.js
     _lrSpecificsSectionHtml()/_lrSpecField()). Layout only — every data-f/data-spec/data-spec-*
     attribute and event handler is unchanged from the previous .lr-kv/.lr-two markup. */
  /* Base look for the .lnk text-button class used all over #lr-body (Show more/less here, Use AI
     description, Looks right, restore history, etc.) — those buttons already carried class="lnk"
     but the only rules that painted anything were the two scoped ones below (.lr-head button.lnk's
     chip look, .lr-eb .lnk's inline underline), so a .lnk outside both scopes rendered as a bare
     browser-default button. This gives the class itself a real, plain text-link style; the two
     more specific selectors below still win where they already applied. No new class introduced. */
  #lr-body .lnk{background:none;border:0;padding:0;margin:0;color:var(--accent);font:inherit;font-size:12px;font-weight:600;text-decoration:underline;cursor:pointer}
  #lr-body .lr-spec-group{margin-top:14px}
  #lr-body .lr-spec-group:first-child{margin-top:6px}
  #lr-body .lr-spec-grouphead{font-size:14px;font-weight:700;color:var(--text);margin:0 0 4px}
  #lr-body .lr-spec-row{display:grid;grid-template-columns:200px 1fr;gap:4px 16px;align-items:start;padding:10px 0}
  #lr-body .lr-spec-label{color:var(--text);font-size:13px;display:flex;align-items:center;gap:6px;padding-top:9px}
  #lr-body .lr-spec-ctrl{min-width:0}
  #lr-body .lr-spec-ctrl .lr-in{width:100%}
  /* Yes/No specifics render as our own .lr-btn-add chip button (same class the lr-head
     "Change item ›"/"Fill ▾" buttons use), toggling the existing .lr-p accent-filled modifier
     for the selected pill — no one-off pill class, nothing copied from eBay's control styling. */
  #lr-body .lr-spec-pills{display:flex;gap:8px}
 #lr-body .lr-spec-pills.lr-req-missing .lr-btn-add{border-color:var(--red)}
  #lr-body .lr-spec-hidden-ctrl{display:none}
  #lr-body .lr-wb-row{display:none}
  #lr-body .lr-wb-row:empty{display:none}
  #lr-body [data-act="lr-spec-showmore"]{margin-top:6px;display:inline-block}
  #lr-body .lr-spec-reqline{margin:2px 0 8px}
  @media (max-width: 640px) {
    #lr-body .lr-spec-row{grid-template-columns:1fr}
    #lr-body .lr-spec-label{padding-top:0}
  }
  #lr-body .lr-lbl{font-size:12px;color:var(--muted);margin:8px 0 3px}
  #lr-body .lr-in,#lr-body input.lr-in,#lr-body select.lr-in,#lr-body textarea.lr-in{width:100%;border:1px solid var(--border);border-radius:6px;padding:7px 9px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;min-height:34px}
  #lr-body textarea.lr-in{min-height:90px}
  #lr-body .lr-req::after{content:" *";color:var(--red)}
  /* Item 5 (brief-LW-list-flip-window.md, owner go 2026-10-04): red box while a required field
     (lrFlipMissing's set — title, price, photos, condition, the three policies, weight+dims
     when the shipping policy is calculated, required specifics) is blank — list-review.js's
     _lrPaintRequired() toggles this class live. */
  #lr-body .lr-req-missing{border-color:var(--red) !important;background:rgba(208,2,27,.06) !important;box-shadow:0 0 0 1px var(--red) inset}
  /* Issue #340 (owner ruling 2026-10-10, "still not fixed, it cuts off; also this needs to look
     more like eBay"): the generic 2-col .lr-two split title 50/50 with Custom label; the first
     fix (6a4b23f4) widened title to 3fr of a shared row, which was still only 75% of the form
     width AND still sharing a row with the label column — that's why it still read as "cut
     off" and didn't read like eBay's own Title section (title alone on its row, full width).
     Fixed: .lr-title-row is now a column, not a row — title gets the full form width on its
     own line, custom label (SKU) stacks on its own narrower line beneath, each with its count
     directly under it. Same shared classes as before (.lr-title-row/.lr-title-col/
     .lr-label-col/.lr-charcount/.lr-overlen) — one copy of this markup, one copy of this CSS,
     used by every place the item title is edited: Batch List modal, List Flip and the listing
     review page all render through this one function (list-review.js). Live counts
     (list-review.js's _lrSetCharCount()/_lrPaintFieldLimits()) and the shared over-limit
     highlight apply to every limited field this form has: title, condition description, custom
     label, item specific values. */
  #lr-body .lr-title-row{display:flex;flex-direction:column;gap:14px}
  #lr-body .lr-title-row .lr-title-col{width:100%}
  #lr-body .lr-title-row .lr-label-col{max-width:260px}
  #lr-body .lr-charcount{text-align:right;margin-top:2px}
  #lr-body .lr-charcount.lr-overlen{color:var(--red);font-weight:700}
  #lr-body .lr-in.lr-overlen{border-color:var(--red) !important;background:rgba(208,2,27,.06) !important;box-shadow:0 0 0 1px var(--red) inset}
  #lr-body .lr-customlabel-ro{background:var(--surface2)}
  /* Clear edits footer button (List Flip) — same look as its sibling footer buttons
     (Done/Prev/Skip). renderPmFooterState() (batch-list.js) toggles .pm-clear-btn-disabled
     while nothing has been edited this visit; that class dims the button and blocks the
     pointer. */
  #pm-clear-btn.pm-clear-btn{padding:10px 18px;background:var(--surface2);color:var(--muted);border:1px solid var(--border);border-radius:10px;font-weight:600;cursor:pointer}
  #pm-clear-btn.pm-clear-btn.pm-clear-btn-disabled{opacity:.6;cursor:not-allowed}
  #lr-body .lr-miss,#lr-panel-wrap .lr-miss{color:var(--red)}
  #lr-body .lr-note,#lr-panel-wrap .lr-note{font-size:12px;color:var(--muted)}
  #lr-body .lr-ai{display:inline-block;background:var(--lr-ai);color:#fff;font-size:9px;font-weight:800;letter-spacing:.4px;padding:1px 5px;border-radius:3px;vertical-align:middle;margin-left:5px}
  #lr-body .lr-ai.lr-ai-eb{background:#0064d2}
  #lr-body .lr-ident{display:flex;justify-content:space-between;align-items:center;gap:8px;background:rgba(23,163,90,.12);border-radius:10px;padding:10px 12px;margin-bottom:10px}
  #lr-body .lr-ident b{font-size:14px}
  #lr-body .lr-card,#lr-panel-wrap .lr-card{border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--surface2)}
  #lr-body .lr-card.lr-est,#lr-panel-wrap .lr-card.lr-est{background:#f3f6ff;border-color:#c9d6ff}
  #lr-body .lr-card .lr-big,#lr-panel-wrap .lr-card .lr-big{font-size:16px;font-weight:700}
  #lr-body .lr-desc{border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-family:Arial,sans-serif;font-size:13px;background:var(--surface)}
  #lr-body .lr-anno,#lr-panel-wrap .lr-anno{background:var(--lr-amberbg);color:var(--lr-amber);border:1px solid #f1d98a;border-radius:8px;padding:8px 10px;font-size:12px;margin:0 0 8px}
  #lr-body .lr-photos{display:grid;grid-template-columns:150px 1fr;gap:10px}
  #lr-body .lr-main,#lr-panel-wrap .lr-main{height:150px;background:var(--surface2);border-radius:8px;background-size:cover;background-position:center}
  #lr-body .lr-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:70px;gap:6px}
  #lr-body .lr-thumb{height:70px;border:0;padding:0;background:var(--surface2);border-radius:6px;background-size:cover;background-position:center}
  #lr-body .lr-thumb-out{opacity:.35}
  /* Batch List "Add photos" overflow line (owner hotfix go 2026-10-09): sits under the photo
     strip, stays until the next upload or item change — _lrPhotosHtml()/_lrRefreshPhotosOnly()
     in list-review.js, set by _lrpAddPhotos() in list-review-panel.js. */
  #lr-body .lr-photo-add-msg{margin-top:6px;font-size:12px;color:var(--muted)}
  #lr-body .lr-split{display:flex;gap:8px}
  #lr-body .lr-split .lr-in{flex:1}
  #lr-body .lr-split .lr-unitwrap{flex:1;display:flex;align-items:center;gap:4px;min-width:0}
  #lr-body .lr-split .lr-unitwrap .lr-in{flex:1;min-width:0}
  #lr-body .lr-unit{font-size:11px;color:var(--muted);white-space:nowrap}
  #lr-body .lr-btn-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:9px;font-family:var(--font-head);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
  #lr-body .lr-btn-add.lr-p{background:var(--accent);color:#fff;border-color:var(--accent)}
  #lr-body .lr-head button.lnk{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:9px;font-family:var(--font-head);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;padding:5px 10px;font-size:12px;text-decoration:none}
  #lr-body .lr-cand,#lr-panel-wrap .lr-cand{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--border);border-radius:8px;padding:8px;margin-bottom:4px;width:100%;background:var(--surface);cursor:pointer}
  #lr-body .lr-cand:hover,#lr-panel-wrap .lr-cand:hover{border-color:var(--accent)}
  #lr-body .lr-cat-list,#lr-panel-wrap .lr-cat-list{max-height:220px;overflow-y:auto}
  /* Reserved for Task 10 (AI panel / Sell similar / Change item) — not drawn by this task. */
  .lr-rpanel{border:1px solid var(--border);border-radius:14px;background:var(--surface)}
  .lr-rpanel.closed{width:34px;display:flex;flex-direction:column;gap:6px;padding:0;align-items:center}
  /* flex-wrap (item 3, brief-LW-list-flip-window.md, owner go 2026-10-04): two more tabs
     (FlipTrack, Photos-as-captured) added in front of the AI mark — six tab buttons no longer
     fit one row at the panel's existing width. */
  .lr-rtabs{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border)}
  .lr-rtabs button{border:0;background:none;font-size:12px;color:var(--muted);padding:4px 0;font-family:var(--font-head);font-weight:600}
  .lr-rtabs button.on{color:var(--accent);border-bottom:2px solid var(--accent)}
  .lr-qside{width:220px;border-left:1px solid var(--border);background:var(--surface2);display:flex;flex-direction:column}
  .lr-menu{position:absolute;right:0;top:36px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:5;min-width:250px;padding:6px}
  .lr-menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-radius:8px;font:inherit;font-weight:700}
  .lr-menu button:hover{background:var(--surface2)}
  .lr-dlg-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50}
  .lr-dlg{background:var(--surface);border-radius:14px;padding:20px 22px;width:440px;box-shadow:0 20px 60px rgba(0,0,0,.35)}

  /* ── List Flip Review — panel/preview (Task 10, 2026-09-25, plan lines 406-423) ─────────────
     The .lr-rpanel/.lr-rtabs/.lr-qside/.lr-menu/.lr-dlg rules above were reserved by Task 9;
     this task draws into them for real (list-review-panel.js) and adds the pieces Task 9 did
     not reserve: the open-panel body chrome, the closed strip's vertical "AI" head, and the
     eBay View Item look for the Preview tab (list-review-preview.js) — values copied from the
     mockup's .rpanel.open/.rpanel.closed/.aihead/.eb* blocks, renamed under the lr- prefix. */
  .lr-rpanel.open{border:1px solid var(--border);border-radius:14px;background:var(--surface)}
  .lr-rpanel.closed{width:34px;position:sticky;top:0;display:flex;flex-direction:column;gap:6px;padding:0;align-items:center}
  .lr-rpanel.closed button{width:34px;height:118px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);display:flex;align-items:center;justify-content:center;padding:0}
  .lr-rpanel.closed button:hover{border-color:var(--accent)}
  .lr-rpanel.closed span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-head);font-weight:700;font-size:11px;color:var(--accent);letter-spacing:.4px;white-space:nowrap}
  .lr-aihead{display:inline-block;background:var(--lr-ai);color:#fff;font-family:var(--font-head);font-weight:800;font-size:11px;letter-spacing:.6px;padding:3px 7px;border-radius:6px}
  .lr-evid-h{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:14px 0 6px}
  .lr-cand.on{border-color:var(--accent);background:rgba(23,163,90,.12)}
  .lr-thumb-sel{outline:2px solid var(--text)}
  /* Task 12 (carried in from Task 10's fix round, 2026-09-25 16:00 — owner rule): the AI panel
     must scroll WITH the modal body, never in its own scroll box ("the AI panel doesn't scroll
     until the mouse is in it"). Task 10's #lr-panel-wrap{overflow-y:auto} above gave the panel
     its own scroll path because the modal row is overflow:hidden for the sticky sidebar/footer;
     Task 12 replaces that with ONE scroll container wrapping #lr-body's column AND
     #lr-panel-wrap together (index.html — the new sibling div `#lr-scroll`), so the mouse
     scrolls both together while the sidebar and footer stay put. #lr-panel-wrap itself no
     longer owns a scrollbar. */
  #lr-scroll{flex:1;display:flex;overflow-y:auto;overflow-x:hidden;min-width:0}
  #lr-panel-wrap{overflow:visible}
  #lr-panel-wrap .lr-rpanel.open{max-height:none}
  #lr-panel-wrap .lr-pane-body{max-height:none}

  /* Owner brief 2026-10-07 line 72: the right panel's own controls (FlipTrack tab rows, "+ Add",
     "This isn't the item ›", "Use as asking price", "Research prices") rendered as bare browser
     defaults — every one of #lr-body's .lr-lbl/.lr-in/.lr-two/.lnk/.lr-btn-add/.lr-thumb/.lr-grid
     rules above is scoped to "#lr-body ..." only, and #lr-panel-wrap (list-review-panel.js) sits
     outside that subtree, so none of them painted here even though the same classes/markup are
     used. Same existing selectors, same values, just re-scoped to this panel's own container —
     no new one-off styling, layout/classes only. */
  #lr-panel-wrap .lr-lbl{font-size:12px;color:var(--muted);margin:8px 0 3px}
  #lr-panel-wrap .lr-in,#lr-panel-wrap input.lr-in,#lr-panel-wrap select.lr-in,#lr-panel-wrap textarea.lr-in{width:100%;border:1px solid var(--border);border-radius:6px;padding:7px 9px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;min-height:34px}
  #lr-panel-wrap textarea.lr-in{min-height:90px}
  #lr-panel-wrap .lr-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #lr-panel-wrap .lnk:not(.lr-eb .lnk){background:none;border:0;padding:0;margin:0;color:var(--accent);font:inherit;font-size:12px;font-weight:600;text-decoration:underline;cursor:pointer}
  #lr-panel-wrap .lr-btn-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:9px;font-family:var(--font-head);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
  #lr-panel-wrap .lr-btn-add.lr-p{background:var(--accent);color:#fff;border-color:var(--accent)}
  #lr-panel-wrap .lr-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:70px;gap:6px}
  #lr-panel-wrap .lr-thumb{height:70px;border:0;padding:0;background:var(--surface2);border-radius:6px;background-size:cover;background-position:center}
  #lr-panel-wrap .lr-thumb-out{opacity:.35}

  /* ── Task 12 (2026-09-25) — batch footer small dialogs (Listed elsewhere ↗ / Save → Cross
     Flip / the "Listed on eBay" confirmation) ── plain inputs matching #lr-body's .lr-in/.lr-lbl
     look, but NOT scoped to #lr-body — these dialogs are appended to document.body, outside the
     modal's #lr-body subtree, so the #lr-body-scoped rules above never reach them. */
  .pm-dlg-lbl{font-size:12px;color:var(--muted);margin:10px 0 3px}
  .pm-dlg-in{width:100%;border:1px solid var(--border);border-radius:6px;padding:7px 9px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;min-height:34px;box-sizing:border-box}

  /* ── List Flip Review — Pricing tab (Task 11, 2026-09-25, plan lines 437-448) ───────────────
     Sold/live comp KPI strip + row lines, per spec §3.5 and the mockup's priceSheet() .kpis/
     .kpi/.rowline blocks, renamed under the lr- prefix (list-review-panel.js _lrpPriceKpiHtml/
     _lrpPriceRowsHtml). */
  .lr-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 4px}
  .lr-kpi{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 6px;text-align:center}
  .lr-kpi .n{font-size:15px;font-weight:800;color:var(--text);line-height:1.2}
  .lr-kpi .l{font-size:10px;color:var(--muted);margin-top:2px}
  .lr-rowline{display:flex;gap:8px;border-top:1px dashed var(--border);padding:6px 0;align-items:flex-start;font-size:12px}
  .lr-rowline-out{opacity:.55}

  .lr-eb{font-family:"Market Sans","Helvetica Neue",Arial,sans-serif;color:var(--text)}
  .lr-eb .lnk{font-weight:400;font-size:inherit;text-decoration:underline}
  .lr-eb-car{position:relative;margin:4px 0 10px}
  .lr-eb-img{height:220px;background:var(--surface2);border-radius:6px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
  .lr-eb-cnt{position:absolute;right:10px;top:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 7px;border-radius:10px}
  .lr-eb-strip{display:flex;gap:6px;margin-top:6px}
  .lr-eb-strip div{width:44px;height:44px;background:var(--surface2);border-radius:4px;border:2px solid transparent;background-size:cover;background-position:center}
  .lr-eb-strip div.on{border-color:var(--accent)}
  .lr-eb-title{font-size:17px;line-height:1.3;font-weight:700;margin:6px 0 6px}
  .lr-eb-seller{font-size:12px;color:var(--text);margin-bottom:10px}
  .lr-eb-price{font-size:22px;font-weight:700;margin:4px 0 0}
  .lr-eb-bo{font-size:13px;margin:0 0 8px}
  .lr-eb-row{display:grid;grid-template-columns:78px 1fr;gap:8px;font-size:13px;padding:5px 0;line-height:1.35}
  .lr-eb-k{color:var(--muted)}
  .lr-eb-btn{display:block;text-align:center;border-radius:24px;padding:9px;font-weight:700;font-size:13px;margin-top:8px;border:1px solid var(--accent);color:var(--accent);background:var(--surface)}
  .lr-eb-btn.lr-eb-buy{background:var(--accent);color:#fff}
  .lr-eb-rows{border-top:1px solid var(--border);margin-top:14px;padding-top:6px}
  .lr-eb-tabs{display:flex;gap:18px;border-bottom:1px solid var(--border);margin-top:16px;font-size:14px}
  .lr-eb-tabs span{padding:8px 0;color:var(--muted)}
  .lr-eb-tabs span.on{color:var(--text);font-weight:700;border-bottom:3px solid var(--text)}
  .lr-eb-h{font-size:15px;font-weight:700;margin:14px 0 8px}
  .lr-eb-specs{display:grid;grid-template-columns:120px 1fr;gap:6px 10px;font-size:13px}
  .lr-eb-sk{color:var(--muted)}
  .lr-eb-desc{border:1px solid var(--border);border-radius:6px;padding:10px}

  /* ── Admin site switcher (admin.gofliptrack.com, brief-admin-site.md) ────────────────
     admin-switcher.html's own page + panel layout — a dropdown bar over a full-height
     iframe, or a minimal Google-only sign-in card when signed out. */
  html,body.as-body{height:100%;margin:0}
  body.as-body{display:flex;flex-direction:column;background:var(--bg)}
  .as-hidden{display:none !important}
  .as-signin{flex:1;display:flex;align-items:center;justify-content:center}
  .as-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:34px 38px;width:360px;box-sizing:border-box;box-shadow:0 8px 32px rgba(0,0,0,.10);text-align:center}
  .as-card .ft-logo{margin:0 auto 22px;display:flex;justify-content:center}
  .as-google{width:100%;padding:11px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:10px;font:600 14px var(--font-body);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px}
  .as-err{background:rgba(208,2,27,.08);color:var(--red);border:1px solid rgba(208,2,27,.25);border-radius:8px;padding:9px 12px;font-size:13px;margin-top:14px}
  .as-switcher{display:flex;flex-direction:column;flex:1;min-height:0}
  .as-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex:0 0 auto}
  .as-bar label{font:600 12px var(--font-head);color:var(--muted)}
  .as-bar select{padding:7px 10px;border:1px solid var(--border);border-radius:8px;font:600 13px var(--font-body);background:var(--surface2);color:var(--text)}
  .as-frame{flex:1;width:100%;border:none}
  .as-unavailable{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font:600 15px var(--font-head)}

  /* #124: Consignors items table row thumbnail (js/pages/consignors.js renderConsignorItemsPage).
     Shown by default; loadHeaderThumb (js/items/item-photos.js) hides it inline until a photo loads. */
  .consignor-row-thumb{display:block;width:28px;height:28px;object-fit:cover;border-radius:5px;border:1px solid var(--border);background:#111;cursor:pointer;flex-shrink:0}

  /* Quick fix 12 (run sheet 2026-10-07): eBay/Etsy Platform Management card note shown
     whenever that store's Spotter isn't signed in to the platform, alongside whatever API
     status label the card already shows. */
  .platkpi-spotter-note{font-size:10px;color:var(--red);margin-top:2px}