/* tixbee dashboard. Colours follow the landing page (landing.html): lavender ground, plum ink,
   violet accent. Only these names below; a raw colour would stay the same in dark mode. */
:root {
  --ground: #f4f1fb;
  --paper: #ffffff;
  --ink: #30203f;
  --ink-2: #5d4f6d;
  --ink-3: #8a7f97;
  --accent: #8052bf;
  --accent-soft: rgb(128 82 191 / 0.12);
  --accent-2: #3fa7a0;
  --rule: rgb(48 32 63 / 0.1);
  --good: #2f8f5b;
  --bad: #c2415b;
  --radius: 14px;
  /* Hover: only the background changes, never a border. */
  --hover: color-mix(in srgb, var(--paper) 94%, var(--ink));
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #17121e;
    --paper: #211a2b;
    --ink: #efe9f7;
    --ink-2: #c3b8d2;
    --ink-3: #8f84a0;
    --accent: #b08ae6;
    --accent-soft: rgb(176 138 230 / 0.16);
    --accent-2: #6fd0c8;
    --rule: rgb(239 233 247 / 0.1);
    --good: #6fcf97;
    --bad: #f08ca0;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.5 var(--sans); }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shell { max-width: 1120px; margin: 0 auto; padding: 0 16px 48px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0; }
.brand { font: bold 26px var(--serif); letter-spacing: -1px; text-decoration: none; display: flex; gap: 8px; align-items: center; }
.brand b { color: var(--accent); font-weight: 400; }
.top nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn { border: 1px solid var(--rule); background: var(--paper); border-radius: 999px; padding: 7px 14px; text-decoration: none; font-size: 14px; }
.btn:hover { background: var(--hover); }
.btn.primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.muted { color: var(--ink-3); }
.footer { margin-top: 40px; font: 12px var(--mono); color: var(--ink-3); }

.card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; }
.center { min-height: 70vh; display: grid; place-items: center; }
.login { width: 100%; max-width: 380px; }
.login h1 { font: 400 28px var(--serif); margin: 0 0 4px; }
.field { display: grid; gap: 6px; margin: 16px 0; }
.field input { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--ground); color: var(--ink); }
.error { color: var(--bad); }

.page-title { font: 400 30px/1.2 var(--serif); margin: 8px 0 16px; letter-spacing: -0.5px; }
h2 { font: 400 22px var(--serif); margin: 0 0 6px; }
h3 { font-size: 15px; margin: 18px 0 6px; }
.small { font-size: 13px; }
.big { font: 400 34px var(--serif); margin: 8px 0 0; }
.row { display: flex; gap: 8px; }
.input { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--ground); color: var(--ink); }
.add-site { margin-top: 20px; max-width: 560px; }
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.site-card p { margin: 0; }
.site-card .btn { margin-top: 12px; }
.site-name { font-weight: 600; text-decoration: none; color: var(--accent); word-break: break-all; }
.site-name:hover { text-decoration: underline; }

.site-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.site-title .page-title { margin-bottom: 8px; word-break: break-all; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgb(47 143 91 / 0.18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgb(47 143 91 / 0.05); } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
.periods, .filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); text-decoration: none; font-size: 13px; }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter { display: inline-flex; gap: 8px; align-items: center; padding: 5px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; }
.filter .x { opacity: 0.7; }

.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 14px; }
.kpi { display: grid; gap: 2px; padding: 4px 8px; border-left: 1px solid var(--rule); }
.kpi:first-child { border-left: 0; }
.kpi-label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font: 400 26px var(--serif); }
.kpi-delta { font-size: 12px; color: var(--ink-3); min-height: 18px; }
.kpi-delta.good { color: var(--good); }
.kpi-delta.bad { color: var(--bad); }
@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(3, 1fr); row-gap: 12px; }
  .kpi:nth-child(4) { border-left: 0; }
}

.chart { position: relative; }
.chart-scale { position: absolute; top: 0; left: 0; font-size: 11px; color: var(--ink-3); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 220px; padding: 18px 0 22px; border-bottom: 1px solid var(--rule); }
.bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bar:hover .bar-pv { background: var(--accent-soft); filter: brightness(0.9); }
.bar-pv, .bar-v { position: absolute; bottom: 0; width: 100%; border-radius: 4px 4px 0 0; min-height: 0; }
.bar-pv { background: var(--accent-soft); }
.bar-v { background: var(--accent); width: 70%; }
.bar-label { position: absolute; bottom: -20px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.chart-legend { display: flex; gap: 16px; justify-content: flex-end; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.chart-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.key-v::before { background: var(--accent); }
.key-pv::before { background: var(--accent-soft); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 760px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.breakdown { padding: 14px; min-height: 300px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.tab { border: 0; background: none; padding: 4px 10px; border-radius: 8px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.tab.on { background: var(--accent-soft); color: var(--accent); }
.row-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 8px 6px; }
.rows { display: grid; gap: 3px; }
.row-item { position: relative; display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; padding: 6px 8px; border: 0; background: none; text-align: left; border-radius: 6px; font-size: 14px; overflow: hidden; }
.row-item:hover { background: var(--hover); }
.row-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-soft); border-radius: 6px; }
.row-bar.goal { background: rgb(63 167 160 / 0.16); }
.row-name, .row-num { position: relative; }
.row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-num { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.empty { padding: 24px 8px; }
.avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; margin-right: 8px; }
.avatar.big { width: 56px; height: 56px; font-size: 24px; margin: 0 0 10px; }

.overlay { position: fixed; inset: 0; background: rgb(23 18 30 / 0.45); display: grid; place-items: center; padding: 16px; z-index: 10; }
.dialog { position: relative; width: 100%; max-width: 620px; max-height: 88vh; overflow: auto; }
.dialog.visitor { max-width: 820px; }
.close { position: absolute; top: 12px; right: 12px; border: 0; background: none; font-size: 16px; color: var(--ink-3); }
.snippet { display: flex; gap: 8px; align-items: flex-start; background: var(--ground); border-radius: 10px; padding: 10px; }
.snippet pre, pre.code { margin: 0; white-space: pre-wrap; word-break: break-all; font: 13px/1.5 var(--mono); flex: 1; }
pre.code { background: var(--ground); border-radius: 10px; padding: 10px; }

.journey { display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.journey aside p { margin: 4px 0; }
@media (max-width: 640px) { .journey { grid-template-columns: 1fr; } }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
.timeline li { padding: 6px 0 6px 16px; position: relative; font-size: 14px; }
.timeline .j-day { font-weight: 700; margin-top: 8px; }
.timeline .j-found { color: var(--accent); font-weight: 600; }
.timeline .j-goal { color: var(--accent-2); font-weight: 600; }
.timeline .j-event::before, .timeline .j-found::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--rule); }
.timeline .j-found::before { border-color: var(--accent); }
.timeline .j-goal::before { border-color: var(--accent-2); background: var(--accent-2); }
.j-time { display: inline-block; width: 52px; color: var(--ink-3); font: 12px var(--mono); }
code { font: 13px var(--mono); }

.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kpis.eight { grid-template-columns: repeat(4, 1fr); row-gap: 12px; }
.kpis.eight .kpi:nth-child(5) { border-left: 0; }
.kpi-value { white-space: nowrap; }
@media (max-width: 760px) {
  .kpis.eight { grid-template-columns: repeat(2, 1fr); }
  .kpis.eight .kpi:nth-child(odd) { border-left: 0; }
  .kpis.eight .kpi:nth-child(even) { border-left: 1px solid var(--rule); }
}
.stripe-form { margin: 10px 0 4px; }
.timeline .j-paid { color: var(--good); font-weight: 700; }
.timeline .j-paid::before { border-color: var(--good); background: var(--good); }

.funnels { margin-top: 14px; }
.funnels-head, .funnel-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.funnel-form { display: grid; gap: 8px; max-width: 560px; margin-bottom: 14px; }
.funnel-form textarea { font: 13px/1.5 var(--mono); resize: vertical; }
.funnel { padding: 12px 0; border-top: 1px solid var(--rule); }
.funnel h3 { margin: 0; }
.f-step { display: grid; grid-template-columns: minmax(140px, 1.2fr) 2fr minmax(110px, auto); gap: 12px; align-items: center; padding: 6px 0; font-size: 14px; }
.f-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; margin-right: 8px; }
.f-track { height: 14px; background: var(--ground); border-radius: 7px; overflow: hidden; }
.f-bar { height: 100%; background: var(--accent); border-radius: 7px; }
.f-figures { font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; white-space: nowrap; }
.f-drop { color: var(--bad); }
.profile { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.profile p { margin: 2px 0; word-break: break-all; }
@media (max-width: 640px) { .f-step { grid-template-columns: 1fr auto; } .f-track { grid-column: 1 / -1; grid-row: 2; } }

.sign-in { display: grid; gap: 16px; justify-items: center; }
.link { border: 0; background: none; text-decoration: underline; padding: 0; }
.row-item.static { cursor: default; }
.row-item.static:hover { background: none; }
.invite { margin-top: 14px; flex-wrap: wrap; }
.invite .role { flex: 0 0 auto; width: auto; }


/* ---- Site page, laid out like datafa.st: toolbar, KPI tabs over the chart, tabbed cards ---- */
.site { position: relative; }
.backdrop { position: fixed; inset: 0; z-index: 5; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; position: relative; z-index: 6; }
.tool-group { display: flex; align-items: stretch; }
.tool-group.joined > *:first-child, .tool-group.joined > *:first-child .tool { border-radius: 10px 0 0 10px; }
.tool-group.joined > *:last-child, .tool-group.joined > *:last-child .tool { border-radius: 0 10px 10px 0; }
.tool-group.joined > *:not(:first-child):not(:last-child) .tool { border-radius: 0; }
.tool-group.joined > * + * { margin-left: -1px; }
.tool-group > .menu-wrap + .menu-wrap { margin-left: -1px; }
.tool-group:not(.joined) > .menu-wrap:first-child .tool { border-radius: 10px 0 0 10px; }
.tool-group:not(.joined) > .menu-wrap:last-child .tool { border-radius: 0 10px 10px 0; }
.tool { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 10px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.tool:hover:not(:disabled) { background: var(--hover); }
.tool:disabled { opacity: 0.4; cursor: default; }
.tool.icon { width: 38px; padding: 0; justify-content: center; font-size: 16px; }
.tool.dashed { border-style: dashed; color: var(--ink-3); font-weight: 500; }
.tool.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.tool.open { background: var(--hover); }
.caret { font-size: 10px; color: var(--ink-3); }
.favicon { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--ink); color: var(--paper); font: 700 11px var(--serif); }
.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; max-height: 70vh; overflow: auto; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 6px; box-shadow: 0 12px 40px rgb(0 0 0 / 0.25); z-index: 10; }
.menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 8px; font-size: 14px; text-decoration: none; color: var(--ink); }
.menu-item:hover { background: var(--hover); }
.menu-item.on { background: var(--accent-soft); color: var(--accent); }
.menu-item.muted { color: var(--ink-3); font-size: 13px; }
.menu-heading { display: block; padding: 8px 10px 4px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.menu-custom { display: grid; gap: 6px; padding: 6px 4px 4px; border-top: 1px solid var(--rule); margin-top: 6px; }
.filter-menu { display: grid; grid-template-columns: 1fr 1fr; min-width: 300px; }
.filter-values { display: grid; gap: 4px; min-width: 260px; }

.main-card { padding: 0 0 12px; overflow: hidden; }
.kpi-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.kpi-tab { display: grid; gap: 2px; text-align: left; border: 0; background: none; padding: 16px 22px 14px; border-right: 1px solid var(--rule); border-bottom: 2px solid transparent; color: var(--ink); min-width: 130px; }
.kpi-tab:hover { background: var(--hover); }
.kpi-tab.on { border-bottom-color: var(--accent); }
.kpi-tab.on .kpi-label { color: var(--accent); }
.kpi-tab.static { cursor: default; border-right: 0; }
.kpi-tab.static:hover { background: none; }
.kpi-tab .kpi-label { font-size: 14px; color: var(--ink-2); text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 6px; }
.kpi-tab .kpi-value { font: 700 26px/1.2 var(--sans); }
.kpi-tab .dot { width: 7px; height: 7px; box-shadow: none; }

.chart2 { padding: 16px 20px 0 56px; }
.chart-plot { position: relative; height: 300px; }
.chart-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart-grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-line { stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.partial { stroke-dasharray: 5 5; }
.chart-prev { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.7; }
.chart-fill-top { stop-color: var(--accent); stop-opacity: 0.28; }
.chart-fill-bottom { stop-color: var(--accent); stop-opacity: 0; }
.chart-hit { fill: transparent; }
.chart-hit:hover { fill: var(--accent-soft); }
.chart-y { position: absolute; inset: 0 auto 0 -44px; width: 40px; pointer-events: none; }
.chart-y-label { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--ink-3); }
.chart-xs { position: relative; height: 26px; margin-top: 6px; }
.chart-x { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--ink-3); white-space: nowrap; }

