/* Shared styles. Colors and sizes are variables: change the look here.
   Look: minimal white + blue (the "Łowca Design System", design/system/ and Brief Designowy.md). Blue = brand and the one main
   action; green / amber / red / grey only ever mean a state (works, needs a decision, error, off).
   Theme and motion: <html data-theme="light|dark"> and data-motion="on|off", set by /static/look.js from Settings -> Wygląd;
   without them the system settings decide. */
/* Archivo (variable width and weight), self-hosted: Google Fonts would send every visitor's IP to Google, which needs consent.
   Files from fonts.gstatic.com (Archivo v25, latin + latin-ext subsets, OFL). */
@font-face { font-family: Archivo; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url('archivo-latin-ext.woff2') format('woff2');
  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; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url('archivo-latin.woff2') format('woff2');
  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; }

/* Tokens: the same names and values as design/system/tokens.json */
:root {
  color-scheme: light; font-family: Archivo, system-ui, sans-serif; font-size: 14px; font-weight: 450; line-height: 1.5;
  --bg: #f5f7fb; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #eef2f8; --border: #e2e7f0; --border-strong: #8a97ad;
  --ink: #0f172a; --ink-2: #475569; --ink-3: #5f6c81;
  --blue: #1f5fe0; --blue-hover: #1a4fbd; --blue-pressed: #153f97; --blue-soft: #e9f0ff; --on-blue: #ffffff;
  --success: #15803d; --success-soft: #e8f6ed; --warning: #a45200; --warning-soft: #fdf3e4; --danger: #c42b2b; --danger-soft: #fdecec;
  --neutral: #64748b; --neutral-soft: #eef1f5;
  --chart-1: #1f5fe0; --chart-2: #86aefc; --chart-3: #0c2c6e; --chart-4: #e39a1d; --chart-5: #94a3b8;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-2: 0 8px 24px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-pill: 999px;
  --fast: 150ms; --base: 220ms; --ease: cubic-bezier(.2, .8, .2, 1);
  --width: 1200px;
}
/* Night: chosen in Settings, or the system's when nothing was chosen */
:root[data-theme="dark"] {
  color-scheme: dark; --bg: #0b1120; --surface: #121a2c; --surface-raised: #18233a; --surface-sunken: #0e1626; --border: #24304a; --border-strong: #5d6b86;
  --ink: #e9eefb; --ink-2: #aab6cd; --ink-3: #8b98b3;
  --blue: #5f90ff; --blue-hover: #7fa6ff; --blue-pressed: #a1bdff; --blue-soft: #172a52; --on-blue: #0b1120;
  --success: #4ade80; --success-soft: #0f2a1c; --warning: #fbbf24; --warning-soft: #2e2410; --danger: #f87171; --danger-soft: #3a1618;
  --neutral: #8b98b3; --neutral-soft: #1c2740;
  --chart-1: #5f90ff; --chart-2: #2c4f9e; --chart-3: #c3d5ff; --chart-4: #f2b84b; --chart-5: #56637c;
  --shadow-1: none; --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark; --bg: #0b1120; --surface: #121a2c; --surface-raised: #18233a; --surface-sunken: #0e1626; --border: #24304a; --border-strong: #5d6b86;
    --ink: #e9eefb; --ink-2: #aab6cd; --ink-3: #8b98b3;
    --blue: #5f90ff; --blue-hover: #7fa6ff; --blue-pressed: #a1bdff; --blue-soft: #172a52; --on-blue: #0b1120;
    --success: #4ade80; --success-soft: #0f2a1c; --warning: #fbbf24; --warning-soft: #2e2410; --danger: #f87171; --danger-soft: #3a1618;
    --neutral: #8b98b3; --neutral-soft: #1c2740;
    --chart-1: #5f90ff; --chart-2: #2c4f9e; --chart-3: #c3d5ff; --chart-4: #f2b84b; --chart-5: #56637c;
    --shadow-1: none; --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
  }
}

body { background: var(--bg); color: var(--ink); margin: 0; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease; }
#root { flex: 1; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; box-sizing: border-box; max-width: var(--width); margin: 0 auto; padding: var(--space-8) var(--space-8) 80px; }
main.narrow { --width: 440px; padding-inline: var(--space-4); }
h1, h2, h3 { color: var(--ink); letter-spacing: -.01em; }
h1 { margin: 0 0 var(--space-5); font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.015em; }
h2 { margin: 0 0 var(--space-3); font-size: 18px; line-height: 24px; font-weight: 650; }
h3 { margin: var(--space-5) 0 var(--space-2); font-size: 15px; line-height: 22px; font-weight: 600; }
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
code { font-family: ui-monospace, monospace; font-size: 13px; }
[hidden] { display: none !important; }

/* Motion: short and smooth. Off when chosen in Settings, or by default when the system asks for reduced motion
   (unless the user turned animations on). */
a, button, input, select, textarea, .offer, .item, .card { transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
  color var(--fast) var(--ease), transform var(--base) var(--ease), box-shadow var(--base) var(--ease), opacity var(--fast) var(--ease); }
.content > * { animation: rise .35s var(--ease) backwards; }
.content > :nth-child(2) { animation-delay: .04s; }
.content > :nth-child(3) { animation-delay: .08s; }
.content > :nth-child(n + 4) { animation-delay: .12s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px var(--pulse-soft, var(--success-soft)); } }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) *, :root:not([data-motion="on"]) *::before, :root:not([data-motion="on"]) *::after { transition: none !important; animation: none !important; }
}

/* Icons: 24px grid line icons in currentColor (ui/src/Icon.tsx) */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Logo: blue rounded square with a ring (placeholder mark) + the site name */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.brand:hover { color: var(--ink); }
/* Crosshair mark of public/static/logo.svg (placeholder logo): dot, ring and four ticks on a 28-unit tile */
.brand::before { content: ''; flex: none; --u: 1px; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(9 * var(--u)); box-sizing: border-box;
  --tick: linear-gradient(var(--on-blue) 0 0) no-repeat;
  background: radial-gradient(circle, var(--on-blue) calc(1.1 * var(--u)), transparent calc(1.6 * var(--u))),
    radial-gradient(circle, transparent calc(5.5 * var(--u)), var(--on-blue) calc(6 * var(--u)), var(--on-blue) calc(8.5 * var(--u)), transparent calc(9 * var(--u))),
    var(--tick) center top calc(2.75 * var(--u)) / calc(2.5 * var(--u)) calc(4.5 * var(--u)),
    var(--tick) center bottom calc(2.75 * var(--u)) / calc(2.5 * var(--u)) calc(4.5 * var(--u)),
    var(--tick) left calc(2.75 * var(--u)) center / calc(4.5 * var(--u)) calc(2.5 * var(--u)),
    var(--tick) right calc(2.75 * var(--u)) center / calc(4.5 * var(--u)) calc(2.5 * var(--u)),
    var(--blue); }

/* App shell (logged-in pages): sidebar on the left, content on the right; under 900px a bottom bar instead */
/* Sidebar floats over the page (fixed card on the left); the content is centered on the whole window, with symmetric
   side padding as wide as the sidebar, so it never slides under it and stays centered */
.shell { flex: 1; display: flex; min-height: 100vh; --side: 248px; --side-gap: 12px; }
.sidebar { position: fixed; z-index: 15; top: var(--side-gap); bottom: var(--side-gap); left: var(--side-gap); box-sizing: border-box; width: var(--side);
  display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-3); background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-l); box-shadow: var(--shadow-2); overflow: hidden auto; }
.shell main { max-width: calc(var(--width) + 2 * (var(--side) + var(--side-gap) + var(--space-6))); padding-inline: calc(var(--side) + var(--side-gap) + var(--space-6)); }
.sidebar .brand { padding: 6px 10px var(--space-5); }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-pill); color: var(--ink-2);
  font-size: 14px; font-weight: 600; text-decoration: none; }
.nav-item:hover { background: var(--surface-sunken); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--blue-soft); color: var(--blue); }
.nav-item .badge { margin-left: auto; }
.nav-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nav-item[aria-current="page"] .nav-count { color: var(--blue); }
.nav-sep { height: 1px; background: var(--border); margin: var(--space-3) 10px; flex: none; }
.nav-group { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px var(--space-1); }
.sidebar-foot { margin-top: auto; display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.sidebar-foot .theme-toggle { margin: 0 6px; justify-self: start; }
.user { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center;
  font-size: 13px; font-weight: 700; flex: none; text-transform: uppercase; }
.user-text { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 18px; }
.user-text > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-text small { display: block; font-weight: 450; color: var(--ink-3); }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shell-banner { margin: 0; border-radius: 0; border-width: 0 0 1px; justify-content: center; }
.bottombar { display: none; }
@media (max-width: 900px) {
  .sidebar { display: none; }
  .shell main { padding-inline: var(--space-4); }
  .bottombar { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: space-around; background: var(--surface); border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .bottombar .nav-item { flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: var(--radius-m); font-size: 11px; line-height: 14px; }
  .mobile-head { display: flex; }
  main { padding: var(--space-4) var(--space-4) 48px; }
}
.mobile-head { display: none; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 12px var(--space-4);
  background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.mobile-head .brand { font-size: 16px; }
.mobile-head .brand::before { --u: calc(24px / 28); }

/* Day / night switch: sun and moon on a sunken tray, the current one raised */
.theme-toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 0; cursor: pointer; }
.theme-toggle > span { display: grid; place-items: center; padding: 5px 10px; border-radius: var(--radius-pill); color: var(--ink-3); }
.theme-toggle .icon { width: 16px; height: 16px; }
.theme-toggle > span:first-child, :root[data-theme="dark"] .theme-toggle > span:last-child { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
:root[data-theme="dark"] .theme-toggle > span:first-child { background: none; color: var(--ink-3); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle > span:first-child { background: none; color: var(--ink-3); box-shadow: none; }
  :root:not([data-theme="light"]) .theme-toggle > span:last-child { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
}
.theme-toggle:hover:not(:disabled) { background: var(--border); }
/* static pages: the same switch as plain markup (.lp-theme, wired in public.tsx) */
.lp-theme { position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 0; border-radius: var(--radius-pill);
  background: var(--surface-sunken); cursor: pointer; }
.lp-theme::before { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--base) var(--ease); }
:root[data-theme="dark"] .lp-theme::before { transform: translateX(100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-theme::before { transform: translateX(100%); } }
.lp-theme span { position: relative; display: grid; place-items: center; padding: 5px 10px; color: var(--ink-2); }
.lp-theme .icon { width: 16px; height: 16px; }

/* Top bar of static pages (legal pages, guides): brand, theme switch, a link or the logged-in links */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 12px var(--space-6);
  background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.topbar .brand { margin-right: auto; }
.topbar > a:not(.brand) { padding: 6px 14px; border-radius: var(--radius-pill); color: var(--ink-2); font-weight: 600; text-decoration: none; }
.topbar > a:not(.brand):hover { color: var(--ink); background: var(--surface-sunken); }
.topbar > a[aria-current="page"] { background: var(--blue-soft); color: var(--blue); }
.topbar .muted { padding: 0 4px; }
.topbar > button:not(.lp-theme, .theme-toggle) { padding: 6px 14px; }

/* Page heading: title with an optional badge, one muted line under it, controls on the right */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: var(--space-6); }
.page-head > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.page-head-aside { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-head .title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head p { margin: 0; color: var(--ink-2); }
/* "Na żywo": green pill with a pulsing dot */
.live:not(.dot) { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600;
  color: var(--success); background: var(--success-soft); }
.live:not(.dot)::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2s var(--ease) infinite; }
.live.warn { --pulse-soft: var(--warning-soft); color: var(--warning); background: var(--warning-soft); }
.live.error { --pulse-soft: var(--danger-soft); color: var(--danger); background: var(--danger-soft); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: var(--space-5); margin-bottom: var(--space-6);
  box-shadow: var(--shadow-1); }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-head { padding: var(--space-5) var(--space-5) 0; }
.card.editor { border-color: var(--blue); box-shadow: var(--shadow-2); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.card-head h2 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.card-head p, .card-sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
.card-head a { font-size: 13px; font-weight: 600; text-decoration: none; }
.card-head #usage { font-size: 14px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: 4px; }

/* Dialog: a card over the page, closed with the X, Esc or a click on the backdrop */
.dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 0;
  width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 64px); box-shadow: var(--shadow-2); }
.dialog[open] { animation: rise var(--base) var(--ease); }
.dialog::backdrop { background: rgba(15, 23, 42, .45); }
.dialog-body { padding: var(--space-6); }
.dialog-close { flex: none; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.dialog dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 8px 0 0; font-size: 14px; }
.dialog dt { color: var(--ink-3); font-weight: 600; }
.dialog dd { margin: 0; overflow-wrap: anywhere; }
.dialog .card { box-shadow: none; margin-bottom: var(--space-3); }
.dialog details.more { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.dialog.side { margin: 0 0 0 auto; width: min(560px, 100vw); height: 100vh; max-height: 100vh; border-radius: var(--radius-l) 0 0 var(--radius-l); }
.dialog.side[open] { animation: slide-in var(--base) var(--ease); }
@keyframes slide-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.dialog details.more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-3); width: max-content; }

/* Forms */
label { display: block; margin-bottom: var(--space-4); }
label > span { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
label.check { display: flex; gap: 10px; align-items: flex-start; }
label.check > span { font-size: 14px; font-weight: 450; margin: 0; }
label.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
input, select, textarea { width: 100%; box-sizing: border-box; padding: 10px 14px; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-m); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--blue); }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
input:disabled, select:disabled { background: var(--surface-sunken); color: var(--ink-3); }
/* iOS Safari zooms into any focused field under 16px and leaves the page panned sideways */
@media (pointer: coarse) { input, select, textarea { font-size: 16px; } }

/* Buttons: pills. Secondary by default, .primary blue (one per screen or card), .danger red text (after a confirmation) */
button, a.button-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; padding: 9px 18px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ink); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; text-decoration: none; }
button:hover:not(:disabled), a.button-link:hover { background: var(--surface-sunken); color: var(--ink); }
button:active:not(:disabled), a.button-link:active { transform: scale(.97); }
button:disabled { opacity: .45; cursor: not-allowed; }
.primary, a.button-link.primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
button.primary:hover:not(:disabled), a.button-link.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--on-blue); }
button.primary:active:not(:disabled) { background: var(--blue-pressed); }
.danger { color: var(--danger); }
button.danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
button.ghost { background: none; border-color: transparent; color: var(--blue); }
button.ghost:hover:not(:disabled) { background: var(--blue-soft); color: var(--blue); }
button.small { padding: 6px 12px; font-size: 13px; }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.row > label { flex: 1; min-width: 140px; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.muted { color: var(--ink-3); font-size: 13px; }
.error { color: var(--danger); }
.ok { color: var(--success); }
p.error:empty, p.ok:empty, p.muted:empty { margin: 0; }
p.error, p.ok { font-weight: 500; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset:disabled { opacity: .6; }

/* Status dot + text: a color is never alone, a word always goes with it */
.status { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-4); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); box-shadow: 0 0 0 3px var(--neutral-soft); flex: none; }
.dot.on { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.dot.on.live { animation: pulse 2s var(--ease) infinite; }
.dot.warn { --pulse-soft: var(--warning-soft); background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.dot.off { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

/* Labels: pills. .chip a filter or tag, .badge a state (tones), .soon "wkrótce" */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.chip, .badge, .soon { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; line-height: 16px;
  padding: 3px 10px; font-variant-numeric: tabular-nums; vertical-align: middle; white-space: nowrap; }
.chip { max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; background: var(--surface-sunken); color: var(--ink-2); font-weight: 500; } /* long filter text wraps instead of widening the page */
.badge { background: var(--neutral-soft); color: var(--ink-2); }
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.error { background: var(--danger-soft); color: var(--danger); }
.badge.warn { background: var(--warning-soft); color: var(--warning); }
.badge.blue { background: var(--blue-soft); color: var(--blue); }
.soon { background: var(--neutral-soft); color: var(--ink-2); text-transform: none; }
.filter-chip { max-width: 100%; padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.filter-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* long search names stay on one line inside the screen */
.filter-chip[aria-pressed="true"], .filter-chip[aria-pressed="true"]:hover { background: var(--blue-soft); border-color: transparent; color: var(--blue); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }

/* Notices: a soft tint of the state color */
.notice { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; border-radius: var(--radius-m); padding: 12px 16px; margin: 0 0 var(--space-5);
  background: var(--blue-soft); color: var(--ink); border: 1px solid transparent; }
.notice > a:last-child { margin-left: auto; font-weight: 600; }
.notice.warn { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.notice.warn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); flex: none; }

/* Tabs and segmented controls: options on a sunken tray, the chosen one raised */
.tabs, .segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-sunken); margin-bottom: var(--space-5); }
.segmented { margin-bottom: 0; }
.tabs button, .segmented button { padding: 6px 14px; border: 0; background: none; color: var(--ink-2); font-size: 13px; }
.tabs button:hover:not(:disabled), .segmented button:hover:not(:disabled) { background: color-mix(in srgb, var(--surface) 50%, transparent); color: var(--ink); }
.tabs button[aria-selected="true"], .segmented button[aria-checked="true"], .tabs button[aria-selected="true"]:hover, .segmented button[aria-checked="true"]:hover {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* Switch: green when on (= works), thumb slides */
.switch { position: relative; flex: none; width: 40px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--border-strong); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform var(--base) var(--ease); }
.switch:hover:not(:disabled) { background: var(--neutral); }
.switch[aria-checked="true"], .switch[aria-checked="true"]:hover:not(:disabled) { background: var(--success); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.switch:active:not(:disabled) { transform: none; }

/* Plan usage bar: blue, amber from 80%, red when full; the note explains disabled actions */
.limit { display: grid; gap: 6px; font-size: 13px; }
.limit-top { display: flex; justify-content: space-between; color: var(--ink-2); }
.limit-top b { color: var(--ink); font-weight: 600; }
.limit-track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.limit-fill { height: 100%; border-radius: inherit; background: var(--blue); transition: width var(--base) var(--ease); }
.limit.warn .limit-fill { background: var(--warning); }
.limit.full .limit-fill { background: var(--danger); }
.limit-note { font-weight: 500; color: var(--warning); }
.limit.full .limit-note { color: var(--danger); }
.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); margin: var(--space-4) 0; }

/* Empty state: what will appear here and the one action that fills it */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--space-2); padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-l); color: var(--ink-2); }
.empty-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); margin-bottom: var(--space-2); }
.empty h3 { margin: 0; font-size: 16px; }
.empty p { margin: 0 0 var(--space-2); max-width: 360px; }

/* Lists: rows separated by a hairline; searches, chats */
ul.items { list-style: none; padding: 0; margin: 0; }
.item { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.item:last-child { border-bottom: 0; }
.item.editing { background: var(--blue-soft); margin: 0 calc(-1 * var(--space-3)); padding-inline: var(--space-3); border-radius: var(--radius-m); }
.item > div:first-child { flex: 1; min-width: 220px; }
.item b { font-weight: 600; }
.item b, .item a { overflow-wrap: anywhere; }
.item.disabled > div:first-child, .item.disabled > .actions > :not(.keep) { opacity: .45; filter: grayscale(1); pointer-events: none; }
ul.items > li.muted, ul.items > li.error { padding: var(--space-4) 0; }
.pin { display: inline-flex; vertical-align: middle; margin: -4px 4px 0 -6px; padding: 4px; border: 0; border-radius: var(--radius-s); background: none; color: var(--ink-3); }
.pin .icon { width: 18px; height: 18px; }
.pin:hover:not(:disabled) { color: var(--blue); background: var(--blue-soft); }
.pin[aria-pressed="true"] { color: var(--blue); }
.pin[aria-pressed="true"] .icon { fill: currentColor; }
.search-title { display: flex; align-items: center; gap: 8px; font-size: 15px; }

/* Monitor rows (dashboard): platform mark, name and state, new today, switch */
.monitor { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border); }
.monitor-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monitor-meta { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.monitor-meta .dot { width: 7px; height: 7px; box-shadow: none; animation: none; }
.monitor-count { font-size: 13px; font-weight: 600; color: var(--blue); white-space: nowrap; }
.monitor.paused .monitor-name, .monitor.paused .platform-icon { color: var(--ink-3); }
.card .limit-wrap { padding: 0 var(--space-5) var(--space-4); }
.card-foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); }

/* Integration cards: Telegram now, the rest "wkrótce" (dashed, greyed) */
.integration { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); }
.integration + .integration { margin-top: var(--space-3); }
.integration.soon-card { background: var(--surface-sunken); border-style: dashed; }
.integration.soon-card .integration-name { color: var(--ink-2); }
.integration-body { flex: 1; min-width: 0; }
.integration-name { font-weight: 600; }
.integration .status { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.integration-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-m); background: var(--blue-soft); color: var(--blue); flex: none; }
.soon-card .integration-icon { background: var(--neutral-soft); color: var(--ink-3); }

/* Onboarding steps (dashboard of a new account) */
.steps-grid { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.step { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.step h2 { margin: 0; font-size: 18px; }
.step p { margin: 0; color: var(--ink-2); }
.step > :last-child { margin-top: auto; align-self: flex-start; }
.step-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink-2); font-size: 13px; font-weight: 700; }
.step.current { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.step.current .step-num { background: var(--blue); color: var(--on-blue); }
.step.done .step-num { background: var(--success-soft); color: var(--success); }

/* Dashboard layout: two columns that stack */
.split { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.split > .wide { flex: 3 1 480px; min-width: 0; }
.split > .narrow-col { flex: 2 1 320px; min-width: 0; }
.split > * > .card:last-child { margin-bottom: 0; }
.split { margin-bottom: var(--space-6); }
.paste { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.paste input { flex: 1 1 320px; width: auto; }

/* Platform tiles (new search) */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.platform { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-m);
  text-align: left; white-space: normal; font-size: 15px; }
.platform small { display: block; font-size: 12px; font-weight: 450; color: var(--ink-3); }
.platform:hover:not(:disabled) { border-color: var(--blue); background: var(--surface); }
.platform[aria-pressed="true"], .platform[aria-pressed="true"]:hover { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.platform:disabled { border-style: dashed; }
/* platform mark: a neutral monogram, never the site's real logo */
.platform-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--surface-sunken);
  color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: -.02em; vertical-align: middle; }
.platform-icon.small { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }

/* Offer cards: photo, price first, title, platform and city; the bookmark saves (placeholder) */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.offer { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  overflow: hidden; box-shadow: var(--shadow-1); animation: rise .35s var(--ease) backwards; }
.offer:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.offer > a { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.offer-photo { position: relative; aspect-ratio: 4 / 3; background: var(--surface-sunken); overflow: hidden; }
/* under the photo: visible only when the offer has none or it fails to load */
.offer-nophoto { position: absolute; inset: 0; display: grid; place-items: center; background: #fff; color: #6e7682; font-size: 14px; }
.offer-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offer-new { position: absolute; top: 10px; left: 10px; z-index: 1; }
.offer-body { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-4) var(--space-4); flex: 1; }
.offer-price { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; }
.offer-title { font-weight: 500; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.offer-history { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--ink-3); }
.offer-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.offer-body .chip { align-self: flex-start; margin-top: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.save { position: absolute; top: 10px; right: 10px; z-index: 1; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-2); }
.save .icon { width: 18px; height: 18px; }
.save:hover:not(:disabled) { color: var(--blue); background: var(--surface); }
.save[aria-pressed="true"] { color: var(--blue); }
.save[aria-pressed="true"] .icon { fill: currentColor; animation: pop var(--base) var(--ease); }
.offer.stale { opacity: .6; }
.offer.stale img { filter: grayscale(1); }
.offer-skeleton .offer-photo, .skeleton-line { background: var(--surface-sunken); }
.skeleton-line { height: 14px; border-radius: 6px; }

/* Stat tiles and charts (admin). Series colors c0..c4 = --chart-1..5 */
.stat { border: 1px solid var(--border); border-radius: var(--radius-l); padding: var(--space-4) var(--space-5); background: var(--surface); box-shadow: var(--shadow-1); }
.stat-label { font-size: 13px; color: var(--ink-2); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-value.ok { color: var(--success); }
.stat-value.error { color: var(--danger); }
.stat-hint { font-size: 12px; color: var(--ink-3); }
.chart, .donut { margin: 0 0 var(--space-3); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-hit { fill: transparent; }
.chart g:hover .chart-hit { fill: var(--surface-sunken); }
.c0 { --c: var(--chart-1); } .c1 { --c: var(--chart-2); } .c2 { --c: var(--chart-3); } .c3 { --c: var(--chart-4); } .c4 { --c: var(--chart-5); }
.chart rect:is(.c0, .c1, .c2, .c3, .c4) { fill: var(--c); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--ink-2); }
.chart-legend li { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.chart-legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bar-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.bar-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 6px 0; }
.bar-list b { font-variant-numeric: tabular-nums; }
.bar-track { grid-column: 1 / -1; height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.bar-track > div { height: 100%; border-radius: inherit; background: var(--c); transition: width .4s var(--ease); }
.donut { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.donut svg { width: 130px; height: 130px; flex: none; }
.donut circle { fill: none; stroke-width: 5; stroke: var(--c); }
.donut .donut-track { stroke: var(--surface-sunken); }
.donut text { fill: var(--ink); font-size: 7px; font-weight: 700; font-variant-numeric: tabular-nums; }
.donut .chart-legend { flex-direction: column; margin: 0; }

/* Tables (admin): small uppercase headings, hairline rows, horizontal scroll in a box */
.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--space-5)); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--border); }
th, td { text-align: left; padding: 12px 10px; vertical-align: middle; }
th:first-child, td:first-child { padding-left: var(--space-5); }
th:last-child, td:last-child { padding-right: var(--space-5); }
td { border-bottom: 1px solid var(--border); color: var(--ink-2); }
tbody tr:hover td { background: var(--surface-sunken); }
td select, td input:not([type="checkbox"]) { width: auto; padding: 6px 10px; }
td button { padding: 6px 12px; font-size: 13px; }
tr.banned td { opacity: .55; }
.dialog table th:first-child, .dialog table td:first-child { padding-left: 10px; }
.card.flush > .table-wrap { margin: 0; }
.card.flush > .table-foot { margin: 0; padding: var(--space-3) var(--space-5); }
.table-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: var(--space-4); font-size: 13px; color: var(--ink-3); }
.icon-btn { padding: 7px; }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--blue-soft); color: var(--blue); white-space: nowrap; }

/* Admin: every section is built from the same blocks. Grids have equal columns (4 -> 2 -> 1, or 2 -> 1), so rows stay symmetric. */
.grid-2, .grid-3, .grid-4, .stat-grid { display: grid; gap: var(--space-4); align-items: stretch; margin-bottom: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4, .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid-3, .grid-4, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .grid-4, .stat-grid { grid-template-columns: minmax(0, 1fr); } }
:is(.grid-2, .grid-3, .grid-4) > .card { margin-bottom: 0; display: flex; flex-direction: column; }
:is(.grid-2, .grid-3, .grid-4) > .card > :last-child { margin-bottom: 0; }
.card-note { margin: auto 0 0; padding-top: var(--space-4); font-size: 13px; color: var(--ink-3); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); align-items: end; }
@media (max-width: 420px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-grid + label.check, label.check + label.check { margin-top: calc(-1 * var(--space-2)); }
dl.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
dl.kv dt { color: var(--ink-3); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.panel-block + .panel-block { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.panel-block > h3 { margin: 0 0 var(--space-3); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.toolbar input[type="search"] { flex: 1 1 240px; width: auto; }
.toolbar select { width: auto; }
.rows { display: flex; flex-direction: column; }
.rows > * { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 -10px; padding: 8px 10px; border-radius: var(--radius-s); }
.rows > :hover { background: var(--surface-sunken); }
.rows .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .name small { display: block; font-size: 12px; font-weight: 450; color: var(--ink-3); white-space: normal; }
.rows .when { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.rows .actions { justify-content: flex-end; }
.rows .actions button { font-size: 13px; padding: 6px 12px; }
.plat-card.killed { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.plat-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: var(--space-4); }
.plat-head b { font-weight: 600; font-size: 15px; }
.plat-head .muted { display: block; font-size: 13px; }
.plat-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.plat-nums span { display: block; font-size: 12px; color: var(--ink-3); }
.plat-nums b { font-size: 18px; font-variant-numeric: tabular-nums; }
.bulk-bar { position: sticky; bottom: var(--space-4); z-index: 5; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-l); background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-2);
  animation: rise var(--base) var(--ease); }
.bulk-bar > b { align-self: center; margin-right: auto; }
.bulk-bar label { margin: 0; }
.bulk-bar select, .bulk-bar input { width: auto; padding: 6px 10px; }
.section-nav { display: none; }
@media (max-width: 900px) { .section-nav { display: flex; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .section-nav > * { flex: none; } }

/* Settings rows (Wygląd) */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.setting-row:first-of-type { border-top: 0; padding-top: 0; }
.setting-row > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.setting-row b { font-weight: 600; }
.danger-zone { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); box-shadow: none; }
.danger-zone h2 { color: var(--danger); }

/* Search editor: grouped fields, one big question first, step bar */
.query input { font-size: 16px; padding: 12px 16px; }
.group { padding-top: var(--space-4); margin-top: var(--space-1); border-top: 1px solid var(--border); }
.group legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-3); font-weight: 600; font-size: 15px; }
.group legend + * { clear: both; }
.cats { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.row > .narrow-field { flex: 0 0 120px; min-width: 110px; }
.hint { margin: -8px 0 var(--space-4); font-size: 13px; color: var(--ink-3); }
.editor-foot { border-top: 1px solid var(--border); padding-top: var(--space-4); margin-top: var(--space-1); }
.editor-foot .hint { margin: var(--space-3) 0 0; }
.searches-layout { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.searches-layout > .list-col { flex: 3 1 520px; min-width: 0; }
.searches-layout > .card.editor { flex: 2 1 400px; min-width: 0; position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; }
@media (max-width: 900px) { .searches-layout > .card.editor { position: static; max-height: none; } }

/* Plans: the landing's .plan-cards (generated by src/http.js) and Settings -> Plan (PlanCard); the last (best) plan is .featured */
.plan-cards { width: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-4); }
.plan-cards.compact { max-width: none; margin-top: var(--space-5); }
.plan-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-l);
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-1); }
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.plan-card.featured { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue), var(--shadow-1); }
.plan-card.current { border-color: var(--success); }
.plan-flag { align-self: flex-start; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--neutral-soft); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.featured .plan-flag { background: var(--blue-soft); color: var(--blue); }
.current .plan-flag { background: var(--success-soft); color: var(--success); }
.plan-card h3 { margin: 0; font-size: 20px; font-weight: 600; }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price b { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; }
.plan-price span { color: var(--ink-3); }
.plan-prices { display: flex; flex-direction: column; gap: 4px; }
.plan-note { margin: 0; font-size: 13px; color: var(--ink-3); }
.plan-card ul { margin: 0; padding: var(--space-4) 0 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--border); color: var(--ink-2); }
.plan-card li { display: flex; gap: var(--space-2); align-items: flex-start; }
.plan-card li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan-actions { display: flex; }
.plan-actions > * { flex: 1; }
.plan-trial { margin-top: auto; }
.plan-cards:not([data-period="year"]) .for-year, .plan-cards[data-period="year"] .for-month { display: none; }
.plan-current { pointer-events: none; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 12px 22px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.lp-btn:hover { background: var(--surface-sunken); color: var(--ink); }
.lp-btn:active { transform: scale(.97); }
.lp-btn.main { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.lp-btn.main:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--on-blue); }
.lp-btn.plain { border-color: transparent; background: none; color: var(--blue); }
.lp-btn.plain:hover { background: var(--blue-soft); color: var(--blue); }
.plan-current.lp-btn { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.lp-billing { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: max-content; margin: 0 auto var(--space-8); padding: 3px;
  border-radius: var(--radius-pill); background: var(--surface-sunken); }
.lp-billing::before { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--base) var(--ease); }
.lp-billing:has([data-period="year"][aria-pressed="true"])::before { transform: translateX(100%); }
.lp-billing button { position: relative; padding: 7px 18px; border: 0; background: none; color: var(--ink-2); font-size: 14px; }
.lp-billing button:hover:not(:disabled) { background: none; }
.lp-billing button[aria-pressed="true"] { color: var(--ink); }
.lp-billing span { font-size: 12px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); }
.card .lp-billing { margin: var(--space-5) 0 0; }

