/* ==========================================================================
   search_lp_skin.css  --  new-landing skin for search-app views
   Opt-in by adding class "lp-skin" to a view root (country; second step: auction, importer, exporter).
   Tokens: static/search_lp_tokens.css (must be loaded first).

   SCOPING RULES (do not break)
   1. Every selector starts with  body.light .lp-skin.lp-skin  (light mode only).
      No bare html, body, universal, a or button selectors. Nothing here can touch a view
      that does not carry class "lp-skin".
   2. ".lp-skin.lp-skin" is a deliberate class doubling. The existing
      "AI landing alignment" layer in product_v2.html uses
      "body.light .design-search-view .x" (specificity 0,3,1 .. 0,4,2) and many
      of its declarations are !important. Doubling gives (0,4,1)+ so this file wins
      without ID selectors, which keeps the skin spreadable to other views.
   3. !important is used ONLY where the layer being overridden already uses
      !important or where the JS template writes an inline style attribute
      (inline styles lose only to !important). Everything else is plain.
   4. Never skin .v2-ad-slot (AdFit policy: no radius / border / background).
   5. Never change chart colors (ECharts options live in JS) - only the card around.
   6. Do not touch pointer-events or display of any overlay (iOS ghost touch rule).
   7. Classes in HTML/JS are never renamed or removed; this file only adds look.
   ========================================================================== */

/* ---- root --------------------------------------------------------------- */
/* "#viewAuction" is compounded onto the doubled class on purpose: static/auction_view.css styles that
   view with ID selectors (specificity 1,x,x) that a class-only selector can never beat. Compounding the
   ID keeps every selector under "body.light .lp-skin.lp-skin" and wins without !important. It appears in
   exactly the rules that auction_view.css also sets (root, header, hamburger, back/home). */
body.light .lp-skin.lp-skin,
body.light .lp-skin.lp-skin#viewAuction {
  background: var(--lp-canvas);
  color: var(--lp-ink);
  font-family: var(--lp-font);
}
body.light .lp-skin.lp-skin button,
body.light .lp-skin.lp-skin input,
body.light .lp-skin.lp-skin select { font-family: inherit; }

/* ---- 1. header ---------------------------------------------------------- */
body.light .lp-skin.lp-skin .v2-view-header,
body.light .lp-skin.lp-skin#viewAuction .v2-view-header {
  min-height: 60px;
  color: var(--lp-ink);
  background: var(--lp-paper);
  border-bottom: 1px solid var(--lp-line);
  box-shadow: none;
}
body.light .lp-skin.lp-skin .search-view-title {
  color: var(--lp-ink) !important;
  font-size: var(--lp-fs-title) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}
body.light .lp-skin.lp-skin .v2-hamburger span,
body.light .lp-skin.lp-skin#viewAuction .v2-hamburger span { background: var(--lp-ink-soft); }
body.light .lp-skin.lp-skin .v2-hamburger:hover span,
body.light .lp-skin.lp-skin .v2-hamburger:active span,
body.light .lp-skin.lp-skin#viewAuction .v2-hamburger:hover span,
body.light .lp-skin.lp-skin#viewAuction .v2-hamburger:active span { background: var(--lp-green-900); }
body.light .lp-skin.lp-skin .v2-nav-back,
body.light .lp-skin.lp-skin .v2-nav-home,
body.light .lp-skin.lp-skin#viewAuction .v2-nav-back,
body.light .lp-skin.lp-skin#viewAuction .v2-nav-home { color: var(--lp-ink-soft); }
body.light .lp-skin.lp-skin .v2-nav-back:hover,
body.light .lp-skin.lp-skin .v2-nav-home:hover,
body.light .lp-skin.lp-skin#viewAuction .v2-nav-back:hover,
body.light .lp-skin.lp-skin#viewAuction .v2-nav-home:hover { color: var(--lp-green-900); }
body.light .lp-skin.lp-skin .v2-view-header select {
  min-height: var(--lp-select-h);
  color: var(--lp-ink) !important;
  -webkit-text-fill-color: var(--lp-ink) !important;
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: 10px !important;
  box-shadow: none;
  font-weight: 700;
}
body.light .lp-skin.lp-skin .v2-view-header select + svg { color: var(--lp-muted); }

/* ---- 2. search form ----------------------------------------------------- */
body.light .lp-skin.lp-skin .search-design-panel {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-card);
}
body.light .lp-skin.lp-skin .search-input {
  min-height: var(--lp-ctl-h);
  height: var(--lp-ctl-h);
  padding: 8px 14px !important;   /* layer forces 12px !important => 50px tall; align with the 44px button */
  color: var(--lp-ink) !important;
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: var(--lp-radius-ctl) !important;
  box-shadow: none;
  font-weight: 600;
}
body.light .lp-skin.lp-skin .search-input::placeholder { color: #8a98a9 !important; font-weight: 500; }
body.light .lp-skin.lp-skin .search-input:focus {
  border-color: var(--lp-green-700) !important;
  background: var(--lp-paper) !important;
  box-shadow: 0 0 0 3px rgba(8, 127, 101, .16);
}
body.light .lp-skin.lp-skin .search-input:focus-visible { outline: none; }   /* border + ring above already show focus */
body.light .lp-skin.lp-skin .search-results {
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line-pop) !important;
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-pop);
}
body.light .lp-skin.lp-skin .search-item {
  color: var(--lp-ink) !important;
  border-color: var(--lp-line) !important;
}
body.light .lp-skin.lp-skin .search-item:hover,
body.light .lp-skin.lp-skin .search-item:active { background: var(--lp-hover-bg) !important; }