.breakdown { padding: 0; min-height: 420px; display: flex; flex-direction: column; overflow: hidden; }
.card-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 0; }
.card-body { flex: 1; padding: 10px 12px 0; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--ground); border-radius: 10px; margin: 0; }
.tab { padding: 5px 11px; font-size: 13px; color: var(--ink-3); border-radius: 8px; font-weight: 500; }
.tab.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.details { border: 0; background: none; color: var(--ink-3); font-size: 11px; letter-spacing: 0.06em; padding: 12px; font-weight: 600; }
.details:hover { color: var(--accent); }
.row-item { padding: 8px 10px; }
.row-bar { background: var(--accent-soft); border-radius: 6px; }
.row-icon { margin-right: 8px; font-size: 13px; }
.row-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; margin-right: 8px; font-size: 10px; font-weight: 700; background: var(--ink-3); color: var(--paper); }
.b-chr { background: #4285f4; } .b-saf { background: #1e88e5; } .b-fir { background: #ff7139; } .b-edg { background: #0c8ed9; }
.o-mac, .o-ios { background: var(--ink-2); } .o-win { background: #0078d4; } .o-and { background: #3ddc84; color: #10301e; } .o-lin { background: #f7c200; color: #2a2100; }

.donut { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 18px; align-items: center; padding: 6px 4px; }
.donut-svg { width: 100%; height: auto; }
.slice { stroke: var(--paper); stroke-width: 0.015; }
.legend { display: grid; gap: 4px; }
.legend-item { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 5px 6px; border-radius: 6px; text-align: left; font-size: 14px; }
.legend-item:hover { background: var(--hover); }
.legend-name { flex: 1; }
.legend-num { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.swatch { width: 10px; height: 10px; border-radius: 3px; }
.c1 { fill: #8052bf; background: #8052bf; } .c2 { fill: #3fa7a0; background: #3fa7a0; } .c3 { fill: #e08a3c; background: #e08a3c; }
.c4 { fill: #d0577d; background: #d0577d; } .c5 { fill: #5b8def; background: #5b8def; } .c6 { fill: #a3b246; background: #a3b246; } .c7 { fill: #8a7f97; background: #8a7f97; }

.details-dialog { max-width: 720px; }
.details-dialog .input { width: 100%; margin: 8px 0 12px; }
.loading-card { padding: 60px; text-align: center; color: var(--ink-3); }

.bottom-card { margin-top: 14px; padding: 0 0 14px; }
.bottom-card > .rows, .bottom-card > .funnels, .bottom-card > .journeys, .bottom-card > p, .bottom-card > .empty-state { padding: 12px 14px 0; }
.empty-state { text-align: center; padding: 40px 14px !important; color: var(--ink-2); }
.empty-state pre { display: inline-block; text-align: left; }
.flow { position: relative; height: 220px; margin: 10px 0 0; }
.flow-svg { width: 100%; height: 100%; display: block; }
.f-col { fill: var(--accent); opacity: 0.85; rx: 4; }
.f-band { fill: var(--accent); opacity: 0.22; }
.f-drop-chip { position: absolute; top: 50%; transform: translate(-50%, -50%); background: var(--paper); border: 1px solid var(--rule); color: var(--bad); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.f-captions { display: flex; }
.f-caption { display: grid; gap: 2px; padding: 8px 4px 0 0; }
.journeys { display: grid; gap: 6px; }
.journey-row { display: grid; gap: 6px; text-align: left; border: 1px solid var(--rule); background: none; border-radius: 10px; padding: 10px 12px; }
.journey-row:hover { background: var(--hover); }
.journey-who { display: flex; align-items: center; font-weight: 600; font-size: 14px; }
.journey-steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.j-step { font: 12px var(--mono); background: var(--ground); padding: 3px 8px; border-radius: 6px; }
.j-step.goal { background: rgb(63 167 160 / 0.18); color: var(--accent-2); font-weight: 700; }
.j-step.exit { color: var(--ink-3); }
.j-arrow { color: var(--ink-3); font-size: 12px; }

@media (max-width: 760px) {
  .kpi-tab { min-width: 50%; border-right: 0; }
  .chart2 { padding-left: 44px; }
  .chart-plot { height: 220px; }
  .donut { grid-template-columns: 120px 1fr; }
  .filter-menu { grid-template-columns: 1fr; min-width: 200px; }
}

.row-num strong { font-weight: 600; color: var(--ink); min-width: 44px; display: inline-block; text-align: right; }
.row-rev { color: var(--good); margin-right: 14px; font-size: 13px; }

/* Settings page, laid out like datafa.st's: a menu on the left, cards on the right. */
.settings-page { max-width: 1000px; }
.back { display: inline-flex; text-decoration: none; margin: 4px 0 6px; width: auto !important; padding: 0 14px !important; }
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings-nav { display: grid; gap: 4px; position: sticky; top: 16px; }
.settings-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-size: 16px; color: var(--ink-2); }
.settings-link:hover { background: var(--hover); }
.settings-link.on { background: var(--paper); color: var(--ink); font-weight: 600; }
.settings-icon { width: 22px; text-align: center; color: var(--ink-3); font-size: 14px; }
.settings-main { display: grid; gap: 16px; }
.settings-card { padding: 20px 22px; }
.settings-card h2 { font: 600 18px var(--sans); margin: 0 0 4px; }
.settings-card > p.muted { margin: 0 0 14px; }
.input.wide { width: 100%; }
.settings-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 12px; }
.snippet.big pre { font-size: 14px; color: var(--accent-2); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: var(--ground); border-radius: 10px; margin-bottom: 10px; }
.seg { border: 0; background: none; padding: 8px; border-radius: 8px; color: var(--ink-3); font-weight: 600; }
.seg.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.swatch-btn { height: 32px; border-radius: 8px; border: 2px solid transparent; background: var(--hue); }
.swatch-btn.on { border-color: var(--ink); }
.toggle-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.toggle { width: 44px; height: 26px; border-radius: 999px; border: 1px solid var(--rule); background: var(--ground); padding: 2px; flex: none; }
.toggle span { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-3); transition: transform 0.15s; }
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle.on span { transform: translateX(18px); background: #fff; }
.danger { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.danger-btn { color: var(--bad); border-color: var(--bad); }
@media (max-width: 760px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; overflow-x: auto; }
  .swatches { grid-template-columns: repeat(5, 1fr); }
}

/* Chart colors a site can pick (General settings), applied over the accent. */
.hue-red { --hue: #ef4444; } .hue-salmon { --hue: #e8836b; } .hue-pink { --hue: #ec4899; } .hue-amber { --hue: #f59e0b; }
.hue-green { --hue: #10b981; } .hue-teal { --hue: #14b8a6; } .hue-blue { --hue: #3b82f6; } .hue-indigo { --hue: #6366f1; }
.hue-violet { --hue: #8b5cf6; } .hue-slate { --hue: #64748b; }
.main-card[class*="hue-"] { --accent: var(--hue); --accent-soft: color-mix(in srgb, var(--hue) 16%, transparent); }
.grid[class*="hue-"], .bottom-card[class*="hue-"] { --accent: var(--hue); --accent-soft: color-mix(in srgb, var(--hue) 16%, transparent); }
a.tool { text-decoration: none; }

.me { margin-left: auto; }
.me .menu { left: auto; right: 0; }
.me-button { border-color: transparent !important; background: none; font-weight: 500; }
.me-button .avatar { margin-right: 0; width: 28px; height: 28px; }
.avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.top .me { margin-left: 0; }
@media (max-width: 960px) { .me-name { display: none; } .me-button { padding: 0 4px; } }
.me .menu-heading { text-transform: none; letter-spacing: 0; font-size: 12px; }

.menu-sep { height: 1px; background: var(--rule); margin: 6px 4px; }
.menu-item.add { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.menu-item .plus { font-size: 18px; line-height: 1; color: var(--ink-2); }
.add-site-dialog { max-width: 460px; }

.alert-form { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; margin: 12px 0 4px; }
.row-actions { display: flex; gap: 6px; position: relative; }
.row-num.error { color: var(--bad); }
@media (max-width: 760px) { .alert-form { grid-template-columns: 1fr; } }

/* The footer sits at the bottom of the screen however short the page is while it loads. */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.shell > .footer { margin-top: auto; padding-top: 40px; }

/* One visitor: a sheet from the bottom, profile | timeline | stats. */
/* A native <dialog> (opened with showModal, closed with close()). The open state transitions in
   from @starting-style; on close, display and overlay are held with allow-discrete so the slide
   down and the backdrop fade play before it leaves the top layer. */
dialog.sheet { margin: auto auto 0; padding: 0; border: 0; width: min(1240px, 100%); max-width: 100%; height: min(86vh, 900px); max-height: 100%; background: var(--paper); color: var(--ink); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgb(0 0 0 / 0.18); overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), overlay 0.32s allow-discrete, display 0.32s allow-discrete; }
dialog.sheet[open] { transform: none; }
@starting-style { dialog.sheet[open] { transform: translateY(100%); } }
dialog.sheet::backdrop { background: rgb(23 18 30 / 0); transition: background-color 0.32s, overlay 0.32s allow-discrete, display 0.32s allow-discrete; }
dialog.sheet[open]::backdrop { background: rgb(23 18 30 / 0.45); }
@starting-style { dialog.sheet[open]::backdrop { background: rgb(23 18 30 / 0); } }
@media (prefers-reduced-motion: reduce) { dialog.sheet, dialog.sheet::backdrop { transition-duration: 0s; } }
html:has(dialog.sheet[open]) { overflow: hidden; }
.sheet-inner { height: 100%; display: flex; flex-direction: column; }
.sheet-handle { display: block; width: 48px; height: 5px; border: 0; border-radius: 3px; background: var(--rule); margin: 10px auto 4px; padding: 0; cursor: pointer; }
.sheet-handle:hover { background: var(--ink-3); }
.sheet-note { padding: 24px; }
.sheet-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px 1fr 290px; }
.sheet-body > * { overflow: auto; padding: 18px 22px 28px; }
.sheet-profile { border-right: 1px solid var(--rule); }
.sheet-stats { border-left: 1px solid var(--rule); }
.visitor-avatar { display: block; margin-bottom: 14px; }
.avatar-face { display: inline-block; margin-right: 8px; vertical-align: middle; flex: none; }
.sheet-profile h2 { font-size: 20px; margin: 0 0 12px; }
.profile-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; }
.profile-icon { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.profile-flag { width: 16px; text-align: center; }
.params { margin-top: 14px; font-size: 13px; }
.params p { margin: 4px 0; word-break: break-all; }
.params-empty { margin-top: 16px; border: 1px dashed var(--rule); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink-3); }
.params-empty code { font-size: 12px; }
.sheet-tools { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.sheet-tools .btn { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; font-weight: 700; }
.day { margin-bottom: 14px; }
.day-pill { display: inline-block; background: var(--ground); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; margin: 6px 0 6px; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 8px; border-radius: 8px; font-size: 14px; }
.step:hover { background: var(--hover); }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); align-self: center; justify-self: center; }
.step-found .step-dot { background: var(--accent); }
.step-goal .step-dot { background: var(--accent-2); }
.step-payment .step-dot { background: var(--good); }
.step-payment { color: var(--good); }
.step-time { color: var(--ink-3); font: 12px var(--mono); }
.step .chip { border: 0; display: inline-block; font: 12px var(--mono); background: var(--ground); padding: 2px 7px; border-radius: 6px; }
.step .chip.goal { background: rgb(63 167 160 / 0.18); color: var(--accent-2); font-weight: 700; }
.step .times { color: var(--ink-3); }
.vstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.vstat { background: var(--ground); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.vstat strong { font-size: 18px; }
.vstat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin: 0; }
.sheet-stats h3.vstat-label { margin: 18px 0 8px; }
.activity { --cell: 7px; --gap: 2px; }
.act-months, .act-grid { display: grid; grid-template-columns: repeat(26, var(--cell)); gap: var(--gap); }
.act-month { font-size: 10px; color: var(--ink-3); white-space: nowrap; height: 14px; }
.act-week { display: grid; grid-template-rows: repeat(7, var(--cell)); gap: var(--gap); }
.act-day { width: var(--cell); height: var(--cell); border-radius: 50%; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.act-day.a1 { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.act-day.a2 { background: color-mix(in srgb, var(--accent) 65%, transparent); }
.act-day.a3 { background: var(--accent); }
.act-day.future { background: none; }
@media (max-width: 900px) {
  .sheet-body { grid-template-columns: 1fr; overflow: auto; }
  .sheet-body > * { overflow: visible; border: 0; }
  .sheet-profile, .sheet-stats { border: 0; }
}