@import "tailwindcss";

:root { --ink:#08302c; --deep:#0b4f4a; --teal:#0e6b60; --mint:#7fd1c1; --pale:#e3f2ee; --amber:#d98c1f; --red:#b03a2e; --grey:#5a6b68; --line:#dde7e4; --bg:#f2f6f5; --card:#fff; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { background:var(--bg); color:var(--ink); font-family:var(--font-sans), sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
button { color:inherit; }
.topbar { background:var(--deep); color:#fff; padding:22px 24px 20px; }
.topbarInner { max-width:1360px; margin:0 auto; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.eyebrow { margin:0; color:var(--mint); font:500 11px/1.5 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:4px 0 0; font:700 27px/1.2 var(--font-display); letter-spacing:0; }
.freshness { color:#8fbdb4; text-align:right; font:400 11.5px/1.7 var(--font-mono); }
.freshness strong { color:var(--mint); font-weight:500; }
.headerActions { display:flex; align-items:center; gap:18px; }
.logoutButton { padding:8px 12px; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.5); cursor:pointer; font:500 12px/1 var(--font-sans); }
.logoutButton:hover { color:var(--deep); background:#fff; }
.loginPage { display:grid; place-items:center; min-height:100dvh; padding:24px; background:linear-gradient(145deg,var(--deep) 0 42%,var(--bg) 42% 100%); }
.loginCard { width:min(440px,100%); padding:38px; background:var(--card); border:1px solid var(--line); box-shadow:0 22px 60px rgba(8,48,44,.2); }
.loginCard .eyebrow { color:var(--teal); }
.loginCard h1 { margin-top:8px; color:var(--deep); font-size:28px; }
.loginIntro { margin:10px 0 26px; color:var(--grey); }
.loginForm { display:grid; gap:18px; }
.loginForm label { color:var(--deep); font:600 12px/1.4 var(--font-sans); }
.loginForm input { display:block; width:100%; height:44px; margin-top:6px; padding:0 12px; color:var(--ink); background:#fff; border:1px solid var(--line); font:400 14px/1 var(--font-sans); }
.loginForm input:focus { outline:2px solid rgba(14,107,96,.2); border-color:var(--teal); }
.loginForm button { height:44px; color:#fff; background:var(--deep); border:1px solid var(--deep); cursor:pointer; font:600 14px/1 var(--font-sans); }
.loginForm button:hover { background:var(--teal); border-color:var(--teal); }
.loginForm button:disabled { cursor:wait; opacity:.7; }
.loginError { margin:-4px 0 0; padding:9px 11px; color:var(--red); background:#f7e9e7; border-left:3px solid var(--red); font-size:12px; }
.dashboard { max-width:1360px; margin:0 auto; padding:0 24px 64px; }
.dashboardModes { display:flex; gap:6px; padding:18px 0; }
.dashboardModes button { min-width:150px; height:40px; padding:0 20px; color:var(--grey); background:var(--card); border:1px solid var(--line); cursor:pointer; font:600 13px/1 var(--font-sans); }
.dashboardModes button:hover { color:var(--deep); border-color:var(--teal); }
.dashboardModes button.active { color:#fff; background:var(--deep); border-color:var(--deep); }
.globalOverview { padding:6px 0 0; }
.overviewHeader { margin:0 0 16px; }
.overviewHeader p { margin:0 0 3px; color:var(--teal); font:500 10px/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.overviewHeader h2 { margin:0; color:var(--deep); font:700 24px/1.25 var(--font-display); }
.overviewFilters { display:flex; gap:10px; margin:-54px 0 18px; justify-content:flex-end; }
.overviewFilters label { display:block; }.overviewFilters label span { display:block; margin-bottom:4px; color:var(--grey); font:500 9px/1.2 var(--font-mono); letter-spacing:.07em; text-transform:uppercase; }
.overviewFilters select { width:190px; height:36px; padding:0 34px 0 10px; color:var(--deep); background:var(--card); border:1px solid var(--line); cursor:pointer; font:600 12px/1 var(--font-sans); }
.overviewFilters select:focus { outline:2px solid rgba(14,107,96,.2); border-color:var(--teal); }
.overviewGrid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }
.overviewCard { position:relative; isolation:isolate; overflow:hidden; grid-column:span 3; min-height:178px; display:flex; flex-direction:column; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:9px; box-shadow:0 4px 16px rgba(8,48,44,.035); }
.overviewCard::before { position:absolute; z-index:-1; right:0; bottom:0; left:0; height:var(--trend-fill,0%); content:""; opacity:.18; transform-origin:bottom; animation:overviewCardFill .75s cubic-bezier(.22,1,.36,1) both; transition:height .55s ease,background-color .3s ease; }
.overviewCard.trendPositive::before { background:linear-gradient(180deg,rgba(25,174,113,.2),rgba(25,174,113,.75)); }
.overviewCard.trendNegative::before { background:linear-gradient(180deg,rgba(244,155,48,.2),rgba(244,155,48,.8)); }
.overviewCard.trendPositive { border-color:rgba(25,174,113,.34); }
.overviewCard.trendNegative { border-color:rgba(244,155,48,.42); }
@keyframes overviewCardFill { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce) { .overviewCard::before { animation:none; transition:none; } }
.overviewLabel { display:flex; align-items:center; gap:10px; min-height:38px; }
.overviewLabel h2 { margin:0; color:var(--ink); font:600 11.5px/1.35 var(--font-sans); }
.overviewIcon { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; font:700 18px/1 var(--font-mono); }
.overviewIcon.blue { color:#2578db; background:#e9f3ff; }.overviewIcon.teal { color:#0a9a85; background:#e5f7f2; }.overviewIcon.purple { color:#834bd6; background:#f1eafd; }.overviewIcon.orange { color:#df8a19; background:#fff2df; }.overviewIcon.red { color:#d84b56; background:#fdebed; }
.overviewCard > strong { display:block; margin:auto 0 11px; color:#102b4e; text-align:center; font:700 23px/1.25 var(--font-mono); font-variant-numeric:tabular-nums; }
.overviewCard > p { margin:0; color:#85919f; text-align:center; font:500 10px/1.4 var(--font-sans); }
.overviewTrend b,.overviewTrend small { display:block; }.overviewTrend b { font:700 12px/1.4 var(--font-mono); }.overviewTrend small { margin-top:2px; color:#85919f; font-size:9px; text-transform:none; }.overviewTrend.positive b { color:#0a9a72; }.overviewTrend.negative b { color:#dc4f59; }
.overviewTrend.unavailable b { color:#9aa6a3; }
.overviewLegend { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:14px; padding:12px 18px; color:var(--grey); background:var(--card); border:1px solid var(--line); font-size:10.5px; }
.overviewCharts { margin-top:14px; }
.overviewConversionCharts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }.overviewConversionCharts .chartCard { grid-column:auto; }
.eventDistribution { height:100%; display:flex; flex-direction:column; gap:10px; }
.eventSelector { position:relative; z-index:4; display:flex; align-items:flex-start; gap:10px; min-height:32px; }
.eventSelector details { position:relative; flex:0 0 230px; }
.eventSelector summary { height:32px; display:flex; align-items:center; justify-content:space-between; padding:0 10px; color:var(--deep); background:#fff; border:1px solid var(--line); cursor:pointer; font:600 11px/1 var(--font-sans); list-style:none; }
.eventSelector summary::-webkit-details-marker { display:none; }.eventSelector summary::after { content:"⌄"; color:var(--teal); font-size:15px; }
.eventSelectorMenu { position:absolute; top:36px; left:0; width:min(360px,calc(100vw - 48px)); padding:8px; background:#fff; border:1px solid var(--line); box-shadow:0 12px 30px rgba(8,48,44,.14); }
.eventSelectorActions { display:flex; gap:6px; padding-bottom:7px; border-bottom:1px solid var(--line); }.eventSelectorActions button { padding:5px 9px; color:var(--deep); background:var(--pale); border:0; cursor:pointer; font:600 10px/1 var(--font-sans); }
.eventOptions { max-height:230px; overflow:auto; }.eventOptions label { display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:7px; padding:7px 4px; cursor:pointer; border-bottom:1px solid #eef3f2; }.eventOptions input { accent-color:var(--deep); }.eventOptions span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.eventOptions small { color:var(--grey); font:500 9px/1 var(--font-mono); }
.eventSelectionChips { display:flex; flex-wrap:wrap; gap:5px; }.eventSelectionChips button { display:flex; align-items:center; gap:5px; padding:6px 8px; color:var(--deep); background:#fff; border:1px solid var(--line); border-left:3px solid var(--event-color); cursor:pointer; font:500 10px/1 var(--font-sans); }.eventSelectionChips button span { color:var(--grey); font-size:14px; }
.eventChartCanvas { position:relative; flex:1; min-height:0; }.eventChartEmpty { display:grid; place-items:center; height:100%; margin:0; color:var(--grey); text-align:center; }
.onboardingFunnelCard { position:relative; overflow:hidden; color:var(--ink); background:#fff; border:1px solid var(--line); box-shadow:0 8px 24px rgba(8,48,44,.06); }
.onboardingFunnelCard::before { position:absolute; inset:0; pointer-events:none; content:""; opacity:.45; background:radial-gradient(circle at 50% 55%,rgba(12,101,105,.045),transparent 38%),repeating-linear-gradient(32deg,transparent 0 84px,rgba(19,109,110,.025) 85px 86px),repeating-linear-gradient(145deg,transparent 0 112px,rgba(33,89,105,.02) 113px 114px); }
.onboardingFunnelHeader { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:18px 22px 12px; border-bottom:1px solid var(--line); }.onboardingFunnelHeader p { margin:0 0 3px; color:var(--teal); font:500 9px/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }.onboardingFunnelHeader h3 { margin:0; color:var(--deep); font:700 15px/1.3 var(--font-display); }
.funnelStreamFilter { display:flex; align-items:center; gap:8px; color:var(--grey); font:500 9px/1 var(--font-mono); text-transform:uppercase; }.funnelStreamFilter select { height:30px; min-width:110px; padding:0 8px; color:var(--deep); background:#fff; border:1px solid var(--line); font:600 11px/1 var(--font-sans); }
.onboardingFunnelScroll { position:relative; z-index:1; overflow-x:auto; }.onboardingFunnelInner { min-width:1280px; padding:18px 26px 14px; }
.funnelStages { display:grid; grid-template-columns:repeat(23,1fr); gap:12px; margin:0 0 8px; }.funnelStages span { padding:0 0 8px; text-align:center; font:600 8px/1 var(--font-sans); border-bottom:1px solid currentColor; }.funnelStages .blue { grid-column:span 6; color:#2e80ff; }.funnelStages .green { grid-column:span 3; color:#10a77c; }.funnelStages .orange { grid-column:span 4; color:#f5a000; }.funnelStages .purple { grid-column:span 2; color:#9a4de1; }.funnelStages .cyan { grid-column:span 7; color:#0cb1c5; }.funnelStages .red { grid-column:span 1; color:#ff3b45; }
.funnelBars { display:grid; grid-template-columns:repeat(23,minmax(36px,1fr)); gap:12px; height:340px; padding-top:8px; border-bottom:1px solid var(--line); }.funnelBarGroup { position:relative; height:100%; color:var(--bar-color); text-align:center; }.funnelBarGroup.cardFlowStart::before { position:absolute; top:-17px; bottom:0; left:-7px; content:""; border-left:1px dashed #cbd8d5; }.funnelBarGroup > b { position:absolute; right:0; bottom:calc(50px + var(--bar-height)); left:0; margin-bottom:5px; color:var(--bar-color); font:700 9px/1 var(--font-mono); }.funnelBarGroup > i { position:absolute; right:-3px; bottom:calc(50px + var(--previous-height)); left:-3px; z-index:2; border-top:1px dashed var(--bar-color); opacity:.9; }.funnelBar { position:absolute; right:5%; bottom:50px; left:5%; height:var(--bar-height); min-height:2px; background:color-mix(in srgb,var(--bar-color) 48%,#fff); border-top:2px solid var(--bar-color); }.funnelBarGroup > strong { position:absolute; right:0; bottom:28px; left:0; color:var(--ink); font:700 10px/1 var(--font-mono); }.funnelBarGroup > em { position:absolute; right:-8px; bottom:8px; left:-8px; color:#dc3545; font:700 9px/1 var(--font-mono); font-style:normal; }
.funnelDetailGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; padding:20px 8px 0; }.funnelDetailColumn { min-width:0; }.funnelDetailRow { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:25px; }.funnelDetailRow > span { display:flex; align-items:center; gap:5px; color:#748783; font:700 9px/1 var(--font-mono); }.funnelDetailRow > span i { width:7px; height:7px; background:#9aaba8; border-radius:50%; }.funnelDetailRow > small { overflow:hidden; color:var(--grey); text-overflow:ellipsis; white-space:nowrap; font:500 8.5px/1 var(--font-sans); }.funnelDetailRow > b { color:var(--ink); font:700 8.5px/1 var(--font-mono); white-space:nowrap; }.funnelDetailRow > b em { font-style:normal; }.funnelDetailRow > b em.negative { color:#dc3545; }.funnelDetailRow > b em.positive { color:#159267; }
.paidMediaFunnelCard { background:#fff; border:1px solid var(--line); }.paidMediaFunnelCard > header { padding:18px 20px 14px; border-bottom:2px solid #c4a94d; }.paidMediaFunnelCard > header p { margin:0 0 3px; color:var(--teal); font:500 9px/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }.paidMediaFunnelCard > header h3 { margin:0; color:#102f4c; font:700 16px/1.3 var(--font-display); }.paidMediaFunnelCard > header span { display:block; margin-top:6px; color:var(--grey); font-size:11px; }
.paidMediaTableScroll { overflow-x:auto; padding:18px 20px 6px; }.paidMediaTable { min-width:900px; border:1px solid #d6dfdd; }.paidMediaTable th { padding:9px 11px; color:#fff; background:#0e304d; border-right:1px solid rgba(255,255,255,.7); border-bottom:0; text-align:left; font:600 10px/1.3 var(--font-sans); letter-spacing:0; text-transform:none; }.paidMediaTable th:not(:first-child) { text-align:center; }.paidMediaTable td { padding:9px 11px; color:var(--ink); border-right:1px solid #dce4e2; border-bottom:1px solid #dce4e2; text-align:center; font:600 11px/1.3 var(--font-mono); }.paidMediaTable td:first-child { text-align:left; font-family:var(--font-sans); }.paidMediaTable tr.finalObjective td { background:#fff8e7; }.paidMediaTable tr.finalObjective td:first-child { color:#8a6a00; font-weight:700; }.paidMediaTable td:last-child b,.paidMediaTable td:last-child small { display:block; }.paidMediaTable td:last-child b { color:var(--teal); }.paidMediaTable td:last-child small { margin-top:2px; color:var(--grey); font:400 9px/1.2 var(--font-sans); }.funnelUp { color:#159267; }.funnelDown { color:#dc4f59; }.funnelUnavailable { color:#9aa6a3; }.paidMediaFunnelCard > footer { margin:0; padding:9px 20px 13px; color:#7b908c; font-size:9.5px; }
.costEfficiencyTable { min-width:760px; }.costEfficiencyTable th:first-child { width:40%; }.costEfficiencyTable td:nth-child(2),.costEfficiencyTable td:nth-child(3) { font-weight:700; }.costEfficiencyCard .paidMediaTableScroll { padding-bottom:18px; }
.costEvolutionChart { height:100%; display:flex; flex-direction:column; }.costEvolutionCanvas { position:relative; flex:1; min-height:0; }.costEvolutionNotice { margin:7px 0 0; padding:7px 10px; color:#8a6a00; background:#fff8e7; border-left:3px solid #d6ae32; font-size:10px; }.costEvolutionNotice code { font-family:var(--font-mono); }
.campaignPerformanceCard { background:#fff; border:1px solid var(--line); }.campaignPerformanceCard > header { padding:18px 20px 14px; border-bottom:2px solid #c4a94d; }.campaignPerformanceCard > header p { margin:0 0 3px; color:var(--teal); font:500 9px/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }.campaignPerformanceCard > header h3 { margin:0; color:#102f4c; font:700 16px/1.3 var(--font-display); }.campaignPerformanceCard > header span { display:block; margin-top:5px; color:var(--grey); font-size:11px; }.campaignPerformanceScroll { overflow-x:auto; padding:18px 20px; }.campaignPerformanceTable { min-width:1500px; border:1px solid #d6dfdd; }.campaignPerformanceTable th { padding:9px 8px; color:#fff; background:#0e304d; border-right:1px solid rgba(255,255,255,.4); text-align:center; font:600 9px/1.25 var(--font-sans); letter-spacing:0; text-transform:none; white-space:normal; }.campaignPerformanceTable th:first-child { text-align:left; }.campaignPerformanceTable td { padding:9px 8px; border-right:1px solid #e1e8e6; border-bottom:1px solid #e1e8e6; text-align:center; font:600 10px/1.25 var(--font-mono); }.campaignPerformanceTable td:first-child { max-width:220px; overflow:hidden; text-align:left; text-overflow:ellipsis; font-family:var(--font-sans); white-space:nowrap; }.campaignPerformanceTable tbody tr:nth-child(even) td { background:#f8faf9; }.campaignPlatform { color:#245aa5; font-family:var(--font-sans); }.campaignStatus { display:inline-block; padding:3px 7px; color:var(--grey); background:#eef2f1; border-radius:10px; font:600 9px/1 var(--font-sans); }.campaignStatus.active { color:#087b54; background:#e4f5ee; }.campaignPerformanceEmpty { margin:0; padding:24px; color:var(--grey); text-align:center; }
.overviewDonutGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.overviewDonut { min-width:0; padding:17px 17px 15px; background:#fff; border:1px solid var(--line); }.overviewDonut header h3 { margin:0; color:#102f4c; font:700 14px/1.3 var(--font-display); }.overviewDonut header p { margin:3px 0 0; color:var(--grey); font-size:10px; }.overviewDonutVisual { position:relative; height:230px; margin:10px auto; }.overviewDonutCenter { position:absolute; top:50%; left:50%; width:38%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; }.overviewDonutCenter strong,.overviewDonutCenter span { display:block; }.overviewDonutCenter strong { color:#102f4c; font:700 20px/1.2 var(--font-mono); }.overviewDonutCenter span { margin-top:3px; color:var(--grey); font-size:9px; }.overviewDonutLegend { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.overviewDonutLegend > div { display:grid; grid-template-columns:9px minmax(0,1fr); gap:2px 6px; }.overviewDonutLegend i { grid-row:span 2; width:8px; height:8px; margin-top:3px; border-radius:50%; }.overviewDonutLegend span { overflow:hidden; color:var(--grey); text-overflow:ellipsis; white-space:nowrap; font-size:9px; }.overviewDonutLegend b { color:var(--ink); font:700 10px/1.2 var(--font-mono); }.overviewDonutLegend small { color:var(--grey); font:500 9px/1.2 var(--font-mono); }
.seoTrafficSection { padding:18px 20px 20px; background:#fff; border:1px solid var(--line); }
.seoTrafficHeader { margin-bottom:14px; }
.seoTrafficHeader p { margin:0 0 3px; color:var(--teal); font:500 9px/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.seoTrafficHeader h2 { margin:0; color:#102f4c; font:700 16px/1.3 var(--font-display); }
.seoTrafficHeader span { display:block; margin-top:5px; color:var(--grey); font-size:11px; }
.seoTrafficPies { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:900px) { .overviewDonutGrid { grid-template-columns:1fr; }.overviewDonutVisual { height:260px; } }
@media (max-width:700px) { .seoTrafficPies { grid-template-columns:1fr; } }
.dateFilter { max-width:1360px; margin:0 auto; padding:12px 24px; display:flex; align-items:flex-end; justify-content:flex-end; gap:12px; background:var(--card); border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-left:1px solid var(--line); }
.dateFilterTitle { margin-right:auto; align-self:center; }.dateFilterTitle span,.dateFilter label span { display:block; color:var(--grey); font:500 10px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }.dateFilterTitle strong { display:block; margin-top:3px; color:var(--deep); font:600 13px/1.4 var(--font-sans); }.dateFilterTitle small { display:block; margin-top:2px; color:var(--grey); font-size:11px; }
.dateFilter label { display:block; }.dateFilter input { width:156px; height:36px; margin-top:4px; padding:0 10px; color:var(--ink); background:#fff; border:1px solid var(--line); font:500 12px/1 var(--font-mono); color-scheme:light; }
.previousPeriod { min-width:336px; display:flex; gap:8px; margin:0; padding:3px 7px 6px; background:var(--pale); border:1px solid #cce4df; }
.previousPeriod legend { padding:0 4px; color:var(--teal); font:500 8.5px/1 var(--font-mono); letter-spacing:.07em; text-transform:uppercase; }
.previousPeriod label { flex:1; }.previousPeriod label span { color:var(--teal); font-size:8px; }.previousPeriod input { width:152px; height:28px; margin-top:2px; background:rgba(255,255,255,.8); border-color:#cce4df; font-size:10.5px; }
.dateFilter input:focus { outline:2px solid rgba(14,107,96,.2); border-color:var(--teal); }.dateFilter button { height:36px; padding:0 16px; color:#fff; background:var(--deep); border:1px solid var(--deep); cursor:pointer; font:600 12px/1 var(--font-sans); }.dateFilter button:hover { background:var(--teal); border-color:var(--teal); }
.dateFilterActions { display:flex; gap:8px; }.dateFilter .refreshButton { color:var(--deep); background:#fff; border-color:var(--deep); }.dateFilter .refreshButton:hover { color:#fff; background:var(--teal); border-color:var(--teal); }
.dateFilter button:disabled { cursor:wait; opacity:.72; }
.controlStrip { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.control { position:relative; min-width:0; background:var(--card); padding:13px 15px 14px; }
.control::before { position:absolute; inset:0 auto 0 0; width:3px; content:""; background:var(--teal); }
.control.warning::before { background:var(--amber); } .control.danger::before { background:var(--red); }.control.unknown::before { background:#9aaba8; }.control.info::before { background:var(--teal); }
.control p,.kpi p { margin:0; color:var(--grey); font:400 10px/1.4 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; }
.control strong { display:block; margin:5px 0 2px; color:var(--deep); font:600 21px/1.4 var(--font-mono); font-variant-numeric:tabular-nums; }
.control.warning strong { color:var(--amber); } .control.danger strong { color:var(--red); }.control.unknown strong { color:var(--grey); }
.control span,.kpi span { display:block; color:var(--grey); font-size:11.5px; }
.tabs { display:flex; margin-top:26px; border-bottom:2px solid var(--line); overflow-x:auto; }
.tabs button { flex:0 0 auto; margin-bottom:-2px; padding:11px 20px; background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; color:var(--grey); font:500 14.5px/1.5 var(--font-display); }
.tabs button:hover,.tabs button.active { color:var(--deep); }.tabs button.active { border-bottom-color:var(--deep); font-weight:700; }
.tabs span { margin-left:7px; color:var(--grey); font:400 11px/1 var(--font-mono); }
.view { padding-top:22px; }.purpose { max-width:760px; margin:0 0 18px; color:var(--grey); font-size:13.5px; }
.objectivesTitle { margin:0 0 22px; color:var(--deep); font-size:32px; }
.kpiGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-bottom:20px; }
.kpi { background:var(--card); border:1px solid var(--line); padding:13px 15px 14px; min-width:0; }
.kpi strong { display:block; margin:6px 0 1px; color:var(--deep); font:600 24px/1.4 var(--font-mono); font-variant-numeric:tabular-nums; }
.kpi span.up { color:var(--teal); }.kpi span.down { color:var(--red); }
.chartGrid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.chartCard { grid-column:span 6; min-width:0; background:var(--card); border:1px solid var(--line); padding:16px 18px 18px; }
.chartCard.full { grid-column:span 12; }.chartCard.wide { grid-column:span 8; }.chartCard.narrow { grid-column:span 4; }
.chartCardHeader { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:13px; }
.chartCardHeader > div { min-width:0; }
.chartCard h3 { margin:0; color:var(--deep); font:700 14.5px/1.35 var(--font-display); letter-spacing:0; }
.chartCardHeader p { margin:3px 0 0; color:var(--grey); font-size:11.5px; }
.chartValueToggle { display:flex; flex:0 0 auto; align-items:center; gap:6px; color:var(--grey); cursor:pointer; font:500 10px/1.3 var(--font-mono); white-space:nowrap; }
.chartValueToggle input { width:14px; height:14px; margin:0; accent-color:var(--deep); cursor:pointer; }
.chartWrap { position:relative; height:230px; }.chartWrap.tall { height:300px; }
.chartCanvas { position:relative; width:100%; height:100%; }
.tableScroll { max-height:230px; overflow:auto; }table { width:100%; border-collapse:collapse; font-size:13px; }
th { padding:7px 9px; border-bottom:1px solid var(--line); color:var(--grey); text-align:right; font:400 10px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
th:first-child,td:first-child { text-align:left; }td { padding:8px 9px; border-bottom:1px solid #eef3f2; text-align:right; font-family:var(--font-mono); white-space:nowrap; }
td:first-child { font-family:var(--font-sans); font-weight:500; }.pill { display:inline-block; padding:1px 8px; font:500 11px/1.5 var(--font-mono); }
.pill.ok { background:var(--pale); color:var(--deep); }.pill.warn { background:#fbf3e4; color:var(--amber); }.pill.bad { background:#f7e9e7; color:var(--red); }
.note { margin-top:16px; padding:12px 16px; background:#fbf3e4; border-left:3px solid var(--amber); font-size:12.5px; }.note strong { color:var(--amber); }
footer { margin-top:26px; color:#7b908c; font-size:11px; line-height:1.7; }
.loadingScreen { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; min-height:100dvh; overflow:hidden; background:rgba(242,246,245,.66); }
.pageLoadingOverlay { position:fixed; inset:0; z-index:1100; display:grid; place-items:center; min-height:100dvh; background:rgba(242,246,245,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.loadingBackdrop { position:absolute; inset:-12px; filter:blur(8px); opacity:.68; transform:scale(1.02); }
.loadingHeader { height:112px; background:var(--deep); }
.loadingContent { max-width:1360px; margin:0 auto; padding:0 24px; }
.loadingControls { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); }
.loadingControls span { height:88px; background:var(--card); }
.loadingTabs { width:360px; height:48px; margin-top:26px; border-bottom:2px solid var(--line); }
.loadingGrid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:96px; }
.loadingGrid span { height:270px; background:var(--card); border:1px solid var(--line); }
.loadingIndicator { position:relative; display:flex; flex-direction:column; align-items:center; width:min(310px,calc(100vw - 40px)); padding:24px; background:rgba(255,255,255,.92); border:1px solid var(--line); box-shadow:0 16px 40px rgba(8,48,44,.14); text-align:center; }
.loadingIndicator strong { margin-top:14px; color:var(--deep); font:700 15px/1.4 var(--font-display); }
.loadingIndicator > span:last-child { margin-top:3px; color:var(--grey); font-size:12px; }
.loadingSpinner { width:28px; height:28px; border:3px solid var(--line); border-top-color:var(--teal); border-radius:50%; animation:loadingSpin .75s linear infinite; }
@keyframes loadingSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .loadingSpinner { animation-duration:1.8s; } }
@media (max-width:1000px) { .overviewCard { grid-column:span 6; }.controlStrip { grid-template-columns:repeat(2,1fr); }.chartCard,.chartCard.full,.chartCard.wide,.chartCard.narrow { grid-column:span 12; } }
@media (max-width:800px) { .overviewConversionCharts { grid-template-columns:1fr; } }
@media (max-width:760px) { .overviewFilters { margin:0 0 16px; justify-content:flex-start; }.overviewFilters label { flex:1; }.overviewFilters select { width:100%; } }
@media (max-width:640px) { .topbar { padding:18px 16px; }.topbarInner { align-items:flex-start; flex-direction:column; }.freshness { text-align:left; }h1 { font-size:23px; }.dateFilter { padding:12px; display:grid; grid-template-columns:1fr 1fr; }.dateFilterTitle,.previousPeriod { grid-column:1/-1; }.previousPeriod { width:100%; min-width:0; }.previousPeriod input { width:100%; }.dateFilter input { width:100%; }.dateFilterActions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; }.dateFilter button { width:100%; }.dashboard { padding:0 12px 40px; }.dashboardModes { display:grid; grid-template-columns:repeat(3,1fr); padding:12px 0; }.dashboardModes button { min-width:0; width:100%; padding:0 6px; }.overviewCard { grid-column:span 6; min-height:160px; padding:13px; }.overviewLabel { align-items:flex-start; }.overviewCard > strong { font-size:19px; }.overviewLegend { align-items:flex-start; flex-direction:column; gap:6px; }.controlStrip { grid-template-columns:1fr 1fr; }.control { padding:11px 10px 12px; }.control strong { font-size:17px; }.tabs button { padding:10px 12px; }.tabs span { display:block; margin:1px 0 0; }.kpiGrid { grid-template-columns:1fr 1fr; gap:8px; }.kpi { padding:11px 10px; }.kpi strong { font-size:20px; }.chartCard { padding:14px 12px 16px; }.chartCardHeader { flex-direction:column; gap:8px; }.chartWrap { height:250px; }.chartWrap.tall { height:320px; }.loadingContent { padding:0 12px; }.loadingControls { grid-template-columns:1fr 1fr; }.loadingControls span:last-child { display:none; }.loadingGrid { grid-template-columns:1fr; }.loadingGrid span { height:220px; } }