/* ---- 3. tabs: plain text + 2px green underline on the active one -------- */
body.light .lp-skin.lp-skin .product-tabs {
  gap: 4px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lp-line) !important;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
  scrollbar-width: none;
}
body.light .lp-skin.lp-skin .product-tabs::-webkit-scrollbar { display: none; }
body.light .lp-skin.lp-skin .product-tab {
  min-height: var(--lp-tab-h);
  min-width: 0;
  padding: 0 4px;
  line-height: 1.25;
  white-space: normal !important;   /* app.css forces nowrap; long English labels must wrap, not push the 4th tab out */
  color: var(--lp-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: var(--lp-fs-tab-mobile) !important;
  font-weight: 900;
}
body.light .lp-skin.lp-skin .product-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
}
body.light .lp-skin.lp-skin .product-tab:hover:not(.active) {
  color: var(--lp-green-700) !important;
  background: transparent !important;
}
body.light .lp-skin.lp-skin .product-tab.active {
  color: var(--lp-green-900) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.light .lp-skin.lp-skin .product-tab.active::after { background: var(--lp-green-900); }
@media (min-width: 768px) {
  body.light .lp-skin.lp-skin .product-tab {
    font-size: var(--lp-fs-tab-pc) !important;
    font-weight: 800;
  }
}

/* ---- 4. cards ----------------------------------------------------------- */
body.light .lp-skin.lp-skin .prod-card,
body.light .lp-skin.lp-skin .entity-result-heading {
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: var(--lp-radius-card) !important;
  box-shadow: var(--lp-shadow-card) !important;
}
body.light .lp-skin.lp-skin [id$="AiCard"] {
  background: linear-gradient(155deg, var(--lp-paper) 0%, var(--lp-ai-bg-end) 100%) !important;
  border-color: var(--lp-ai-line) !important;
}
body.light .lp-skin.lp-skin .v2-result-title {
  color: var(--lp-ink);
  font-size: var(--lp-fs-title);
  letter-spacing: -.02em;
}
body.light .lp-skin.lp-skin .prod-card [style*="color:var(--v2-muted)"] {
  color: #23354c !important;
  font-size: var(--lp-fs-card-title) !important;
  font-weight: 800 !important;
}
body.light .lp-skin.lp-skin .prod-card [style*="color:var(--text-muted)"] { color: var(--lp-muted) !important; }
body.light .lp-skin.lp-skin .prod-card[style*="color:var(--v2-muted)"] { color: var(--lp-muted); }

/* ---- 5. tables (grid rows built by JS with inline style) ---------------- */
/* body text must not stay below 12px: lift every inline 9.6-11.5px size */
body.light .lp-skin.lp-skin .v2-tab-panel [style*="font-size:0.6rem"],
body.light .lp-skin.lp-skin .v2-tab-panel [style*="font-size:0.62rem"],
body.light .lp-skin.lp-skin .v2-tab-panel [style*="font-size:0.66rem"],
body.light .lp-skin.lp-skin .v2-tab-panel [style*="font-size:0.68rem"],
body.light .lp-skin.lp-skin .v2-tab-panel [style*="font-size:0.72rem"],
body.light .lp-skin.lp-skin #countryAiCard [style*="font-size:0.6rem"],
body.light .lp-skin.lp-skin [id$="AiCard"] [style*="font-size:0.6rem"] { font-size: var(--lp-fs-small) !important; }
/* column header row */
body.light .lp-skin.lp-skin .v2-tab-panel [style*="grid-template-columns"] > span[style*="font-weight:700;color:var(--text-muted)"] {
  color: var(--lp-muted) !important;
  font-weight: 800 !important;
}
/* row separators */
body.light .lp-skin.lp-skin .v2-tab-panel [style*="border-bottom:1px solid var(--surface-border)"],
body.light .lp-skin.lp-skin .v2-tab-panel [style*="border-bottom:1px dashed var(--surface-border)"] {
  border-bottom-color: var(--lp-line-row) !important;
}
/* rank number */
body.light .lp-skin.lp-skin .v2-tab-panel span[style*="font-size:0.6rem;font-weight:700;color:#64748b"],
body.light .lp-skin.lp-skin .v2-tab-panel span[style*="font-size:0.62rem;font-weight:700;color:#64748b"],
body.light .lp-skin.lp-skin .v2-tab-panel span[style*="font-weight:700;color:#94a3b8"] {
  color: var(--lp-faint) !important;
  font-weight: 800 !important;
}
/* names: clickable = landing link blue, plain = ink */
body.light .lp-skin.lp-skin .v2-tab-panel span[style*="cursor:pointer"] { color: var(--lp-blue) !important; }
body.light .lp-skin.lp-skin .v2-tab-panel span[style*="font-size:0.85rem;font-weight:600;color:var(--text-primary)"] { color: var(--lp-ink) !important; }
/* numbers (span in the country view, div in the importer / exporter lists) */
body.light .lp-skin.lp-skin .v2-tab-panel span[style*="font-size:0.82rem;font-weight:700;color:var(--text-primary)"],
body.light .lp-skin.lp-skin .v2-tab-panel div[style*="font-size:0.82rem;font-weight:700;color:var(--text-primary)"] {
  color: var(--lp-ink) !important;
  font-variant-numeric: tabular-nums;
}
body.light .lp-skin.lp-skin .v2-tab-panel span[style*="font-size:0.78rem;color:var(--text-muted)"],
body.light .lp-skin.lp-skin .v2-tab-panel div[style*="font-size:0.78rem;color:var(--text-muted)"] {
  color: var(--lp-muted) !important;
  font-variant-numeric: tabular-nums;
}
/* expandable product list under a product type */
body.light .lp-skin.lp-skin .ctp-detail > div { background: var(--lp-canvas) !important; border-radius: 10px !important; }
body.light .lp-skin.lp-skin .ctp-detail b { color: var(--lp-ink) !important; }
body.light .lp-skin.lp-skin .ctp-detail [style*="color:var(--text-muted)"] { color: var(--lp-muted) !important; }

/* ---- 6. badges ---------------------------------------------------------- */
body.light .lp-skin.lp-skin .date-badge {
  min-height: var(--lp-badge-h);
  padding: 0 9px;
  color: var(--lp-green-700) !important;
  background: var(--lp-green-tint) !important;
  border: 1px solid var(--lp-green-tint-line) !important;
  border-radius: var(--lp-radius-pill);
  box-shadow: none;
  font-size: var(--lp-fs-badge);
  font-weight: 800;
}
/* AI summary pieces (these classes are global, so they are scoped here) */
body.light .lp-skin.lp-skin .ai-chip {
  min-width: 0;
  color: var(--lp-green-900);
  background: var(--lp-green-100);
  border-radius: var(--lp-radius-pill);
  padding: 2px 10px;
  font-size: var(--lp-fs-small);
}
body.light .lp-skin.lp-skin .ai-note {
  color: var(--lp-muted);
  background: var(--lp-canvas);
  border-color: var(--lp-line);
  font-size: var(--lp-fs-small);
}
body.light .lp-skin.lp-skin .ai-txt { color: var(--lp-ink-soft); }
body.light .lp-skin.lp-skin .ai-num,
body.light .lp-skin.lp-skin .ai-amt { color: var(--lp-ink); }
body.light .lp-skin.lp-skin .ai-up { color: var(--lp-up); background: var(--lp-up-bg); }
body.light .lp-skin.lp-skin .ai-down { color: var(--lp-down); background: var(--lp-down-bg); }
body.light .lp-skin.lp-skin .ai-flat { color: var(--lp-muted); background: var(--lp-canvas); }

/* ---- 7. buttons --------------------------------------------------------- */
body.light .lp-skin.lp-skin .search-action-button {
  height: var(--lp-ctl-h) !important;
  min-width: 64px;
  color: #fff !important;
  background: var(--lp-green-900) !important;
  border: 1px solid var(--lp-green-900) !important;
  border-radius: var(--lp-radius-ctl) !important;
  box-shadow: none;
  font-weight: 800 !important;
}
body.light .lp-skin.lp-skin .search-action-button:hover { background: var(--lp-green-950) !important; }
body.light .lp-skin.lp-skin .search-action-button:active { transform: none; box-shadow: none; }
body.light .lp-skin.lp-skin .fav-btn {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  box-shadow: none;
}
body.light .lp-skin.lp-skin .fav-btn svg path { stroke: var(--lp-green-900); }
body.light .lp-skin.lp-skin .fav-btn.active svg path { fill: var(--lp-green-900); stroke: var(--lp-green-900); }
body.light .lp-skin.lp-skin .pg-btn {
  min-height: 36px;
  padding: 4px 14px;
  color: var(--lp-green-900);
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  box-shadow: none;
  font-size: var(--lp-fs-small);
  font-weight: 800;
}
body.light .lp-skin.lp-skin .pg-lbl { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .ctp-more-btn {
  color: var(--lp-green-900) !important;
  background: var(--lp-paper) !important;
  border-color: var(--lp-line) !important;
  border-radius: 8px !important;
  padding: 5px 0 !important;
  font-weight: 800;
}
body.light .lp-skin.lp-skin button:focus-visible,
body.light .lp-skin.lp-skin input:focus-visible,
body.light .lp-skin.lp-skin select:focus-visible {
  outline: 2px solid var(--lp-blue);
  outline-offset: 2px;
}

/* ---- 8. loading / modal ------------------------------------------------- */
/* Intentionally empty. The global loading overlay and the upgrade / login modals live under
   body, outside any view, and are shared by every screen: restyling them from here would change
   other views. They move with the cross-screen step. The local tab overlay inside the exporter
   view (#exporterTabLoading) is likewise left alone. */

/* ---- 9. importer / exporter views (2nd step) ---------------------------- */
/* Parts that have no counterpart on the landing page get tokens only, never new layout. */

/* industry badge next to the company name */
body.light .lp-skin.lp-skin .product-type-badge {
  color: var(--lp-green-700) !important;
  background: var(--lp-green-tint) !important;   /* the JS template writes background:#fff inline */
  border: 1px solid var(--lp-green-tint-line) !important;
  box-shadow: none;
  font-weight: 800;
}

/* contact / address block (approved sellers only) */
body.light .lp-skin.lp-skin [id$="ContactDetail"] {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-card);
}
body.light .lp-skin.lp-skin [id$="ContactDetail"] span[style*="color:#94a3b8"] { color: var(--lp-muted) !important; font-weight: 800 !important; }
body.light .lp-skin.lp-skin [id$="ContactDetail"] span[style*="color:#334155"] { color: var(--lp-ink-soft) !important; }

/* exporter-country filter row */
body.light .lp-skin.lp-skin [id$="CountryFilter"] {
  background: var(--lp-paper) !important;
  border-color: var(--lp-line) !important;
  border-radius: var(--lp-radius-card) !important;
  box-shadow: var(--lp-shadow-card);
}
body.light .lp-skin.lp-skin [id$="CountryFilter"] label { color: var(--lp-ink-soft) !important; font-weight: 800 !important; }
body.light .lp-skin.lp-skin [id$="CountryFilter"] select {
  min-height: var(--lp-select-h);
  color: var(--lp-ink) !important;
  background: var(--lp-paper) !important;
  border-color: var(--lp-line) !important;
  border-radius: 10px;
  box-shadow: none;
  font-weight: 700;
}
body.light .lp-skin.lp-skin .country-select-wrap::after { border-top-color: var(--lp-green-900); }
/* a long country name must shrink inside the row, not push the page sideways (it did in English at 390px) */
body.light .lp-skin.lp-skin [id$="CountryFilter"] .country-select-wrap { min-width: 0; }
body.light .lp-skin.lp-skin [id$="CountryFilter"] select { min-width: 0; max-width: 100%; }

/* product-ad slide (seller products): tokens only, layout untouched */
body.light .lp-skin.lp-skin .lndprod-item {
  border-color: var(--lp-line);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-card);
}
body.light .lp-skin.lp-skin .lndprod-item .lndprod-name { color: var(--lp-ink); font-size: var(--lp-fs-small); font-weight: 700; }
body.light .lp-skin.lp-skin .lndprod-skel { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin [id$="AdProducts"] > div[style*="height:3px"] { background: var(--lp-line) !important; }
/* the layer pins these two fills by id with !important, so the id is repeated here */
body.light .lp-skin.lp-skin #impprod-fill,
body.light .lp-skin.lp-skin #expprod-fill { background: var(--lp-green-900) !important; }

/* list pieces the country view does not have */
body.light .lp-skin.lp-skin .v2-tab-panel [style*="font-size:10px"] { font-size: var(--lp-fs-small) !important; }   /* mini-chart captions and notes */
body.light .lp-skin.lp-skin .v2-tab-panel div[style*="font-size:10px;color:#111"] { color: var(--lp-ink) !important; }
body.light .lp-skin.lp-skin .v2-tab-panel div[style*="font-size:10px;font-weight:500;color:#94a3b8"] { color: var(--lp-muted) !important; }
body.light .lp-skin.lp-skin .v2-tab-panel span[style*="font-weight:500;color:#64748b"] { color: var(--lp-muted) !important; }
body.light .lp-skin.lp-skin .v2-tab-panel div[style*="padding:8px 12px;font-size:0.75rem;color:var(--text-muted)"] { color: var(--lp-muted) !important; }
body.light .lp-skin.lp-skin .v2-tab-panel button.ad-cta-quote { background: var(--lp-green-900) !important; }
/* expanded row detail */
body.light .lp-skin.lp-skin .v2-tab-panel [id*="detail_content_"] {
  background: var(--lp-canvas) !important;       /* inline background:#ffffff */
  border-color: var(--lp-line) !important;
  border-radius: 10px !important;
}
body.light .lp-skin.lp-skin .v2-tab-panel [id*="detail_content_"] [style*="color:#1d4ed8"] { color: var(--lp-blue) !important; }
body.light .lp-skin.lp-skin .v2-tab-panel [id*="detail_content_"] [style*="border-bottom:1px solid #e2e8f0"] { border-bottom-color: var(--lp-line-row) !important; }
body.light .lp-skin.lp-skin .v2-tab-panel [id*="detail_content_"] [style*="font-weight:700;color:var(--text-primary)"] { color: var(--lp-ink) !important; }
/* plain HTML table (daily list): text and line colors only; the cell backgrounds stay as the JS wrote them */
body.light .lp-skin.lp-skin .v2-tab-panel table th {
  color: var(--lp-muted) !important;
  border-color: var(--lp-line) !important;
  font-weight: 800 !important;
}
body.light .lp-skin.lp-skin .v2-tab-panel table td { border-color: var(--lp-line-row) !important; }
body.light .lp-skin.lp-skin .v2-tab-panel table td[style*="color:#111827"] { color: var(--lp-ink) !important; }
body.light .lp-skin.lp-skin .v2-tab-panel table td span[style*="color:#6b7280"] { color: var(--lp-muted) !important; }
body.light .lp-skin.lp-skin .v2-tab-panel table tr[style*="border-bottom:2px solid #e5e7eb"] { border-bottom-color: var(--lp-line) !important; }

/* ---- 10. agricultural auction view (2nd step) --------------------------- */
/* static/auction_view.css is the view's own skin (no variables). Its class rules (0,1,0) lose to
   every selector here; only its "#viewAuction ..." rules need the ID compound used in sections
   "root" and "1. header" above. That file is not edited. Chart SVG contents (lines, bars, axis
   text) are drawn by JS and are not touched: only the frame around the chart changes. */
body.light .lp-skin.lp-skin .auction-intro h1 { color: var(--lp-ink); font-weight: 800; }
body.light .lp-skin.lp-skin .auction-intro p { color: var(--lp-muted); }
body.light .lp-skin.lp-skin .auction-fresh {
  color: var(--lp-green-700);
  background: var(--lp-green-tint);
  border: 1px solid var(--lp-green-tint-line);
  font-size: var(--lp-fs-badge);
}
body.light .lp-skin.lp-skin .auction-card {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-card);
}
body.light .lp-skin.lp-skin .auction-field label { color: var(--lp-ink-soft); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .auction-control {
  color: var(--lp-ink);
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-ctl);
  font-weight: 600;
}
body.light .lp-skin.lp-skin .auction-control::placeholder { color: #8a98a9; font-weight: 500; }
body.light .lp-skin.lp-skin .auction-control:focus {
  border-color: var(--lp-green-700);
  box-shadow: 0 0 0 3px rgba(8, 127, 101, .16);
}
body.light .lp-skin.lp-skin .auction-control:focus-visible { outline: none; }   /* border + ring above already show focus */
body.light .lp-skin.lp-skin .auction-search-btn {
  color: #fff;
  background: var(--lp-green-900);
  border: 1px solid var(--lp-green-900);
  border-radius: var(--lp-radius-ctl);
  box-shadow: none;
  font-weight: 800;
}
body.light .lp-skin.lp-skin .auction-search-btn:hover:not(:disabled) { background: var(--lp-green-950); }
body.light .lp-skin.lp-skin .auction-suggestions {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line-pop);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-pop);
}
body.light .lp-skin.lp-skin .auction-option { color: var(--lp-ink); background: var(--lp-paper); border-bottom-color: var(--lp-line-row); }
body.light .lp-skin.lp-skin .auction-option:hover,
body.light .lp-skin.lp-skin .auction-option:focus { background: var(--lp-hover-bg); }
body.light .lp-skin.lp-skin .auction-option small { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .auction-tools-label { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .auction-range-btn {
  color: var(--lp-ink-soft);
  background: var(--lp-paper);
  border-color: var(--lp-line);
  font-size: var(--lp-fs-small);
  font-weight: 700;
}
body.light .lp-skin.lp-skin .auction-range-btn.active {
  color: var(--lp-green-900);
  background: var(--lp-green-tint);
  border-color: var(--lp-green-tint-line);
  font-weight: 800;
}
body.light .lp-skin.lp-skin .auction-advanced-btn { color: var(--lp-green-900); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .auction-advanced { border-top-color: var(--lp-line-row); }
body.light .lp-skin.lp-skin .auction-axis-note { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .auction-message.info { color: var(--lp-ink-soft); background: var(--lp-green-tint); border-color: var(--lp-green-tint-line); }
body.light .lp-skin.lp-skin .auction-message.error { color: var(--lp-search-red); background: var(--lp-search-red-bg); border-color: var(--lp-search-red-line); }
body.light .lp-skin.lp-skin .auction-metric-label { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .auction-metric-value { color: var(--lp-ink); }
body.light .lp-skin.lp-skin .auction-change { font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .auction-change.up { color: var(--lp-up); }
body.light .lp-skin.lp-skin .auction-change.down { color: var(--lp-down); }
body.light .lp-skin.lp-skin .auction-change.flat { color: var(--lp-muted); }
body.light .lp-skin.lp-skin .auction-metric-sub { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .auction-section-head h2,
body.light .lp-skin.lp-skin .auction-side-card h2 { color: var(--lp-ink); }
body.light .lp-skin.lp-skin .auction-legend { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .auction-volume-key { color: var(--lp-faint); }
body.light .lp-skin.lp-skin .auction-chart { background: var(--lp-paper); border-color: var(--lp-line-row); border-radius: 12px; }
body.light .lp-skin.lp-skin .auction-source { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .auction-detail-row { border-top-color: var(--lp-line-row); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .auction-detail-row span:last-child { color: var(--lp-muted); }
body.light .lp-skin.lp-skin .auction-grade-row { color: var(--lp-ink-soft); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .auction-grade-bar { background: var(--lp-line-row); }
body.light .lp-skin.lp-skin .auction-grade-bar i { background: var(--lp-green-700); }
body.light .lp-skin.lp-skin .auction-empty { color: var(--lp-muted); }
body.light .lp-skin.lp-skin .auction-data-note {
  color: var(--lp-ink-soft);
  background: var(--lp-green-tint);
  border-color: var(--lp-green-tint-line);
  border-radius: var(--lp-radius-ctl);
  font-size: var(--lp-fs-small);
}

/* ---- 11. product view, #viewProduct (3rd step) -------------------------- */
/* #viewProduct is not a ".design-search-view": it has its own "AI landing alignment" layer written
   with ID selectors (specificity 1,x,x, many !important). Everything that competes with that layer
   therefore carries the compound ".lp-skin.lp-skin#viewProduct" (same device as #viewAuction above).
   Parts that do NOT compete - inline-style list rows in .v2-tab-panel, product-ad slide, AI chips,
   pagination label, date/rank/number text - are already covered by sections 4-9 and are not repeated.
   Chart contents (ECharts canvas) are never touched; only the frames around them. */
body.light .lp-skin.lp-skin#viewProduct {
  background: var(--lp-canvas);
  color: var(--lp-ink);
  font-family: var(--lp-font);
}
/* header */
body.light .lp-skin.lp-skin#viewProduct .v2-view-header {
  min-height: 60px;
  color: var(--lp-ink);
  background: var(--lp-paper);
  border-bottom: 1px solid var(--lp-line);
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewProduct .v2-view-header > span {
  color: var(--lp-ink) !important;
  font-size: var(--lp-fs-title) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}
body.light .lp-skin.lp-skin#viewProduct .v2-hamburger span { background: var(--lp-ink-soft); }
body.light .lp-skin.lp-skin#viewProduct .v2-hamburger:hover span,
body.light .lp-skin.lp-skin#viewProduct .v2-hamburger:active span { background: var(--lp-green-900); }
body.light .lp-skin.lp-skin#viewProduct .v2-nav-back,
body.light .lp-skin.lp-skin#viewProduct .v2-nav-home { color: var(--lp-ink-soft); }
body.light .lp-skin.lp-skin#viewProduct .v2-nav-back:hover,
body.light .lp-skin.lp-skin#viewProduct .v2-nav-home:hover { color: var(--lp-green-900); }
body.light .lp-skin.lp-skin#viewProduct .v2-view-header select {
  min-height: var(--lp-select-h);
  color: var(--lp-ink) !important;
  -webkit-text-fill-color: var(--lp-ink) !important;
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: 10px !important;
  box-shadow: none;
  font-weight: 700;
}
body.light .lp-skin.lp-skin#viewProduct .v2-view-header select + svg { color: var(--lp-muted); }
/* search form (this view names it .product-search-panel / .product-search-button) */
body.light .lp-skin.lp-skin#viewProduct .product-search-panel {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-card);
}
body.light .lp-skin.lp-skin#viewProduct .search-input {
  min-height: var(--lp-ctl-h);
  height: var(--lp-ctl-h);
  padding: 8px 14px !important;
  color: var(--lp-ink) !important;
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: var(--lp-radius-ctl) !important;
  box-shadow: none;
  font-weight: 600;
}
body.light .lp-skin.lp-skin#viewProduct .search-input:focus {
  border-color: var(--lp-green-700) !important;
  background: var(--lp-paper) !important;
  box-shadow: 0 0 0 3px rgba(8, 127, 101, .16);
}
body.light .lp-skin.lp-skin#viewProduct .search-input:focus-visible { outline: none; }
body.light .lp-skin.lp-skin#viewProduct .product-search-button {
  height: var(--lp-ctl-h) !important;
  min-width: 64px;
  color: #fff !important;
  background: var(--lp-green-900) !important;
  border: 1px solid var(--lp-green-900) !important;
  border-radius: var(--lp-radius-ctl) !important;
  box-shadow: none;
  font-weight: 800 !important;
}
body.light .lp-skin.lp-skin#viewProduct .product-search-button:hover { background: var(--lp-green-950) !important; }
body.light .lp-skin.lp-skin#viewProduct .product-search-button:active { transform: none; box-shadow: none; }
body.light .lp-skin.lp-skin#viewProduct .search-results {
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line-pop) !important;
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-pop);
}
body.light .lp-skin.lp-skin#viewProduct .search-item {
  color: var(--lp-ink) !important;
  border-color: var(--lp-line) !important;
}
body.light .lp-skin.lp-skin#viewProduct .search-item:hover,
body.light .lp-skin.lp-skin#viewProduct .search-item:active { background: var(--lp-hover-bg) !important; }
/* tabs */
body.light .lp-skin.lp-skin#viewProduct .product-tabs {
  gap: 4px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lp-line) !important;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
  scrollbar-width: none;
}
body.light .lp-skin.lp-skin#viewProduct .product-tabs::-webkit-scrollbar { display: none; }
body.light .lp-skin.lp-skin#viewProduct .product-tab {
  min-height: var(--lp-tab-h);
  min-width: 0;
  padding: 0 4px;
  line-height: 1.25;
  white-space: normal !important;
  color: var(--lp-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: var(--lp-fs-tab-mobile) !important;
  font-weight: 900;
}
body.light .lp-skin.lp-skin#viewProduct .product-tab:hover:not(.active) {
  color: var(--lp-green-700) !important;
  background: transparent !important;
}
body.light .lp-skin.lp-skin#viewProduct .product-tab.active {
  color: var(--lp-green-900) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.light .lp-skin.lp-skin#viewProduct .product-tab.active::after { background: var(--lp-green-900); }
