/* The app's main styles (were index.html's first big <style> block, moved out in TASKS-OPTIMIZE O3:
   a stylesheet is cached apart from the HTML, which is served no-cache). Loaded at the same place
   in the head, before css/layouts.css, so the cascade is as it was. */
  :root {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface2: #f0efed;
    --border: #e5e4e0;
    --border2: #d4d3cf;
    --text: #1a1a18;
    --text2: #6b6b67;
    --text3: #9b9b96;
    --accent: #2563eb;
    --accent-light: #eff4ff;
    --accent-hover: #1d4ed8;
    --green: #16a34a;
    --green-light: #f0fdf4;
    --red: #dc2626;
    --red-light: #fef2f2;
    --amber: #d97706;
    --amber-light: #fffbeb;
    --purple: #7c3aed;
    --purple-light: #f5f3ff;
    --orange: #ea580c;
    --text-muted: #9b9b96;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06);
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    height: 100vh;            /* (a browser without dvh) */
    /* the height you can see: on a phone, 100vh is the screen with the browser's bars hidden, and
       since the page itself never scrolls they never hide, so the bottom of every page (the repair
       form's Save bar) sat under Chrome's toolbar on the iPhone (the owner, 29 Sep, L67) */
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* TOP NAV */
  .topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 12px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    z-index: 100;
    overflow: hidden;
  }
  .topbar-logo {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  }
  .logo-icon {
    width: 30px; height: 30px;
    background: var(--accent);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 15px; flex-shrink: 0;
  }
  /* the shop's mark as letters ("MP", settings/core.js shopMark): bold, a little tighter, sized to the box */
  .logo-icon.mark-text { font-size: 12px; font-weight: 800; letter-spacing: 0.02em; line-height: 1; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  .login-logo-icon.mark-text { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  .shop-preview-logo.mark-text, .logo-preview.mark-text { font-weight: 800; font-size: 0.8em; letter-spacing: 0.02em; }
  #favicon-preview-emoji.mark-text { font-size: 13px !important; font-weight: 800; color: var(--accent); }
  /* the shop's uploaded logo in place of the emoji (settings/core.js shopLogoFill) */
  .has-logo { background: transparent !important; overflow: hidden; }
  .has-logo > img.logo-img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }
  .logo-text { font-size: 14px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; }
  .logo-sub { font-size: 10px; color: var(--text3); font-weight: 400; white-space: nowrap; }

  .nav-tabs {
    display: flex; gap: 1px;
    background: var(--surface2);
    border-radius: var(--radius);
    padding: 2px;
    flex-shrink: 1; min-width: 0; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tab {
    padding: 5px 10px;
    border-radius: calc(var(--radius) - 2px);
    border: none; background: transparent;
    color: var(--text2); font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap; flex-shrink: 0;
  }
  .nav-tab:hover { color: var(--text); }
  .nav-tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
  }

  .topbar-right {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto;
  }
  .date-time { text-align: right; flex-shrink: 0; }
  .date-time .time { font-size: 14px; font-weight: 600; font-family: var(--font-num, 'DM Mono', monospace); white-space: nowrap; }
  .date-time .date { font-size: 10px; color: var(--text3); white-space: nowrap; }

  /* Responsive header — progressively hide elements */
  @media (max-width: 1200px) {
    .nav-tab { padding: 5px 8px; font-size: 11px; }
    .logo-text, .logo-sub { display: none; }
  }
  @media (max-width: 900px) {
    .date-time .date { display: none; }
    .date-time .time { font-size: 12px; }
    .topbar { padding: 0 8px; gap: 4px; }
    .user-chip-role { display: none; }
  }
  .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 13px; font-weight: 600;
    cursor: pointer;
  }

  /* LAYOUT */
  .app-body {
    display: flex; flex: 1; overflow: hidden;
  }

  /* ══ UI v2 — Sidebar Shell (beta, flag-gated via Settings > Appearance) ══
     Backend/admin pages only — see index.html's dev-notes near _uiV2OnPageChange()
     for the full rationale and phased rollout plan. Off by default: nothing here
     is visible or does anything until body.ui-v2 is present. */
  body.ui-v2 .nav-tabs { display: none; }
  #sv2-collapse-toggle { display: none; }
  body.ui-v2 #sv2-collapse-toggle { display: flex; }
  body.ui-v2 #sv2-collapse-toggle:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
  .sidebar-v2 {
    display: none;
    flex-direction: column;
    width: 240px; flex-shrink: 0;
    background: #fafaf9; border-right: 1px solid #e7e5e4;
    overflow: hidden;
  }
  body.ui-v2 .sidebar-v2 { display: flex; transition: width 0.15s ease; }
  /* Narrow icon-only rail — either automatically on the POS page (pos-active,
     reclaims register/product-grid space) or manually via the collapse
     toggle (sidebar-collapsed, see toggleUiV2Sidebar()). Same rail styling
     either way, just two different reasons to be in it. */
  body.ui-v2.pos-active .sidebar-v2, body.ui-v2.sidebar-collapsed .sidebar-v2 { width: 64px; }
  /* Folding the menu by hand hides it completely everywhere except POS (which
     keeps its quick-action icon rail). The icon rail used to hide every group
     heading (Products, Repairs, …), so it gave little room back and blocked
     navigation; hiding it outright gives the matrices the full screen width,
     and the header's menu button brings it back. */
  body.ui-v2.sidebar-collapsed:not(.pos-active) .sidebar-v2 { width: 0; border-right: 0; }

  /* ══ Matrix UI language (mx2) — every stock matrix shares this look ══
     White grid, near-black text; stock state is the NUMBER's colour (black in
     stock, amber low, red 0 out, grey dot not stocked); bold narrow model
     column; price once per column in the header. !important on cell
     background/colour so any leftover inline tint from a renderer can't
     bring the old low-contrast look back. See the mx2* helpers in ui-kit.js. */
  .mx2-scroll { overflow: auto; background: #ffffff; border: 1px solid #d4d4d4; border-radius: 8px; }
  .mx2-table { border-collapse: separate; border-spacing: 0; width: 100%; background: #ffffff; color: #111111; font-size: 11px; }
  .mx2-table th, .mx2-table td { background: #ffffff !important; color: #111111; }
  .mx2-table thead th {
    position: sticky; top: 0; z-index: 2; padding: 5px 3px; vertical-align: bottom; text-align: center;
    font-size: 10px; font-weight: 800; letter-spacing: 0.2px; line-height: 1.15; text-transform: uppercase;
    border-bottom: 2px solid #111111; border-right: 1px solid #e5e5e5; color: #111111 !important;
  }
  .mx2-table thead th.mx2-corner { left: 0; z-index: 4; text-align: left; padding: 5px 8px; font-size: 11px; border-right: 2px solid #111111; }
  .mx2-th-price { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #404040; font-variant-numeric: tabular-nums; }
  .mx2-table tbody td { border-bottom: 1px solid #d4d4d4; border-right: 1px solid #e5e5e5; padding: 3px 4px; vertical-align: middle; }
  .mx2-table td.mx2-model {
    position: sticky; left: 0; z-index: 1; width: 112px; min-width: 112px; max-width: 112px;
    padding: 4px 8px; font-size: 12.5px; font-weight: 800; line-height: 1.2; color: #111111 !important;
    border-right: 2px solid #111111; text-align: left;
  }
  .mx2-table tr.mx2-series td { background: #f4f4f5 !important; padding: 5px 8px; font-size: 12px; font-weight: 800; text-align: left; border-right: 0; }
  .mx2-series-meta { margin-left: 6px; font-size: 11px; font-weight: 500; color: #404040; }
  .mx2-q { font-weight: 800; font-variant-numeric: tabular-nums; color: #111111; }
  .mx2-q.big { font-size: 15px; text-align: center; line-height: 1.2; }
  .mx2-q.low { color: #b45309; }
  .mx2-q.out { color: #b91c1c; }
  .mx2-none { text-align: center; font-size: 14px; line-height: 1; color: #a3a3a3; }
  .mx2-line { display: flex; align-items: center; gap: 3px; font-size: 10.5px; line-height: 14px; min-width: 0; }
  .mx2-dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(0,0,0,0.35); }
  .mx2-dot.light { border-color: #737373; }
  .mx2-line-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; color: #111111; }
  .mx2-line .mx2-q { min-width: 12px; text-align: right; }
  /* Price-first cells (Repair Parts: price varies per model): bold price, then
     the stock count coloured by status; colour-variant cells get one such
     line per colour with a short tag (BLK / WHT). */
  .mx2-pp { display: flex; align-items: baseline; justify-content: center; gap: 5px; font-variant-numeric: tabular-nums; }
  .mx2-pp-price { font-size: 13px; font-weight: 800; color: #111111; }
  .mx2-pp .mx2-q { font-size: 11.5px; }
  .mx2-pp-tag { font-size: 9px; font-weight: 800; color: #404040; letter-spacing: 0.3px; }
  .mx2-pp-line { cursor: pointer; border-radius: 4px; padding: 0 2px; }
  .mx2-pp-line:hover { box-shadow: inset 0 0 0 2px #1d4ed8; }
  /* Cart / "⋯" / price-edit affordances appear on hover so the grid itself
     reads as numbers only; always shown on touch screens (no hover). */
  .mx2-table tbody td { position: relative; }
  .mx2-table td.mx2-click { cursor: pointer; }
  .mx2-table td.mx2-click:hover { box-shadow: inset 0 0 0 2px #1d4ed8; }
  /* Compact one-row toolbar + slim stats line */
  .mx2-toolbar { display: flex; align-items: center; gap: 8px; min-height: 40px; flex-wrap: nowrap; }
  .mx2-title { font-size: 15px; font-weight: 800; white-space: nowrap; color: #111111; }
  .mx2-tabs { display: flex; align-items: stretch; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .mx2-tabs::-webkit-scrollbar { display: none; }
  .mx2-tabs .rpt-tab { padding: 7px 7px; font-size: 12px; white-space: nowrap; }
  .mx2-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 6px 2px; font-size: 12px; color: #404040; }
  .mx2-stats b { color: #111111; }
  .mx2-stats b.low { color: #b45309; }
  .mx2-stats b.out { color: #b91c1c; }
  body.ui-v2 .page { flex: 1; min-width: 0; }
  .sv2-section {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #a8a29e; padding: 14px 14px 4px; white-space: nowrap; overflow: hidden;
  }
  body.ui-v2.pos-active .sv2-section, body.ui-v2.sidebar-collapsed .sv2-section { display: none; }
  .sv2-nav { flex: 1; overflow-y: auto; padding: 6px 0; }
  .sv2-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 1px 8px;
    border-radius: 8px; font-size: 13.5px; font-weight: 600; color: #44403c;
    cursor: pointer; white-space: nowrap; overflow: hidden; font-family: var(--font-ui, 'DM Sans', sans-serif);
  }
  .sv2-item:hover { background: #f1f0ee; }
  .sv2-item.active { background: #eff4ff; color: #2563eb; }
  .sv2-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 14px; }
  .sv2-label { overflow: hidden; text-overflow: ellipsis; }
  body.ui-v2.pos-active .sv2-item, body.ui-v2.sidebar-collapsed .sv2-item { justify-content: center; margin: 1px 4px; padding: 10px 0; }
  body.ui-v2.pos-active .sv2-label, body.ui-v2.sidebar-collapsed .sv2-label { display: none; }
  /* "Quick Matrices" rail icon (Task 2) is POS-specific — every other page
     already has its own way into the Matrices screen (Inventory's own tab). */
  #sv2-pos-matrices { display: none; }
  body.ui-v2.pos-active #sv2-pos-matrices { display: flex; }
  /* Same reasoning for "Repairs" — its own item is a .sv2-group-head, which
     the rule below hides completely on the collapsed POS rail, so without
     this the rail has literally no way back into Repairs from POS. */
  #sv2-pos-repairs { display: none; }
  /* (#sv2-pos-repairs stays hidden: the Repairs group icon itself shows on the rail now) */

  /* ══ Phase 2 — Inventory's expandable sub-group + real sub-tab relocation ══
     Hides the old horizontal 13-button .inv-tabs-bar row (the actual thing
     that motivated this redesign) since every one of those destinations now
     lives here instead, still calling the same switchInvStockTab(). */
  body.ui-v2 .inv-tabs-bar { display: none; }
  body.ui-v2 #rpt-tabs-bar { display: none; }
  /* On the narrow rail (POS page, or collapsed) a group (Repairs, Restock, Products,
     Reports) is its icon: tapping it opens the page (_uiV2GroupClick); its sub-list
     never opens in a 64px rail. */
  body.ui-v2.pos-active .sv2-group-head .sv2-chev, body.ui-v2.sidebar-collapsed .sv2-group-head .sv2-chev { display: none; }
  body.ui-v2.pos-active .sv2-subgroup, body.ui-v2.sidebar-collapsed .sv2-subgroup { display: none !important; }
  .sv2-chev { flex-shrink: 0; transition: transform 0.12s; }
  .sv2-group-head.open .sv2-chev { transform: rotate(180deg); }
  .sv2-subgroup { display: none; }
  .sv2-subgroup.open { display: block; }
  .sv2-subitem {
    display: flex; align-items: center; gap: 6px; padding: 7px 14px 7px 41px; margin: 0 8px;
    border-radius: 8px; font-size: 13px; font-weight: 600; color: #78716c;
    cursor: pointer; white-space: nowrap; overflow: hidden; font-family: var(--font-ui, 'DM Sans', sans-serif);
  }
  .sv2-subitem:hover { background: #f1f0ee; color: #44403c; }
  .sv2-subitem.active { background: #eff4ff; color: #2563eb; }
  .sv2-badge {
    margin-left: auto; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 20px; flex-shrink: 0;
  }

  /* ══ Phase 5 — tighten the top chrome on backend pages ══
     The sidebar (Phases 1-4) reclaimed the nav bar and every page's own
     horizontal tab row; this closes the remaining gap the user flagged —
     the page-header/KPI-card block above the real content is still sized
     for a page that used to start much further down. Scoped to the same
     shared classes every one of these pages already uses (.page-header,
     .inventory-stats, .stat-card — Inventory/Restock/Transactions/
     Timesheet all build on them), so one rule tightens all of them
     consistently instead of hand-tuning each page separately. */
  body.ui-v2 #page-inventory { padding: 14px 20px 12px; }
  body.ui-v2 .page-header { margin-bottom: 12px; }
  body.ui-v2 .inventory-stats { gap: 8px; margin-bottom: 12px; }
  body.ui-v2 .stat-card { padding: 10px 14px; }
  body.ui-v2 .stat-value { font-size: 20px; margin: 2px 0; }
  body.ui-v2 .stat-label { font-size: 10px; }
  body.ui-v2 .stat-sub { font-size: 10px; }
  body.ui-v2 #page-restock { padding-top: 12px; }
  body.ui-v2 #page-restock .page-header { padding: 0 20px; margin-bottom: 10px; }

  /* PAGES */
  .page { display: none; width: 100%; height: 100%; overflow: hidden; }
  .page.active { display: flex; }
  #page-timesheet.active { flex-direction: row; }

  /* ========== POS PAGE ========== */
  #page-pos {
    flex-direction: row;
  }

  .pos-left {
    flex: 1; display: flex; flex-direction: column;
    padding: 16px; gap: 8px; overflow: hidden;
  }

  .search-bar {
    display: flex; gap: 8px; align-items: center;
  }
  .search-input-wrap {
    flex: 1; position: relative;
  }
  .search-input-wrap input {
    width: 100%; padding: 9px 12px 9px 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-size: 13px; background: var(--surface);
    color: var(--text); outline: none; transition: border 0.15s;
  }
  .search-input-wrap input:focus { border-color: var(--accent); }
  .search-input-wrap .search-icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--text3); font-size: 14px; pointer-events: none;
  }
  .cat-filter {
    display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: 2px;
  }
  .cat-filter::-webkit-scrollbar { height: 3px; }
  .cat-filter::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
  .cat-btn {
    padding: 5px 12px; border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface); color: var(--text2);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
  }
  .cat-btn:hover { border-color: var(--accent); color: var(--accent); }
  .cat-btn.active {
    background: var(--accent); border-color: var(--accent);
    color: white;
  }

  .products-grid {
    flex: 1; overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px; padding-right: 4px; align-content: start;
  }
  .products-grid::-webkit-scrollbar { width: 4px; }
  .products-grid::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

  .product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    cursor: pointer; transition: all 0.15s;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 0;
  }
  .product-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
  .product-card-img {
    width: 100%; object-fit: cover;
    border-radius: 6px; margin-bottom: 6px;
    display: block; background: var(--surface2);
    flex: 1 1 auto; min-height: 40px; max-height: 90px;
  }
  .product-card-img-placeholder {
    width: 100%; border-radius: 6px;
    margin-bottom: 6px; display: flex; align-items: center;
    justify-content: center; background: var(--surface2);
    font-size: 28px;
    flex: 1 1 auto; min-height: 40px; max-height: 90px;
  }
  /* Text area — NEVER shrinks, always visible */
  .product-text {
    flex-shrink: 0;
  }
  .product-name {
    font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .product-price { font-size: 12px; font-weight: 700; color: var(--accent); font-family: var(--font-num, 'DM Mono', monospace); }
  .product-price-variable { font-size: 10px; font-weight: 700; color: #fff; background: #8b5cf6; border-radius: 4px; padding: 1px 5px; letter-spacing: 0.03em; }
    border: 2px dashed var(--border2); border-radius: var(--radius);
    padding: 20px; text-align: center; cursor: pointer;
    transition: all 0.15s; position: relative; overflow: hidden;
    background: var(--surface2);
  }
  /* Image uploader in product modal */
  .img-upload-area {
    border: 2px dashed var(--border2); border-radius: var(--radius);
    padding: 20px; text-align: center; cursor: pointer;
    transition: all 0.15s; position: relative; overflow: hidden;
    background: var(--surface2);
  }
  .img-upload-area:hover { border-color: var(--accent); background: var(--accent-light); }
  .img-upload-area.has-image { border-style: solid; border-color: var(--border); padding: 0; }
  .img-upload-area input[type=file] {
    display: none; /* hidden — triggered only by explicit button click */
  }
  /* ── Image action buttons ── */
  .img-action-bar {
    display: flex; gap: 8px; margin-top: 10px; justify-content: center; flex-wrap: wrap;
  }
  .img-action-bar .img-btn {
    padding: 7px 16px; border-radius: var(--radius-sm); font-size: 12px;
    font-weight: 600; cursor: pointer; border: 1px solid var(--border);
    font-family: var(--font-ui, 'DM Sans', sans-serif); transition: all 0.15s;
  }
  .img-btn-upload {
    background: var(--accent-light); color: var(--accent); border-color: var(--accent) !important;
  }
  .img-btn-upload:hover { background: var(--accent); color: white; }
  .img-btn-save {
    background: var(--green); color: white; border-color: var(--green) !important;
  }
  .img-btn-save:hover { filter: brightness(0.9); }
  .img-btn-cancel {
    background: var(--surface); color: var(--text2); border-color: var(--border) !important;
  }
  .img-btn-cancel:hover { background: var(--surface2); }
  .img-btn-library {
    background: var(--surface); color: var(--purple, #7c3aed); border-color: var(--purple, #7c3aed) !important;
  }
  .img-btn-library:hover { background: var(--purple, #7c3aed); color: white; }
  /* Image Library Modal (js/inventory/product-editor.js) — the tiles are squares made by
     padding (not aspect-ratio): iPad Safari sized aspect-ratio tiles in this scrolling grid
     at almost 0 px high, so the rows collapsed onto each other and taps hit the wrong tile. */
  .img-library-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    grid-auto-rows: max-content; align-content: start;
    gap: 10px; padding: 16px 0; max-height: 60dvh; min-height: 140px; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .img-library-item {
    position: relative; height: 0; padding-bottom: calc(100% - 6px); border-radius: var(--radius-sm);
    overflow: hidden; cursor: pointer; border: 3px solid transparent; box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s; background: #fff;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  }
  /* a hover effect only where there is a mouse: on iPad a first tap that changes :hover is not a click */
  @media (hover: hover) { .img-library-item:hover { border-color: var(--accent); } }
  .img-library-item.selected { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
  .img-library-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
  .img-library-item .lib-name {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 3px 5px;
    font-size: 9px; background: rgba(0,0,0,0.6); color: white;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  }
  .img-library-item.selected::after { content: '✓'; position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
  /* Pending-image dashed outline pulse */
  .img-upload-area.pending-image {
    border: 2px dashed var(--accent); animation: pendingPulse 1.5s ease-in-out infinite;
  }
  @keyframes pendingPulse {
    0%, 100% { border-color: var(--accent); }
    50% { border-color: var(--purple); }
  }
  .img-preview {
    width: 100%; max-height: 180px; object-fit: cover;
    border-radius: calc(var(--radius) - 2px); display: block;
  }
  .img-upload-label {
    font-size: 13px; color: var(--text3); pointer-events: none;
  }
  .img-upload-icon { font-size: 28px; margin-bottom: 6px; }
  .img-remove-btn {
    position: absolute; top: 8px; right: 8px;
    background: rgba(0,0,0,0.55); color: white;
    border: none; border-radius: 20px; padding: 4px 10px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    z-index: 2; font-family: var(--font-ui, 'DM Sans', sans-serif);
  }
  .img-remove-btn:hover { background: var(--red); }
  /* Variant picker product image */
  .vm-product-img {
    width: 56px; height: 56px; object-fit: cover;
    border-radius: 8px; flex-shrink: 0;
  }
  .product-name { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 4px; }
  /* Product names, type first (js/catalog/catalog-views.js cvNameHtml; the preference "Product names on the
     checkout", js/people/prefs.js cardNames): "Glitter" large, "iPhone Case" small above it. Automatic: on a
     phone or a tablet; the full name on one line on a computer — but a matrix's column header (.mx-pn) is type first
     on a computer too: the full name crowded its columns, and they led with the short name before MX3e. The text
     stays the full name either way. */
  body.names-type :is(.product-name, .mx-pn) .pn-cat, body.names-auto.layout-tablet :is(.product-name, .mx-pn) .pn-cat, body.names-auto.layout-phone :is(.product-name, .mx-pn) .pn-cat, body.names-auto .mx-pn .pn-cat {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text3, #8a877f); line-height: 1.2; margin-bottom: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.names-type :is(.product-name, .mx-pn) .pn-sep, body.names-auto.layout-tablet :is(.product-name, .mx-pn) .pn-sep, body.names-auto.layout-phone :is(.product-name, .mx-pn) .pn-sep, body.names-auto .mx-pn .pn-sep { display: none; }
  body.names-type :is(.product-name, .mx-pn) .pn-type, body.names-auto.layout-tablet :is(.product-name, .mx-pn) .pn-type, body.names-auto.layout-phone :is(.product-name, .mx-pn) .pn-type, body.names-auto .mx-pn .pn-type {
    display: block; font-size: 1.25em; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; color: var(--text);
  }
  .product-price { font-size: 13px; font-weight: 700; color: var(--accent); font-family: var(--font-num, 'DM Mono', monospace); }
  .product-price-variable { font-size: 11px; font-weight: 700; color: #fff; background: #8b5cf6; border-radius: 4px; padding: 1px 6px; letter-spacing: 0.03em; }
  .ci-var-price-wrap { display:flex; align-items:center; gap:5px; margin-top:2px; }
  .ci-var-price-input { width:75px; padding:2px 6px; font-size:13px; font-family:var(--font-num, 'DM Mono',monospace); font-weight:700; color:var(--accent); border:1.5px solid var(--accent); border-radius:5px; background:var(--bg); outline:none; }
  .ci-var-price-input:focus { border-color:#7c3aed; }
  .ci-var-price-label { font-size:11px; color:#8b5cf6; font-weight:600; }
  /* Variable price prompt modal */
  #var-price-modal .modal-box { max-width:320px; }
  .vp-product-name { font-size:15px; font-weight:700; margin-bottom:4px; }
  .vp-hint { font-size:12px; color:var(--text-muted); margin-bottom:14px; }
  .ui-order-btn { margin-left: 6px; font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text2); cursor: pointer; font-weight: 700; }
  .ui-order-btn:hover { border-color: var(--accent); color: var(--accent); }
  .vp-input-wrap { display:flex; align-items:center; gap:6px; margin-bottom:16px; }
  .vp-currency { font-size:22px; font-weight:700; color:var(--accent); }
  .vp-price-input { flex:1; padding:10px 12px; font-size:22px; font-family:var(--font-num, 'DM Mono',monospace); font-weight:700; border:2px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); outline:none; }
  .vp-price-input:focus { border-color:#7c3aed; }
  .product-stock {
    position: absolute; top: 8px; right: 8px;
    font-size: 10px; font-weight: 600; padding: 2px 6px;
    border-radius: 10px;
    /* a solid pill: readable on a dark photo too (the owner, 30 Sep: M67) */
    background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  }
  .product-stock.low { background: #fef3c7; color: #92400e; }
  .product-stock.out { background: #fee2e2; color: #b91c1c; }

  /* CART */
  .pos-right {
    width: 340px; flex-shrink: 0;
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    max-height: 100dvh; overflow: hidden;
  }

  .cart-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
  }
  .cart-header h3 { font-size: 14px; font-weight: 700; }
  .cart-count {
    background: var(--accent); color: white;
    font-size: 11px; font-weight: 700;
    padding: 2px 7px; border-radius: 10px;
  }

  .customer-select {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
  }
  .customer-select select {
    width: 100%; padding: 7px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 12px;
    color: var(--text); background: var(--surface2); outline: none;
  }

  .cart-items {
    flex: 1; overflow-y: auto; padding: 8px 12px;
    display: flex; flex-direction: column; gap: 4px;
    min-height: 0; /* Critical for flex overflow scroll */
  }
  .cart-items::-webkit-scrollbar { width: 3px; }
  .cart-items::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  .cart-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--text3); gap: 8px; padding: 40px 0;
  }
  .cart-empty-icon { font-size: 40px; }
  .cart-empty p { font-size: 13px; }

  .cart-item {
    display: flex; flex-direction: column; gap: 0;
    padding: 6px 10px; background: var(--surface2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
  }
  /* Row 1: emoji + name + total + remove */
  .ci-row1 {
    display: flex; align-items: center; gap: 6px; min-height: 24px;
  }
  .ci-emoji { font-size: 16px; flex-shrink: 0; line-height: 1; }
  .ci-info { flex: 1; min-width: 0; }
  .ci-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
  /* selling past zero (js/pos/cart-stock-note.js): a note, never a block */
  .ci-stock-note { font-size: 10px; font-weight: 600; color: var(--amber); line-height: 1.3; margin-top: 1px; }
  .ci-total { font-size: 12px; font-weight: 700; color: var(--text); font-family: var(--font-num, 'DM Mono', monospace); flex-shrink: 0; min-width: 54px; text-align: right; }
  .ci-remove { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 13px; padding: 0 2px; flex-shrink: 0; line-height: 1; }
  .ci-remove:hover { color: var(--red); }
  /* Row 2: qty controls left, unit price right */
  .ci-row2 {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 3px; padding-left: 22px; /* align under name, past emoji */
  }
  .ci-controls { display: flex; align-items: center; gap: 4px; }
  .ci-qty-btn {
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid var(--border2); background: var(--surface);
    cursor: pointer; font-size: 12px; display: flex;
    align-items: center; justify-content: center; transition: all 0.1s;
  }
  .ci-qty-btn:hover { background: var(--accent); border-color: var(--accent); color: white; }
  .ci-qty { font-size: 12px; font-weight: 700; width: 20px; text-align: center; font-family: var(--font-num, 'DM Mono', monospace); }
  .ci-price-area { display: flex; align-items: center; gap: 3px; }
  .ci-var-price-wrap { display: flex; align-items: center; gap: 3px; }
  .ci-var-price-input {
    width: 64px; padding: 1px 4px; font-size: 11px; font-family: var(--font-num, 'DM Mono', monospace);
    border: 1px solid var(--border); border-radius: 4px; text-align: right;
    background: var(--surface); color: var(--text); outline: none;
    -moz-appearance: textfield; appearance: textfield;   /* no spinner: it hid the cents ("29.9" for 29.95) */
  }
  .ci-var-price-input::-webkit-inner-spin-button, .ci-var-price-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .ci-var-price-input:focus { border-color: var(--accent); }
  .ci-var-price-label { font-size: 10px; }
  .ci-each-label { font-size: 9px; color: var(--text3); }
  /* Note: collapsed by default, revealed on click */
  .ci-note-wrap { display: none; margin-top: 3px; padding-left: 22px; }
  .ci-note-wrap.open { display: block; }
  .ci-note-toggle {
    font-size: 10px; color: var(--text3); cursor: pointer; background: none; border: none;
    padding: 0; margin-left: 8px; font-family: inherit;
  }
  .ci-note-toggle:hover { color: var(--accent); }
  .ci-note-input {
    width: 100%; padding: 2px 6px; font-size: 10px; border-radius: 4px;
    border: 1px dashed var(--border2); background: var(--bg);
    color: var(--text); outline: none; resize: none; line-height: 1.3;
    font-family: inherit; transition: border-color 0.15s;
  }
  .ci-note-input:focus { border-color: var(--accent); border-style: solid; }
  .ci-note-input::placeholder { color: var(--text3); font-style: italic; }
  /* Has-note indicator */
  .ci-has-note { font-size: 10px; color: var(--accent); margin-left: 4px; }

  /* CART FOOTER — ultra-compact sticky bottom */
  .cart-footer {
    padding: 6px 10px 8px; border-top: 1px solid var(--border);
    flex-shrink: 0; background: var(--surface);
  }

  .disc-type-toggle {
    display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
  }
  .disc-type-btn {
    padding: 3px 7px; font-size: 10px; font-weight: 700;
    border: none; background: var(--surface2); cursor: pointer;
    font-family: var(--font-ui, 'DM Sans', sans-serif); color: var(--text3);
    transition: all 0.15s;
  }
  .disc-type-btn.active { background: var(--accent); color: white; }
  .btn-clear-disc {
    padding: 2px 6px; background: none; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 10px; cursor: pointer;
    color: var(--text3); transition: all 0.15s; display: none;
  }
  .btn-clear-disc:hover { border-color: var(--red); color: var(--red); }

  .payment-methods { display: flex; gap: 4px; margin-bottom: 4px; flex-wrap: nowrap; }
  .pm-btn {
    flex: 1; padding: 6px 4px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface2);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.15s; text-align: center;
    min-width: 0; white-space: nowrap;
  }
  .pm-btn:hover, .pm-btn.active {
    background: var(--accent-light); border-color: var(--accent); color: var(--accent);
  }
  .pm-btn-square {
    flex: 1; padding: 6px 4px; border-radius: var(--radius-sm);
    border: 2px solid #22c55e; background: #f0fdf4;
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 11px; font-weight: 700;
    cursor: pointer; transition: all 0.15s; text-align: center; color: #166534;
    min-width: 0; white-space: nowrap;
  }
  .pm-btn-square:hover, .pm-btn-square.active {
    background: #22c55e; border-color: #16a34a; color: white;
  }
  .pm-btn-square.sq-disabled {
    border: 1px solid var(--border); background: var(--surface2);
    color: #9ca3af; cursor: default; opacity: 0.55; font-weight: 600;
  }
  .pm-btn-square.sq-disabled:hover { background: var(--surface2); color: #9ca3af; border-color: var(--border); }

  /* Responsive: narrow the checkout column on smaller screens */
  @media (max-width: 1100px) {
    .pos-right { width: 310px; }
  }
  @media (max-width: 900px) {
    .pos-right { width: 280px; }
    .pm-btn, .pm-btn-square { font-size: 10px; padding: 5px 3px; }
  }

  .btn-checkout {
    width: 100%; padding: 9px;
    background: var(--accent); color: white;
    border: none; border-radius: var(--radius);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
  }
  .btn-checkout:hover { background: var(--accent-hover); }
  .btn-checkout:disabled { opacity: 0.4; cursor: not-allowed; }

  /* ========== INVENTORY PAGE ========== */
  #page-inventory {
    flex-direction: column; padding: 20px; overflow-y: auto;
  }

  .page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
  }
  .page-title { font-size: 20px; font-weight: 700; }
  .page-subtitle { font-size: 13px; color: var(--text3); margin-top: 1px; }

  .btn-primary {
    padding: 9px 18px;
    background: var(--accent); color: white;
    border: none; border-radius: var(--radius-sm);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; gap: 6px;
  }
  .btn-primary:hover { background: var(--accent-hover); }

  .btn-secondary {
    padding: 9px 18px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; gap: 6px;
  }
  .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

  .inventory-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin-bottom: 20px;
  }
  .stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px;
  }
  .stat-label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; }
  .stat-value { font-size: 26px; font-weight: 700; margin: 4px 0; font-family: var(--font-num, 'DM Mono', monospace); }
  .stat-sub { font-size: 11px; color: var(--text3); }

  .table-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: auto;   /* was hidden: a table wider than the screen (a phone) was cut off, not scrollable */
  }
  /* ── Inventory page tabs ── */
  .inv-tabs-bar {
    display: flex; gap: 0; border-bottom: 2px solid var(--border);
    padding: 0 20px; background: var(--surface); margin-bottom: 0;
  }
  .inv-tab {
    padding: 10px 18px; border: none; background: none; cursor: pointer;
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 13px; font-weight: 500;
    color: var(--text3); border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color .15s;
    display: flex; align-items: center; gap: 6px;
  }
  .inv-tab:hover { color: var(--text); }
  .inv-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
  .inv-tab .inv-tab-badge {
    background: #d97706; color: #fff; font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center;
  }
  .inv-tab.active .inv-tab-badge { background: var(--accent); }
  /* ── Awaiting stock panel ── */
  .awaiting-group-header {
    padding: 8px 16px; background: #fffbeb; border-bottom: 1px solid #fde68a;
    font-size: 11px; font-weight: 700; color: #92400e; text-transform: uppercase;
    letter-spacing: 0.6px; display: flex; align-items: center; gap: 8px;
  }
  .awaiting-group-header .agh-count {
    background: #fbbf24; color: #78350f; border-radius: 10px;
    padding: 1px 7px; font-size: 10px;
  }
  /* ── Restock grouped sort headers ── */
  .rs-group-hdr {
    background: var(--surface2); border-bottom: 1px solid var(--border);
  }
  .rs-group-hdr td {
    padding: 7px 12px; font-size: 11px; font-weight: 700; color: var(--text2);
    text-transform: uppercase; letter-spacing: 0.5px;
  }
  .rs-group-hdr.rs-brand-hdr td {
    background: var(--accent-light); color: var(--accent); font-size: 12px;
    padding: 8px 14px;
  }
  .rs-group-hdr.rs-model-hdr td {
    padding: 6px 14px 6px 28px; background: var(--surface2); color: var(--text2);
    font-size: 11px;
  }
  .table-toolbar {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    display: flex; gap: 10px; align-items: center;
  }
  .table-toolbar input {
    flex: 1; padding: 7px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 13px; outline: none;
  }
  .table-toolbar input:focus { border-color: var(--accent); }

  table { width: 100%; border-collapse: collapse; }
  th {
    padding: 10px 16px; text-align: left;
    font-size: 11px; font-weight: 600; color: var(--text3);
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border); background: var(--surface2);
  }
  td {
    padding: 11px 16px; font-size: 13px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: var(--surface2); }

  .badge {
    display: inline-flex; align-items: center;
    padding: 3px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600;
  }

  .tbl-actions { display: flex; gap: 4px; }
  .sort-th {
    cursor: pointer; user-select: none; white-space: nowrap;
  }
  .sort-th:hover { color: var(--accent); }
  .sort-th .sort-icon { margin-left: 4px; font-size: 10px; opacity: 0.4; }
  .sort-th.sort-asc .sort-icon, .sort-th.sort-desc .sort-icon { opacity: 1; color: var(--accent); }
  .sort-th.sort-asc .sort-icon::after  { content: ' ↑'; }
  .sort-th.sort-desc .sort-icon::after { content: ' ↓'; }
  .sort-th:not(.sort-asc):not(.sort-desc) .sort-icon::after { content: ' ↕'; }
  .tbl-btn {
    padding: 4px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface2);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 11px; font-weight: 500;
    cursor: pointer; transition: all 0.12s;
  }
  .tbl-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
  .tbl-btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
  #txnp-tbody tr:hover { background: var(--accent-light) !important; }
  #txnp-tbody tr { transition: background 0.1s; }
  #rlf-tbody tr:hover { background: var(--accent-light) !important; }
  #rlf-tbody tr { transition: background 0.1s; }

  /* ========== CUSTOMERS PAGE ========== */
  /* ========== REPAIR MANAGER PAGE ========== */
  #page-customers {
    flex-direction: column; padding: 0; overflow: hidden;
  }

  /* Full-width layout like Reports page */
  .repair-layout {
    display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
  }

  /* TOP — header with title + tabs */
  .repair-list-panel {
    flex-shrink: 0; border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; background: var(--surface);
    width: 100%;
  }
  .repair-list-header {
    padding: 16px; border-bottom: none;
    display: flex; flex-direction: column; gap: 10px;
  }
  .repair-list-title { font-size: 16px; font-weight: 700; }
  .repair-list-search {
    padding: 7px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-size: 13px; outline: none; width: 100%;
  }
  .repair-list-search:focus { border-color: var(--accent); }
  /* Pricing matrix — #rp-table-container intentionally has NO overflow-x of
     its own (that would make it a second scroll container nested inside
     #rp-table-view, and the sticky header/left-column would anchor to it
     instead of the real scrolling ancestor, since it never actually grows a
     scrollbar itself — same bug class already fixed in the Repair Parts
     matrix; see that file's own note). #rp-table-view (inline style,
     overflow:auto) is the one true scroller, both axes. */
  #rp-table-container table th, #rp-table-container table td { white-space: nowrap; }
  @media (max-width: 900px) {
    #rp-quote-view > div { grid-template-columns: 1fr !important; }
  }
  .repair-status-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
  }
  .rst-btn {
    padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 11px; font-weight: 600;
    cursor: pointer; background: var(--surface2); color: var(--text3);
    transition: all 0.12s;
  }
  .rst-btn.active, .rst-btn:hover { background: var(--accent); border-color: var(--accent); color: white; }
  .repair-list-body { flex: 1; overflow-y: auto; }
  .repair-job-item {
    padding: 13px 16px; border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background 0.1s; position: relative;
  }
  .repair-job-item:hover { background: var(--surface2); }
  .repair-job-item.selected { background: var(--accent-light); border-left: 3px solid var(--accent); }
  .rji-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
  .rji-name { font-size: 13px; font-weight: 700; color: var(--text); }
  .rji-device { font-size: 11px; color: var(--text3); margin-top: 2px; }
  .rji-date { font-size: 10px; color: var(--text3); white-space: nowrap; }
  .rji-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
  .rji-repair { font-size: 11px; color: var(--text2); }
  .repair-empty { padding: 40px 20px; text-align: center; color: var(--text3); font-size: 13px; }

  /* Status badge */
  /* Repair state machine stepper (js/repairs/repair-states.js) */
  .rs-stepper { display:flex; gap:4px; flex-wrap:wrap; margin:8px 0; }
  .rs-step { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; font-size:11px; font-weight:700; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text3); font-family:inherit; }
  .rs-step .rs-dot { font-size:11px; }
  .rs-step.rs-done { color:var(--text2); background:var(--surface2); }
  .rs-step.rs-current { color:#fff; background:var(--rs-c); border-color:var(--rs-c); }
  .rs-step.rs-off { opacity:.45; }
  .rs-step.rs-can { cursor:pointer; color:var(--text); border-color:var(--rs-c); }
  .rs-step.rs-can:hover { background:var(--rs-c); color:#fff; }
  .rs-step:disabled { cursor:default; }
  .rs-badge { font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; color:#fff; background:var(--rs-c); white-space:nowrap; }
  #rdf-stage-bar .rs-stepper { margin:0; }
  .rdf-locked-note { font-size:11px; font-weight:700; color:#92400e; background:#fef3c7; border:1px solid #f59e0b; border-radius:8px; padding:6px 10px; margin:6px 0; }
  .status-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
  }
  .status-new       { background: #EFF6FF; color: #1D4ED8; }
  .status-diagnosing{ background: #FEF3C7; color: #B45309; }
  .status-in-repair { background: #FFF7ED; color: #C2410C; }
  .status-waiting   { background: #F5F3FF; color: #6D28D9; }
  .status-ready     { background: #DCFCE7; color: #15803D; }
  .status-collected { background: #F0FDF4; color: #166534; }
  .status-cancelled { background: #FEF2F2; color: #B91C1C; }
  /* Special Order statuses */
  .status-so-deposit  { background: #FFF7ED; color: #C2410C; }
  .status-so-ordered  { background: #EFF6FF; color: #1D4ED8; }
  .status-so-arrived  { background: #F5F3FF; color: #6D28D9; }
  .status-so-repair   { background: #FEF3C7; color: #B45309; }
  .status-so-ready    { background: #DCFCE7; color: #15803D; }
  .status-so-collected{ background: #F0FDF4; color: #166534; }

  /* Warranty Claims */
  .wc-panel { display:flex; flex-direction:column; height:100%; overflow:hidden; background:var(--bg); }
  .wc-header { padding:14px 20px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .wc-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:16px; }
  .wc-search-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
  .wc-results { display:flex; flex-direction:column; gap:6px; margin-top:10px; max-height:200px; overflow-y:auto; }
  .wc-result-item { padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; background:var(--surface); transition:all 0.15s; display:flex; justify-content:space-between; align-items:center; }
  .wc-result-item:hover, .wc-result-item.selected { border-color:var(--accent); background:var(--accent-light); }
  .wc-result-name { font-size:13px; font-weight:700; }
  .wc-result-meta { font-size:11px; color:var(--text3); margin-top:2px; }
  .wc-claim-form { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
  .wc-claim-header { padding:12px 16px; background:var(--accent-light); border-bottom:1px solid var(--accent); display:flex; justify-content:space-between; align-items:center; }
  .wc-section { padding:16px; border-bottom:1px solid var(--border); }
  .wc-section:last-child { border-bottom:none; }
  .wc-section-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:var(--text3); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
  .wc-job-card { background:var(--surface2); border-radius:var(--radius-sm); padding:12px 14px; font-size:12px; line-height:1.8; }
  .wc-job-row { display:flex; gap:8px; margin-bottom:4px; }
  .wc-job-label { font-weight:700; color:var(--text3); min-width:120px; }
  .wc-excl-list { display:flex; flex-direction:column; gap:6px; }
  .wc-excl-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface2); cursor:pointer; }
  .wc-excl-item.flagged { border-color:#ef4444; background:#fee2e2; }
  .wc-excl-item input[type=checkbox] { width:15px; height:15px; accent-color:#ef4444; flex-shrink:0; }
  .wc-excl-label { font-size:12px; color:var(--text2); flex:1; }
  .wc-outcome { display:flex; gap:8px; flex-wrap:wrap; }
  .wc-outcome-btn { flex:1; min-width:100px; padding:12px; border-radius:var(--radius-sm); border:2px solid var(--border); background:var(--surface2); cursor:pointer; text-align:center; font-weight:700; font-size:13px; transition:all 0.15s; }
  .wc-outcome-btn:hover { border-color:var(--accent); }
  .wc-outcome-btn.approved { border-color:#16a34a; background:#dcfce7; color:#15803d; }
  .wc-outcome-btn.denied   { border-color:#dc2626; background:#fee2e2; color:#b91c1c; }
  .wc-outcome-btn.pending  { border-color:#d97706; background:#fef3c7; color:#b45309; }
  .wc-history { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
  .wc-history-header { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
  .wc-claim-row { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; gap:12px; font-size:12px; }
  .wc-claim-row:last-child { border-bottom:none; }
  .status-wc-approved { background:#dcfce7; color:#15803d; }
  .status-wc-denied   { background:#fee2e2; color:#b91c1c; }
  .status-wc-pending  { background:#fef3c7; color:#b45309; }

  /* Informed Consent */
  .consent-card { border-radius:var(--radius); border:2px solid var(--accent); overflow:hidden; }
  .consent-header { padding:12px 16px; background:var(--accent); color:white; display:flex; align-items:center; gap:8px; }
  .consent-points { padding:0; margin:0; list-style:none; }
  .consent-point { display:flex; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border); align-items:flex-start; }
  .consent-point:last-child { border-bottom:none; }
  .consent-icon { font-size:18px; flex-shrink:0; width:24px; text-align:center; }
  .consent-text { flex:1; }
  .consent-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:2px; }
  .consent-desc  { font-size:11px; color:var(--text3); line-height:1.5; }
  .consent-initial { flex-shrink:0; }
  .consent-initial input { width:44px; text-align:center; padding:4px 6px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12px; font-weight:700; text-transform:uppercase; background:var(--surface2); }
  .consent-initial input:focus { border-color:var(--accent); outline:none; }
  .consent-sign-row { display:flex; gap:12px; padding:14px 16px; background:var(--surface2); align-items:center; flex-wrap:wrap; }

  /* Special Order tracker */
  .so-tracker { display:flex; flex-direction:column; height:100%; }
  .so-tracker-header { padding:14px 20px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
  .so-pipeline { display:flex; gap:0; overflow-x:auto; border-bottom:1px solid var(--border); background:var(--surface); padding:0 16px; flex-shrink:0; }
  .so-col-btn { padding:10px 16px; font-size:12px; font-weight:700; cursor:pointer; border:none; background:none; color:var(--text3); border-bottom:3px solid transparent; white-space:nowrap; transition:all 0.15s; }
  .so-col-btn:hover { color:var(--text); background:var(--surface2); }
  .so-col-btn.active { color:var(--accent); border-bottom-color:var(--accent); background:var(--accent-light); }
  .so-col-btn .so-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:10px; font-size:10px; font-weight:800; margin-left:5px; background:var(--accent); color:white; }
  .so-col-btn .so-badge.urgent { background:#ef4444; }
  .so-body { flex:1; overflow-y:auto; padding:16px; }
  .so-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:all 0.15s; position:relative; }
  .so-card:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,0.08); }
  .so-card.urgent-card { border-left:4px solid #ef4444; }
  .so-card.warning-card { border-left:4px solid #f59e0b; }
  .so-card.selected-card { border-color:var(--accent); background:var(--accent-light); }
  .so-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
  .so-card-name { font-size:14px; font-weight:700; color:var(--text); }
  .so-card-device { font-size:12px; color:var(--text2); margin-top:2px; }
  .so-card-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; font-size:11px; }
  .so-meta-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:var(--surface2); border-radius:10px; color:var(--text2); font-weight:500; }
  .so-meta-chip.red { background:#fee2e2; color:#b91c1c; font-weight:700; }
  .so-meta-chip.amber { background:#fef3c7; color:#b45309; font-weight:700; }
  .so-meta-chip.green { background:#dcfce7; color:#15803d; font-weight:700; }
  .so-actions { display:flex; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); flex-wrap:wrap; }
  .so-action-btn { padding:5px 12px; font-size:11px; font-weight:700; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface2); color:var(--text2); cursor:pointer; white-space:nowrap; }
  .so-action-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
  .so-action-btn.primary { background:var(--accent); color:white; border-color:var(--accent); }
  .so-action-btn.primary:hover { background:var(--accent-hover); }
  .so-empty { text-align:center; padding:60px 20px; color:var(--text3); }
  .so-empty-icon { font-size:40px; margin-bottom:12px; }
  .so-stats-bar { display:flex; gap:10px; flex-wrap:wrap; padding:12px 16px; background:var(--surface2); border-bottom:1px solid var(--border); }
  .so-stat { text-align:center; padding:8px 16px; background:var(--surface); border-radius:var(--radius-sm); border:1px solid var(--border); flex:1; min-width:80px; }
  .so-stat-val { font-size:20px; font-weight:800; color:var(--accent); }
  .so-stat-lbl { font-size:10px; color:var(--text3); font-weight:600; text-transform:uppercase; }

  /* Content area — fills remaining height */
  .repair-detail-panel {
    flex: 1; min-width: 0; overflow: hidden; background: var(--bg);
    display: flex; flex-direction: column;
  }
  .repair-detail-header {
    padding: 14px 20px; background: var(--surface);
    border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
  }
  .repair-detail-title { font-size: 15px; font-weight: 700; }
  .repair-detail-subtitle { font-size: 12px; color: var(--text3); margin-top: 2px; }
  .repair-detail-body {
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 14px;
  }

  /* Section card */
  .repair-section {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
  }
  .repair-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; cursor: pointer; user-select: none;
    border-bottom: 1px solid var(--border); background: var(--surface2);
  }
  .repair-section-header:hover { background: var(--surface2); }
  .repair-section-header.open { border-bottom-color: var(--border); }
  .rsh-left { display: flex; align-items: center; gap: 10px; }
  .rsh-icon { font-size: 18px; width: 28px; text-align: center; }
  .rsh-title { font-size: 13px; font-weight: 700; }

  /* ── Flat form — core sections always open (handled by base CSS rules above) ── */
  /* Core section headers: non-clickable, no chevron */
  #rsec-customer .repair-section-header,
  #rsec-device .repair-section-header,
  #rsec-request .repair-section-header,
  #rsec-quote .repair-section-header,
  #rsec-pre .repair-section-header,
  #rsec-post .repair-section-header,
  #rsec-addnotes .repair-section-header {
    cursor: default; padding: 6px 16px;
  }
  #rsec-customer .repair-section-header .rsh-chevron,
  #rsec-device .repair-section-header .rsh-chevron,
  #rsec-request .repair-section-header .rsh-chevron,
  #rsec-quote .repair-section-header .rsh-chevron,
  #rsec-pre .repair-section-header .rsh-chevron,
  #rsec-post .repair-section-header .rsh-chevron,
  #rsec-addnotes .repair-section-header .rsh-chevron { display: none; }
  /* Hide toggles on core sections */
  #rsec-customer .section-toggle-wrap,
  #rsec-device .section-toggle-wrap,
  #rsec-request .section-toggle-wrap,
  #rsec-quote .section-toggle-wrap,
  #rsec-pre .section-toggle-wrap,
  #rsec-post .section-toggle-wrap,
  #rsec-addnotes .section-toggle-wrap { display: none; }

  /* Hide Quick/Full mode toggle — single mode now */
  #rdf-mode-toggle { display: none !important; }

  /* ── NEW: Flat form — hide non-essential fields by default ── */
  /* Email — only 1% use it */
  #rdf-email { display: none; }
  #rdf-email + .form-label, #rdf-email ~ * { }
  /* ETA — removed per design */
  #rdf-eta-time { display: none; }
  #rdf-eta-time + option, label[for="rdf-eta-time"] { display: none; }
  /* Device variant — model name is enough */
  #rdf-device-variant { display: none; }
  /* Hide label before hidden fields */
  .rdf-hide-field { display: none !important; }

  /* Make repair form full-width when open */
  #repair-job-form {
    max-width: 1100px; margin: 0 auto; width: 100%;
    flex-direction: column;  /* THIS WAS THE MISSING LINE — flex defaults to row! */
  }
  .repair-detail-body {
    padding: 10px 20px; gap: 6px;
    display: flex; flex-direction: column;
  }
  /* Reorder sections: core first, then More Options, then non-essential */
  #rsec-customer { order: 1; }
  #rsec-device { order: 2; }
  #rsec-request { order: 3; }
  #rsec-quote { order: 4; }
  #rsec-pre { order: 5; }
  #rsec-post { order: 6; }
  #rsec-addnotes { order: 7; }
  #rdf-more-options-divider { order: 8; }
  #rsec-photos { order: 9; }
  #rsec-minimal { order: 10; }
  #rsec-disclaimer { order: 11; }
  #rsec-data { order: 12; }
  #rsec-warranty { order: 13; }
  #rsec-collection { order: 14; }
  #rsec-signature { order: 15; }

  /* Hide left list panel when form is open */
  #repair-job-form ~ .repair-list-panel,
  .repair-form-active .repair-list-panel { display: none !important; }

  /* ── Cleaner form section spacing ── */
  .repair-section { margin-bottom: 0; overflow: hidden; }
  .repair-detail-body > .repair-section + .repair-section { margin-top: 0; }

  /* Non-essential sections styled subtly */
  #rsec-minimal, #rsec-disclaimer, #rsec-data, #rsec-warranty,
  #rsec-collection, #rsec-signature, #rsec-photos {
    border-color: var(--border); opacity: 0.9;
  }

  /* Customer lookup banner */
  .cust-lookup-banner { display: none; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; margin-top: 6px; }
  .cust-lookup-banner.found { display: flex; background: #eff6ff; border: 1px solid var(--accent); color: var(--accent); gap: 10px; align-items: center; }
  .cust-lookup-banner.warning { display: flex; background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; gap: 10px; align-items: center; }
  .cust-lookup-banner .clb-stats { font-weight: 700; }
  .cust-lookup-banner .clb-detail { font-size: 11px; opacity: 0.8; }
  .rsh-desc  { font-size: 11px; color: var(--text3); margin-top: 1px; }
  .rsh-chevron { font-size: 12px; color: var(--text3); transition: transform 0.2s; }
  .rsh-chevron.open { transform: rotate(180deg); }

  /* Core sections: body ALWAYS visible (no collapse) */
  #rsec-customer .repair-section-body,
  #rsec-device .repair-section-body,
  #rsec-request .repair-section-body,
  #rsec-quote .repair-section-body,
  #rsec-pre .repair-section-body,
  #rsec-post .repair-section-body,
  #rsec-addnotes .repair-section-body {
    display: block;
    padding: 10px 16px;
  }

  /* Non-core sections: collapsible (hidden by default, shown when open) */
  #rsec-photos .repair-section-body,
  #rsec-minimal .repair-section-body,
  #rsec-disclaimer .repair-section-body,
  #rsec-data .repair-section-body,
  #rsec-warranty .repair-section-body,
  #rsec-collection .repair-section-body,
  #rsec-signature .repair-section-body {
    display: none;
    padding: 10px 16px;
  }
  #rsec-photos .repair-section-body.open,
  #rsec-minimal .repair-section-body.open,
  #rsec-disclaimer .repair-section-body.open,
  #rsec-data .repair-section-body.open,
  #rsec-warranty .repair-section-body.open,
  #rsec-collection .repair-section-body.open,
  #rsec-signature .repair-section-body.open {
    display: block;
  }

  /* Section enable/disable toggle */
  .repair-section.section-disabled { opacity: 0.45; }
  .repair-section.section-disabled .repair-section-header { cursor: default; }
  .section-toggle-wrap {
    display: flex; align-items: center; gap: 8px; margin-right: 10px;
    flex-shrink: 0;
  }
  .section-toggle-label { font-size: 10px; color: var(--text3); font-weight: 500; user-select:none; }
  .section-toggle {
    position: relative; width: 32px; height: 18px; flex-shrink: 0;
  }
  .section-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
  .section-toggle-slider {
    position: absolute; inset: 0; border-radius: 10px;
    background: var(--border2); cursor: pointer; transition: background 0.2s;
  }
  .section-toggle-slider::before {
    content: ''; position: absolute;
    width: 12px; height: 12px; border-radius: 50%;
    left: 3px; top: 3px; background: white;
    transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .section-toggle input:checked + .section-toggle-slider { background: var(--green); }
  .section-toggle input:checked + .section-toggle-slider::before { transform: translateX(14px); }
  .section-toggle.required .section-toggle-slider { background: var(--accent); cursor: not-allowed; opacity: 0.7; }

  .restock-period-btn {
    padding: 5px 12px; border-radius: calc(var(--radius) - 2px);
    border: none; background: transparent; font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-size: 12px; font-weight: 500; color: var(--text2); cursor: pointer;
    transition: all 0.15s;
  }
  .restock-period-btn:hover { color: var(--text); }
  .restock-period-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
  .restock-qty-input {
    width: 56px; padding: 4px 6px; border: 1px solid var(--border2);
    border-radius: var(--radius-sm); font-family: var(--font-num, 'DM Mono', monospace);
    font-size: 12px; text-align: center; background: var(--surface2);
  }
  .restock-qty-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
  .stock-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 700;
  }
  .stock-ok   { background: var(--green-light); color: var(--green); }
  .stock-low  { background: var(--amber-light);  color: var(--amber); }
  .stock-out  { background: var(--red-light);    color: var(--red); }

  .restock-status-select {
    padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border2);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 11px; font-weight: 600;
    cursor: pointer; width: 100%; max-width: 200px; background: var(--surface);
  }
  .restock-status-select.s-pending      { color: var(--text2);  background: var(--surface2); }
  .restock-status-select.s-awaiting     { color: #d97706;        background: #fffbeb; border-color: #fbbf24; }
  .restock-status-select.s-supplier-out { color: var(--red);     background: var(--red-light); border-color: var(--red); }
  .restock-status-select.s-restocked    { color: var(--green);   background: var(--green-light); border-color: var(--green); }
  .restock-row-done td { opacity: 0.38; }
  .restock-row-done .restock-status-select { opacity: 1 !important; }
  .restock-row-done .restock-row-cb       { opacity: 1 !important; }

  .restock-status-select {
    padding: 5px 8px; border: 1px solid var(--border2); border-radius: var(--radius-sm);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 12px; font-weight: 500;
    background: var(--surface); color: var(--text); cursor: pointer;
    min-width: 180px; transition: border-color 0.15s;
  }
  .restock-status-select:focus { outline: none; border-color: var(--accent); }
  /* Checklist */
  .check-list { display: flex; flex-direction: column; gap: 8px; }
  .check-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface2);
    transition: all 0.12s;
  }
  .check-item.checked { background: var(--green-light); border-color: #bbf7d0; }
  .check-item.failed  { background: var(--red-light);   border-color: #fecaca; }
  .check-item input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--green); }
  .check-label { flex: 1; font-size: 13px; }
  .check-fail-btn {
    padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border);
    background: var(--surface); font-size: 11px; font-weight: 600; cursor: pointer;
    color: var(--red); font-family: var(--font-ui, 'DM Sans', sans-serif);
  }
  .check-fail-btn:hover { background: var(--red-light); border-color: var(--red); }
  .check-note { width: 100%; margin-top: 6px; padding: 6px 10px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-ui, 'DM Sans', sans-serif); outline: none; }
  .check-note:focus { border-color: var(--accent); }
  .add-check-row {
    display: flex; gap: 8px; margin-top: 10px;
  }
  .add-check-row input {
    flex: 1; padding: 7px 10px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-ui, 'DM Sans', sans-serif); outline: none;
  }
  .add-check-row input:focus { border-color: var(--accent); }

  /* Signature pad */
  .sig-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: white; }
  .sig-canvas { display: block; touch-action: none; cursor: crosshair; }
  .sig-toolbar {
    display: flex; gap: 8px; padding: 8px 10px; background: var(--surface2);
    border-top: 1px solid var(--border);
  }

  /* No-job placeholder */
  .repair-no-job {
    display: none !important; /* replaced by full-width tab panels */
  }
  .repair-no-job-icon { font-size: 56px; }
  .repair-list-body { display: none !important; } /* old narrow list — replaced by full-width table */

  /* Detail action bar */
  .repair-detail-footer {
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));   /* clear of the iPhone's home bar (L67) */ background: var(--surface);
    border-top: 1px solid var(--border); position: sticky; bottom: 0; z-index: 10;
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  }

  /* Job ID tag */
  .job-id-tag {
    font-size: 11px; font-weight: 700; color: var(--text3);
    font-family: var(--font-num, 'DM Mono', monospace);
  }

  /* Customer info quick bar */
  .repair-cust-bar {
    display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
    padding: 10px 14px; background: var(--surface2);
    border-radius: var(--radius-sm); font-size: 12px;
  }
  .rcb-item { display: flex; gap: 6px; align-items: center; color: var(--text2); }
  .rcb-label { color: var(--text3); font-weight: 600; }

  /* Price fields */
  .price-row { display: flex; gap: 12px; flex-wrap: wrap; }
  .price-field { flex: 1; min-width: 140px; }
  .price-field label { display: block; font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }

  /* Disclaimer text */
  .disclaimer-box {
    background: var(--amber-light); border: 1px solid #fde68a;
    border-radius: var(--radius-sm); padding: 12px 14px;
    font-size: 12px; color: #78350f; line-height: 1.6;
  }
  .disclaimer-edit {
    width: 100%; min-height: 80px; padding: 10px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-ui, 'DM Sans', sans-serif);
    outline: none; resize: vertical;
  }
  .disclaimer-edit:focus { border-color: var(--accent); }

  /* Status select */
  .status-select {
    padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 13px; font-weight: 600;
    outline: none; cursor: pointer; background: var(--surface);
  }

  /* ========== REPORTS PAGE ========== */
  /* ===== REPORTS PAGE ===== */

  #page-restock {
    flex-direction: column; overflow-y: auto;
  }
  #page-reports {
    flex-direction: column; overflow: hidden;
  }
  .rpt-shell {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
  }
  /* Top controls bar */
  .rpt-topbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 20px 0; flex-shrink: 0;
  }
  .rpt-title { font-size: 18px; font-weight: 800; flex: 1; }
  .rpt-date-btn {
    padding: 7px 13px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--surface);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 12px; font-weight: 600;
    cursor: pointer; color: var(--text2); transition: all 0.15s;
  }
  .rpt-date-btn.active, .rpt-date-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
  .rpt-custom-range {
    display: none; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 12px; background: var(--surface2);
    border: 1.5px solid var(--accent); border-radius: var(--radius-sm);
    margin-top: 2px;
  }
  .rpt-custom-range.open { display: flex; }
  .rpt-custom-range label { font-size: 11px; font-weight: 600; color: var(--text3); }
  .rpt-custom-range input[type="date"] {
    padding: 5px 9px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 12px;
    background: var(--surface); color: var(--text); outline: none; cursor: pointer;
  }
  .rpt-custom-range input[type="date"]:focus { border-color: var(--accent); }
  .rpt-range-sep { font-size: 12px; color: var(--text3); font-weight: 600; }
  .rpt-apply-btn {
    padding: 5px 14px; background: var(--accent); color: white; border: none;
    border-radius: var(--radius-sm); font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-size: 12px; font-weight: 700; cursor: pointer;
  }
  .rpt-apply-btn:hover { opacity: 0.88; }
  .rpt-range-label {
    font-size: 11px; color: var(--accent); font-weight: 700;
    padding: 4px 10px; background: var(--accent-light);
    border-radius: 20px; white-space: nowrap;
  }
  .rpt-export-btn {
    padding: 7px 14px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--surface2);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 12px; font-weight: 600;
    cursor: pointer; color: var(--text2); transition: all 0.15s;
  }
  .rpt-export-btn:hover { border-color: var(--accent); color: var(--accent); }
  /* Nav tabs */
  .rpt-nav {
    display: flex; gap: 2px; padding: 10px 20px 0;
    border-bottom: 2px solid var(--border); flex-shrink: 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .rpt-nav::-webkit-scrollbar { display: none; }
  .rpt-tab {
    padding: 8px 15px; font-size: 12px; font-weight: 600;
    color: var(--text3); cursor: pointer; border-bottom: 3px solid transparent;
    margin-bottom: -2px; white-space: nowrap; border-radius: 6px 6px 0 0;
    transition: all 0.15s; background: none; border-top: none; border-left: none; border-right: none;
    font-family: var(--font-ui, 'DM Sans', sans-serif);
  }
  .rpt-tab:hover { color: var(--text); background: var(--surface2); }
  .rpt-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-light); }
  /* Square payment screen (js/pos/square-terminal.js): a card on wide screens, a full sheet on phones */
  .sq-pay-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; }
  .sq-pay-card { background:var(--bg); border-radius:18px; padding:28px 24px; width:400px; max-width:100%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.3); }
  .sq-pay-icon { font-size:44px; margin-bottom:8px; }
  .sq-pay-title { font-size:19px; font-weight:800; }
  .sq-pay-amount { font-family:var(--font-num, 'DM Mono',monospace); font-size:36px; font-weight:900; color:var(--accent); margin:10px 0 2px; }
  .sq-pay-term { font-size:12px; color:var(--text3); margin-bottom:12px; }
  .sq-pay-spin { width:44px; height:44px; border:4px solid var(--border); border-top-color:var(--accent); border-radius:50%; margin:6px auto 12px; animation:sqSpin 1s linear infinite; }
  @keyframes sqSpin { to { transform:rotate(360deg); } }
  .sq-pay-msg { font-size:13px; color:var(--text2); background:var(--surface2); border-radius:10px; padding:10px 12px; margin:8px 0 4px; line-height:1.45; }
  .sq-pay-actions { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
  .sq-pay-btn { min-height:52px; border-radius:12px; border:none; background:var(--accent); color:#fff; font-size:16px; font-weight:800; cursor:pointer; }
  .sq-pay-btn.secondary { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
  @media (max-width: 767px) { .sq-pay-overlay { padding:0; align-items:flex-end; } .sq-pay-card { width:100%; border-radius:22px 22px 0 0; padding:26px 18px calc(18px + env(safe-area-inset-bottom)); } }

  /* Drag-to-reorder visuals — see dtabAttrs()/dtabDragStart() etc. in js/core/ui-kit.js.
     Generic: applies inside any [data-dtab-container] bar, whatever tab class it uses. */
  /* touch: a held tab is picked up (ui-kit.js), so no text selection or callout menu on it */
  [data-dtab-id] { cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  [data-dtab-container] [data-dtab-id].drag-over { border-left: 3px solid var(--accent); margin-left: -3px; }
  [data-dtab-container] [data-dtab-id].dragging { opacity: 0.35; background: var(--accent-light); }
  /* Scrollable content area */
  .rpt-body {
    flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px;
  }
  .rpt-panel { display: none; flex-direction: column; gap: 16px; }
  .rpt-panel.active { display: flex; }
  /* KPI row */
  .kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
  }
  .kpi-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px;
  }
  .kpi-label { font-size: 11px; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
  .kpi-val { font-size: 26px; font-weight: 700; font-family: var(--font-num, 'DM Mono', monospace); margin: 6px 0 2px; }
  .kpi-change { font-size: 11px; font-weight: 600; }
  .kpi-change.up { color: var(--green); }
  .kpi-change.down { color: var(--red); }
  .kpi-change.neutral { color: var(--text3); }
  /* Cards */
  .rpt-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
  }
  .rpt-card-title {
    font-size: 13px; font-weight: 700; color: var(--text3);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .rpt-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .rpt-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 700px) { .rpt-2col, .rpt-3col { grid-template-columns: 1fr; } }
  /* Bar chart */
  .bar-chart { display: flex; align-items: flex-end; gap: 5px; height: 140px; }
  .bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
  .bar { width: 100%; border-radius: 4px 4px 0 0; transition: all 0.3s; cursor: pointer; min-height: 4px; }
  .bar:hover { filter: brightness(0.85); }
  .bar-label { font-size: 9px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bar-val { font-size: 9px; color: var(--text3); }
  /* Horizontal bar (for rankings) */
  .hbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .hbar-rank { font-size: 11px; font-weight: 700; color: var(--text3); width: 18px; text-align: right; flex-shrink: 0; }
  .hbar-label { flex: 1; font-size: 12px; font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hbar-track { width: 120px; height: 7px; background: var(--surface2); border-radius: 4px; overflow: hidden; flex-shrink: 0; }
  .hbar-fill { height: 100%; border-radius: 4px; background: var(--accent); }
  .hbar-val { font-size: 11px; font-weight: 700; font-family: var(--font-num, 'DM Mono', monospace); width: 56px; text-align: right; flex-shrink: 0; }
  /* Donut chart */
  .donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .donut-svg { flex-shrink: 0; }
  .donut-legend { display: flex; flex-direction: column; gap: 8px; }
  .donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
  .donut-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  /* Table */
  .rpt-table-wrap { overflow-x: auto; }
  .rpt-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .rpt-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
  .rpt-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .rpt-table tr[onclick]:hover { background: var(--accent-light) !important; }
  .rpt-table tr:last-child td { border-bottom: none; }
  .rpt-table tr:hover td { background: var(--surface2); }
  /* Stat comparison */
  .stat-compare { display: flex; gap: 4px; align-items: center; font-size: 11px; }
  .stat-up { color: var(--green); } .stat-down { color: var(--red); }
  /* Empty */
  .rpt-empty { text-align: center; padding: 40px 20px; color: var(--text3); font-size: 13px; }

  /* ========== MODAL ========== */
  .modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.4); z-index: 1000;
    align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
  }
  .modal-overlay.open { display: flex; }

  /* ── Receive supplier order (js/inventory/supplier-receive.js) ── */
  .sr-empty { padding:28px 12px; text-align:center; font-size:13px; color:var(--text3); }
  .sr-order { border:1px solid var(--border); border-radius:8px; margin-bottom:12px; overflow:hidden; }
  .sr-order.done { opacity:.6; }
  .sr-order-head { padding:8px 12px; background:var(--surface2, #f8fafc); font-size:12px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .sr-tag { font-size:11px; font-weight:600; padding:2px 7px; border-radius:10px; }
  .sr-tag.ok { background:#dcfce7; color:#166534; }
  .sr-tag.new { background:#fef3c7; color:#92400e; }
  .sr-tag.skip { background:#e5e7eb; color:#374151; }
  .sr-tag.done { background:#dbeafe; color:#1e40af; }
  .sr-tag.ordered { background:#fef3c7; color:#92400e; }
  /* Received orders (js/inventory/received-orders.js) */
  .sro-card { border:1px solid var(--border); border-radius:10px; margin-bottom:8px; overflow:hidden; }
  .sro-head { padding:9px 12px; font-size:12px; cursor:pointer; background:var(--surface2); }
  .sro-head.undone { color:var(--text3); }
  .sro-edited { color:#92400e; font-weight:600; }
  .sro-qty { width:64px; padding:4px 6px; border:1px solid var(--border); border-radius:6px; }
  .sro-edit { font-size:10px; color:#92400e; margin-top:2px; }
  .sro-move { margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
  .sro-move input, .sro-move select { padding:4px 6px; border:1px solid var(--border); border-radius:6px; font-size:12px; background:var(--surface); color:var(--text); max-width:240px; }
  .sro-actions { padding:8px 12px; border-top:1px solid var(--border); display:flex; gap:6px; flex-wrap:wrap; }
  /* Draft purchase orders (js/inventory/purchase-orders.js) */
  .po-card { border:1px solid var(--border); border-radius:10px; margin-bottom:12px; overflow:hidden; }
  .po-card.po-unassigned { border-color:#f59e0b; }
  .po-head { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; padding:8px 12px; background:var(--surface2); font-size:13px; }
  .po-head span { margin-left:auto; font-size:11px; color:var(--text3); }
  .po-lines { width:100%; border-collapse:collapse; font-size:12px; }
  .por-file { margin-bottom:12px; }
  .por-po { display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
  .por-po.overdue { border-color:var(--red); }
  .por-sub { font-size:11px; color:var(--text3); margin-top:2px; }
  .por-late { background:var(--red); color:#fff; border-radius:6px; padding:1px 6px; font-size:10px; font-weight:700; }
  .por-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; margin-bottom:10px; }
  .por-head #por-scan { max-width:240px; margin-left:auto; }
  .por-scan-count { font-size:13px; white-space:nowrap; }
  .por-lines .por-box { width:64px; }
  .por-lines tr.por-hit { animation:por-flash .6s; }
  @keyframes por-flash { from { background:#bbf7d0; } to { background:transparent; } }
  #tr-results { display:flex; flex-direction:column; gap:4px; margin:6px 0 10px; max-height:260px; overflow-y:auto; }
  .tr-hit { display:flex; justify-content:space-between; gap:10px; text-align:left; padding:8px 10px; min-height:40px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); cursor:pointer; font-size:13px; }
  .tr-hit:hover { border-color:var(--accent); }
  .tr-stock { color:var(--text3); white-space:nowrap; font-size:12px; }
  .tr-bulk { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .tr-open { margin-top:14px; display:flex; flex-direction:column; gap:6px; }
  .por-out { color:var(--red); font-size:11px; }
  .por-packed { font-size:12px; color:#6d28d9; background:#ede9fe; border-radius:6px; padding:6px 10px; margin-bottom:8px; }
  .hq-sec { font-size:13px; margin:4px 0 8px; }
  .hq-lines .hq-box { width:64px; }
  .cv-hits { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; padding:8px; border:1px solid var(--accent); border-radius:10px; background:var(--surface2); }
  .cv-hits-head { font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.04em; }
  .cv-hits-more { font-weight:400; text-transform:none; letter-spacing:0; color:var(--text3); }
  .cv-hit { display:flex; justify-content:space-between; gap:10px; align-items:center; text-align:left; padding:8px 10px; min-height:40px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); cursor:pointer; font-size:13px; }
  .cv-hit:hover, .cv-hit:focus { border-color:var(--accent); }
  .cv-hit-meta { white-space:nowrap; font-size:12px; color:var(--text3); } .cv-hit-out { color:var(--red); }
  .sl-group td { background:var(--surface2); font-size:13px; } .sl-stock { font-family:var(--font-num, 'DM Mono',monospace); font-weight:700; } .sl-stock.low { color:#d97706; } .sl-stock.out { color:var(--red); }
  #inv-row-hits .cv-hits { margin:0 0 8px; } .inv-hit { cursor:default; } .inv-hit-stock { width:64px; padding:4px 6px; font-size:13px; border:1px solid var(--border); border-radius:6px; }
  .hq-chip { font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; white-space:nowrap; }
  .hq-chip.ok { background:var(--green-light); color:var(--green); } .hq-chip.out { background:#fee2e2; color:#b91c1c; } .hq-chip.part { background:#fef3c7; color:#92400e; }
  .poh-card { border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--surface); }
  .poh-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
  .poh-head select { padding:3px 8px; font-size:12px; border:1px solid var(--border); border-radius:4px; }
  .poh-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; margin-bottom:10px; }
  .poh-stats > div { border:1px solid var(--border); border-radius:8px; padding:6px 8px; display:flex; flex-direction:column; font-size:11px; }
  .poh-stats b { font-size:16px; }
  .poh-stats small { color:var(--text3); }
  .poh-top { margin-top:8px; font-size:12px; } .poh-top ol { margin:4px 0 0 18px; }
  .imf-line { font-size:12px; color:var(--text2); margin-bottom:8px; }
  .imf-btns { display:flex; gap:8px; flex-wrap:wrap; }
  .imf-warn { color:#b45309; }
  .imf-help { font-size:11px; color:var(--text3); margin-top:6px; }
  #imf-progress { margin-top:8px; min-height:1em; }
  .imf-banner { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:99998; background:#1e293b; color:#fff; padding:10px 14px; border-radius:10px; font-size:13px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; max-width:94vw; box-shadow:0 4px 20px rgba(0,0,0,.3); }
  .imf-banner .imf-x { background:none; border:none; color:#94a3b8; font-size:16px; cursor:pointer; }
  .rs-count { font-size:12px; font-weight:600; padding:4px 12px; border-radius:20px; border:2px solid transparent; cursor:pointer; min-height:32px; }
  .rs-count.on { border-color:currentColor; }
  .rs-bulk { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px 0; padding:8px 10px; border:1px solid var(--accent); border-radius:10px; background:var(--surface2); font-size:12px; position:sticky; top:0; z-index:5; }
  .rs-bulk select { width:auto; padding:4px 8px; font-size:12px; }
  .po-send { display:flex; gap:6px; flex-wrap:wrap; padding:6px 12px; border-bottom:1px solid var(--border); }
  .po-send a.sr-mini { text-decoration:none; display:inline-flex; align-items:center; }
  .po-send .po-sent-btn { margin-left:auto; font-weight:700; }
  .po-send-all { display:flex; justify-content:flex-end; margin:0 0 10px; }
  .rs-nosup { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px; padding:10px 12px; border:1px solid #fcd34d; background:#fffbeb; color:#78350f; border-radius:var(--radius-sm); font-size:13px; }
  .po-lines th { text-align:left; font-size:10px; text-transform:uppercase; color:var(--text3); padding:6px 10px; }
  .po-lines td { padding:6px 10px; border-top:1px solid var(--border); vertical-align:middle; }
  .po-var { font-size:11px; color:var(--accent); }
  .po-sku { font-family:var(--font-num, 'DM Mono',monospace); font-size:11px; color:var(--text2); }
  .po-backup { font-family:inherit; font-size:10px; font-weight:700; color:#b45309; background:#fef3c7; border-radius:4px; padding:0 4px; }
  .po-sku-switch { padding:0 6px !important; }
  /* a model's own sub-variants on the product card (js/inventory/row-subvariants.js) */
  .pf-sub-add, .pf-sub-rm { margin-left:6px; padding:1px 6px; font-size:10px; font-weight:700; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--accent); cursor:pointer; white-space:nowrap; }
  .pf-sub-rm { color:var(--text3); }
  .pf-sub-rm[disabled] { opacity:.45; cursor:not-allowed; }
  .po-qty { width:60px; padding:4px 6px; border:1px solid var(--border); border-radius:6px; }
  .po-sup { padding:4px 6px; border:1px solid var(--border); border-radius:6px; font-size:11px; max-width:150px; background:var(--surface); color:var(--text); }
  .sr-lines { width:100%; border-collapse:collapse; font-size:12px; }
  .sr-lines th { text-align:left; font-size:10px; text-transform:uppercase; color:var(--text3); padding:5px 8px; border-bottom:1px solid var(--border); }
  .sr-lines td { padding:5px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
  .sr-lines tr:last-child td { border-bottom:none; }
  .sr-lines input[list], .sr-lines select { padding:4px 6px; font-size:12px; border:1px solid var(--border); border-radius:5px; background:var(--surface); color:var(--text); max-width:220px; }
  .sr-name { max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sr-sku { font-size:11px; color:var(--text3); font-family:ui-monospace, monospace; }
  .sr-units { font-size:10px; color:var(--text3); }
  .sr-lbl { font-size:11px; color:var(--text3); white-space:nowrap; }
  #sr-confirm:disabled, #rpst-apply:disabled { opacity:.45; cursor:not-allowed; }
  /* Catalog views (js/catalog/catalog-views.js) */
  .cv-banner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 14px; margin:0 0 8px; border-radius:10px; background:#eef2ff; border:1px solid #c7d2fe; color:#312e81; font-size:13px; }
  .cv-banner .cv-btn { margin-left:auto; }
  .cv-grid { grid-auto-rows:max-content; }
  .mb-titlebar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .mb-titlebar .cv-title { margin-right:auto; }
  .mb-editbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; background:var(--accent-light); border:1px solid var(--accent); border-radius:10px; }
  .mb-name { padding:6px 9px; border:1px solid var(--border); border-radius:6px; font-weight:800; font-size:14px; min-width:200px; }
  .mb-gap { flex:1; }
  .mb-danger { color:#dc2626; border-color:#fecaca; }
  .mb-ctl { display:flex; gap:2px; justify-content:center; margin-top:4px; }
  .mb-ctl button { border:1px solid var(--border); background:var(--surface); border-radius:5px; font-size:11px; padding:1px 5px; cursor:pointer; }
  .mb-ctl .mb-x { color:#dc2626; }
  .mb-rowctl { display:inline-flex; margin:0 0 0 8px; vertical-align:middle; }
  .mb-row-list { display:flex; flex-wrap:wrap; gap:4px 14px; max-height:44dvh; overflow:auto; padding:4px 0; }
  .mb-rowpick { font-size:12px; color:var(--text3); }
  .cv-mx .mb-hid, .cv-mx .mb-hid td { opacity:.42; }
  .cv-mx th.mb-hid { background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(0,0,0,.04) 6px 12px); }
  .mb-ctl .mb-eye { font-size:11px; }
  .mb-hidnote { font-size:12px; color:var(--text3); padding:4px 8px; border:1px dashed var(--border); border-radius:8px; }
  .cv-mx td.mb-split { background:#fff7ed; outline:1px dashed #f97316; outline-offset:-3px; }
  .cv-mx td.mb-split small { display:block; color:#c2410c; font-weight:700; }
  .cv-mx td.mb-na { color:var(--text3); cursor:default; background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(0,0,0,.03) 6px 12px); }
  .mb-split-banner { background:#fff7ed; border-color:#fdba74; color:#7c2d12; }
  .cvs-list { display:flex; flex-direction:column; gap:10px; max-height:60dvh; overflow:auto; }
  .cvs-card { border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
  .cvs-head { font-size:13px; display:inline-flex; margin-right:4px; }
  .cvs-parts { font-size:11px; color:var(--text3); margin-top:4px; }
  .cvs-t { border-collapse:collapse; margin-top:6px; font-size:12px; }
  .cvs-t th, .cvs-t td { padding:3px 6px; text-align:left; }
  .cvs-now { color:var(--text3); text-align:center !important; }
  .cvs-name { width:170px; padding:4px 6px; border:1px solid var(--border); border-radius:6px; font-weight:700; }
  .cvs-q { width:64px; padding:4px 6px; border:1px solid var(--border); border-radius:6px; }
  .cv-add-list { display:flex; flex-direction:column; gap:4px; max-height:56dvh; overflow:auto; }
  .cv-add-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; }
  .cv-add-row.on { background:var(--accent-light); border-color:var(--accent); }
  .cv-add-name { flex:1; font-weight:700; font-size:13px; }
  .cv-add-name small { display:block; font-weight:600; font-size:11px; color:var(--text3); }
  .cv-add-meta { font-size:12px; color:var(--text2); }
  .cv-add-via { font-size:11px; color:var(--text3); font-weight:600; }
  .cv-fold-tools { grid-column:1/-1; font-size:12px; color:var(--text3); text-align:right; }
  .cv-link { border:none; background:none; color:var(--accent); font-weight:700; font-size:12px; cursor:pointer; padding:0 2px; }
  .cv-fold { grid-column:1/-1; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
  .cv-fold.open { border-color:var(--accent); }
  .cv-fold-head { display:flex; align-items:center; gap:8px; width:100%; padding:11px 14px; border:none; background:none; cursor:pointer; font-size:14px; text-align:left; color:var(--text); }
  .cv-chev { color:var(--text3); width:12px; }
  .cv-fold-emoji { font-size:16px; }
  .cv-fold-meta { font-size:12px; color:var(--text3); font-weight:600; }
  .cv-fold-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows:max-content; gap:8px; padding:0 12px 12px; }
  .cv-fold-grid .product-card { min-height:118px; }
  .cv-tabedit-sum { padding:6px 4px; font-size:12px; }
  .cv-grid .product-card { min-height:118px; }
  .cv-head { display:flex; flex-direction:column; gap:8px; padding:8px 4px 10px; }
  .cv-title { font-size:17px; font-weight:800; }
  .cv-cats { display:flex; flex-wrap:wrap; gap:6px; }
  .cv-cat { padding:5px 11px; font-size:12px; font-weight:700; border:1px solid var(--border); border-radius:16px; background:var(--surface); cursor:pointer; color:var(--text2); }
  .cv-cat span { font-weight:600; color:var(--text3); margin-left:2px; }
  .cv-cat.active { background:var(--accent); color:#fff; border-color:var(--accent); }
  .cv-cat.active span { color:#e0e7ff; }
  .cv-cats.mb-depts { margin-top:6px; padding-left:10px; border-left:3px solid var(--accent-light); }
  /* SF1: the Stock Sheet's chip rows (matrix-builder.js _mbSheetChipsHtml): a label, then the checkout's chips */
  .sf-chips { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
  .sf-row { display:flex; align-items:flex-start; gap:8px; min-width:0; }
  .sf-lbl { flex:0 0 52px; font-size:11px; font-weight:700; color:var(--text3); padding-top:6px; }
  .sf-row .cv-cats { flex:1; min-width:0; }
  /* MX3: the matrix in three jobs (js/catalog/matrix-jobs.js) — the Job switch, a tappable dot, the order list */
  .mx-jobs, .mx-viewbtns { display:flex; gap:6px; flex-wrap:wrap; }
  .mx-viewbtns .cv-btn.active { box-shadow:0 0 0 2px var(--accent-light); }
  .mx-jobs .cv-btn.active { box-shadow:0 0 0 2px var(--accent-light); }
  .mx-dot { cursor:pointer; position:relative; }
  .mx-jobs .mx-main { font-weight:800; }
  /* MX3e: the matrix's names (matrix-builder.js): the column's price · stock · supplier in a small grey pill; the row's
     brand small, grey, in capitals above its model */
  .cv-mx .mx-pill { display:inline-block; margin-top:3px; padding:1px 7px; border-radius:999px; background:var(--surface2, #eef0f3); color:var(--text3); font-size:10.5px; font-weight:600; white-space:nowrap; }
  .cv-mx .cv-model .mx-brand { display:block; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text3); line-height:1.1; }
  .cv-mx .cv-model .mx-model { display:block; font-size:14px; font-weight:800; line-height:1.15; }
  /* MX3d: a row's colours in fixed-width slots, left-aligned (matrix-jobs.js mxSlotsHtml), the cell top-aligned */
  .mx-slots { display:grid; grid-template-columns:repeat(auto-fill, var(--slot, 84px)); justify-content:start; gap:2px 4px; align-items:center; text-align:left; }
  .mx-slots.mx-c-dots { --slot:30px; } .mx-slots.mx-c-both { --slot:84px; } .mx-slots.mx-c-names { --slot:72px; }
  .mx-slots.mx-a-centre { justify-content:center; }
  td.cv-cell:has(> .mx-slots) { vertical-align:top; }
  .mx-slot { display:flex; align-items:center; gap:3px; min-width:0; font-size:11.5px; }
  .mx-slot .nm-dot { width:12px; height:12px; flex:0 0 12px; box-shadow:0 0 0 1px rgba(0,0,0,.35); }
  .mx-slot .mx-nm { min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text2); }
  .mx-slot .mx-n { font-variant-numeric:tabular-nums; font-weight:600; color:var(--text3); }
  .mx-slots:not(.mx-c-dots) .mx-slot .mx-n { margin-left:auto; }
  .mx-slot.mx-low .mx-n { color:#d97706; } .mx-slot.mx-out .mx-n { color:var(--red, #dc2626); }
  .mx-view-sep { font-size:11px; font-weight:700; color:var(--text3); margin:0 2px 0 8px; align-self:center; }
  /* MX3c: Restock → Manual Request's small tiles (index.html rsManualRenderProducts) */
  .rs-tile { border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:8px; display:flex; flex-direction:column; gap:6px; min-width:0; max-width:240px; }
  .rs-tile.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-light); }
  .rs-tile-top { display:flex; gap:8px; align-items:center; cursor:pointer; min-width:0; }
  .rs-tile-img { width:48px; height:48px; object-fit:contain; flex:0 0 48px; border-radius:6px; background:var(--surface2, var(--bg)); }
  .rs-tile-emoji { width:48px; height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:center; font-size:24px; background:var(--surface2, var(--bg)); border-radius:6px; }
  .rs-tile-nm { min-width:0; font-size:12px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
  .rs-tile-nm small { display:block; font-weight:500; color:var(--text3); font-size:11px; }
  .rs-tile-stp { align-self:flex-end; }
  .mx-adj { position:absolute; z-index:30; left:0; top:100%; margin-top:4px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px; min-width:220px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg, 0 6px 20px rgba(0,0,0,.18)); font-size:12.5px; text-align:left; }
  td.cv-cell { position:relative; }
  .mx-adj-h { flex-basis:100%; font-weight:600; }
  .mx-adj select { min-height:32px; font-size:13px; }
  .mx-adj-x { border:0; background:none; cursor:pointer; min-width:32px; min-height:32px; }
  .pref-jobs { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
  .pref-main-l { color:var(--text3); margin-right:6px; }
  /* a finger's size for the jobs editor's boxes and ★ (the page audit on MX3b: 27×13) */
  .pref-jobs label { display:inline-flex; align-items:center; gap:4px; min-height:32px; cursor:pointer; }
  .pref-jobs input { width:20px; height:20px; margin:0; }
  .pref-jobs-from { font-size:11px; color:var(--text3); margin-top:4px; }
  .nm-chip.mx-counted, .cv-sub.mx-counted, td.cv-cell.mx-counted { box-shadow:inset 0 -2px 0 var(--green, #16a34a); }
  .mx-plus { display:inline-block; margin-left:3px; padding:0 4px; border-radius:8px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; line-height:15px; }
  input.mx-cnt { width:52px; padding:2px 4px; font-size:13px; text-align:center; border:1px solid var(--accent); border-radius:6px; background:var(--surface); color:var(--text); }
  /* the order list: a bar held at the screen's bottom over the matrix, its lines open above it (matrix-jobs.js mxOrderHtml) */
  .mx-wrap { display:block; }
  .mx-wrap > .cv-scroll { padding-bottom:64px; }
  .mx-order { position:sticky; bottom:8px; z-index:25; margin-top:8px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.18); font-size:12.5px; min-width:0; }
  .mx-order .mx-body { display:none; max-height:min(50dvh, 460px); overflow:auto; border-bottom:1px solid var(--border); }
  .mx-order.open .mx-body { display:block; }
  .mx-bar { display:flex; align-items:center; gap:8px; padding:6px 8px; flex-wrap:wrap; }
  .mx-toggle { flex:1 1 220px; display:flex; align-items:center; gap:8px; min-height:44px; padding:0 6px; background:none; border:0; color:var(--text); font-size:14px; cursor:pointer; text-align:left; }
  .mx-toggle span { color:var(--text3); font-size:12.5px; }
  .mx-toggle i { margin-left:auto; font-style:normal; color:var(--text3); }
  .mx-bar .cv-btn { min-height:44px; }
  .mx-sup h3 span { font-weight:600; color:var(--text3); font-size:11.5px; }
  .mx-sup { border-top:1px solid var(--border); padding:8px 12px; }
  .mx-sup h3 { margin:0 0 6px; font-size:12.5px; display:flex; justify-content:space-between; }
  .mx-ln { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:center; padding:3px 0; }
  .mx-nm { min-width:0; overflow-wrap:anywhere; }
  .mx-nm small { display:block; color:var(--text3); font-size:11px; }
  .mx-stp { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
  .mx-stp button { border:0; background:var(--surface2, var(--bg)); color:var(--text); width:32px; height:32px; cursor:pointer; font-weight:700; }
  .mx-stp b { min-width:26px; text-align:center; }
  .mx-none { padding:4px 12px 12px; color:var(--text3); }
  .cv-cats.mb-depts .cv-cat { padding:3px 10px; font-size:11.5px; }
  .mb-brandset { display:flex; flex-direction:column; gap:6px; max-height:60dvh; overflow:auto; padding:4px 0; }
  .mb-brandrow { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; }
  .mb-brandrow b { min-width:120px; }
  .mb-brandrow small { color:var(--text3); }
  .cv-tools { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .cv-search { flex:1; min-width:180px; padding:7px 11px; font-size:13px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); }
  .cv-chk { font-size:12px; color:var(--text2); display:inline-flex; gap:5px; align-items:center; cursor:pointer; }
  .cv-btn { padding:6px 12px; font-size:12px; font-weight:700; border:1px solid var(--border); border-radius:8px; background:var(--surface); cursor:pointer; color:var(--text); }
  .cv-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
  .cv-body { min-height:0; }
  /* the bonus rules panel's ticks (bonus-rules-panel.js): a tap-sized row each, the box inside it (Cowork's R11) */
  .brp-tick { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 4px; cursor:pointer; }
  .brp-tick input[type=checkbox], .brp-tick input[type=radio] { width:20px; height:20px; flex:0 0 auto; margin:0; }
  .cv-scroll { overflow:auto; overscroll-behavior:contain; max-height:calc(100dvh - 230px); border:1px solid var(--border); border-radius:10px; background:var(--surface); }
  .cv-mx { border-collapse:separate; border-spacing:0; font-size:12px; }
  .cv-mx th, .cv-mx td { border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
  .cv-mx thead th { position:sticky; top:0; z-index:2; background:var(--surface2, #f5f5f4); }
  .cv-corner { position:sticky; left:0; z-index:3 !important; text-align:left; padding:8px 10px; min-width:170px; font-size:11px; color:var(--text3); }
  .cv-col { padding:6px 8px; min-width:86px; max-width:130px; cursor:pointer; text-align:center; vertical-align:bottom; }
  .cv-col:hover { background:var(--accent-light); }
  .cv-col-name { font-weight:800; font-size:12px; line-height:1.2; }
  .cv-col-sub { font-size:10px; color:var(--text3); font-weight:600; margin-top:2px; }
  .cv-model { position:sticky; left:0; z-index:1; background:var(--surface); padding:6px 10px; font-weight:700; white-space:nowrap; }
  .cv-series td { background:var(--bg); font-size:10px; font-weight:800; color:var(--text3); text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; position:sticky; left:0; }
  .cv-cell { text-align:center; padding:4px 6px; cursor:pointer; min-width:70px; }
  .cv-cell:hover { background:var(--accent-light); }
  .cv-cell b { font-size:13px; }
  .cv-cell small { display:block; font-size:10px; color:var(--text3); }
  .cv-none { color:var(--border); }
  .cv-zero, .cv-zero b { color:var(--text3); }
  .cv-neg, .cv-neg b { color:#dc2626; }
  .cv-sub { display:flex; justify-content:space-between; gap:6px; font-size:10px; line-height:1.35; }
  .cv-sub span { color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70px; }
  .mb-shared { font-style:normal; color:var(--accent); font-weight:700; margin-left:2px; }
  /* Settings → Model & Colour Names (js/settings/naming-panel.js) */
  .nmp-tabs, .nmp-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .nmp-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
  .nmp-search { flex:1; min-width:220px; }
  .nmp-scroll { max-height:60dvh; overflow:auto; border:1px solid var(--border); border-radius:8px; }
  .nmp-table { width:100%; border-collapse:collapse; font-size:12px; }
  .nmp-table th { position:sticky; top:0; background:var(--surface2); text-align:left; padding:6px 8px; font-weight:700; z-index:1; }
  .nmp-table td { padding:4px 8px; border-top:1px solid var(--border); vertical-align:middle; }
  .nmp-table .form-input { padding:4px 6px; font-size:12px; min-width:110px; }
  .nmp-table .nmp-short { min-width:70px; width:90px; }
  .nmp-table input[type=color] { width:26px; height:22px; padding:0; border:none; background:none; vertical-align:middle; }
  .nmp-set { border-color:var(--accent) !important; color:var(--accent); font-weight:600; }
  .nmp-full { font-weight:600; white-space:nowrap; }
  .nmp-n { text-align:right; color:var(--text2); }
  .nmp-small { font-size:11px; color:var(--text3); }
  .nmp-arch { opacity:.45; }
  .nmp-note { font-size:12px; color:var(--text3); margin:8px 0; }
  .nmp-add { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; font-size:12px; }
  .nmp-add .form-input { width:auto; min-width:120px; }
  .nmp-mini { font-size:11px; padding:3px 8px; }
  .nmp-summary { background:var(--surface2); border-radius:8px; padding:10px 12px; font-size:13px; margin:8px 0; line-height:1.6; }
  .nmp-prod { border-top:1px solid var(--border); }
  .nmp-prod-head { background:none; border:none; padding:7px 4px; cursor:pointer; font-size:13px; color:var(--text); width:100%; text-align:left; }
  .nmp-prod-head small { color:var(--text3); margin-left:6px; }
  .nmp-changes td { font-size:12px; }
  .nmp-file { cursor:pointer; display:inline-flex; align-items:center; }
  /* ⚙️ Matrix settings (js/catalog/matrix-settings.js) */
  .mbs { max-width:900px; }
  .mbs-sec { border-top:1px solid var(--border); padding:10px 0; }
  .mbs-h { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-weight:800; font-size:13px; margin-bottom:8px; }
  .mbs-h span { font-weight:500; color:var(--text3); font-size:12px; margin-right:auto; }
  .mbs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px 16px; font-size:12px; }
  .mbs-grid label { display:flex; flex-direction:column; gap:3px; font-weight:600; }
  .mbs-grid .cv-chk { flex-direction:row; font-weight:500; }
  .mbs-list { max-height:34dvh; overflow:auto; border:1px solid var(--border); border-radius:8px; }
  .mbs-item { display:flex; align-items:center; gap:6px; padding:4px 8px; border-top:1px solid var(--border); font-size:12px; }
  .mbs-item:first-child { border-top:none; }
  .mbs-item button { border:1px solid var(--border); background:var(--surface); border-radius:6px; padding:2px 7px; cursor:pointer; font-size:11px; }
  .mbs-item small { color:var(--text3); margin-right:auto; }
  .mbs-name { font-weight:700; min-width:90px; }
  .mbs-label { flex:1; padding:3px 6px !important; font-size:12px !important; max-width:260px; }
  .mbs-sechead { background:var(--surface2); }
  .mbs-off { opacity:.45; }
  .mbs-from { display:flex; align-items:center; gap:6px; font-weight:500; font-size:12px; }
  .mbs-from .cv-search { width:auto; padding:3px 6px; }
  .mbs-add { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .mbs-add .cv-search { flex:1; min-width:160px; }
  /* colour dots (js/catalog/naming.js) */
  .nm-dot { display:inline-block; width:12px; height:12px; border-radius:50%; border:1px solid rgba(0,0,0,.25); flex:none; vertical-align:middle; }
  .nm-dot-unknown { box-shadow:inset 0 0 0 2px #fff; }
  /* VD1: one dot for every look (js/inventory/color-presets.js cpDotHtml). Pattern and emoji dots keep the
     size and a contrasting ring; a colour no preset knows is a dashed "?" — never a silent grey. */
  .cp-dot { display:inline-flex; align-items:center; justify-content:center; width:12px; height:12px; border-radius:50%; border:0; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.22); flex:none; vertical-align:middle; font-style:normal; line-height:1; overflow:hidden; }
  .cp-dot-md { width:20px; height:20px; } .cp-dot-lg { width:34px; height:34px; }
  .cp-dot-emoji { box-shadow:none; background:none; font-size:12px; overflow:visible; } .cp-dot-md.cp-dot-emoji { font-size:18px; } .cp-dot-lg.cp-dot-emoji { font-size:30px; }
  .cp-dot-unknown { background:var(--surface) !important; box-shadow:none; border:1.5px dashed var(--text3); color:var(--text3); font:800 8px/1 var(--font-num, monospace); }
  .cp-dot-md.cp-dot-unknown { font-size:12px; } .cp-dot-lg.cp-dot-unknown { font-size:20px; }
  .cp-dot[data-cp-value] { cursor:context-menu; }
  .cp-warn { border:1px solid var(--border); border-left:4px solid var(--amber); border-radius:var(--radius-sm); padding:10px 12px; margin:0 0 10px; display:flex; flex-direction:column; gap:6px; background:var(--surface2); }
  .cp-warn > b { font-size:13px; } .cp-warn > span { font-size:12px; color:var(--text2); }
  .cp-alike { border-left-color:var(--red); }
  .cp-warn-list { display:flex; flex-wrap:wrap; gap:6px; }
  .cp-warn-item { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border:1px solid var(--border); border-radius:20px; background:var(--surface); color:var(--text); font-size:12px; font-weight:600; cursor:pointer; min-height:32px; }
  .cp-warn-item small { color:var(--text3); font-weight:500; }
  .cp-row { display:flex; align-items:center; gap:10px; padding:6px 6px; border-radius:6px; flex-wrap:wrap; row-gap:4px; }
  .cp-row-dot { border:0; background:none; padding:2px; cursor:pointer; display:inline-flex; min-width:32px; min-height:32px; align-items:center; justify-content:center; } .cp-row-dot:disabled { cursor:default; }
  .cp-row-name { flex:1 1 120px; min-width:120px; border:none; background:none; font-size:13px; font-weight:600; padding:4px; border-radius:4px; color:var(--text); }
  .cp-row-look { font-family:var(--font-num, "DM Mono", monospace); font-size:11px; color:var(--text3); width:96px; white-space:nowrap; }
  .cp-row-n { font-size:11px; color:var(--text3); width:52px; text-align:right; }
  .cp-row-edit, .cp-row-arch { padding:6px 10px; border-radius:6px; border:1px solid var(--border); background:var(--surface); font-size:11px; font-weight:600; cursor:pointer; color:var(--text); min-height:32px; }
  .cv-pop.cp-edit { width:380px; } .cv-pop.cp-edit-two { width:740px; }
  .cp-edit-cols { display:grid; grid-template-columns:1fr; gap:14px; } .cp-edit-two .cp-edit-cols { grid-template-columns:1fr 1fr; }
  .cp-edit-col { display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--border); border-radius:10px; }
  .cp-edit-head { display:flex; align-items:center; gap:10px; font-size:15px; } .cp-edit-new { font-size:11px; color:var(--amber); font-weight:600; }
  .cp-edit-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; } .cp-edit-row > span { color:var(--text2); }
  .cp-edit-row .form-input, .cp-edit-row input[type=color] { width:170px; min-height:36px; } .cp-edit-emoji { font-size:18px; text-align:center; }
  .cp-hide { display:none; }
  .cp-edit-preview { display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; background:var(--surface2); font-size:11px; color:var(--text3); }
  @media (max-width: 720px) { .cp-edit-two .cp-edit-cols { grid-template-columns:1fr; } .cp-edit-row .form-input, .cp-edit-row input[type=color] { width:140px; } }
  .nm-chips { display:flex; flex-wrap:wrap; gap:3px 7px; align-items:center; }
  .nm-chip { display:inline-flex; align-items:center; gap:3px; font-size:11px; line-height:1.3; white-space:nowrap; }
  .nm-chip b { font-weight:800; }
  .nm-chip em { font-style:normal; color:var(--text2); font-size:10px; }
  .nm-chip.cv-zero { opacity:.45; } .nm-chip.cv-neg b { color:var(--red); }
  .cv-more { font-size:9px; color:var(--text3); }
  /* High contrast (user: "too greyish … bold and black"): everything you read in a matrix is
     black and bold; meaning comes from weight / colour, not grey — in stock = heaviest,
     0 = black but lighter, below 0 = red. Only the "·" of a model a product doesn't come in stays faint. */
  .cv-mx th { color:#111; text-transform:none; letter-spacing:0; }
  .cv-mx .cv-col-name { color:#111; font-weight:800; font-size:12.5px; }
  .cv-mx .cv-col-sub, .cv-mx .cv-corner, .cv-mx .cv-corner span { color:#111; font-weight:700; }
  .cv-mx .cv-model { color:#111; font-weight:800; }
  .cv-mx .cv-series td { color:#111; font-weight:800; font-size:11px; }
  .cv-mx .cv-cell { color:#111; font-weight:700; }
  .cv-mx .cv-cell b { font-weight:900; font-size:14px; color:#111; }
  .cv-mx .cv-cell small { color:#111; font-weight:700; font-size:11px; }
  .cv-mx .cv-zero, .cv-mx .cv-zero b { color:#111; font-weight:600; }
  /* order mode (Restock → ＋ Manual → 🧩 By model): red out, amber at the reorder point; what is on its way */
  .cv-mx .cv-cell.mb-ord-out { background:#fef2f2; } .cv-mx .cv-cell.mb-ord-out b { color:#b91c1c; }
  .cv-mx .cv-cell.mb-ord-low { background:#fffbeb; } .cv-mx .cv-cell.mb-ord-low b { color:#b45309; }
  .cv-pop-stock.mb-ord-out { color:#b91c1c; } .cv-pop-stock.mb-ord-low { color:#b45309; }
  .mb-ord-on, .mb-ord-req { display:block; font-size:10px; font-weight:700; }
  .mb-ord-on { color:#1d4ed8; } .mb-ord-req { color:#15803d; }
  /* the Stock Take by model (GR3): a count box per row, blue once counted, amber when it differs */
  .mb-cnt-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0; font-size:12px; color:var(--text3); }
  .mb-cnt { width:52px; min-height:32px; padding:2px 4px; font-size:14px; text-align:center; border:1px solid var(--border); border-radius:6px; }
  .mb-cnt-was { display:block; font-size:10px; color:var(--text3); }
  .mb-cnt-n { display:block; font-size:10px; font-weight:700; color:#1d4ed8; }
  .cv-cell.mb-cnt-same { background:#eff6ff; } .cv-cell.mb-cnt-diff { background:#fef3c7; }
  .cv-pop-oqty { width:56px; }
  .cv-mx .cv-neg, .cv-mx .cv-neg b { color:#dc2626; font-weight:900; }
  .cv-mx .cv-sub { font-size:11px; }
  .cv-mx .cv-sub span { color:#111; font-weight:700; }
  .cv-mx .cv-sub b { font-size:12px; }
  .cv-mx .cv-more { color:#111; font-weight:700; font-size:10px; }
  .cv-mx .cv-none { color:#c8c5c0; font-weight:400; }
  /* MX4 (the owner, 1 Oct: "the Product names more obvious, and the price and the number in stock small and
     inconspicuous … the 16PM large and obvious, but iPhone small"): after the high-contrast rules above, which made the
     pill and the brand as black and bold as the names */
  .cv-mx .mx-pn .pn-type { font-size:14px; font-weight:800; color:#111; }
  .cv-mx .cv-col-sub.mx-pill { color:var(--text3); font-weight:500; font-size:10.5px; }
  .cv-mx .cv-model .mx-brand { font-size:10px; font-weight:600; color:var(--text3); }
  .cv-mx .cv-model .mx-model { font-size:15px; font-weight:800; color:#111; }
  /* MX4c: ☰ View (matrix-jobs.js mxViewMenu) hides rows above a matrix; the menu has the checkout's look (cv1's .cc-menu /
     .cc-row, the same values here so it looks the same before that lands) */
  .cv-head[data-mxhide~="head"] > :is(.mb-titlebar, .mb-brands, .mb-depts, .mb-mxpick),
  .cv-head[data-mxhide~="job"] > .mx-jobrow, .cv-head[data-mxhide~="view"] > .mx-view,
  .cv-head[data-mxhide~="fam"] .sf-fam, .cv-head[data-mxhide~="type"] .sf-type, .cv-head[data-mxhide~="stock"] .sf-stock { display:none; }
  .mx-viewmenu-btn.active { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
  .mx-vmenu { z-index:900; width:290px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg, 0 10px 30px rgba(0,0,0,.18)); }
  .mx-vmenu .cc-row { display:flex; gap:10px; align-items:flex-start; padding:8px; border-radius:8px; cursor:pointer; min-height:44px; }
  .mx-vmenu .cc-row:hover { background:var(--surface2); }
  .mx-vmenu .cc-row input { margin-top:3px; width:18px; height:18px; flex:0 0 auto; }
  .mx-vmenu .cc-row b { display:block; font-size:13px; color:var(--text); }
  .mx-vmenu .cc-row small { display:block; font-size:11.5px; color:var(--text3); }
  .mx-hidline { display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; margin:4px 0; font-size:12px; color:var(--text2); }
  .mx-hidit { border:0; background:none; padding:4px 6px; min-height:32px; font:inherit; font-weight:700; color:var(--text); cursor:pointer; border-radius:6px; }
  .mx-hidit:hover { background:var(--surface2); }
  .mx-hidsep { color:var(--text3); }
  .mx-hidx { border:1px solid var(--border); background:var(--surface); border-radius:999px; min-width:32px; min-height:32px; cursor:pointer; color:var(--text2); }
  .cv-model-btn { color:#111; } .cv-model-btn span { color:#111; font-weight:800; }
  .cv-series-h { color:#111; }
  /* The Model column only as wide as it needs (long names wrap), the rest of the width for the
     product columns; in edit mode a row's buttons sit under its name, not beside it. */
  .cv-mx .cv-corner, .cv-mx td.cv-model { width:1%; min-width:64px; max-width:150px; white-space:normal; line-height:1.25; }
  .cv-mx td.cv-model { padding:5px 8px; overflow-wrap:break-word; }
  .cv-mx .mb-rowctl { display:flex; flex-wrap:wrap; margin:3px 0 0; }
  .cv-flat { display:flex; flex-direction:column; gap:4px; margin-top:10px; }
  .cv-flat-row { display:flex; align-items:center; gap:10px; padding:7px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px; }
  .cv-flat-name { flex:1; font-weight:700; cursor:pointer; }
  .cv-flat-price { color:var(--text2); font-size:12px; min-width:60px; text-align:right; }
  .cv-flat-stock { min-width:34px; text-align:center; }
  .cv-step { width:28px; height:28px; border:1px solid var(--border); border-radius:6px; background:var(--surface); cursor:pointer; font-weight:800; }
  .cv-empty { padding:24px; text-align:center; color:var(--text3); }
  .cv-pop-bg { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1200; display:flex; align-items:center; justify-content:center; }
  .cv-pop { background:var(--surface); border-radius:14px; padding:16px; width:460px; max-width:94vw; max-height:86dvh; overflow:auto; box-shadow:0 20px 50px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:8px; }
  .cv-pop-wide { width:720px; }
  .cv-pop-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
  .cv-pop-title { font-size:16px; font-weight:800; }
  .cv-pop-sub { font-size:12px; color:var(--text3); }
  .cv-x { border:none; background:none; font-size:16px; cursor:pointer; color:var(--text3); }
  .cv-pop-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); }
  .cv-pop-v2 { flex:1; font-weight:700; }
  .cv-pop-num { width:64px; padding:5px; text-align:center; border:1px solid var(--border); border-radius:6px; }
  .cv-pop-lbl { font-size:11px; color:var(--text3); }
  .cv-pop-price-in { width:70px; padding:5px; border:1px solid var(--border); border-radius:6px; }
  .cv-pop-skus { font-size:10px; color:var(--text3); padding:0 0 4px; }
  .cv-pop-foot { display:flex; gap:8px; justify-content:flex-end; padding-top:6px; }
  .cv-use-repair { margin-left:auto; white-space:nowrap; background:#fef3c7; border-color:#f59e0b; color:#92400e; font-weight:800; }
  .cv-use-repair:disabled { opacity:.4; cursor:default; }
  .cv-mode { flex-shrink:0; display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .cv-mode-btn { padding:5px 10px; font-size:12px; font-weight:700; border:none; background:var(--surface); cursor:pointer; color:var(--text2); }
  .cv-mode-btn.active { background:var(--accent); color:#fff; }
  .cv-models { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; }
  .cv-series-h { width:100%; font-size:11px; font-weight:800; color:var(--text2); text-transform:uppercase; letter-spacing:.04em; margin-top:6px; }
  .cv-model-btn { padding:8px 12px; font-size:13px; font-weight:700; border:1px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer; }
  .cv-model-btn span { margin-left:6px; font-size:11px; color:var(--text3); }
  .cv-lines { grid-column:1/-1; display:flex; flex-direction:column; gap:5px; }
  .cv-lines-head { display:flex; align-items:center; gap:10px; font-size:15px; margin-bottom:4px; }
  .cv-line { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:10px; cursor:pointer; }
  .cv-line:hover { border-color:var(--accent); }
  .cv-line-name { flex:1; font-weight:700; }
  .cv-line-name em { font-style:normal; color:var(--text3); font-weight:600; }
  .cv-line-stock { font-size:12px; color:var(--text2); }
  .cv-line-price { font-family:var(--font-num, 'DM Mono',monospace); font-weight:800; font-size:15px; color:var(--accent); min-width:56px; text-align:right; }
  .cv-line-add { color:var(--accent); font-weight:800; font-size:18px; }
  .cv-pick-grid { display:flex; flex-direction:column; gap:4px; }
  .cv-pick-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--border); }
  .cv-pick-model { min-width:190px; font-weight:700; }
  .cv-pick-opts { display:flex; flex-wrap:wrap; gap:5px; }
  .cv-pick-opt { padding:5px 10px; font-size:12px; font-weight:700; border:1px solid var(--border); border-radius:8px; background:var(--surface); cursor:pointer; }
  .cv-pick-opt:hover { border-color:var(--accent); background:var(--accent-light); }
  .cv-pick-opt small { color:var(--text3); font-weight:600; }
  .cv-tabedit { border:1px solid var(--border); border-radius:10px; padding:8px; }
  .cv-tabedit-top { display:flex; gap:6px; align-items:center; }
  .cv-tabedit-top input:not([type]) { flex:1; padding:6px 8px; border:1px solid var(--border); border-radius:6px; font-weight:700; }
  .cv-tabedit-cats { display:flex; flex-wrap:wrap; gap:4px 14px; padding-top:6px; }
  .cv-dept { width:100%; }
  .sr-stock { white-space:nowrap; }
  .sr-mini { padding:3px 8px; font-size:11px; border:1px solid var(--border); border-radius:5px; background:var(--surface); color:var(--text); cursor:pointer; }
  .sr-mini.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
  .sr-skipped td { color:var(--text3); }
  .sr-newrow td { background:#fffbeb; }
  .sr-hist-row { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; padding:6px 0; border-bottom:1px solid var(--border); }
  .sr-hist-row.undone { color:var(--text3); text-decoration:line-through; }
  /* Full names (js/inventory/supplier-names.js): the supplier's, read-only */
  .pf-fullname-val { padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface2); color: var(--text2); font-size: 13px; min-height: 18px; }
  .pf-fullname-pat { font-size: 11px; color: var(--text3); margin-top: 3px; }
  .pf-row-full { font-size: 11px; color: var(--text3); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inv-fullname { font-size: 11px; color: var(--text3); font-weight: 400; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* SKU decoder suggestions (js/inventory/sku-decoder.js) */
  .sd-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
  /* Map SKUs (js/inventory/sku-mapper.js) */
  .smp-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .smp-tab { padding:5px 10px; font-size:12px; font-weight:600; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text2); cursor:pointer; }
  .smp-tab span { font-weight:700; color:var(--text3); margin-left:2px; }
  .smp-tab.on { background:var(--accent); border-color:var(--accent); color:#fff; }
  .smp-tab.on span { color:#fff; }
  .smp-cov { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text2); margin-bottom:8px; }
  .smp-bar { width:160px; height:8px; border-radius:4px; background:var(--surface2, #e5e7eb); overflow:hidden; flex-shrink:0; }
  .smp-bar i { display:block; height:100%; background:var(--green, #16a34a); }
  .smp-bulk { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px; }
  .smp-bulk select { padding:5px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; max-width:280px; background:var(--surface); color:var(--text); }
  .smp-lines td { vertical-align:middle; }
  .smp-pick { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
  .sr-mini.smp-ok { border-color:var(--green, #16a34a); color:var(--green, #16a34a); font-weight:700; }
  .sd-chip.warn { background:#fef3c7; color:#92400e; }
  @media (max-width: 700px) { .smp-lines th:nth-child(3), .smp-lines td:nth-child(3) { display:none; } .sr-name { max-width:180px; } }
  .sd-chip { font-size:10px; font-weight:600; padding:1px 6px; border-radius:8px; background:#e0e7ff; color:#3730a3; }
  .sd-chip.col { background:#f3e8ff; color:#6b21a8; }
  .sd-chip.code { background:#e5e7eb; color:#374151; }
  .sd-chip.unk { background:#fee2e2; color:#991b1b; }
  .sd-cand { font-size:12px; padding:3px 0; }
  .sd-cand.alt { opacity:.85; border-top:1px dashed var(--border); margin-top:3px; padding-top:5px; }
  .sd-conf { font-size:10px; font-weight:700; padding:1px 6px; border-radius:8px; white-space:nowrap; }
  .sd-conf.high { background:#dcfce7; color:#166534; }
  .sd-conf.medium { background:#fef3c7; color:#92400e; }
  .sd-conf.low { background:#fee2e2; color:#991b1b; }
  .sd-why { font-size:10px; color:var(--text3); margin-top:1px; }
  .sd-warn { font-size:10px; color:#b45309; margin-top:1px; }
  .sd-actions { margin-top:4px; }
  .sd-bulk { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:8px 12px; margin-bottom:10px; border-radius:8px; background:#ecfdf5; font-size:12px; color:#065f46; }
  #sd-create { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:10060; align-items:center; justify-content:center; }
  #sd-create.open { display:flex; }
  #sd-create .sd-c-box { background:var(--surface); color:var(--text); border-radius:10px; padding:18px; width:460px; max-width:94vw; box-shadow:0 10px 40px rgba(0,0,0,.25); }
  #sd-create label { display:block; font-size:11px; color:var(--text2); margin-top:8px; }
  #sd-create input { width:100%; box-sizing:border-box; padding:6px 8px; font-size:13px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); }
  #sd-create .sd-c-row { display:flex; gap:8px; } #sd-create .sd-c-row > div { flex:1; }
  .smi-block { margin:0 0 6px; font-size:13px; }
  .smi-block summary { cursor:pointer; padding:4px 0; }
  .smi-list { margin:4px 0 8px 18px; font-size:12px; color:var(--text2); max-height:220px; overflow-y:auto; }
  .smi-opt { display:block; font-size:13px; padding:6px 0 2px; cursor:pointer; }
  .modal {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); width: 480px; max-width: 95vw;
    max-height: 90dvh; overflow-y: auto;
    animation: modalIn 0.2s ease;
  }
  @keyframes modalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
  }
  .modal-title { font-size: 16px; font-weight: 700; }
  .modal-close {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--surface2); border: none; cursor: pointer;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    color: var(--text2); transition: all 0.15s;
  }
  .modal-close:hover { background: var(--red-light); color: var(--red); }
  .modal-body { padding: 20px 24px; }
  .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 10px;
  }

  .form-grid { display: flex; flex-direction: column; gap: 14px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-group { display: flex; flex-direction: column; gap: 5px; }
  .form-label { font-size: 12px; font-weight: 600; color: var(--text2); }
  .form-input {
    padding: 9px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-size: 13px; color: var(--text); outline: none; transition: border 0.15s;
    background: var(--surface); width: 100%; box-sizing: border-box; min-width: 0;
  }
  .form-input:focus { border-color: var(--accent); }
  .form-input option { background: var(--surface); }

  /* RECEIPT MODAL */
  .receipt {
    font-family: var(--font-num, 'DM Mono', monospace);
    background: white; padding: 20px;
    border-radius: var(--radius); border: 1px dashed var(--border2);
    font-size: 12px; line-height: 1.8;
  }
  .receipt-title { text-align: center; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
  .receipt-sub { text-align: center; font-size: 11px; color: var(--text3); margin-bottom: 12px; }
  .receipt-divider { border: none; border-top: 1px dashed var(--border2); margin: 8px 0; }
  .receipt-row { display: flex; justify-content: space-between; }
  .receipt-row.total { font-weight: 700; font-size: 13px; }
  .receipt-footer { text-align: center; font-size: 11px; color: var(--text3); margin-top: 12px; }

  /* TOAST */
  .toast-container {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  /* BUG FIX (user report: "the tabs in the POS page are not editable from
     the screenshots"): the toast stack is centered at the very top of the
     viewport on every page — on POS specifically that's also exactly where
     .pos-pages-bar sits (topbar 52px + the tab row directly under it), so
     a toast (up to 3s, longer once two stack, e.g. back-to-back "Welcome"
     toasts on login) rendered directly on top of the tab row, including
     the ✏️ Edit Tabs button added there. Toasts are position:fixed with a
     real background and z-index:9999, so this wasn't just a visual
     overlap — a toast bubble sitting over the button intercepts the click.
     Pushed down far enough to clear the topbar + tab row only on POS,
     rather than moving toasts on every page (no other page has a second
     header row at this height). */
  body.pos-active .toast-container { top: 104px; }
  .toast {
    background: var(--text); color: white;
    padding: 10px 18px; border-radius: 18px;
    font-size: 13px; font-weight: 500;
    box-shadow: var(--shadow-md);
    animation: toastIn 0.25s ease;
    display: flex; align-items: center; gap: 8px;
    /* a long message wraps inside the screen: one line ran 1,243 px wide, off a phone's 390 px
       and a tablet's edge (TASKS-NIGHT2 N26, test/e2e/void-guards.js) */
    white-space: normal; max-width: min(640px, calc(100vw - 32px)); box-sizing: border-box; text-align: center;
  }
  /* a toast is only words: a tap on it goes to what is under it. A toast over Restock's
     🧾 Create orders took the tap, and the order was never made (TASKS-NIGHT2 N5, test/e2e/double-tap.js) */
  .toast-container { width: max-content; max-width: 100vw; pointer-events: none; }
  @keyframes toastIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .toast.success { background: var(--green); }
  .toast.error { background: var(--red); }

  /* ========== SETTINGS PAGE ========== */
  #page-settings {
    flex-direction: column; padding: 20px; overflow-y: auto; overflow-x: hidden; gap: 20px;
  }
  .settings-layout {
    display: grid; grid-template-columns: 220px 1fr; gap: 20px; flex: 1;
    width: 100%; min-width: 0;
  }
  .settings-layout > * { min-width: 0; overflow: hidden; }
  .settings-nav {
    display: flex; flex-direction: column; gap: 2px;
  }
  .pf-ml-chip { border:1px solid var(--border); background:var(--surface); color:var(--text3); border-radius:999px; padding:4px 10px; margin:3px; font-size:12px; font-weight:600; cursor:pointer; }
  .pf-ml-chip.on { background:var(--accent-light,#eaf1ff); border-color:var(--accent); color:var(--accent); font-weight:800; }
  .pf-ml-bar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:11px; color:var(--text3); margin-bottom:4px; }
  .settings-nav-group { font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--text3); padding:12px 12px 4px; }
  .settings-nav-group:first-of-type { padding-top:4px; }
  .pref-scope-note { font-size:12px; color:var(--text2); background:var(--surface2); border-radius:8px; padding:8px 10px; margin-bottom:8px; }
  .pref-row .pref-select { min-width:240px; }
  .settings-nav-item {
    padding: 9px 14px; border-radius: var(--radius-sm);
    border: none; background: transparent;
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 13px; font-weight: 500;
    color: var(--text2); cursor: pointer; transition: all 0.15s;
    text-align: left; display: flex; align-items: center; gap: 9px;
  }
  .settings-nav-item:hover { background: var(--surface2); color: var(--text); }
  .settings-nav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
  .settings-nav-divider { height: 1px; background: var(--border); margin: 6px 0; }
  /* ST1: the sidebar in groups that fold (<details>), a scope label over the shop's groups, "Find a setting" */
  .settings-nav-current { display: none; }   /* the phone's one line (UV1): shown under 700 px only */
  .settings-find { padding: 0 0 6px; } .settings-find .form-input { width: 100%; min-height: 36px; font-size: 13px; }
  .settings-nav-scope { font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--text3); padding:12px 12px 2px; }
  .settings-nav-fold { border: 0; margin: 0; }
  .settings-nav-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; min-height: 28px; padding: 6px 12px 2px; }
  .settings-nav-fold > summary::-webkit-details-marker { display: none; }
  .settings-nav-fold > summary::before { content: '▸'; font-size: 10px; color: var(--text3); transition: transform .15s; width: 8px; }
  .settings-nav-fold[open] > summary::before { transform: rotate(90deg); }
  .settings-nav-fold > summary.settings-nav-group { padding-top: 6px; }
  .settings-nav-fold-scope > summary { padding-top: 12px; }
  .settings-nav-fold > summary:hover { color: var(--text); }
  .settings-nav-items { display: flex; flex-direction: column; gap: 2px; }
  .settings-nav-item.snav-miss, .settings-nav-fold.snav-empty, .settings-nav-scope.snav-empty { display: none; }
  .settings-find-none { font-size: 12px; color: var(--text3); padding: 8px 12px; }

  .settings-panel { display: none; flex-direction: column; gap: 16px; min-width: 0; overflow-x: hidden; width: 100%; }
  .settings-panel.active { display: flex; }

  /* Mobile & narrow: stack settings nav on top, full-width panels */
  @media (max-width: 1024px) {
    .settings-layout {
      grid-template-columns: 180px 1fr !important;
      gap: 12px;
    }
    .settings-nav-item { padding: 7px 10px; font-size: 12px; min-height: 36px; }   /* a finger's tap on a narrow screen (settings-groups.js 6, gate 26) */
    .setting-row { flex-direction: column; gap: 6px; }
    .setting-row-control { min-width: unset; width: 100%; }
  }
  @media (max-width: 700px) {
    #page-settings { padding: 12px; }
    .settings-layout {
      grid-template-columns: 1fr !important;
      gap: 10px;
    }
    .settings-nav {
      flex-direction: row; flex-wrap: wrap; gap: 4px;
      border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 4px;
    }
    .settings-nav-item { padding: 6px 10px; font-size: 11px; white-space: nowrap; min-height: 36px; }
    .settings-nav-divider { display: none; }
    .settings-nav-group { width: 100%; padding: 6px 2px 0; }
    /* UV1 (1 Oct): on a phone the nav is one line, "⚙ Shop Profile ▾"; a tap opens the groups and Find (snavOpen) */
    .settings-nav-current { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 600 15px var(--font-ui, 'DM Sans', sans-serif); cursor: pointer; text-align: left; }
    .settings-nav-current .snav-current-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .settings-nav-current .snav-current-chev { color: var(--text3); transition: transform .15s; }
    .settings-nav.snav-open .settings-nav-current .snav-current-chev { transform: rotate(180deg); }
    .settings-nav:not(.snav-open) > :not(.settings-nav-current) { display: none !important; }
    .settings-nav:not(.snav-open) { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
    /* ST1 on a phone: each group a full-width fold, its items as wrapping chips */
    .settings-find, .settings-nav-scope, .settings-nav-fold { width: 100%; }
    .settings-nav-fold > summary { padding: 6px 4px 2px; }
    .settings-nav-items { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 2px 0 4px; }
    .pref-row .pref-select { min-width: 0; width: 100%; }
    .setting-row { flex-direction: column; gap: 6px; }
    .setting-row-control { min-width: unset; width: 100%; }
    .settings-section-body { padding: 12px; }
    .settings-section-header { padding: 10px 12px; }
    #cloud-connect-status { word-break: break-word; }
  }

  .settings-section {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; min-width: 0;
  }
  .settings-section-header {
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    background: var(--surface2);
  }
  .settings-section-header h4 { font-size: 13px; font-weight: 700; }
  .settings-section-header p { font-size: 12px; color: var(--text3); margin-top: 2px; }
  .settings-section-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; word-wrap: break-word; }
  .settings-section-body * { max-width: 100%; }
  .settings-section-body input, .settings-section-body select { box-sizing: border-box; }

  .setting-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    flex-wrap: wrap;
  }
  .setting-row-label { flex: 1; min-width: 140px; }
  .setting-row-label strong { font-size: 13px; font-weight: 600; display: block; }
  .setting-row-label span { font-size: 12px; color: var(--text3); margin-top: 2px; display: block; }
  .setting-row-control { flex-shrink: 0; min-width: 200px; }
  .setting-row-control input, .setting-row-control select, .setting-row-control textarea {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 13px;
    color: var(--text); background: var(--surface); outline: none; transition: border 0.15s;
  }
  .setting-row-control input:focus,
  .setting-row-control select:focus,
  .setting-row-control textarea:focus { border-color: var(--accent); }
  .setting-row-control textarea { resize: vertical; min-height: 70px; }

  /* Toggle switch */
  .toggle-wrap { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
  .toggle {
    position: relative; width: 40px; height: 22px; flex-shrink: 0;
  }
  .toggle input { opacity: 0; width: 0; height: 0; }
  .toggle-slider {
    position: absolute; inset: 0; background: var(--border2);
    border-radius: 22px; cursor: pointer; transition: 0.2s;
  }
  .toggle-slider:before {
    content: ''; position: absolute;
    width: 16px; height: 16px; border-radius: 50%;
    left: 3px; top: 3px; background: white;
    transition: 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .toggle input:checked + .toggle-slider { background: var(--accent); }
  .toggle input:checked + .toggle-slider:before { transform: translateX(18px); }
  .toggle-label { font-size: 13px; color: var(--text2); }

  /* Logo preview */
  .logo-preview-wrap {
    display: flex; align-items: center; gap: 14px;
  }
  .logo-preview {
    width: 56px; height: 56px; border-radius: 12px;
    background: var(--accent); display: flex;
    align-items: center; justify-content: center;
    font-size: 26px; border: 2px solid var(--border);
    transition: background 0.2s;
  }
  .logo-preview-info { font-size: 12px; color: var(--text3); line-height: 1.6; }

  /* Color swatch picker */
  .color-swatches { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
  .color-swatch {
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; transition: all 0.15s;
  }
  .color-swatch:hover { transform: scale(1.15); }
  .color-swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px white, 0 0 0 4px var(--text); }

  /* Discount codes table in settings */
  .dc-table { width: 100%; border-collapse: collapse; }
  /* a narrow screen (an iPad upright, the phone) scrolls the table in its card, not the page (the page audit, 30 Sep) */
  .dc-scroll { overflow-x: auto; max-width: 100%; }
  .dc-table th { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }
  .dc-table td { padding: 8px 10px; font-size: 13px; border-bottom: 1px solid var(--border); }
  .dc-table tr:last-child td { border-bottom: none; }
  .dc-table tr:hover td { background: var(--surface2); }

  .add-dc-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
  .add-dc-row .form-group { flex: 1; min-width: 100px; }

  /* Danger zone */
  .danger-zone { border-color: var(--red) !important; }
  .danger-zone .settings-section-header { background: var(--red-light); border-bottom-color: #fecaca; }
  .danger-zone .settings-section-header h4 { color: var(--red); }
  .btn-danger {
    padding: 9px 18px; background: var(--red); color: white;
    border: none; border-radius: var(--radius-sm);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
  }
  .btn-danger:hover { background: #b91c1c; }

  /* Shop preview card */
  .shop-preview {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px;
    display: flex; align-items: center; gap: 14px;
  }
  .shop-preview-logo {
    width: 48px; height: 48px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
  }
  .shop-preview-name { font-size: 15px; font-weight: 700; }
  .shop-preview-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }

  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 6px; }

  /* ========== VARIANT PICKER MODAL ========== */
  #variant-modal .modal { width: 520px; }
  .vm-product-header { display: flex; align-items: center; gap: 14px; padding: 16px 24px; background: var(--surface2); border-bottom: 1px solid var(--border); }
  .vm-product-emoji { font-size: 36px; }
  .vm-product-name { font-size: 16px; font-weight: 700; }
  .vm-product-price { font-size: 13px; color: var(--accent); font-family: var(--font-num, 'DM Mono', monospace); font-weight: 600; margin-top: 2px; }
  .vm-step { display: none; }
  .vm-step.active { display: block; }
  .vm-step-title { font-size: 12px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
  .vm-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); margin-bottom: 16px; flex-wrap: wrap; }
  .vm-breadcrumb .bc-item { color: var(--accent); font-weight: 600; cursor: pointer; }
  .vm-breadcrumb .bc-item:hover { text-decoration: underline; }
  .vm-breadcrumb .bc-current { color: var(--text2); font-weight: 500; }
  .vm-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 2px; }
  .vm-options::-webkit-scrollbar { width: 4px; }
  .vm-options::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
  .vm-option { padding: 10px 12px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; transition: all 0.15s; text-align: left; position: relative; overflow: hidden; width: 100%; font-family: var(--font-ui, 'DM Sans', sans-serif); }
  .vm-option:hover:not(.out) { border-color: var(--accent); background: var(--accent-light); }
  .vm-option.out { opacity: 0.45; cursor: not-allowed; }
  .vm-option-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
  .vm-option-sub { font-size: 11px; color: var(--text3); margin-top: 3px; }
  .vm-option-price { font-size: 11px; color: var(--accent); font-family: var(--font-num, 'DM Mono', monospace); font-weight: 600; margin-top: 4px; }
  .vm-option-stock { position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; }
  .vm-add-new-wrap { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
  .vm-add-new-btn { width: 100%; padding: 9px 14px; border: 1.5px dashed var(--accent); background: var(--accent-light); color: var(--accent); border-radius: var(--radius); cursor: pointer; font-size: 13px; font-weight: 600; text-align: left; transition: all 0.15s; }
  .vm-add-new-btn:hover { background: var(--accent); color: #fff; }
  .vm-new-input-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
  .vm-new-input { flex: 1; padding: 8px 12px; border: 1.5px solid var(--accent); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 13px; outline: none; }
  .vm-new-confirm-btn { padding: 8px 14px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .vm-new-confirm-btn:hover { background: var(--accent-hover); }
  .has-variants-badge { position: absolute; bottom: 8px; right: 8px; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 8px; background: var(--purple-light); color: var(--purple); border: 1px solid #ddd9f9; }

  /* Variant settings in product modal */
  .variant-group-box { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 4px; }
  .variant-group-header { padding: 10px 14px; background: var(--surface2); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
  .variant-group-header span { font-size: 12px; font-weight: 700; color: var(--text2); }
  .variant-group-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
  .variant-options-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
  .variant-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; background: var(--accent-light); border: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 500; }
  .variant-tag-remove { background: none; border: none; cursor: pointer; color: var(--accent); font-size: 14px; line-height: 1; padding: 0; }
  .variant-tag-remove:hover { color: var(--red); }
  .vgp-tag-draggable { cursor: grab; user-select: none; }
  .vgp-tag-draggable:active { cursor: grabbing; }
  .variant-tag-handle { opacity: 0.5; font-size: 11px; letter-spacing: -1px; }
  .vgp-tag-dragging { opacity: 0.35; }
  .vgp-tag-drop-before { box-shadow: -3px 0 0 0 var(--accent); }
  .vgp-tag-drop-after { box-shadow: 3px 0 0 0 var(--accent); }
  .variant-add-row { display: flex; gap: 6px; }
  .variant-add-row input { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 12px; outline: none; }
  .variant-add-row input:focus { border-color: var(--accent); }
  .variant-add-row button { padding: 7px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
  .variant-add-row button:hover { background: var(--accent); border-color: var(--accent); color: white; }
  .variants-enabled-row { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
  .variants-enabled-row label { font-size: 13px; font-weight: 600; }
  .variant-stock-section h5 { font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; }
  .vst { width: 100%; border-collapse: collapse; font-size: 12px; }
  .vst th { padding: 6px 8px; text-align: left; color: var(--text3); font-size: 11px; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid var(--border); background: var(--surface2); }
  .vst td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .vst tr:last-child td { border-bottom: none; }
  .vst input { padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-ui, 'DM Sans', sans-serif); outline: none; }
  .vst input[type=number] { width: 75px; }
  .vst input[type=text] { width: 90px; }
  .vst input:focus { border-color: var(--accent); }

  /* ===== INVENTORY PAGINATION ===== */
  .table-footer {
    padding: 12px 16px; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--surface2); flex-wrap: wrap; gap: 10px; min-height: 52px;
  }
  .table-footer-info { font-size: 12px; color: var(--text3); }
  .table-footer-info strong { color: var(--text); }
  .pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  .pg-btn {
    min-width: 34px; height: 34px; padding: 0 10px;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface); font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-size: 13px; font-weight: 500; color: var(--text2);
    cursor: pointer; transition: all 0.12s;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pg-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
  .pg-btn.pg-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
  .pg-btn:disabled { opacity: 0.35; cursor: not-allowed; }
  .pg-ellipsis { font-size: 13px; color: var(--text3); padding: 0 2px; line-height: 34px; }
  .per-page-wrap {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--text3);
  }
  .per-page-wrap select {
    padding: 5px 8px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-size: 12px; color: var(--text); background: var(--surface); outline: none; cursor: pointer;
  }
  .per-page-wrap select:focus { border-color: var(--accent); }

  /* ===== IMPORT / EXPORT ===== */
  .btn-green {
    padding: 9px 16px; background: var(--green); color: white;
    border: none; border-radius: var(--radius-sm);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .btn-green:hover { background: #15803d; }
  .btn-amber {
    padding: 9px 16px; background: var(--amber); color: white;
    border: none; border-radius: var(--radius-sm);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .btn-amber:hover { background: #b45309; }

  /* Import modal specifics */
  .import-drop-zone {
    border: 2.5px dashed var(--border2); border-radius: var(--radius);
    padding: 36px 20px; text-align: center; cursor: pointer;
    transition: all 0.15s; background: var(--surface2);
  }
  .import-drop-zone:hover, .import-drop-zone.drag-over {
    border-color: var(--accent); background: var(--accent-light);
  }
  .import-drop-zone input { display: none; }
  .import-icon { font-size: 36px; margin-bottom: 10px; }
  .import-result {
    margin-top: 14px; padding: 14px; border-radius: var(--radius-sm);
    font-size: 13px; display: none;
  }
  .import-result.success { display:block; background: var(--green-light); border: 1px solid #bbf7d0; color: var(--green); }
  .import-result.error   { display:block; background: var(--red-light);   border: 1px solid #fecaca; color: var(--red); }
  .import-preview {
    max-height: 200px; overflow-y: auto; margin-top: 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 12px;
  }
  .import-preview table { width: 100%; border-collapse: collapse; }
  .import-preview th { background: var(--surface2); padding: 6px 10px; font-weight: 600; color: var(--text3); font-size: 11px; text-align: left; border-bottom: 1px solid var(--border); }
  .import-preview td { padding: 5px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
  .import-preview tr:last-child td { border-bottom: none; }

  .scroll-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--radius-sm);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s; border: 1px solid var(--border);
    background: var(--surface); color: var(--text2);
  }
  .scroll-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

  /* ===== REPAIR TEMPLATE SETTINGS MODAL ===== */
  .tpl-modal { width: 720px; max-width: 96vw; max-height: 90dvh; overflow: hidden; display: flex; flex-direction: column; }
  .tpl-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); background: var(--surface2); flex-shrink: 0; overflow-x: auto; }
  .tpl-tab {
    padding: 10px 16px; border: none; background: none; cursor: pointer;
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 12px; font-weight: 600;
    color: var(--text3); white-space: nowrap; border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all 0.15s;
  }
  .tpl-tab:hover { color: var(--text); }
  .tpl-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--surface); }
  .tpl-panel { display: none; flex-direction: column; gap: 14px; padding: 20px; overflow-y: auto; flex: 1; }
  .tpl-panel.active { display: flex; }
  .tpl-section-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text3); margin-bottom: 6px;
  }
  .tpl-checklist { display: flex; flex-direction: column; gap: 6px; }
  .tpl-check-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: var(--surface2);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
  }
  .tpl-check-item span { flex: 1; font-size: 13px; color: var(--text); }
  .tpl-check-item button {
    border: none; background: none; cursor: pointer; color: var(--red);
    font-size: 14px; padding: 0 4px; line-height: 1;
  }
  .tpl-check-item button:hover { color: #b91c1c; }
  .tpl-add-row { display: flex; gap: 8px; margin-top: 4px; }
  .tpl-add-row input {
    flex: 1; padding: 7px 10px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-size: 13px; outline: none;
  }
  .tpl-add-row input:focus { border-color: var(--accent); }
  .tpl-textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-size: 13px; outline: none; resize: vertical; line-height: 1.6;
    min-height: 120px;
  }
  .tpl-textarea:focus { border-color: var(--accent); }
  .tpl-repair-types { display: flex; flex-direction: column; gap: 6px; }
  .tpl-type-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; background: var(--surface2);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
  }
  .tpl-type-item span { flex: 1; font-size: 13px; }
  .tpl-type-item button { border: none; background: none; cursor: pointer; color: var(--red); font-size: 14px; padding: 0 4px; }
  .tpl-hint { font-size: 11px; color: var(--text3); line-height: 1.6; }
  .tpl-save-banner {
    padding: 10px 16px; background: var(--green-light); border-top: 1px solid #bbf7d0;
    font-size: 13px; font-weight: 600; color: var(--green);
    text-align: center; display: none;
  }

  /* ===== DEVICE PHOTOS SECTION ===== */
  .photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }
  .photo-thumb {
    position: relative; aspect-ratio: 1/1;
    border-radius: var(--radius-sm); overflow: hidden;
    border: 1px solid var(--border); background: var(--surface2);
    cursor: pointer;
  }
  .photo-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.15s;
  }
  .photo-thumb:hover img { transform: scale(1.04); }
  .photo-thumb .photo-del {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,0.6); color: white;
    border: none; font-size: 13px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
  }
  .photo-thumb:hover .photo-del { opacity: 1; }
  .photo-thumb .photo-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.5); color: white;
    font-size: 9px; padding: 2px 5px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* where the photo's backup stands (TASKS-SPRINT-9 M62) */
  .photo-thumb .photo-up {
    position: absolute; top: 4px; left: 4px; max-width: calc(100% - 56px);
    background: rgba(0,0,0,0.6); color: white; font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .photo-thumb .photo-up:empty { display: none; }
  .photo-thumb .photo-up.done { background: rgba(21,128,61,0.85); }
  /* a finger can't hover: on a touch screen the ✕ is always there and 44 px, the lightbox's buttons too */
  body.layout-phone .photo-thumb .photo-del, body.layout-tablet .photo-thumb .photo-del {
    opacity: 1; width: 44px; height: 44px; top: 0; right: 0; font-size: 16px; background: rgba(0,0,0,0.55);
  }
  body.layout-phone .lb-nav, body.layout-tablet .lb-nav { width: 52px; height: 52px; font-size: 24px; }
  body.layout-phone .lb-close, body.layout-tablet .lb-close { min-height: 44px; padding: 10px 20px; }
  @media (pointer: coarse) {
    .photo-thumb .photo-del { opacity: 1; width: 44px; height: 44px; top: 0; right: 0; font-size: 16px; }
    .lb-nav { width: 52px; height: 52px; }
    .lb-close { min-height: 44px; }
  }
  .photo-add-btn {
    aspect-ratio: 1/1; border-radius: var(--radius-sm);
    border: 2px dashed var(--border); background: var(--surface2);
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; cursor: pointer; gap: 6px;
    font-size: 11px; color: var(--text3); font-weight: 600;
    transition: all 0.15s; min-height: 90px;
  }
  .photo-add-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
  .photo-add-btn .photo-add-icon { font-size: 24px; }
  .photo-count-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--accent-light); color: var(--accent);
    border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700;
    margin-left: 8px;
  }
  /* Lightbox */
  .photo-lightbox {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.92); align-items: center; justify-content: center;
    flex-direction: column; gap: 12px;
  }
  .photo-lightbox.open { display: flex; }
  .photo-lightbox img {
    max-width: 92vw; max-height: 78dvh; border-radius: 8px;
    object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  }
  .lb-toolbar {
    display: flex; gap: 10px; align-items: center;
  }
  .lb-nav {
    background: rgba(255,255,255,0.15); border: none; color: white;
    width: 38px; height: 38px; border-radius: 50%; font-size: 18px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
  }
  .lb-nav:hover { background: rgba(255,255,255,0.3); }
  .lb-close {
    background: rgba(255,255,255,0.15); border: none; color: white;
    padding: 8px 18px; border-radius: 20px; font-size: 13px; cursor: pointer;
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-weight: 600;
  }
  .lb-counter { color: rgba(255,255,255,0.7); font-size: 13px; min-width: 60px; text-align: center; }
  .lb-caption { color: rgba(255,255,255,0.7); font-size: 12px; max-width: 400px; text-align: center; }

  /* ===== POS PAGES SYSTEM ===== */
  .pos-toolbar {
    display: flex; gap: 8px; align-items: center; flex-shrink: 0;
  }
  .pos-manage-btn {
    flex-shrink: 0; padding: 7px 13px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--surface2);
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 12px; font-weight: 600;
    cursor: pointer; color: var(--text2); transition: all 0.15s; white-space: nowrap;
  }
  .pos-manage-btn:hover { border-color: var(--accent); color: var(--accent); }
  /* one compact row: [By item | By model] [category chips…] [small search] [＋ Add] —
     the search is rarely used, so it stays small (wider while typing) */
  .pos-toolbar { align-items: flex-start; }
  /* Repair Jobs header folded (rjToggleHead): title row + tabs hidden, a slim bar instead */
  .rj-foldbar { display: none; }
  .repair-list-header.rj-folded > div:first-child, .repair-list-header.rj-folded #repair-view-tabs-bar { display: none !important; }
  .repair-list-header.rj-folded .rj-foldbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; }
  .rj-foldbar-title { font-size: 13px; font-weight: 800; color: var(--text); }
  .rj-foldbar-title span { font-weight: 600; color: var(--text2); }
  .rj-foldbar .btn-secondary { font-size: 11px; padding: 4px 10px; }
  /* every category chip visible: they wrap onto more lines instead of scrolling sideways */
  .pos-toolbar .cat-filter { flex: 1; min-width: 0; align-items: center; padding-bottom: 0; flex-wrap: wrap; overflow: visible; row-gap: 6px; }
  .pos-toolbar .cat-btn { white-space: nowrap; flex-shrink: 0; }
  /* narrow screens: the chips get their own full-width row under the search, instead of
     one chip per line in a thin column beside it */
  @media (max-width: 900px) {
    .pos-toolbar { flex-wrap: wrap; }
    .pos-toolbar .cat-filter { order: 3; flex-basis: 100%; }
    .pos-toolbar .search-input-wrap { flex: 1 1 170px; }
  }
  .pos-toolbar .search-input-wrap { flex: 0 0 170px; transition: flex-basis 0.15s; }
  .pos-toolbar .search-input-wrap:focus-within { flex-basis: 260px; }
  .pos-toolbar .search-input-wrap input { padding: 6px 10px 6px 30px; font-size: 12px; }
  .pos-toolbar .search-input-wrap .search-icon { left: 9px; font-size: 12px; }
  .pos-toolbar .pos-manage-btn { padding: 5px 11px; }
  .pos-toolbar .cat-btn { padding: 4px 10px; }

  /* Page tabs row — small pill tabs that wrap onto a second row instead of
     overflowing/hiding behind horizontal scroll (user: "too long cannot see
     all of them... stack them in two rows... very compact"). Capped at
     roughly two compact rows' height; a shop with enough tabs to exceed
     that gets a vertical scrollbar on the bar itself rather than growing
     forever into the product grid below. */
  .pos-pages-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    border-bottom: 2px solid var(--border);
    overflow-x: visible; overflow-y: auto; max-height: 56px; flex-shrink: 0;
    padding: 2px 4px; row-gap: 2px;
    scrollbar-width: none;
  }
  .pos-pages-bar::-webkit-scrollbar { display: none; }
  .pos-page-tab {
    display: flex; align-items: center; gap: 4px;
    padding: 3px 8px; font-size: 11.5px; font-weight: 700; line-height: 1.25;
    color: var(--text); cursor: pointer; white-space: nowrap;
    border: 1.5px solid transparent; border-radius: var(--radius-sm);
    transition: all 0.15s; user-select: none; position: relative;
  }
  .pos-page-tab:hover { color: var(--text); background: var(--surface2); }
  .pos-page-tab.active {
    color: var(--accent); border-color: var(--accent);
    background: var(--accent-light);
  }
  .pos-page-tab .tab-count {
    font-size: 9px; font-weight: 700; padding: 1px 5px;
    border-radius: 10px; background: var(--surface2); color: var(--text2);
  }
  .pos-page-tab.active .tab-count {
    background: var(--accent); color: white;
  }
  /* #inv-panel-matrices relocated into the POS flyout (posOpenMatrixFlyout)
     — "+ Add Item" and "⋯ More" (Export/Sweep/reorder-point actions) are
     catalog-admin/inventory-management controls, not part of the pos-mode
     tap-to-cart experience; matrix.js already withholds the equivalent
     cell-level and header-level affordances at the JS level (_matrixMode),
     these two are static HTML so they're hidden the same way here. */
  .pos-page-tab[draggable="true"] { cursor: grab; }
  .pos-page-tab[draggable="true"]:active { cursor: grabbing; }
  .pos-page-tab.drag-over {
    border-left: 3px solid var(--accent);
    margin-left: -3px;
  }
  .pos-page-tab.dragging {
    opacity: 0.35;
    background: var(--accent-light);
  }
  .pos-add-tab-btn {
    padding: 8px 12px; font-size: 18px; color: var(--text3);
    cursor: pointer; border-radius: var(--radius-sm);
    transition: all 0.15s; flex-shrink: 0;
    background: none; border: none; font-family: inherit;
  }
  .pos-add-tab-btn:hover { color: var(--accent); background: var(--accent-light); }
  .pos-add-tab-btn { font-size: 11.5px; font-weight: 700; padding: 3px 8px; color: var(--text); }
  .pos-add-tab-btn.active { color: var(--accent); background: var(--accent-light); }

  /* remove badge on product cards */
  .product-card .pc-remove-btn {
    display: none; position: absolute; top: 5px; right: 5px; z-index: 6;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(220,38,38,0.85); color: #fff; border: none;
    font-size: 13px; line-height: 1; cursor: pointer;
    align-items: center; justify-content: center;
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-weight: 700;
  }
  .product-card:hover .pc-remove-btn { display: flex; }

  /* Add Products modal */

  /* ===== USER / LOGIN SYSTEM ===== */
  #login-screen {
    position: fixed; inset: 0; z-index: 9000;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 24px;
  }
  #login-screen.hidden { display: none; }

  /* ── Device Guard (Kiosk Security) ────────────────────────────── */
  #device-guard {
    position: fixed; inset: 0; z-index: 9999;
    background: #0f172a;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 20px;
  }
  #device-guard.hidden { display: none; }
  .dg-card {
    background: #1e293b; border-radius: 16px; padding: 40px;
    width: min(420px, 92vw); text-align: center;
    border: 1px solid #334155; box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  }
  .dg-lock-icon {
    width: 72px; height: 72px; border-radius: 50%; background: #ef4444;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; margin: 0 auto 20px; cursor: default;
    user-select: none; -webkit-user-select: none;
    transition: transform 0.15s;
  }
  .dg-lock-icon:active { transform: scale(0.9); }
  .dg-title { font-size: 20px; font-weight: 800; color: #f1f5f9; margin-bottom: 6px; }
  .dg-sub { font-size: 13px; color: #94a3b8; line-height: 1.6; }
  .dg-admin-panel { display: none; margin-top: 20px; }
  .dg-admin-panel.show { display: block; }
  .dg-input {
    width: 100%; padding: 12px 16px; border-radius: 8px; border: 1px solid #475569;
    background: #0f172a; color: #f1f5f9; font-family: var(--font-num, 'DM Mono', monospace);
    font-size: 14px; outline: none; letter-spacing: 2px; text-align: center;
    margin-bottom: 12px;
  }
  .dg-input:focus { border-color: #3b82f6; }
  .dg-btn {
    width: 100%; padding: 12px; border-radius: 8px; border: none;
    font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
  }
  .dg-btn-primary { background: #2563eb; color: white; }
  .dg-btn-primary:hover { background: #1d4ed8; }
  .dg-error { color: #f87171; font-size: 12px; margin-top: 8px; min-height: 18px; }
  .dg-footer { font-size: 11px; color: #475569; margin-top: 16px; }
  .login-card {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 36px 40px;
    width: min(400px, 94vw);
  }
  .login-logo {
    text-align: center; margin-bottom: 24px;
  }
  .login-logo-icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--accent); display: flex; align-items: center;
    justify-content: center; font-size: 26px; color: white;
    margin: 0 auto 10px;
  }
  .login-title { font-size: 20px; font-weight: 800; text-align: center; }
  .login-sub   { font-size: 13px; color: var(--text3); text-align: center; margin-top: 4px; }

  .user-select-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px; margin-bottom: 20px;
  }
  .user-select-btn {
    padding: 14px 12px; border-radius: var(--radius);
    border: 2px solid var(--border); background: var(--surface2);
    cursor: pointer; text-align: center; transition: all 0.15s;
    font-family: var(--font-ui, 'DM Sans', sans-serif);
  }
  .user-select-btn:hover { border-color: var(--accent); background: var(--accent-light); }
  .user-select-btn.selected { border-color: var(--accent); background: var(--accent-light); }
  .user-btn-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: white;
    margin: 0 auto 8px;
  }
  .user-btn-name  { font-size: 13px; font-weight: 700; }
  .user-btn-role  { font-size: 11px; color: var(--text3); margin-top: 2px; }

  .pin-dots {
    display: flex; gap: 10px; justify-content: center; margin: 16px 0 10px;
  }
  .pin-dot {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--border2); background: transparent;
    transition: all 0.15s;
  }
  .pin-dot.filled { background: var(--accent); border-color: var(--accent); }

  .pin-pad {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  }
  .pin-key {
    padding: 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface);
    font-size: 18px; font-weight: 600; cursor: pointer;
    font-family: var(--font-num, 'DM Mono', monospace); transition: all 0.12s;
    text-align: center;
  }
  .pin-key:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
  .pin-key:active { transform: scale(0.94); }
  .pin-key.del  { font-size: 14px; color: var(--text3); }
  .pin-key.enter { background: var(--accent); color: white; border-color: var(--accent); }
  .pin-key.enter:hover { background: var(--accent-hover); }

  /* Topbar user chip */
  .user-chip {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 3px 8px 3px 3px; border-radius: 20px;
    border: 1px solid var(--border); background: var(--surface2);
    transition: all 0.15s; user-select: none; flex-shrink: 0;
  }
  .user-chip:hover { border-color: var(--accent); background: var(--accent-light); }
  .user-chip-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: white; flex-shrink: 0;
  }
  .user-chip-name { font-size: 11px; font-weight: 600; white-space: nowrap; }
  .user-chip-role { font-size: 9px; color: var(--text3); white-space: nowrap; }

  /* User management in settings */
  .user-mgmt-list { display: flex; flex-direction: column; gap: 8px; }
  .user-mgmt-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface2);
  }
  .user-mgmt-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: white; flex-shrink: 0;
  }
  .user-mgmt-info { flex: 1; min-width: 0; }
  .user-mgmt-name { font-size: 13px; font-weight: 700; }
  .user-mgmt-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
  .role-badge {
    font-size: 10px; font-weight: 700; padding: 3px 9px;
    border-radius: 10px; white-space: nowrap;
  }
  /* Permission matrix */
  .perm-modal { width: min(640px, 96vw); max-height: 86dvh; display: flex; flex-direction: column; }
  .perm-grid {
    display: grid;
    grid-template-columns: 1fr repeat(5, auto);
    gap: 0;
    font-size: 12px;
  }
  .perm-grid-header {
    background: var(--surface2); font-weight: 700; font-size: 11px;
    padding: 8px 10px; border-bottom: 2px solid var(--border);
    text-align: center; position: sticky; top: 0; z-index: 2;
  }
  .perm-grid-header:first-child { text-align: left; }
  .perm-row-label {
    padding: 8px 10px; border-bottom: 1px solid var(--border);
    font-weight: 500; display: flex; flex-direction: column; gap: 2px;
  }
  .perm-row-label span { font-size: 10px; color: var(--text3); font-weight: 400; }
  .perm-cell {
    padding: 8px 10px; border-bottom: 1px solid var(--border);
    text-align: center; display: flex; align-items: center; justify-content: center;
  }
  .perm-check {
    width: 18px; height: 18px; border-radius: 4px;
    border: 1.5px solid var(--border2); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; transition: all 0.12s; background: var(--surface);
  }
  .perm-check.on { background: var(--accent); border-color: var(--accent); color: white; }
  .perm-check.locked { opacity: 0.3; cursor: not-allowed; }

  /* ── Hide main app when printing (so only the print iframe shows) ── */
  @media print {
    body > * { display: none !important; }
    #repair-print-iframe,
    #print-iframe {
      display: block !important;
      position: fixed !important;
      top: 0 !important; left: 0 !important;
      width: 100% !important; height: 100% !important;
      border: none !important;
    }
  }

  /* ── Touch screens (iPad tills): fingertip-sized targets, about 40 px, for the
     controls tapped all day — checkout tabs, category chips, payment methods,
     cart quantity. Mouse / trackpad tills are unchanged (pointer: fine). ── */
  @media (pointer: coarse) {
    .pos-page-tab { min-height: 40px; padding: 6px 12px; font-size: 13px; }
    .cat-btn, .cv-mode-btn { min-height: 38px; padding: 8px 14px; font-size: 13px; }
    .pm-btn, .pm-btn-square { min-height: 44px; font-size: 12px; padding: 4px 2px; white-space: normal; line-height: 1.15; }
    .ci-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .ci-qty-btn { width: 36px; height: 36px; font-size: 17px; }
    .ci-remove { min-width: 36px; min-height: 36px; font-size: 16px; }
    .sv2-subitem { min-height: 40px; display: flex; align-items: center; }
    input[type=checkbox], #split-pay-cb { width: 20px !important; height: 20px !important; }
    .disc-type-btn { min-width: 36px; min-height: 36px; font-size: 14px; }
    .cv-link { padding: 10px 6px; }
    .pos-add-tab-btn { min-height: 36px; }
  }

/* ========== FOCUS: one ring for keyboard and scanner users (TASKS-DAY-29 D3) ==========
   docs/DESIGN_SYSTEM.md §focus: a 2 px accent outline, 2 px offset, plus a soft 6 px halo. A button or
   link shows it when the keyboard brought the focus (:focus-visible); a field shows the accent border
   and the halo on EVERY focus, because a barcode scanner is a keyboard that types into whatever has
   focus, and some browsers don't count its typing as keyboard focus. Many fields set outline:none and
   only changed the border colour — the halo is a box-shadow, so it shows there too.
   test/e2e/focus-ring.js */
:root { --focus-halo: rgba(37, 99, 235, 0.22); --focus-halo: color-mix(in srgb, var(--accent) 24%, transparent); }
button:focus-visible, a[href]:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, summary:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-halo);
}

/* the checkout grid drawn in parts (js/catalog/catalog-views.js, TASKS-OPTIMIZE-2 P-M2): the marker that brings the next cards */
.cv-more { grid-column: 1 / -1; height: 1px; }

/* ── Settings → Receipt: the steps beside the receipt (js/settings/receipt.js rc…) ── */
.rc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.rc-form { min-width: 0; }
.rc-intro { font-size: 13px; color: var(--text2); background: var(--accent-light); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.rc-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; margin-right: 6px; vertical-align: 1px; }
.rc-opt { font-weight: 500; color: var(--text3); font-size: 11px; margin-left: 4px; }
.rc-shows { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-show { position: relative; cursor: pointer; }
.rc-show input { position: absolute; opacity: 0; pointer-events: none; }
.rc-show span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text3); background: var(--surface); text-decoration: line-through; }
.rc-show input:checked + span { border-color: var(--accent); background: var(--accent-light); color: var(--accent); text-decoration: none; }
.rc-show input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-logo { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.rc-logo-drop { width: 170px; height: 110px; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface2); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.rc-logo-ctl { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.rc-seg { display: flex; gap: 6px; }
.rc-seg .btn-secondary { flex: 1; font-size: 13px; padding: 8px; }
.rc-msg .setting-row-control { display: flex; flex-direction: column; gap: 6px; }
.rc-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-sugg button { font-size: 12px; padding: 5px 10px; border: 1px dashed var(--border); border-radius: 999px; background: var(--surface); color: var(--text2); cursor: pointer; }
.rc-sugg button:hover { border-color: var(--accent); color: var(--accent); }
.rc-looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.rc-look { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; min-height: 56px; }
.rc-look b { font-size: 13px; } .rc-look small { font-size: 11px; color: var(--text3); }
.rc-look.on { border-color: var(--accent); background: var(--accent-light); }
.rc-look[data-look="easy"] b { font-family: Arial, sans-serif; font-size: 15px; } .rc-look[data-look="compact"] b { font-family: 'Courier New', monospace; font-size: 12px; }
.rc-fine { margin-top: 6px; } .rc-fine > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); padding: 8px 0; }
.rc-side { position: sticky; top: 8px; }
.rc-side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.rc-side-head { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; margin-bottom: 10px; }
.rc-side-head::-webkit-details-marker { display: none; }
.rc-side-head small { font-weight: 500; color: var(--text3); font-size: 11px; margin-left: 4px; }
.rc-paper-wrap { background: var(--surface2); border-radius: var(--radius-sm); padding: 14px 8px; max-height: calc(100vh - 260px); overflow: auto; display: flex; justify-content: center; }
.rc-paper { width: 260px; background: #fff; color: #111; padding: 14px 12px 18px; line-height: 1.6; font-size: 11px; box-shadow: 0 2px 10px rgba(0,0,0,.12);
  -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom/12px 8px repeat-x;
          mask: linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom/12px 8px repeat-x; }
.rc-paper[data-paper="58mm"] { width: 200px; } .rc-paper[data-paper="A4"] { width: 290px; }
.rc-side-actions { display: flex; gap: 8px; margin-top: 10px; } .rc-side-actions button { flex: 1; min-height: 40px; }
.rc-unsaved { margin-top: 8px; font-size: 12px; color: var(--amber, #b45309); background: var(--amber-light, #fff7e6); border-radius: var(--radius-sm); padding: 6px 10px; }
@media (max-width: 900px) {
  .rc-layout { grid-template-columns: 1fr; }
  .rc-side { order: -1; position: sticky; top: 0; z-index: 5; }
  .rc-paper-wrap { max-height: 50vh; }
  .rc-looks { grid-template-columns: 1fr; }
}
.rc-step #rcpt-store-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
/* The receipt keeps in sight while the steps scroll: its column is sticky, and a box that hides its overflow
   would hold it (overflow: hidden makes a scroll container that doesn't scroll). "clip" cuts the same way and
   lets the page's own scroll carry it. */
#spanel-receipt { overflow-x: clip; }
.settings-layout > *:has(> #spanel-receipt.active) { overflow: clip; }