:root { color-scheme: light; --bg-start:#efe3d2; --bg-end:#e6d6c1; --bg-glow-primary:rgba(187,90,60,.16); --bg-glow-accent:rgba(53,109,99,.14); --panel:rgba(255,249,241,.94); --panel-soft:rgba(255,255,255,.52); --line:rgba(58,40,27,.12); --text:#25170f; --muted:#7d6759; --primary:#bb5a3c; --primary-strong:#9f4428; --primary-soft:rgba(187,90,60,.14); --accent:#356d63; --accent-soft:rgba(53,109,99,.14); --danger:#b64238; --danger-soft:rgba(182,66,56,.14); --shadow:0 18px 40px rgba(90,56,35,.14); --button-muted-bg:rgba(37,23,15,.06); --empty-bg:rgba(255,255,255,.36); --status-bg:rgba(255,255,255,.45); --nav-bg:rgba(255,248,239,.94); --nav-line:rgba(58,40,27,.08); --overlay-bg:rgba(36,22,14,.28); --toast-bg:rgba(255,250,244,.96); --toast-line:rgba(58,40,27,.12); --toast-shadow:0 18px 34px rgba(90,56,35,.18); --card:var(--panel); --soft:var(--panel-soft); --bg:var(--bg-start); --ok:#16a34a; --bad:var(--danger); }
:root[data-theme-mode="brown"] { color-scheme: dark; --bg-start:#140f0d; --bg-end:#201613; --bg-glow-primary:rgba(255,128,85,.13); --bg-glow-accent:rgba(113,196,180,.1); --panel:rgba(36,25,20,.92); --panel-soft:rgba(255,255,255,.04); --line:rgba(255,236,216,.08); --text:#f6ede3; --muted:#baa89a; --primary:#ff8d63; --primary-strong:#ff7446; --primary-soft:rgba(255,141,99,.14); --accent:#7fd4c1; --accent-soft:rgba(127,212,193,.14); --danger:#ff887e; --danger-soft:rgba(255,136,126,.14); --shadow:0 22px 44px rgba(0,0,0,.34); --button-muted-bg:rgba(255,255,255,.06); --empty-bg:rgba(255,255,255,.03); --status-bg:rgba(255,255,255,.05); --nav-bg:rgba(29,20,16,.94); --nav-line:rgba(255,255,255,.08); --overlay-bg:rgba(7,6,8,.54); --toast-bg:rgba(41,28,22,.96); --toast-line:rgba(255,255,255,.07); --toast-shadow:0 18px 34px rgba(0,0,0,.34); --card:var(--panel); --soft:var(--panel-soft); --bg:var(--bg-start); --bad:var(--danger); }
:root[data-theme-mode="dark"] { color-scheme: dark; --bg-start:#0d1117; --bg-end:#151b23; --bg-glow-primary:rgba(88,166,255,.12); --bg-glow-accent:rgba(63,185,167,.10); --panel:rgba(22,27,34,.94); --panel-soft:rgba(255,255,255,.045); --line:rgba(210,225,245,.10); --text:#eef4ff; --muted:#9ba8b8; --primary:#58a6ff; --primary-strong:#7db7ff; --primary-soft:rgba(88,166,255,.15); --accent:#3fb9a7; --accent-soft:rgba(63,185,167,.14); --danger:#ff7b72; --danger-soft:rgba(255,123,114,.14); --shadow:0 22px 44px rgba(0,0,0,.38); --button-muted-bg:rgba(255,255,255,.06); --empty-bg:rgba(255,255,255,.035); --status-bg:rgba(255,255,255,.055); --nav-bg:rgba(18,23,31,.94); --nav-line:rgba(210,225,245,.10); --overlay-bg:rgba(5,8,12,.58); --toast-bg:rgba(22,27,34,.96); --toast-line:rgba(210,225,245,.10); --toast-shadow:0 18px 34px rgba(0,0,0,.36); --card:var(--panel); --soft:var(--panel-soft); --bg:var(--bg-start); --bad:var(--danger); }
:root[data-theme-mode="plum"] { color-scheme: dark; --bg-start:#17131f; --bg-end:#241a2d; --bg-glow-primary:rgba(184,126,230,.12); --bg-glow-accent:rgba(240,124,168,.10); --panel:rgba(33,26,42,.94); --panel-soft:rgba(255,255,255,.045); --line:rgba(238,222,255,.10); --text:#fbf7ff; --muted:#b8a9c5; --primary:#b87ee6; --primary-strong:#c99cf0; --primary-soft:rgba(184,126,230,.15); --accent:#f07ca8; --accent-soft:rgba(240,124,168,.13); --danger:#ff877d; --danger-soft:rgba(255,135,125,.14); --shadow:0 22px 44px rgba(0,0,0,.38); --button-muted-bg:rgba(255,255,255,.06); --empty-bg:rgba(255,255,255,.035); --status-bg:rgba(255,255,255,.055); --nav-bg:rgba(27,21,36,.94); --nav-line:rgba(238,222,255,.10); --overlay-bg:rgba(8,6,12,.58); --toast-bg:rgba(33,26,42,.96); --toast-line:rgba(238,222,255,.10); --toast-shadow:0 18px 34px rgba(0,0,0,.36); --card:var(--panel); --soft:var(--panel-soft); --bg:var(--bg-start); --bad:var(--danger); }
:root[data-theme-mode="black"] { color-scheme: dark; --bg-start:#07080b; --bg-end:#101218; --bg-glow-primary:rgba(124,146,180,.10); --bg-glow-accent:rgba(82,104,142,.08); --panel:rgba(17,19,26,.95); --panel-soft:rgba(255,255,255,.04); --line:rgba(225,232,245,.09); --text:#f3f6fb; --muted:#9aa4b2; --primary:#a8b3c7; --primary-strong:#c2ccdc; --primary-soft:rgba(168,179,199,.13); --accent:#7c8fb0; --accent-soft:rgba(124,143,176,.13); --danger:#ff7b72; --danger-soft:rgba(255,123,114,.14); --shadow:0 22px 44px rgba(0,0,0,.44); --button-muted-bg:rgba(255,255,255,.055); --empty-bg:rgba(255,255,255,.03); --status-bg:rgba(255,255,255,.05); --nav-bg:rgba(12,14,20,.95); --nav-line:rgba(225,232,245,.09); --overlay-bg:rgba(0,0,0,.62); --toast-bg:rgba(17,19,26,.96); --toast-line:rgba(225,232,245,.09); --toast-shadow:0 18px 34px rgba(0,0,0,.42); --card:var(--panel); --soft:var(--panel-soft); --bg:var(--bg-start); --bad:var(--danger); }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
html, body { max-width:100%; overflow-x:hidden; }
body { margin:0; font-family:Manrope,Arial,sans-serif; background:radial-gradient(circle at top left, var(--bg-glow-primary), transparent 34%), radial-gradient(circle at top right, var(--bg-glow-accent), transparent 28%), linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%); color:var(--text); transition:background .35s ease,color .35s ease; }
body.has-overlay { overflow:hidden; }
.topbar { position:fixed; top:0; left:0; right:0; z-index:40; width:100%; background:transparent; backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); transition:backdrop-filter .28s ease,-webkit-backdrop-filter .28s ease; }
.topbar::before { content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel) 74%, transparent)); transition:opacity .28s ease; }
.topbar.is-scrolled { backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.topbar.is-scrolled::before { opacity:1; }
.topbar__inner { max-width:420px; min-width:0; margin:0 auto; padding:16px 16px 10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar-actions { display:flex; align-items:center; gap:10px; min-width:0; flex-shrink:1; }
.brand-label { display:inline-flex; align-items:center; min-width:0; flex-shrink:1; padding:7px 11px; border-radius:999px; background:var(--primary-soft); border:1px solid color-mix(in srgb, var(--primary) 20%, transparent); color:var(--primary); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shell { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:76px 0 48px; }
.analytics-controls { display:grid; grid-template-columns:minmax(0, 1fr) minmax(360px, 520px); align-items:flex-start; gap:16px; margin-bottom:12px; }
h1 { margin:0; font-family:Unbounded,Manrope,sans-serif; font-size:32px; line-height:1.1; letter-spacing:0; }
.lead { margin:8px 0 0; color:var(--muted); }
.controls { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; align-items:center; min-width:0; width:100%; }
input, select, button { height:40px; max-width:100%; min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--text); padding:0 12px; font:inherit; }
button { background:var(--primary); color:#fff; border-color:var(--primary); cursor:pointer; font-weight:700; }
a { color:inherit; text-decoration:none; }
.copy-button, .ghost-button, .controls button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:16px; padding:0 14px; font:inherit; font-size:14px; font-weight:800; cursor:pointer; transition:transform .2s ease, opacity .2s ease, background .2s ease; }
.copy-button, .controls button { border:0; background:linear-gradient(180deg, var(--primary) 0%, var(--primary-strong) 100%); color:#fff; box-shadow:0 10px 24px color-mix(in srgb, var(--primary) 24%, transparent); }
.controls button { box-shadow:none; }
.ghost-button { border:1px solid var(--line); background:var(--soft); color:var(--text); }
.copy-button:hover, .ghost-button:hover, .controls button:hover { transform:translateY(-1px); }
.copy-button:active, .ghost-button:active, .controls button:active { transform:translateY(1px); }
.copy-button:disabled, .ghost-button:disabled, .controls button:disabled { opacity:.6; cursor:default; transform:none; }
.controls #loadButton { grid-column:1 / -1; width:100%; }
.refresh-button { position:relative; flex-shrink:0; border:0; border-radius:999px; padding:10px 14px; background:var(--button-muted-bg); color:var(--text); font-size:13px; font-weight:800; cursor:pointer; transition:opacity .2s ease, transform .2s ease, background .2s ease; }
.refresh-button:hover { transform:translateY(-1px); }
.refresh-button:disabled,.refresh-button.is-loading { opacity:.6; cursor:default; transform:none; }
.icon-button,.theme-toggle { position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex-shrink:0; border:1px solid var(--line); border-radius:999px; padding:0; background:var(--button-muted-bg); color:var(--text); cursor:pointer; transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.theme-switcher { position:relative; flex-shrink:0; }
.icon-button:hover,.theme-toggle:hover { transform:translateY(-1px); background:var(--panel-soft); }
.icon-button:active,.theme-toggle:active { transform:translateY(1px); }
.icon-button__icon { width:18px; height:18px; display:block; margin:auto; }
.notification-dot { position:absolute; top:9px; right:9px; width:9px; height:9px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 2px var(--panel); }
.theme-swatch { width:16px; height:16px; flex-shrink:0; border-radius:50%; background:var(--primary); box-shadow:0 0 0 1px var(--line); }
.theme-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:40; min-width:142px; display:flex; flex-direction:column; gap:4px; padding:6px; border:1px solid var(--line); border-radius:16px; background:var(--toast-bg); box-shadow:var(--toast-shadow); transform-origin:top right; animation:theme-menu-in .16s ease; }
.theme-menu__option { width:100%; display:flex; align-items:center; gap:9px; position:relative; border:0; border-radius:12px; padding:9px 30px 9px 10px; background:transparent; color:var(--text); font-size:13px; font-weight:800; text-align:left; cursor:pointer; }
.theme-menu__option:hover,.theme-menu__option.is-active { background:var(--button-muted-bg); }
.theme-menu__option.is-active { color:var(--primary); }
.theme-menu__option.is-active::after { content:""; position:absolute; right:11px; width:7px; height:11px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-1px); }
.theme-toggle__swatch { width:20px; height:20px; box-shadow:0 0 0 1px var(--line), inset 0 0 0 4px color-mix(in srgb, var(--panel) 72%, transparent); }
.theme-swatch--light { background:#bb5a3c; }
.theme-swatch--dark { background:#58a6ff; }
.theme-swatch--brown { background:#ff8d63; }
.theme-swatch--black { background:#a8b3c7; }
.theme-swatch--plum { background:#b87ee6; }
@keyframes theme-menu-in { from { opacity:0; transform:translateY(-4px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.tabs { display:flex; gap:8px; margin:0 0 12px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs button { min-height:38px; flex:0 0 auto; border:1px solid var(--line); border-radius:999px; background:var(--soft); color:var(--muted); padding:0 13px; font-size:13px; font-weight:800; box-shadow:none; }
.tabs button.is-active { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.tab-panel { display:none; }
.tab-panel.is-active { display:block; }
.grid { display:grid; gap:12px; min-width:0; }
.user-stats { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-bottom:8px; }
.kpi { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-bottom:12px; }
.two { grid-template-columns:1.3fr .7fr; }
.three { grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:12px; }
.card { min-width:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; box-shadow:0 12px 30px rgba(15,23,42,.05); }
.card h2 { margin:0 0 12px; font-family:Unbounded,Manrope,sans-serif; font-size:16px; letter-spacing:0; }
.card-note { margin:-4px 0 12px; color:var(--muted); font-size:13px; line-height:1.45; }
.metric { padding:11px 12px; }
.metric span { display:flex; align-items:flex-start; min-height:0; color:var(--muted); font-family:Unbounded,Manrope,sans-serif; font-size:10px; line-height:1.35; letter-spacing:0; }
.metric span em { font:inherit; font-style:normal; overflow-wrap:anywhere; }
.metric strong { display:block; margin-top:6px; font-family:Unbounded,Manrope,sans-serif; font-size:22px; line-height:1.05; letter-spacing:0; }
.metric--button { width:100%; height:auto; display:block; text-align:left; color:var(--text); border-color:var(--line); background:var(--card); box-shadow:0 12px 30px rgba(15,23,42,.05); }
.metric--button:hover { transform:translateY(-1px); }
.funnel { display:grid; gap:10px; }
.funnel-tabs { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; margin:0 0 12px; padding:4px; border:1px solid var(--line); border-radius:16px; background:var(--soft); }
.funnel-tabs button { min-height:38px; border:0; border-radius:12px; background:transparent; color:var(--muted); box-shadow:none; font-size:13px; font-weight:900; }
.funnel-tabs button.is-active { background:var(--card); color:var(--text); }
.funnel-tab-panel { display:none; }
.funnel-tab-panel.is-active { display:block; }
.funnel-row { display:grid; gap:10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--soft); font-size:13px; }
.funnel-row__head { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; align-items:center; }
.funnel-row__step { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:var(--card); color:var(--muted); font-family:Unbounded,Manrope,sans-serif; font-size:11px; font-weight:700; }
.funnel-row__label { min-width:0; overflow-wrap:anywhere; line-height:1.25; }
.funnel-row__value { text-align:right; white-space:nowrap; font-family:Unbounded,Manrope,sans-serif; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.funnel-row__meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; color:var(--muted); font-size:12px; }
.funnel-row__meta span { min-width:0; }
.funnel-row__meta b { color:var(--text); font-weight:800; font-variant-numeric:tabular-nums; }
.bar { height:12px; background:var(--soft); border-radius:999px; overflow:hidden; }
.funnel-row .bar { background:var(--card); }
.bar i { display:block; height:100%; background:var(--accent); border-radius:inherit; }
.list { display:grid; gap:9px; }
.list-row { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; font-size:13px; }
.mini-chart { position:relative; min-height:230px; }
.mini-chart--large { min-height:300px; }
.mini-chart canvas { width:100%; min-height:220px; }
.source-table { overflow-x:auto; }
.source-table table { min-width:620px; }
.source-table td, .source-table th { white-space:nowrap; }
.source-table td:first-child, .source-table th:first-child { min-width:160px; white-space:normal; }
.muted { color:var(--muted); }
.chart-wrap { position:relative; min-height:310px; }
.chart-wrap canvas { width:100%; min-height:300px; }
.chart-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.chart-head h2 { margin:0; }
.chart-mode { display:inline-grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--soft); }
.chart-mode button { min-height:32px; border:0; border-radius:999px; background:transparent; color:var(--muted); padding:0 11px; font-size:12px; font-weight:800; box-shadow:none; }
.chart-mode button.is-active { background:var(--card); color:var(--text); }
.c-open { background:#111827; } .c-purchase { background:#7c3aed; } .c-click { background:#db2777; } .c-trial { background:#2563eb; } .c-roulette { background:#0891b2; } .c-ref { background:#65a30d; } .c-devices { background:#64748b; } .c-created { background:#f59e0b; } .c-paid { background:#16a34a; } .c-connected { background:#059669; }
html[data-theme-mode="dark"] .c-open, html[data-theme-mode="black"] .c-open, html[data-theme-mode="plum"] .c-open { background:#f5f5f6; }
.legend { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.legend button { min-height:34px; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; background:var(--soft); color:var(--text); padding:0 11px; font-size:12px; font-weight:800; box-shadow:none; }
.legend button:hover { transform:translateY(-1px); }
.legend button.is-disabled { opacity:.42; }
.legend button.is-disabled .legend-dot { filter:grayscale(1); }
.legend-dot { width:9px; height:9px; border-radius:999px; flex:0 0 auto; }
.overlay-loader { position:fixed; inset:0; z-index:80; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease,visibility .25s ease; }
.overlay-loader.is-visible { opacity:1; visibility:visible; pointer-events:auto; }
.overlay-loader__backdrop { position:absolute; inset:0; background:var(--overlay-bg); backdrop-filter:blur(3px); }
.overlay-loader__panel { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); min-width:168px; padding:18px 18px 16px; border-radius:22px; border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); text-align:center; }
.loader-spinner { width:42px; height:42px; margin:0 auto 12px; border-radius:50%; border:3px solid color-mix(in srgb, var(--primary) 18%, transparent); border-top-color:var(--primary); animation:spin .8s linear infinite; }
.overlay-loader__text { margin:0; color:var(--muted); font-size:13px; font-weight:700; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast-stack { position:fixed; z-index:50; top:18px; left:50%; display:grid; gap:10px; width:min(420px, calc(100% - 24px)); transform:translateX(-50%); pointer-events:none; }
.toast { display:flex; align-items:center; gap:10px; padding:14px 16px; border:1px solid var(--toast-line); border-radius:18px; background:var(--toast-bg); color:var(--text); box-shadow:var(--toast-shadow); opacity:0; transform:translateY(-10px) scale(.98); transition:opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity:1; transform:translateY(0) scale(1); }
.toast.is-removing { opacity:0; transform:translateY(-8px) scale(.98); }
.toast__dot { width:10px; height:10px; border-radius:999px; background:var(--accent); flex-shrink:0; }
.toast--success .toast__dot { background:var(--ok); }
.toast--error .toast__dot { background:var(--bad); }
.toast__text { font-size:14px; font-weight:700; line-height:1.4; }
.user-events { display:grid; gap:10px; }
.user-group { border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden; }
.user-group summary { cursor:pointer; list-style:none; display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:13px 14px; }
.user-group summary::-webkit-details-marker { display:none; }
.user-group__name { font-weight:800; }
.user-group__meta { color:var(--muted); font-size:12px; margin-top:2px; }
.user-group__badge { padding:5px 9px; border-radius:999px; background:var(--soft); font-size:12px; color:var(--muted); white-space:nowrap; }
.event-list { border-top:1px solid var(--line); overflow:hidden; }
.event-item { display:grid; grid-template-columns:150px 1fr 180px; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line); font-size:12px; }
.event-item:last-child { border-bottom:0; }
.event-title { font-weight:800; }
.pager { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:12px; }
.pager button { height:34px; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th, td { padding:8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--muted); font-weight:700; }
pre { margin:0; white-space:pre-wrap; word-break:break-word; color:var(--muted); max-height:80px; overflow:auto; }
.error { color:var(--bad); margin-top:10px; }
.modal-layer { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px; }
.modal-backdrop { position:absolute; inset:0; background:var(--overlay-bg); backdrop-filter:blur(3px); }
.modal-card { position:relative; z-index:1; width:min(760px, 100%); max-height:min(760px, calc(100vh - 40px)); overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--panel); box-shadow:var(--shadow); }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 18px 12px; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:4px 0 0; font-family:Unbounded,Manrope,sans-serif; font-size:18px; line-height:1.2; }
.card-label { margin:0; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.modal-close { width:40px; height:40px; position:relative; flex:0 0 auto; border:1px solid var(--line); border-radius:14px; background:var(--button-muted-bg); box-shadow:none; }
.modal-close span { position:absolute; left:11px; right:11px; top:19px; height:2px; border-radius:999px; background:var(--text); }
.modal-close span:first-child { transform:rotate(45deg); }
.modal-close span:last-child { transform:rotate(-45deg); }
.analytics-details__body { max-height:calc(100vh - 160px); overflow:auto; padding:14px 18px 18px; }
.details-list { display:grid; gap:10px; }
.details-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--panel-soft); }
.details-item > div:first-child { min-width:0; }
.details-item__name { font-weight:900; }
.details-item__meta { margin-top:4px; color:var(--muted); font-size:12px; }
.details-item__badges { display:flex; justify-content:flex-end; align-items:center; gap:6px; flex-wrap:wrap; }
.details-item__time { display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 9px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:800; white-space:nowrap; }
.funnel-help { margin-bottom:12px; }
.funnel-help p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
@media (max-width: 1040px) {
    .kpi { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .user-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .two,.three { grid-template-columns:1fr; }
}
@media (max-width: 860px) {
    .shell { width:min(100% - 20px, 1180px); padding:76px 0 36px; }
    .analytics-controls { grid-template-columns:1fr; }
    h1 { font-size:26px; }
    .lead { font-size:13px; }
    .controls { grid-template-columns:repeat(3, minmax(0, 1fr)); justify-content:stretch; margin-top:14px; }
    .controls .ghost-button,.controls input,.controls select,.controls button { width:100%; min-width:0; }
    .card { padding:13px; border-radius:9px; }
    .metric { padding:10px; }
    .metric span { min-height:auto; font-size:10px; }
    .chart-wrap { min-height:260px; }
    .chart-wrap canvas { min-height:250px; }
    .mini-chart, .mini-chart--large { min-height:240px; }
    .mini-chart canvas { min-height:230px; }
    .chart-head { align-items:flex-start; flex-direction:column; }
    .funnel-row { padding:11px; }
    .funnel-row__head { grid-template-columns:auto minmax(0, 1fr); }
    .funnel-row__value { grid-column:2; justify-self:start; font-size:15px; }
    .funnel-row__meta { grid-template-columns:1fr; gap:4px; }
    .event-item { grid-template-columns:1fr; }
    .user-group summary { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
    .kpi { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .controls { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .copy-button, .ghost-button { width:100%; }
    .metric strong { font-size:22px; }
    .list-row { grid-template-columns:1fr auto; }
    .list-row .muted { grid-column:1 / -1; }
    .toast-stack { width:calc(100% - 18px); }
}