/* Cookie consent bar */
.cookie-bar { position: fixed; z-index: 20; left: 16px; right: 16px; bottom: 16px; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-l); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-2);
  max-height: calc(100vh - 32px); overflow: auto; animation: rise var(--base) var(--ease); }
.cookie-bar p { margin: 0; font-size: 13px; color: var(--ink-2); }
.cookie-options { display: flex; flex-direction: column; gap: 6px; }
.cookie-options label { margin: 0; }
.cookie-options label.check > span { font-size: 13px; }
/* reject and accept look the same on purpose: consent must be as easy to refuse as to give */
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cookie-actions button { flex: 1 1 auto; }

/* Footer and legal pages */
footer { padding: var(--space-6) var(--space-4); font-size: 13px; color: var(--ink-3); text-align: center; }
.foot-links { margin: 0 0 8px; }
footer a { color: inherit; }
footer a:hover { color: var(--ink); }
.foot-note { display: block; max-width: 640px; margin: 0 auto; font-size: 12px; }
.legal { --width: 760px; line-height: 1.65; font-size: 15px; }
.legal h1 { font-size: 32px; }
.legal h2 { margin-top: 2em; font-size: 20px; }
.legal li { margin-bottom: .4em; }

/* Guides (/poradniki and /poradniki/*): the landing's look (body.lp), layout from design/panel/Blog.dc.html and BlogPost.dc.html */
.guide-page { max-width: 1120px; margin: 0 auto; padding: 40px var(--space-5) 0; box-sizing: border-box; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-3); }
.crumbs li + li::before { content: '/'; margin-right: 8px; }
.crumbs a { color: inherit; }
.guide-head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 760px; margin-bottom: 48px; }
.lp .guide-head h1 { font-size: clamp(32px, 4.5vw, 48px); line-height: 1.08; }
.guide-kicker { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); }
.guide-meta { font-size: 14px; color: var(--ink-3); }
.guide-layout { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.guide-body { flex: 999 1 560px; min-width: 0; font-size: 17px; line-height: 1.65; }
.lp .guide-body h2 { margin: 48px 0 16px; font-size: clamp(24px, 3vw, 28px); line-height: 1.2; scroll-margin-top: 88px; }
.lp .guide-body h2:first-child { margin-top: 0; }
.guide-body p { margin: 0 0 16px; color: var(--ink-2); }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.guide-steps li { counter-increment: step; display: flex; gap: 16px; padding: 20px; border-radius: var(--radius-l); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-1); color: var(--ink-2); }
.guide-steps li::before { content: counter(step); flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.guide-steps b { color: var(--ink); }
.guide-note { padding: 16px 20px; border-radius: var(--radius-l); background: var(--surface-sunken); }
.guide-body .plan-cards { margin: 16px 0; }
.guide-aside { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }
.toc, .guide-cta-card { display: flex; flex-direction: column; gap: 2px; padding: 20px; border-radius: var(--radius-l); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.lp .toc h2 { margin: 0 0 8px; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.toc a { padding: 6px 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--blue); }
.guide-cta-card { gap: 12px; background: var(--blue-soft); border-color: transparent; box-shadow: none; }
.guide-cta-card p { margin: 0; font-size: 14px; color: var(--ink-2); }
/* phones: the table of contents goes above the text, the side CTA repeats the one under the h1 */
@media (max-width: 900px) { .guide-aside { order: -1; position: static; } .guide-cta-card { display: none; } }
.lp .guide-section-title { margin-bottom: 20px; font-size: 24px; }
.guide-card { color: inherit; text-decoration: none; }
.guide-card:hover { color: inherit; }
.lp .guide-card h3 { font-size: 19px; line-height: 1.3; }
.guide-card .guide-meta { margin-top: auto; }
.lp-card.guide-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; padding: 0; overflow: hidden; margin-bottom: 48px; }
.guide-featured .tg-demo { margin: 0; padding: 32px; display: grid; place-items: center; background: var(--blue-soft); }
.guide-featured-text { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 32px; }
.lp .guide-featured h2 { font-size: clamp(24px, 3vw, 30px); }
.guide-more { color: var(--blue); font-weight: 600; }
.guide-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.guide-filter button { padding: 7px 16px; font-size: 14px; }
.guide-filter button[aria-pressed="true"] { background: var(--blue-soft); border-color: transparent; color: var(--blue); }

/* Guide pages: a sample Telegram message (made-up offer, same layout as the bot sends) */
.tg-demo { margin: 16px 0 24px; padding: 32px; border-radius: 20px; background: var(--blue-soft); }
.tg-bubble { max-width: 420px; padding: 10px 14px; border-radius: var(--radius-l) var(--radius-l) var(--radius-l) 4px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-1); font-size: 15px; }
.tg-bubble p { margin: 8px 0; }
.tg-photos { display: flex; gap: 4px; margin: 0 -8px 4px; }
.tg-photos span { flex: 1; aspect-ratio: 4 / 3; border-radius: var(--radius-m); background: var(--blue-soft); }
.tg-link { color: var(--blue); }
.tg-demo figcaption { margin-top: 6px; font-size: 13px; color: var(--ink-3); }

