:root {
  --ink: #172033;
  --muted: #6e7890;
  --canvas: #f4f7fa;
  --surface: #ffffff;
  --line: #dce3ec;
  --green: #07845b;
  --green-soft: #e7f6ef;
  --blue: #2877ba;
  --blue-soft: #e9f2fb;
  --orange: #cc6a16;
  --red: #c84848;
  --radius: 8px;
  --shadow: 0 8px 26px rgba(25, 43, 67, 0.07);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.topbar { min-height: 64px; display: grid; grid-template-columns: 1fr auto minmax(190px, auto) auto; gap: 24px; align-items: center; padding: 0 30px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; z-index: 10; top: 0; }
.brand { font-weight: 760; font-size: 18px; }
.brand span, .login-mark span { color: var(--green); }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a { color: var(--muted); padding: 9px 12px; border-radius: 6px; font-size: 14px; }
.topbar nav a:hover, .topbar nav a.is-active { background: var(--green-soft); color: var(--green); font-weight: 650; }
.snapshot { text-align: right; color: var(--muted); font-size: 12px; line-height: 1.5; }
.snapshot b { color: var(--ink); }
.snapshot small { display: block; }
.icon-button { border: 1px solid var(--line); border-radius: 6px; width: 34px; height: 34px; background: var(--surface); color: var(--muted); font-size: 19px; }
.icon-button:hover { color: var(--red); border-color: var(--red); }
.dashboard, .products-page { max-width: 1440px; margin: 0 auto; padding: 30px; }
.advertising-page { max-width: 1600px; margin: 0 auto; padding: 30px; }
.guide-page { max-width: 1120px; margin: 0 auto; padding: 30px; }
.guide-heading { max-width: 700px; margin-bottom: 24px; }
.guide-heading > p:last-child { margin: 10px 0 0; color: var(--muted); line-height: 1.55; }
.guide-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 16px; }
.guide-tabs button { flex: 0 0 130px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 13px; }
.guide-tabs button:hover, .guide-tabs button.is-active { border-color: var(--green); background: var(--green-soft); color: var(--green); font-weight: 700; }
.guide-panel { padding-top: 24px; border-top: 1px solid var(--line); }
.guide-panel-heading { max-width: 720px; margin-bottom: 22px; }
.guide-panel-heading h2 { margin: 7px 0 9px; font-size: 20px; }
.guide-panel-heading > p:last-child { margin: 0; color: var(--muted); line-height: 1.55; }
.guide-section-number { margin: 0; color: var(--green); font-size: 11px; font-weight: 750; letter-spacing: 0; }
.guide-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.guide-panel-grid section { padding: 16px 0; border-top: 1px solid var(--line); }
.guide-panel-grid h3 { margin: 0 0 7px; font-size: 13px; }
.guide-panel-grid p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 13px; }
.guide-panel-grid b { color: var(--ink); }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.eyebrow { margin: 0 0 5px; color: var(--green); font-size: 11px; font-weight: 750; }
h1 { font-size: 28px; line-height: 1.15; margin: 0; font-weight: 760; }
h2 { font-size: 16px; line-height: 1.25; margin: 0; font-weight: 720; }
.period-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.period-controls button, .secondary-button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 6px; min-height: 34px; padding: 0 11px; font-size: 13px; }
.period-controls button:hover, .period-controls button.is-active, .secondary-button:hover { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.period-controls input { border: 1px solid var(--line); min-height: 34px; border-radius: 6px; padding: 0 8px; color: var(--ink); background: var(--surface); }
.custom-period { display: flex; align-items: center; gap: 5px; }
.custom-period[hidden] { display: none; }
.custom-period label { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.custom-period input { width: 142px; }
.apply-period { border: 1px solid var(--green) !important; color: var(--green) !important; background: var(--green-soft) !important; font-weight: 700; }
.period-status { flex-basis: 100%; color: var(--muted); font-size: 12px; min-height: 17px; padding-top: 2px; }
.period-status.is-error { color: var(--red); }
.filter-row, .table-tools { display: flex; gap: 12px; align-items: center; min-height: 42px; margin-bottom: 20px; }
.advertising-controls { position: relative; display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.advertising-periods { display: flex; gap: 4px; }
.advertising-periods button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 6px; min-height: 34px; padding: 0 10px; font-size: 13px; }
.advertising-periods button.is-active { border-color: var(--green); color: var(--green); background: var(--green-soft); font-weight: 700; }
.advertising-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.advertising-controls input, .advertising-controls select { min-width: 106px; }
.advertising-controls .advertising-inactive { display: inline-flex; align-items: center; min-height: 34px; gap: 6px; color: var(--ink); font-size: 12px; }
.advertising-controls .advertising-inactive input { min-width: auto; accent-color: var(--green); }
.advertising-controls .sort-status { align-self: center; margin-left: 0; }
.advertising-controls .metric-menu { right: 0; top: 34px; margin-top: 8px; }
.advertising-controls select:disabled { background: #f1f3f6; color: var(--muted); }
.comparison-legend { align-self: end; display: grid; grid-template-columns: auto auto; gap: 5px 14px; padding: 2px 0 3px 14px; border-left: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.comparison-legend-title { grid-column: 1 / -1; font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.comparison-legend > span:not(.comparison-legend-title) { display: grid; grid-template-columns: 18px auto; column-gap: 5px; align-items: center; font-size: 11px; }
.comparison-legend i { grid-row: span 2; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 750; }
.comparison-legend b { color: var(--ink); font-size: 11px; }
.comparison-legend small { grid-column: 2; font-size: 10px; }
.comparison-legend-week { background: #e8e0f4; color: #3f2b60; }
.comparison-legend-yesterday { background: #d8eaf8; color: #144266; }
.source-state { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 9px 13px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 12px; }
.source-state small { color: var(--muted); margin-left: auto; }
.source-badge { padding: 3px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.source-badge.is-fresh { background: var(--green-soft); color: var(--green); }
.source-badge.is-stale { background: #fff1df; color: var(--orange); }
.source-badge.is-missing { background: #f1f3f6; color: var(--muted); }
.advertising-table-card { min-height: 0; }
#advertising-table td.is-stale { color: var(--orange); font-weight: 700; }
#advertising-table td span { font-size: 10px; font-weight: 700; }
.comparison-value.is-yesterday { background: #d8eaf8; color: #144266; }
.comparison-value.is-week { background: #e8e0f4; color: #3f2b60; }
.comparison-delta { font-weight: 700; }
.comparison-delta.is-positive { background: #ddf2e2; color: #117233; }
.comparison-delta.is-negative { background: #f9dfdd; color: #b71e19; }
.comparison-delta.is-neutral { background: #eef2f6; color: #606b78; }
.filter-row label, .table-tools label { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
select, input[type="search"] { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; min-height: 34px; color: var(--ink); padding: 0 9px; outline: none; }
select:focus, input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(7,132,91,.12); }
.text-action { margin-left: auto; color: var(--green); font-size: 13px; font-weight: 680; }
.text-action:hover { text-decoration: underline; }
.table-link { color: var(--green); font-weight: 700; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.table-link:hover { text-decoration-color: currentColor; }
.table-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }
.campaign-back-link { display: inline-block; margin: -8px 0 12px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi, .chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.kpi { min-height: 102px; padding: 16px; }
.kpi p { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.kpi strong { display: block; font-size: 23px; line-height: 1; font-weight: 760; }
.kpi small { margin-top: 7px; display: block; color: var(--green); font-size: 11px; }
.charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chart { min-height: 300px; overflow: hidden; }
.chart-wide { grid-column: span 2; }
.chart header { padding: 17px 18px 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.chart header p { margin: 0; color: var(--muted); font-size: 12px; text-align: right; }
.chart-body { min-height: 228px; padding: 8px 18px 18px; position: relative; }
.line-graphic { display: block; width: 100%; height: 210px; overflow: visible; }
.line-grid { stroke: #eaf0f5; stroke-width: 1; }
.line-views { fill: none; stroke: var(--blue); stroke-width: 3; }
.line-orders { fill: none; stroke: var(--green); stroke-width: 3; stroke-dasharray: 7 5; }
.axis-label { fill: var(--muted); font-size: 10px; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.axis-left { text-anchor: end; }
.axis-right { text-anchor: start; }
.axis-date { text-anchor: middle; }
.point-marker.point-views { fill: var(--blue); }
.point-marker.point-orders { fill: var(--green); }
.point-label { font-size: 10px; font-weight: 720; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.point-label.point-views { fill: var(--blue); }
.point-label.point-orders { fill: var(--green); }
.chart-interaction { fill: transparent; cursor: crosshair; }
.chart-cursor { stroke: #8996a8; stroke-width: 1; stroke-dasharray: 3 3; }
.hover-point { stroke: var(--surface); stroke-width: 2px; }
.chart-tooltip { position: absolute; top: 8px; transform: translateX(-50%); z-index: 2; min-width: 162px; padding: 10px 12px; color: #fff; background: #293443; border-radius: 6px; box-shadow: 0 10px 20px rgba(23, 32, 51, .2); pointer-events: none; font-size: 11px; }
.chart-tooltip strong { display: block; margin-bottom: 7px; font-size: 12px; }
.chart-tooltip span { display: flex; justify-content: space-between; gap: 18px; color: #dbe5ed; line-height: 1.65; }
.chart-tooltip b { color: #fff; }
.chart-scrubber { display: block; width: 100%; height: 16px; margin: 1px 0 4px; accent-color: var(--green); cursor: ew-resize; }
.chart-legend { display: flex; gap: 14px; color: var(--muted); font-size: 11px; padding: 0 2px; }
.chart-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; background: var(--blue); }
.chart-legend i.green { background: var(--green); }
.funnel-row { margin: 12px 0; }
.funnel-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; color: var(--muted); }
.funnel-label strong { color: var(--ink); }
.funnel-bar { height: 22px; border-radius: 4px; background: var(--blue-soft); overflow: hidden; }
.funnel-bar b { display: block; min-width: 3px; height: 100%; background: var(--blue); border-radius: 4px; transition: width 220ms ease; }
.stock-row, .leader-row { display: grid; grid-template-columns: minmax(0, 1fr) 55px 74px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef2f6; font-size: 12px; }
.stock-row:last-child, .leader-row:last-child { border-bottom: 0; }
.stock-row span:first-child, .leader-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-row em { font-style: normal; color: var(--orange); text-align: right; }
.stock-row b, .leader-row b { text-align: right; }
.group-bars { display: grid; gap: 12px; padding-top: 5px; }
.group-bar-head { display: flex; justify-content: space-between; font-size: 12px; gap: 10px; }
.group-bar-head span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.group-bar-track { height: 18px; background: var(--green-soft); border-radius: 4px; overflow: hidden; margin-top: 5px; }
.group-bar-track b { background: var(--green); display: block; min-width: 2px; height: 100%; border-radius: 4px; transition: width 220ms ease; }
.leaders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.leaders-grid h3 { font-size: 12px; color: var(--muted); margin: 3px 0 7px; font-weight: 700; }
.table-tools { position: sticky; top: 64px; z-index: 5; padding: 12px 0; background: var(--canvas); }
.sort-status { margin-left: auto; color: var(--muted); font-size: 12px; }
.search { position: relative; }
.search span { position: absolute; left: 10px; color: var(--muted); font-size: 18px; }
.search input { padding-left: 30px; width: 230px; }
.table-scroll { overflow: auto; max-height: calc(100vh - 190px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface); }
table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12px; }
th { position: sticky; top: 0; z-index: 2; background: #f8fafc; color: var(--muted); text-align: right; font-weight: 700; padding: 11px 10px; border-bottom: 1px solid var(--line); max-width: 126px; white-space: normal; }
th:first-child { left: 0; z-index: 3; min-width: 180px; text-align: left; }
th[data-sort] { cursor: pointer; }
th[data-sort]::after { content: "↕"; display: inline-block; margin-left: 5px; color: #9aa8b8; font-size: 13px; }
th[data-sort].is-sorted-asc::after { content: "↑"; color: var(--green); }
th[data-sort].is-sorted-desc::after { content: "↓"; color: var(--green); }
th[data-sort]:hover { color: var(--green); }
td { padding: 10px; border-bottom: 1px solid #eef2f6; text-align: right; vertical-align: top; min-width: 86px; white-space: pre-line; }
#products-table th[data-sort="clusters"], #products-table td[data-metric="clusters"] { width: 220px; min-width: 220px; max-width: 220px; text-align: left; }
.cluster-value { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.metric-cell { display: grid; gap: 2px; min-height: 43px; align-content: center; }
.metric-value { color: var(--ink); font-weight: 650; line-height: 1.25; }
.metric-delta { min-height: 12px; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.1; }
.metric-delta .is-positive { color: var(--green); }
.metric-delta .is-negative { color: var(--red); }
.metric-delta .is-neutral { color: var(--muted); }
td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 620; min-width: 180px; }
tr.group_total td { background: var(--green-soft); font-weight: 740; border-bottom-color: #cce9da; }
tr.group_total td:first-child { background: var(--green-soft); }
tr.total td { background: var(--ink); color: #fff; font-weight: 760; }
tr.total td:first-child { background: var(--ink); }
tr.total .metric-value { color: #fff; }
tr.total .metric-delta .is-neutral { color: #c8d2db; }
tr.total .metric-delta .is-positive { color: #88e4b9; }
tr.total .metric-delta .is-negative { color: #ffaaa4; }
tr.separator td { height: 10px; padding: 0; border: 0; background: var(--canvas); }
.metric-menu { position: absolute; margin-top: 42px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); z-index: 8; min-width: 260px; max-height: 340px; overflow: auto; }
.metric-menu label { display: flex; gap: 8px; padding: 5px 0; font-size: 12px; color: var(--ink); }
.login-page { min-height: 100vh; display: grid; place-items: center; background: #edf3f2; }
.login-panel { width: min(392px, calc(100vw - 36px)); padding: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(22,38,57,.12); }
.login-mark { color: var(--ink); font-size: 27px; font-weight: 800; margin-bottom: 20px; }
.login-panel h1 { font-size: 24px; }
.login-panel > p { color: var(--muted); margin: 6px 0 26px; }
.login-panel label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.login-panel input { width: 100%; height: 42px; }
.primary-button { margin-top: 15px; width: 100%; min-height: 42px; background: var(--green); color: white; border: 1px solid var(--green); border-radius: 6px; font-weight: 700; }
.primary-button:hover { background: #056b4a; }
.login-panel small { color: var(--muted); display: block; text-align: center; margin-top: 18px; font-size: 11px; }
.form-error { color: var(--red) !important; font-size: 12px; margin: 9px 0 -6px !important; }
.empty-state { max-width: 660px; margin: 11vh auto; padding: 36px; }
.empty-state h1 { font-size: 28px; }
.empty-state > p:last-child { color: var(--muted); margin-top: 12px; line-height: 1.6; }
.is-loading .chart-body, .is-loading #products-table tbody { opacity: .44; pointer-events: none; }
.is-loading .chart-body::after { content: ""; position: absolute; inset: 14px; border-radius: 5px; background: linear-gradient(90deg, #eef3f6 25%, #f8fbfc 45%, #eef3f6 65%); background-size: 200% 100%; animation: shimmer 900ms infinite linear; }
.page-enter { animation: enter 200ms ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 900px) { .topbar { grid-template-columns: 1fr auto auto; gap: 10px; padding: 0 16px; } .topbar nav { grid-column: 1 / -1; grid-row: 2; padding-bottom: 8px; } .snapshot { display: none; } .dashboard, .products-page, .guide-page { padding: 20px 14px; } .guide-panel-grid { grid-template-columns: 1fr; } .page-heading { display: block; } .period-controls { margin-top: 14px; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .charts-grid { grid-template-columns: 1fr; } .chart-wide { grid-column: span 1; } .chart { min-height: 280px; } .leaders-grid { grid-template-columns: 1fr; gap: 8px; } .table-tools { top: 100px; flex-wrap: wrap; } .sort-status { width: 100%; margin-left: 0; } }
@media (max-width: 700px) { .guide-tabs button { flex: 1 1 130px; } }
@media (max-width: 620px) { .custom-period { flex-basis: 100%; flex-wrap: wrap; } .custom-period input { width: 132px; } }
@media (max-width: 520px) { .kpis { grid-template-columns: 1fr 1fr; } .kpi { padding: 13px; } .kpi strong { font-size: 19px; } .search input { width: 180px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }