:root,
.lg-theme-google {
  --lg-color-primary-50: #e8f0fe;
  --lg-color-primary-100: #d2e3fc;
  --lg-color-primary-200: #aecbfa;
  --lg-color-primary-300: #8ab4f8;
  --lg-color-primary-400: #669df6;
  --lg-color-primary-500: #4285f4;
  --lg-color-primary-600: #1a73e8;
  --lg-color-primary-700: #1967d2;
  --lg-color-primary-800: #185abc;
  --lg-color-primary-900: #174ea6;

  --lg-color-neutral-50: #f8f9fa;
  --lg-color-neutral-100: #f1f3f4;
  --lg-color-neutral-200: #e8eaed;
  --lg-color-neutral-300: #dadce0;
  --lg-color-neutral-400: #bdc1c6;
  --lg-color-neutral-500: #9aa0a6;
  --lg-color-neutral-600: #80868b;
  --lg-color-neutral-700: #5f6368;
  --lg-color-neutral-800: #3c4043;
  --lg-color-neutral-900: #202124;

  --lg-color-success: #137333;
  --lg-color-warning: #b06000;
  --lg-color-danger: #d93025;
  --lg-color-info: #1a73e8;

  --lg-color-brand: var(--lg-color-primary-600);
  --lg-color-background: #ffffff;
  --lg-color-surface: #ffffff;
  --lg-color-surface-muted: var(--lg-color-neutral-50);
  --lg-color-border: var(--lg-color-neutral-300);
  --lg-color-text-primary: var(--lg-color-neutral-900);
  --lg-color-text-secondary: var(--lg-color-neutral-700);
  --lg-color-text-tertiary: var(--lg-color-neutral-600);

  --lg-space-1: 4px;
  --lg-space-2: 8px;
  --lg-space-3: 12px;
  --lg-space-4: 16px;
  --lg-space-5: 20px;
  --lg-space-6: 24px;
  --lg-space-8: 32px;
  --lg-space-10: 40px;

  --lg-radius-sm: 4px;
  --lg-radius-md: 8px;
  --lg-radius-lg: 12px;
  --lg-radius-xl: 16px;
  --lg-radius-2xl: 28px;
  --lg-radius-pill: 9999px;

  --lg-shadow-sm: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --lg-shadow-md: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
  --lg-shadow-lg: 0 4px 16px rgba(60, 64, 67, 0.2);

  --lg-font-family-sans: "Google Sans", "Roboto", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --lg-font-size-xs: 12px;
  --lg-font-size-sm: 14px;
  --lg-font-size-md: 16px;
  --lg-font-size-lg: 18px;
  --lg-font-size-xl: 20px;

  --lg-motion-fast: 120ms;
  --lg-motion-base: 200ms;
  --lg-motion-slow: 300ms;
  --lg-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* compatibility aliases for legacy repos */
  --color-primary-50: var(--lg-color-primary-50);
  --color-primary-100: var(--lg-color-primary-100);
  --color-primary-200: var(--lg-color-primary-200);
  --color-primary-300: var(--lg-color-primary-300);
  --color-primary-400: var(--lg-color-primary-400);
  --color-primary-500: var(--lg-color-primary-500);
  --color-primary-600: var(--lg-color-primary-600);
  --color-primary-700: var(--lg-color-primary-700);
  --color-primary-800: var(--lg-color-primary-800);
  --color-primary-900: var(--lg-color-primary-900);

  --color-neutral-50: var(--lg-color-neutral-50);
  --color-neutral-100: var(--lg-color-neutral-100);
  --color-neutral-200: var(--lg-color-neutral-200);
  --color-neutral-300: var(--lg-color-neutral-300);
  --color-neutral-400: var(--lg-color-neutral-400);
  --color-neutral-500: var(--lg-color-neutral-500);
  --color-neutral-600: var(--lg-color-neutral-600);
  --color-neutral-700: var(--lg-color-neutral-700);
  --color-neutral-800: var(--lg-color-neutral-800);
  --color-neutral-900: var(--lg-color-neutral-900);

  --color-background: var(--lg-color-background);
  --color-surface: var(--lg-color-surface);
  --color-text-primary: var(--lg-color-text-primary);
  --color-text-secondary: var(--lg-color-text-secondary);
  --color-text-tertiary: var(--lg-color-text-tertiary);
  --color-border: var(--lg-color-border);

  --radius-sm: var(--lg-radius-sm);
  --radius-md: var(--lg-radius-md);
  --radius-lg: var(--lg-radius-lg);
  --radius-xl: var(--lg-radius-xl);
  --radius-2xl: var(--lg-radius-2xl);
  --radius-full: var(--lg-radius-pill);

  --shadow-sm: var(--lg-shadow-sm);
  --shadow-md: var(--lg-shadow-md);

  --font-family-sans: var(--lg-font-family-sans);
  --font-size-sm: var(--lg-font-size-sm);
  --font-size-base: var(--lg-font-size-md);
  --font-size-lg: var(--lg-font-size-lg);
}