/* Login page: centered card, brand above */
.auth-page { flex: 1; display: grid; place-items: center; padding: var(--space-8) var(--space-4); }
.auth-box { width: 100%; max-width: 420px; }
.auth-box > .brand { margin-bottom: var(--space-5); }
.auth-box > p { margin: 0 0 var(--space-5); color: var(--ink-2); }
.auth-box .card { padding: var(--space-6); box-shadow: var(--shadow-2); }
.auth-box form .primary { width: 100%; margin-top: var(--space-2); }
.login-theme { position: fixed; top: 16px; right: 16px; z-index: 10; }
/* Landing login panel: drops from the top bar's right edge; full width on phones */
.login-slot { display: flex; align-items: center; gap: 8px; }
.login-panel { position: absolute; top: calc(100% + 8px); right: 20px; width: 380px; max-width: calc(100vw - 32px); box-sizing: border-box; margin: 0;
  padding: var(--space-6); box-shadow: var(--shadow-2); animation: rise var(--base) var(--ease); }
.login-panel form .primary { width: 100%; }
@media (max-width: 480px) { .login-panel { right: 16px; left: 16px; width: auto; } }

/* Maintenance screen (also public/maintenance.html, self-contained) */
.maintenance { flex: 1; display: grid; place-items: center; padding: var(--space-4); }
.maintenance .card { max-width: 460px; text-align: center; padding: var(--space-8); }
.spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--blue); border-radius: 50%; display: inline-block; vertical-align: -2px;
  margin-right: 6px; animation: spin 1s linear infinite; }

