/* Product Hunter — team catalog. Design: "Evidence before inventory." */

:root {
  --bg: #f1f1f1; --panel: #ffffff; --panel2: #f7f7f7; --hover: #f1f1f1;
  --line: #e3e3e3; --line2: #c9cccf; --line3: #f7f7f7;
  --text: #303030; --soft: #616161; --dim: #616161; --dim2: #616161;
  --faint: #616161; --faint2: #616161;
  --acc: #303030; --link: #005bd3; --green: #147D54; --red: #C13939; --amber: #9A5B00;
  --accent-soft: #f1f1f1; --line-strong: #c9cccf;
  --shadow-sm: 0 1px 2px rgba(22,32,51,.05), 0 7px 22px rgba(22,32,51,.055);
  --shadow-md: 0 2px 5px rgba(22,32,51,.07), 0 18px 45px rgba(22,32,51,.1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif;
       -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--link); text-decoration: none; }
a:hover { color: #244BD1; }
input, button, select, textarea { font-family: inherit; }
button { cursor: pointer; }
::selection { background: rgba(91,140,255,.32); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C7CEDA; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(49,94,251,.28); outline-offset: 2px;
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.mono { font-family: Inter, sans-serif; }
.microlabel { font: 500 10px/1 Inter, sans-serif; color: var(--faint);
              letter-spacing: .09em; text-transform: uppercase; }

/* ============ login ============ */
.login { min-height: 100vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.login-hero { padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column;
  justify-content: space-between; gap: 56px;
  background: radial-gradient(115% 90% at 0% 0%, #f1f1f1 0%, var(--bg) 62%);
  border-right: 1px solid var(--line); }
.login-hero h1 { font: 700 clamp(30px, 4.2vw, 50px)/1.04 Inter, sans-serif;
  letter-spacing: -.03em; margin-bottom: 20px; text-wrap: balance; }
.login-hero p { max-width: 46ch; color: var(--dim); font-size: 15px; line-height: 1.7; }
.src-chips { display: flex; gap: 10px; flex-wrap: wrap;
  font: 500 10px/1 Inter, sans-serif; color: var(--faint); letter-spacing: .1em; }
.src-chips span { padding: 6px 10px; border: 1px solid var(--line2); border-radius: 999px; }
.login-pane { display: grid; place-items: center; padding: 48px 24px; }
.login-box { width: 100%; max-width: 370px; }
.login-box h2 { font: 700 22px/1.2 Inter, sans-serif; letter-spacing: -.02em; margin: 0 0 6px; }
.login-box .sub { color: var(--dim2); font-size: 13.5px; line-height: 1.55; margin-bottom: 22px; }
.user-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.user-btn { background: var(--panel2); border: 1px solid var(--line2); color: var(--dim);
  padding: 11px 6px; border-radius: 10px; font-size: 13px; text-transform: capitalize; }
.user-btn:hover { border-color: var(--line-strong); color: var(--text); }
.user-btn.sel { background: var(--acc); border-color: var(--acc); color: #ffffff; font-weight: 700; }
#pin { width: 100%; background: var(--panel); border: 1px solid var(--line2); color: var(--text);
  padding: 14px; border-radius: 11px; font: 600 18px Inter, sans-serif;
  text-align: center; letter-spacing: .5em; outline: none; }
#pin:focus { border-color: var(--acc); }
.login-err { min-height: 20px; padding-top: 8px; font-size: 12.5px; color: var(--red); }
.btn-primary { width: 100%; margin-top: 6px; background: var(--acc); color: #ffffff;
  border: none; padding: 13px; border-radius: 11px; font: 700 14px Inter, sans-serif; }
.btn-primary:hover { filter: brightness(1.08); }

/* ============ shell ============ */
.topbar { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px); border-bottom: 1px solid rgba(216,222,232,.88);
  box-shadow: 0 1px 10px rgba(22,32,51,.045);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px clamp(14px, 3vw, 26px); }
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.brand-mark { width: 29px; height: 29px; border-radius: 9px; background: var(--acc);
  display: grid; place-items: center; font: 800 12px Inter, sans-serif; color: #ffffff; }
.brand-name { font: 600 14px Inter, sans-serif; letter-spacing: -.01em; }
.brand-name span { color: var(--dim2); }
.nav { display: flex; align-items: center; gap: 3px; background: transparent; border: 0;
  border-radius: 11px; padding: 0; overflow: visible; }
.nav::-webkit-scrollbar { display: none; }
.nav button { background: none; border: none; color: var(--dim); padding: 7px 13px;
  border-radius: 8px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.nav button:hover { color: var(--text); background: var(--panel2); }
.nav button.active { background: var(--accent-soft); color: var(--acc); font-weight: 700; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
#search { background: var(--panel2); border: 1px solid var(--line2); color: var(--text);
  padding: 8px 13px; border-radius: 10px; width: clamp(120px, 20vw, 230px);
  font-size: 13px; outline: none; }
#search:focus { border-color: var(--acc); }
.stamp { font: 400 10.5px/1 Inter, sans-serif; color: var(--faint2); white-space: nowrap; }
.exit-btn { background: none; border: 1px solid var(--line2); color: var(--dim);
  border-radius: 9px; padding: 6px 11px; font-size: 12px; }
.exit-btn:hover { color: var(--text); border-color: var(--line-strong); }

main { max-width: 1480px; margin: 0 auto; padding: clamp(18px, 3vw, 30px) clamp(14px, 3vw, 26px) 90px; }

.pinbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px clamp(14px, 3vw, 26px); background: rgba(91,140,255,.08);
  border-bottom: 1px solid rgba(91,140,255,.25); font-size: 13px; color: var(--soft); }
.pinbar input { background: var(--panel2); border: 1px solid var(--line2); color: var(--text);
  padding: 7px 12px; border-radius: 9px; width: 110px; text-align: center;
  font: 600 14px Inter, sans-serif; letter-spacing: .3em; outline: none; }
.pinbar input:focus { border-color: var(--acc); }
.pinbar button { background: var(--acc); color: #ffffff; border: none;
  padding: 8px 16px; border-radius: 9px; font-weight: 700; font-size: 12.5px; }
.pinbar #pinbar-err { color: var(--red); font-size: 12px; }
.footer { border-top: 1px solid var(--line); padding: 20px clamp(14px, 3vw, 26px);
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  font: 400 11px/1.6 Inter, sans-serif; color: var(--faint2); letter-spacing: .04em; }

/* ============ list head ============ */
.list-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.list-head .grow { flex: 1; min-width: 260px; }
h1.page { font: 700 clamp(22px, 3vw, 30px)/1.1 Inter, sans-serif; letter-spacing: -.025em; margin: 0 0 7px; }
.page-total { display: inline-grid; place-items: center; min-width: 28px; height: 22px;
  margin-left: 7px; padding: 0 7px; border-radius: 999px; vertical-align: 3px;
  background: rgba(91,140,255,.13); color: var(--link);
  font: 600 10px/1 Inter, sans-serif; letter-spacing: 0; }
.page-sub { color: var(--dim2); font-size: 13.5px; line-height: 1.55; max-width: 74ch; text-wrap: pretty; }
.seg { display: flex; gap: 3px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px; }
.seg button { background: none; border: none; color: var(--dim); padding: 7px 14px;
  border-radius: 7px; font-size: 12.5px; }
.seg button.active { background: var(--accent-soft); color: var(--acc); font-weight: 600; }
.catalog-upload-cta { display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 7px 14px; border-radius: 10px;
  border: 1px solid rgba(52,211,153,.45); background: rgba(52,211,153,.1);
  color: var(--green); font-size: 12.5px; font-weight: 700; }
.catalog-upload-cta:hover { color: var(--text); border-color: var(--green); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; margin-bottom: 22px; }
.stat { background: var(--panel); padding: 16px 18px; }
.stat .v { font: 700 clamp(20px, 2.4vw, 26px)/1 Inter, sans-serif; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.stat .l { font: 500 10px/1 Inter, sans-serif; color: var(--faint);
  letter-spacing: .09em; margin-top: 9px; }

.pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.pill { background: var(--panel2); border: 1px solid var(--line2); color: var(--dim);
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; }
.pill:hover { color: var(--text); border-color: var(--line-strong); }
.pill.active { background: var(--acc); border-color: var(--acc); color: #ffffff; font-weight: 600; }
.category-pills .pill { display: inline-flex; align-items: center; gap: 7px; }
.pill-count { min-width: 19px; padding: 2px 5px; border-radius: 999px;
  background: rgba(148,163,184,.12); color: var(--faint);
  font: 600 8.5px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.pill.active .pill-count { background: rgba(255,255,255,.22); color: #ffffff; }

.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.filter-row select { background: var(--panel2); border: 1px solid var(--line2); color: var(--text);
  padding: 7px 11px; border-radius: 9px; font-size: 12.5px; outline: none; }
.count { margin-left: auto; font: 500 11px/1 Inter, sans-serif; color: var(--faint);
  letter-spacing: .07em; }
.quick-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: -7px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.quick-label { font: 500 9px Inter, sans-serif; color: var(--faint2);
  letter-spacing: .12em; margin-right: 2px; }
.quick-pill { border: 1px solid var(--line2); border-radius: 999px;
  background: var(--panel); color: var(--dim); padding: 6px 10px;
  font: 500 10px Inter, sans-serif; letter-spacing: .02em; }
.quick-pill:hover { color: var(--text); border-color: var(--line-strong); }
.quick-pill.active { color: var(--acc); border-color: rgba(91,140,255,.5);
  background: rgba(91,140,255,.1); }

/* ============ cards ============ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 16px; }
.card { position: relative; background: var(--panel2); border: 1px solid var(--line2);
  border-radius: 15px; display: flex; flex-direction: column; cursor: pointer;
  min-width: 0; transition: transform .16s ease, border-color .16s, box-shadow .16s; }
.card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.card-imgwrap { position: relative; padding: 9px 9px 0; }
.card-img { aspect-ratio: 4 / 3; border-radius: 10px; background: #F1F2F5; overflow: hidden;
  display: grid; place-items: center; }
.card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.noimg { width: 100%; height: 100%; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, #E9EBEF 0 7px, #F1F2F5 7px 14px); }
.noimg span { font: 500 9.5px/1.5 Inter, sans-serif; color: #8B93A3;
  letter-spacing: .1em; text-align: center; }
.shortlist-btn { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
  border-radius: 999px; border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.88); color: #616161; font: 700 18px/1 Inter, sans-serif;
  display: grid; place-items: center; }
.shortlist-btn:hover { transform: scale(1.1); color: #9A6700; }
.shortlist-btn.on { color: #9A6700; border-color: rgba(154,103,0,.4);
  background: rgba(255,248,220,.94); }
.shortlist-btn:disabled { opacity: .5; cursor: wait; }
.card-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.card-top { display: flex; align-items: center; gap: 11px; }
.dial { position: relative; width: 46px; height: 46px; border-radius: 50%; flex: none; }
.dial > div { position: absolute; inset: 3px; border-radius: 50%; background: var(--panel2);
  display: grid; place-items: center; font: 700 13.5px Inter, sans-serif;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chiprow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip { font: 700 9.5px/1 Inter, sans-serif; letter-spacing: .08em;
  padding: 4px 8px; border-radius: 6px; text-transform: uppercase; }
.chip.tA { background: rgba(52,211,153,.14); color: var(--green); }
.chip.tB { background: rgba(91,140,255,.14); color: var(--link); }
.chip.tC { background: rgba(148,163,184,.14); color: #94A3B8; }
.chip.vimport { background: rgba(52,211,153,.14); color: var(--green); }
.chip.vtest_small { background: rgba(91,140,255,.14); color: var(--link); }
.chip.vwatch { background: rgba(148,163,184,.12); color: #94A3B8; }
.chip.vavoid { background: rgba(248,113,113,.13); color: var(--red); }
.chip.status { background: none; border: 1px solid var(--line2); color: var(--faint); font-weight: 500; }
.chip.status.shortlisted { color: var(--amber); border-color: rgba(251,191,36,.45); }
.chip.status.imported { color: var(--green); border-color: rgba(52,211,153,.45); }
.chip.status.rejected { color: var(--red); border-color: rgba(248,113,113,.35); }
.chip.status.proposed { color: var(--acc); border-color: rgba(91,140,255,.45); }
.chip.origin { border: 1px solid transparent; }
.chip.origin.ai-crawled { color: var(--link); background: rgba(91,140,255,.11);
  border-color: rgba(91,140,255,.3); }
.chip.origin.self-hunted { color: var(--green); background: rgba(52,211,153,.1);
  border-color: rgba(52,211,153,.32); }
.chip.shadow { border: 1px solid var(--line2); background: transparent;
  color: var(--dim); font-weight: 500; }
.chip.q4-strong, .chip.q4-suitable { color: var(--green);
  border-color: rgba(52,211,153,.35); }
.chip.q4-not_for_q4, .chip.match-mismatch { color: var(--red);
  border-color: rgba(248,113,113,.3); }
.chip.match-exact, .chip.confidence-good_for_test { color: var(--link);
  border-color: rgba(91,140,255,.35); }
.chip.q4-possible, .chip.match-category, .chip.match-ambiguous,
.chip.confidence-research_needed, .chip.confidence-insufficient {
  color: var(--amber); border-color: rgba(251,191,36,.28); }
.chip.taxonomy-review { color: var(--amber);
  border: 1px solid rgba(251,191,36,.35);
  background: rgba(251,191,36,.08); }
.shadow-row { margin-top: 7px; }
.shadow-row .chip { font-size: 8.5px; padding: 3px 6px; }
.card-kw { font: 500 9.5px/1 Inter, sans-serif; color: var(--faint);
  letter-spacing: .09em; margin-top: 7px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-transform: uppercase; }
.card-name { font: 600 13.5px/1.45 Inter, sans-serif; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.9em; text-wrap: pretty; }
.micro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border-radius: 9px; overflow: hidden; }
.micro > div { background: var(--panel); padding: 8px 9px; }
.micro .v { font: 600 12.5px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.micro .l { font: 500 8.5px/1 Inter, sans-serif; color: var(--faint2);
  letter-spacing: .07em; margin-top: 5px; }
.tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font: 500 10px/1 Inter, sans-serif; letter-spacing: .02em;
  padding: 4px 8px; border-radius: 6px; }
.tag.good { background: rgba(52,211,153,.11); color: var(--green); }
.tag.warn { background: rgba(251,191,36,.11); color: var(--amber); }
.tag.bad { background: rgba(248,113,113,.11); color: var(--red); }
.card-commerce { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.card-money { min-width: 0; background: var(--panel); padding: 9px 10px; }
.card-money.sale { text-align: right; }
.card-money-value { display: block; font: 600 12.5px Inter, sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-money-meta { margin-top: 5px; display: flex; align-items: center; gap: 5px;
  min-height: 14px; }
.card-money.sale .card-money-meta { justify-content: flex-end; }
.card-money-label { display: block;
  font: 500 8px/1 Inter, sans-serif; color: var(--faint2);
  letter-spacing: .07em; white-space: nowrap; }
.card-money.estimated .card-money-value { color: var(--amber); }
.card-money.muted .card-money-value { color: var(--faint2);
  font: 500 9px Inter, sans-serif; letter-spacing: .05em; }
.cost-mode-switch { display: inline-flex; align-items: center; gap: 1px; flex: none;
  border: 1px solid var(--line2); border-radius: 5px; background: var(--panel2);
  color: var(--faint2); padding: 1px; font: 600 6.5px/1 Inter, sans-serif;
  letter-spacing: .02em; }
.cost-mode-switch span { padding: 2px 3px; border-radius: 3px; }
.cost-mode-switch .active { background: rgba(91,140,255,.18); color: var(--link); }
.cost-mode-switch .cost-mode-sep { padding: 0; color: var(--faint2); }
.cost-mode-switch:hover { border-color: rgba(91,140,255,.5); }
.card-foot { display: flex; justify-content: flex-end; align-items: baseline; min-height: 14px; }
.trendlab { font: 500 10.5px Inter, sans-serif; letter-spacing: .04em; }
.trendlab.up { color: var(--green); } .trendlab.down { color: var(--red); }
.trendlab.flat { color: var(--dim); } .trendlab.fad { color: var(--amber); }

.decide-bar { display: flex; gap: 8px; margin-top: 8px; }
.decide { flex: 1; padding: 9px 10px; border-radius: 9px; font: 600 12px Inter, sans-serif;
  border: 1px solid var(--line2); background: var(--panel2); }
.decide.yes { color: var(--green); border-color: rgba(52,211,153,.4); }
.decide.no { color: var(--red); border-color: rgba(248,113,113,.35); }
.decide:disabled { opacity: .4; cursor: default; }

/* ============ tables ============ */
.tablebox { border: 1px solid var(--line); border-radius: 14px; overflow: auto; background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablebox table { min-width: 900px; }
th { text-align: left; padding: 11px 14px; font: 500 10px Inter, sans-serif;
  color: var(--faint); letter-spacing: .09em; border-bottom: 1px solid var(--line);
  text-transform: uppercase; white-space: nowrap; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td { padding: 10px 14px; border-bottom: 1px solid var(--line3); }
tbody tr:hover { background: var(--hover); }
tr.click { cursor: pointer; }
td .sub2 { font: 500 9.5px/1 Inter, sans-serif; color: var(--faint);
  letter-spacing: .08em; margin-top: 5px; text-transform: uppercase; }
.tscore { font: 700 13px Inter, sans-serif; padding: 4px 9px; border-radius: 7px;
  font-variant-numeric: tabular-nums; }
.tscore.tA { background: rgba(52,211,153,.14); color: var(--green); }
.tscore.tB { background: rgba(91,140,255,.14); color: var(--link); }
.tscore.tC { background: rgba(148,163,184,.14); color: #94A3B8; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.shortlist-flat { width: 25px; height: 25px; display: grid; place-items: center;
  border-radius: 7px; border: 1px solid var(--line2); background: transparent;
  color: var(--dim); font: 600 15px/1 Inter, sans-serif; }
.shortlist-flat:hover { color: var(--amber); border-color: rgba(251,191,36,.45); }
.shortlist-flat.on { color: var(--amber); border-color: rgba(251,191,36,.45);
  background: rgba(251,191,36,.08); }
.shortlist-flat:disabled { opacity: .45; cursor: wait; }
.cost-cell { white-space: nowrap; font-weight: 600; }
.cost-cell.muted { color: var(--faint2); font: 500 9px Inter, sans-serif;
  letter-spacing: .04em; }
.cost-cell.estimated { color: var(--amber); }
.cost-cell-label { margin-top: 4px; color: var(--faint2);
  font: 500 8px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.cost-cell-meta { margin-top: 4px; display: flex; justify-content: flex-end;
  align-items: center; gap: 5px; }
.cost-cell-meta .cost-cell-label { margin-top: 0; }

/* ============ detail ============ */
.back-btn { background: none; border: 1px solid var(--line2); color: var(--dim);
  padding: 7px 13px; border-radius: 9px; font-size: 12.5px; margin-bottom: 20px; }
.back-btn:hover { color: var(--text); border-color: var(--line-strong); }
.detail-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px; align-items: start; margin-bottom: 26px; }
.detail-imgcol { max-width: 380px; }
.detail-img { background: #F1F2F5; border-radius: 15px; overflow: hidden; border: 1px solid var(--line2); }
.detail-img img { width: 100%; display: block; }
.detail-img .noimg { height: 300px; }
.provenance { margin-top: 11px; font: 400 10.5px/1.7 Inter, sans-serif; color: var(--faint2); }
.detail-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.act-btn { flex: 1; min-width: 130px; padding: 11px 12px; border-radius: 10px;
  font: 600 13px Inter, sans-serif; border: 1px solid var(--line2);
  background: var(--panel2); color: var(--dim); }
.act-btn:hover { color: var(--text); border-color: var(--line-strong); }
.act-btn.starred { color: var(--amber); border-color: rgba(251,191,36,.45); }
.detail-title { font: 700 clamp(21px, 2.6vw, 29px)/1.22 Inter, sans-serif;
  letter-spacing: -.025em; margin: 0 0 18px; text-wrap: pretty; }
.kwline { font: 500 10px Inter, sans-serif; color: var(--faint);
  letter-spacing: .09em; text-transform: uppercase; }
.metricgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 13px; overflow: hidden; }
.metricgrid > div { background: var(--panel); padding: 14px 16px; }
.metricgrid .l { font: 500 9.5px/1 Inter, sans-serif; color: var(--faint);
  letter-spacing: .09em; text-transform: uppercase; }
.metricgrid .v { font: 700 17px Inter, sans-serif; margin: 8px 0;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.metricgrid a { font: 500 10.5px Inter, sans-serif; letter-spacing: .03em; }
.metricgrid .detail-cost-value.estimated { color: var(--amber); }
.metricgrid .detail-cost-value.muted { color: var(--faint2); font-size: 12px; }
.detail-cost { position: relative; }
.detail-cost-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cost-edit-button { border: 1px solid rgba(91,140,255,.4); background: rgba(91,140,255,.1);
  color: var(--link); border-radius: 6px; padding: 3px 7px;
  font: 600 9px Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .04em; cursor: pointer; }
.cost-edit-button:hover, .cost-edit-button[aria-expanded="true"] {
  color: var(--text); border-color: var(--acc); }
.detail-cost-meta { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.detail-cost-label { color: var(--faint2); font: 500 8.5px Inter, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; }
.supplier-price-status { display: block; margin-top: 7px;
  font: 600 8.5px Inter, sans-serif; letter-spacing: .045em;
  text-transform: uppercase; }
.supplier-price-status.estimated { color: var(--faint2); }
.supplier-price-status.provided { color: var(--amber); }
.supplier-price-status.verified, .supplier-price-status.pending { color: var(--green); }
.cost-price-editor { margin-top: 10px; padding: 15px; border: 1px solid rgba(91,140,255,.38);
  border-radius: 12px; background: var(--panel); }
.cost-price-editor[hidden] { display: none; }
.cost-editor-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cost-editor-top h3 { margin: 0; font: 700 14px Inter, sans-serif; }
.cost-editor-top p { margin: 4px 0 0; color: var(--dim); font-size: 12px; }
.cost-editor-close { border: 0; background: transparent; color: var(--dim);
  font: 400 22px/1 sans-serif; padding: 0 2px; cursor: pointer; }
.cost-editor-current { color: var(--soft); font-size: 11.5px; margin-top: 10px; }
.cost-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(145px, 1fr));
  gap: 10px; margin-top: 13px; }
.cost-editor-grid label { min-width: 0; }
.cost-editor-grid label > span { display: block; color: var(--faint);
  font: 500 8.5px Inter, sans-serif; letter-spacing: .055em;
  text-transform: uppercase; margin: 0 0 5px; }
.cost-editor-grid input, .cost-editor-grid select { width: 100%; min-width: 0;
  border: 1px solid var(--line2); border-radius: 8px; background: var(--panel2);
  color: var(--text); padding: 8px 9px; font-size: 12px; outline: none; }
.cost-editor-grid input:focus, .cost-editor-grid select:focus { border-color: var(--acc); }
.cost-editor-pair { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 6px; }
.cost-editor-note { grid-column: span 2; }
.cost-editor-actions { display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-top: 12px; }
.cost-editor-actions .pill { border: 0; cursor: pointer; }
.cost-editor-actions #q-out { color: var(--dim); font-size: 11.5px; }
.cost-editor-actions #q-out.success { color: var(--green); }
.cost-editor-actions #q-out.error { color: var(--red); }
.cost-editor-foot { margin: 9px 0 0; color: var(--faint2); font-size: 10.5px; line-height: 1.45; }
.flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 13px; }
.flag { background: rgba(248,113,113,.1); color: var(--red);
  font: 500 11px Inter, sans-serif; padding: 5px 10px; border-radius: 7px; letter-spacing: .03em; }

.self-hunt-section { padding: 18px; border: 1px solid rgba(52,211,153,.25);
  border-radius: 15px; background: linear-gradient(145deg, rgba(52,211,153,.055), var(--panel)); }
.self-hunt-heading { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.self-hunt-heading h2 { margin: 0 0 5px; }
.self-hunt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; margin-top: 15px; }
.self-hunt-card { display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: 13px; padding: 10px; border: 1px solid var(--line2); border-radius: 12px;
  background: var(--panel2); overflow: hidden; }
.self-hunt-card img, .self-hunt-noimg { width: 120px; height: 105px;
  border-radius: 9px; object-fit: cover; background: #F1F2F5; }
.self-hunt-noimg { display: grid; place-items: center; color: #6B7280;
  font: 600 8px Inter, sans-serif; letter-spacing: .08em; }
.self-hunt-meta { min-width: 0; display: flex; flex-direction: column; gap: 5px;
  color: var(--dim); font-size: 11px; }
.self-hunt-meta strong { color: var(--text); font-size: 12.5px; }
.self-hunt-meta p { margin: 3px 0 0; color: var(--soft); line-height: 1.45; }

.verdict-box { border-radius: 15px; padding: 18px 20px; background: var(--panel);
  border: 1px solid var(--line); margin-top: 4px; }
.verdict-box.import { border-color: rgba(52,211,153,.45); }
.verdict-box.test_small { border-color: rgba(91,140,255,.45); }
.verdict-box.avoid { border-color: rgba(248,113,113,.4); }
.verdict-head { font: 800 15px Inter, sans-serif; letter-spacing: .01em; }
.verdict-box.import .verdict-head { color: var(--green); }
.verdict-box.test_small .verdict-head { color: var(--link); }
.verdict-box.watch .verdict-head { color: var(--dim); }
.verdict-box.avoid .verdict-head { color: var(--red); }
.verdict-cap { font: 400 11px Inter, sans-serif; color: var(--faint2); letter-spacing: .04em; }
.verdict-body { color: var(--soft); font-size: 14px; line-height: 1.65; max-width: 88ch;
  text-wrap: pretty; margin-top: 9px; }
.verdict-risk { margin-top: 11px; font-size: 13px; color: var(--amber); line-height: 1.5; }

.assessment-shell { margin-top: 18px; border: 1px solid var(--line);
  border-radius: 15px; background: var(--panel); overflow: hidden; }
.assessment-primary { padding: 17px 19px 15px; border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--dim); }
.assessment-primary.import { box-shadow: inset 3px 0 0 var(--green); }
.assessment-primary.test_small { box-shadow: inset 3px 0 0 var(--acc); }
.assessment-primary.avoid { box-shadow: inset 3px 0 0 var(--red); }
.assessment-primary-top { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; }
.assessment-eyebrow, .assessment-label { display: block; color: var(--faint);
  font: 500 8.5px Inter, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; }
.assessment-title-row { display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.assessment-verdict { color: var(--dim); font: 800 16px Inter, sans-serif; }
.assessment-primary.import .assessment-verdict { color: var(--green); }
.assessment-primary.test_small .assessment-verdict { color: var(--link); }
.assessment-primary.avoid .assessment-verdict { color: var(--red); }
.assessment-score { border-radius: 7px; background: var(--panel2); color: var(--soft);
  padding: 4px 7px; font: 600 10px Inter, sans-serif; }
.assessment-rules { color: var(--faint2); font: 500 8px Inter, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.assessment-reason { margin: 9px 0 0; color: var(--soft); font-size: 13.5px;
  line-height: 1.5; max-width: 105ch; text-wrap: pretty; }
.assessment-risk { display: flex; gap: 9px; align-items: baseline; margin: 9px 0 0;
  color: var(--amber); font-size: 12.5px; line-height: 1.45; }
.assessment-risk span { flex: none; font: 700 8.5px Inter, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; }
.assessment-summary { display: grid; grid-template-columns: 1.35fr .7fr .9fr; }
.assessment-summary-item { position: relative; min-width: 0; padding: 13px 15px;
  border-right: 1px solid var(--line); }
.assessment-summary-item:last-child { border-right: 0; }
.assessment-summary-item strong { display: block; color: var(--text); font-size: 12.5px;
  margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assessment-summary-item small { display: block; color: var(--dim); font-size: 10.5px;
  margin-top: 3px; }
.assessment-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 0; border: 0; background: transparent; color: var(--link);
  font: 600 10.5px Inter, sans-serif; cursor: pointer; }
.assessment-toggle span { width: 15px; height: 15px; display: grid; place-items: center;
  border-radius: 5px; background: rgba(91,140,255,.12); font: 600 11px/1 Inter, sans-serif; }
.assessment-toggle:hover { color: var(--text); }
.assessment-toggle[aria-expanded="true"] { color: var(--green); }
.assessment-drawer { padding: 15px; border-top: 1px solid var(--line);
  background: var(--panel2); }
.assessment-drawer[hidden] { display: none; }
.assessment-drawer-head { display: flex; justify-content: space-between; align-items: end;
  gap: 14px; margin-bottom: 12px; }
.assessment-drawer-head strong { display: block; margin-top: 4px; font-size: 12.5px; }
.assessment-drawer-head > small { color: var(--dim); font-size: 10.5px; }
.assessment-editor-note { margin: 0 0 10px; color: var(--dim);
  font-size: 11.5px; line-height: 1.45; }
.assessment-drawer .buckets { gap: 8px; }
.assessment-drawer .bucket { background: var(--panel); padding: 11px 12px; }
.assessment-drawer .tablebox { background: var(--panel); }

.section { margin-top: 36px; }
.section h2 { font: 700 17px Inter, sans-serif; letter-spacing: -.02em; margin: 0 0 5px; }
.section .sub { margin: 0 0 16px; color: var(--dim2); font-size: 13px; }
.taxonomy-editor { display: grid; grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center; gap: 9px; }
.taxonomy-editor select { min-width: 0; width: 100%; background: var(--panel);
  border: 1px solid var(--line2); color: var(--text); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; outline: none; }
.taxonomy-editor select:focus { border-color: var(--acc); }
.taxonomy-editor .act-btn { white-space: nowrap; }
.taxonomy-out { grid-column: 1 / -1; color: var(--dim); font-size: 11.5px; }
.buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 12px; }
.bucket { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; }
.bucket .name { font-size: 12px; color: var(--dim); margin-bottom: 9px; }
.bucket .val { font: 700 15px Inter, sans-serif; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.bucket .val span { color: var(--faint2); font-weight: 600; }
.bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar > div { height: 100%; background: linear-gradient(90deg, var(--acc), #7FA6FF); border-radius: 3px; }

.chartbox { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 18px 12px; }
.chart-readout { font: 500 12px Inter, sans-serif; color: var(--link); letter-spacing: .04em; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 170px; }
.bars > div { flex: 1; min-width: 2px; background: #AFC1F9; border-radius: 2px 2px 0 0; }
.bars > div:hover { background: var(--acc); }
.chart-x { display: flex; justify-content: space-between; margin-top: 10px;
  font: 400 10px Inter, sans-serif; color: var(--faint2); letter-spacing: .06em; }

.adrow { display: grid; grid-template-columns: 130px 1fr 170px; gap: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; align-items: start; margin-bottom: 9px; }
.adrow .days { font: 700 17px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.adrow .kind { font: 500 9.5px Inter, sans-serif; color: var(--faint);
  letter-spacing: .08em; margin-top: 5px; }
.adrow .page { font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.adrow .copy { color: var(--dim); font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.adrow .since { font: 400 10.5px Inter, sans-serif; color: var(--faint2); margin-top: 6px; }
.adrow .vlink { font: 500 11px Inter, sans-serif; }
.adver { display: inline-block; margin-top: 7px; font: 500 10.5px Inter, sans-serif;
  padding: 2px 8px; border-radius: 6px; letter-spacing: .02em; }
.adver.ok  { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.adver.bad { color: var(--red);   background: color-mix(in srgb, var(--red) 12%, transparent); }
.adver.dim { color: var(--faint); background: color-mix(in srgb, var(--faint) 10%, transparent); }

.reviews-summary { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.reviews-summary h2 { margin: 0 0 6px; }
.reviews-summary .sub { margin-bottom: 0; }
.review-count { font: 500 10.5px Inter, sans-serif; letter-spacing: .04em; }
.review-count.positive { color: var(--green); }
.review-count.negative { color: var(--red); }
.reviews-toggle-btn { display: inline-flex; align-items: center; gap: 10px; flex: none;
  border: 1px solid var(--line2); border-radius: 10px; padding: 9px 12px;
  background: var(--panel2); color: var(--dim); font: 600 12px Inter, sans-serif; }
.reviews-toggle-btn:hover { color: var(--text); border-color: var(--line-strong); }
.reviews-toggle-btn[aria-expanded="true"] { color: var(--link);
  border-color: rgba(91,140,255,.45); }
.reviews-toggle-icon { width: 18px; height: 18px; border-radius: 6px; display: grid;
  place-items: center; background: rgba(91,140,255,.12); color: var(--link);
  font: 600 14px/1 Inter, sans-serif; }
.reviews-content { margin-top: 18px; }
.reviews-loading { margin: 0; }
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.rev-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.rev-dot { width: 6px; height: 6px; border-radius: 50%; }
.rev-label { font: 500 11px Inter, sans-serif; letter-spacing: .09em; }
.review { background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 14px; margin-bottom: 8px; }
.review .stars { font-size: 12px; letter-spacing: 2px; }
.review .rtext { color: var(--soft); font-size: 13px; line-height: 1.55; margin: 6px 0 5px; text-wrap: pretty; }
.review .rmeta { font: 400 10.5px Inter, sans-serif; color: var(--faint2); }
.more-btn { background: var(--panel2); border: 1px solid var(--line2); color: var(--dim);
  padding: 8px 16px; border-radius: 9px; font-size: 12px; }
.more-btn:hover { color: var(--text); border-color: var(--line-strong); }
.pill-link { display: inline-block; margin-top: 13px; border: 1px solid var(--line2);
  border-radius: 999px; padding: 8px 15px; font: 500 12px Inter, sans-serif; }
.pill-link:hover { border-color: var(--acc); }

/* ============ research ============ */
.research-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px; align-items: start; }
.rpanel { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 20px; }
.rpanel h3 { font: 700 15px Inter, sans-serif; margin: 0 0 6px; letter-spacing: -.01em; }
.rpanel .help { margin: 0 0 15px; color: var(--dim2); font-size: 13px; line-height: 1.55; }
.rpanel textarea, .rpanel input:not([type="file"]) { width: 100%; background: var(--panel2);
  border: 1px solid var(--line2); color: var(--text); border-radius: 11px;
  padding: 12px 13px; font-size: 13.5px; line-height: 1.6; outline: none; resize: vertical; }
.rpanel textarea:focus, .rpanel input:focus { border-color: var(--acc); }
.rpanel input[type="file"] { width: 100%; color: var(--dim); font-size: 12.5px;
  padding: 22px 14px; background: var(--panel2); border: 1px dashed var(--line-strong); border-radius: 11px; }
.mt10 { margin-top: 10px; }
.rmsg { min-height: 22px; margin-top: 11px; font-size: 12.5px; color: var(--green); }
.queue { display: flex; flex-direction: column; gap: 1px; background: var(--line);
  border-radius: 11px; overflow: hidden; }
.qrow { background: var(--panel2); padding: 14px 15px; display: flex; gap: 13px; align-items: flex-start; }
.qdot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; }
.qrow .what { font-weight: 600; font-size: 13.5px; }
.qrow .meta { font: 400 10.5px Inter, sans-serif; color: var(--faint2);
  margin-top: 5px; letter-spacing: .04em; }
.qrow .result { color: var(--link); font: 500 11.5px Inter, sans-serif; margin-top: 6px; }
.qstatus { font: 700 9.5px Inter, sans-serif; letter-spacing: .08em;
  padding: 4px 8px; border-radius: 6px; text-transform: uppercase; flex: none; }
.qstatus.done { background: rgba(52,211,153,.14); color: var(--green); }
.qstatus.queued { background: rgba(251,191,36,.13); color: var(--amber); }
.qstatus.failed { background: rgba(248,113,113,.13); color: var(--red); }

/* ============ about ============ */
.about { max-width: 800px; }
.about .lead { color: var(--soft); font-size: 15px; line-height: 1.7; margin: 0 0 30px; text-wrap: pretty; }
.about h2 { font: 700 16px Inter, sans-serif; letter-spacing: -.01em; margin: 32px 0 12px; }
.stack { display: flex; flex-direction: column; gap: 1px; background: var(--line);
  border-radius: 12px; overflow: hidden; }
.stack > div { background: var(--panel); padding: 15px 17px; }
.stack b { font-size: 13.5px; }
.stack .d { color: var(--dim); font-size: 13px; line-height: 1.6; margin-top: 5px; }
.bcards { display: flex; flex-direction: column; gap: 10px; }
.bcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 15px 17px; }
.bcard .pts { font: 700 13px Inter, sans-serif; color: var(--acc); margin-right: 6px; }
.bcard b { font-size: 13.5px; }
.bcard .d { color: var(--dim); font-size: 13px; line-height: 1.6; margin-top: 5px; }
.about ul { margin: 0; padding-left: 20px; color: var(--dim); font-size: 13.5px; line-height: 1.8; }
.about ul b { color: var(--text); }
.about .flow { color: var(--dim); font-size: 13.5px; line-height: 1.75; }

.empty { padding: 70px 0; text-align: center; color: var(--dim2); font-size: 14px; }
.loading { color: var(--dim); padding: 80px; text-align: center; }
.catalog-more { display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; padding: 24px 0 8px; color: var(--faint); font-size: 12px; }
.catalog-more button { border: 1px solid rgba(91,140,255,.5); border-radius: 10px;
  background: rgba(91,140,255,.1); color: var(--link); padding: 9px 18px;
  font-weight: 700; }
.catalog-more button:hover { border-color: var(--acc); color: var(--text); }
.catalog-loading { min-height: 420px; }
.catalog-loading-label { padding: 4px 0 16px; color: var(--faint); font-size: 12px; }
.catalog-skeleton-card { min-height: 420px; padding: 14px; pointer-events: none; }
.catalog-skeleton-card div { height: 230px; border-radius: 10px; margin-bottom: 18px; }
.catalog-skeleton-card span { display: block; height: 13px; border-radius: 7px; margin: 12px 0; }
.catalog-skeleton-card span:nth-child(3) { width: 72%; }
.catalog-skeleton-card span:nth-child(4) { width: 48%; }
.catalog-skeleton-card div, .catalog-skeleton-card span,
.catalog-skeleton-row span { background: linear-gradient(90deg, #EDF0F5 25%, #f7f7f7 50%, #EDF0F5 75%);
  background-size: 200% 100%; animation: catalog-pulse 1.2s ease-in-out infinite; }
.catalog-skeleton-row td { height: 62px; }
.catalog-skeleton-row span { display: block; height: 14px; border-radius: 7px; }
.catalog-summary-error { min-height: 220px; border-color: rgba(248,113,113,.35); }
.catalog-summary-error p, .catalog-summary-error-row td { color: var(--red); font-size: 12px; }
@keyframes catalog-pulse { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ============ mobile ============ */
@media (max-width: 680px) {
  .topbar { gap: 8px 12px; padding: 10px 12px; }
  .top-right { gap: 8px; }
  #search { width: 120px; font-size: 12.5px; }
  .stamp { display: none; }
  .nav { order: 3; width: 100%; }
  main { padding: 14px 12px 60px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
  .card-name { font-size: 12px; }
  .micro .v { font-size: 11px; }
  .dial { width: 40px; height: 40px; }
  .dial > div { font-size: 12px; }
  .detail-imgcol { max-width: none; }
  .adrow { grid-template-columns: 1fr; gap: 8px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .list-head { margin-bottom: 14px; }
  .cost-editor-grid { grid-template-columns: 1fr 1fr; }
  .cost-editor-note { grid-column: 1 / -1; }
  .assessment-summary { grid-template-columns: 1fr; }
  .assessment-summary-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .assessment-summary-item:last-child { border-bottom: 0; }
  .assessment-rules { display: none; }
  .assessment-drawer { padding: 12px; overflow-x: auto; }
  .taxonomy-editor { grid-template-columns: 1fr; }
  .taxonomy-out { grid-column: auto; }
}

@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
  .card-name { font-size: 13.5px; }
  .card-money-value { font-size: 13px; }
  .card-money { padding: 10px 12px; }
  .cost-editor-grid { grid-template-columns: 1fr; }
  .cost-editor-note { grid-column: auto; }
}

/* ---------- import decision (engine v2) ---------- */
.import-decision-section { margin-top: 28px; }
.import-decision-card { border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; background: var(--panel); }
.import-decision-card.good { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.import-decision-card.warn { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.import-decision-card.bad { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.import-decision-card.neutral { border-color: var(--line); }
.import-decision-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; }
.import-decision-eyebrow { color: var(--faint); font: 500 9px Inter, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; }
.import-decision-card h2 { margin: 0; font-size: 18px; }
.import-decision-reason { color: var(--soft); font-size: 13.5px; line-height: 1.5;
  margin: 12px 0 10px; }
.import-next-step { display: flex; gap: 9px; align-items: baseline; color: var(--text);
  background: var(--panel2); border-radius: 9px; padding: 9px 11px; font-size: 12.5px; }
.import-next-step span { color: var(--amber); font: 700 9px Inter, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; flex: none; }
.import-mini-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; margin-top: 12px; }
.import-mini-metrics > div { background: var(--panel2); padding: 10px 11px; min-width: 0; }
.import-mini-metrics span { display: block; color: var(--faint);
  font: 500 8px Inter, sans-serif; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-mini-metrics strong { display: block; color: var(--text);
  font: 700 14px Inter, sans-serif; margin-top: 5px; font-variant-numeric: tabular-nums; }
.import-decision-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; }
.import-details-toggle { display: inline-flex; align-items: center; gap: 9px;
  margin-top: 0; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line2); background: transparent; color: var(--dim);
  font: 600 11.5px Inter, sans-serif; }
.import-details-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.import-details-toggle[aria-expanded="true"] { color: var(--link);
  border-color: rgba(91,140,255,.45); }
.import-details-icon { width: 17px; height: 17px; border-radius: 5px; display: grid;
  place-items: center; background: rgba(91,140,255,.12); color: var(--link);
  font: 600 13px/1 Inter, sans-serif; }
.shipment-calculator { margin-top: 12px; padding: 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel2); }
.shipment-calculator[hidden] { display: none; }
.shipment-calculator-grid { display: grid;
  grid-template-columns: minmax(170px, 1.4fr) minmax(90px, .7fr) minmax(110px, .8fr) auto;
  gap: 8px; align-items: end; }
.shipment-calculator-grid label > span { display: block; margin-bottom: 5px; color: var(--faint);
  font: 500 8px Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.shipment-calculator-grid select, .shipment-calculator-grid input {
  width: 100%; min-width: 0; border: 1px solid var(--line2); border-radius: 8px;
  background: var(--panel); color: var(--text); padding: 8px 9px; font-size: 11.5px;
  outline: none; }
.shipment-calculator-grid select:focus, .shipment-calculator-grid input:focus {
  border-color: var(--acc); }
.shipment-calculate-button { border: 0; border-radius: 8px; padding: 9px 12px;
  background: var(--acc); color: #ffffff; font: 700 12px Inter, sans-serif;
  white-space: nowrap; cursor: pointer; }
.shipment-calculate-button:disabled { opacity: .55; cursor: wait; }
.shipment-price-basis { margin-top: 8px; color: var(--faint2); font-size: 10px; line-height: 1.4; }
.shipment-calculator-output { display: grid; gap: 4px; margin-top: 9px;
  color: var(--soft); font-size: 11.5px; line-height: 1.45; }
.shipment-calculator-output:empty { display: none; }
.shipment-calculator-output.queued { color: var(--amber); }
.shipment-calculator-output.success strong,
.shipment-result-decision { color: var(--green); }
.decision-box { border: 1px solid var(--line); border-radius: 12px; padding: 15px 17px;
  background: var(--panel); }
.decision-box.good { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.decision-box.warn { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.decision-box.bad  { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.decision-box.neutral { border-color: var(--line); }
.dec-head { font: 700 15px Inter, sans-serif; margin-bottom: 9px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dec-conf { font: 500 10px Inter, sans-serif; color: var(--faint);
  letter-spacing: .06em; text-transform: uppercase; }
.dec-reason { color: var(--soft); font-size: 13.5px; line-height: 1.6;
  margin-bottom: 5px; text-wrap: pretty; }
.dec-blocked { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
  color: var(--red); font-size: 12.5px; font-weight: 600; }

.chip.rec-good { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.chip.rec-warn { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.chip.rec-bad  { color: var(--red);   background: color-mix(in srgb, var(--red) 14%, transparent); }
.chip.rec-neutral { color: var(--dim); background: color-mix(in srgb, var(--dim) 12%, transparent); }
.chip.vtest { color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); }
.chip.vavoid { color: var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); }

.findings { margin-top: 14px; display: grid; gap: 7px; }
.finding { display: grid; grid-template-columns: 132px 1fr; gap: 11px;
  align-items: start; font-size: 12.5px; line-height: 1.55; }
.finding .fsev { font: 600 9.5px Inter, sans-serif; letter-spacing: .07em;
  padding: 3px 7px; border-radius: 5px; text-align: center; }
.finding.critical .fsev { color: var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); }
.finding.warning .fsev { color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); }
.finding.info .fsev { color: var(--faint); background: color-mix(in srgb, var(--faint) 10%, transparent); }
.finding .ftext { color: var(--soft); text-wrap: pretty; }

.evidence-section { margin-top: 24px; }
.evidence-summary-toggle { width: 100%; display: grid;
  grid-template-columns: minmax(180px, 1fr) auto 26px; gap: 16px; align-items: center;
  text-align: left; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--text); padding: 13px 14px; cursor: pointer; }
.evidence-summary-toggle:hover { border-color: var(--line-strong); }
.evidence-summary-toggle[aria-expanded="true"] { border-color: rgba(91,140,255,.4);
  border-radius: 12px 12px 0 0; }
.evidence-summary-copy { min-width: 0; }
.evidence-eyebrow { display: block; color: var(--faint);
  font: 500 8px Inter, sans-serif; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 4px; }
.evidence-summary-copy strong { display: block; font: 700 14px Inter, sans-serif; }
.evidence-summary-copy small { display: block; color: var(--dim); font-size: 11px;
  margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-counts { display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; flex-wrap: wrap; }
.evidence-count { border-radius: 7px; padding: 5px 7px;
  font: 500 9px Inter, sans-serif; white-space: nowrap; }
.evidence-count b { font-size: 10px; }
.evidence-count.known { color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent); }
.evidence-count.estimated { color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent); }
.evidence-count.unknown { color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent); }
.evidence-toggle-icon { width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 7px; background: rgba(91,140,255,.12); color: var(--link);
  font: 600 15px/1 Inter, sans-serif; }
.evidence-details { border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 10px; background: var(--panel); }
.evidence-details[hidden] { display: none; }
.evidence-table { border-radius: 9px; }
.evidence-row td:first-child { border-left: 3px solid transparent; color: var(--soft); }
.evidence-row.known td:first-child { border-left-color: var(--green); color: var(--green); }
.evidence-row.estimated td:first-child { border-left-color: var(--amber); }
.evidence-row.unknown td:first-child { border-left-color: var(--red); color: var(--red); }

.dstat { font: 500 10.5px Inter, sans-serif; padding: 2px 7px; border-radius: 5px; }
.dstat.ok   { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.dstat.est  { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.dstat.miss { color: var(--red);   background: color-mix(in srgb, var(--red) 12%, transparent); }

.suitgrid { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; }
.suitscore { text-align: center; padding: 16px 10px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); }
.suitscore .v { font: 700 34px Inter, sans-serif; line-height: 1; }
.suitscore .l { font: 500 10px Inter, sans-serif; color: var(--faint); margin-top: 3px; }
.suitscore .band { margin-top: 8px; font-size: 11.5px; color: var(--soft); text-wrap: pretty; }
.suitbars { display: grid; gap: 11px; }

.costnote { color: var(--faint2); font-size: 11.5px; line-height: 1.6;
  margin-top: 11px; text-wrap: pretty; }

@media (max-width: 680px) {
  .suitgrid { grid-template-columns: 1fr; }
  .finding { grid-template-columns: 1fr; gap: 3px; }
  .finding .fsev { justify-self: start; }
  .shipment-calculator-grid { grid-template-columns: 1fr 1fr; }
  .shipment-calculate-button { min-height: 35px; }
  .evidence-summary-toggle { grid-template-columns: 1fr 26px; gap: 10px; }
  .evidence-counts { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .evidence-toggle-icon { grid-column: 2; grid-row: 1; }
}

/* Price-spread caveat under the PK price tile: a median of multi-variant
   listing prices is a floor, not a typical price. */
.pricerange { font: 400 10.5px/1.45 Inter, sans-serif;
  color: var(--amber); margin-top: 6px; max-width: 30ch; }

/* ============ warm light decision UI ============ */
html { color-scheme: light; }
body { font-size: 16px; line-height: 1.5; }
main { max-width: 1440px; }

/* Comfortable metadata: no decision-critical copy renders below 12px. */
:is(.microlabel, .src-chips, .stamp, .footer, .page-total, .stat .l, .pill-count,
  .count, .quick-label, .quick-pill, .noimg span, .chip, .shadow-row .chip,
  .card-kw, .micro .l, .tag, .card-money-label, .trendlab, th, td .sub2,
  .cost-cell.muted, .cost-cell-label, .provenance, .kwline, .metricgrid .l,
  .metricgrid a, .detail-cost-label, .supplier-price-status, .cost-editor-label,
  .cost-editor-current, .cost-editor-actions #q-out, .cost-editor-foot,
  .flag, .verdict-cap, .assessment-eyebrow, .assessment-rule-tag,
  .assessment-rules, .assessment-risk span, .assessment-summary-item small,
  .assessment-toggle, .assessment-drawer-head > small, .taxonomy-out,
  .chart-readout, .adrow .kind, .adrow .since, .adrow .vlink, .adver,
  .review-count, .rev-label, .review .rmeta, .qrow .meta, .qrow .result,
  .qstatus, .import-decision-eyebrow, .import-next-step span,
  .import-mini-metrics span, .import-details-toggle, .shipment-field label,
  .shipment-calculator-input, .shipment-calculate-button, .shipment-price-basis,
  .shipment-warning, .dec-conf, .finding .fsev, .evidence-eyebrow,
  .evidence-summary-copy small, .evidence-count, .evidence-count b, .dstat,
  .suitscore .l, .suitscore .band, .costnote, .pricerange) { font-size: 12px; }

/* Header menus */
.top-menu { position: relative; }
.top-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.top-menu > summary::-webkit-details-marker { display: none; }
.nav-more > summary { min-height: 34px; display: flex; align-items: center; padding: 7px 13px;
  border-radius: 8px; color: var(--dim); font-size: 12.5px; font-weight: 600; }
.nav-more > summary:hover, .nav-more[open] > summary { color: var(--text); background: var(--panel2); }
.nav-more.contains-active > summary { background: var(--accent-soft); color: var(--acc); }
.top-menu-panel { position: absolute; z-index: 80; top: calc(100% + 8px); min-width: 180px;
  padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  box-shadow: var(--shadow-md); }
.nav-more .top-menu-panel { left: 0; }
.top-menu-panel button { width: 100%; min-height: 38px; border: 0; border-radius: 8px;
  background: transparent; color: var(--soft); padding: 8px 10px; text-align: left; font-size: 13px; }
.top-menu-panel button:hover, .top-menu-panel button.active { background: var(--accent-soft); color: var(--acc); }
.user-menu > summary { width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--acc); font: 700 13px Inter, sans-serif; }
.user-menu-panel { right: 0; display: grid; gap: 7px; padding: 12px; min-width: 210px; }
.user-menu-panel strong { text-transform: capitalize; }
.user-menu-panel .stamp { line-height: 1.5; }
.user-menu-panel .exit-btn { margin-top: 5px; text-align: center; color: var(--red); }
#search { min-height: 38px; background: var(--panel); box-shadow: inset 0 0 0 1px transparent; }
.footer { background: var(--panel); font-family: Inter, sans-serif; letter-spacing: 0; }

/* Shared controls */
.seg { background: var(--panel2); border-color: var(--line); }
.seg button { min-height: 34px; }
.seg button.active { background: var(--panel); color: var(--acc); box-shadow: var(--shadow-sm); }
.catalog-upload-cta { min-height: 42px; background: #EDF8F3; }
.filter-row select, .catalog-filter-controls select, .advanced-filter-grid select {
  min-height: 42px; background: var(--panel); border-color: var(--line2); color: var(--text);
}

/* Catalog header and compact filtering */
.catalog-head { align-items: center; margin-bottom: 12px; }
.catalog-view-controls { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.catalog-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--dim); font-size: 13px; margin-bottom: 18px; }
.catalog-summary span { display: inline-flex; align-items: baseline; gap: 5px; }
.catalog-summary span + span::before { content: "·"; margin-right: 5px; color: var(--line-strong); }
.catalog-summary strong { color: var(--text); font: 700 14px Inter, sans-serif; }
.catalog-toolbar { position: relative; z-index: 25; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.catalog-filter-controls { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-popover { position: relative; }
.filter-popover > summary { min-height: 42px; list-style: none; display: flex; align-items: center;
  gap: 8px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel);
  color: var(--soft); padding: 8px 12px; cursor: pointer; font-size: 13px; }
.filter-popover > summary::-webkit-details-marker { display: none; }
.filter-popover > summary:hover, .filter-popover[open] > summary { border-color: var(--line-strong); }
.filter-popover > summary::after { content: "⌄"; color: var(--dim); font-size: 13px; margin-left: 2px; }
.filter-popover > summary strong { color: var(--text); font-weight: 650; }
.advanced-filters > summary > span { min-width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 999px; background: var(--accent-soft); color: var(--acc); font-size: 12px; font-weight: 700; }
.filter-popover-panel { position: absolute; z-index: 70; top: calc(100% + 8px); padding: 12px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-md); }
.category-panel { left: 0; width: min(360px, calc(100vw - 32px)); }
.category-panel input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line2);
  border-radius: 9px; background: var(--panel2); color: var(--text); outline: none; }
.category-options { display: grid; gap: 2px; max-height: 360px; overflow: auto; margin-top: 8px; }
.category-option { min-height: 40px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border: 0; border-radius: 8px; padding: 8px 10px; background: transparent;
  color: var(--soft); text-align: left; font-size: 13px; }
.category-option:hover, .category-option.active { background: var(--accent-soft); color: var(--acc); }
.category-option strong { color: inherit; font-variant-numeric: tabular-nums; }
.advanced-filter-panel { left: 0; width: min(680px, calc(100vw - 32px)); }
.filter-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 2px 2px 12px; border-bottom: 1px solid var(--line3); }
.filter-panel-head div { display: grid; gap: 2px; }
.filter-panel-head span, .signal-filters > span { color: var(--dim); font-size: 12px; }
.filter-panel-head button { border: 0; background: none; color: var(--acc); font-weight: 650; }
.advanced-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;
  padding-top: 12px; }
.advanced-filter-grid label { display: grid; gap: 6px; color: var(--soft); font-size: 12px; font-weight: 650; }
.advanced-filter-grid select { width: 100%; border-radius: 9px; padding: 8px 10px; }
.signal-filters { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line3); }
.signal-filters > div { display: flex; gap: 7px; flex-wrap: wrap; }
.quick-pill { min-height: 34px; background: var(--panel2); border-color: var(--line); color: var(--soft); }
.quick-pill.active { color: var(--acc); border-color: #B9C8FF; background: var(--accent-soft); }
.active-filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 16px; }
.active-filters button { min-height: 32px; border: 1px solid #C9D5FF; border-radius: 999px;
  background: var(--accent-soft); color: var(--acc); padding: 6px 10px; font-size: 12px; }
.count { margin-left: 0; color: var(--dim); letter-spacing: 0; text-transform: capitalize; }

/* Decision-first cards */
.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.card { background: var(--panel); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.card:hover { transform: translateY(-2px); border-color: #BCC8D8; box-shadow: var(--shadow-md); }
.card-imgwrap { padding: 10px 10px 0; }
.card-img { border-radius: 12px; background: #F2F4F7; }
.shortlist-btn { top: 18px; right: 18px; width: 36px; height: 36px; border-color: var(--line2);
  background: rgba(255,255,255,.94); color: var(--dim); box-shadow: var(--shadow-sm); }
.card-body { padding: 13px 15px 15px; gap: 9px; }
.card-decision { display: flex; align-items: center; gap: 7px; min-height: 30px; }
.decision-score { min-width: 34px; height: 30px; display: inline-grid; place-items: center;
  border-radius: 9px; font: 700 13px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.decision-score.tA, .tscore.tA { color: var(--green); background: #EAF7F1; }
.decision-score.tB, .tscore.tB { color: var(--acc); background: var(--accent-soft); }
.decision-score.tC, .tscore.tC { color: var(--dim); background: #F0F2F5; }
.decision-label { font-size: 12px; font-weight: 750; letter-spacing: .025em; }
.decision-label.vimport { color: var(--green); }
.decision-label.vtest_small { color: var(--acc); }
.decision-label.vwatch { color: var(--soft); }
.decision-label.vavoid { color: var(--red); }
.lifecycle-status { margin-left: auto; border-radius: 999px; padding: 4px 7px; background: #F0F2F5;
  color: var(--soft); font-size: 12px; font-weight: 650; text-transform: capitalize; }
.lifecycle-status.shortlisted { color: var(--amber); background: #FFF6E6; }
.lifecycle-status.imported { color: var(--green); background: #EAF7F1; }
.lifecycle-status.rejected { color: var(--red); background: #FFF0F0; }
.card-kw { margin: 1px 0 0; color: var(--dim); font-family: Inter, sans-serif;
  font-weight: 550; letter-spacing: 0; text-transform: none; }
.card-name { min-height: 2.9em; color: var(--text); font-size: 14px; line-height: 1.45; }
.card-commerce { margin-top: 2px; background: var(--line3); border-color: var(--line); }
.card-money { background: var(--panel2); padding: 10px 11px; }
.card-money-value { font-size: 13px; }
.card-money-meta { margin-top: 4px; }
.card-money-label { color: var(--dim); font-family: Inter, sans-serif; letter-spacing: 0; }
.card-money.muted .card-money-value { color: var(--dim); font: 600 12px Inter, sans-serif; letter-spacing: 0; }
.card-evidence { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--dim); font-size: 12px; min-height: 24px; }
.card-evidence strong { color: var(--green); white-space: nowrap; }

/* Six-column metrics table */
.tablebox { border-color: var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
.tablebox table { min-width: 820px; }
th { color: var(--dim); background: var(--panel2); font-family: Inter, sans-serif;
  letter-spacing: .02em; text-transform: none; }
td { border-color: var(--line3); }
.table-product { display: grid; grid-template-columns: 52px minmax(190px, 1fr); gap: 11px; align-items: center; }
.table-product img, .table-noimg { width: 52px; height: 52px; border-radius: 10px; object-fit: contain; background: #F2F4F7; }
.table-product > div { min-width: 0; display: grid; gap: 3px; }
.table-product strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-product span:not(.lifecycle-status) { color: var(--dim); font-size: 12px; }
.table-product .lifecycle-status { justify-self: start; margin-left: 0; }
.table-decision { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.table-decision strong { font-size: 12px; }
.table-sale-price { color: var(--text); font-weight: 650; white-space: nowrap; }
.cost-cell { min-width: 128px; }
.cost-cell-meta { justify-content: flex-start; }
.table-margin { display: block; color: var(--green); font-size: 12px; margin-top: 4px; }
.table-evidence { display: grid; gap: 3px; min-width: 92px; color: var(--dim); font-size: 12px; }
.table-evidence strong { color: var(--text); }
.shortlist-flat { width: 34px; height: 34px; border-color: var(--line2); background: var(--panel); }

/* Progressive product detail */
.back-btn { min-height: 38px; background: var(--panel); }
.detail-hero { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 34px;
  padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel);
  box-shadow: var(--shadow-sm); }
.detail-img { border-color: var(--line); background: #F2F4F7; }
.detail-summary { min-width: 0; }
.detail-eyebrow { color: var(--dim); font-size: 12px; font-weight: 650; margin-bottom: 7px; }
.detail-title { font-size: clamp(24px, 2.8vw, 34px); margin-bottom: 16px; }
.detail-decision-card { padding: 15px; border: 1px solid #D7E0FF; border-radius: 14px; background: #F7F9FF; }
.detail-decision-heading { display: flex; align-items: center; gap: 10px; }
.detail-decision-heading > div { display: grid; gap: 1px; }
.detail-decision-heading > div span { color: var(--dim); font-size: 12px; }
.detail-decision-heading > div strong { color: var(--text); font-size: 15px; }
.detail-decision-card > p { margin: 12px 0; color: var(--soft); font-size: 14px; line-height: 1.55; }
.detail-next-action { display: grid; gap: 3px; padding-top: 11px; border-top: 1px solid #E1E7FA; }
.detail-next-action span { color: var(--acc); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.detail-next-action strong { font-size: 13px; }
.detail-key-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.detail-key-metrics > div { min-width: 0; display: grid; gap: 4px; padding: 12px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--panel2); }
.detail-key-metrics span { color: var(--dim); font-size: 12px; }
.detail-key-metrics strong { color: var(--text); font: 700 14px Inter, sans-serif; }
.detail-key-metrics small { color: var(--dim); font-size: 12px; }
.detail-accordion { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); box-shadow: 0 1px 2px rgba(22,32,51,.035); overflow: clip; }
.detail-accordion > summary { list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 72px; padding: 14px 17px; cursor: pointer; }
.detail-accordion > summary::-webkit-details-marker { display: none; }
.detail-accordion > summary > div { display: grid; gap: 3px; }
.detail-accordion > summary strong { font: 700 15px Inter, sans-serif; }
.detail-accordion > summary div span { color: var(--dim); font-size: 13px; }
.accordion-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: none;
  border-radius: 9px; background: var(--accent-soft); color: var(--acc); font-size: 19px; transition: transform .16s ease; }
.detail-accordion[open] .accordion-icon { transform: rotate(45deg); }
.detail-accordion-content { padding: 0 16px 16px; border-top: 1px solid var(--line3); }
.detail-accordion-content > .section, .detail-accordion-content > .assessment-shell { margin-top: 16px; }
.source-provenance { padding: 16px 2px 2px; color: var(--soft); }
.source-provenance p { font-size: 13px; }
.source-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.source-links a { min-height: 36px; display: inline-flex; align-items: center; padding: 7px 10px;
  border: 1px solid #C9D5FF; border-radius: 9px; background: var(--accent-soft); font-size: 12px; font-weight: 650; }

/* Existing surfaces inherit the light system. */
.section, .stack > div, .qrow, .review, .adrow, .assessment-shell,
.import-decision-card, .evidence-summary-toggle, .evidence-details, .suitscore {
  background: var(--panel); border-color: var(--line);
}
.cost-mode-switch { background: var(--panel2); border-color: var(--line2); }
.act-btn, .decide { background: var(--panel); }
.pill.active { color: #ffffff; }

@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-toolbar { align-items: flex-start; flex-direction: column; }
  .advanced-filters { position: static; }
  .advanced-filter-panel { left: 0; right: auto; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-imgcol { max-width: 460px; width: 100%; }
}
@media (max-width: 680px) {
  .topbar { flex-wrap: wrap; }
  .brand-name { display: none; }
  .nav { order: 0; width: auto; flex: 1; gap: 0; overflow-x: auto; }
  .nav button, .nav-more > summary { padding-inline: 7px; font-size: 11.5px; }
  .top-right { width: 100%; order: 3; }
  #search { width: 100%; flex: 1; }
  .catalog-head { align-items: flex-start; }
  .catalog-view-controls { width: 100%; }
  .catalog-filter-controls { width: 100%; }
  .filter-popover, .catalog-filter-controls > select { flex: 1; }
  .filter-popover > summary, .catalog-filter-controls > select { width: 100%; }
  .filter-popover-panel { position: fixed; left: 12px; right: 12px; top: 126px; width: auto; max-height: calc(100vh - 150px); overflow: auto; }
  .advanced-filter-grid { grid-template-columns: 1fr; }
  .detail-hero { padding: 14px; }
  .detail-key-metrics { grid-template-columns: 1fr 1fr; }
  .detail-accordion > summary { min-height: 68px; }
  .detail-accordion > summary div span { font-size: 12px; }
  :is(.seg button, .filter-popover > summary, .catalog-filter-controls select,
    .catalog-upload-cta, .top-menu-panel button) { min-height: 44px; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .catalog-view-controls .seg { flex: 1; }
  .catalog-view-controls .seg button { flex: 1; }
  .detail-key-metrics { grid-template-columns: 1fr; }
  .card-name { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important;
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Research freshness stays visible independently of score and export date. */
.collection-health { margin: 0 0 20px; padding: 16px 18px; background: #fff; border: 1px solid #E2E6ED; border-left: 4px solid #B87516; border-radius: 12px; }
.collection-health.current { border-left-color: #21845B; }
.collection-health > div:first-child { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.collection-health span, .collection-health small { font-size: 12px; color: #616161; }
.collection-source-status { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 6px; }
.source-health.stale, .source-health.unknown { color: #946012; }
.source-health.fresh { color: #21845B; }
.focus-description { margin: 8px 0 0; max-width: 620px; color: #616161; font-size: 13px; line-height: 1.6; }
.evidence-freshness { display: inline-block; margin: 0 0 8px; font-size: 11px; color: #616161; }
.evidence-freshness.fresh { color: #21845B; }
.evidence-freshness.stale { color: #946012; }
.evidence-dates { margin: 0 0 18px; padding: 14px; background: #f1f1f1; border-radius: 10px; }
.evidence-dates h3 { margin: 0 0 8px; font-size: 14px; }
.evidence-dates p, .evidence-dates dl { font-size: 12px; color: #616161; }
.evidence-dates dl > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.evidence-dates dd { margin: 0; }