:root {
  color-scheme: light;
  --page: #f5f7fb; --surface: #fff; --surface-soft: #fafbfe; --text: #454a60; --text-strong: #20233a;
  --muted: #8a8fa5; --muted-strong: #656b83; --line: #eceef5; --line-strong: #e2e5ef;
  --purple: #6c63f5; --purple-dark: #5950e8; --purple-soft: #f0efff; --shadow: 0 3px 14px #22274409;
  font-family: "DM Sans", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--text); font-size: 13px; -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; } button { color: inherit; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #6c63f54d; outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 246px; flex: 0 0 246px; display: flex; flex-direction: column; min-height: 100vh; padding: 27px 17px 16px; background: var(--surface); border-right: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 0 7px; width: fit-content; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--purple); box-shadow: 0 5px 12px #6c63f533; }
.brand-mark svg { width: 25px; height: 25px; }
.brand-name { font: 800 24px/1 "Manrope", sans-serif; letter-spacing: -1.4px; color: var(--text-strong); }
.brand-name span { color: var(--purple); }
.workspace-label { margin: 41px 9px 10px; color: #a4a8ba; font-size: 9px; font-weight: 700; letter-spacing: 1.15px; }
.site-switcher { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; text-align: left; }
.site-favicon { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #f8a46c, #e8736f); border-radius: 8px; font: 700 14px "Manrope", sans-serif; }
.site-switcher-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.site-switcher-copy strong { overflow: hidden; color: var(--text-strong); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.site-switcher-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.site-menu { position: relative; z-index: 4; width: 100%; margin-top: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 24px #22274418; }
.site-menu[hidden] { display: none; }
.site-menu-item { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: 5px; color: var(--muted-strong); background: transparent; font-size: 10px; text-align: left; cursor: pointer; }
.site-menu-item:hover, .site-menu-item.selected { color: var(--purple); background: var(--purple-soft); }
.site-menu-item strong { min-width: 0; overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.site-menu-add { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; color: var(--purple); font-weight: 700; }
.chevron, .select-chevron { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 1.6; }
.main-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 29px; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 39px; padding: 0 11px; border-radius: 7px; color: #747a92; font-size: 12px; font-weight: 500; transition: background .16s ease, color .16s ease; }
.nav-link:hover { background: var(--surface-soft); color: var(--text); }
.nav-link.active { background: var(--purple-soft); color: var(--purple); font-weight: 700; }
.nav-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-count { margin-left: auto; padding: 2px 6px; border-radius: 10px; color: #5f58dd; background: #e5e3ff; font-size: 9px; font-weight: 700; }
.sidebar-bottom { margin-top: auto; }
.privacy-card { padding: 14px 12px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.privacy-icon { display: inline-flex; width: 27px; height: 27px; align-items: center; justify-content: center; border-radius: 8px; color: #24a77e; background: #e8f8f2; }
.privacy-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.privacy-card strong { display: block; margin-top: 9px; color: var(--text-strong); font-size: 10px; }
.privacy-card p { margin: 6px 0 8px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.privacy-card a { color: var(--purple); font-size: 10px; font-weight: 700; }
.profile-button { display: flex; width: 100%; align-items: center; gap: 9px; margin-top: 13px; padding: 12px 4px 0; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #8059c7; background: #efe7ff; font-weight: 700; }
.profile-button span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.profile-button strong { color: var(--text-strong); font-size: 10px; }.profile-button small { color: var(--muted); font-size: 9px; }
.more-icon { width: 18px; height: 18px; fill: var(--muted); }
.main-content { min-width: 0; flex: 1; }
.topbar { height: 67px; display: flex; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid var(--line); background: var(--surface); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #a0a4b5; font-size: 11px; }.breadcrumb-divider { color: #d3d5df; }.breadcrumb strong { color: var(--text-strong); font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
.demo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: #8a6924; border: 1px solid #f3e7c8; background: #fffaf0; border-radius: 5px; font-size: 8px; font-weight: 700; letter-spacing: .45px; }
.demo-badge span { width: 5px; height: 5px; border-radius: 50%; background: #e4ad43; }
.icon-button { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: #777d93; background: var(--surface); cursor: pointer; }
.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }.moon-icon { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 7px; color: #fff; background: var(--purple); font-weight: 600; cursor: pointer; transition: background .15s, transform .15s; }
.button:hover { background: var(--purple-dark); }.button:active { transform: translateY(1px); }
.button-small { height: 34px; padding: 0 12px; font-size: 10px; }.button-small svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.content-wrap { width: min(100% - 84px, 1290px); margin: 0 auto; padding: 31px 0 20px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.eyebrow { display: flex; align-items: center; gap: 7px; color: #8e93a8; font-size: 8px; font-weight: 700; letter-spacing: 1.15px; }
.status-pulse { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #29bd8b; }.status-pulse::after { position: absolute; inset: -3px; border: 1px solid #29bd8b40; border-radius: 50%; content: ""; }
h1, h2, p { margin-top: 0; }
.page-heading h1 { margin: 8px 0 5px; color: var(--text-strong); font: 700 22px/1.35 "Manrope", sans-serif; letter-spacing: -.7px; }.wave { display: inline-block; color: #f2b94b; font-size: 17px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.date-control { position: relative; display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted-strong); background: var(--surface); font-size: 10px; }
.date-control > svg:first-child { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; }
.date-control select { z-index: 1; width: 58px; padding: 5px 13px 5px 0; appearance: none; border: 0; outline: 0; color: var(--text-strong); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.select-chevron { position: absolute; right: 9px; width: 12px; height: 12px; pointer-events: none; }
.demo-notice { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 12px; border: 1px solid #f1e7c9; border-radius: 8px; background: #fffcf4; color: #806b3e; }
.notice-symbol { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; border: 1px solid #d6b866; border-radius: 50%; font: 700 10px Georgia, serif; }
.demo-notice p { flex: 1; margin: 0; font-size: 10px; line-height: 1.5; }.demo-notice p strong { color: #65532c; }
.notice-link { padding: 4px 0; border: 0; color: #886b28; background: transparent; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.notice-close { width: 23px; height: 23px; border: 0; color: #a89b7b; background: transparent; font-size: 18px; cursor: pointer; }
.live-panel { display: flex; min-height: 87px; align-items: center; justify-content: space-between; margin-bottom: 15px; padding: 14px 21px; border: 1px solid #e8e7ff; border-radius: 10px; background: linear-gradient(105deg, var(--surface) 30%, #fbfbff); box-shadow: var(--shadow); }
.live-left, .live-right, .live-heading-row { display: flex; align-items: center; }.live-left { gap: 12px; }
.live-icon-wrap { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 11px; color: var(--purple); background: var(--purple-soft); }
.live-icon-wrap svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.45; }
.live-heading-row { gap: 8px; }.live-heading-row h2, .panel h2 { margin: 0; color: var(--text-strong); font: 700 13px/1.4 "Manrope", sans-serif; letter-spacing: -.2px; }
.live-left p, .panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.live-label, .tiny-live { display: inline-flex; align-items: center; gap: 5px; color: #1eaa7a; font-size: 7px; font-weight: 700; letter-spacing: .65px; }
.live-label span, .tiny-live i { width: 5px; height: 5px; border-radius: 50%; background: #24bd89; box-shadow: 0 0 0 3px #24bd891c; }
.live-right { gap: 21px; }.visitor-count { display: flex; align-items: baseline; gap: 6px; }.visitor-count strong { color: var(--text-strong); font: 800 26px/1 "Manrope", sans-serif; letter-spacing: -.8px; }.visitor-count span { color: var(--muted); font-size: 10px; }
.live-divider { height: 35px; border-left: 1px solid var(--line-strong); }
.sound-control { display: flex; align-items: center; gap: 9px; padding: 4px 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.sound-switch { width: 30px; height: 17px; display: flex; align-items: center; padding: 2px; border-radius: 10px; background: #dfe2eb; transition: background .2s; }.sound-switch span { width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0002; transition: transform .2s; }
.sound-control[aria-pressed="true"] .sound-switch { background: var(--purple); }.sound-control[aria-pressed="true"] .sound-switch span { transform: translateX(13px); }
.sound-copy { display: flex; flex-direction: column; gap: 2px; }.sound-copy strong { color: var(--text-strong); font-size: 10px; }.sound-copy small { color: var(--muted); font-size: 9px; }
.sound-icon { width: 17px; height: 17px; margin-left: 3px; fill: none; stroke: var(--muted); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 15px; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow); }
.metric-card { position: relative; min-height: 129px; overflow: hidden; padding: 14px 15px 11px; }
.metric-top, .metric-value-row, .metric-foot { display: flex; align-items: center; justify-content: space-between; }
.metric-label { color: #969bad; font-size: 8px; font-weight: 700; letter-spacing: .75px; }
.metric-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; }.metric-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.metric-icon.purple { color: #766cf0; background: #f1efff; }.metric-icon.blue { color: #4c91f5; background: #edf5ff; }.metric-icon.green { color: #1ead80; background: #eaf9f3; }.metric-icon.orange { color: #eb9a49; background: #fff4e8; }
.metric-value-row { justify-content: flex-start; gap: 8px; margin-top: 9px; }.metric-value-row > strong { color: var(--text-strong); font: 700 21px/1.2 "Manrope", sans-serif; letter-spacing: -.6px; }.value-unit { font-size: 14px; }
.change { padding: 3px 5px; border-radius: 4px; font-size: 8px; font-weight: 700; }.change.positive, .change.negative { color: #1fa779; background: #edfaf5; }
.metric-foot { justify-content: flex-start; gap: 4px; margin-top: 4px; color: #a0a4b5; font-size: 8px; }.metric-foot span + span::before { content: "·"; padding: 0 3px; }
.sparkline { position: absolute; right: 0; bottom: 0; left: 0; height: 17px; display: flex; align-items: flex-end; gap: 4px; padding: 0 8px; opacity: .8; }.sparkline i { flex: 1; min-height: 6px; border-radius: 2px 2px 0 0; }
.sparkline i:nth-child(1) { height: 26%; }.sparkline i:nth-child(2) { height: 44%; }.sparkline i:nth-child(3) { height: 32%; }.sparkline i:nth-child(4) { height: 56%; }.sparkline i:nth-child(5) { height: 48%; }.sparkline i:nth-child(6) { height: 71%; }.sparkline i:nth-child(7) { height: 54%; }.sparkline i:nth-child(8) { height: 79%; }.sparkline i:nth-child(9) { height: 62%; }.sparkline i:nth-child(10) { height: 91%; }.sparkline i:nth-child(11) { height: 72%; }.sparkline i:nth-child(12) { height: 100%; }
.purple-line i { background: #efedff; }.blue-line i { background: #e9f2ff; }.green-line i { background: #e6f7f0; }.orange-line i { background: #fff1e0; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .95fr); gap: 14px; margin-bottom: 14px; }.panel { min-width: 0; padding: 17px 18px; }.panel-header { display: flex; align-items: flex-start; justify-content: space-between; }.panel-header h2 { font-size: 12px; }.panel-header p { margin-top: 4px; font-size: 9px; }
.more-button { width: 24px; height: 24px; border: 0; border-radius: 5px; color: #9da2b4; background: transparent; font-size: 13px; letter-spacing: 1px; cursor: pointer; }.more-button:hover { background: var(--surface-soft); }
.traffic-panel, .sources-panel { min-height: 245px; }.chart-legend { display: flex; gap: 15px; margin: 13px 0 5px; color: var(--muted-strong); font-size: 9px; }.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }.legend-dot { width: 7px; height: 7px; border-radius: 50%; }.visitors-dot { background: var(--purple); }.views-dot { background: #a9ccff; }
.chart-wrap { height: 151px; display: flex; gap: 9px; }.y-axis { width: 25px; display: flex; flex-direction: column; justify-content: space-between; padding: 1px 0 18px; color: #a6aabb; font-size: 8px; text-align: right; }.chart { position: relative; flex: 1; min-width: 0; margin-bottom: 2px; }
.grid-lines { position: absolute; inset: 3px 0 19px; display: flex; flex-direction: column; justify-content: space-between; }.grid-lines i { border-top: 1px dashed var(--line); }
.chart-svg { position: absolute; inset: 3px 0 19px; width: 100%; height: calc(100% - 22px); overflow: visible; }.area-path { fill: url(#area-fill); }.line-visitors, .line-views { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }.line-visitors { stroke: #7068f3; stroke-width: 2.2; }.line-views { stroke: #aacafa; stroke-width: 1.7; stroke-dasharray: 4 4; }.chart-point { fill: #fff; stroke: #7068f3; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.x-axis { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: #a6aabb; font-size: 8px; }
.chart.no-data .chart-svg { visibility: hidden; }
.chart.no-data::after { position: absolute; inset: 3px 0 19px; display: grid; place-items: center; color: var(--muted); content: "Aguardando eventos reais"; font-size: 9px; }
.empty-data-cell { height: 62px !important; color: var(--muted) !important; text-align: center; }
.empty-data-message { margin: 14px 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.source-total { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 13px; }.source-total strong { color: var(--text-strong); font: 700 19px "Manrope", sans-serif; }.source-total span { color: var(--muted); font-size: 9px; }
.source-bars { display: flex; flex-direction: column; gap: 12px; }.source-meta { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--muted-strong); font-size: 9px; }.source-meta strong { color: var(--text-strong); font-size: 9px; font-weight: 700; }.source-meta small { margin-left: 4px; color: var(--muted); font-size: 8px; font-weight: 500; }
.progress-track { height: 4px; overflow: hidden; border-radius: 5px; background: #f0f1f6; }.progress-track i { display: block; height: 100%; border-radius: inherit; }.bar-purple { background: #776ef1; }.bar-blue { background: #64a2f5; }.bar-pink { background: #e786ae; }.bar-green { background: #45be93; }
.text-button { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; color: var(--purple); background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }.text-button:hover { color: var(--purple-dark); }.sources-panel > .text-button { margin-top: 13px; }
.lower-grid { grid-template-columns: minmax(0, 1.65fr) minmax(260px, .95fr); }.visitors-panel { padding-right: 0; padding-left: 0; }.visitors-panel > .panel-header { padding: 0 18px 13px; }.title-with-live { display: flex; align-items: center; gap: 8px; }
.refresh-button { gap: 5px; margin-right: 17px; color: #83889d; font-size: 9px; font-weight: 500; }.refresh-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }.refresh-button.is-refreshing svg { animation: spin .75s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }
.visitor-table-wrap { width: 100%; overflow-x: auto; }.visitor-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }.visitor-table th { height: 29px; padding: 0 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #a1a5b6; background: var(--surface-soft); font-size: 7px; font-weight: 700; letter-spacing: .45px; }.visitor-table th:first-child, .visitor-table td:first-child { padding-left: 18px; }
.visitor-table td { height: 49px; padding: 0 10px; border-bottom: 1px solid #f2f3f7; color: var(--text-strong); font-size: 9px; }.visitor-table tbody tr:last-child td { border-bottom: 0; }
.country-flag { display: inline-grid; width: 24px; height: 24px; place-items: center; margin-right: 8px; border-radius: 50%; background: var(--surface-soft); font-size: 13px; vertical-align: middle; }.visitor-location { display: inline-flex; flex-direction: column; gap: 2px; vertical-align: middle; }.visitor-location strong { font-size: 9px; font-weight: 600; }.visitor-location small { color: var(--muted); font-size: 8px; }
.page-path { display: inline-block; max-width: 142px; overflow: hidden; color: #666b80; text-overflow: ellipsis; vertical-align: middle; }.duration { color: #555b70; }.duration i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #36ba8c; }.provider { color: #767c90; }
.table-footnote { display: flex; align-items: center; gap: 5px; padding: 9px 18px 0; color: #989daf; font-size: 8px; }.table-footnote svg { width: 12px; height: 12px; flex: 0 0 12px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; }
.pages-panel { padding: 17px 17px 14px; }.page-list { margin-top: 10px; }.page-row { display: flex; align-items: center; gap: 9px; min-height: 42px; border-bottom: 1px solid #f0f1f5; }.page-rank { width: 20px; color: #b0b4c2; font: 600 9px "Manrope", sans-serif; }.page-info { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }.page-info strong { overflow: hidden; color: var(--text-strong); font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.page-info small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.page-stats { display: flex; flex-direction: column; gap: 3px; text-align: right; }.page-stats strong { color: var(--text-strong); font-size: 9px; }.page-stats small { color: var(--muted); font-size: 8px; }.pages-link { margin-top: 12px; }
.footer-note { display: flex; justify-content: space-between; margin-top: 17px; padding: 0 2px; color: #a0a4b5; font-size: 8px; }.footer-dot { padding: 0 4px; color: #c5c7d2; }
.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: #1a1d3170; backdrop-filter: blur(3px); }.modal-backdrop[hidden] { display: none; }
.modal { width: min(100%, 440px); padding: 25px 31px 23px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 24px 80px #191c3633; animation: modal-in .18s ease-out; }@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-header { display: flex; justify-content: space-between; align-items: center; }.modal-mark { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--purple); }.modal-mark svg { width: 25px; height: 25px; }.modal-close { width: 28px; height: 28px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 20px; cursor: pointer; }.modal-close:hover { background: var(--surface-soft); }
.modal-progress { display: flex; gap: 5px; margin-top: 20px; }.modal-progress span { height: 3px; flex: 1; border-radius: 3px; background: var(--line-strong); }.modal-progress .progress-active { background: var(--purple); }
.modal-step-label { margin-top: 19px; color: #9297ab; font-size: 8px; font-weight: 700; letter-spacing: .8px; }.modal-step-label span { padding: 0 4px; color: #c5c7d2; }.modal h2 { margin: 8px 0 7px; color: var(--text-strong); font: 700 20px "Manrope", sans-serif; letter-spacing: -.4px; }.modal-intro { margin-bottom: 19px; color: var(--muted-strong); font-size: 11px; line-height: 1.65; }
.modal label { display: block; margin-bottom: 7px; color: var(--text-strong); font-size: 10px; font-weight: 700; }.input-wrap { display: flex; height: 41px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }.input-wrap:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px #6c63f51a; }.input-wrap svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: #a1a6b8; stroke-width: 1.4; }.input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text-strong); background: transparent; font-size: 11px; }.input-wrap input::placeholder { color: #b8bbca; }.input-suffix { color: #a5a9b9; font-size: 9px; }
.field-hint, .field-error { display: block; margin-top: 6px; font-size: 9px; }.field-hint { color: var(--muted); }.field-error { color: #cf4c5c; }
.verification-info { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 11px; border: 1px solid #e7f2eb; border-radius: 7px; background: #f6fbf7; }.verify-shield { width: 26px; height: 26px; display: grid; flex: 0 0 26px; place-items: center; border-radius: 7px; color: #22a579; background: #e6f6ed; }.verify-shield svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }.verification-info span:last-child { display: flex; flex-direction: column; gap: 3px; }.verification-info strong { color: #39705c; font-size: 9px; }.verification-info small { color: #789587; font-size: 8px; }
.modal-submit { width: 100%; height: 39px; margin-top: 17px; font-size: 10px; }.modal-submit span { font-size: 14px; }.modal-privacy { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 15px; color: #9a9eaf; font-size: 8px; }.modal-privacy svg { width: 12px; height: 12px; fill: none; stroke: #8fbaaa; stroke-width: 1.2; }
.challenge-notice { display: flex; flex-direction: column; gap: 4px; margin: 15px 0 14px; padding: 10px 11px; border: 1px solid #f1e7c9; border-radius: 7px; color: #806b3e; background: #fffcf4; font-size: 9px; line-height: 1.45; }.challenge-notice strong { color: #65532c; font-size: 9px; }
.modal h3 { margin: 0; color: var(--text-strong); font: 700 12px "Manrope", sans-serif; }.verification-description { margin: 5px 0 12px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.verification-tabs { display: flex; gap: 12px; border-bottom: 1px solid var(--line); }.verification-tab { padding: 8px 2px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 9px; cursor: pointer; }.verification-tab.active { border-bottom-color: var(--purple); color: var(--purple); font-weight: 700; }
.verification-panel { padding: 9px 0 1px; }.verification-panel[hidden] { display: none; }.record-row { display: flex; flex-direction: column; gap: 5px; padding: 7px 0; }.record-row > span { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .55px; }.record-row > strong { color: var(--text-strong); font-size: 10px; }
.copy-field { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); }.copy-field code { min-width: 0; flex: 1; overflow-wrap: anywhere; color: var(--text-strong); font: 9px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }.copy-button { flex: 0 0 auto; padding: 4px 7px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--muted-strong); background: var(--surface); font-size: 8px; cursor: pointer; }.copy-button:hover { border-color: var(--purple); color: var(--purple); }
.meta-instructions { margin: 9px 0 5px; color: var(--muted-strong); font-size: 9px; }.meta-instructions code { color: var(--text-strong); }.code-field { min-height: 54px; align-items: flex-start; }.code-field code { max-height: 72px; overflow: auto; }.modal-actions { display: flex; gap: 8px; margin-top: 10px; }.modal-actions .modal-submit { margin-top: 0; }.button-secondary { min-width: 74px; padding: 0 12px; border: 1px solid var(--line-strong); color: var(--muted-strong); background: var(--surface); font-size: 9px; }.button-secondary:hover { color: var(--text-strong); background: var(--surface-soft); }
.auth-button { min-height: 34px; padding: 0 12px; font-size: 10px; }
.auth-modal form > label:not(:first-child) { margin-top: 13px; }
.auth-switch { margin: 14px 0 0; color: var(--muted); font-size: 9px; text-align: center; }
.auth-switch button { padding: 0; border: 0; color: var(--purple); background: transparent; font-size: inherit; font-weight: 700; cursor: pointer; }
.toast-region { position: fixed; z-index: 20; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; }.toast { max-width: min(390px, calc(100vw - 40px)); display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--surface); box-shadow: 0 10px 36px #1f233c1f; font-size: 10px; line-height: 1.5; animation: toast-in .18s ease-out; }.toast strong { display: block; margin-bottom: 2px; font-size: 10px; }.toast-indicator { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 3px; border-radius: 50%; background: #22b685; }.toast-indicator.warning { background: #dfa846; }@keyframes toast-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
body.dark { color-scheme: dark; --page: #141622; --surface: #1b1e2d; --surface-soft: #202333; --text: #d4d7e5; --text-strong: #f0f1f8; --muted: #8e93a9; --muted-strong: #a5a9bb; --line: #2a2e40; --line-strong: #373b50; --purple: #8a82ff; --purple-dark: #756cf4; --purple-soft: #292844; --shadow: 0 3px 14px #00000014; }
body.dark .demo-badge { color: #e5c779; border-color: #49412d; background: #2e2a20; }body.dark .demo-notice { color: #d7c58d; border-color: #49412d; background: #252319; }body.dark .demo-notice p strong { color: #eddda8; }body.dark .notice-link { color: #e7ce83; }body.dark .live-panel { border-color: #33314f; background: linear-gradient(105deg, var(--surface) 30%, #202035); }body.dark .progress-track { background: #2e3244; }body.dark .visitor-table th { background: #202333; }body.dark .visitor-table td, body.dark .page-row { border-color: #292d3e; }body.dark .sparkline i { opacity: .3; }body.dark .verification-info { border-color: #31483e; background: #202d29; }body.dark .verification-info strong { color: #a9d8c3; }body.dark .verification-info small { color: #91b6a4; }body.dark .verify-shield { color: #71d5ae; background: #284238; }body.dark .demo-notice .notice-symbol { border-color: #7e7049; }body.dark .chart-point { fill: var(--surface); }body.dark .country-flag { background: #262a3b; }body.dark .metric-icon.purple { color: #aaa4ff; background: #302e50; }body.dark .metric-icon.blue { color: #8cbbff; background: #24354b; }body.dark .metric-icon.green { color: #78d7b4; background: #223b35; }body.dark .metric-icon.orange { color: #f4ba7b; background: #403327; }body.dark .change.positive, body.dark .change.negative { color: #77d7b2; background: #223b35; }body.dark .sun-icon { display: none; }body.dark .moon-icon { display: block; }
body.dark .challenge-notice { color: #d7c58d; border-color: #49412d; background: #252319; }body.dark .challenge-notice strong { color: #eddda8; }
@media (min-width: 1500px) { .content-wrap { padding-top: 38px; }.metric-card { min-height: 140px; padding: 16px 17px 12px; }.dashboard-grid { gap: 16px; margin-bottom: 16px; }.panel { padding: 19px 21px; }.visitors-panel { padding-right: 0; padding-left: 0; }.visitors-panel > .panel-header { padding-right: 21px; padding-left: 21px; }.visitor-table th:first-child, .visitor-table td:first-child { padding-left: 21px; } }
@media (max-width: 1100px) { .sidebar { width: 215px; flex-basis: 215px; }.topbar { padding-right: 28px; padding-left: 28px; }.content-wrap { width: calc(100% - 56px); }.metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.metric-card { min-height: 125px; }.visitor-table th, .visitor-table td { padding-right: 7px; padding-left: 7px; }.visitor-table th:first-child, .visitor-table td:first-child { padding-left: 14px; } }
@media (max-width: 780px) { .sidebar { width: 64px; flex-basis: 64px; align-items: center; padding: 18px 8px 11px; }.brand { padding: 0; }.brand-name, .workspace-label, .site-switcher-copy, .site-switcher .chevron, .privacy-card, .profile-button span:nth-child(2), .profile-button .more-icon { display: none; }.site-switcher { width: 42px; height: 42px; justify-content: center; margin-top: 28px; padding: 5px; }.site-favicon { width: 30px; height: 30px; }.main-nav { width: 100%; align-items: center; margin-top: 23px; }.nav-link { position: relative; width: 43px; height: 41px; justify-content: center; padding: 0; font-size: 0; }.nav-link svg { width: 19px; height: 19px; }.nav-count { position: absolute; top: -2px; right: -3px; min-width: 16px; padding: 2px 4px; font-size: 8px; text-align: center; }.profile-button { width: auto; margin-top: 11px; padding: 10px 0 0; border-top: 1px solid var(--line); }.topbar { height: 58px; padding: 0 18px; }.topbar-actions { gap: 8px; }.demo-badge { font-size: 0; padding: 6px; }.demo-badge span { width: 7px; height: 7px; }.content-wrap { width: calc(100% - 36px); padding-top: 23px; }.dashboard-grid, .lower-grid { grid-template-columns: minmax(0, 1fr); }.sources-panel { min-height: unset; }.source-bars { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }.live-panel { padding-right: 14px; padding-left: 14px; }.live-right { gap: 12px; }.visitor-count strong { font-size: 22px; }.sound-icon { display: none; }.footer-note { gap: 12px; flex-direction: column; } }
@media (max-width: 520px) { .sidebar { width: 54px; flex-basis: 54px; padding-right: 5px; padding-left: 5px; }.brand-mark { width: 32px; height: 32px; }.site-switcher { width: 38px; height: 38px; }.nav-link { width: 39px; height: 39px; }.topbar { padding: 0 12px; }.breadcrumb { gap: 6px; font-size: 9px; }.topbar-actions { gap: 6px; }.button-small { width: 32px; padding: 0; font-size: 0; }.button-small svg { width: 16px; height: 16px; }.icon-button { width: 30px; height: 30px; }.content-wrap { width: calc(100% - 24px); padding-top: 19px; }.page-heading { align-items: flex-start; gap: 12px; flex-direction: column; }.page-heading h1 { font-size: 19px; }.demo-notice { align-items: flex-start; gap: 8px; padding: 10px; }.demo-notice p { font-size: 9px; }.notice-link { display: none; }.live-panel { align-items: flex-start; gap: 12px; flex-direction: column; padding: 13px; }.live-right { width: 100%; justify-content: space-between; padding: 10px 0 0 53px; border-top: 1px solid var(--line); }.live-divider { height: 28px; }.metrics-grid { gap: 8px; }.metric-card { min-height: 116px; padding: 11px 10px 9px; }.metric-label { font-size: 7px; letter-spacing: .4px; }.metric-icon { width: 22px; height: 22px; }.metric-value-row { gap: 5px; margin-top: 8px; }.metric-value-row > strong { font-size: 18px; }.change { padding: 3px 4px; font-size: 7px; }.metric-foot { display: block; font-size: 8px; line-height: 1.4; }.metric-foot span + span { display: none; }.panel { padding: 14px 12px; }.visitors-panel { padding-right: 0; padding-left: 0; }.visitors-panel > .panel-header { padding-right: 12px; padding-left: 12px; }.table-footnote { align-items: flex-start; padding-right: 12px; padding-left: 12px; line-height: 1.45; }.visitor-table { min-width: 560px; }.visitor-table th:first-child, .visitor-table td:first-child { padding-left: 12px; }.panel h2 { font-size: 11px; }.chart-wrap { height: 139px; }.x-axis { font-size: 7px; }.source-bars { column-gap: 12px; }.source-meta { font-size: 8px; }.modal { padding: 21px 20px 19px; }.modal h2 { font-size: 18px; }.modal-intro { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 520px) {
  .breadcrumb, .demo-badge, .auth-button { display: none; }
  .topbar { justify-content: flex-end; }
  .topbar-actions { margin-left: auto; }
  #install-app[hidden] { display: none; }
  #install-app { width: 32px; height: 32px; padding: 0; font-size: 0; }
  #install-app::before { content: "↓"; font-size: 19px; font-weight: 700; }
}