/* Inter (SIL OFL 1.1, see assets/fonts/Inter-OFL.txt) — self-hosted, no third-party requests */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Tacilytics — calm, professional dark theme (14.10.2026). One accent, no glow, numbers first. */
:root {
  --accent: #5b8def;
  --accent-2: #34d399;
  --accent-soft: rgba(91, 141, 239, 0.14);
  --accent-line: rgba(91, 141, 239, 0.45);
  --green: #34d399;
  --red: #f87171;
  --yellow: #fbbf24;
  --bg: #0f1115;
  --bg2: #14161c;
  --surface: #171a21;
  --surface-2: #1d2129;
  --line: #262b35;
  --line-strong: #323946;
  --text: #e6e8ec;
  --text-dim: #8b93a3;
  --text-faint: #5f6675;
  /* legacy names, mapped so older rules keep rendering in the new palette */
  --pink: var(--accent); --purple: var(--accent); --violet: var(--accent); --magenta: var(--accent); --cyan: #8fb3f5;
  --glass: var(--surface); --glass-border: var(--line);
  --glow-pink: transparent; --glow-purple: transparent;
  --grad: var(--accent);
  --grad-text: none;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  /* chart colours read by app.js */
  --chart-visitors: #5b8def;
  --chart-pageviews: #8b93a3;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  background: var(--bg); color: var(--text); line-height: 1.5; overflow-x: hidden; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.container { max-width: 1140px; margin: 0 auto; padding: 22px; }
.grad-text { color: var(--text); }

/* ── Header ── */
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; }