/* Semantic layer over @leeguoo/design-tokens (--lg-*). Components only use
   these names, so light/dark is a single swap here. The shared token package
   ships a blue paste brand; paste's own accent is coral, set via --lg-color-brand. */
:root {
  color-scheme: light;

  --accent: #f0604d;
  --accent-hover: #e5513e;
  --accent-press: #d54532;
  --accent-soft: rgba(240, 96, 77, 0.1);
  --accent-soft-2: rgba(240, 96, 77, 0.2);
  --accent-text: #d4432f;
  --on-accent: #ffffff;
  --lg-color-brand: var(--accent);
  --lg-color-brand-soft: var(--accent-soft);

  --bg: var(--lg-color-neutral-50);
  --surface: var(--lg-color-surface);
  --surface-2: var(--lg-color-neutral-100);
  --surface-3: var(--lg-color-neutral-200);
  --hover: rgba(32, 33, 36, 0.045);
  --border: rgba(32, 33, 36, 0.09);
  --border-strong: rgba(32, 33, 36, 0.16);
  --text: var(--lg-color-text-primary);
  --text-2: var(--lg-color-text-secondary);
  --text-3: var(--lg-color-text-tertiary);
  --danger: var(--lg-color-danger);
  --danger-soft: rgba(217, 48, 37, 0.08);
  --success: #1e9e62;
  --inverse: #202124;
  --on-inverse: #ffffff;
  --scrim: rgba(20, 20, 24, 0.36);

  --tint-text: var(--lg-color-text-secondary);
  --tint-text-bg: var(--lg-color-neutral-100);
  --tint-link: var(--lg-color-primary-600);
  --tint-link-bg: rgba(26, 115, 232, 0.09);
  --tint-code: #7a5af5;
  --tint-code-bg: rgba(122, 90, 245, 0.1);
  --tint-image: #1b9467;
  --tint-image-bg: rgba(27, 148, 103, 0.1);
  --tint-file: #b7690b;
  --tint-file-bg: rgba(200, 120, 20, 0.11);

  --shadow-xs: 0 1px 2px rgba(32, 33, 36, 0.06);
  --shadow-sm: 0 1px 2px rgba(32, 33, 36, 0.06), 0 1px 3px rgba(32, 33, 36, 0.05);
  --shadow-md: 0 4px 14px rgba(32, 33, 36, 0.08), 0 1px 3px rgba(32, 33, 36, 0.06);
  --shadow-lg: 0 24px 60px -12px rgba(32, 33, 36, 0.22), 0 4px 14px rgba(32, 33, 36, 0.06);
  --ring: 0 0 0 3px var(--accent-soft-2);

  --radius-sm: var(--lg-radius-sm);
  --radius-md: var(--lg-radius-md);
  --radius-lg: var(--lg-radius-lg);
  --radius-xl: var(--lg-radius-xl);
  --radius-pill: var(--lg-radius-pill);
  --ease: var(--lg-ease-standard);
  --fast: var(--lg-motion-fast);
  --base: var(--lg-motion-base);

  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent: #f26b58;
    --accent-hover: #f47d6c;
    --accent-press: #e45a47;
    --accent-soft: rgba(242, 107, 88, 0.13);
    --accent-soft-2: rgba(242, 107, 88, 0.24);
    --accent-text: #ff8d7c;
    --bg: #0d0d0f;
    --surface: #151518;
    --surface-2: #1d1d21;
    --surface-3: #27272c;
    --hover: rgba(255, 255, 255, 0.045);
    --border: rgba(255, 255, 255, 0.075);
    --border-strong: rgba(255, 255, 255, 0.13);
    --text: #ececef;
    --text-2: #a6a6ae;
    --text-3: #71717a;
    --danger: #ff6b61;
    --danger-soft: rgba(255, 107, 97, 0.1);
    --success: #3ccf8e;
    --inverse: #ececef;
    --on-inverse: #151518;
    --scrim: rgba(0, 0, 0, 0.55);
    --tint-text: #b4b4bc;
    --tint-text-bg: rgba(255, 255, 255, 0.06);
    --tint-link: #7eb0ff;
    --tint-link-bg: rgba(126, 176, 255, 0.12);
    --tint-code: #a792ff;
    --tint-code-bg: rgba(167, 146, 255, 0.13);
    --tint-image: #4fd1a0;
    --tint-image-bg: rgba(79, 209, 160, 0.12);
    --tint-file: #eab06a;
    --tint-file-bg: rgba(234, 176, 106, 0.13);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 30px 70px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
}

/* Explicit override from Settings → 外观 (duplicated on purpose: CSS can't share
   a block between a media query and an attribute selector). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #f26b58;
  --accent-hover: #f47d6c;
  --accent-press: #e45a47;
  --accent-soft: rgba(242, 107, 88, 0.13);
  --accent-soft-2: rgba(242, 107, 88, 0.24);
  --accent-text: #ff8d7c;
  --bg: #0d0d0f;
  --surface: #151518;
  --surface-2: #1d1d21;
  --surface-3: #27272c;
  --hover: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.075);
  --border-strong: rgba(255, 255, 255, 0.13);
  --text: #ececef;
  --text-2: #a6a6ae;
  --text-3: #71717a;
  --danger: #ff6b61;
  --danger-soft: rgba(255, 107, 97, 0.1);
  --success: #3ccf8e;
  --inverse: #ececef;
  --on-inverse: #151518;
  --scrim: rgba(0, 0, 0, 0.55);
  --tint-text: #b4b4bc;
  --tint-text-bg: rgba(255, 255, 255, 0.06);
  --tint-link: #7eb0ff;
  --tint-link-bg: rgba(126, 176, 255, 0.12);
  --tint-code: #a792ff;
  --tint-code-bg: rgba(167, 146, 255, 0.13);
  --tint-image: #4fd1a0;
  --tint-image-bg: rgba(79, 209, 160, 0.12);
  --tint-file: #eab06a;
  --tint-file-bg: rgba(234, 176, 106, 0.13);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 70px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

body.no-scroll {
  overflow: hidden;
}

h1, h2, h3, p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

button:disabled {
  cursor: default;
}

code, pre, kbd {
  font-family: var(--font-mono);
}

::selection {
  background: var(--accent-soft-2);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

/* ── brand ─────────────────────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.brand__mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(160deg, #f7806f 0%, var(--accent) 55%, #e2503d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(240, 96, 77, 0.35);
}
.brand__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:active:not(:disabled) {
  transform: translateY(0.5px);
}
.btn:disabled {
  opacity: 0.45;
}
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(213, 69, 50, 0.3);
}
.btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
}
.btn--primary.is-done {
  background: var(--success);
}
.btn--secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--surface-2);
}
.btn--ghost {
  color: var(--text-2);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--hover);
  color: var(--text);
}
.btn--danger {
  background: var(--danger);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn--danger:hover:not(:disabled) {
  filter: brightness(0.94);
}
.btn--sm {
  height: 30px;
  padding: 0 11px;
  font-size: 13px;
  border-radius: 8px;
  gap: 6px;
}
.btn--lg {
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
  border-radius: 11px;
}
.btn--block {
  width: 100%;
}
.btn__kbd {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  margin-left: 2px;
}

.icon-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
  color: var(--text-2);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.icon-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.icon-btn.is-on {
  color: var(--accent);
}
.icon-btn--danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 11px;
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1;
  vertical-align: 1px;
  margin: 0 1px;
}

/* ── text fields ───────────────────────────────────────── */
.field {
  display: block;
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  font-size: 14px;
  outline: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
.field::placeholder {
  color: var(--text-3);
}
.field:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.field--sm {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13.5px;
}

/* Search match inside a list row. */
.hl {
  padding: 1px 0;
  border-radius: 3px;
  background: var(--accent-soft-2);
  color: inherit;
  box-shadow: 0 0 0 1px var(--accent-soft-2);
}

/* ── chips / pills ─────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.chip--xs {
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
}
.chip__x {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: -4px;
  border-radius: 50%;
  color: var(--text-3);
}
.chip__x:hover {
  background: var(--surface-3);
  color: var(--text);
}
.chip--add {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-3);
}
.chip--add:hover {
  color: var(--text);
  border-color: var(--text-3);
}
.chip--add.is-open {
  color: var(--text);
  border-style: solid;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.chip--input {
  width: 110px;
  border: 1px solid var(--accent);
  background: var(--surface);
  outline: none;
  box-shadow: var(--ring);
}

.kind-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
}

.tint--text { color: var(--tint-text); background: var(--tint-text-bg); }
.tint--link { color: var(--tint-link); background: var(--tint-link-bg); }
.tint--code { color: var(--tint-code); background: var(--tint-code-bg); }
.tint--image { color: var(--tint-image); background: var(--tint-image-bg); }
.tint--file { color: var(--tint-file); background: var(--tint-file-bg); }

.avatar {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
}
.avatar--lg {
  width: 42px;
  height: 42px;
  font-size: 17px;
}
.avatar--btn {
  width: 36px;
  height: 36px;
}


/* ── signed-out landing ──────────────────────────────────── */
.landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 480px at 78% -8%, var(--accent-soft), transparent 70%),
    radial-gradient(700px 400px at -10% 10%, var(--tint-link-bg), transparent 70%),
    var(--bg);
}
.landing__nav,
.landing__main,
.site-footer {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.landing__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}
.landing__links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 13.5px;
  color: var(--text-2);
}
.landing__links a { display: inline-flex; align-items: center; gap: 6px; }
.landing__links a:hover { color: var(--text); }
.landing__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 40px;
  padding-bottom: 56px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}
.eyebrow svg { color: var(--accent); }
.hero__title {
  margin: 22px 0 18px;
  font-size: clamp(36px, 4.4vw, 54px);
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -0.035em;
}
.hero__accent { color: var(--accent); }
.hero__lede {
  max-width: 30em;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-2);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .inline-error { margin-top: 14px; }
.hero__features {
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.hero__features li { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.hero__features strong { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.hero__feature-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-text);
}

.preview { position: relative; }
.preview::before {
  content: "";
  position: absolute;
  inset: 8% -4% -6% 6%;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--accent-soft-2), var(--tint-link-bg));
  filter: blur(40px);
  z-index: 0;
}
.preview__window {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.preview__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.preview__dots { display: flex; gap: 6px; }
.preview__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.preview__search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 8px 0 10px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--text-3);
}
.preview__search > span { margin-left: auto; display: flex; }
.preview__list { padding: 8px; }
.preview__list .row:hover { background: transparent; }
.preview__list .row.is-selected { background: var(--accent-soft); }

.landing__cards {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-xs);
}
.card h2 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.card p { margin-top: 5px; font-size: 13.5px; line-height: 1.6; color: var(--text-3); }
.card__head { margin-bottom: 16px; }
.card .composer__input { min-height: 112px; }
.card--qr { display: flex; align-items: center; gap: 20px; }
.card--qr img { flex: none; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--border); }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 28px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-3);
}
.site-footer strong { color: var(--text-2); font-weight: 600; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer a:hover { color: var(--accent-text); }

/* ── public share page ───────────────────────────────────── */
.share-page { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.share-page__nav,
.share-page__main { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 20px; }
.share-page__nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.share-page__main { flex: 1; display: flex; flex-direction: column; gap: 14px; padding-top: 16px; padding-bottom: 40px; }
.share-page .site-footer { max-width: 680px; }
.share-card { display: flex; flex-direction: column; gap: 18px; }
.share-card__meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--text-3); }
.share-card__meta span:not(.kind-pill) { display: inline-flex; align-items: center; gap: 5px; }
.share-card__image { display: block; width: 100%; border-radius: 10px; }
.share-card__text { max-height: 60vh; overflow: auto; }
.share-card__skel { height: 160px; border-radius: 10px; }
.share-card--missing { align-items: center; text-align: center; padding: 48px 24px; gap: 10px; }
.share-card--missing h1 { font-size: 18px; font-weight: 650; }
.share-card--missing .btn { margin-top: 12px; }
.share-page__promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
}
.share-page__promo strong { display: block; font-weight: 600; }
.share-page__promo span { font-size: 12.5px; color: var(--text-3); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; }
  .landing__cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .landing__nav { height: 60px; padding: 0 16px; }
  .landing__links { display: none; }
  .landing__nav .btn { margin-left: auto; }
  .landing__main { padding: 20px 16px 40px; gap: 36px; }
  .hero__title { margin-top: 18px; }
  .hero__lede { font-size: 15.5px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__features { grid-template-columns: 1fr; gap: 14px; }
  .hero__features li { flex-direction: row; align-items: flex-start; gap: 12px; }
  .hero__feature-icon { flex: none; }
  .card { padding: 18px; }
  .card--qr { gap: 16px; }
  .card--qr img { width: 96px; height: 96px; }
  .site-footer { flex-direction: column; align-items: flex-start; padding: 20px 16px 28px; }
  .share-page__promo .btn { flex: none; }
}