@media (min-width: 768px) {
  body.light .lp-skin.lp-skin#viewProduct .product-tab {
    font-size: var(--lp-fs-tab-pc) !important;
    font-weight: 800;
  }
}
/* hero + cards */
body.light .lp-skin.lp-skin#viewProduct .prod-card,
body.light .lp-skin.lp-skin#viewProduct .prod-hero {
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: var(--lp-radius-card) !important;
  box-shadow: var(--lp-shadow-card) !important;
}
body.light .lp-skin.lp-skin#viewProduct #productAiCard {
  background: linear-gradient(155deg, var(--lp-paper) 0%, var(--lp-ai-bg-end) 100%) !important;
  border-color: var(--lp-ai-line) !important;
}
body.light .lp-skin.lp-skin#viewProduct .prod-title-ko { color: var(--lp-ink); }
body.light .lp-skin.lp-skin #v2productNameSub,
body.light .lp-skin.lp-skin #v2pProductSub {
  color: var(--lp-muted) !important;
  font-size: var(--lp-fs-small) !important;
}
body.light .lp-skin.lp-skin#viewProduct .date-badge {
  min-height: var(--lp-badge-h);
  padding: 0 9px;
  color: var(--lp-green-700) !important;
  background: var(--lp-green-tint) !important;
  border: 1px solid var(--lp-green-tint-line) !important;
  border-radius: var(--lp-radius-pill);
  box-shadow: none;
  font-size: var(--lp-fs-badge);
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewProduct .fav-btn {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewProduct .fav-btn svg path { stroke: var(--lp-green-900); }
body.light .lp-skin.lp-skin#viewProduct .fav-btn.active svg path { fill: var(--lp-green-900); stroke: var(--lp-green-900); }
body.light .lp-skin.lp-skin#viewProduct .pg-btn {
  min-height: 36px;
  padding: 4px 14px;
  color: var(--lp-green-900);
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  box-shadow: none;
  font-size: var(--lp-fs-small);
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewProduct .v2-detail-btn svg,
body.light .lp-skin.lp-skin#viewProduct button svg[stroke="#2563eb"] { stroke: var(--lp-green-700) !important; }
body.light .lp-skin.lp-skin#viewProduct button:focus-visible,
body.light .lp-skin.lp-skin#viewProduct input:focus-visible,
body.light .lp-skin.lp-skin#viewProduct select:focus-visible {
  outline: 2px solid var(--lp-blue);
  outline-offset: 2px;
}
/* exporter-country filter */
body.light .lp-skin.lp-skin#viewProduct #v2ProductCountryFilter {
  background: var(--lp-paper) !important;
  border-color: var(--lp-line) !important;
  border-radius: var(--lp-radius-card) !important;
  box-shadow: var(--lp-shadow-card);
}
body.light .lp-skin.lp-skin#viewProduct #v2ProductCountryFilter label { color: var(--lp-ink-soft) !important; font-weight: 800 !important; }
/* per-country mini chart frames (the chart inside is untouched) */
body.light .lp-skin.lp-skin#viewProduct #v2ProductDailyCountryChart > div,
body.light .lp-skin.lp-skin#viewProduct #v2ProdMonthlyCntryInner > div[id] {
  border: 1px solid var(--lp-line-row) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
