/* SENBO V3: presentation only. Data, copy, ordering and interactions are retained. */
:root {
  --ui-ink: #1b3d34;
  --ui-muted: #536e63;
  --ui-line: #d8e5dd;
  --ui-surface: #ffffff;
  --ui-tint: #edf5f0;
  --ui-accent: #196b57;
  --accent: var(--ui-accent);
  --line: var(--ui-line);
  --muted: var(--ui-muted);
  --bg: #f3f7f4;
  color: var(--ui-ink);
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color-scheme: light;
  accent-color: var(--ui-accent);
}
body { background: var(--bg); }
::selection { background: #cbe6d8; color: #153c2e; }
button, input, select, textarea { font-family: inherit; }
input, textarea { caret-color: var(--ui-accent); }
input::placeholder, textarea::placeholder { color: #65796f; opacity: 1; }
button, input, select, textarea { border-color: #cbdcd1; border-radius: 6px; }
button { color: #285442; font-weight: 500; }
button:hover { background: #edf5f0; border-color: #8db8a2; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
svg [tabindex]:focus-visible { outline: 2px solid #287d60; outline-offset: 3px; }
a { color: #196b57; text-underline-offset: 3px; }
main { margin-left: 204px; padding: 20px 24px 28px; }
.rail { width: 204px; padding: 24px 14px 18px; background: #163e32; color: #d3e5da; }
.logo { gap: 10px; font-size: 20px; letter-spacing: .1px; }
.logo > .brand-mark { position: relative; flex: 0 0 50px; width: 50px; height: 50px; overflow: hidden; border: 0; border-radius: 10px; padding: 0; background: #fff; }
.logo > .brand-mark img { position: absolute; width: 80px; height: 80px; max-width: none; left: -15px; top: -14px; }
.logo small { color: #c0dacb; font-size: 9px; letter-spacing: 1.25px; line-height: 1.6; }
.rail-label { color: #c0d9ca; font-size: 11px; margin: 29px 10px 10px; }
.rail nav button { color: #d1e5d8; padding: 10px 11px; margin: 3px 0; line-height: 1.45; border-radius: 6px; }
.rail nav button:hover { background: #224e3e; }
.rail nav button.active { color: #fff; background: #2a5947; border-left: 1px solid #93d5ae; }
.rail nav small { display: block; color: #c1ddcd; font-size: 10px; margin: 3px 0 0 22px; opacity: 1; }
.rail-bottom { padding-top: 15px; gap: 3px; }
.rail-bottom button { color: #d1e5d8; padding: 8px 10px; font-size: 12px; }
.rail-bottom button:hover { background: #28523f; }
.rail-bottom span { background: #35624d; color: #ecf7ef; }
.top { margin-bottom: 14px; align-items: center; }
.eyebrow { color: #587369; font-size: 10px; letter-spacing: 1.2px; margin-bottom: 4px; }
h1 { color: #193d2e; font-size: 23px; line-height: 1.35; letter-spacing: -.3px; }
h2 { color: #244b3a; }
.actions button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.filter-panel { padding: 11px 13px; border-color: var(--ui-line); border-radius: 8px; }
.filter-panel > .filter-line { display: grid; grid-template-columns: 110px 144px 144px 144px minmax(150px,1fr) minmax(140px,1fr) 60px; gap: 8px; }
.filter-line label { color: #4f6b5f; font-size: 11px; font-weight: 500; gap: 4px; min-width: 0; }
.filter-line input, .filter-line select { padding: 6px 8px; min-height: 32px; font-size: 12px; }
.filter-panel > .filter-line input, .filter-panel > .filter-line select { width: 100%; min-width: 0; max-width: none; }
.filter-panel #bi-month { max-width: none; }
.filter-line #reset { height: 32px; color: #365e49; padding: 5px 8px; }
#advanced > summary { color: #466c58; font-size: 11px; padding-top: 9px; }
#advanced[open] > .filter-line { padding: 9px 0 4px; border-top: 1px solid #e4ece7; }
.chips { gap: 5px; margin-top: 7px; }
.chip { background: #eaf3ed; color: #265d40; border: 1px solid #dfebe3; padding: 3px 7px; font-size: 11px; }
.context { gap: 10px; margin: 9px 0 12px; color: #5b7266; font-size: 11px; line-height: 1.5; }
#busy { color: #5c7667; font-variant-numeric: tabular-nums; white-space: nowrap; }
#grain { min-height: 30px; padding: 4px 8px; font-size: 11px; }
.bi-toolbar { margin: 4px 0 10px; gap: 8px; }
.bi-toolbar small { font-size: 11px; color: #5b7668; margin-top: 3px; }
.bi-toolbar > button { font-size: 12px; min-height: 32px; padding: 6px 10px; }
.bi-toolbar .primary { background: var(--ui-accent); border-color: var(--ui-accent); color: white; }
.bi-toolbar .primary:hover { background: #145741; }
.bi-info { position: relative; }
.bi-info summary { color: #326146; font-size: 11px; white-space: nowrap; }
.bi-info > p { position: absolute; top: 100%; right: 0; z-index: 20; width: min(540px,72vw); margin: 7px 0; padding: 13px; border: 1px solid #ccddd1; border-radius: 8px; background: white; color: #3c5f49; line-height: 1.7; }
.bi-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.bi-kpi { background: var(--ui-surface); border-color: var(--ui-line); border-radius: 8px; padding: 10px 12px; min-height: 110px; }
.bi-kpi > span { color: #4c6d59; font-size: 11px; line-height: 1.4; min-height: 28px; }
.bi-kpi strong { color: #173e2a; font-size: 23px; font-weight: 650; letter-spacing: -.25px; line-height: 1.35; white-space: nowrap; margin: 3px 0 7px; font-variant-numeric: tabular-nums; }
.bi-kpi small { color: #566f60; font-size: 11px; line-height: 1.45; }
.bi-shop-notice { margin: 9px 0; padding: 8px 10px; background: #edf4e9; color: #4c664a; font-size: 11px; line-height: 1.6; border-radius: 6px; }
.bi-four-rows { gap: 12px; }
.bi-layout-row { gap: 12px; }
.bi-card { border-color: var(--ui-line); border-radius: 8px; padding: 14px; background: white; }
.bi-layout-row .bi-card h2 { min-height: 36px; font-size: 14px; line-height: 1.5; margin-bottom: 6px; color: #224d36; font-weight: 650; }
.bi-i { color: #547866; border-color: #bdd5c4; }
.bi-sub, .bi-hint, .bi-note { color: #567360; font-size: 11px; line-height: 1.6; }
.bi-inline, .bi-legend { gap: 6px; color: #526f5b; font-size: 11px; }
.bi-inline button, .bi-legend > button { font-size: 11px; padding: 4px 7px; min-height: 26px; border-radius: 5px; }
.bi-inline button.selected, .bi-tog button.selected { color: #1e6140; background: #e1f0e5; border-color: #98c3a5; }
.bi-svg { overflow: visible; }
.bi-svg text { fill: #4e6c58; }
.bi-row1 > .bi-card:first-child .bi-svg text { font-size: 21px; }
.bi-row1 > .bi-card:nth-child(2) .bi-svg text { font-size: 17px; }
.bi-row1 > .bi-card:nth-child(3) .bi-svg text { font-size: 23px; }
.bi-row4 > .bi-card:first-child .bi-svg text { font-size: 16px; }
.bi-track, .bi-track > i { height: 6px; border-radius: 3px; }
.bi-track { background: #e9f0ea; }
.bi-track > i { background: var(--ui-accent); }
.bi-bars .bi-click { padding: 3px 4px; gap: 1px 8px; font-size: 12px; line-height: 1.35; }
.bi-bars .bi-click > span { color: #2d593d; }
.bi-bars .bi-click strong { color: #224c32; font-weight: 600; font-variant-numeric: tabular-nums; }
.bi-bars .bi-click small { color: #57715f; font-size: 10px; }
.bi-bars details > summary { margin: 6px 0 0; padding: 6px 0; }
.bi-click:hover { background: #f0f6ef !important; }
.bi-click.is-active { background: #dfecdf !important; color: #174524; }
.bi-row3 .bi-bars .bi-click { grid-template-columns: minmax(66px,1fr) 1.5fr 85px; }
.bi-mx { gap: 3px; }
.bi-mx > button, .bi-mx > span, .bi-mx > b { font-size: 11px; }
.bi-mx > button { border-radius: 4px; }
.bi-tot { color: #285239; font-size: 11px; }
.bi-tot small { color: #5b7562; font-size: 10px; }
.bi-strip { font-size: 11px; gap: 5px 13px; color: #46694d; line-height: 1.6; }
.bi-strip b { color: #204d2b; font-size: 14px; }
.bi-explanation { color: #506e55; }
.bi-card details summary, .bi-shop-months summary { color: #426d4b; font-size: 11px; line-height: 1.5; }
.bi-hl > button { color: #2a5535; font-size: 11px; padding: 7px 4px; }
.bi-hl .bi-hh { color: #58745d; font-size: 10px; }
.bi-drill-head { font-size: 11px; line-height: 1.5; }
.bi-drill-head > span, .bi-drill-item > small { color: #58755c; }
.bi-drill-head > button, .bi-drill-pages button { min-height: 28px; padding: 5px 7px; font-size: 11px; }
.bi-drill-item { padding: 9px 1px; font-size: 12px; border-color: #e1ebe1; }
.bi-drill-item > button { color: #216339; }
.research-summary { padding: 10px 13px; border-color: var(--ui-line); color: #4f6b54; border-radius: 7px; }
.research-summary b { color: #234d2d; }
.table-note { color: #665d3c; font-size: 11px; line-height: 1.6; }
.panel { border-color: var(--ui-line); border-radius: 8px; padding: 16px; }
.panel:has(.master-table) { padding: 13px; }
.panel:has(.master-table) h2 { color: #254e2d; font-size: 14px; margin: 0 0 10px; }
.table-tools { gap: 7px; margin-bottom: 11px; }
.table-tools button, .table-tools input, .table-tools select { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.table-wrap { border-color: #dce7dc; border-radius: 6px; }
table { font-variant-numeric: tabular-nums; }
th { color: #476b4d; background: #edf4ec; }
td { color: #2c4931; border-bottom-color: #e5ede3; }
.master-table .column-groups th { font-size: 11px; color: #3a6242; font-weight: 600; letter-spacing: .2px; }
.master-table .column-groups .group-identity { background: #edf4ed; }
.master-table .column-groups .group-attributes { background: #e4f0e5; }
.master-table .column-groups .group-sales { background: #d9eadd; }
.master-table .column-groups .group-supply { background: #e9f2e8; }
.master-table .column-groups .group-advertising { background: #e2ede3; }
.master-table .column-groups .group-judgment { background: #d6e7d8; }
.master-table th { background: #f3f7f1; font-size: 11px; color: #466749; }
.master-table th.sticky-image, .master-table th.sticky-identity, .master-table th.sticky-judgment { background: #f0f6ee; }
.master-table td { padding: 8px 10px; font-size: 12px; line-height: 1.45; }
.master-table tbody tr:nth-child(even) td { background: #fcfefb; }
.master-table tbody tr:hover td { background: #eef6eb; }
.master-table .selected-row td { background: #e4f0e0; }
.master-table .thumb { width: 38px; height: 34px; border-radius: 4px; }
.asin-link { color: #1d6631; }
.master-table .sub { color: #58745a; font-size: 10px; }
.column-resizer:focus-visible { outline: 2px solid #237643; outline-offset: -3px; }
.master-table .sticky-judgment { min-width: 0; }
.research-tag { font-size: 11px; padding: 4px 8px; border-radius: 5px; }
.research-tag.good { background: #dfefdf; color: #286033; }
.research-tag.warn { background: #f5ecd7; color: #7c5619; }
.research-tag.bad { background: #f4e3de; color: #963d31; }
.research-tag.muted { background: #edf1e9; color: #526c51; }
.pager { color: #567055; gap: 9px; font-size: 11px; }
.pager button { min-height: 30px; font-size: 11px; padding: 5px 9px; }
dialog { border-color: #cadcca; border-radius: 10px; color: var(--ui-ink); }
dialog::backdrop { background: #183e3166; }
dialog header { padding: 14px 20px; border-color: var(--ui-line); }
#drawer-body, #modal-body { padding: 18px; }
.d360 { color: var(--ui-ink); }
#drawer:has(.d360) { background: #f3f7f4; }
.d360 { --d360-line: #d8e5dd; --d360-muted: #536e63; --d360-green: #196b57; }
.d360-idline > b { color: #234d38; }
.d360-heading p, .d360-anchor-nav a { color: #536e63; }
.d360-kpi-strip span, .d360-kpi-strip small { font-size: 11px; }
.d360-kpi-strip strong { color: #204c36; }
.d360-section { padding: 14px; border-radius: 8px; }
.d360 .metric, .metric { border-color: var(--ui-line); }
.metric strong { color: #204c2c; }
.rule-item, .compare-cell { background: #f7faf5; border-color: var(--ui-line); }
.hint, .coverage, .price-info, .empty { color: #56725a; }
footer { color: #647d64; font-size: 11px; line-height: 1.6; }
.research-report-frame, .po-success-frame { border: 1px solid #d9e6d9; border-radius: 8px; background: #f3f7f2; height: calc(100vh - 116px); }
@media (min-width: 1800px) {
  main { padding: 22px 30px 32px; }
  .bi-kpis { grid-template-columns: repeat(8,minmax(0,1fr)); }
  .bi-kpi strong { font-size: 22px; }
  .bi-row1 > .bi-card:first-child .bi-svg text { font-size: 18px; }
  .bi-row1 > .bi-card:nth-child(3) .bi-svg text { font-size: 20px; }
}
@media (max-width: 1199px) {
  main { padding: 18px; }
  .filter-panel > .filter-line { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .bi-toolbar { flex-wrap: wrap; }
  .bi-toolbar > div { min-width: 200px; }
  .bi-kpi strong { font-size: 21px; }
}
@media (max-width: 900px) {
  .bi-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .bi-kpi { padding: 9px; }
  .bi-kpi strong { font-size: 19px; }
  .bi-kpi small { font-size: 10px; }
  .bi-row1 > .bi-card:first-child .bi-svg text { font-size: 18px; }
}
@media (max-width: 750px) {
  .rail { width: 100%; padding: 14px 16px 10px; }

  .rail nav { gap: 3px; margin-top: 9px; }
  .rail nav button { padding: 7px 9px; font-size: 12px; }
  .rail nav small { display: block; margin: 3px 0 0 22px; font-size: 9px; }
  main { margin-left: 0; padding: 14px; }
  .top { display: flex; flex-wrap: wrap; gap: 8px; }
  h1 { font-size: 22px; }
  .actions { margin: 0; gap: 6px; }
  .filter-panel > .filter-line { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filter-line label { min-width: 0; }
  .bi-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bi-kpi strong { font-size: 22px; }
  .bi-kpi small { font-size: 11px; }
  .bi-card { padding: 13px; }
  .bi-info > p { position: fixed; top: 18vh; right: 5vw; width: 90vw; }
  .bi-row1 > .bi-card:first-child .bi-svg text { font-size: 23px; }
  .bi-row1 > .bi-card:nth-child(3) .bi-svg text { font-size: 20px; }
  #drawer-body, #modal-body { padding: 12px; }
  .research-report-frame, .po-success-frame { min-height: 680px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}