.brand h1 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.1; }
.brand .subtitle { font-size: 0.74rem; color: var(--text-dim); margin-top: 2px; }
.header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.btn { border: 1px solid var(--accent); cursor: pointer; font-weight: 600; border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.84rem; font-family: inherit; transition: background .15s, border-color .15s; color: #fff; background: var(--accent); }
.btn:hover { background: #4a7de0; border-color: #4a7de0; }
.btn.ghost { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn.danger:hover { border-color: var(--red); color: var(--red); background: rgba(248,113,113,.06); }

select, input { background: var(--surface); border: 1px solid var(--line); color: var(--text); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.84rem; font-family: inherit; outline: none; transition: border .15s; }
select:focus, input:focus { border-color: var(--accent-line); }
.realtime { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-dim); padding: 6px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.realtime .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── toolbar ── */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.periods { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.periods button { background: transparent; border: none; color: var(--text-dim); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 550; font-family: inherit; transition: background .15s, color .15s; }
.periods button.active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.periods button:hover:not(.active) { color: var(--text); }

/* ── toolbar right (range + actions) ── */
.toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.range { display: inline-flex; align-items: center; gap: 6px; }
.range input[type=date] { padding: 8px 10px; font-size: 0.8rem; color-scheme: dark; }
.range .arrow { color: var(--text-dim); }

/* ── segmentation filter chips ── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.filters .flabel { font-size: 0.74rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 550; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); }
.chip .k { color: var(--text-dim); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.chip button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; transition: color .2s; }
.chip button:hover { color: var(--pink); }
.chip.clear { background: transparent; border-color: transparent; color: var(--text-dim); cursor: pointer; }
.chip.clear:hover { color: var(--pink); }

/* ── panel header tabs ── */
.panel h3 .tabs { margin-left: auto; display: inline-flex; gap: 2px; background: var(--bg2); border: 1px solid var(--line); border-radius: 7px; padding: 2px; }
.panel h3 .tabs button { background: transparent; border: none; color: var(--text-dim); padding: 3px 9px; border-radius: 5px; cursor: pointer; font-size: 0.72rem; font-weight: 550; font-family: inherit; transition: all .15s; }
.panel h3 .tabs button.active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ── glass cards ── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden; }
.card:hover { border-color: var(--line-strong); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.stat .label { font-size: 0.74rem; color: var(--text-dim); font-weight: 550; margin-bottom: 6px; }
.stat .value { font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.trend { font-size: 0.74rem; font-weight: 700; margin-top: 6px; display: inline-block; }
.trend.up { color: var(--green); }
.trend.down { color: var(--red); }

/* ── chart ── */
.chart-card { padding: 22px; margin-bottom: 18px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.chart-head strong { font-size: 0.92rem; font-weight: 600; }
.chart-head .legend { display: flex; gap: 14px; font-size: 0.78rem; color: var(--text-dim); }
.chart-head .legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-head .legend .leg { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 3px 8px; border-radius: 8px; font: inherit; color: var(--text-dim); cursor: pointer; transition: background .15s, opacity .15s; }
.chart-head .legend .leg:hover { background: rgba(255,255,255,.06); }
.chart-head .legend .leg[aria-pressed="false"] { opacity: .38; text-decoration: line-through; }
.chart-head .legend .leg[aria-pressed="false"] .swatch { background: var(--text-dim) !important; }
.swatch { width: 10px; height: 10px; border-radius: 3px; }
#chart { width: 100%; height: 220px; display: block; }
.tip { position: fixed; pointer-events: none; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; font-size: 0.78rem; opacity: 0; transition: opacity .12s; z-index: 50; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.4); }

/* ── panels ── */
.panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.panel h3 { font-size: 0.86rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.panel h3 .em { font-size: .95rem; filter: grayscale(1); opacity: .7; }
.bars { display: flex; flex-direction: column; gap: 3px; }
.bar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 6px; font-size: 0.84rem; overflow: hidden; }
.bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); border-radius: 6px; z-index: 0; transition: width .4s cubic-bezier(.4,0,.2,1); }
.bar .name { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 76%; }
.bar .val { position: relative; z-index: 1; color: var(--text-dim); font-variant-numeric: tabular-nums; font-weight: 600; }
.bar:hover .fill { background: rgba(91,141,239,.22); }
.bar.clickable { cursor: pointer; }
.bar.clickable:hover { box-shadow: inset 0 0 0 1px var(--accent-line); }
.bar .cr { position: relative; z-index: 1; color: var(--accent); font-size: 0.74rem; font-weight: 600; margin-left: 8px; font-variant-numeric: tabular-nums; }
.empty { color: var(--text-dim); font-size: 0.85rem; text-align: center; padding: 26px 0; }

/* ── modals ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(5,6,9,.66); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn .2s ease; padding: 20px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 32px 30px; width: 100%; max-width: 420px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.5); animation: slideUp .25s cubic-bezier(.16,1,.3,1); }

@keyframes slideUp { from { transform: translateY(20px) scale(.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.modal .logo { width: 48px; height: 48px; margin: 0 auto 14px; display: block; border-radius: 12px; }
.modal .logo.em { font-size: 2rem; width: auto; height: auto; filter: grayscale(1); opacity: .75; }
.modal h2 { font-size: 1.2rem; font-weight: 650; margin-bottom: 6px; }
.modal p { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 22px; }
.modal input { width: 100%; margin-bottom: 14px; text-align: center; }
.modal .btn { width: 100%; padding: 13px; }
.err { color: var(--red); font-size: 0.82rem; min-height: 18px; margin-bottom: 8px; }
.snippet { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace; font-size: 0.76rem; color: #c9d4e8; text-align: left; word-break: break-all; margin: 12px 0; line-height: 1.55; }
/* ── live visitors modal ── */
.modal.live { max-width: 600px; text-align: left; }
.live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live-head h2 { margin: 0; }
.live-sub { color: var(--text-dim); font-size: 0.82rem; margin: 6px 0 16px; }
#live-spark { width: 100%; height: 70px; display: block; margin-bottom: 18px; }
.feed-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 8px; }
.feed { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.feed-row { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 10px; transition: background .2s; }
.feed-row:hover { background: var(--surface-2); }
.feed-row .fl { font-size: 1.1rem; flex-shrink: 0; }
.feed-row .fw { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.feed-row .path { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row .goal { font-weight: 600; font-size: 0.86rem; color: var(--accent); }
.feed-row .fm { font-size: 0.74rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row .ft { font-size: 0.74rem; color: var(--text-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.feed::-webkit-scrollbar { width: 6px; }
.feed::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.hide { display: none !important; }

@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } .panels { grid-template-columns: 1fr; } }

/* ── funnels ── */
.funnels { display: flex; flex-direction: column; gap: 18px; }
.funnel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.funnel-del { background: none; border: none; color: var(--muted, #888); cursor: pointer; font-size: 1.1rem; }
.funnel-del:hover { color: #f87171; }
.funnel-step { display: grid; grid-template-columns: 200px 1fr; gap: 10px; align-items: center; margin: 4px 0; }
.funnel-label { font-size: .82rem; color: var(--muted, #aaa); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funnel-bar-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.funnel-bar { height: 16px; border-radius: 4px; background: var(--accent); min-width: 3px; transition: width .4s; }
.funnel-nums { font-size: .78rem; color: var(--muted, #aaa); white-space: nowrap; }
.funnel-nums .drop { color: #f87171; }
.step-row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; margin: 6px 0; }
@media (max-width: 640px) { .funnel-step { grid-template-columns: 1fr; gap: 2px; } }

/* ── 13.10.2026: comparison bar, commerce cards, shop insights ── */
.compare { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 12px 18px; margin: 0 0 16px; font-size: .86rem; }
.compare .k { color: var(--text-dim); margin-right: 8px; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
.compare .up { color: var(--green); font-weight: 600; }
.compare .down { color: var(--red); font-weight: 600; }
.commerce { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0 0 16px; }
.hint { font-size: .74rem; font-weight: 400; margin-left: 6px; }
p.hint { margin: -4px 0 8px; }
.pay-note { margin: 10px 2px 0; font-size: .78rem; color: var(--text-dim); }
.muted { color: var(--text-dim); }
.yoy { display: block; margin-top: 4px; font-size: .72rem; color: var(--text-dim); }
.yoy.up { color: var(--green); } .yoy.down { color: var(--red); }

/* embed dialog with website / app tabs (13.10.2026) */
.modal.modal-wide { max-width: 620px; max-height: calc(100vh - 40px); overflow-y: auto; }
.snip-tabs { display: flex; justify-content: center; gap: 6px; margin: 0 0 14px; }
.snip-step { text-align: left; font-size: .8rem; margin: 6px 0 0 !important; }
.snip-hint { text-align: left; font-size: .78rem; margin: -2px 0 12px !important; }
.snip-hint code, .snip-step code { color: var(--cyan); }
.snip-hint a { color: var(--cyan); }
.modal-wide .snippet { white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; }
.snip-tabs { display: inline-flex !important; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px !important; }
.snip-tabs button { background: transparent; border: none; color: var(--text-dim); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 550; font-family: inherit; transition: all .15s; }
.snip-tabs button.active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* 14.10.2026 professional theme: layout polish */
.container { max-width: 1200px; padding: 0 24px 48px; }
.stats { gap: 12px; }
.panels { gap: 12px; }
.chart-card { padding: 18px 20px; }
.trend { font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel-label, .funnel-nums { color: var(--text-dim); }
.empty { color: var(--text-faint); }
.footer-note { margin-top: 28px; font-size: .74rem; color: var(--text-faint); text-align: center; }
.footer-note a { color: var(--text-dim); }

/* ── 14.10.2026 v2: modern polish (Fabian: „hübscher, moderner“) ── */
:root {
  --accent: #6d8cff;
  --accent-2: #a78bfa;
  --accent-soft: rgba(109, 140, 255, 0.13);
  --accent-line: rgba(109, 140, 255, 0.42);
  --chart-visitors: #6d8cff;
  --chart-pageviews: #a78bfa;
  --bg: #0b0d12;
  --surface: rgba(23, 26, 34, 0.72);
  --surface-2: #1e222c;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.12);
  --radius: 16px;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -12px rgba(0,0,0,.55);
}
body {
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(109,140,255,.10), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(167,139,250,.07), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  font-size: 14.5px; letter-spacing: -0.006em;
}
/* sticky glass header */
header {
  position: sticky; top: 0; z-index: 40; margin: 0 -24px 22px; padding: 14px 24px;
  background: rgba(11,13,18,.72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand .logo { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 0 1px var(--line-strong), 0 6px 20px -6px rgba(109,140,255,.55); }
.brand h1 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; }
/* cards: soft glass, gentle lift */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); transition: border-color .2s, transform .2s, box-shadow .2s; }
.card:hover { border-color: var(--line-strong); }
.stats .card:hover, .commerce .card:hover { transform: translateY(-1px); box-shadow: var(--shadow), 0 14px 34px -18px rgba(109,140,255,.35); }
/* KPI cards: big tabular numbers, trend as pill, mini sparkline */
.stat { padding: 18px 20px 14px; min-height: 124px; }
.stat .label { font-size: .76rem; font-weight: 500; color: var(--text-dim); letter-spacing: 0; text-transform: none; }
.stat .value { font-size: 2rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.trend { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; margin-top: 8px; }
.trend.up { color: #4ade80; background: rgba(74,222,128,.10); }
.trend.down { color: #fb7185; background: rgba(251,113,133,.10); }
.trend:empty { display: none; }
.spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 38px; pointer-events: none; opacity: .9; }
.stat > .label, .stat > .value, .stat > .trend, .stat > .yoy { position: relative; z-index: 1; }
/* first KPI gets a subtle accent edge */
.stats .stat:first-child { background: linear-gradient(160deg, rgba(109,140,255,.16), rgba(23,26,34,.72) 55%); border-color: rgba(109,140,255,.28); }
.commerce .stat:first-child { background: linear-gradient(160deg, rgba(74,222,128,.12), rgba(23,26,34,.72) 55%); border-color: rgba(74,222,128,.22); }
/* segmented controls */
.periods { background: rgba(255,255,255,.03); border-color: var(--line); border-radius: 12px; padding: 4px; }
.periods button { border-radius: 9px; padding: 7px 13px; }
.periods button.active { background: var(--surface-2); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 8px rgba(0,0,0,.35); }
.btn { border-radius: 10px; padding: 8px 14px; box-shadow: 0 6px 18px -8px rgba(109,140,255,.7); }
.btn:hover { background: #5b7cf5; border-color: #5b7cf5; }
.btn.ghost { box-shadow: none; background: rgba(255,255,255,.03); }
.btn.ghost:hover { background: rgba(255,255,255,.06); }
select, input { border-radius: 10px; background: rgba(255,255,255,.03); }
.realtime { background: rgba(74,222,128,.07); border-color: rgba(74,222,128,.2); color: #b8f5cd; }
.realtime .dot { box-shadow: 0 0 0 3px rgba(74,222,128,.18); }
/* chart card */
.chart-card { padding: 20px 22px 14px; }
.chart-head strong { font-size: .95rem; font-weight: 650; }
#chart { height: 240px; }
.chart-head .legend .leg { border-radius: 999px; padding: 4px 10px; }
.swatch { width: 8px; height: 8px; border-radius: 50%; }
/* panels */
.panel h3 { font-size: .9rem; font-weight: 650; letter-spacing: -.01em; }
.panel h3 .em { filter: none; opacity: .9; }
.bar { border-radius: 8px; padding: 8px 11px; }
.bar .fill { border-radius: 8px; background: linear-gradient(90deg, rgba(109,140,255,.20), rgba(167,139,250,.08)); }
.bar:hover .fill { background: linear-gradient(90deg, rgba(109,140,255,.30), rgba(167,139,250,.14)); }
.bar .val { color: var(--text); font-weight: 600; opacity: .85; }
.panel h3 .tabs { border-radius: 9px; background: rgba(255,255,255,.03); }
.panel h3 .tabs button { border-radius: 7px; }
/* modals */
.modal { background: rgba(23,26,34,.92); backdrop-filter: blur(18px); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px var(--line-strong); }
.modal-overlay { backdrop-filter: blur(6px); }
/* login screen gets a hero glow */
#login { background: radial-gradient(700px 420px at 50% 30%, rgba(109,140,255,.16), transparent 65%), rgba(6,7,10,.86); }
#login .modal .logo { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 10px 30px -8px rgba(109,140,255,.7); }
/* fade-in on load */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#dash > * { animation: rise .35s ease both; }
#dash > *:nth-child(2) { animation-delay: .04s; } #dash > *:nth-child(3) { animation-delay: .08s; } #dash > *:nth-child(4) { animation-delay: .12s; }
.chip { border-radius: 999px; }
@media (max-width: 760px) { header { margin: 0 -16px 18px; padding: 12px 16px; } .container { padding: 0 16px 40px; } .stat .value { font-size: 1.6rem; } }
.stats .stat { padding-bottom: 40px; min-height: 0; }
.commerce .stat { min-height: 0; }
.spark { height: 32px; opacity: .8; }
/* page paths read better in a tight mono with tabular feel */
#p-pages .bar .name, #p-404 .bar .name, .feed-row .path { font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; font-size: .8rem; letter-spacing: -.01em; }

/* ── 14.10.2026 v3: own colour (ink teal + coral), icons instead of emoji ── */
:root {
  --accent: #2dd4bf;          /* teal: primary */
  --accent-strong: #14b8a6;
  --accent-2: #ff7a5c;        /* coral: highlights, the "one dot" */
  --accent-soft: rgba(45, 212, 191, 0.12);
  --accent-line: rgba(45, 212, 191, 0.40);
  --chart-visitors: #2dd4bf;
  --chart-pageviews: #ff9f85;
  --bg: #071114;
  --surface: rgba(14, 28, 32, 0.72);
  --surface-2: #11252a;
  --line: rgba(180, 255, 240, 0.07);
  --line-strong: rgba(180, 255, 240, 0.13);
  --text: #e7f3f1;
  --text-dim: #8aa5a2;
  --text-faint: #5b7471;
  --cyan: #7ee8d8;
}
body {
  background:
    radial-gradient(1100px 560px at 8% -12%, rgba(45,212,191,.13), transparent 60%),
    radial-gradient(800px 460px at 104% -4%, rgba(255,122,92,.08), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
header { background: rgba(7,17,20,.74); }
.brand .logo { box-shadow: 0 0 0 1px var(--line-strong), 0 8px 22px -8px rgba(45,212,191,.6); }
.btn { background: var(--accent-strong); border-color: var(--accent-strong); color: #04211d; font-weight: 650; box-shadow: 0 6px 18px -8px rgba(45,212,191,.75); }
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost { color: var(--text); }
.stats .stat:first-child { background: linear-gradient(160deg, rgba(45,212,191,.16), rgba(14,28,32,.72) 55%); border-color: rgba(45,212,191,.28); }
.commerce .stat:first-child { background: linear-gradient(160deg, rgba(255,122,92,.14), rgba(14,28,32,.72) 55%); border-color: rgba(255,122,92,.26); }
.stats .card:hover, .commerce .card:hover { box-shadow: var(--shadow), 0 14px 34px -18px rgba(45,212,191,.35); }
.bar .fill { background: linear-gradient(90deg, rgba(45,212,191,.20), rgba(45,212,191,.05)); }
.bar:hover .fill { background: linear-gradient(90deg, rgba(45,212,191,.30), rgba(255,122,92,.10)); }
.bar .cr { color: var(--accent-2); }
.realtime { background: rgba(45,212,191,.08); border-color: rgba(45,212,191,.22); color: #b9f5ea; }
.realtime .dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(45,212,191,.2); }
.chip { background: var(--accent-soft); border-color: var(--accent-line); }
.trend.up { color: #5eead4; background: rgba(45,212,191,.12); }
.trend.down { color: #ff9f85; background: rgba(255,122,92,.12); }
.feed-row .goal { color: var(--accent-2); }
.funnel-bar { background: linear-gradient(90deg, var(--accent), #5eead4); }
#login { background: radial-gradient(700px 420px at 50% 30%, rgba(45,212,191,.18), transparent 65%), rgba(4,10,12,.88); }
#login .modal .logo { box-shadow: 0 12px 32px -8px rgba(45,212,191,.7); }
:focus-visible { outline-color: var(--accent); }
/* icons */
.ico { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; display: inline-block; }
.ico.ui { color: var(--text-dim); }
.ico.h { width: 17px; height: 17px; color: var(--accent); }
.ico.big { width: 30px; height: 30px; color: var(--accent); }
.ico.brand { width: 15px; height: 15px; }
.btn .ico { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: currentColor; }
.btn.ghost .ico { color: var(--text-dim); }
.snip-tabs button .ico { margin-right: 6px; width: 14px; height: 14px; vertical-align: -2px; }
.flag { width: 18px; height: 13.5px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.08); flex: 0 0 auto; }
.bar .name { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.bar .name .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .flag, .chip .ico { margin-right: 4px; }
.chip button .ico { width: 13px; height: 13px; margin: 0; }
.range .arrow .ico { width: 14px; height: 14px; }
.feed-row .fl { display: inline-flex; width: 20px; justify-content: center; }
.pay-note .ico { width: 14px; height: 14px; vertical-align: -2px; }
.modal .logo.em { filter: none; opacity: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }

#p-pages .bar .name .txt, #p-404 .bar .name .txt, .feed-row .path { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace; font-size: .78rem; font-weight: 400; color: #cfe3e0; }
#p-pages .bar .name, #p-404 .bar .name { font-family: inherit; }

/* ── header v4: floating card, exactly as wide as the content ── */
header {
  position: sticky; top: 12px; z-index: 40;
  margin: 14px 0 22px; padding: 12px 14px 12px 16px;
  border: 1px solid var(--line-strong); border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,40,44,.78), rgba(10,22,25,.78));
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(45,212,191,.04);
}
header::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(45,212,191,.45), rgba(255,122,92,.35), transparent); pointer-events: none; }
.brand { gap: 12px; }
.brand .logo { width: 36px; height: 36px; border-radius: 10px; }
.brand h1 { font-size: 1.12rem; }
.brand .subtitle { font-size: .76rem; color: var(--text-faint); margin-top: 1px; }
.header-right { gap: 8px; }
.header-right .realtime, .header-right select, .header-right .btn { height: 36px; border-radius: 10px; }
.header-right select { background-color: rgba(255,255,255,.03); border: 1px solid var(--line-strong); padding: 0 34px 0 12px; }
.header-right .btn.ghost { background: rgba(255,255,255,.03); border-color: var(--line-strong); }
.header-right .btn.ghost:hover { background: rgba(45,212,191,.08); border-color: var(--accent-line); }
.header-right .realtime { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; }
.realtime .dot { animation: taci-pulse 2.4s ease-in-out infinite; }
@keyframes taci-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(45,212,191,.18); } 50% { box-shadow: 0 0 0 6px rgba(45,212,191,.05); } }
@media (prefers-reduced-motion: reduce) { .realtime .dot { animation: none; } }
@media (max-width: 760px) { header { margin: 10px 0 18px; top: 8px; padding: 10px 12px; } .brand .subtitle { display: none; } }

/* native dropdown lists follow the dark theme (otherwise light text on a white popup) */
select { color-scheme: dark; }
select option { background: #0c1a1d; color: var(--text); }

/* ── settings: security + team (2.1) ───────────────────────────────────────── */
.modal.settings { text-align: left; max-width: 680px; }
.settings-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.settings-head h2 { margin: 0; }
.set-tabs { margin-left: auto; display: inline-flex; gap: 2px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.set-tabs button { background: transparent; border: none; color: var(--text-dim); padding: 6px 12px; border-radius: 7px; cursor: pointer; font: 550 0.8rem inherit; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.set-tabs button.active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.set-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; background: rgba(255,255,255,.02); }
.set-card h3 { font-size: 0.95rem; font-weight: 650; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.set-card p { margin-bottom: 12px; font-size: 0.84rem; }
.modal .set-card input, .modal .set-card select { text-align: left; margin-bottom: 0; }
.modal .set-card .btn { width: auto; padding: 9px 14px; }
.set-card > input { margin-bottom: 10px !important; display: block; }
.set-card > .btn { width: 100%; }
.set-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.set-inline input, .set-inline select { flex: 1 1 160px; min-width: 0; }
.set-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.86rem; }
.set-row:first-of-type { border-top: none; }
.set-row > span:first-child { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.team-row > span:first-child { display: block; }
.team-row select { width: auto; padding: 6px 8px; font-size: 0.8rem; }
.row-actions { display: inline-flex; gap: 6px; }
.btn.mini, .modal .btn.mini { padding: 5px 10px; font-size: 0.76rem; width: auto; }
.small { font-size: 0.76rem; }
.pill { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--text-dim); }
.totp-qr { display: grid; place-items: center; margin: 6px 0 10px; }
.totp-qr img { width: 180px; height: 180px; background: #fff; border-radius: 12px; padding: 8px; }
.snippet.center { text-align: center; letter-spacing: .08em; }
.snippet.recovery { columns: 2; text-align: center; font-size: 0.86rem; line-height: 1.9; }
.site-pick { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 4px; font-size: 0.82rem; }
.site-pick label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.modal .site-pick input { width: auto; margin: 0; accent-color: var(--accent-strong, var(--accent)); }
.site-edit { padding: 4px 0 10px; }
#user, #pw { margin-bottom: 10px; }
#login .btn.ghost .ico, #settingsBtn .ico { margin-right: 6px; }
/* viewers: hide everything that would only answer with 403 */
body.role-viewer #addSiteBtn, body.role-viewer #shareBtn, body.role-viewer #addFunnelBtn { display: none !important; }
body.site-limited #addSiteBtn { display: none !important; }
@media (max-width: 560px) { #meName { display: none; } .team-row { flex-wrap: wrap; } }
a.btn, a.btn:hover { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.swatch.ann { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 1px; background: var(--accent-2, #ff7a5c); }
.tip-note { color: var(--accent-2, #ff7a5c); }
body.role-viewer #annBtn { display: none !important; }
.act-row { align-items: baseline; }
.act-row .act-time { flex: 0 0 96px; }
.act-row > span:nth-child(2) { flex: 1; display: block; }
.act-target { color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 0.8rem; }
.act-ip { flex: 0 0 auto; font-family: ui-monospace, monospace; }
@media (max-width: 560px) { .act-ip { display: none; } }
body.role-viewer #alertsBtn { display: none !important; }
#alertsList [data-al-test] { min-width: 72px; justify-content: center; }
body.role-viewer #importBtn { display: none !important; }
#impFile { flex: 1 1 240px; color: var(--text-dim); font-size: .82rem; }
#impFile::file-selector-button { font: 600 .8rem inherit; font-family: inherit; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); border-radius: 9px; padding: 7px 12px; margin-right: 10px; cursor: pointer; }
#impFile::file-selector-button:hover { background: rgba(255,255,255,.08); }

/* ══ light theme (html[data-theme="light"], chosen in Settings or following the system) ══════════ */
html[data-theme="light"] {
  color-scheme: light;
  --accent: #0d9488;
  --accent-strong: #0f766e;
  --accent-2: #e8603f;
  --accent-soft: rgba(13, 148, 136, 0.10);
  --accent-line: rgba(13, 148, 136, 0.35);
  --chart-visitors: #0d9488;
  --chart-pageviews: #e8603f;
  --green: #059669; --red: #dc2626; --yellow: #b45309;
  --bg: #f4f8f7; --bg2: #eef3f2;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-2: #eef4f3;
  --line: rgba(10, 40, 38, 0.09);
  --line-strong: rgba(10, 40, 38, 0.16);
  --text: #0f2624; --text-dim: #3f5a56; --text-faint: #647a77;
  --cyan: #0e7490;
  --shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 28px -16px rgba(15,40,38,.25);
}
html[data-theme="light"] body {
  background:
    radial-gradient(1100px 560px at 8% -12%, rgba(13,148,136,.10), transparent 60%),
    radial-gradient(800px 460px at 104% -4%, rgba(232,96,63,.07), transparent 55%),
    var(--bg);
}
html[data-theme="light"] header {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,251,250,.88));
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 16px 34px -24px rgba(15,40,38,.35);
}
html[data-theme="light"] .btn { color: #fff; box-shadow: 0 6px 16px -8px rgba(13,148,136,.55); }
html[data-theme="light"] .btn.ghost,
html[data-theme="light"] .header-right .btn.ghost,
html[data-theme="light"] .header-right select { background: rgba(255,255,255,.75); color: var(--text); border-color: var(--line-strong); }
html[data-theme="light"] .header-right .btn.ghost:hover, html[data-theme="light"] .btn.ghost:hover { background: rgba(13,148,136,.07); }
html[data-theme="light"] .stats .stat:first-child { background: linear-gradient(160deg, rgba(13,148,136,.12), rgba(255,255,255,.9) 55%); border-color: rgba(13,148,136,.25); }
html[data-theme="light"] .commerce .stat:first-child { background: linear-gradient(160deg, rgba(232,96,63,.10), rgba(255,255,255,.9) 55%); border-color: rgba(232,96,63,.22); }
html[data-theme="light"] .bar .fill { background: linear-gradient(90deg, rgba(13,148,136,.16), rgba(13,148,136,.04)); }
html[data-theme="light"] .bar:hover .fill { background: linear-gradient(90deg, rgba(13,148,136,.24), rgba(232,96,63,.08)); }
html[data-theme="light"] .realtime { background: rgba(13,148,136,.07); border-color: rgba(13,148,136,.22); color: #0f766e; }
html[data-theme="light"] .trend.up { color: #0f766e; background: rgba(13,148,136,.10); }
html[data-theme="light"] .trend.down { color: #c2410c; background: rgba(232,96,63,.10); }
html[data-theme="light"] #p-pages .bar .name .txt, html[data-theme="light"] #p-404 .bar .name .txt, html[data-theme="light"] .feed-row .path { color: #1d3a37; }
html[data-theme="light"] .modal { background: rgba(255,255,255,.96); box-shadow: 0 30px 80px rgba(15,40,38,.25), 0 0 0 1px var(--line-strong); }
html[data-theme="light"] .modal-overlay { background: rgba(220,232,230,.6); }
html[data-theme="light"] #login { background: radial-gradient(700px 420px at 50% 30%, rgba(13,148,136,.14), transparent 65%), rgba(236,244,242,.92); }
html[data-theme="light"] .snippet { background: #f2f7f6; color: #17403b; border-color: var(--line); }
html[data-theme="light"] select option { background: #fff; color: var(--text); }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background-color: #fff; color: var(--text); border-color: var(--line-strong); }
html[data-theme="light"] .set-card { background: rgba(255,255,255,.7); }
html[data-theme="light"] .pill, html[data-theme="light"] .act-target { background: rgba(10,40,38,.04); }
html[data-theme="light"] .flag { box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
html[data-theme="light"] .tip { background: #fff; color: var(--text); border-color: var(--line-strong); box-shadow: 0 10px 30px -10px rgba(15,40,38,.3); }
html[data-theme="light"] .range input[type=date], html[data-theme="light"] #annDay { color-scheme: light !important; }
html[data-theme="light"] .set-tabs button.active, html[data-theme="light"] .panel h3 .tabs button.active { background: #fff; }
html[data-theme="light"] .pill { color: #36504c; border-color: rgba(10,40,38,.22); }
html[data-theme="light"] .stat .label { color: #3f5a56; }

/* one close button for every closable modal — sticky, so it stays reachable in long modals */
.modal-x { position: sticky; top: 0; float: right; margin: -14px -12px 0 8px; z-index: 3; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2, rgba(255,255,255,.06)); border: 1px solid var(--line); border-radius: 10px; color: var(--text-dim); cursor: pointer; }
.modal-x:hover, .modal-x:focus-visible { color: var(--text); border-color: var(--line-strong); }
.settings-head .modal-x { position: static; float: none; margin: 0 0 0 6px; flex: none; }
.modal.settings .settings-head { position: sticky; top: -32px; z-index: 3; margin: -32px -30px 12px; padding: 22px 30px 12px;
  background: rgb(23,26,34); border-bottom: 1px solid var(--line); border-radius: 20px 20px 0 0; }
html[data-theme="light"] .modal.settings .settings-head { background: #fff; }

/* scrollbars in Tacilytics style — thin, quiet, follows light/dark (Fabian) */
:root { --sb-thumb: rgba(180, 255, 240, 0.16); --sb-thumb-hover: rgba(180, 255, 240, 0.32); }
html[data-theme="light"] { --sb-thumb: rgba(10, 40, 38, 0.18); --sb-thumb-hover: rgba(10, 40, 38, 0.34); }
* { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
.modal::-webkit-scrollbar-track { margin: 14px 0; } /* keeps the thumb off the rounded corners */
/* login / reset / invite always on top: a 401 while Settings is open must not hide the login behind it */
#login, #reset, #invite { z-index: 1100; }
/* ── time zones ── */
.modal .tz-select { width: 100%; margin-bottom: 14px; }
.modal .field-label { display: block; color: var(--text-dim); font-size: 0.8rem; margin: -4px 0 6px; text-align: left; }
.modal p.small { font-size: 0.78rem; margin-top: -14px; }
.tz-btn span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }