:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --line: #e8eaed;
  --line-strong: #d9dde3;
  --text: #22262b;
  --muted: #727982;
  --lime: #4f7df3;
  --orange: #f3a64a;
  --cyan: #55bfc0;
  --danger: #e46868;
  --radius: 16px;
  --shadow: 0 2px 8px rgba(24, 32, 44, 0.035), 0 12px 32px rgba(24, 32, 44, 0.035);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

button, input, select { font: inherit; }

.ambient {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(130px);
  opacity: .07;
  pointer-events: none;
}

.ambient-one { top: -360px; right: 4vw; background: #81a5ff; }
.ambient-two { bottom: -420px; left: -180px; background: #91dcdd; }

.shell {
  position: relative;
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto;
}

.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  gap: 0;
  align-items: center;
  color: var(--text);
  text-decoration: none;
}

.brand strong { display: block; font-size: 14px; letter-spacing: .14em; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; letter-spacing: .21em; }

.topbar-actions { display: flex; align-items: center; gap: 18px; }

.live-state {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .05em;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(243, 166, 74, .10);
}

.live-state.online .live-dot { background: #4daf76; box-shadow: 0 0 0 4px rgba(77,175,118,.10); }
.live-state.error .live-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(228,104,104,.10); }

.refresh-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}

.refresh-button:hover { border-color: #aebff0; background: #f7f9ff; }
.refresh-button:active { transform: translateY(1px); }
.refresh-button:disabled { opacity: .55; cursor: wait; }
.refresh-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.refresh-button.loading svg { animation: spin 1s linear infinite; }

.hero {
  min-height: 270px;
  padding: 54px 0 42px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
}

.eyebrow { margin: 0 0 20px; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { color: var(--lime); }

h1 { margin: 0; max-width: 850px; font-size: clamp(38px, 4.4vw, 62px); font-weight: 570; line-height: 1.02; letter-spacing: -.045em; }
h1 em { color: #747b84; font-style: normal; font-weight: 390; }

.hero-copy { max-width: 660px; margin: 22px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

.hero-meta {
  min-width: 220px;
  padding: 22px 0 4px 24px;
  border-left: 1px solid var(--line-strong);
}

.hero-meta span, .hero-meta small { display: block; color: var(--muted); font-size: 11px; }
.hero-meta strong { display: block; margin: 9px 0; font-size: 16px; font-weight: 520; }

.filter-panel {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr auto;
  gap: 12px;
  align-items: end;
  margin: 2px 0 30px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.filter-field label { display: block; margin: 0 0 7px 2px; color: var(--muted); font-size: 10px; }
.filter-field select {
  width: 100%;
  height: 42px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  background: #fff;
  outline: none;
  cursor: pointer;
}
.filter-field select:focus { border-color: #8eabf5; box-shadow: 0 0 0 3px rgba(79,125,243,.10); }
.multi-select { position: relative; }
.multi-select-trigger {
  display: flex;
  width: 100%;
  height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  background: #fff;
  cursor: pointer;
}
.multi-select.open .multi-select-trigger { border-color: #8eabf5; box-shadow: 0 0 0 3px rgba(79,125,243,.10); }
.multi-select.has-selection .multi-select-trigger { color: #315fc9; }
.multi-select-chevron { width: 8px; height: 8px; border-right: 1.5px solid #7d858f; border-bottom: 1.5px solid #7d858f; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.multi-select.open .multi-select-chevron { transform: translateY(2px) rotate(225deg); }
.multi-select-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: 0;
  width: min(390px, 88vw);
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(31, 41, 55, .15);
}
.multi-select-menu[hidden] { display: none; }
.multi-select-search { width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; outline: none; background: #f8f9fb; }
.multi-select-search:focus { border-color: #8eabf5; background: #fff; }
.multi-select-options { max-height: 280px; margin: 8px -3px; padding-right: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.filter-field .multi-select-option {
  display: grid;
  min-height: 42px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
}
.multi-select-option:hover { background: #f3f6fc; }
.multi-select-option:has(input:checked) { color: #315fc9; background: #edf3ff; }
.multi-select-option[hidden] { display: none; }
.multi-select-option input {
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid #aeb8c6;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, background-color .12s, box-shadow .12s;
}
.multi-select-option input::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 5px;
  width: 8px;
  height: 5px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  opacity: 0;
  transform: rotate(-45deg) scale(.7);
  transition: opacity .1s, transform .1s;
}
.multi-select-option input:checked { border-color: #4f7df3; background: #4f7df3; }
.multi-select-option input:checked::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.multi-select-option input:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(79,125,243,.18); }
.multi-select-option span { min-width: 0; overflow-wrap: anywhere; }
.multi-select-clear { width: 100%; height: 34px; border: 0; border-top: 1px solid var(--line); color: #6c7480; background: #fff; font-size: 11px; cursor: pointer; }
.multi-select-clear:hover { color: #315fc9; }
.reset-button { height: 42px; padding: 0 16px; border: 0; border-radius: 10px; color: #5d6671; background: #f1f3f6; cursor: pointer; }
.reset-button:hover { color: var(--text); background: #e9edf3; }

.summary-section { margin-top: 2px; }
.section-heading { margin: 0 0 18px; }
.section-heading span { display: block; margin-bottom: 8px; color: var(--lime); font: 9px/1 ui-monospace, monospace; letter-spacing: .14em; }
.section-heading h2 { margin: 0; font-size: 23px; font-weight: 570; letter-spacing: -.025em; }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.kpi-card { position: relative; min-height: 150px; padding: 26px 22px; border-right: 1px solid var(--line); }
.kpi-card:last-child { border-right: 0; }
.kpi-card p { margin: 0 0 17px; color: var(--muted); font-size: 12px; }
.kpi-card strong { display: block; font-size: clamp(25px, 2.5vw, 36px); font-weight: 540; letter-spacing: -.04em; }
.kpi-card strong.kpi-text { max-width: 78%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(20px, 2.3vw, 32px); }
.kpi-card strong.positive { color: #31945d; }
.kpi-card strong.negative { color: #d85d5d; }
.kpi-card small { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; }
.kpi-index { position: absolute; top: 26px; right: 28px; color: #c9ced5; font-family: ui-monospace, monospace; font-size: 11px; }

.chart-stack { margin-top: 28px; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }

.chart-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.chart-header { display: flex; justify-content: space-between; align-items: start; gap: 24px; }
.chart-number { display: block; margin-bottom: 11px; color: var(--lime); font: 10px/1 ui-monospace, monospace; letter-spacing: .14em; }
.chart-header h2 { margin: 0; font-size: 21px; font-weight: 540; letter-spacing: -.02em; }
.chart-header p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

.legend { display: flex; align-items: center; gap: 20px; padding-top: 8px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.legend.compact { gap: 12px; }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend-line { width: 18px; height: 2px; }
.legend-block { width: 8px; height: 8px; border-radius: 2px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.lime { background: var(--lime); }
.orange { background: var(--orange); }
.cyan { background: var(--cyan); }

.chart-shell { position: relative; min-height: 360px; margin-top: 26px; }
.channel-shell, .region-shell { min-height: 390px; }
.chart-shell svg { display: block; width: 100%; height: auto; overflow: visible; }

.grid-line { stroke: #eceef1; stroke-width: 1; }
.axis-label { fill: #9299a2; font-size: 10px; font-family: ui-monospace, monospace; }
.price-path { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(79,125,243,.16)); }
.price-area { fill: url(#priceGradient); opacity: .42; }
.growth-bar.positive { fill: rgba(243,166,74,.62); }
.growth-bar.negative { fill: rgba(228,104,104,.40); }
.point { fill: #fff; stroke: var(--lime); stroke-width: 2; cursor: crosshair; }
.point:hover { fill: var(--lime); }
.channel-track { fill: #f0f2f5; }
.channel-bar { fill: var(--lime); opacity: .84; }
.channel-name { fill: #4d535b; font-size: 11px; }
.channel-value { fill: var(--lime); font: 10px ui-monospace, monospace; }
.region-bar { fill: var(--lime); opacity: .84; }
.region-label { fill: #858c95; font-size: 9px; }
.region-value { fill: #4d535b; font: 9px ui-monospace, monospace; }

.report-section { margin-top: 72px; }
.report-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 20px; }
.report-heading h2 { margin: 0; font-size: clamp(25px, 2.7vw, 38px); font-weight: 520; letter-spacing: -.035em; }
.report-heading p { margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.period-switch { display: inline-flex; padding: 4px; border-radius: 12px; background: #edf1f7; }
.period-switch button { height: 38px; padding: 0 17px; border: 0; border-radius: 9px; color: #69717b; background: transparent; cursor: pointer; white-space: nowrap; }
.period-switch button.active { color: #fff; background: #7f9aca; box-shadow: 0 2px 8px rgba(65,91,140,.15); }
.report-grid { display: grid; gap: 20px; }
.future-report-grid { grid-template-columns: minmax(0, 1.35fr) minmax(480px, .9fr); }
.booking-report-grid { grid-template-columns: minmax(0, 1fr) 210px; }
.compact-card { padding: 22px; }
.mini-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.mini-heading h3 { margin: 0; font-size: 14px; font-weight: 560; }
.mini-heading span { color: var(--muted); font-size: 10px; }
.report-chart { min-height: 330px; margin-top: 12px; }
.report-line { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.previous-layer { opacity: .30; }
.previous-layer .report-line { stroke-width: 1.6; }
.current-layer { opacity: 1; }
.report-dot { stroke-width: 2; cursor: crosshair; }
.report-dot.series-muted, .report-dot.series-teal-muted, .report-dot.series-red-muted { display: none; }
.series-blue { stroke: #8765a5; }
.series-muted { stroke: #adb3ba; }
.series-teal { stroke: #22aaa6; }
.series-teal-muted { stroke: #8ad6d3; }
.series-red { stroke: #ef7075; }
.series-red-muted { stroke: #f5b4b7; }
.report-dot { fill: #fff; }

.table-card { min-width: 0; }
.data-table-wrap { max-width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 11px; white-space: nowrap; }
.data-table th { position: sticky; top: 0; z-index: 1; padding: 10px 9px; border-bottom: 1px solid var(--line-strong); color: var(--muted); background: #fff; font-weight: 500; text-align: right; }
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table td { padding: 9px; border-bottom: 1px solid #eef0f2; text-align: right; }
.data-table tbody tr:nth-child(even) { background: #fafbfc; }
.data-table td.positive { color: #31945d; }
.data-table td.negative { color: #d85d5d; }
.future-report-grid .data-table-wrap { max-height: 390px; }
.metric-rail { display: grid; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.metric-rail div { display: grid; place-content: center; min-height: 98px; padding: 12px; border-bottom: 1px solid var(--line); text-align: center; }
.metric-rail div:last-child { border-bottom: 0; }
.metric-rail strong { font-size: 25px; font-weight: 520; letter-spacing: -.03em; }
.metric-rail strong.positive { color: #31945d; }
.metric-rail strong.negative { color: #d85d5d; }
.metric-rail span { margin-top: 6px; color: var(--muted); font-size: 10px; }
.regional-table-card { padding: 12px 18px; }
.regional-data-table { min-width: 1120px; font-size: 12px; }
.regional-data-table th, .regional-data-table td { padding: 12px 10px; }
.period-badge { padding: 12px 18px; border-radius: 10px; color: #fff; background: #8da6ce; font-size: 11px; white-space: nowrap; }
.origin-report-grid { grid-template-columns: minmax(0, 1.45fr) minmax(390px, .75fr); }
.origin-shell { min-height: 390px; margin-top: 20px; }
.device-shell { min-height: 390px; margin-top: 10px; }
.source-report-grid { grid-template-columns: minmax(0, 1.65fr) minmax(390px, .75fr); align-items: stretch; }
.source-side-grid { display: grid; gap: 20px; }
.source-timeseries-card { height: 100%; }
.source-timeseries-shell { min-height: 680px; margin-top: 14px; }
.source-donut-shell { min-height: 260px; margin-top: 8px; }
.source-ranking-shell { min-height: 390px; margin-top: 10px; }
.source-inline-legend { display: inline-flex; align-items: center; gap: 7px; }
.source-inline-legend i { width: 8px; height: 8px; border-radius: 50%; }
.source-inline-legend i.module { background: #4f7df3; }
.source-inline-legend i.ota { margin-left: 8px; background: #35a873; }
.source-line { fill: none; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.source-area { stroke: none; }
.source-module-area { fill: url(#moduleArea); }
.source-ota-area { fill: url(#otaArea); }
.source-module-line { stroke: #4f7df3; }
.source-ota-line { stroke: #35a873; }
.source-dot { fill: #fff; stroke-width: 2.2; }
.source-module-dot { stroke: #4f7df3; }
.source-ota-dot { stroke: #35a873; }
.source-donut-track { fill: none; stroke: #f0f2f5; stroke-width: 36; }
.source-donut-segment { fill: none; stroke-width: 36; cursor: crosshair; }
.source-module-segment { stroke: #4f7df3; }
.source-ota-segment { stroke: #35a873; }
.source-module-legend { fill: #4f7df3; }
.source-ota-legend { fill: #35a873; }
.source-legend-text { fill: #68707a; font-size: 10px; }
.source-rank-label { fill: #4f5660; font-size: 12px; }
.source-rank-bar { fill: #4f7df3; opacity: .84; }
.source-rank-value { fill: #596574; font: 11px ui-monospace, monospace; }
.origin-name { fill: #59616b; font-size: 11px; }
.origin-track { fill: #f2f0f3; }
.origin-bar { fill: var(--lime); opacity: .84; }
.origin-value { fill: var(--lime); font: 11px ui-monospace, monospace; }
.device-track { fill: none; stroke: #f0f1f3; stroke-width: 50; }
.device-segment { fill: none; stroke-width: 50; stroke-linecap: butt; cursor: crosshair; }
.device-segment.device-segment-1 { stroke: #4daf76; }
.device-segment.device-segment-2 { stroke: var(--lime); }
.device-segment.device-segment-3 { stroke: #7fa9d8; }
.device-legend-dot.device-segment-1 { fill: #4daf76; }
.device-legend-dot.device-segment-2 { fill: var(--lime); }
.device-legend-dot.device-segment-3 { fill: #7fa9d8; }
.device-legend { fill: #555d67; font-size: 12px; }
.device-legend-dot { stroke: none; }

.skeleton { height: 100%; min-height: inherit; border-radius: 14px; background: linear-gradient(105deg, #f2f3f5 20%, #fafbfc 35%, #f2f3f5 50%); background-size: 200% 100%; animation: shimmer 1.6s infinite linear; }
.empty-state { height: 300px; display: grid; place-items: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--line); border-radius: 14px; }

.tooltip {
  position: fixed;
  z-index: 20;
  max-width: 260px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: #fff;
  background: rgba(34, 38, 43, .96);
  box-shadow: 0 18px 48px rgba(24,32,44,.18);
  font-size: 11px;
  line-height: 1.65;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s, transform .12s;
}
.tooltip.visible { opacity: 1; transform: translateY(0); }
.tooltip strong { color: #a9c0ff; font-weight: 600; }

footer { height: 100px; display: flex; align-items: center; justify-content: space-between; color: #596a63; font: 9px ui-monospace, monospace; letter-spacing: .08em; }

@keyframes shimmer { to { background-position-x: -200%; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .shell { width: min(100% - 36px, 900px); }
  .hero { min-height: auto; align-items: start; padding: 60px 0 44px; flex-direction: column; }
  .hero-meta { min-width: 0; }
  .chart-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reset-button { width: 100%; }
  .report-heading { align-items: start; flex-direction: column; }
  .future-report-grid, .booking-report-grid { grid-template-columns: 1fr; }
  .origin-report-grid { grid-template-columns: 1fr; }
  .source-report-grid { grid-template-columns: 1fr; }
  .metric-rail { grid-template-columns: repeat(5, 1fr); }
  .metric-rail div { min-height: 110px; border-right: 1px solid var(--line); border-bottom: 0; }
  .kpi-card { min-height: 130px; border-right: 0; border-bottom: 1px solid var(--line); }
  .kpi-card:nth-child(odd) { border-right: 1px solid var(--line); }
  .kpi-card:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 24px, 600px); }
  .topbar { height: 76px; }
  .live-state { display: none; }
  .refresh-button { width: 42px; padding: 0; justify-content: center; font-size: 0; }
  .hero { padding-top: 46px; }
  h1 { font-size: 42px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .filter-panel { grid-template-columns: 1fr; }
  .period-switch { width: 100%; overflow-x: auto; }
  .period-switch button { flex: 1; padding: 0 12px; }
  .metric-rail { grid-template-columns: repeat(2, 1fr); }
  .metric-rail div { border-bottom: 1px solid var(--line); }
  .kpi-card:nth-child(odd) { border-right: 0; }
  .kpi-card:last-child { grid-column: auto; }
  .chart-card { padding: 22px 16px; }
  .chart-header { flex-direction: column; }
  .legend { flex-wrap: wrap; padding: 0; }
  .chart-shell { min-height: 280px; overflow-x: auto; }
  .channel-shell, .region-shell { min-height: 340px; }
  footer { height: 84px; flex-direction: column; justify-content: center; align-items: start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}