/* Landing (/ for logged-out visitors). Markup in public/landing.html, plan cards generated by src/http.js */
.lp { font-size: 16px; line-height: 1.6; }
.lp main { max-width: none; padding: 0; }
.lp-bar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); }
.lp-bar-in { position: relative; max-width: 1120px; margin: 0 auto; padding: 12px var(--space-5); display: flex; align-items: center; gap: var(--space-4); }
.lp-nav { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.lp-nav a { flex: none; padding: 6px 14px; border-radius: var(--radius-pill); color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.lp-nav a:hover { background: var(--surface-sunken); color: var(--ink); }
.lp-nav a[aria-current="page"] { background: var(--blue-soft); color: var(--blue); }
.lp-bar .login-slot > a { flex: none; padding: 9px 18px; border-radius: var(--radius-pill); background: var(--blue); color: var(--on-blue); font-size: 14px; font-weight: 600; text-decoration: none; }
.lp-bar .login-slot > a:hover { background: var(--blue-hover); }
@media (max-width: 640px) { .lp-nav { display: none; } .lp-bar .login-slot { margin-left: auto; } }
.lp section { max-width: 1120px; margin: 0 auto; padding: var(--space-12) var(--space-5) 88px; box-sizing: border-box; scroll-margin-top: 72px; }
.lp h1 { margin: 0; font-size: clamp(36px, 5.5vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.lp h2 { margin: 0; font-size: clamp(26px, 3.5vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.lp-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; max-width: 640px; margin: 0 auto 40px; }
.lp-head p { margin: 0; font-size: 17px; color: var(--ink-2); }
.lp-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: center; padding-top: 72px !important; }
.lp-hero-text { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.lp-live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--blue-soft); color: var(--blue);
  font-size: 13px; font-weight: 600; }
.lp-live::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); animation: pulse 2s var(--ease) infinite; }
.lp-lead { margin: 0; max-width: 30em; font-size: 18px; color: var(--ink-2); text-wrap: pretty; }
.lp-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }
.lp-hero .lp-actions { justify-content: flex-start; }
.lp-small { font-size: 14px; color: var(--ink-3); }
.lp-small b { color: var(--ink); }
/* Hero illustration: a made-up panel (monitors card + two offers), built from the panel's own classes */
.lp-demo { position: relative; display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: 24px; background: var(--blue-soft); }
.lp-demo .card { margin: 0; box-shadow: var(--shadow-2); }
.lp-demo .card-head { flex-wrap: nowrap; }
.lp-demo .card-head h2 { font-size: 16px; line-height: 22px; letter-spacing: 0; }
.lp-demo .switch { display: block; pointer-events: none; }
.lp-demo .monitor { padding-inline: var(--space-4); }
.lp-demo-offers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.lp-demo .offer { animation: none; box-shadow: var(--shadow-2); }
.lp-demo .offer-photo { aspect-ratio: 16 / 9; }
.lp-ph1 { background: linear-gradient(135deg, var(--chart-2), var(--blue)); }
.lp-ph2 { background: linear-gradient(135deg, color-mix(in srgb, var(--chart-4) 60%, var(--surface)), var(--chart-4)); }
@media (max-width: 520px) { .lp-demo { padding: var(--space-3); } .lp-demo .monitor-count { display: none; } }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); }
.lp-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-l); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-1); scroll-margin-top: 72px; transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.lp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.lp-card h3 { margin: 0; font-size: 18px; }
.lp-card p { margin: 0; color: var(--ink-2); }
.lp-num { width: 44px; height: 44px; border-radius: var(--radius-m); display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.lp-step { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
/* Supported sites: tiles like the panel's platform picker */
.lp-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-4); }
.lp-platform { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-l); border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-1); }
.lp-platform .platform-icon { margin-bottom: var(--space-2); }
.lp-platform b { font-size: 17px; font-weight: 600; }
.lp-platform small { font-size: 14px; color: var(--ink-2); }
/* With animations on: a 3D carousel moving right to left. The tile in the middle is the closest, the side ones recede and fade.
   Tiles stay flat and all the same size (fixed height). Every tile runs the same loop, shifted by its position (--i of --n), so they stay --step apart on screen (the X offsets grow with depth to cancel the perspective pull toward the middle). A new platform = bump --n and add an nth-child.
   OS "reduce motion" with Settings -> Wygląd forcing animations on still gets the static grid (one media query, no JS). */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .lp-platforms { --n: 5; --t: 25s; --step: 260px; display: block; position: relative; height: 230px;
    perspective: 1000px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
  :root:not([data-motion="off"]) .lp-platform { position: absolute; left: 50%; top: 50%; width: calc(var(--step) - 40px); height: 180px; box-sizing: border-box; overflow: hidden;
    animation: lp-orbit var(--t) linear infinite; animation-delay: calc(var(--t) * var(--i, 0) / var(--n) * -1); }
  :root:not([data-motion="off"]) .lp-platforms:hover .lp-platform { animation-play-state: paused; }
  .lp-platform:nth-child(2) { --i: 1; } .lp-platform:nth-child(3) { --i: 2; } .lp-platform:nth-child(4) { --i: 3; } .lp-platform:nth-child(5) { --i: 4; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) { :root:not([data-motion="off"]) .lp-platforms { --step: 220px; } :root:not([data-motion="off"]) .lp-platform { height: 200px; padding: var(--space-4); } }
@keyframes lp-orbit {
  0% { transform: translate(-50%, -50%) translateX(calc(var(--step) * 3.55)) translateZ(-420px); opacity: 0; }
  20% { transform: translate(-50%, -50%) translateX(calc(var(--step) * 1.7)) translateZ(-130px); opacity: .55; }
  40% { transform: translate(-50%, -50%) translateX(calc(var(--step) * .5)) translateZ(20px); opacity: .95; }
  50% { transform: translate(-50%, -50%) translateX(0) translateZ(40px); opacity: 1; }
  60% { transform: translate(-50%, -50%) translateX(calc(var(--step) * -.5)) translateZ(20px); opacity: .95; }
  80% { transform: translate(-50%, -50%) translateX(calc(var(--step) * -1.7)) translateZ(-130px); opacity: .55; }
  100% { transform: translate(-50%, -50%) translateX(calc(var(--step) * -3.55)) translateZ(-420px); opacity: 0; }
}
/* Categories: compact tiles, four per row */
.lp-cats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--space-3); }
.lp-cats .lp-card { padding: var(--space-5); gap: var(--space-2); }
.lp-cats .lp-card h3 { font-size: 16px; }
.lp-cats .lp-card p { font-size: 14px; }
.lp-notes { display: flex; gap: 8px 24px; flex-wrap: wrap; justify-content: center; margin-top: 40px; font-size: 14px; color: var(--ink-3); }
.lp-faq { max-width: 760px !important; }
.lp-faq h2 { text-align: center; margin-bottom: 32px; }
.lp details { margin-bottom: 10px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); }
.lp details:hover { border-color: var(--border-strong); }
.lp summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.lp summary::-webkit-details-marker { display: none; }
.lp summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken);
  font-size: 18px; transition: transform var(--base) var(--ease); }
.lp details[open] summary::after { transform: rotate(45deg); }
.lp details p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); }
/* Guides at the bottom of the landing: folded like the FAQ, links in two columns when there is room */
.lp .lp-guides-box { max-width: 760px; padding-top: 0; }
.lp-guides { list-style: none; margin: 0; padding: 0 22px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px 24px; font-size: 14px; }
.lp-guides a { color: var(--ink-2); }
.lp-guides a:hover { color: var(--blue); }
.lp-cta { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding: 64px 24px; border-radius: 24px;
  background: var(--blue); color: var(--on-blue); }
.lp-cta h2 { max-width: 16em; text-wrap: balance; color: inherit; }
.lp-cta p, .lp-cta .lp-small, .lp-cta .lp-small b { margin: 0; color: inherit; opacity: .9; }
.lp-cta .lp-btn.main { background: var(--on-blue); border-color: var(--on-blue); color: var(--blue); }
.lp-cta .lp-btn.main:hover { background: var(--on-blue); color: var(--blue-hover); opacity: .92; }
.lp-foot { border-top: 1px solid var(--border); }
/* Scroll reveal (public.tsx adds .lp-hidden to [data-reveal] below the fold, then removes it in view) */
[data-reveal] { transition: opacity .6s var(--ease), translate .6s var(--ease); }
.lp-hidden { opacity: 0; translate: 0 20px; }
html:has(body.lp) { scroll-behavior: smooth; }
:root[data-motion="off"]:has(body.lp) { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]):has(body.lp) { scroll-behavior: auto; } }

@media (max-width: 520px) {
  h1 { font-size: 26px; line-height: 32px; }
  .item > .actions { width: 100%; }
  .topbar { padding: 10px var(--space-4); }
  .topbar .muted { display: none; }
  /* taller tap targets, except controls with a fixed shape (switch, round icon buttons, theme switches) */
  button:not(.switch, .dialog-close, .save, .pin, .theme-toggle, .lp-theme), a.button-link { min-height: 40px; }
  .monitor { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: var(--space-4); }
  .monitor-count { display: none; }
}
.guide-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-m); }
.guide-hero { max-width: 760px; margin: -16px 0 48px; border-radius: var(--radius-l); }