:root {
  color-scheme: light;
  --ink: #1d2638;
  --muted: #778197;
  --line: #e5e8ef;
  --soft: #f6f7fb;
  --blue: #315efb;
  --blue-soft: #edf2ff;
  --green: #188b68;
  --orange: #d66b2b;
  --red: #c74a55;
  --shadow: 0 18px 55px rgba(34, 48, 79, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--soft); color: var(--ink); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 76px; border-bottom: 1px solid rgba(218,224,236,.95); background: rgba(255,255,255,.94); padding: 0 40px; box-shadow: 0 5px 22px rgba(34,48,79,.045); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: linear-gradient(145deg,#315efb,#6b73ff); color: #fff; font-weight: 700; box-shadow: 0 8px 22px rgba(49,94,251,.25); }
.brand strong, .brand small { display: block; }.brand strong { font-size: 14px; }.brand small { margin-top: 3px; color: #939cad; font-size: 9px; }
nav { display: flex; justify-self: center; gap: 5px; border: 1px solid #e3e7ef; border-radius: 13px; background: #f7f8fb; padding: 5px; }
nav a { display: flex; align-items: center; gap: 7px; min-width: 112px; justify-content: center; border: 1px solid transparent; border-radius: 9px; color: #657187; padding: 10px 15px; font-size: 12px; text-decoration: none; transition: background .15s ease,color .15s ease,box-shadow .15s ease; }
nav a span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; background: #e9edf4; color: #7a8598; font-size: 12px; line-height: 1; }
nav a strong { font-weight: 650; white-space: nowrap; }
nav a:hover { color: #36445d; background: #fff; }
nav a.active { border-color: #d8e1ff; background: #fff; color: var(--blue); box-shadow: 0 5px 14px rgba(49,94,251,.12); }
nav a.active span { background: var(--blue); color: #fff; }
.local-status { display: flex; align-items: center; gap: 7px; color: #738096; font-size: 10px; }.local-status i { width: 7px; height: 7px; border-radius: 50%; background: #24b681; box-shadow: 0 0 0 4px #e7f8f2; }

main { width: min(1440px, calc(100% - 64px)); margin: 0 auto; }
.overview { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; padding: 58px 0 34px; }
.eyebrow { color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.overview h1 { max-width: 720px; margin: 12px 0; font-size: clamp(32px,4vw,52px); line-height: 1.12; letter-spacing: -.04em; }
.overview p { max-width: 720px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.archive-summary { display: grid; grid-template-columns: repeat(3,auto); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.archive-summary div { min-width: 150px; border-right: 1px solid var(--line); padding: 20px; }.archive-summary div:last-child { border: 0; }.archive-summary span,.archive-summary strong { display: block; }.archive-summary span { color: var(--muted); font-size: 10px; }.archive-summary strong { margin-top: 8px; font-size: 18px; white-space: nowrap; }

.search-panel, .results, .quality { border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.search-panel { padding: 28px; }
.panel-title, .result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.panel-title h2, .result-heading h2, .quality h2 { margin: 8px 0 5px; font-size: 23px; }.panel-title p { margin: 0; color: var(--muted); font-size: 11px; }
.verified-badge { border-radius: 999px; background: #eaf8f3; color: var(--green); padding: 7px 11px; font-size: 9px; }
form { display: grid; grid-template-columns: minmax(300px,1.8fr) 155px 155px 140px auto; align-items: end; gap: 12px; margin-top: 24px; }
label span { display: block; margin: 0 0 7px 2px; color: #68748a; font-size: 10px; }
input, select { width: 100%; height: 44px; border: 1px solid #dfe4ed; border-radius: 9px; outline: 0; background: #fff; color: var(--ink); padding: 0 12px; font-size: 11px; }
input:focus, select:focus { border-color: #8aa5ff; box-shadow: 0 0 0 3px var(--blue-soft); }
.search-button { height: 44px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; padding: 0 20px; font-size: 11px; font-weight: 650; box-shadow: 0 9px 20px rgba(49,94,251,.22); }.search-button:disabled { cursor: wait; opacity: .65; }
.quick-ranges { display: flex; gap: 8px; margin-top: 13px; }.quick-ranges button { border: 1px solid #e0e5ee; border-radius: 999px; background: #fff; color: #6f7b90; padding: 6px 10px; font-size: 9px; }.quick-ranges button:hover { border-color: #a9bbf5; color: var(--blue); }
.form-error { margin: 13px 0 0; border-radius: 8px; background: #fff1f2; color: var(--red); padding: 10px 12px; font-size: 10px; }

.results { margin: 20px 0; padding: 28px; }.result-heading { align-items: end; }.result-heading > span { color: var(--muted); font-size: 10px; }
.metrics { display: grid; grid-template-columns: repeat(5,1fr); margin: 23px 0 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.metrics article { border-right: 1px solid var(--line); padding: 16px; }.metrics article:last-child { border: 0; }.metrics span,.metrics strong,.metrics small { display: block; }.metrics span,.metrics small { color: var(--muted); font-size: 9px; }.metrics strong { margin: 8px 0 5px; font-size: 25px; }.metrics article:nth-child(3) strong { color: var(--green); }.metrics article:nth-child(4) strong { color: var(--blue); }.metrics article:nth-child(5) strong { color: var(--orange); }
.quality-note { margin-bottom: 13px; border: 1px solid #f2dfb8; border-radius: 9px; background: #fff8e8; color: #97621e; padding: 10px 12px; font-size: 10px; }
.relationship { position: relative; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.relationship-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.relationship-heading h3 { margin: 0 0 6px; font-size: 15px; }.relationship-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; color: #758095; font-size: 9px; }.chart-legend span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }.chart-legend i { width: 8px; height: 8px; border-radius: 50%; }.legend-low { background: #25a77c; }.legend-medium { background: #5674e8; }.legend-high { background: #d66b2b; }
.chart-summary { margin: 15px 0 4px; color: #6f7a8e; font-size: 9px; }.scatter-chart { position: relative; min-height: 330px; }.scatter-chart svg { display: block; width: 100%; height: auto; overflow: visible; }.chart-grid { stroke: #e9ecf2; stroke-width: 1; }.chart-axis { stroke: #aeb6c4; stroke-width: 1; }.chart-tick,.chart-axis-title { fill: #6f7a8e; font-family: inherit; font-size: 10px; }.chart-axis-title { font-weight: 600; }.chart-point { cursor: pointer; stroke: #fff; stroke-width: 1.5; opacity: .78; transition: opacity .15s ease, stroke-width .15s ease; }.chart-point:hover,.chart-point:focus { opacity: 1; outline: none; stroke: #263149; stroke-width: 2.5; }.point-low { fill: #25a77c; }.point-medium { fill: #5674e8; }.point-high { fill: #d66b2b; }.chart-empty { display: grid; min-height: 300px; place-items: center; color: var(--muted); font-size: 11px; }
.chart-tooltip { position: absolute; z-index: 5; width: 250px; transform: translateX(-50%); border: 1px solid #dfe4ed; border-radius: 10px; background: #fff; padding: 12px; box-shadow: 0 12px 34px rgba(34,48,79,.17); pointer-events: none; }.chart-tooltip[hidden] { display: none; }.chart-tooltip strong,.chart-tooltip > span { display: block; }.chart-tooltip strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.chart-tooltip > span { margin-top: 5px; color: var(--muted); font-size: 8px; }.chart-tooltip dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 11px 0 0; font-size: 9px; }.chart-tooltip dt { color: var(--muted); }.chart-tooltip dd { margin: 0; font-weight: 600; text-align: right; }
.product-card-section { margin: 26px 0 18px; }.product-card-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }.product-card-heading h3 { margin: 0 0 5px; font-size: 16px; }.product-card-heading p,.product-card-heading > span { margin: 0; color: var(--muted); font-size: 10px; }.product-card-list { display: grid; gap: 16px; }
.product-detail-card { position: relative; overflow: hidden; border: 1px solid #dfe4ed; border-radius: 14px; background: linear-gradient(180deg,#fff,#fbfcff); box-shadow: 0 8px 24px rgba(34,48,79,.055); transition: border-color .15s ease,box-shadow .15s ease,transform .15s ease; }.product-detail-card:hover,.product-detail-card:focus { outline: 0; border-color: #aebef4; box-shadow: 0 15px 34px rgba(49,94,251,.11); transform: translateY(-1px); }.card-sequence { position: absolute; top: 0; left: 0; border-radius: 13px 0 10px 0; background: #edf2ff; color: var(--blue); padding: 5px 10px; font-size: 9px; font-weight: 650; }.card-product-head { display: grid; grid-template-columns: 88px minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 29px 20px 17px; }.card-product-image,.card-product-image img,.card-image-placeholder { width: 88px; height: 88px; border-radius: 11px; }.card-product-image img { display: block; object-fit: cover; }.card-image-placeholder { display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-size: 24px; }.card-product-copy { min-width: 0; }.card-product-copy h3 { margin: 9px 0 6px; font-size: 16px; line-height: 1.45; }.card-product-copy p { margin: 0 0 8px; color: #69758a; font-size: 11px; }.card-badges { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 9px; }.card-id { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 9px; }.card-id code { overflow: hidden; color: #515d72; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; text-overflow: ellipsis; white-space: nowrap; }.detail-button { align-self: start; border: 1px solid #cdd8ff; border-radius: 8px; background: #f4f7ff; color: var(--blue); padding: 9px 12px; font-size: 10px; font-weight: 650; }.detail-button:hover { background: var(--blue); color: #fff; }.card-kpis { display: grid; grid-template-columns: repeat(9,minmax(100px,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }.card-kpis > div { min-height: 80px; border-right: 1px solid var(--line); padding: 14px 12px; }.card-kpis > div:last-child { border: 0; }.card-kpis span,.card-kpis strong,.card-kpis small { display: block; }.card-kpis span { color: var(--muted); font-size: 9px; }.card-kpis strong { margin-top: 9px; font-size: 15px; white-space: nowrap; }.card-kpis small { margin-top: 4px; color: #98a1b0; font-size: 8px; }.card-kpis .primary strong { color: var(--green); }.card-kpis .commission strong { color: var(--blue); }.card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; padding: 11px 20px; color: #778297; font-size: 9px; }.card-foot span { display: flex; gap: 7px; }.card-foot b { color: #4f5b70; font-weight: 600; }.card-foot em { margin-left: auto; color: #8f99aa; font-style: normal; }
.table-shell { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 10px; } th { background: #f8f9fc; color: #7e889b; font-weight: 600; text-align: left; } th,td { border-bottom: 1px solid #eceff4; padding: 12px; } tbody tr:last-child td { border: 0; } tbody tr { cursor: pointer; } tbody tr:hover,tbody tr:focus { outline: 0; background: #f8faff; }
.numeric { text-align: right; white-space: nowrap; }.numeric strong,.numeric small { display: block; }.numeric small { margin-top: 4px; color: #9aa3b2; font-weight: 400; }
.product-cell { display: flex; align-items: center; gap: 11px; min-width: 300px; max-width: 520px; }.product-cell img,.image-placeholder { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }.image-placeholder { display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }.product-cell span:last-child { min-width: 0; }.product-cell strong,.product-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.product-cell strong { font-size: 11px; }.product-cell small { margin-top: 5px; color: #8d97a9; }
.platform { border-radius: 5px; background: #f0f3f8; color: #637087; padding: 5px 7px; white-space: nowrap; }.date-range { color: #6f7a8e; line-height: 1.7; white-space: nowrap; }.refund { color: #6c778b; }.refund.high { color: var(--red); font-weight: 650; }
.empty-state { padding: 50px; text-align: center; }.empty-state strong,.empty-state span { display: block; }.empty-state span { margin-top: 8px; color: var(--muted); font-size: 11px; }

.quality { margin-bottom: 60px; padding: 28px; }.quality-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-top: 20px; }.quality-grid article { border: 1px solid var(--line); border-radius: 11px; background: #fbfcfe; padding: 18px; }.quality-grid strong { font-size: 12px; }.quality-grid p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }

.detail-open { overflow: hidden; }.drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(24,33,52,.36); backdrop-filter: blur(4px); }.drawer-backdrop[hidden],.product-drawer[hidden] { display: none; }
.product-drawer { position: fixed; top: 2.5vh; right: 2vw; bottom: 2.5vh; z-index: 50; width: min(1180px,96vw); overflow-y: auto; border: 1px solid var(--line); border-radius: 18px; background: #f8f9fc; padding: 30px; box-shadow: 0 28px 90px rgba(18,29,54,.28); }.drawer-close { position: sticky; z-index: 3; top: 0; float: right; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #758096; font-size: 21px; box-shadow: 0 6px 16px rgba(34,48,79,.1); }.detail-identity { display: grid; grid-template-columns: 108px minmax(0,1fr); align-items: center; gap: 20px; clear: both; margin: 12px 45px 22px 0; }.detail-identity #drawer-image,.detail-identity img,.detail-identity .card-image-placeholder { width: 108px; height: 108px; border-radius: 13px; }.detail-identity img { display: block; object-fit: cover; }.product-drawer h2 { margin: 0 0 9px; font-size: 24px; line-height: 1.4; }.detail-identity p { margin: 5px 0; color: var(--muted); font-size: 11px; }.detail-id { overflow-wrap: anywhere; }.drawer-meta { display: grid; grid-template-columns: repeat(6,1fr); margin: 0 0 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.drawer-meta article { min-height: 94px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 15px; }.drawer-meta article:nth-child(6n) { border-right: 0; }.drawer-meta article:nth-last-child(-n+6) { border-bottom: 0; }.drawer-meta small,.drawer-meta strong,.drawer-meta em { display: block; }.drawer-meta small { color: var(--muted); font-size: 9px; }.drawer-meta strong { margin-top: 10px; font-size: 17px; }.drawer-meta em { margin-top: 5px; color: #919aaa; font-size: 8px; font-style: normal; }.drawer-meta .primary strong { color: var(--green); }.drawer-meta .commission strong { color: var(--blue); }.drawer-meta .date-value { font-size: 11px; line-height: 1.55; }.detail-section { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 18px; }.detail-section-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.detail-section-title h3 { margin: 0; font-size: 14px; }.detail-section-title span { color: var(--muted); font-size: 9px; }.detail-chart { min-height: 280px; overflow-x: auto; }.detail-chart svg { display: block; min-width: 680px; width: 100%; height: auto; }.detail-loading { display: grid; min-height: 280px; place-items: center; color: var(--muted); font-size: 11px; }.detail-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }.detail-line-orders { stroke: #315efb; }.detail-line-commission { stroke: #f28a2e; opacity: .85; }.detail-dot-orders { fill: #315efb; stroke: #fff; stroke-width: 1.5; }.detail-table-shell { margin-top: 15px; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }.detail-table { min-width: 900px; }.detail-table tbody tr { cursor: default; }.identifier-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }.identifier-list code { border-radius: 6px; background: #f0f3f8; color: #4f5c72; padding: 7px 9px; font-size: 9px; overflow-wrap: anywhere; }.identifier-list span { align-self: center; color: var(--muted); font-size: 9px; }.drawer-empty { color: var(--muted); padding: 30px 0; text-align: center; }

@media (max-width: 1120px) { form { grid-template-columns: 1fr 1fr 1fr; }.keyword-field { grid-column: 1 / -1; }.search-button { width: 100%; }.overview { grid-template-columns: 1fr; }.archive-summary { justify-self: stretch; }.archive-summary div { min-width: 0; }.quality-grid { grid-template-columns: 1fr 1fr; }.card-kpis { grid-template-columns: repeat(3,1fr); }.card-kpis > div:nth-child(3n) { border-right: 0; }.drawer-meta { grid-template-columns: repeat(3,1fr); }.drawer-meta article:nth-child(3n) { border-right: 0; }.drawer-meta article:nth-last-child(-n+6) { border-bottom: 1px solid var(--line); }.drawer-meta article:nth-last-child(-n+3) { border-bottom: 0; } }
@media (max-width: 760px) { .topbar { grid-template-columns: 1fr auto; padding: 0 18px; }.topbar nav { display: none; }.local-status { font-size: 0; }.overview { padding-top: 38px; }.overview h1 { font-size: 35px; } main { width: calc(100% - 28px); }.archive-summary { grid-template-columns: 1fr; }.archive-summary div { border-right: 0; border-bottom: 1px solid var(--line); }.search-panel,.results,.quality { padding: 19px; }.panel-title { align-items: flex-start; flex-direction: column; }.verified-badge { align-self: flex-start; } form { grid-template-columns: 1fr; }.keyword-field { grid-column: auto; }.metrics { grid-template-columns: 1fr 1fr; }.metrics article { border-bottom: 1px solid var(--line); }.metrics article:last-child { grid-column: 1 / -1; }.relationship { padding: 14px; }.relationship-heading { flex-direction: column; }.chart-legend { justify-content: flex-start; }.quality-grid { grid-template-columns: 1fr; }.card-product-head { grid-template-columns: 68px minmax(0,1fr); padding: 30px 15px 16px; }.card-product-image,.card-product-image img,.card-product-image .card-image-placeholder { width: 68px; height: 68px; }.detail-button { grid-column: 1 / -1; width: 100%; }.card-kpis { grid-template-columns: repeat(2,1fr); }.card-kpis > div:nth-child(3n) { border-right: 1px solid var(--line); }.card-kpis > div:nth-child(2n) { border-right: 0; }.card-foot em { width: 100%; margin-left: 0; }.product-drawer { top: 0; right: 0; bottom: 0; width: 100vw; border: 0; border-radius: 0; padding: 20px 14px; }.detail-identity { grid-template-columns: 76px minmax(0,1fr); gap: 13px; margin-right: 32px; }.detail-identity #drawer-image,.detail-identity img,.detail-identity .card-image-placeholder { width: 76px; height: 76px; }.product-drawer h2 { font-size: 18px; }.drawer-meta { grid-template-columns: repeat(2,1fr); }.drawer-meta article:nth-child(3n) { border-right: 1px solid var(--line); }.drawer-meta article:nth-child(2n) { border-right: 0; }.drawer-meta article:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }.drawer-meta article:nth-last-child(-n+2) { border-bottom: 0; }.detail-section { padding: 13px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

.product-id-link { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; color: var(--blue); text-decoration: none; }
.product-id-link code { overflow: hidden; color: inherit; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; text-overflow: ellipsis; white-space: nowrap; }
.product-id-link:hover { text-decoration: underline; }
.detail-id { display: flex; align-items: center; gap: 4px; min-width: 0; }
.detail-id > span { white-space: nowrap; }
.identifier-list .identifier-link { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e0e5ee; border-radius: 7px; background: #f7f9fc; color: #4f5c72; padding: 7px 9px; text-decoration: none; }
.identifier-list .identifier-link code { border: 0; background: transparent; color: inherit; padding: 0; font-size: 9px; }
.identifier-list .identifier-link span { color: var(--blue); }
.identifier-list .identifier-link:hover { border-color: #9eb3ff; background: var(--blue-soft); color: var(--blue); }