/* Listing Builder — multi-channel listing form + platform picker (.lb-*).
 * Visual language cloned from css/messageTemplates.css (the teal→blue "Evri
 * Claims" family), exactly as css/amazonListingPhotos.css cloned it under .alp-.
 * Self-contained: does NOT touch messageTemplates.css, style.css or the .ls-*
 * Listing Station styles. Loaded for the #listingBuilder tab only.
 */

:root {
  --lb-primary: #0588b6;
  --lb-primary-d: #03658e;
  --lb-grad: linear-gradient(135deg, #03658e, #0588b6);
  --lb-ink: #0f2740;
  --lb-sub: #5b7183;
  --lb-line: #e6edf5;
  --lb-line-s: #cfdcea;
  --lb-bg: #f5f8fc;
  --lb-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

/* ---------------- Page shell ---------------- */
.lb-page { background: transparent; }
.lb-wrap { max-width: 1180px; margin: 0 auto; padding: 6px 4px 40px; }

.lb-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin: 4px 0 14px;
}
.lb-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--lb-primary); }
.lb-title { font-size: 25px; font-weight: 800; color: var(--lb-ink); margin: 4px 0 4px; line-height: 1.15; }
.lb-sub { font-size: 13.5px; color: var(--lb-sub); margin: 0; max-width: 640px; line-height: 1.5; }
.lb-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------- Buttons ---------------- */
.lb-btn {
  appearance: none; border: 1.5px solid var(--lb-line-s); background: #fff; color: #21506f;
  font-size: 13px; font-weight: 700; padding: 9px 15px; border-radius: 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: .15s;
}
.lb-btn:hover { border-color: var(--lb-primary); color: var(--lb-primary); }
.lb-btn.primary { border: none; color: #fff; background: var(--lb-grad); box-shadow: 0 8px 18px rgba(5, 136, 182, .28); }
.lb-btn.primary:hover { filter: brightness(1.05); color: #fff; }
.lb-btn.danger:hover { border-color: #e2564d; color: #d63c33; }
.lb-btn:disabled { opacity: .55; cursor: default; }

/* ---------------- Status line ---------------- */
.lb-statusline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.lb-status { font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px; border: 1px solid transparent; }
.lb-status.off { background: #fff4e8; color: #a1600f; border-color: #f3ddbf; }
.lb-status.on { background: #eefaf1; color: #2f8f52; border-color: #d8f0df; }
.lb-status.sample { background: #eef5fb; color: #2d6b8f; border-color: #dcecf6; }
.lb-savestate { font-size: 11.5px; color: #90a3b6; font-weight: 700; margin-left: auto; }

/* ---------------- Cards ---------------- */
.lb-card {
  position: relative; background: #fff; border: 1.5px solid var(--lb-line); border-radius: 16px;
  padding: 16px 18px 18px; box-shadow: var(--lb-shadow); margin-bottom: 16px;
}
.lb-card-h { font-size: 14px; font-weight: 800; color: var(--lb-ink); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.lb-card-sub { font-size: 12px; color: var(--lb-sub); margin: 0 0 14px; line-height: 1.5; }

/* ---------------- Fields ---------------- */
.lb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; }
.lb-field { min-width: 0; }
.lb-field.lb-col-full { grid-column: 1 / -1; }
.lb-field label { display: block; font-size: 12px; font-weight: 800; color: #45607a; margin: 0 0 6px; letter-spacing: .01em; }
.lb-field input, .lb-field textarea, .lb-field select {
  width: 100%; border: 1.5px solid var(--lb-line-s); border-radius: 10px; padding: 10px 12px;
  font-size: 13.5px; font-family: inherit; color: var(--lb-ink); background: #fbfdff; box-sizing: border-box;
}
.lb-field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.lb-field input:focus, .lb-field textarea:focus, .lb-field select:focus {
  outline: none; border-color: var(--lb-primary); box-shadow: 0 0 0 3px rgba(5, 136, 182, .13);
}
.lb-req { color: #d64545; font-weight: 800; }
.lb-hint { font-size: 11.5px; color: #90a3b6; margin: 6px 0 0; }
.lb-hint.err { color: #c23b32; }
.lb-warn {
  font-size: 12.5px; color: #a1600f; background: #fff8ee; border: 1px solid #f2e0c2;
  border-radius: 10px; padding: 9px 12px; margin: 0 0 14px;
}
.lb-warn:empty { display: none; }

/* ---------------- Platform picker ---------------- */
.lb-channel { border: 1.5px solid var(--lb-line); border-radius: 13px; padding: 12px 14px; margin-bottom: 10px; background: #fbfdff; }
.lb-channel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lb-channel-name { font-size: 13.5px; font-weight: 800; color: var(--lb-ink); }
.lb-note { font-size: 11px; }
.lb-muted { color: #90a3b6; font-weight: 700; }
.lb-ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lb-tick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #33506a; cursor: pointer; }
.lb-tick input { width: 17px; height: 17px; accent-color: var(--lb-primary); cursor: pointer; }
.lb-tick.is-disabled { color: #a7b6c6; cursor: default; }
.lb-tick.is-disabled input { cursor: default; }

/* ---------------- Image gallery ---------------- */
.lb-gallery { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: start; }
.lb-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.lb-tile {
  position: relative; border: 1.5px dashed var(--lb-line-s); border-radius: 12px; background: #fbfdff;
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; cursor: pointer;
  overflow: hidden; transition: .15s;
}
.lb-tile:hover { border-color: var(--lb-primary); }
.lb-tile.filled { border-style: solid; }
.lb-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-tile-add { font-size: 26px; color: #9db4c6; line-height: 1; }
.lb-tile-label {
  position: absolute; left: 6px; bottom: 5px; font-size: 10px; font-weight: 800; color: #5b7183;
  background: rgba(255, 255, 255, .85); padding: 1px 6px; border-radius: 6px;
}
.lb-tile-rm {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(16, 49, 76, .72); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lb-tile-rm:hover { background: #b23a32; }
.lb-tile.err { border-color: #e2564d; border-style: solid; }
.lb-tile-err {
  position: absolute; left: 4px; right: 4px; bottom: 22px; font-size: 9.5px; line-height: 1.2;
  color: #c23b32; background: rgba(255, 255, 255, .92); border-radius: 5px; padding: 2px 4px; text-align: center;
}
.lb-tile-spin { width: 22px; height: 22px; border: 3px solid #d9e6f0; border-top-color: var(--lb-primary); border-radius: 50%; animation: rms-spin var(--t-spin) var(--e-linear) infinite; }

/* ---------------- Amazon details (Part 4) ---------------- */
.lb-amz-sample { font-size: 12px; font-weight: 700; color: #2d6b8f; background: #eef5fb; border: 1px solid #dcecf6; border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.lb-amz-pt { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fbfdff; border: 1.5px solid var(--lb-line); border-radius: 11px; padding: 10px 13px; margin-bottom: 12px; font-size: 13.5px; color: var(--lb-ink); }
.lb-amz-search { display: flex; gap: 8px; }
.lb-amz-search input { flex: 1; min-width: 0; border: 1.5px solid var(--lb-line-s); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; background: #fbfdff; color: var(--lb-ink); }
.lb-amz-search input:focus { outline: none; border-color: var(--lb-primary); box-shadow: 0 0 0 3px rgba(5, 136, 182, .13); }
.lb-amz-suggs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lb-amz-sugg { border: 1.5px solid var(--lb-line-s); background: #fff; color: #21506f; font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: .15s; }
.lb-amz-sugg:hover { border-color: var(--lb-primary); color: var(--lb-primary); }
.lb-amz-reqs { margin: 6px 0 14px; }
.lb-amz-reqs-h { font-size: 12px; font-weight: 800; color: #45607a; margin: 0 0 10px; }
.lb-amz-acct { border: 1.5px solid var(--lb-line); border-radius: 13px; padding: 12px 14px; margin-top: 10px; background: #fbfdff; }
.lb-amz-acct-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-amz-acct-name { font-size: 13.5px; font-weight: 800; color: var(--lb-ink); margin-right: auto; }
.lb-amz-pass { margin-top: 10px; font-size: 13px; font-weight: 700; color: #2f8f52; background: #eefaf1; border: 1px solid #d8f0df; border-radius: 10px; padding: 9px 12px; }
.lb-amz-msg.err { margin-top: 10px; font-size: 12.5px; color: #a1600f; background: #fff8ee; border: 1px solid #f2e0c2; border-radius: 10px; padding: 9px 12px; }
.lb-pill { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.lb-pill.ok { background: #eefaf1; color: #2f8f52; border: 1px solid #d8f0df; }
.lb-pill.warn { background: #fff4e8; color: #a1600f; border: 1px solid #f3ddbf; }
.lb-issues { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.lb-issue { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--lb-line); border-left-width: 4px; border-radius: 9px; padding: 8px 11px; background: #fff; }
.lb-issue.err { border-left-color: #d64545; }
.lb-issue.warn { border-left-color: #d99a1e; }
.lb-issue.info { border-left-color: #5b9bd5; }
.lb-issue-sev { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 6px; background: #f1f5f9; color: #45607a; margin-top: 1px; }
.lb-issue.err .lb-issue-sev { background: #fdeceb; color: #c23b32; }
.lb-issue.warn .lb-issue-sev { background: #fff4e8; color: #a1600f; }
.lb-issue-body { min-width: 0; }
.lb-issue-text { font-size: 13px; color: var(--lb-ink); line-height: 1.4; }
.lb-issue-attr { font-size: 11px; color: #90a3b6; margin-top: 3px; font-family: ui-monospace, Menlo, monospace; word-break: break-word; }
.lb-amz-asin { margin-top: 8px; font-size: 12.5px; color: var(--lb-ink); }
.lb-amz-publish { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.lb-amz-publish .lb-amz-msg { flex-basis: 100%; margin-top: 0; }
.lb-pill.info { background: #eef5fb; color: #2d6b8f; border: 1px solid #dcecf6; }
.lb-pill.sub { background: #fff4e8; color: #a1600f; border: 1px solid #f3ddbf; }
.lb-pill.draft { background: #f1f5f9; color: #5b7183; border: 1px solid #e2e8f0; }

/* Confirm dialog (publish gate — never auto-publishes) */
.lb-confirm { position: fixed; inset: 0; z-index: 100070; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lb-confirm-bg { position: absolute; inset: 0; background: rgba(13, 32, 51, .48); backdrop-filter: blur(2px); }
.lb-confirm-box { position: relative; background: #fff; border-radius: 16px; width: min(480px, 100%); box-shadow: 0 30px 70px rgba(9, 26, 43, .35); padding: 20px 22px; animation: rms-pop var(--t-base) var(--e-out); }
.lb-confirm-box h3 { margin: 0 0 10px; font-size: 17px; color: var(--lb-ink); font-weight: 800; }
.lb-confirm-body { font-size: 13.5px; color: #45607a; line-height: 1.55; }
.lb-confirm-body p { margin: 0 0 10px; }
.lb-confirm-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
html[data-theme="dark"] .lb-confirm-box { background: #162133; }
html[data-theme="dark"] .lb-confirm-box h3, html[data-theme="dark"] .lb-amz-asin { color: #e6edf6; }

/* ---------------- Part 5.5: per-field platform tags + categories + gap popup ---- */
.lb-fieldtags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.lb-fieldtag { font-size: 10.5px; font-weight: 700; color: #7c90a4; background: #eef3f8; border: 1px solid #e2e8f0; border-radius: 6px; padding: 1px 7px; }
.lb-fieldtag.req { color: #2d6b8f; background: #eef5fb; border-color: #dcecf6; }
.lb-section-h { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #7c90a4; margin: 4px 0 10px; }
.lb-cats { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.lb-cat-row { border: 1.5px solid var(--lb-line); border-radius: 13px; padding: 12px 14px; background: #fbfdff; }
.lb-cat-h { font-size: 13px; font-weight: 800; color: var(--lb-ink); margin-bottom: 8px; }
.lb-modal { position: fixed; inset: 0; z-index: 100065; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lb-modal-bg { position: absolute; inset: 0; background: rgba(13, 32, 51, .48); backdrop-filter: blur(2px); }
.lb-modal-shell { position: relative; background: #fff; border-radius: 18px; width: min(720px, 100%); max-height: 90vh; overflow: hidden; box-shadow: 0 30px 70px rgba(9, 26, 43, .35); display: flex; flex-direction: column; animation: rms-pop var(--t-base) var(--e-out); }
.lb-modal-head { padding: 15px 20px; border-bottom: 1px solid var(--lb-line); display: flex; align-items: center; justify-content: space-between; }
.lb-modal-head h3 { margin: 0; font-size: 16.5px; font-weight: 800; color: var(--lb-ink); }
.lb-modal-x { border: none; background: transparent; font-size: 20px; cursor: pointer; color: #8aa0b4; line-height: 1; padding: 2px 6px; border-radius: 8px; }
.lb-modal-x:hover { background: #eef2f6; color: #33506a; }
.lb-modal-body { padding: 16px 20px; overflow-y: auto; }
.lb-modal-foot { padding: 12px 20px; border-top: 1px solid var(--lb-line); display: flex; justify-content: flex-end; gap: 10px; background: #fbfdff; }
.lb-gap-group { margin-bottom: 14px; }
.lb-gap-group-h { font-size: 13px; font-weight: 800; color: var(--lb-primary); margin: 0 0 8px; }
.lb-gap-field label { display: block; font-size: 12px; font-weight: 800; color: #45607a; margin: 0 0 5px; }
.lb-gap-field input, .lb-gap-field select, .lb-gap-field textarea { width: 100%; border: 1.5px solid var(--lb-line-s); border-radius: 9px; padding: 8px 11px; font-size: 13px; background: #fbfdff; color: var(--lb-ink); box-sizing: border-box; }
html[data-theme="dark"] .lb-cat-row { background: #162133; border-color: #2a3650; }
html[data-theme="dark"] .lb-cat-h { color: #e6edf6; }
html[data-theme="dark"] .lb-fieldtag { background: #1d2941; border-color: #2a3650; color: #9fb0c4; }
html[data-theme="dark"] .lb-modal-shell { background: #162133; }
html[data-theme="dark"] .lb-modal-head h3 { color: #e6edf6; }
html[data-theme="dark"] .lb-modal-head, html[data-theme="dark"] .lb-modal-foot { border-color: #2a3650; }
html[data-theme="dark"] .lb-gap-field input, html[data-theme="dark"] .lb-gap-field select, html[data-theme="dark"] .lb-gap-field textarea { background: #111a2b; color: #e6edf6; border-color: #243049; }

/* ---------------- Part 6: eBay prerequisites row ---------------- */
.lb-ebay-prereq { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---------------- Empty / loading ---------------- */
.lb-empty {
  text-align: center; padding: 48px 20px; background: #fff; border: 1.5px dashed var(--lb-line-s);
  border-radius: 18px; color: var(--lb-sub);
}
.lb-empty .lb-empty-emoji { font-size: 38px; }
.lb-empty h3 { margin: 12px 0 4px; color: var(--lb-ink); font-size: 17px; }
.lb-empty p { margin: 0 0 16px; font-size: 13.5px; }
.lb-skeleton { display: grid; gap: 14px; }
.lb-sk-card { height: 120px; border-radius: 16px; background: var(--rms-skel-fill); background-size: 400% 100%; animation: rms-shimmer var(--t-shimmer) var(--e-in-out) infinite; }

/* ---------------- Toasts ---------------- */
.lb-toast-box { position: fixed; right: 20px; bottom: 20px; z-index: 100060; display: flex; flex-direction: column; gap: 9px; }
.lb-toast {
  background: #10314c; color: #fff; font-size: 13px; font-weight: 600; padding: 11px 16px; border-radius: 11px;
  box-shadow: 0 12px 30px rgba(9, 26, 43, .3); opacity: 0; transform: translateX(20px); transition: .28s; max-width: 340px;
}
.lb-toast.show { opacity: 1; transform: none; }
.lb-toast.ok { background: #14795a; }
.lb-toast.err { background: #b23a32; }

/* ---------------- Mobile (inside the app's 1180px discipline) ---------------- */
@media (max-width: 1180px) {
  .lb-wrap { padding: 4px 2px 32px; }
  .lb-grid { grid-template-columns: 1fr; gap: 13px; }
  .lb-title { font-size: 22px; }
  .lb-head { gap: 12px; }
  .lb-ticks { gap: 8px 14px; }
  .lb-gallery { grid-template-columns: 1fr; }
  .lb-gallery-main { max-width: 200px; }
  .lb-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
}

/* ---------------- Dark theme (mirrors messageTemplates.css) ---------------- */
html[data-theme="dark"] .lb-title { color: #e6edf6; }
html[data-theme="dark"] .lb-sub, html[data-theme="dark"] .lb-hint, html[data-theme="dark"] .lb-savestate { color: #9fb0c4; }
html[data-theme="dark"] .lb-card,
html[data-theme="dark"] .lb-channel { background: #162133; border-color: #2a3650; color: #e6edf6; }
html[data-theme="dark"] .lb-card-h,
html[data-theme="dark"] .lb-channel-name { color: #e6edf6; }
html[data-theme="dark"] .lb-field input,
html[data-theme="dark"] .lb-field textarea,
html[data-theme="dark"] .lb-field select { background: #111a2b; color: #e6edf6; border-color: #243049; }
html[data-theme="dark"] .lb-field label { color: #9fb0c4; }
html[data-theme="dark"] .lb-btn { background: #1d2941; border-color: #2a3650; color: #cdd9e8; }
html[data-theme="dark"] .lb-btn.primary { color: #fff; }
html[data-theme="dark"] .lb-empty { background: #162133; border-color: #2a3650; }
html[data-theme="dark"] .lb-tick { color: #b8c6d8; }
html[data-theme="dark"] .lb-warn { background: #2a2213; border-color: #4a3c1c; color: #e6c886; }
html[data-theme="dark"] .lb-tile { background: #111a2b; border-color: #243049; }
html[data-theme="dark"] .lb-tile-label { color: #b8c6d8; background: rgba(22, 33, 51, .85); }
html[data-theme="dark"] .lb-amz-pt,
html[data-theme="dark"] .lb-amz-acct,
html[data-theme="dark"] .lb-issue { background: #162133; border-color: #2a3650; }
html[data-theme="dark"] .lb-amz-search input { background: #111a2b; color: #e6edf6; border-color: #243049; }
html[data-theme="dark"] .lb-amz-sugg { background: #1d2941; border-color: #2a3650; color: #cdd9e8; }
html[data-theme="dark"] .lb-amz-pt,
html[data-theme="dark"] .lb-amz-acct-name,
html[data-theme="dark"] .lb-amz-reqs-h,
html[data-theme="dark"] .lb-issue-text { color: #e6edf6; }

/* ================= Part 8a: pills · explainer · disclosure · counters ·
   green ticks · sticky action bar (all additive under .lb-) ================= */

/* Per-platform completeness pills */
.lb-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.lb-pplat {
  appearance: none; cursor: pointer; font-size: 11.5px; font-weight: 800;
  padding: 5px 12px; border-radius: 999px; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 6px; transition: .15s;
}
.lb-pplat:hover { filter: brightness(.98); transform: translateY(-1px); }
.lb-pplat .lb-pplat-v { opacity: .85; }
.lb-pplat.ready { background: #eefaf1; color: #2f8f52; border-color: #d8f0df; }
.lb-pplat.mid { background: #eef5fb; color: #2d6b8f; border-color: #dcecf6; }
.lb-pplat.low { background: #fff4e8; color: #a1600f; border-color: #f3ddbf; }

/* Per-field-tag explainer */
.lb-explainer {
  font-size: 12px; color: var(--lb-sub); line-height: 1.65; background: #f7fafd;
  border: 1px solid var(--lb-line); border-radius: 11px; padding: 9px 13px; margin: 0 0 14px;
}
.lb-explainer .lb-fieldtag { vertical-align: middle; }

/* "More details" disclosure (native <details>, keyboard-accessible) */
.lb-more { margin-top: 14px; border-top: 1px dashed var(--lb-line); padding-top: 2px; }
.lb-more-sum {
  cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 800; color: var(--lb-primary);
  padding: 8px 2px; display: flex; align-items: center; gap: 8px; user-select: none;
}
.lb-more-sum::-webkit-details-marker { display: none; }
.lb-more-sum::before { content: "\25B8"; font-size: 11px; color: #7c90a4; transition: transform .15s; }
.lb-more[open] .lb-more-sum::before { transform: rotate(90deg); }
.lb-more-sum:hover { color: var(--lb-primary-d); }
.lb-more-grid { margin-top: 10px; }

/* Live length / byte counters — advisory, never block typing */
.lb-counter { display: block; font-size: 10.5px; font-weight: 700; color: #9db0c2; margin: 5px 0 0; text-align: right; }
.lb-counter.warn { color: #a1600f; }
.lb-counter.over { color: #c23b32; }

/* Quiet green validation tick */
.lb-tick-ok { color: #2f8f52; font-weight: 900; font-size: 11px; margin-left: 6px; opacity: .85; }

/* Sticky bottom action bar — always-reachable Saved indicator + Check + Publish */
.lb-actionbar {
  position: sticky; bottom: 0; z-index: 40; margin-top: 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .93); backdrop-filter: blur(6px);
  border: 1.5px solid var(--lb-line); border-radius: 14px;
  padding: 10px 14px; box-shadow: 0 -6px 20px rgba(15, 23, 42, .07);
}
.lb-actionbar .lb-savestate { margin: 0; }
.lb-actionbar-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* Mobile (inside the app's 1180px discipline; no horizontal scroll) */
@media (max-width: 1180px) {
  .lb-pills { gap: 6px; }
  .lb-counter { text-align: left; }
  .lb-actionbar { padding: 9px 11px; gap: 8px; border-radius: 12px; }
  .lb-actionbar-btns { width: 100%; margin-left: 0; }
  .lb-actionbar-btns .lb-btn { flex: 1 1 auto; justify-content: center; }
}

/* Dark theme */
html[data-theme="dark"] .lb-explainer { background: #131d2e; border-color: #2a3650; color: #9fb0c4; }
html[data-theme="dark"] .lb-more { border-color: #2a3650; }
html[data-theme="dark"] .lb-actionbar { background: rgba(18, 26, 42, .92); border-color: #2a3650; }
html[data-theme="dark"] .lb-pplat.ready { background: #16321f; border-color: #234a2f; color: #74d99b; }
html[data-theme="dark"] .lb-pplat.mid { background: #14283a; border-color: #244a63; color: #8fc7e6; }
html[data-theme="dark"] .lb-pplat.low { background: #2a2213; border-color: #4a3c1c; color: #e6c886; }

/* ================= Part 8b: power features + quality tools ================= */
.lb-btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 9px; }
.lb-linkbtn { border: none; background: none; padding: 0; color: var(--lb-primary); font-weight: 800; font-size: inherit; cursor: pointer; }
.lb-linkbtn:hover { text-decoration: underline; }

/* (1) Prefill box */
.lb-prefill { background: #fff; border: 1.5px solid var(--lb-line); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; box-shadow: var(--lb-shadow); }
.lb-prefill-row { display: flex; gap: 8px; }
.lb-prefill-row input { flex: 1; min-width: 0; border: 1.5px solid var(--lb-line-s); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; background: #fbfdff; color: var(--lb-ink); }
.lb-prefill-row input:focus { outline: none; border-color: var(--lb-primary); box-shadow: 0 0 0 3px rgba(5, 136, 182, .13); }
.lb-prefill-note { margin-top: 9px; font-size: 12.5px; font-weight: 700; color: #2f8f52; background: #eefaf1; border: 1px solid #d8f0df; border-radius: 9px; padding: 8px 11px; }
.lb-prefill-note.err { color: #a1600f; background: #fff8ee; border-color: #f2e0c2; }

/* (8) Quality score */
.lb-quality { border: 1.5px solid var(--lb-line); border-radius: 12px; padding: 10px 13px; margin: 0 0 12px; background: #fbfdff; }
.lb-quality.ready { background: #eefaf1; border-color: #d8f0df; }
.lb-quality.mid { background: #eef5fb; border-color: #dcecf6; }
.lb-quality.low { background: #fff4e8; border-color: #f3ddbf; }
.lb-quality-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lb-quality-grade { font-size: 13px; font-weight: 800; color: var(--lb-ink); }
.lb-quality-score { font-size: 12px; font-weight: 800; color: var(--lb-sub); }
.lb-quality-wins { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: #5b7183; line-height: 1.6; }

/* (2) Remembered category note */
.lb-remembered { font-size: 12.5px; color: #2d6b8f; background: #eef5fb; border: 1px solid #dcecf6; border-radius: 9px; padding: 8px 11px; margin-bottom: 10px; }

/* (3) Live preview */
.lb-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 8px; }
.lb-preview-card { border: 1.5px solid var(--lb-line); border-radius: 12px; overflow: hidden; background: #fff; }
.lb-preview-plat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #7c90a4; padding: 8px 11px; border-bottom: 1px solid var(--lb-line); background: #fbfdff; }
.lb-preview-body { display: flex; gap: 10px; padding: 11px; }
.lb-preview-img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; border: 1px solid var(--lb-line); }
.lb-preview-img.empty { display: flex; align-items: center; justify-content: center; font-size: 10px; color: #9db4c6; background: #f5f8fc; }
.lb-preview-text { min-width: 0; }
.lb-preview-title { font-size: 13px; font-weight: 700; color: var(--lb-ink); line-height: 1.35; }
.lb-preview-desc { font-size: 12px; color: #5b7183; margin-top: 5px; line-height: 1.5; max-height: 120px; overflow: auto; }
.lb-preview-desc ul { margin: 4px 0 0; padding-left: 18px; }

/* (9) Keyword tools */
.lb-kw-tools { margin-top: 7px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lb-kw-result { font-size: 12px; color: #5b7183; }
.lb-kw-saved { color: #2f8f52; font-weight: 700; }

/* (10) Title-policy nudges */
.lb-title-policy { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.lb-policy-note { font-size: 11.5px; border-radius: 8px; padding: 5px 9px; }
.lb-policy-note.warn { color: #a1600f; background: #fff8ee; border: 1px solid #f2e0c2; }
.lb-policy-note.nudge { color: #5b7183; background: #f1f5f9; border: 1px solid #e2e8f0; }

/* (6) Drafts list view */
.lb-ltable-wrap { overflow-x: auto; }
.lb-ltable { width: 100%; border-collapse: collapse; font-size: 13px; }
.lb-ltable th { text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #7c90a4; padding: 6px 10px; border-bottom: 1.5px solid var(--lb-line); }
.lb-ltable td { padding: 10px; border-bottom: 1px solid var(--lb-line); vertical-align: middle; }
.lb-ltable tbody tr[data-open-draft] { cursor: pointer; }
.lb-ltable tbody tr[data-open-draft]:hover { background: #f5f8fc; }
.lb-lthumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--lb-line); display: block; }
.lb-lthumb.empty { background: #eef3f8; }
.lb-ltitle { font-weight: 700; color: var(--lb-ink); }
.lb-lactions { white-space: nowrap; display: flex; gap: 6px; }
.lb-lchip { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin: 1px 0; border: 1px solid transparent; }
.lb-lchip.ok { background: #eefaf1; color: #2f8f52; border-color: #d8f0df; }
.lb-lchip.warn { background: #fff4e8; color: #a1600f; border-color: #f3ddbf; }
.lb-lchip.sub { background: #fff4e8; color: #a1600f; border-color: #f3ddbf; }
.lb-lchip.info { background: #eef5fb; color: #2d6b8f; border-color: #dcecf6; }
.lb-lchip.draft { background: #f1f5f9; color: #5b7183; border-color: #e2e8f0; }

/* (7) Template picker */
.lb-tpl-list { display: flex; flex-direction: column; gap: 8px; }
.lb-tpl-item { justify-content: flex-start; }

/* (5) Gallery drag-over */
.lb-gallery.lb-drag { outline: 2.5px dashed var(--lb-primary); outline-offset: 4px; border-radius: 12px; }

/* (8c-A) Amazon restrictions — advisory, next to the prefill box */
.lb-restrictions { margin-top: 10px; border-top: 1px dashed var(--lb-line); padding-top: 10px; }
.lb-restrict-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #7c90a4; margin-bottom: 6px; }
.lb-restrict-row { font-size: 12.5px; border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; }
.lb-restrict-row.ok { color: #2f8f52; background: #eefaf1; border: 1px solid #d8f0df; }
.lb-restrict-row.bad { color: #a1600f; background: #fff8ee; border: 1px solid #f2e0c2; }
.lb-restrict-row.muted { color: #5b7183; background: #f1f5f9; border: 1px solid #e2e8f0; }
.lb-restrict-reason { font-size: 12px; margin-top: 4px; line-height: 1.5; }
.lb-restrict-reason a { color: var(--lb-primary); font-weight: 700; }
.lb-restrict-foot { margin-top: 4px; }
html[data-theme="dark"] .lb-restrictions { border-color: #2a3650; }
html[data-theme="dark"] .lb-restrict-row.muted { background: #1d2941; border-color: #2a3650; color: #9fb0c4; }

@media (max-width: 1180px) {
  .lb-preview { grid-template-columns: 1fr; }
  .lb-lactions { flex-direction: column; }
  .lb-prefill-row { flex-wrap: wrap; }
  .lb-prefill-row .lb-btn { flex: 1; justify-content: center; }
}

html[data-theme="dark"] .lb-prefill, html[data-theme="dark"] .lb-preview-card { background: #162133; border-color: #2a3650; }
html[data-theme="dark"] .lb-prefill-row input { background: #111a2b; color: #e6edf6; border-color: #243049; }
html[data-theme="dark"] .lb-quality { background: #162133; border-color: #2a3650; }
html[data-theme="dark"] .lb-quality-grade { color: #e6edf6; }
html[data-theme="dark"] .lb-preview-plat { background: #131d2e; border-color: #2a3650; }
html[data-theme="dark"] .lb-preview-title { color: #e6edf6; }
html[data-theme="dark"] .lb-ltable tbody tr[data-open-draft]:hover { background: #1d2941; }
html[data-theme="dark"] .lb-remembered { background: #14283a; border-color: #244a63; color: #8fc7e6; }
html[data-theme="dark"] .lb-policy-note.nudge { background: #1d2941; border-color: #2a3650; color: #9fb0c4; }

/* ================= Part 9a: variations matrix ================= */
.lb-vtoggle { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: #33506a; cursor: pointer; margin: 4px 0 8px; }
.lb-vtoggle input { width: 17px; height: 17px; accent-color: var(--lb-primary); cursor: pointer; }
.lb-axes { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.lb-axis { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; border: 1.5px solid var(--lb-line); border-radius: 12px; padding: 10px 12px; background: #fbfdff; }
.lb-axis-name { width: 100%; box-sizing: border-box; border: 1.5px solid var(--lb-line-s); border-radius: 9px; padding: 8px 11px; font-size: 13px; background: #fff; color: var(--lb-ink); }
.lb-axvals { flex: 1; min-width: 200px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lb-axval { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #2d6b8f; background: #eef5fb; border: 1px solid #dcecf6; border-radius: 999px; padding: 3px 5px 3px 10px; }
.lb-axval-x { border: none; background: rgba(16,49,76,.14); color: #21506f; width: 17px; height: 17px; border-radius: 50%; font-size: 12px; line-height: 1; cursor: pointer; }
.lb-axval-x:hover { background: #b23a32; color: #fff; }
.lb-axval-add { flex: 1; min-width: 120px; border: none; border-bottom: 1.5px dashed var(--lb-line-s); padding: 6px 4px; font-size: 13px; background: transparent; color: var(--lb-ink); }
.lb-axval-add:focus { outline: none; border-bottom-color: var(--lb-primary); }
.lb-axes-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lb-matrix-wrap { margin-top: 14px; }
.lb-vbulk { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.lb-vbulk input { width: 100px; border: 1.5px solid var(--lb-line-s); border-radius: 9px; padding: 7px 10px; font-size: 13px; background: #fbfdff; color: var(--lb-ink); }
.lb-matrix { display: flex; flex-direction: column; gap: 10px; }
.lb-vchild { border: 1.5px solid var(--lb-line); border-radius: 12px; padding: 11px 13px; background: #fff; display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.lb-vchild-combo { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.lb-vcombo-tag { font-size: 11.5px; font-weight: 700; color: #45607a; background: #eef3f8; border: 1px solid #e2e8f0; border-radius: 7px; padding: 2px 9px; }
.lb-vchild-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: 1; min-width: 0; }
.lb-vchild-grid label { display: block; font-size: 11px; font-weight: 800; color: #45607a; }
.lb-vchild-grid input { width: 100%; margin-top: 4px; border: 1.5px solid var(--lb-line-s); border-radius: 9px; padding: 8px 10px; font-size: 13px; background: #fbfdff; color: var(--lb-ink); box-sizing: border-box; }
.lb-vchild-grid input:focus { outline: none; border-color: var(--lb-primary); box-shadow: 0 0 0 3px rgba(5,136,182,.13); }
.lb-vc-bad { border-color: #e2564d !important; background: #fdeceb !important; }
.lb-vchild-img-cell { position: relative; flex: 0 0 auto; }
.lb-vchild-img { width: 54px; height: 54px; object-fit: cover; border-radius: 9px; border: 1px solid var(--lb-line); display: block; }
.lb-vchild-imgrm { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(16,49,76,.72); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.lb-vchild-imgrm:hover { background: #b23a32; }
.lb-vchild-imgbtn { border: 1.5px dashed var(--lb-line-s); background: #fbfdff; color: #5b7183; font-size: 11.5px; font-weight: 700; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.lb-vchild-imgbtn:hover { border-color: var(--lb-primary); color: var(--lb-primary); }
.lb-gap-vlist { margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: #a1600f; line-height: 1.6; }

@media (max-width: 1180px) {
  .lb-vchild-grid { grid-template-columns: 1fr 1fr; }
  .lb-vbulk input { flex: 1; width: auto; }
}
@media (max-width: 620px) { .lb-vchild-grid { grid-template-columns: 1fr; } }

html[data-theme="dark"] .lb-axis, html[data-theme="dark"] .lb-vchild { background: #162133; border-color: #2a3650; }
html[data-theme="dark"] .lb-axis-name, html[data-theme="dark"] .lb-vbulk input, html[data-theme="dark"] .lb-vchild-grid input { background: #111a2b; color: #e6edf6; border-color: #243049; }
html[data-theme="dark"] .lb-vtoggle { color: #b8c6d8; }

/* ================= Part 9c: variations polish ================= */
.lb-vexample { font-size: 12.5px; color: #45607a; background: #f7fafd; border: 1px solid var(--lb-line); border-radius: 10px; padding: 9px 12px; margin: 8px 0 10px; line-height: 1.6; }
.lb-vexample em { font-style: normal; color: var(--lb-primary); font-weight: 700; }
.lb-hint-ok { color: #2f8f52 !important; font-weight: 700; }
/* axis editor: labelled name + values fields */
.lb-axis { flex-wrap: wrap; }
.lb-axis-field { flex: 0 0 180px; display: flex; flex-direction: column; gap: 4px; align-self: flex-start; }
.lb-axis-field .lb-axis-lbl { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #7c90a4; }
.lb-axis-field-v { flex: 1; min-width: 200px; }
.lb-axis-nudge { flex-basis: 100%; font-size: 11.5px; color: #a1600f; margin-top: 2px; }
.lb-axis-nudge:empty { display: none; }
/* matrix warnings + per-row copy */
.lb-vwarn { margin-top: 10px; font-size: 12px; color: #a1600f; background: #fff8ee; border: 1px solid #f2e0c2; border-radius: 9px; padding: 8px 11px; line-height: 1.6; }
.lb-vwarn > div + div { margin-top: 3px; }
.lb-vcopy { margin-left: 8px; font-size: 11px; }
/* expandable family board roll-up */
.lb-family { margin-top: 10px; border-top: 1px dashed var(--lb-line); padding-top: 6px; }
.lb-family-sum { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 800; color: var(--lb-ink); padding: 4px 2px; display: flex; align-items: center; gap: 6px; }
.lb-family-sum::-webkit-details-marker { display: none; }
.lb-family-sum::before { content: "\25B8"; font-size: 10px; color: #7c90a4; transition: transform .15s; }
.lb-family[open] .lb-family-sum::before { transform: rotate(90deg); }
.lb-family-rows { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.lb-fchild { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; padding: 5px 9px; border: 1px solid var(--lb-line); border-radius: 8px; background: #fbfdff; }
.lb-fchild.bad { border-color: #f2e0c2; background: #fff8ee; }
.lb-fchild-combo { font-weight: 700; color: var(--lb-ink); }
.lb-fchild-id { font-size: 11px; color: #5b7183; font-family: ui-monospace, Menlo, monospace; }
.lb-fchild-issue { flex-basis: 100%; font-size: 11.5px; color: #a1600f; }
@media (max-width: 1180px) {
  .lb-axis-field, .lb-axis-field-v { flex-basis: 100%; }
}
html[data-theme="dark"] .lb-vexample { background: #131d2e; border-color: #2a3650; color: #9fb0c4; }
html[data-theme="dark"] .lb-family { border-color: #2a3650; }
html[data-theme="dark"] .lb-fchild { background: #162133; border-color: #2a3650; }
html[data-theme="dark"] .lb-fchild-combo { color: #e6edf6; }

/* ================= Drafts fix + variant removal ================= */
/* Delete controls (My Listings row + open-draft header). Danger tint only; base .lb-btn shape unchanged. */
.lb-btn-danger { color: #b23a32; border-color: #ecc7c4; }
.lb-btn-danger:hover { background: #fdeceb; border-color: #e2564d; color: #a1332c; }
/* Remove ONE variant (× Remove) on a child row. */
.lb-vchild-x { margin-left: 8px; border: none; background: transparent; color: #b23a32; font-size: 11px; font-weight: 800; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.lb-vchild-x:hover { background: #fdeceb; }
/* Restore removed variants line under the matrix. */
.lb-vrestore-line { margin-top: 6px; }
html[data-theme="dark"] .lb-btn-danger { color: #f0a89f; border-color: #4a2f2c; }
html[data-theme="dark"] .lb-btn-danger:hover { background: #2a1a18; color: #f4b7ae; }
html[data-theme="dark"] .lb-vchild-x { color: #f0a89f; }
html[data-theme="dark"] .lb-vchild-x:hover { background: #2a1a18; }