/* daily list: highlighted row cells (the layer turns the JS blue fill into a gradient) */
body.light .lp-skin.lp-skin#viewProduct .prod-card td[style*="background:#dbeafe"] {
  background: var(--lp-canvas) !important;
  border-top: 1px solid var(--lp-line-row);
  border-bottom: 1px solid var(--lp-line-row);
}
body.light .lp-skin.lp-skin#viewProduct .prod-card tr td[style*="background:#dbeafe"]:first-child { border-radius: 10px 0 0 10px; }
body.light .lp-skin.lp-skin#viewProduct .prod-card tr td[style*="background:#dbeafe"]:last-child { border-radius: 0 10px 10px 0; }
/* product-ad slide progress fill of this view (the other two are named in section 9) */
body.light .lp-skin.lp-skin #prodprod-fill { background: var(--lp-green-900) !important; }

/* ---- 12. price view, #viewPrice (3rd step) ------------------------------ */
/* #viewPrice is a ".design-search-view" (class layer), so sections 1-9 already apply. Only the parts
   that exist in this view alone are added. The embed / VIP-only entry is unchanged. */
body.light .lp-skin.lp-skin .prod-hero {
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: var(--lp-radius-card) !important;
  box-shadow: var(--lp-shadow-card) !important;
}
body.light .lp-skin.lp-skin .prod-hero .prod-title-ko { color: var(--lp-ink); }
body.light .lp-skin.lp-skin .prod-hero [style*="font-size:0.62rem"],
body.light .lp-skin.lp-skin .prod-hero [style*="font-size:0.72rem"] { font-size: var(--lp-fs-small) !important; }
body.light .lp-skin.lp-skin .prod-hero [style*="color:#94a3b8"] { color: var(--lp-muted) !important; }
body.light .lp-skin.lp-skin .prod-hero [style*="color:#111827"] { color: var(--lp-ink) !important; }
body.light .lp-skin.lp-skin .prod-hero .price-rock-label { color: var(--lp-muted) !important; }
body.light .lp-skin.lp-skin .prod-hero .prod-price { color: var(--lp-ink) !important; }
body.light .lp-skin.lp-skin .prod-hero .prod-price-unit { color: var(--lp-muted) !important; }
body.light .lp-skin.lp-skin .prod-hero .prod-change-badge.prod-change-up { color: var(--lp-up) !important; background: var(--lp-up-bg) !important; }
body.light .lp-skin.lp-skin .prod-hero .prod-change-badge.prod-change-down { color: var(--lp-down) !important; background: var(--lp-down-bg) !important; }
/* currency toggle: the JS writes the active fill inline, so only the frame and the active fill are mapped */
body.light .lp-skin.lp-skin #v2BtnCurrencyToggle {
  background: var(--lp-canvas) !important;
  border-color: var(--lp-line) !important;
}
body.light .lp-skin.lp-skin #v2BtnCurrencyToggle span[style*="background:#1d4ed8"],
body.light .lp-skin.lp-skin #v2BtnCurrencyToggle span[style*="rgb(29"] { background: var(--lp-green-900) !important; color: #fff !important; }
body.light .lp-skin.lp-skin #v2BtnCurrencyToggle span { font-size: var(--lp-fs-small) !important; }   /* the JS rewrites the style attribute on every toggle, so match by element, not by text */
/* daily list (price): same highlighted-row treatment as the product view; the unit note in the header is 8.6px inline */
body.light .lp-skin.lp-skin #v2DailyPriceCard td[style*="background:#dbeafe"] {
  background: var(--lp-canvas) !important;
  border-top: 1px solid var(--lp-line-row);
  border-bottom: 1px solid var(--lp-line-row);
}
body.light .lp-skin.lp-skin #v2DailyPriceCard tr td[style*="background:#dbeafe"]:first-child { border-radius: 10px 0 0 10px; }
body.light .lp-skin.lp-skin #v2DailyPriceCard tr td[style*="background:#dbeafe"]:last-child { border-radius: 0 10px 10px 0; }
body.light .lp-skin.lp-skin #priceTab0 th span[style*="font-size:0.72em"] { font-size: var(--lp-fs-small) !important; }
/* accuracy / explanation box and daily card controls (written for the dark theme) */
body.light .lp-skin.lp-skin #v2DailyInfoBox {
  background: var(--lp-canvas) !important;
  border-color: var(--lp-line) !important;
  border-radius: 10px !important;
  color: var(--lp-ink-soft) !important;
}
body.light .lp-skin.lp-skin #v2DailyInfoBox [style*="color:#000"] { color: var(--lp-ink) !important; }
body.light .lp-skin.lp-skin #v2DailyInfoBox [style*="font-size:0.75rem"] { font-size: var(--lp-fs-small) !important; }
body.light .lp-skin.lp-skin #v2DailyPrevWeek,
body.light .lp-skin.lp-skin #v2DailyNextWeek {
  min-height: 36px;
  color: var(--lp-green-900) !important;
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: 10px !important;
  font-weight: 800;
}
body.light .lp-skin.lp-skin #v2DailyWeekPagination { border-top-color: var(--lp-line-row) !important; }
body.light .lp-skin.lp-skin #v2DailyWeekLabel { color: var(--lp-ink) !important; }
/* per-country daily / weekly / monthly mini chart frames */
body.light .lp-skin.lp-skin #v2DailyByCountryChart > div[id],
body.light .lp-skin.lp-skin #chartV2WeeklyByCountry > div[id],
body.light .lp-skin.lp-skin #chartV2MonthlyByCountry > div[id] {
  border: 1px solid var(--lp-line-row) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
/* country price table */
body.light .lp-skin.lp-skin .prod-country-table thead th { color: var(--lp-muted); font-size: var(--lp-fs-small); border-bottom-color: var(--lp-line); }
body.light .lp-skin.lp-skin .prod-country-table tbody td { color: var(--lp-ink); }
body.light .lp-skin.lp-skin .prod-country-table .td-link { color: var(--lp-ink); }
body.light .lp-skin.lp-skin .prod-country-table .prod-chg-up { color: var(--lp-up); }
body.light .lp-skin.lp-skin .prod-country-table .prod-chg-down { color: var(--lp-down); }
body.light .lp-skin.lp-skin .prod-card-sub { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin .prod-country-table td[style*="color:#111827"] { color: var(--lp-ink) !important; }
/* product-count hover tooltip (shown only while hovering; its hit-testing is app.css's, not touched here) */
body.light .lp-skin.lp-skin .product-cnt-tooltip .tooltip-box {
  color: var(--lp-paper);
  background: var(--lp-ink);
  border-radius: 10px;
  box-shadow: var(--lp-shadow-pop);
  font-size: var(--lp-fs-small);
}

/* ---- 13. discovery view, #viewDiscovery (3rd step) ---------------------- */
/* #viewDiscovery is a ".design-search-view" too (sections 1-9 apply), but its list rows have their own
   layer written with ID selectors ("body.light #viewDiscovery .disc-*"), so those rules carry the compound
   ".lp-skin.lp-skin#viewDiscovery". The .disc-* classes exist only in this view. */
body.light .lp-skin.lp-skin .search-filter-panel {
  background: var(--lp-paper) !important;
  border-color: var(--lp-line) !important;
  border-radius: var(--lp-radius-card) !important;
  box-shadow: var(--lp-shadow-card);
}
body.light .lp-skin.lp-skin .search-filter-panel > span { color: var(--lp-ink-soft) !important; font-size: var(--lp-fs-small) !important; font-weight: 800; }
/* a long English country name must shrink inside the row, not push the page sideways (it did by 36px at 390px) */
body.light .lp-skin.lp-skin .search-filter-panel > div { min-width: 0; }
body.light .lp-skin.lp-skin .search-filter-panel select { max-width: calc(100vw - 170px); }
body.light .lp-skin.lp-skin .search-filter-panel select {
  min-height: var(--lp-select-h);
  color: var(--lp-ink) !important;
  background: var(--lp-paper) !important;
  border-color: var(--lp-line) !important;
  border-radius: 10px;
  box-shadow: none;
  font-weight: 700;
}
body.light .lp-skin.lp-skin#viewDiscovery .disc-row {
  padding: 11px 6px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--lp-line-row);
  border-radius: 0;
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewDiscovery .disc-row:first-child { border-top: 0; }
body.light .lp-skin.lp-skin#viewDiscovery .disc-row:hover { background: var(--lp-hover-bg); border-color: var(--lp-line-row); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-rank {
  color: var(--lp-green-700);
  background: var(--lp-green-tint);
  border: 1px solid var(--lp-green-tint-line);
  border-radius: 8px;
  font-size: var(--lp-fs-small);
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewDiscovery .disc-name { color: var(--lp-ink); font-weight: 800; }
body.light .lp-skin.lp-skin#viewDiscovery .disc-sub { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-num-big { color: var(--lp-ink); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-num-sub { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-up { color: var(--lp-up); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-down { color: var(--lp-down); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-badge { font-size: var(--lp-fs-badge); font-weight: 800; }
body.light .lp-skin.lp-skin#viewDiscovery .disc-badge.hot { color: var(--lp-up); background: var(--lp-up-bg); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-badge.new { color: var(--lp-green-700); background: var(--lp-green-tint); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-badge.check { color: var(--lp-muted); background: var(--lp-canvas); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-win {
  color: var(--lp-green-700);
  background: var(--lp-green-tint);
  border: 1px solid var(--lp-green-tint-line);
  font-size: var(--lp-fs-badge);
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewDiscovery .disc-axis-btn {
  color: var(--lp-ink-soft);
  background: var(--lp-paper);
  border-color: var(--lp-line);
  box-shadow: none;
  font-size: var(--lp-fs-small);
  font-weight: 700;
}
body.light .lp-skin.lp-skin#viewDiscovery .disc-axis-btn.active {
  color: #fff;
  background: var(--lp-green-900);
  border-color: var(--lp-green-900);
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewDiscovery .disc-more {
  color: var(--lp-green-900);
  background: var(--lp-green-tint);
  border-color: var(--lp-green-tint-line);
  box-shadow: none;
  font-size: var(--lp-fs-small);
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewDiscovery .disc-more:hover { color: var(--lp-green-950); background: var(--lp-hover-bg); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-legend,
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail.open {
  color: var(--lp-muted);
  background: var(--lp-canvas);
  border-color: var(--lp-line);
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewDiscovery .disc-legend { font-size: var(--lp-fs-small); }   /* the open detail box keeps its own size: its children set theirs */
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail.open,
body.light .lp-skin.lp-skin#viewDiscovery .disc-legend { border-radius: 10px; }
body.light .lp-skin.lp-skin#viewDiscovery .prod-card [style*="font-size:0.7rem"] { color: var(--lp-muted) !important; font-size: var(--lp-fs-small) !important; }   /* the peer-tab explanation */
body.light .lp-skin.lp-skin#viewDiscovery .disc-legend b { color: var(--lp-ink); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-empty { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-empty span { font-size: var(--lp-fs-small) !important; }
/* expanded table: text, line and badge colours only; the mobile card fold in app.css stays */
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-head { color: var(--lp-ink); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-note { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-ctry { color: var(--lp-green-900); background: var(--lp-green-tint); border-color: var(--lp-green-tint-line); font-size: var(--lp-fs-badge); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl { font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl th { color: var(--lp-muted); font-weight: 800; font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl th,
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl td { border-bottom-color: var(--lp-line-row); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl tr.grp td,
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl tfoot td { border-top-color: var(--lp-line); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl tbody tr.grp { border-top-color: var(--lp-line-row); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl tfoot tr { border-top-color: var(--lp-line); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl thead th { background: var(--lp-canvas); }   /* sticky header: must stay opaque over the rows */
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl td,
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl tfoot td { color: var(--lp-ink); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl td.disc-up { color: var(--lp-up); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl td.disc-down { color: var(--lp-down); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl td.imp { color: var(--lp-ink); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl td.ctry { color: var(--lp-muted); font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl tfoot td { font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl .disc-th-sub { font-size: var(--lp-fs-small); }
body.light .lp-skin.lp-skin#viewDiscovery .disc-detail-tbl tbody tr:hover { background: var(--lp-hover-bg); }

/* ---- 14. bottom-menu views: favorites #viewDashboard, board #viewBoard, MY #viewMy (4th step) ---- */
/* These three carry their own "bottom menu" layer written with ID selectors (1,x,x) and !important
   (green gradient header, 3D offset shadows, gradient cards). Every rule below therefore carries the
   compound ".lp-skin.lp-skin#viewX". The shell (sidebar and bottom nav), layout, sizes and behaviour are
   untouched - only color, border, radius and shadow change. Text colors that the JS templates write
   inline for a dark theme are mapped by attribute selector, as in the earlier steps. */
body.light .lp-skin.lp-skin#viewDashboard,
body.light .lp-skin.lp-skin#viewBoard,
body.light .lp-skin.lp-skin#viewMy {
  color: var(--lp-ink);
  background: var(--lp-canvas) !important;   /* the layer paints a radial gradient with !important */
  font-family: var(--lp-font);
}
/* header: white bar + 1px line, ink title (landing / other search views) */
body.light .lp-skin.lp-skin#viewDashboard .wd-header,
body.light .lp-skin.lp-skin#viewBoard .bd-header,
body.light .lp-skin.lp-skin#viewBoard > .bd-header:first-child,
body.light .lp-skin.lp-skin#viewMy .my-header {
  min-height: 60px;
  color: var(--lp-ink);
  background: var(--lp-paper) !important;
  border-bottom: 1px solid var(--lp-line) !important;
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewDashboard .wd-header .wd-page-title,
body.light .lp-skin.lp-skin#viewBoard .bd-header-title,
body.light .lp-skin.lp-skin#viewMy .my-header #myName {
  color: var(--lp-ink) !important;
  font-size: var(--lp-fs-title) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}
body.light .lp-skin.lp-skin#viewDashboard .wd-header .v2-nav-back,
body.light .lp-skin.lp-skin#viewDashboard .wd-header .v2-nav-home,
body.light .lp-skin.lp-skin#viewBoard .bd-header .v2-nav-back,
body.light .lp-skin.lp-skin#viewBoard .bd-header .v2-nav-home { color: var(--lp-ink-soft) !important; }
body.light .lp-skin.lp-skin#viewDashboard .wd-header .v2-nav-back:hover,
body.light .lp-skin.lp-skin#viewDashboard .wd-header .v2-nav-home:hover,
body.light .lp-skin.lp-skin#viewBoard .bd-header .v2-nav-back:hover,
body.light .lp-skin.lp-skin#viewBoard .bd-header .v2-nav-home:hover { color: var(--lp-green-900) !important; }
body.light .lp-skin.lp-skin#viewDashboard button:focus-visible,
body.light .lp-skin.lp-skin#viewBoard button:focus-visible,
body.light .lp-skin.lp-skin#viewMy button:focus-visible,
body.light .lp-skin.lp-skin#viewMy input:focus-visible,
body.light .lp-skin.lp-skin#viewMy select:focus-visible,
body.light .lp-skin.lp-skin#viewMy textarea:focus-visible {
  outline: 2px solid var(--lp-blue);
  outline-offset: 2px;
}

/* -- favorites -- */
body.light .lp-skin.lp-skin#viewDashboard .wd-alert-note {
  color: var(--lp-ink-soft);
  background: var(--lp-green-tint) !important;
  border: 1px solid var(--lp-green-tint-line) !important;
  border-radius: var(--lp-radius-card);
  box-shadow: none;
  font-size: var(--lp-fs-small);
}
body.light .lp-skin.lp-skin#viewDashboard .wd-alert-note b { color: var(--lp-green-900); }
body.light .lp-skin.lp-skin#viewDashboard .wd-section {
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: var(--lp-radius-card) !important;
  box-shadow: var(--lp-shadow-card);
}
body.light .lp-skin.lp-skin#viewDashboard .wd-section > button {
  color: var(--lp-ink);
  background: var(--lp-paper) !important;
  border-bottom: 1px solid transparent !important;
}
body.light .lp-skin.lp-skin#viewDashboard .wd-section > button:hover { background: var(--lp-hover-bg) !important; }
body.light .lp-skin.lp-skin#viewDashboard .wd-section-title {
  color: var(--lp-ink) !important;
  font-size: var(--lp-fs-body) !important;
  font-weight: 800 !important;
}
body.light .lp-skin.lp-skin#viewDashboard .wd-table tr { border-color: var(--lp-line-row); }
body.light .lp-skin.lp-skin#viewDashboard .wd-table tr:hover { background: var(--lp-hover-bg); }
body.light .lp-skin.lp-skin#viewDashboard .wd-table .td-name {
  color: var(--lp-ink);
  font-size: var(--lp-fs-body);
  font-weight: 700;
}
body.light .lp-skin.lp-skin#viewDashboard .wd-table [style*="font-size:0.7"] { font-size: var(--lp-fs-small) !important; }
body.light .lp-skin.lp-skin#viewDashboard .wd-table [style*="color:#94a3b8"],
body.light .lp-skin.lp-skin#viewDashboard .wd-table [style*="color:#64748b"] { color: var(--lp-muted) !important; }
body.light .lp-skin.lp-skin#viewDashboard .wd-bell,
body.light .lp-skin.lp-skin#viewDashboard .del-btn {
  color: var(--lp-muted);
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewDashboard .wd-bell:hover { color: var(--lp-green-900); background: var(--lp-hover-bg); }
body.light .lp-skin.lp-skin#viewDashboard .wd-bell.on {
  color: var(--lp-green-700);
  background: var(--lp-green-tint);
  border-color: var(--lp-green-tint-line);
}
body.light .lp-skin.lp-skin#viewDashboard .del-btn:hover { color: var(--lp-up); background: var(--lp-up-bg); border-color: var(--lp-line); }
body.light .lp-skin.lp-skin#viewDashboard button[style*="background:#1e3a8a"] {
  color: #fff !important;
  background: var(--lp-green-900) !important;
  border: 1px solid var(--lp-green-900) !important;
  border-radius: var(--lp-radius-ctl) !important;
  box-shadow: none;
  font-weight: 800 !important;
}
body.light .lp-skin.lp-skin#viewDashboard [style*="color:#0f172a"] { color: var(--lp-ink) !important; }
body.light .lp-skin.lp-skin#viewDashboard [style*="color:#64748b"] { color: var(--lp-muted) !important; }

/* -- board -- */
/* tabs: plain text + 2px green underline on the active one (same as .product-tab) */
body.light .lp-skin.lp-skin#viewBoard .lnd-tabs {
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lp-line);
  border-radius: 0;
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewBoard .lnd-tab {
  position: relative;
  min-height: var(--lp-tab-h);
  min-width: 0;
  padding: 0 4px;
  line-height: 1.25;
  color: var(--lp-muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: var(--lp-fs-tab-mobile);
  font-weight: 900;
}
body.light .lp-skin.lp-skin#viewBoard .lnd-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
}
body.light .lp-skin.lp-skin#viewBoard .lnd-tab:hover:not(.on) { color: var(--lp-green-700); background: transparent; }
body.light .lp-skin.lp-skin#viewBoard .lnd-tab.on {
  color: var(--lp-green-900);
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewBoard .lnd-tab.on::after { background: var(--lp-green-900); }
@media (min-width: 768px) {
  body.light .lp-skin.lp-skin#viewBoard .lnd-tab { font-size: var(--lp-fs-tab-pc); font-weight: 800; }
}
body.light .lp-skin.lp-skin#viewBoard .lnd-tpane {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-card);
}
body.light .lp-skin.lp-skin#viewBoard .lnd-titem { border-color: var(--lp-line-row); }
body.light .lp-skin.lp-skin#viewBoard .lnd-titem:hover { background: var(--lp-hover-bg); }
body.light .lp-skin.lp-skin#viewBoard .lnd-titem .q {
  color: var(--lp-green-700);
  background: var(--lp-green-tint);
  border: 1px solid var(--lp-green-tint-line);
  font-size: var(--lp-fs-small);
}
body.light .lp-skin.lp-skin#viewBoard .lnd-titem .q[style*="background:#fef3c7"] {
  color: var(--lp-amber) !important;
  background: var(--lp-paper) !important;
  border-color: var(--lp-line);
}
body.light .lp-skin.lp-skin#viewBoard .lnd-titem .h { color: var(--lp-ink); font-size: var(--lp-fs-body); font-weight: 700; }
body.light .lp-skin.lp-skin#viewBoard .lnd-titem .arr { color: var(--lp-faint); }
body.light .lp-skin.lp-skin#viewBoard .lnd-titem [style*="color:var(--t3)"] { color: var(--lp-muted) !important; font-size: var(--lp-fs-small) !important; }
body.light .lp-skin.lp-skin#viewBoard .lnd-tpane > div[style*="color:var(--t3)"] { color: var(--lp-muted) !important; }
/* status / private badges written inline by the Q&A renderer */
body.light .lp-skin.lp-skin#viewBoard .lnd-titem span[style*="background:#dbeafe"] {
  color: var(--lp-blue) !important;
  background: var(--lp-down-bg) !important;
  border-color: var(--lp-line-pop) !important;
  border-radius: var(--lp-radius-pill) !important;
  font-size: var(--lp-fs-badge) !important;
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewBoard .lnd-titem span[style*="background:#dcfce7"] {
  color: var(--lp-green-700) !important;
  background: var(--lp-green-tint) !important;
  border-color: var(--lp-green-tint-line) !important;
  border-radius: var(--lp-radius-pill) !important;
  font-size: var(--lp-fs-badge) !important;
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewBoard .lnd-titem span[style*="background:#fef3c7"] {
  color: var(--lp-amber) !important;
  background: var(--lp-paper) !important;
  border-color: var(--lp-line) !important;
  border-radius: var(--lp-radius-pill) !important;
  font-size: var(--lp-fs-badge) !important;
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewBoard .lnd-titem button[style*="border:1px solid var(--border)"] {
  color: var(--lp-ink-soft) !important;
  border-color: var(--lp-line) !important;
  border-radius: 8px !important;
  font-size: var(--lp-fs-small) !important;
}
body.light .lp-skin.lp-skin#viewBoard .lnd-titem button[style*="border:1px solid #fca5a5"] {
  color: var(--lp-up) !important;
  border-color: var(--lp-line) !important;
  border-radius: 8px !important;
  font-size: var(--lp-fs-small) !important;
}
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body {
  background: var(--lp-canvas);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body [style*="color:var(--t2)"] { color: var(--lp-ink-soft) !important; }
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body a[href*="/topics/"] {
  color: var(--lp-green-700) !important;
  background: var(--lp-green-tint) !important;
  border-color: var(--lp-green-tint-line) !important;
  font-size: var(--lp-fs-badge) !important;
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body [style*="background:#f0fdf4"] {
  background: var(--lp-green-tint) !important;
  border-color: var(--lp-green-tint-line) !important;
  border-radius: 10px !important;
}
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body [style*="background:#f0fdf4"] [style*="color:#15803d"] { color: var(--lp-green-700) !important; }
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body [style*="background:#f0fdf4"] [style*="color:#166534"] { color: var(--lp-ink-soft) !important; }
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body [style*="background:#eff6ff"] {
  background: var(--lp-green-tint) !important;
  border-color: var(--lp-green-tint-line) !important;
  border-radius: 10px !important;
}
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body a[style*="color:var(--blue)"]:not([href*="/topics/"]) { color: var(--lp-blue) !important; }
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body [style*="font-size:0.75rem"],
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body [style*="font-size:0.72rem"] { font-size: var(--lp-fs-small) !important; }
/* tables inside an opened article: text and line colors only (the table layout stays) */
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body th {
  color: var(--lp-ink);
  background: var(--lp-canvas);
  border-bottom-color: var(--lp-line);
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body td { color: var(--lp-ink); border-bottom-color: var(--lp-line-row); }
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body h3 { color: var(--lp-ink); }
body.light .lp-skin.lp-skin#viewBoard .bd-accordion-body a { color: var(--lp-blue); }
/* title search (feature tab) */
body.light .lp-skin.lp-skin#viewBoard .bd-search-input {
  min-height: var(--lp-ctl-h);
  color: var(--lp-ink);
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-ctl);
  font-weight: 600;
}
body.light .lp-skin.lp-skin#viewBoard .bd-search-input::placeholder { color: #8a98a9; font-weight: 500; }
body.light .lp-skin.lp-skin#viewBoard .bd-search-input:focus {
  border-color: var(--lp-green-700);
  box-shadow: 0 0 0 3px rgba(8, 127, 101, .16);
}
body.light .lp-skin.lp-skin#viewBoard .bd-search-clear { color: var(--lp-muted); }
body.light .lp-skin.lp-skin#viewBoard .bd-search-btn {
  color: #fff;
  background: var(--lp-green-900);
  border: 1px solid var(--lp-green-900);
  border-radius: var(--lp-radius-ctl);
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewBoard .bd-search-btn:hover { background: var(--lp-green-950); }
body.light .lp-skin.lp-skin#viewBoard .bd-search-status { color: var(--lp-muted); font-size: var(--lp-fs-small); }
/* "ask a question" button (logged-in only) */
body.light .lp-skin.lp-skin#viewBoard #boardQABtn {
  color: #fff !important;
  background: var(--lp-green-900) !important;
  border: 1px solid var(--lp-green-900) !important;
  border-radius: var(--lp-radius-ctl) !important;
  box-shadow: none;
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewBoard #boardQABtn:hover { background: var(--lp-green-950) !important; }

/* -- MY: header buttons (bell, logout), invite card, section buttons / panels, inputs, primary buttons, count badges -- */
body.light .lp-skin.lp-skin#viewMy .my-header button {
  color: var(--lp-ink-soft) !important;
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line) !important;
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewMy .my-header button:hover { color: var(--lp-green-900) !important; background: var(--lp-hover-bg) !important; }
body.light .lp-skin.lp-skin#viewMy .invite-card {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-card);
}
body.light .lp-skin.lp-skin#viewMy .invite-card > div:first-child {
  background: linear-gradient(135deg, var(--lp-green-950), var(--lp-green-800)) !important;
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewMy .invite-card > div[style*="height:1px"] { background: var(--lp-line-row) !important; }
body.light .lp-skin.lp-skin#viewMy .invite-card [style*="color:#94a3b8"] { color: var(--lp-muted) !important; font-size: var(--lp-fs-small) !important; }
body.light .lp-skin.lp-skin#viewMy .invite-card #myInviteCode { color: var(--lp-green-700) !important; }
body.light .lp-skin.lp-skin#viewMy button[onclick*="toggleSection"],
body.light .lp-skin.lp-skin#viewMy #subCardBtn {
  color: var(--lp-ink) !important;
  background: var(--lp-paper) !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: var(--lp-radius-card) !important;
  box-shadow: var(--lp-shadow-card);
  font-weight: 800 !important;
}
body.light .lp-skin.lp-skin#viewMy button[onclick*="toggleSection"]:hover,
body.light .lp-skin.lp-skin#viewMy #subCardBtn:hover { background: var(--lp-hover-bg) !important; }
body.light .lp-skin.lp-skin#viewMy [id$="Section"] {
  color: var(--lp-ink-soft);
  background: var(--lp-paper) !important;
  border-color: var(--lp-line) !important;
  box-shadow: none;
}
body.light .lp-skin.lp-skin#viewMy .my-prof-label { color: var(--lp-muted); font-size: var(--lp-fs-small); font-weight: 800; }
body.light .lp-skin.lp-skin#viewMy .my-prof-input,
body.light .lp-skin.lp-skin#viewMy input:not([type="checkbox"]):not([type="radio"]),
body.light .lp-skin.lp-skin#viewMy select,
body.light .lp-skin.lp-skin#viewMy textarea {
  color: var(--lp-ink) !important;
  background: var(--lp-paper) !important;
  border-color: var(--lp-line) !important;
  border-radius: var(--lp-radius-ctl);
  box-shadow: none;
  font-weight: 600;
}
body.light .lp-skin.lp-skin#viewMy input.my-prof-input[readonly] { color: var(--lp-ink-soft) !important; background: var(--lp-canvas) !important; }
body.light .lp-skin.lp-skin#viewMy .my-prof-input:focus,
body.light .lp-skin.lp-skin#viewMy input:focus,
body.light .lp-skin.lp-skin#viewMy select:focus,
body.light .lp-skin.lp-skin#viewMy textarea:focus {
  border-color: var(--lp-green-700) !important;
  box-shadow: 0 0 0 3px rgba(8, 127, 101, .16);
}
body.light .lp-skin.lp-skin#viewMy input:focus-visible { outline: none; }
body.light .lp-skin.lp-skin#viewMy input[type="checkbox"] { accent-color: var(--lp-green-900) !important; }
body.light .lp-skin.lp-skin#viewMy button[style*="background:#2563eb"],
body.light .lp-skin.lp-skin#viewMy button[style*="background:#1d4ed8"],
body.light .lp-skin.lp-skin#viewMy button[style*="background:#0d9488"],
body.light .lp-skin.lp-skin#viewMy button[style*="background:#8b5cf6"] {
  color: #fff !important;
  background: var(--lp-green-900) !important;
  border: 1px solid var(--lp-green-900) !important;
  border-radius: var(--lp-radius-ctl) !important;
  box-shadow: none;
  font-weight: 800;
}
body.light .lp-skin.lp-skin#viewMy button[style*="background:#2563eb"]:hover,
body.light .lp-skin.lp-skin#viewMy button[style*="background:#1d4ed8"]:hover,
body.light .lp-skin.lp-skin#viewMy button[style*="background:#8b5cf6"]:hover { background: var(--lp-green-950) !important; }
body.light .lp-skin.lp-skin#viewMy #couponBadge,
body.light .lp-skin.lp-skin#viewMy #prodQuoteBadge,
body.light .lp-skin.lp-skin#viewMy #quoteBadge {
  color: var(--lp-green-700) !important;
  background: var(--lp-green-tint) !important;
  border: 1px solid var(--lp-green-tint-line);
  font-size: var(--lp-fs-small) !important;
}
/* inline text colors written for the dark theme (the layer below maps them to a flat gray; map them to tokens) */
body.light .lp-skin.lp-skin#viewMy [style*="color:#f1f5f9"] { color: var(--lp-ink) !important; }
body.light .lp-skin.lp-skin#viewMy [style*="color:#cbd5e1"] { color: var(--lp-ink-soft) !important; }
body.light .lp-skin.lp-skin#viewMy [style*="color:#94a3b8"],
body.light .lp-skin.lp-skin#viewMy [style*="color:#64748b"] { color: var(--lp-muted) !important; }
body.light .lp-skin.lp-skin#viewMy [style*="border-bottom:1px solid rgba(255"],
body.light .lp-skin.lp-skin#viewMy [style*="border-top:1px solid rgba(255"] { border-color: var(--lp-line-row) !important; }
body.light .lp-skin.lp-skin#viewMy [style*="font-size:0.68rem"],
body.light .lp-skin.lp-skin#viewMy [style*="font-size:0.7rem"],
body.light .lp-skin.lp-skin#viewMy [style*="font-size:0.72rem"],
body.light .lp-skin.lp-skin#viewMy [style*="font-size:0.74rem"] { font-size: var(--lp-fs-small) !important; }
/* quote status pills in the lists (green = answered, amber = received, gray = other) */
body.light .lp-skin.lp-skin#viewMy span[style*="color:#34d399"] { color: var(--lp-green-700) !important; background: var(--lp-green-tint) !important; }
body.light .lp-skin.lp-skin#viewMy span[style*="color:#fbbf24"] { color: var(--lp-amber) !important; background: var(--lp-paper) !important; border: 1px solid var(--lp-line); }
body.light .lp-skin.lp-skin#viewMy div[style*="color:#34d399"] { color: var(--lp-green-700) !important; }
body.light .lp-skin.lp-skin#viewMy .sub-info-card {
  background: var(--lp-green-900);
  border-color: var(--lp-green-800);
  border-radius: var(--lp-radius-card);
}
body.light .lp-skin.lp-skin#viewMy .sub-action-btn { border-radius: 10px; font-size: var(--lp-fs-small); font-weight: 800; }
body.light .lp-skin.lp-skin#viewMy #mcpSection code { color: var(--lp-ink); }
body.light .lp-skin.lp-skin#viewMy #mcpSection a { color: var(--lp-blue) !important; }

