/* Live synchronization and duplicate-purchase warnings (2026.10.15). */
.ticket-sync-health { margin:0 0 10px; padding:8px 12px; background:#12271f; border:1px solid #2b6450; border-radius:8px; font-size:12px; overflow-wrap:anywhere; }
.ticket-sync-health.problem { background:#392128; border-color:#b94d59; color:#ffd2d7; }
.ticket-sync-health summary { cursor:pointer; }
.ticket-sync-health .sync-account { display:flex; gap:8px 16px; flex-wrap:wrap; padding:8px 0; border-top:1px solid #ffffff24; }
.ticket-sync-health .sync-account span { flex:1 1 220px; }
.ticket-source-time { margin:8px 0; line-height:1.7; }
.purchase-duplicate-notice.has-duplicates { padding:12px; border:1px solid #d8a43b; background:#392f19; border-radius:8px; color:#ffe2a6; }
.purchase-duplicate-notice span { display:block; margin:5px 0; }
:root {
  --bg: #12141a;
  --bg2: #1a1d26;
  --card: #20242f;
  --card2: #272c3a;
  --border: #2f3542;
  --text: #e8eaf0;
  --muted: #8b92a5;
  --orange: #ff6a1f;
  --orange2: #ff8b4d;
  --green: #35c46f;
  --red: #ff5566;
  --yellow: #ffb020;
  --sidebar-w: 218px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text);
  font-size: 14px; min-height: 100vh;
}
::selection { background: rgba(255,106,31,.4); }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.muted { color: var(--muted); }
.danger { color: var(--red); }
.account-needs-auth { border-color: rgba(255,85,102,.7) !important; box-shadow: inset 4px 0 0 var(--red); }
.lead { color: var(--muted); margin-bottom: 12px; line-height: 1.5; }

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

/* ---------- Sidebar ---------- */
aside {
  width: var(--sidebar-w); flex-shrink: 0; background: linear-gradient(180deg, #1c1f29, #14161e);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; transition: width .2s;
}
aside.hidden-menu { width: 0; min-width: 0; border-right: none; overflow: hidden; visibility: hidden; pointer-events: none; }

/* Floating button that brings the menu back once it is fully hidden */
#menuRestore {
  position: fixed; top: 10px; left: 10px; z-index: 90; display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0; border-radius: 10px; font-size: 16px;
  background: linear-gradient(135deg, var(--orange), #ff4d00); color: #fff; border: none;
  box-shadow: 0 2px 12px rgba(255,106,31,.45); cursor: pointer;
}
#menuRestore[hidden] { display: none !important; }
#menuRestore:hover { filter: brightness(1.1); }
#menuRestore:focus-visible { outline: 3px solid rgba(255,139,77,.7); outline-offset: 2px; }
.brand { display: flex; align-items: center; gap: 9px; padding: 14px 12px; }
.logo {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--orange), #ff3d00); font-weight: 800; font-size: 17px; color: #fff;
  box-shadow: 0 2px 12px rgba(255,106,31,.45);
}
.brand h1 { font-size: 15px; font-weight: 400; white-space: nowrap; }
.brand h1 b { color: var(--orange); font-weight: 700; }
#collapseBtn { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 4px; }
#collapseBtn:hover { color: var(--text); }
aside nav { display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; flex: 1; }
aside nav button, .sidefoot button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; color: var(--muted); border: none; padding: 9px 10px;
  border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all .15s; white-space: nowrap;
}
aside nav button i, .sidefoot button i { font-style: normal; width: 18px; text-align: center; flex-shrink: 0; }
aside nav button:hover, .sidefoot button:hover { color: var(--text); background: var(--card); }
aside nav button.active { background: var(--orange); color: #fff; font-weight: 600; box-shadow: 0 2px 10px rgba(255,106,31,.35); }
.sidefoot { padding: 8px; border-top: 1px solid var(--border); }
.badge { background: var(--red); color: #fff; border-radius: 10px; padding: 1px 6px; font-size: 11px; margin-left: auto; }

main { flex: 1; padding: 18px; min-width: 0; container-type: inline-size; }

/* ---------- Controls ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
button, .button {
  background: var(--card); border: 1px solid var(--border); padding: 8px 13px; border-radius: 8px;
  cursor: pointer; font-size: 13px; text-decoration: none; color: var(--text); display: inline-block; transition: all .15s;
}
button:hover, .button:hover { border-color: var(--orange); }
button.primary, .button.primary {
  background: linear-gradient(135deg, var(--orange), #ff4d00); color: #fff; border: none; font-weight: 600;
  box-shadow: 0 2px 10px rgba(255,106,31,.3);
}
button.primary:hover { filter: brightness(1.1); }
button:disabled { opacity: .5; cursor: wait; }
input, select, textarea {
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
  font-family: inherit; background: var(--bg2); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--orange); }
input::placeholder, textarea::placeholder { color: #5a6070; }
input[type="date"] { color-scheme: dark; }
a { color: var(--orange2); }

/* ---------- Inbox ---------- */
#tab-inbox:not(.hidden) { display: flex; flex-direction: column; height: calc(100dvh - 36px - var(--ticket-sync-height, 44px)); min-height: 320px; }
#tab-inbox > .toolbar { flex: 0 0 auto; }
.split {
  --inbox-left: 300px;
  --inbox-right: 430px;
  --inbox-list-height: 260px;
  --split-handle-w: 10px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0; flex: 1; height: auto; min-height: 0; min-width: 0;
}
.split.stacked.has-order {
  grid-template-columns: minmax(260px, var(--inbox-left)) var(--split-handle-w) minmax(320px, 1fr);
}
.split.stacked .inbox-left-stack {
  min-width: 0; min-height: 0; display: grid;
  grid-template-rows: minmax(140px, var(--inbox-list-height)) 9px minmax(220px, 1fr);
}
.split.stacked .split-handle:not(.split-handle-right) { display: none; }
.split.stacked .split-handle-right { grid-column: 2; }
.split.stacked .order-panel { grid-column: 3; }
.split.stacked:not(.has-order) .inbox-left-stack { grid-column: 1 / -1; }
.split.three-column .inbox-left-stack { display: contents; }
.split.three-column {
  grid-template-columns: minmax(110px, var(--inbox-left)) var(--split-handle-w) minmax(180px, 1fr);
}
.split.three-column.has-order {
  grid-template-columns: minmax(110px, var(--inbox-left)) var(--split-handle-w) minmax(180px, 1fr)
    var(--split-handle-w) minmax(240px, var(--inbox-right));
}
.split.three-column .thread-list { grid-column: 1; }
.split.three-column .split-handle:not(.split-handle-right) { grid-column: 2; }
.split.three-column .thread-view { grid-column: 3; }
.split.three-column .split-handle-right { grid-column: 4; }
.split.three-column .order-panel { grid-column: 5; }
.split.three-column .split-row-handle { display: none; }
.split.three-column.chat-closed.has-order {
  grid-template-columns: minmax(110px, var(--inbox-left)) var(--split-handle-w) minmax(240px, 1fr);
}
.split.chat-closed .thread-view, .split.chat-closed .split-handle-right { display: none; }
.split.chat-closed .order-panel { grid-column: 3; }
.split.stacked.chat-closed .inbox-left-stack { grid-template-rows: minmax(0, 1fr); }
.split.stacked.chat-closed .split-row-handle { display: none; }
.inbox-left-stack .thread-list, .inbox-left-stack .thread-view { min-height: 0; }
.thread-list { width: auto; min-width: 0; overflow-y: auto; background: var(--card); border-radius: 12px; border: 1px solid var(--border); }
.thread-item:focus-visible {
  outline: 2px solid var(--orange); outline-offset: -3px; background: rgba(255,106,31,.10);
}
.thread-item { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.thread-item:hover { background: var(--card2); }
.thread-item.selected { background: rgba(255,106,31,.12); border-left: 3px solid var(--orange); }
.thread-item .who { font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.thread-item .who .acc { font-weight: 400; color: var(--muted); font-size: 12px; }
.thread-item .preview { color: var(--muted); font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-item.unanswered .who::before { content: "\25CF "; color: var(--orange); }
.inbox-attention-summary {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 9px 13px;
  border: 1px solid rgba(255, 176, 32, .58); border-left: 5px solid var(--yellow);
  border-radius: 10px; color: #fff2d6; background: rgba(255, 176, 32, .12);
}
.inbox-attention-summary strong { font-size: 14px; }
.inbox-attention-summary span:last-child { color: #d9c9ab; }
.inbox-attention-icon { font-size: 20px; line-height: 1; }
.thread-item.needs-reply { background: rgba(255, 176, 32, .07); border-left: 4px solid var(--yellow); padding-left: 8px; }
.thread-item.needs-reply:hover { background: rgba(255, 176, 32, .14); }
.thread-item.unread .who { color: #fff; }
.thread-item.selected.needs-reply { background: rgba(255, 176, 32, .19); border-left-color: var(--yellow); }
.thread-flags { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.thread-flags span { padding: 2px 6px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.thread-new { color: #fff; background: #b82a3a; }
.thread-reply { color: #1c1f29; background: var(--yellow); }
.thread-view { min-width: 0; background: var(--card); border-radius: 12px; border: 1px solid var(--border); display: flex; flex-direction: column; }
.thread-head { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.thread-head-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
#closeThreadView { padding: 7px 10px; font-weight: 700; }
.thread-view .placeholder { margin: auto; color: var(--muted); }
.thread-attention {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 9px; padding: 9px 13px;
  background: rgba(255, 176, 32, .17); border-bottom: 1px solid rgba(255, 176, 32, .5);
  color: #fff2d6;
}
.thread-attention strong { color: #fff; }
.thread-attention span:last-child { font-size: 12px; }
.msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 78%; padding: 9px 13px; border-radius: 12px; white-space: pre-wrap; line-height: 1.45; }
.msg.in { background: var(--card2); align-self: flex-start; border-bottom-left-radius: 3px; }
.msg.in.customer-latest {
  max-width: 88%; background: #35404c; border: 2px solid var(--yellow);
  box-shadow: 0 0 0 3px rgba(255, 176, 32, .10); color: #fff;
}
.customer-message-label { display: block; width: fit-content; margin-bottom: 6px; padding: 2px 7px; border-radius: 5px; background: var(--yellow); color: #171a20; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.msg.out { background: linear-gradient(135deg, rgba(255,106,31,.25), rgba(255,61,0,.2)); border: 1px solid rgba(255,106,31,.3); align-self: flex-end; border-bottom-right-radius: 3px; }
.msg .meta { font-size: 11px; color: var(--muted); margin-top: 5px; }
.replybox { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.replybox textarea { flex: 1 1 100%; resize: vertical; min-height: 44px; }
.order-panel {
  width: auto; min-width: 0; overflow-y: auto; background: var(--card);
  border-radius: 12px; border: 1px solid var(--border); padding: 12px;
  container-type: inline-size; container-name: order-details;
}
.split:not(.has-order) .split-handle-right { display: none; }
.split-handle { position: relative; cursor: col-resize; touch-action: none; user-select: none; }
.split-handle::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px;
  border-radius: 3px; transform: translateX(-50%); background: var(--border);
}
.split-handle:hover::before, .split-handle:focus-visible::before, .split-handle.dragging::before {
  width: 4px; background: var(--orange);
}
body.inbox-resizing { cursor: col-resize; user-select: none; }
.split-row-handle { position: relative; cursor: row-resize; touch-action: none; user-select: none; }
.split-row-handle::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px;
  transform: translateY(-50%); border-radius: 3px; background: var(--border); }
.split-row-handle:hover::before, .split-row-handle:focus-visible::before, .split-row-handle.dragging::before {
  height: 4px; background: var(--orange); }
body.inbox-row-resizing { cursor: row-resize; user-select: none; }
.account-warning-area:empty { display: none; }
.account-warning-area { flex: 0 0 auto; margin: 0 0 10px; }
.account-warning { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 9px 11px; border: 1px solid rgba(255,85,102,.62); border-radius: 9px;
  background: rgba(255,85,102,.10); color: #ffd4d8; }
.account-warning strong { color: var(--red); }
.account-warning-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.account-warning-show { font-size: 12px; color: var(--muted); }
.copy-inline { padding: 2px 6px; font: inherit; color: var(--orange2); background: transparent; border-color: transparent; }
.copy-inline:hover { background: rgba(255,106,31,.10); }
.message-product { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: rgba(77,159,255,.07); min-width: 0; }
.message-product img { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 7px; }
.message-product span { min-width: 0; overflow-wrap: anywhere; }
.seller-mini-result { margin-top: 6px; min-height: 18px; }
.order-panel h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 10px 0 6px; }
.order-panel h3:first-child { margin-top: 0; }
.ocard { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 14px; font-size: 13px; }
.ocard .row { display: flex; justify-content: space-between; gap: 8px; margin: 2px 0; }
.ocard .row .k { color: var(--muted); }
.note-item { border-left: 3px solid var(--orange); padding: 5px 8px; margin: 6px 0; background: var(--bg2); border-radius: 0 8px 8px 0; font-size: 12px; }
.note-item .by { color: var(--muted); font-size: 11px; display: flex; justify-content: space-between; gap: 6px; margin-top: 3px; }
.note-item .acts a { cursor: pointer; margin-left: 6px; text-decoration: none; }
.processing-helper { border-color: rgba(255,106,31,.45); background: rgba(255,106,31,.06); }
.copy-phone { display: block; width: 100%; margin: 5px 0; padding: 5px 7px; text-align: left;
  border-color: rgba(77,159,255,.45); background: rgba(77,159,255,.08); font-weight: 700; }
.older-orders-separator { display: flex; align-items: center; gap: 9px; margin: 16px 0 12px;
  color: #c084fc; font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.older-orders-separator::before, .older-orders-separator::after { content: ""; flex: 1; border-top: 2px dashed rgba(192,132,252,.55); }
.recipient-details { margin-top: 8px; padding: 8px; border: 1px dashed rgba(255,106,31,.55); border-radius: 8px; line-height: 1.45; }
.refreshOrder { padding: 2px 7px; margin-left: 4px; font-size: 14px; }
.buyer-identity { display: flex; flex-direction: column; gap: 2px; }
.buyer-login { color: var(--orange2); font-size: 12px; overflow-wrap: anywhere; }
.buyer-contact { margin-top: 7px; border-top: 1px solid var(--border); padding-top: 6px; }
.buyer-contact summary { color: var(--muted); cursor: pointer; user-select: none; }
.buyer-contact summary:hover, .buyer-contact summary:focus-visible { color: var(--text); }
.buyer-contact[open] summary { margin-bottom: 5px; }
.buyer-email { overflow-wrap: anywhere; }
.order-state-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; }
.order-state { display: inline-flex; align-items: center; border: 1px solid; border-radius: 7px; padding: 4px 8px; font-size: 11px; font-weight: 700; }
.order-state-cancelled { color: var(--red); border-color: rgba(255,85,102,.55); background: rgba(255,85,102,.11); }
.order-state-return { color: var(--red); border-color: rgba(255,85,102,.65); background: rgba(255,85,102,.14); }
.ocard.order-alert { border-color: rgba(255,85,102,.72); background: linear-gradient(90deg, rgba(255,85,102,.12), var(--bg2) 24%); box-shadow: inset 3px 0 0 var(--red); }
.ocard.order-processed:not(.order-alert) { border-color: rgba(53,196,111,.68); background: linear-gradient(90deg, rgba(53,196,111,.11), var(--bg2) 24%); box-shadow: inset 3px 0 0 var(--green); }
.order-set-summary { grid-column: 1 / -1; border: 1px solid rgba(77,159,255,.45); background: rgba(77,159,255,.10); border-radius: 8px; padding: 7px 9px; color: #9cc8ff; font-size: 12px; }
.order-products, .order-sections { min-width: 0; }
.qty-badge { display: inline-flex; min-width: 31px; justify-content: center; padding: 2px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 13px; font-weight: 900; }
.qty-1 { color: var(--muted); }
.qty-2 { color: #4d9fff; background: rgba(77,159,255,.10); }
.qty-3 { color: #2dd4bf; background: rgba(45,212,191,.10); }
.qty-4 { color: var(--yellow); background: rgba(255,176,32,.11); }
.qty-5 { color: var(--orange2); background: rgba(255,106,31,.13); }
.qty-6plus { color: var(--red); background: rgba(255,85,102,.14); box-shadow: 0 0 0 1px rgba(255,85,102,.15); }
.purchase-link { display: inline-flex; align-items: center; gap: 3px; margin: 2px 4px; padding: 2px 5px; border: 1px solid var(--border); border-radius: 6px; }
.purchase-link button { padding: 0 4px; border: 0; background: transparent; color: var(--muted); }
.purchase-helper { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
.purchase-helper-account { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.purchase-helper-account select { flex: 1; min-width: 0; }
.helperPurchaseItems { display: grid; gap: 6px; margin-top: 7px; }
.helper-purchase-item { display: grid; grid-template-columns: minmax(100px,.8fr) minmax(150px,1.3fr) minmax(130px,1fr) auto; gap: 5px; align-items: center; }
.helper-purchase-item input { min-width: 0; width: 100%; }
.helper-extra-hint { align-self: center; padding: 0 6px; font-size: 11px; }
.helperItemRemove, .puItemDel { color: var(--red); }
.purchase-item-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
.purchase-order-alert > td { background: rgba(255,85,102,.10); border-top-color: rgba(255,85,102,.50); border-bottom-color: rgba(255,85,102,.50); }
.purchase-order-alert > td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.purchase-order-warning { margin-top: 5px; max-width: 210px; color: var(--red); font-weight: 750; font-size: 11px; white-space: normal; }
@media (max-width: 1050px) {
  .helper-purchase-item { grid-template-columns: 1fr auto; }
  .helper-purchase-item input { grid-column: 1; }
  .helper-purchase-item .helperItemRemove { grid-column: 2; grid-row: 1 / span 3; }
}

/* Allegro-style order card */
.ocard .otop { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.oitem { display: flex; gap: 9px; margin-bottom: 9px; }
.oitem img { width: 54px; height: 54px; object-fit: contain; background: #fff; border-radius: 8px; flex-shrink: 0; }
.oitem .oinfo { flex: 1; min-width: 0; }
.oitem .oname { font-weight: 600; line-height: 1.3; white-space: normal; }
.oitem .osub { color: var(--muted); font-size: 11px; margin-top: 2px; }
.allegro-price-line { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 6px; padding: 7px 8px; border-radius: 7px;
  border: 1px solid rgba(94,196,143,.4); background: rgba(94,196,143,.1); color: #d9f7e4; font-size: 11px; }
.allegro-price-line b { width: 100%; color: #8fe5b0; }
.allegro-price-summary { margin-top: 8px; padding: 8px; border-radius: 7px; border: 1px solid rgba(94,196,143,.4);
  background: rgba(94,196,143,.1); }
.allegro-price-summary > b { color: #8fe5b0; font-size: 12px; }
.allegro-price-summary .osub { color: var(--muted); font-size: 11px; margin-top: 5px; }
.oblock { border-top: 1px solid var(--border); padding-top: 7px; margin-top: 7px; }
.oblock .btitle { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 4px; }
.paid { color: var(--green); font-weight: 700; }
.pickup { background: rgba(255,106,31,.10); border: 1px dashed rgba(255,106,31,.4); border-radius: 8px; padding: 6px 8px; margin-top: 5px; font-size: 12px; }

/* A widened order pane uses its space instead of producing one very long, narrow card. */
@container order-details (min-width: 620px) {
  .order-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .order-products .oitem { margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: rgba(18,20,26,.32); }
  .order-products:not(:has(> .oitem + .oitem)) > .oitem { grid-column: 1 / -1; }
  .order-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; align-items: start; }
  .order-sections > .order-section { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: rgba(18,20,26,.24); }
  .order-sections > .order-section-wide { grid-column: 1 / -1; }
}

/* Claim cards */
.claim { display: flex; gap: 12px; }
.claim img { width: 62px; height: 62px; object-fit: contain; background: #fff; border-radius: 8px; flex-shrink: 0; }
.claim .cbody { flex: 1; min-width: 0; }
.ctype { font-size: 10px; font-weight: 700; letter-spacing: .5px; padding: 2px 7px; border-radius: 5px; }
.ctype.claim { background: rgba(255,85,102,.2); color: var(--red); border: 1px solid rgba(255,85,102,.4); }
.ctype.dispute { background: rgba(77,159,255,.18); color: #4d9fff; border: 1px solid rgba(77,159,255,.4); }
.cmsg { background: var(--bg2); border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-size: 12px;
  max-height: 90px; overflow: auto; white-space: pre-wrap; color: var(--muted); }

/* ---------- Tables ---------- */
.scrollwrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td:first-child, th:first-child { padding-left: 13px; }
th { background: var(--bg2); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  min-width: 54px; overflow: hidden; resize: horizontal; cursor: col-resize; }
.table-sort { display: inline; padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
.table-sort:hover, .table-sort:focus-visible { color: var(--orange2); border: 0; outline: none; }
.repricing-reference input, .repricing-reference select { min-height: 34px; }
.repricing-api-note { margin: 8px 0 0; font-size: 12px; line-height: 1.4; }
.repricing-seller-notes { white-space: normal; min-width: 180px; max-width: 260px; line-height: 1.45; }
.repricing-competitor-snapshot { white-space: normal; min-width: 170px; line-height: 1.4; }
.handled-card { opacity: .72; }
tr:hover td { background: var(--card2); }
tr:last-child td { border-bottom: none; }
tr.warn-bad td { background: rgba(255,85,102,.12); }
tr.warn-ok td { background: rgba(255,176,32,.10); }
.up { color: var(--green); font-weight: 600; }
.down { color: var(--red); font-weight: 600; }
.pen { cursor: pointer; color: var(--orange2); }

/* ---------- Cards, tags, stats ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 13px; margin-bottom: 10px; }
.card .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.card .head b { font-size: 14px; }
.tag { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-size: 11px; color: var(--muted); }
.tag.ok { color: var(--green); border-color: rgba(53,196,111,.4); }
.tag.warn { color: var(--orange2); border-color: rgba(255,106,31,.4); }
.tag.bad { color: var(--red); border-color: rgba(255,85,102,.4); }
.sales-diag-filters { display: grid; grid-template-columns: repeat(4, minmax(145px, 1fr)); gap: 10px; margin: 12px 0; }
.sales-diag-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.sales-diag-filters input, .sales-diag-filters select { width: 100%; min-width: 0; }
.sales-diag-status { color: var(--muted); line-height: 1.45; margin: 10px 0; }
.sales-diag-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sales-diag-source { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; }
.sales-diag-source.has-error { border-color: rgba(255,85,102,.5); }
.sales-diag-source .danger { overflow-wrap: anywhere; }
.sales-diag-table { min-width: 1180px; font-size: 12px; }
.sales-diag-table td { white-space: normal; vertical-align: top; min-width: 75px; }
.sales-diag-table td:first-child { min-width: 170px; max-width: 240px; }
.sales-diag-table small { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.sales-diag-row.stopped td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.sales-diag-table .tag { display: inline-block; margin: 2px 2px 2px 0; white-space: normal; }
.sales-diag-pager { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin: 10px 0 2px; color: var(--muted); font-size: 12px; }
.sales-diag-pager label { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 750px) { .sales-diag-filters { grid-template-columns: repeat(2, minmax(130px, 1fr)); } }
@media (max-width: 430px) { .sales-diag-filters { grid-template-columns: 1fr; } }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat { background: linear-gradient(160deg, var(--card), var(--bg2)); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; }
.stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.stat .value { font-size: 21px; font-weight: 700; margin-top: 4px; }
.stat.hl { border-color: rgba(255,106,31,.5); box-shadow: 0 0 18px rgba(255,106,31,.12); }
.stat.hl .value { color: var(--orange2); }
.markup-edit { color: var(--orange2); cursor: pointer; border-bottom: 1px dashed var(--orange2); }
.deadline { font-weight: 700; }
.deadline.soon { color: var(--red); }
.deadline.ok { color: var(--green); }

/* ---------- Labels ---------- */
.label-chip {
  display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
  cursor: pointer; user-select: none; margin: 1px 2px;
  color: var(--lc); border: 1px solid var(--lc); background: transparent; opacity: .65; transition: all .15s;
}
.label-chip:hover { opacity: 1; }
.label-chip.on { background: var(--lc); color: #fff; opacity: 1; }
.labelpick { display: inline-flex; align-items: center; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 11px; max-width: 580px; margin: 12px 0 20px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; }
.form label.row { flex-direction: row; align-items: center; gap: 8px; }
h2 { margin: 20px 0 6px; font-size: 16px; }
h2:first-child { margin-top: 0; }
code { background: var(--bg2); border: 1px solid var(--border); padding: 2px 7px; border-radius: 6px; user-select: all; color: var(--orange2); }
#saveStatus { margin-left: 10px; color: var(--green); }
.placeholder { color: var(--muted); }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 100;
}
.tpl-row { display: flex; gap: 8px; margin-bottom: 8px; }
.tpl-row textarea { flex: 1; min-height: 40px; }

/* On very narrow screens the two work areas stack vertically. */
@container (max-width: 559px) {
  #tab-inbox:not(.hidden):has(.split:not(.chat-closed)) { height: auto; }
  .split.stacked.has-order:not(.chat-closed), .split.three-column.has-order:not(.chat-closed),
  .split:not(.chat-closed) { grid-template-columns: minmax(0, 1fr); height: auto; gap: 10px; }
  .split:not(.chat-closed) .split-handle { display: none !important; }
  .split:not(.chat-closed) .inbox-left-stack { grid-column: 1; min-height: 620px; }
  .split:not(.chat-closed) .thread-list { min-height: 160px; }
  .split:not(.chat-closed) .thread-view { min-height: 320px; }
  .split:not(.chat-closed) .order-panel { grid-column: 1; max-height: 600px; }
}

/* With chat closed, list + order pane keep sharing the row on extremely narrow windows. */
@container (max-width: 379px) {
  #tab-inbox:not(.hidden):has(.split.chat-closed) { height: auto; }
  .split.chat-closed.has-order { grid-template-columns: minmax(0, 1fr); height: auto; gap: 10px; }
  .split.chat-closed .split-handle { display: none !important; }
  .split.chat-closed .thread-list { min-height: 160px; max-height: 230px; }
  .split.chat-closed .order-panel { grid-column: 1; max-height: 600px; }
}
/* Repricing workbench: compact primary controls, expanded secondary details. */
#tab-repricing .rp-top { display:flex; flex-wrap:wrap; gap:14px; align-items:end; }
#tab-repricing label { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); }
#tab-repricing .rp-top label { flex:1; min-width:170px; }
#tab-repricing .rp-filters,#tab-repricing .rp-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:12px; }
#tab-repricing .rp-filters label { flex-direction:row; align-items:center; }
#tab-repricing .rp-table { margin-top:14px; }
#tab-repricing table { width:100%; min-width:960px; table-layout:fixed; font-size:12px; }
#tab-repricing th:nth-child(1) {width:45px} #tab-repricing th:nth-child(2) {width:23%}
#tab-repricing th:nth-child(3) {width:11%} #tab-repricing th:nth-child(4) {width:14%}
#tab-repricing th:nth-child(5) {width:20%} #tab-repricing th:nth-child(6) {width:16%}
#tab-repricing td { white-space:normal; vertical-align:top; padding:14px 8px; overflow-wrap:anywhere; }
#tab-repricing td button { margin-top:8px; font-size:11px; }
#tab-repricing input:not([type=checkbox]),#tab-repricing select { width:100%; min-width:0; }
#tab-repricing .rp-offer { display:flex; gap:10px; align-items:flex-start; }
#tab-repricing .rp-offer img { width:44px;height:52px;object-fit:contain;background:white;border-radius:5px; }
#tab-repricing .rp-offer a { font-weight:600; }
#tab-repricing .rp-range { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
#tab-repricing .rp-rowactions { display:flex;gap:6px; }
#tab-repricing .rp-switch { width:44px;height:24px;border:0;border-radius:20px;background:#495366;padding:3px; }
#tab-repricing .rp-switch i { display:block;width:18px;height:18px;border-radius:50%;background:white; }
#tab-repricing .rp-switch.on { background:#4293df; } #tab-repricing .rp-switch.on i {margin-left:20px}
#tab-repricing .rp-detail td {background:var(--bg2)}
#tab-repricing .rp-detail-grid {display:grid;grid-template-columns:1fr 1fr;gap:30px}
#tab-repricing .rp-input-grid {display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:10px}
#tab-repricing .rp-error {color:#ff8989;max-height:100px;overflow:auto;font-size:11px;margin-top:8px}
#tab-repricing .rp-warning {box-shadow:inset 3px 0 #dd685f}
#tab-repricing [data-dirty] {display:block;color:#eeb770;font-size:11px;margin-top:6px}
#tab-repricing .rp-bulk[open] {padding:12px;border:1px solid var(--border);flex-basis:100%}
#tab-repricing .rp-bulk label {display:inline-flex;min-width:210px;margin:10px}
#tab-repricing .rp-help {font-size:12px} #tab-repricing summary {cursor:pointer}
/* Release 2026.09.10: compact workbenches and shared navigation. */
.tools-subnav {padding:0 8px 8px 22px;max-height:460px;overflow:auto}
aside nav .tools-subnav button {font-size:12px;padding:7px 8px;white-space:normal}
aside nav button.dragging {opacity:.45;outline:2px dashed var(--accent)}
.calc-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:12px 0}
.calc-grid label {display:flex;flex-direction:column;gap:5px}
.calc-grid input,.calc-grid select,.calc-grid textarea {width:100%;min-width:0}
.calc-output {display:block;font-weight:600;line-height:1.7}
.category-calc {max-width:1000px}.category-calc summary {cursor:pointer;font-weight:600;padding:5px}
#tab-tools details {margin-bottom:12px}#tab-tools textarea {width:100%}
#tab-lowest .rp-top {display:flex;flex-wrap:wrap;gap:12px;align-items:end}
#tab-lowest .rp-top label {flex:1;min-width:170px;display:grid;gap:6px}
#tab-lowest .rp-offer {display:flex;gap:10px;min-width:220px}
#tab-lowest .rp-offer img {width:48px;height:48px;object-fit:contain;background:white;border-radius:5px}
#tab-lowest td,#trRows td {white-space:normal;vertical-align:top;min-width:110px}
#tab-lowest td button {display:block;margin-top:6px}
#trRows textarea {width:190px}#trRows label {display:block}
dialog {background:var(--panel,#21242e);color:var(--text,#fff);border:1px solid var(--border,#444);border-radius:12px;padding:22px;max-width:min(900px,95vw);max-height:90vh;overflow:auto}
dialog::backdrop {background:#0009}
#trOrderPreview .ordercard {max-width:800px}
#trStatusOptions label {padding:4px}
.tracking-order-info {padding:9px;border:1px solid var(--border);border-radius:6px;margin:8px 0}