/* /compare pages. Appended to the app's tokens.css + base.css + landing.css at
   build time, so colors, buttons, nav, cards and footer are the homepage's. */
html,
body {
  height: auto;
}
.cmp {
  font-size: 15px;
  line-height: 1.7;
}
.cmp .landing__links a[aria-current="page"] { color: var(--text); font-weight: 600; }
.cmp-nav__end { display: flex; align-items: center; gap: 14px; }
.cmp-lang { font-size: 13.5px; color: var(--text-2); }
.cmp-lang:hover { color: var(--text); }

.cmp-main {
  max-width: 920px;
  gap: 44px;
  padding-top: 28px;
  padding-bottom: 64px;
}
.cmp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cmp-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -20px;
  font-size: 13px;
  color: var(--text-3);
}
.cmp-crumbs a:hover { color: var(--accent-text); }

.cmp-title {
  margin: 20px 0 16px;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.cmp-lede {
  max-width: 44em;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-2);
}

.cmp-section > h2,
.cmp-cta h2 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cmp-section > h2 { margin-bottom: 16px; }
.cmp-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-3);
}
.cmp-note a,
.cmp-sources a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft-2);
  text-underline-offset: 3px;
}
.cmp-note a:hover,
.cmp-sources a:hover { text-decoration-color: currentColor; }

/* ── who should stay / who might switch ─────────────────── */
.cmp-verdict {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.cmp-verdict .card { padding: 24px; }
.cmp-verdict h2 { font-size: 16px; line-height: 1.45; }
.cmp-verdict__ours { border-color: var(--accent-soft-2); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); }
.cmp-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.cmp-list li { position: relative; padding-left: 18px; }
.cmp-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}
.cmp-verdict__ours .cmp-list li::before { background: var(--accent); }

/* ── table ───────────────────────────────────────────────── */
.cmp-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14.5px;
  line-height: 1.65;
}
.cmp-table th,
.cmp-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.cmp-table thead th {
  border-top: 0;
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  background: var(--surface-2);
}
.cmp-table thead th:first-child,
.cmp-table tbody th { width: 19%; }
.cmp-table tbody th {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.cmp-table td { color: var(--text-2); }
.cmp-table thead .cmp-table__ours { color: var(--accent-text); }
.cmp-table tbody tr:first-child th,
.cmp-table tbody tr:first-child td { border-top-color: var(--border); }
.cmp-table--two tbody tr:first-child th,
.cmp-table--two tbody tr:first-child td { border-top: 0; }
.cmp-table--two tbody th { width: 24%; }

.cmp-ref {
  display: inline-block;
  min-width: 16px;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 16px;
  font-weight: 600;
  text-align: center;
  vertical-align: 2px;
}
.cmp-ref + .cmp-ref { margin-left: 3px; }
.cmp-ref:hover { background: var(--accent-soft); color: var(--accent-text); }

/* ── migration steps ─────────────────────────────────────── */
.cmp-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.cmp-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 42px;
  min-height: 28px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.cmp-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 650;
}

/* ── FAQ ─────────────────────────────────────────────────── */
.cmp-faq { border-top: 1px solid var(--border); }
.cmp-faq__item { padding: 18px 0; border-bottom: 1px solid var(--border); }
.cmp-faq h3 { font-size: 15.5px; line-height: 1.5; font-weight: 650; }
.cmp-faq p { margin-top: 6px; color: var(--text-2); }

/* ── sources ─────────────────────────────────────────────── */
.cmp-section > h2 + .cmp-note { margin-top: -6px; }
.cmp-sources {
  margin: 14px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--text-3);
}
.cmp-sources li { padding-left: 4px; overflow-wrap: anywhere; scroll-margin-top: 24px; }
.cmp-sources li:target { color: var(--accent-text); }

/* ── download ────────────────────────────────────────────── */
.cmp-cta {
  display: grid;
  gap: 20px;
  padding: 28px;
}
.cmp-cta p { max-width: 46em; margin-top: 8px; font-size: 14.5px; line-height: 1.7; color: var(--text-2); }
.cmp-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cmp-others {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: -16px;
  font-size: 13.5px;
  color: var(--text-3);
}
.cmp-others a {
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
}
.cmp-others a:hover { border-color: var(--border-strong); color: var(--text); }

/* ── index ───────────────────────────────────────────────── */
.cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.cmp-card {
  display: flex;
  flex-direction: column;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.cmp-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cmp-card__vs { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-3); }
.cmp-card h2 { margin-top: 2px; font-size: 19px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; }
.cmp-card p { flex: 1; margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.cmp-card__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-text);
}

.cmp-footer { max-width: 1160px; align-items: flex-start; line-height: 1.6; }
.cmp-footer > span { max-width: 46em; }
.cmp-footer nav { flex: none; }

@media (max-width: 720px) {
  .cmp-verdict { grid-template-columns: 1fr; gap: 14px; }

  /* Table → one block per row, the two products stacked and labelled. */
  .cmp-table-wrap { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .cmp-table,
  .cmp-table tbody,
  .cmp-table tr,
  .cmp-table th,
  .cmp-table td { display: block; width: auto; }
  .cmp-table thead { display: none; }
  .cmp-table tbody { display: grid; gap: 12px; }
  .cmp-table tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-xs);
    padding: 16px;
  }
  .cmp-table tbody th,
  .cmp-table--two tbody th { width: auto; padding: 0; border: 0; font-size: 15px; font-weight: 650; }
  .cmp-table td { padding: 12px 0 0; border: 0; }
  .cmp-table td + td { margin-top: 12px; border-top: 1px solid var(--border); }
  .cmp-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--text-3);
  }
  .cmp-table td[data-label="Pastyx"]::before { color: var(--accent-text); }
  .cmp-table--two td { padding-top: 6px; }
}

@media (max-width: 640px) {
  .cmp-nav__end { margin-left: auto; }
  .cmp-main { padding: 16px 16px 48px; gap: 36px; }
  .cmp-crumbs { margin-bottom: -16px; }
  .cmp-title { margin-top: 16px; }
  .cmp-lede { font-size: 15.5px; }
  .cmp-section > h2,
  .cmp-cta h2 { font-size: 20px; }
  .cmp-verdict .card { padding: 18px; }
  .cmp-cta { padding: 20px; }
  .cmp-cta__actions .btn { flex: 1 1 100%; }
  .cmp-footer nav { flex-wrap: wrap; gap: 8px 18px; }
}