/* ---- 15. MY-only modals + board editor (4th step) ------------------------ */
/* These roots are siblings of the views, not children, so each carries class "lp-skin" itself. Only colors,
   borders, radii and shadows change. Show / hide (display, pointer-events) is the inline style / JS and is
   not touched. Modals that other screens also open (quote request, review, cart, upgrade, login gate) stay
   unskinned. */
body.light .lp-skin.lp-skin#quoteDetailModal,
body.light .lp-skin.lp-skin#prodQuoteDetailModal,
body.light .lp-skin.lp-skin#exclusiveModal {
  color: var(--lp-ink);
  background: var(--lp-canvas) !important;
  font-family: var(--lp-font);
}
body.light .lp-skin.lp-skin#quoteDetailModal [style*="border-bottom:1px solid #e2e8f0"][style*="position:sticky"],
body.light .lp-skin.lp-skin#prodQuoteDetailModal [style*="border-bottom:1px solid #e2e8f0"][style*="position:sticky"],
body.light .lp-skin.lp-skin#exclusiveModal [style*="border-bottom:1px solid #e2e8f0"][style*="position:sticky"] {
  background: var(--lp-paper) !important;
  border-bottom-color: var(--lp-line) !important;
}
body.light .lp-skin.lp-skin#prodQuoteDetailModal > div { background: var(--lp-canvas) !important; }
body.light .lp-skin.lp-skin#quoteDetailModal #qdTitle,
body.light .lp-skin.lp-skin#prodQuoteDetailModal #pqdTitle { color: var(--lp-ink) !important; font-size: var(--lp-fs-title) !important; font-weight: 800 !important; letter-spacing: -.02em; }
body.light .lp-skin.lp-skin#exclusiveModal [style*="font-size:1rem; font-weight:700; color:#000"] { color: var(--lp-ink) !important; font-size: var(--lp-fs-title) !important; font-weight: 800 !important; }
body.light .lp-skin.lp-skin#quoteDetailModal button[onclick*="closeQuoteDetail"],
body.light .lp-skin.lp-skin#prodQuoteDetailModal button[onclick*="closeProdQuoteDetail"] {
  color: var(--lp-ink-soft) !important;
  background: var(--lp-paper) !important;
  border-color: var(--lp-line) !important;
  border-radius: 10px !important;
}
body.light .lp-skin.lp-skin#quoteDetailModal [style*="color:#64748b"],
body.light .lp-skin.lp-skin#prodQuoteDetailModal [style*="color:#64748b"],
body.light .lp-skin.lp-skin#quoteDetailModal [style*="color:#94a3b8"],
body.light .lp-skin.lp-skin#prodQuoteDetailModal [style*="color:#94a3b8"] { color: var(--lp-muted) !important; }
body.light .lp-skin.lp-skin#quoteDetailModal [style*="color:#1e293b"],
body.light .lp-skin.lp-skin#prodQuoteDetailModal [style*="color:#0f172a"],
body.light .lp-skin.lp-skin#quoteDetailModal [style*="color:#0f172a"] { color: var(--lp-ink) !important; }
body.light .lp-skin.lp-skin#quoteDetailModal [style*="border-bottom:1px solid #eef2f6"],
body.light .lp-skin.lp-skin#prodQuoteDetailModal [style*="border-bottom:1px solid #f1f5f9"] { border-bottom-color: var(--lp-line-row) !important; }
body.light .lp-skin.lp-skin#quoteDetailModal div[style*="background:#ffffff"][style*="border-radius:12px"] {
  border-color: var(--lp-line) !important;
  border-radius: var(--lp-radius-card) !important;
  box-shadow: var(--lp-shadow-card);
}
body.light .lp-skin.lp-skin#quoteDetailModal [style*="font-size:0.72rem"],
body.light .lp-skin.lp-skin#prodQuoteDetailModal [style*="font-size:0.72rem"],
body.light .lp-skin.lp-skin#exclusiveModal [style*="font-size:0.72rem"] { font-size: var(--lp-fs-small) !important; }
/* admin-only exclusive-user modal: blue accents become the brand green */
body.light .lp-skin.lp-skin#exclusiveModal button[style*="background:#2563eb"] {
  color: #fff !important;
  background: var(--lp-green-900) !important;
  border-radius: var(--lp-radius-ctl) !important;
  font-weight: 800;
}
/* the tab switcher rewrites the style attribute with cssText, so the active tab shows either the hex or the rgb(37 ...) form */
body.light .lp-skin.lp-skin#exclusiveModal button[id^="exTab"][style*="2563eb"],
body.light .lp-skin.lp-skin#exclusiveModal button[id^="exTab"][style*="rgb(37"] { color: var(--lp-green-900) !important; border-bottom-color: var(--lp-green-900) !important; }
body.light .lp-skin.lp-skin#exclusiveModal input[type="text"] {
  color: var(--lp-ink) !important;
  background: var(--lp-paper) !important;
  border-color: var(--lp-line) !important;
  border-radius: var(--lp-radius-ctl) !important;
}
/* notification inbox (bottom sheet, dark inline theme -> light card) */
body.light .lp-skin.lp-skin#inboxModal > div {
  background: var(--lp-paper) !important;
  border-radius: var(--lp-radius-card) var(--lp-radius-card) 0 0 !important;
  box-shadow: var(--lp-shadow-pop);
}
body.light .lp-skin.lp-skin#inboxModal > div > div:first-child { border-bottom-color: var(--lp-line) !important; }
body.light .lp-skin.lp-skin#inboxModal [style*="color:#f1f5f9"] { color: var(--lp-ink) !important; font-size: var(--lp-fs-body) !important; }
body.light .lp-skin.lp-skin#inboxModal [style*="color:#cbd5e1"] { color: var(--lp-ink-soft) !important; }
body.light .lp-skin.lp-skin#inboxModal [style*="color:#94a3b8"],
body.light .lp-skin.lp-skin#inboxModal [style*="color:#64748b"] { color: var(--lp-muted) !important; }
body.light .lp-skin.lp-skin#inboxModal button[onclick*="Push.enable"] {
  color: var(--lp-green-900) !important;
  border-color: var(--lp-line) !important;
  border-radius: var(--lp-radius-pill) !important;
  font-size: var(--lp-fs-small) !important;
  font-weight: 800;
}
body.light .lp-skin.lp-skin#inboxModal .inbox-item { border-bottom-color: var(--lp-line-row) !important; }
body.light .lp-skin.lp-skin#inboxModal .inbox-item span[style*="background:#1d4ed8"] { background: var(--lp-green-700) !important; }
body.light .lp-skin.lp-skin#inboxModal [style*="font-size:0.7rem"] { font-size: var(--lp-fs-small) !important; }
/* logout / delete-account confirmation */
body.light .lp-skin.lp-skin#logoutModal > div,
body.light .lp-skin.lp-skin#deleteAccountModal > div {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-card) !important;
  box-shadow: var(--lp-shadow-pop);
}
body.light .lp-skin.lp-skin#logoutModal p { color: var(--lp-ink) !important; }
body.light .lp-skin.lp-skin#logoutModal button[style*="background:#1e3a8a"] {
  background: var(--lp-green-900) !important;
  border-radius: var(--lp-radius-ctl) !important;
  font-weight: 800;
}
body.light .lp-skin.lp-skin#logoutModal button[style*="background:#ffffff"],
body.light .lp-skin.lp-skin#deleteAccountModal button[style*="background:#ffffff"] {
  color: var(--lp-ink-soft) !important;
  border-color: var(--lp-line) !important;
  border-radius: var(--lp-radius-ctl) !important;
}
body.light .lp-skin.lp-skin#deleteAccountModal p[style*="color:#334155"] { color: var(--lp-ink-soft) !important; }
body.light .lp-skin.lp-skin#deleteAccountModal button[style*="background:#dc2626"] { border-radius: var(--lp-radius-ctl) !important; font-weight: 800; }
/* board write / edit sheet */
body.light .lp-skin.lp-skin#boardEditorModal .bd-editor-sheet {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-card) var(--lp-radius-card) 0 0;
  box-shadow: var(--lp-shadow-pop);
}
body.light .lp-skin.lp-skin#boardEditorModal #boardEditorHeading { color: var(--lp-ink) !important; font-size: var(--lp-fs-title) !important; font-weight: 800 !important; }
body.light .lp-skin.lp-skin#boardEditorModal input[type=text],
body.light .lp-skin.lp-skin#boardEditorModal textarea {
  color: var(--lp-ink) !important;
  background: var(--lp-paper) !important;
  border-color: var(--lp-line) !important;
  border-radius: var(--lp-radius-ctl);
}
body.light .lp-skin.lp-skin#boardEditorModal input[type=text]:focus,
body.light .lp-skin.lp-skin#boardEditorModal textarea:focus { border-color: var(--lp-green-700) !important; box-shadow: 0 0 0 3px rgba(8, 127, 101, .16); outline: none; }
body.light .lp-skin.lp-skin#boardEditorModal label,
body.light .lp-skin.lp-skin#boardEditorModal #boardEditorExistingFiles { color: var(--lp-muted) !important; font-size: var(--lp-fs-small) !important; }
body.light .lp-skin.lp-skin#boardEditorModal button[style*="background:#1d4ed8"] {
  color: #fff !important;
  background: var(--lp-green-900) !important;
  border: 1px solid var(--lp-green-900) !important;
  border-radius: var(--lp-radius-ctl) !important;
  box-shadow: none;
  font-weight: 800;
}