:root {
  color-scheme: dark;

  --page: #050f0c;
  --page-gradient:
    radial-gradient(62rem 40rem at 10% -10%, rgba(18, 170, 122, 0.22), transparent 70%),
    radial-gradient(52rem 38rem at 95% 22%, rgba(18, 170, 122, 0.12), transparent 70%),
    linear-gradient(170deg, #06150f 0%, #050f0c 55%, #040b09 100%);
  --ink: #effff9;
  --ink-soft: #d3ece3;
  --muted: #9dbab0;
  --accent: #3de2b4;
  --danger: #ff9d9d;
  --danger-surface: rgba(255, 120, 120, 0.1);
  --hairline: rgba(61, 226, 180, 0.12);
  --focus: rgba(61, 226, 180, 0.55);

  --header-bg: rgba(4, 12, 9, 0.82);
  --header-line: rgba(61, 226, 180, 0.12);

  --panel-face: linear-gradient(160deg, #173d31 0%, #11302a 48%, #0d251e 100%);
  --panel-side: #06170f;
  --panel-drop: rgba(0, 0, 0, 0.45);
  --panel-rim: rgba(255, 255, 255, 0.1);
  --panel-edge: rgba(61, 226, 180, 0.13);

  --well: #07160f;
  --well-edge: rgba(61, 226, 180, 0.18);
  --well-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55);

  --key-primary-face: linear-gradient(180deg, #66f0c8 0%, #45e1b4 55%, #33cfa2 100%);
  --key-primary-side: #11936e;
  --key-primary-ink: #03271b;
  --key-secondary-face: linear-gradient(180deg, #25533f 0%, #1c4233 100%);
  --key-secondary-side: #0a261c;
  --key-secondary-ink: #c6f7e6;
  --key-drop: rgba(0, 0, 0, 0.35);
  --ghost-hover: rgba(61, 226, 180, 0.09);

  --coin-face: radial-gradient(circle at 30% 28%, #3fdbac 0%, #1bb98c 52%, #119c76 100%);
  --coin-side: #0a7356;
  --coin-light-face: radial-gradient(circle at 30% 28%, #35433e 0%, #27322e 52%, #1d2724 100%);
  --coin-light-side: #0c1311;
  --coin-light-ink: #5eeab9;
  --coin-light-rim: rgba(255, 255, 255, 0.16);
  --coin-drop: rgba(0, 0, 0, 0.45);

  --row-hover: rgba(61, 226, 180, 0.06);
  --row-active: rgba(61, 226, 180, 0.11);
  --row-active-edge: rgba(61, 226, 180, 0.22);

  --chat-head: linear-gradient(135deg, #15ac7d 0%, #0d8b65 100%);
  --chat-bg: linear-gradient(180deg, #08201a 0%, #061611 100%);
  --bubble: linear-gradient(150deg, #1ab889 0%, #10a074 55%, #0c8b65 100%);
  --bubble-side: #07664b;
  --bubble-tail: #0a7a59;
  --time: rgba(223, 255, 243, 0.58);
  --composer-bg: linear-gradient(180deg, #0c261e 0%, #09201a 100%);
  --input-face: #f4fcf9;
  --input-ink: #0b3b2e;

  --frame-track: rgba(61, 226, 180, 0.14);
  --status-bg: rgba(255, 255, 255, 0.045);

  --toast-face: linear-gradient(180deg, #66f0c8 0%, #45e1b4 100%);
  --toast-side: #11936e;
  --toast-ink: #03271b;

  --dialog-face: linear-gradient(165deg, #173d31 0%, #0f2b23 100%);
  --dialog-drop: 0 40px 90px rgba(0, 0, 0, 0.6);
  --backdrop: rgba(1, 8, 6, 0.72);

  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.18, 0.92, 0.24, 1.12);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);

  font-family:
    ui-rounded, "SF Pro Rounded", "Varela Round", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --page: #e9fbf4;
    --page-gradient:
      radial-gradient(58rem 38rem at 8% -12%, rgba(21, 200, 148, 0.2), transparent 70%),
      radial-gradient(50rem 36rem at 96% 26%, rgba(167, 243, 208, 0.75), transparent 70%),
      linear-gradient(160deg, #f3fefa 0%, #e2f9f0 55%, #cff3e3 100%);
    --ink: #0b3b2e;
    --ink-soft: #1f4a3d;
    --muted: #55746a;
    --accent: #0a8f66;
    --danger: #b4233b;
    --danger-surface: rgba(220, 60, 80, 0.08);
    --hairline: rgba(11, 90, 67, 0.1);
    --focus: rgba(15, 168, 121, 0.45);
    --header-bg: rgba(241, 253, 249, 0.84);
    --header-line: rgba(11, 90, 67, 0.1);
    --panel-face: linear-gradient(160deg, #ffffff 0%, #fbfefd 50%, #f0faf5 100%);
    --panel-side: #c7e7d9;
    --panel-drop: rgba(11, 90, 67, 0.15);
    --panel-rim: #ffffff;
    --panel-edge: rgba(18, 170, 122, 0.1);
    --well: #eef9f4;
    --well-edge: rgba(18, 170, 122, 0.22);
    --well-shadow: inset 0 2px 6px rgba(11, 90, 67, 0.08);
    --key-primary-face: linear-gradient(180deg, #19b888 0%, #0f9c71 55%, #0c8a64 100%);
    --key-primary-side: #06573f;
    --key-primary-ink: #ffffff;
    --key-secondary-face: linear-gradient(180deg, #ffffff 0%, #f3fcf8 55%, #e3f5ed 100%);
    --key-secondary-side: #b7e0cf;
    --key-secondary-ink: #0a6a4f;
    --key-drop: rgba(11, 90, 67, 0.16);
    --ghost-hover: rgba(15, 168, 121, 0.08);
    --coin-light-face: radial-gradient(circle at 30% 28%, #ffffff 0%, #f4fcf9 50%, #dcf3ea 100%);
    --coin-light-side: #a9dcc7;
    --coin-light-ink: #14ae7e;
    --coin-light-rim: rgba(255, 255, 255, 0.9);
    --coin-drop: rgba(6, 63, 47, 0.28);
    --row-hover: rgba(18, 170, 122, 0.06);
    --row-active: rgba(18, 170, 122, 0.1);
    --row-active-edge: rgba(18, 170, 122, 0.2);
    --chat-bg: linear-gradient(180deg, #f1fcf7 0%, #e3f8ef 100%);
    --time: rgba(11, 59, 46, 0.55);
    --composer-bg: linear-gradient(180deg, #e8f9f1 0%, #dcf5ea 100%);
    --input-face: #ffffff;
    --frame-track: rgba(18, 170, 122, 0.16);
    --status-bg: rgba(255, 255, 255, 0.7);
    --toast-face: linear-gradient(180deg, #19b888 0%, #0f9c71 100%);
    --toast-side: #06573f;
    --toast-ink: #ffffff;
    --dialog-face: linear-gradient(165deg, #ffffff 0%, #f1fbf6 100%);
    --dialog-drop: 0 40px 90px rgba(7, 61, 48, 0.25);
    --backdrop: rgba(6, 60, 45, 0.32);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #e9fbf4;
  --page-gradient:
    radial-gradient(58rem 38rem at 8% -12%, rgba(21, 200, 148, 0.2), transparent 70%),
    radial-gradient(50rem 36rem at 96% 26%, rgba(167, 243, 208, 0.75), transparent 70%),
    linear-gradient(160deg, #f3fefa 0%, #e2f9f0 55%, #cff3e3 100%);
  --ink: #0b3b2e;
  --ink-soft: #1f4a3d;
  --muted: #55746a;
  --accent: #0a8f66;
  --danger: #b4233b;
  --danger-surface: rgba(220, 60, 80, 0.08);
  --hairline: rgba(11, 90, 67, 0.1);
  --focus: rgba(15, 168, 121, 0.45);
  --header-bg: rgba(241, 253, 249, 0.84);
  --header-line: rgba(11, 90, 67, 0.1);
  --panel-face: linear-gradient(160deg, #ffffff 0%, #fbfefd 50%, #f0faf5 100%);
  --panel-side: #c7e7d9;
  --panel-drop: rgba(11, 90, 67, 0.15);
  --panel-rim: #ffffff;
  --panel-edge: rgba(18, 170, 122, 0.1);
  --well: #eef9f4;
  --well-edge: rgba(18, 170, 122, 0.22);
  --well-shadow: inset 0 2px 6px rgba(11, 90, 67, 0.08);
  --key-primary-face: linear-gradient(180deg, #19b888 0%, #0f9c71 55%, #0c8a64 100%);
  --key-primary-side: #06573f;
  --key-primary-ink: #ffffff;
  --key-secondary-face: linear-gradient(180deg, #ffffff 0%, #f3fcf8 55%, #e3f5ed 100%);
  --key-secondary-side: #b7e0cf;
  --key-secondary-ink: #0a6a4f;
  --key-drop: rgba(11, 90, 67, 0.16);
  --ghost-hover: rgba(15, 168, 121, 0.08);
  --coin-light-face: radial-gradient(circle at 30% 28%, #ffffff 0%, #f4fcf9 50%, #dcf3ea 100%);
  --coin-light-side: #a9dcc7;
  --coin-light-ink: #14ae7e;
  --coin-light-rim: rgba(255, 255, 255, 0.9);
  --coin-drop: rgba(6, 63, 47, 0.28);
  --row-hover: rgba(18, 170, 122, 0.06);
  --row-active: rgba(18, 170, 122, 0.1);
  --row-active-edge: rgba(18, 170, 122, 0.2);
  --chat-bg: linear-gradient(180deg, #f1fcf7 0%, #e3f8ef 100%);
  --time: rgba(11, 59, 46, 0.55);
  --composer-bg: linear-gradient(180deg, #e8f9f1 0%, #dcf5ea 100%);
  --input-face: #ffffff;
  --frame-track: rgba(18, 170, 122, 0.16);
  --status-bg: rgba(255, 255, 255, 0.7);
  --toast-face: linear-gradient(180deg, #19b888 0%, #0f9c71 100%);
  --toast-side: #06573f;
  --toast-ink: #ffffff;
  --dialog-face: linear-gradient(165deg, #ffffff 0%, #f1fbf6 100%);
  --dialog-drop: 0 40px 90px rgba(7, 61, 48, 0.25);
  --backdrop: rgba(6, 60, 45, 0.32);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--page);
}

body {
  position: relative;
  isolation: isolate;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--page);
  transition: color 320ms ease;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background: var(--page-gradient);
}

button,
input,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

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

[hidden] {
  display: none !important;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.glyph {
  display: block;
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  overflow: visible;
}


.coin {
  --coin: 40px;
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--coin);
  height: var(--coin);
  color: #ffffff;
  font-size: var(--coin);
  line-height: 1;
  border-radius: 50%;
  background: var(--coin-face);
  box-shadow:
    0.045em 0.085em 0 var(--coin-side),
    0.06em 0.2em 0.28em var(--coin-drop),
    inset 0.035em 0.045em 0.03em rgba(255, 255, 255, 0.5),
    inset -0.03em -0.05em 0.06em rgba(6, 63, 47, 0.25);
  place-items: center;
}

.coin > .glyph {
  width: 54%;
  height: 54%;
  filter: drop-shadow(0.02em 0.035em 0.012em rgba(8, 94, 70, 0.5));
}

.coin--light {
  color: var(--coin-light-ink);
  background: var(--coin-light-face);
  box-shadow:
    0.045em 0.085em 0 var(--coin-light-side),
    0.06em 0.2em 0.28em var(--coin-drop),
    inset 0.035em 0.045em 0.03em var(--coin-light-rim),
    inset -0.03em -0.05em 0.06em rgba(10, 106, 79, 0.14);
}

.coin--light > .glyph {
  filter: drop-shadow(0.02em 0.035em 0.012em rgba(10, 106, 79, 0.25));
}

.coin--xs {
  --coin: 26px;
}

.coin--sm {
  --coin: 30px;
}

.coin--md {
  --coin: 44px;
}

.coin--lg {
  --coin: 54px;
}

.coin--xl {
  --coin: 76px;
}

.coin__label {
  font-size: 0.34em;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.coin:not(.coin--light) .coin__label,
.coin:not(.coin--light) > b {
  text-shadow: 0 0.06em 0 rgba(6, 63, 47, 0.5);
}


.clay {
  border-radius: 26px;
  background: var(--panel-face);
  box-shadow:
    0 7px 0 var(--panel-side),
    0 22px 44px var(--panel-drop),
    inset 0 1px 0 var(--panel-rim),
    inset 0 0 0 1px var(--panel-edge);
}


.button {
  --key-face: var(--key-secondary-face);
  --key-side: var(--key-secondary-side);
  --key-ink: var(--key-secondary-ink);
  position: relative;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 20px;
  color: var(--key-ink);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-radius: 16px;
  background: var(--key-face);
  box-shadow:
    0 5px 0 var(--key-side),
    0 10px 20px var(--key-drop),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 0 rgba(0, 0, 0, 0.07);
  transform: translateY(0);
  transition:
    transform 180ms var(--ease-smooth),
    box-shadow 180ms var(--ease-smooth),
    filter 220ms ease,
    opacity 220ms ease;
}

.button .glyph {
  width: 1.3em;
  height: 1.3em;
}

.button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    0 6px 0 var(--key-side),
    0 14px 24px var(--key-drop),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 0 rgba(0, 0, 0, 0.07);
}

.button:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--key-side),
    0 3px 8px var(--key-drop),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07);
  transition-duration: 70ms;
}

.button:focus-visible,
.icon-button:focus-visible,
.icon-action:focus-visible,
.contact-link:focus-visible,
.dialog-close:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.button:disabled {
  cursor: wait;
  opacity: 0.62;
  filter: none;
  transform: none;
}

.button--primary {
  --key-face: var(--key-primary-face);
  --key-side: var(--key-primary-side);
  --key-ink: var(--key-primary-ink);
}

.button--ghost {
  color: var(--accent);
  background: transparent;
  box-shadow: none;
}

.button--ghost:hover {
  background: var(--ghost-hover);
  box-shadow: none;
  transform: none;
}

.button--ghost:active {
  box-shadow: none;
  transform: scale(0.97);
}

.button[data-running="true"] {
  --key-face: var(--key-secondary-face);
  --key-side: var(--key-secondary-side);
  --key-ink: var(--danger);
}

.button.is-done {
  animation: key-done 520ms var(--ease-pop);
}


.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--header-line);
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  transition: background 320ms ease;
}

.site-header__inner {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 32px));
  min-height: 66px;
  margin: 0 auto;
}

.site-header__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.brand {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.02em;
}

.brand img {
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(18, 170, 122, 0.3);
}

.offline-badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 5px 12px 5px 6px;
  color: var(--key-secondary-ink);
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 14px;
  background: var(--key-secondary-face);
  box-shadow:
    0 3px 0 var(--key-secondary-side),
    0 8px 16px var(--key-drop),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.offline-badge__coin {
  --coin: 26px;
  transition:
    background 320ms ease,
    color 320ms ease;
}

.offline-badge[data-ready="true"] .offline-badge__coin {
  color: #ffffff;
  background: var(--coin-face);
  box-shadow:
    0.045em 0.085em 0 var(--coin-side),
    0.06em 0.2em 0.28em var(--coin-drop),
    inset 0.035em 0.045em 0.03em rgba(255, 255, 255, 0.5),
    inset -0.03em -0.05em 0.06em rgba(6, 63, 47, 0.25);
}

.offline-badge[data-ready="true"] .offline-badge__coin > .glyph {
  filter: drop-shadow(0.02em 0.035em 0.012em rgba(8, 94, 70, 0.5));
}

.offline-badge.is-arriving .offline-badge__coin {
  animation: coin-pop 620ms var(--ease-pop);
}

.icon-button {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--coin-light-ink);
  font-size: 1.08rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background: var(--coin-light-face);
  box-shadow:
    1px 3px 0 var(--coin-light-side),
    2px 7px 12px var(--coin-drop),
    inset 1px 2px 1px var(--coin-light-rim);
  transition:
    transform 180ms var(--ease-smooth),
    box-shadow 180ms var(--ease-smooth);
  place-items: center;
}

.icon-button .glyph {
  width: 20px;
  height: 20px;
}

.icon-button:hover {
  transform: translateY(-1px);
}

.icon-button:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 var(--coin-light-side),
    1px 3px 6px var(--coin-drop),
    inset 1px 2px 1px var(--coin-light-rim);
}

.theme-button.is-changing .glyph {
  animation: theme-pop 460ms var(--ease-pop);
}


main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.connect {
  display: grid;
  grid-template-areas:
    "hero scanner"
    "guide scanner";
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 38px clamp(32px, 5vw, 76px);
  align-items: start;
  padding: clamp(40px, 6vw, 80px) 0 clamp(52px, 7vw, 92px);
}

.hero {
  grid-area: hero;
  align-self: end;
}

.eyebrow {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  max-width: 13ch;
  margin-bottom: 18px;
  font-size: clamp(2.45rem, 5vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.hero__lead {
  max-width: 40ch;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.6;
}

.workspace--scanner {
  grid-area: scanner;
  min-width: 0;
}

.scan-card {
  padding: clamp(18px, 2.4vw, 26px);
}

.scan-card__head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.scan-card__head h2 {
  margin-bottom: 4px;
  font-size: clamp(1.18rem, 1.8vw, 1.42rem);
  letter-spacing: -0.02em;
}

.scan-card__head p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.45;
}


.viewfinder {
  --vf-bracket: rgba(94, 234, 185, 0.7);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: size;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  background: radial-gradient(120% 90% at 50% 38%, #103b2e 0%, #072019 46%, #030c09 100%);
  box-shadow:
    inset 0 3px 14px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(61, 226, 180, 0.16);
}

.reader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 640px;
  height: 480px;
  overflow: hidden;
  opacity: 0;
  transform: scale(var(--reader-scale, 1));
  transform-origin: 0 0;
  transition: opacity 360ms ease;
}

.viewfinder[data-state="live"] .reader,
.viewfinder[data-state="done"] .reader {
  opacity: 1;
}

.reader video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

#qr-shaded-region {
  display: none !important;
}

.viewfinder__scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  transition:
    opacity 320ms ease,
    transform 480ms var(--ease-smooth);
  place-items: center;
}

.viewfinder[data-state="idle"] {
  cursor: pointer;
}

.viewfinder:not([data-state="idle"]) .viewfinder__scene {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94);
}

.vf-phone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3.4em;
  align-items: center;
  width: 33em;
  height: 62em;
  padding: 9em 4em 5em;
  font-size: 1cqh;
  border-radius: 6.4em;
  background: linear-gradient(165deg, #24332e 0%, #121b18 100%);
  box-shadow:
    inset 0 0 0 0.7em #0b1210,
    inset 0 0.6em 0 rgba(255, 255, 255, 0.08),
    0 3em 7em rgba(0, 0, 0, 0.55);
  transform: rotate(-5deg);
  animation: vf-float 5.6s ease-in-out infinite;
}

.vf-phone__island {
  position: absolute;
  top: 2.8em;
  left: 50%;
  width: 10em;
  height: 2.6em;
  border-radius: 1.3em;
  background: #050807;
  transform: translateX(-50%);
}

.vf-phone__qr {
  display: block;
  width: 24em;
  height: 24em;
  padding: 2.6em;
  border-radius: 3.6em;
  background: #ffffff;
  box-shadow: 0 1em 2.4em rgba(0, 0, 0, 0.35);
}

.vf-phone__qr .glyph {
  width: 100%;
  height: 100%;
  color: #083528;
}

.vf-phone__line {
  display: block;
  width: 21em;
  height: 2.2em;
  border-radius: 1.1em;
  background: rgba(255, 255, 255, 0.16);
}

.vf-phone__line--short {
  width: 13em;
  margin-top: -1.8em;
  background: rgba(94, 234, 185, 0.4);
}

.viewfinder__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: min(78cqw, 78cqh);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: vf-breathe 3.4s ease-in-out infinite;
}

.viewfinder__frame i {
  position: absolute;
  width: 17%;
  height: 17%;
  border: 0 solid var(--vf-bracket);
}

.viewfinder__frame i:nth-child(1) {
  top: 0;
  left: 0;
  border-top-width: 4px;
  border-left-width: 4px;
  border-top-left-radius: 18px;
}

.viewfinder__frame i:nth-child(2) {
  top: 0;
  right: 0;
  border-top-width: 4px;
  border-right-width: 4px;
  border-top-right-radius: 18px;
}

.viewfinder__frame i:nth-child(3) {
  bottom: 0;
  left: 0;
  border-bottom-width: 4px;
  border-left-width: 4px;
  border-bottom-left-radius: 18px;
}

.viewfinder__frame i:nth-child(4) {
  right: 0;
  bottom: 0;
  border-right-width: 4px;
  border-bottom-width: 4px;
  border-bottom-right-radius: 18px;
}

.viewfinder__frame::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
  border-radius: 18px;
  box-shadow:
    0 0 0 2px rgba(94, 234, 185, 0.55),
    0 0 38px rgba(94, 234, 185, 0.45);
}

.viewfinder__beam {
  position: absolute;
  inset: 0 7%;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent calc(50% - 9px),
    rgba(94, 234, 185, 0.14) calc(50% - 1px),
    #b9fbe4 50%,
    rgba(94, 234, 185, 0.14) calc(50% + 1px),
    transparent calc(50% + 9px)
  );
}

.viewfinder[data-state="live"] {
  --vf-bracket: #5eeab9;
}

.viewfinder[data-state="live"] .viewfinder__frame {
  animation: none;
}

.viewfinder[data-state="live"] .viewfinder__beam {
  opacity: 1;
  animation: vf-beam 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.viewfinder.is-hit .viewfinder__frame::after {
  animation: vf-hit 560ms var(--ease-out);
}

.viewfinder__done {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  gap: 14px;
  justify-items: center;
  color: #effff9;
  font-size: 1.05rem;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(4, 30, 22, 0.62), rgba(2, 10, 8, 0.86));
  transition: opacity 280ms ease;
  place-content: center;
}

.viewfinder[data-state="done"] .viewfinder__done {
  opacity: 1;
}

.viewfinder[data-state="done"] .viewfinder__done .coin {
  animation: coin-pop 720ms var(--ease-pop) both;
}

.viewfinder[data-state="done"] .viewfinder__done strong {
  animation: rise-in 520ms 160ms var(--ease-smooth) both;
}

.viewfinder[data-state="done"] .viewfinder__frame {
  opacity: 0;
  transition: opacity 240ms ease;
}


.progress-card {
  margin-top: 16px;
}

.progress-card:not([hidden]) {
  animation: rise-in 420ms var(--ease-smooth) both;
}

.progress-labels {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.progress-labels > span {
  flex: 1;
  min-width: 0;
}

.progress-labels strong {
  flex: 0 0 auto;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.progress-reset {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  margin: -6px -8px -6px 4px;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  background: transparent;
  transition:
    color 200ms ease,
    background 200ms ease;
}

.progress-reset:hover,
.progress-reset:focus-visible {
  color: var(--accent);
  outline: none;
  background: var(--ghost-hover);
}

.progress-reset .glyph {
  width: 14px;
  height: 14px;
}

.frames {
  display: flex;
  gap: 4px;
  height: 10px;
}

.frames i {
  flex: 1 1 0;
  min-width: 3px;
  border-radius: 4px;
  background: var(--frame-track);
  transition: background 240ms ease;
}

.frames i.is-received {
  background: linear-gradient(180deg, #5eeab9 0%, #1bb98c 100%);
  box-shadow: 0 2px 0 #0a7356;
}

.frames i.is-new {
  animation: frame-in 520ms var(--ease-pop);
}

.frames--bar {
  display: block;
  overflow: hidden;
  border-radius: 5px;
  background: var(--frame-track);
}

.frames--bar span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #1bb98c 0%, #5eeab9 100%);
  transform: scaleX(var(--frames-progress, 0));
  transform-origin: left center;
  transition: transform 320ms var(--ease-smooth);
}

.status {
  margin: 14px 0 0;
  padding: 11px 14px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
  border-radius: 14px;
  background: var(--status-bg);
}

.status[data-tone="success"] {
  color: var(--accent);
  background: rgba(61, 226, 180, 0.08);
}

.status[data-tone="error"] {
  color: var(--danger);
  background: var(--danger-surface);
}

.scan-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.scan-actions {
  margin-top: 18px;
}

.scan-actions .button {
  flex: 1 1 200px;
}

.scan-card__note {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: center;
}

.scan-card__note .glyph {
  width: 14px;
  height: 14px;
  color: var(--accent);
}


.paste-transfer {
  interpolate-size: allow-keywords;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--panel-face);
  box-shadow:
    0 6px 0 var(--panel-side),
    0 18px 36px var(--panel-drop),
    inset 0 1px 0 var(--panel-rim),
    inset 0 0 0 1px var(--panel-edge);
}

.paste-transfer summary {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  border-radius: 22px;
}

.paste-transfer summary::-webkit-details-marker {
  display: none;
}

.paste-transfer__summary {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}

.paste-transfer__summary > span {
  font-weight: 800;
}

.paste-transfer__summary small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

.paste-transfer__toggle {
  width: 22px;
  height: 22px;
  color: var(--accent);
  transition: transform 300ms var(--ease-pop);
}

.paste-transfer[open] .paste-transfer__toggle {
  transform: rotate(135deg);
}

.paste-transfer::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size 420ms var(--ease-smooth),
    content-visibility 420ms allow-discrete,
    opacity 260ms ease;
}

.paste-transfer[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.paste-transfer__content {
  padding: 0 18px 20px;
}

.paste-transfer__content p {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.paste-transfer__content label,
.editor-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
  transform-origin: left center;
  transition:
    color 240ms ease,
    transform 360ms var(--ease-smooth);
}

.paste-transfer__content:focus-within label {
  color: var(--ink);
  transform: translate3d(3px, 0, 0);
}

.paste-transfer textarea,
.editor-form input,
.editor-form textarea {
  width: 100%;
  padding: 13px 14px;
  color: var(--ink);
  line-height: 1.45;
  border: 0;
  border-radius: 16px;
  outline: none;
  background: var(--well);
  box-shadow:
    var(--well-shadow),
    inset 0 0 0 1px var(--well-edge);
  caret-color: var(--accent);
}

.paste-transfer textarea {
  min-height: 112px;
  margin-bottom: 16px;
  resize: vertical;
  font-size: 0.9rem;
  transform: translate3d(0, 0, 0);
  transition:
    background-color 320ms ease,
    box-shadow 380ms var(--ease-smooth),
    transform 380ms var(--ease-smooth);
}

.paste-transfer textarea:focus,
.paste-transfer textarea:focus-visible {
  outline: none;
  box-shadow:
    var(--well-shadow),
    inset 0 0 0 2px var(--accent),
    0 0 0 4px rgba(61, 226, 180, 0.1);
  transform: translate3d(0, -2px, 0);
}

.paste-transfer .form-actions {
  justify-content: flex-end;
}


.guide {
  grid-area: guide;
  min-width: 0;
}

.guide__title {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guide__steps {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide__steps li {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.guide__steps li:not(:last-child)::after {
  position: absolute;
  top: 56px;
  bottom: -16px;
  left: 21px;
  width: 2px;
  content: "";
  border-radius: 1px;
  background: var(--hairline);
}

.guide__steps .coin b {
  position: absolute;
  right: -0.12em;
  bottom: -0.1em;
  display: grid;
  width: 1.75em;
  height: 1.75em;
  color: var(--accent);
  font-size: 0.26em;
  font-weight: 900;
  text-shadow: none;
  border-radius: 50%;
  background: var(--page);
  box-shadow:
    0 0 0 1px var(--well-edge),
    0 3px 8px var(--coin-drop);
  place-items: center;
}

.guide__copy {
  min-width: 0;
  padding-top: 2px;
}

.guide__copy strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
}

.guide__copy small {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.proof li {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 700;
}


.results-panel {
  position: relative;
  scroll-margin-top: 80px;
  padding: clamp(28px, 4vw, 48px) 0 clamp(44px, 6vw, 76px);
}

.results-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.results-toolbar__title {
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.card-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.results-toolbar h2 {
  margin-bottom: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.results-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.session-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.session-note[data-dirty="true"] {
  color: var(--accent);
  font-weight: 700;
}

.session-note[data-dirty="true"] .coin {
  color: #ffffff;
  background: var(--coin-face);
  box-shadow:
    0.045em 0.085em 0 var(--coin-side),
    0.06em 0.2em 0.28em var(--coin-drop),
    inset 0.035em 0.045em 0.03em rgba(255, 255, 255, 0.5);
  animation: coin-pop 620ms var(--ease-pop);
}

.search-box {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  margin-bottom: 22px;
  padding: 0 16px;
  color: var(--muted);
  border-radius: 16px;
  background: var(--well);
  box-shadow:
    var(--well-shadow),
    inset 0 0 0 1px var(--well-edge);
  transition: box-shadow 320ms var(--ease-smooth);
}

.search-box:focus-within {
  box-shadow:
    var(--well-shadow),
    inset 0 0 0 2px var(--accent),
    0 0 0 4px rgba(61, 226, 180, 0.1);
}

.search-box .glyph {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.search-box input {
  flex: 1;
  min-width: 0;
  height: 52px;
  color: var(--ink);
  font-size: 1rem;
  border: 0;
  outline: 0;
  background: transparent;
}

.chat-workspace {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.contact-list {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 4px;
  max-height: calc(100vh - 112px);
  padding: 8px;
  overflow: auto;
  border-radius: 24px;
  scrollbar-width: thin;
}

.contact-link {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  border: 0;
  border-radius: 16px;
  background: transparent;
  transition:
    background 220ms ease,
    box-shadow 220ms ease,
    transform 300ms var(--ease-smooth);
}

.contact-link:hover {
  background: var(--row-hover);
}

.contact-link.is-active {
  background: var(--row-active);
  box-shadow: inset 0 0 0 1px var(--row-active-edge);
}

.contact-avatar {
  transition: transform 380ms var(--ease-pop);
}

.contact-link.is-active .contact-avatar {
  color: #ffffff;
  background: var(--coin-face);
  box-shadow:
    0.045em 0.085em 0 var(--coin-side),
    0.06em 0.2em 0.28em var(--coin-drop),
    inset 0.035em 0.045em 0.03em rgba(255, 255, 255, 0.5),
    inset -0.03em -0.05em 0.06em rgba(6, 63, 47, 0.25);
  transform: scale(1.04);
}

.contact-link__identity {
  min-width: 0;
}

.contact-link__identity strong,
.contact-link__identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-link__identity strong {
  font-size: 0.95rem;
}

.contact-link__identity small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
}

.chat-results {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.contact-list[hidden] + .chat-results {
  grid-column: 1 / -1;
}

.chat-card {
  overflow: hidden;
  scroll-margin-top: 88px;
  border-radius: 28px;
}

.chat-card__header {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  padding: 14px 16px 14px 18px;
  color: #ffffff;
  background: var(--chat-head);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.chat-card__identity {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.chat-card__identity-copy {
  min-width: 0;
}

.chat-card__avatar {
  --coin-light-face: radial-gradient(circle at 30% 28%, #ffffff 0%, #f4fcf9 50%, #dcf3ea 100%);
  --coin-light-side: #0a6f53;
  --coin-light-ink: #0f9c71;
  --coin-light-rim: rgba(255, 255, 255, 0.9);
}

.chat-card h3 {
  margin-bottom: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 1.08rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-number {
  margin: 3px 0 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-action {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--coin-light-ink);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background: var(--coin-light-face);
  box-shadow:
    1px 3px 0 var(--coin-light-side),
    2px 7px 12px var(--coin-drop),
    inset 1px 2px 1px var(--coin-light-rim);
  transition:
    transform 260ms var(--ease-pop),
    box-shadow 200ms ease,
    opacity 180ms ease;
  place-items: center;
}

.icon-action .glyph {
  width: 20px;
  height: 20px;
}

.icon-action:hover {
  transform: translateY(-2px);
}

.icon-action:active {
  transform: translateY(2px);
}

.chat-card__header .icon-action {
  --coin-light-face: radial-gradient(circle at 30% 28%, #ffffff 0%, #f4fcf9 50%, #dcf3ea 100%);
  --coin-light-side: #0a6f53;
  --coin-light-ink: #0f9c71;
  --coin-light-rim: rgba(255, 255, 255, 0.9);
  --coin-drop: rgba(3, 40, 30, 0.35);
}

.message-list {
  display: grid;
  gap: 14px;
  align-content: end;
  min-height: 300px;
  max-height: min(62vh, 680px);
  padding: 36px 22px 28px;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-color: rgba(61, 226, 180, 0.38) transparent;
  background: var(--chat-bg);
}

.message-list.is-positioning {
  scroll-behavior: auto;
}

.message-list::-webkit-scrollbar {
  width: 8px;
}

.message-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 4px;
  background: rgba(61, 226, 180, 0.34);
  background-clip: padding-box;
}

.message-row {
  display: grid;
  justify-items: end;
  min-height: 48px;
}

.message-row--actions-open {
  position: relative;
  z-index: 8;
}

.message-row__content {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.message-content {
  display: grid;
  flex: 0 1 auto;
  justify-items: end;
  width: fit-content;
  max-width: min(720px, calc(100% - 56px));
  min-width: 0;
}

.message-row--actions-open .message-content {
  max-width: min(720px, calc(100% - 154px));
}

.message-bubble {
  position: relative;
  width: fit-content;
  min-width: min(160px, 100%);
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 20px 20px 6px 20px;
  background: var(--bubble);
  box-shadow:
    0 4px 0 var(--bubble-side),
    0 12px 22px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform 360ms var(--ease-smooth),
    box-shadow 420ms ease;
}

.message-bubble::after {
  position: absolute;
  right: -5px;
  bottom: -6px;
  width: 11px;
  height: 11px;
  content: "";
  border-radius: 50%;
  background: var(--bubble-tail);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.message-bubble:hover {
  transform: translateY(-2px);
}

.message-bubble p {
  margin-bottom: 0;
  color: #ffffff;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-content time {
  display: block;
  margin-top: 9px;
  padding-right: 6px;
  color: var(--time);
  font-size: 0.72rem;
  text-align: right;
}


.message-action-menu {
  --message-action-axis-x: -80px;
  --message-action-diagonal-x: -69px;
  --message-action-upper-y: -40px;
  --message-action-lower-y: 40px;
  position: relative;
  z-index: 2;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

.message-action-menu[data-open="true"] {
  z-index: 10;
}

.message-action-menu .icon-action {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 40px;
  height: 40px;
  color: #ffffff;
  border: 0;
  border-radius: 50%;
  background: var(--coin-face);
  box-shadow:
    2px 4px 0 var(--coin-side),
    3px 8px 12px var(--coin-drop),
    inset 1px 2px 1px rgba(255, 255, 255, 0.45),
    inset -1px -2px 2px rgba(6, 63, 47, 0.25);
  will-change: transform, opacity;
}

.message-action-menu .icon-action .glyph {
  filter: drop-shadow(0.5px 1px 0.4px rgba(8, 94, 70, 0.5));
}

.message-action-toggle {
  z-index: 4;
  overflow: hidden;
  transition:
    background 250ms ease,
    box-shadow 250ms ease;
}

.message-action-toggle::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 28%, #15a97c 0%, #0b7a59 55%, #075b45 100%);
  transition: opacity 180ms ease;
}

.message-action-toggle span {
  position: relative;
  z-index: 1;
  display: grid;
  transition: transform 300ms var(--ease-pop);
  place-items: center;
}

.message-action-option {
  z-index: 3;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(90deg) scale(0.78);
  transform-origin: center;
  transition:
    transform 250ms var(--ease-soft),
    opacity 180ms ease,
    visibility 0s linear 250ms;
}

.message-action-menu[data-open="true"] .message-action-toggle {
  box-shadow:
    2px 4px 0 var(--coin-side),
    3px 8px 14px var(--coin-drop),
    0 0 0 6px rgba(61, 226, 180, 0.1);
}

.message-action-menu[data-open="true"] .message-action-toggle::before {
  opacity: 1;
}

.message-action-menu[data-open="true"] .message-action-toggle span {
  transform: rotate(135deg);
}

.message-action-menu[data-open="true"] .message-action-option {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition:
    transform 250ms var(--ease-standard),
    opacity 180ms ease,
    visibility 0s;
}

.message-action-menu[data-open="true"] .message-action-option--edit {
  transform: translate3d(var(--message-action-axis-x), 0, 0) rotate(0deg)
    scale(1);
}

.message-action-menu[data-open="true"] .message-action-option--share {
  transform: translate3d(
      var(--message-action-diagonal-x),
      var(--message-action-upper-y),
      0
    )
    rotate(0deg) scale(1);
}

.message-action-menu[data-open="true"] .message-action-option--copy {
  transform: translate3d(
      var(--message-action-diagonal-x),
      var(--message-action-lower-y),
      0
    )
    rotate(0deg) scale(1);
}

.chat-composer {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px 18px;
  background: var(--composer-bg);
  box-shadow: inset 0 1px 0 var(--hairline);
}

.chat-composer__input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  color: var(--input-ink);
  font-size: 0.95rem;
  border: 0;
  border-radius: 18px;
  outline: 0;
  background: var(--input-face);
  box-shadow:
    inset 0 2px 6px rgba(6, 78, 59, 0.1),
    inset 0 0 0 1px var(--well-edge);
  transition:
    box-shadow 320ms ease,
    transform 320ms var(--ease-smooth);
}

.chat-composer__input::placeholder {
  color: rgba(6, 78, 59, 0.48);
}

.chat-composer__input:focus {
  box-shadow:
    inset 0 2px 6px rgba(6, 78, 59, 0.1),
    inset 0 0 0 2px #1bb98c,
    0 0 0 4px rgba(61, 226, 180, 0.14);
  transform: translateY(-1px);
}

.chat-composer__save {
  display: grid;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  padding: 0;
  color: #ffffff;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background: var(--coin-face);
  box-shadow:
    2px 5px 0 var(--coin-side),
    3px 10px 16px var(--coin-drop),
    inset 1px 2px 1px rgba(255, 255, 255, 0.45),
    inset -1px -2px 2px rgba(6, 63, 47, 0.25);
  transition:
    transform 260ms var(--ease-pop),
    box-shadow 200ms ease;
  place-items: center;
}

.chat-composer__save .glyph {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0.5px 1px 0.4px rgba(8, 94, 70, 0.5));
}

.chat-composer__save:hover,
.chat-composer__save:focus-visible {
  outline: none;
  transform: translateY(-2px) scale(1.04);
}

.chat-composer__save:active {
  box-shadow:
    1px 1px 0 var(--coin-side),
    2px 4px 8px var(--coin-drop),
    inset 1px 2px 1px rgba(255, 255, 255, 0.45);
  transform: translateY(3px) scale(0.97);
}

.empty-search {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 34px 20px;
  color: var(--muted);
  text-align: center;
}

.empty-chat {
  margin-bottom: 0;
  color: var(--muted);
  text-align: center;
}

.results-panel[data-render-motion="enter"] .contact-link {
  animation: contact-enter 480ms var(--ease-out) backwards;
  animation-delay: var(--motion-delay, 170ms);
}

.results-panel[data-render-motion="enter"] .chat-card {
  animation: chat-surface-enter 420ms 170ms ease backwards;
}

.results-panel[data-render-motion="enter"] .chat-card__header {
  animation: chat-header-enter 560ms 220ms var(--ease-smooth) backwards;
}

.results-panel[data-render-motion="enter"] .message-row {
  animation: message-enter 360ms var(--ease-out) backwards;
  animation-delay: var(--motion-delay, 280ms);
}

.results-panel[data-render-motion="enter"] .chat-composer {
  animation: composer-enter 680ms 390ms var(--ease-smooth) backwards;
}

.results-panel[data-render-motion="switch"] .chat-card {
  animation: chat-switch 420ms var(--ease-smooth) backwards;
}

.results-panel[data-render-motion="append"] .message-row.is-new {
  animation: message-enter 340ms var(--ease-out) backwards;
}

.results-panel[data-render-motion="append"] .message-row.is-new .message-bubble {
  animation: bubble-land 520ms var(--ease-pop) backwards;
}


.action-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 30;
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: min(92vw, 480px);
  margin: 0;
  padding: 10px 18px 10px 10px;
  color: var(--toast-ink);
  font-weight: 800;
  line-height: 1.35;
  border-radius: 16px;
  background: var(--toast-face);
  box-shadow:
    0 5px 0 var(--toast-side),
    0 18px 34px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, 0);
  animation: toast-enter 460ms var(--ease-smooth) both;
}

.action-toast .coin {
  --coin: 30px;
  --coin-light-face: radial-gradient(circle at 30% 28%, #ffffff 0%, #f4fcf9 50%, #dcf3ea 100%);
  --coin-light-side: rgba(3, 39, 27, 0.35);
  --coin-light-ink: #0f9c71;
  --coin-light-rim: rgba(255, 255, 255, 0.9);
  --coin-drop: rgba(3, 39, 27, 0.2);
}

.action-toast.is-leaving {
  opacity: 0;
  animation: none;
  transform: translate(-50%, 8px) scale(0.98);
  transition:
    opacity 240ms ease,
    transform 260ms var(--ease-soft);
}


.editor-dialog {
  width: min(540px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  color: var(--ink);
  border: 0;
  border-radius: 28px;
  background: var(--dialog-face);
  box-shadow:
    0 8px 0 var(--panel-side),
    var(--dialog-drop),
    inset 0 1px 0 var(--panel-rim),
    inset 0 0 0 1px var(--panel-edge);
}

.editor-dialog[open] {
  animation: dialog-enter 460ms var(--ease-spring) both;
}

.editor-dialog.is-closing {
  animation: dialog-exit 240ms var(--ease-soft) both;
}

.editor-dialog::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  animation: backdrop-enter 280ms ease both;
}

.editor-dialog.is-closing::backdrop {
  animation: backdrop-exit 240ms ease both;
}

.editor-form {
  position: relative;
  padding: 26px 24px 24px;
}

.dialog-badge {
  display: grid;
  margin: 0 auto 16px;
}

.editor-dialog[open] .dialog-badge {
  animation: coin-drop 760ms 120ms var(--ease-pop) both;
}

.dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transition: background 200ms ease;
  place-items: center;
}

.dialog-close:hover {
  background: var(--ghost-hover);
}

.dialog-close .glyph {
  width: 20px;
  height: 20px;
}

.editor-heading {
  margin-bottom: 18px;
  text-align: center;
}

.editor-heading h2 {
  margin-bottom: 0;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.app-export-summary {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 8px 0 0;
  color: var(--accent);
  font-weight: 800;
}

.dialog-steps {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.dialog-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.dialog-steps li > span:last-child {
  padding-top: 4px;
}

.dialog-steps .coin b {
  font-size: 0.46em;
  font-weight: 900;
}

.editor-form input {
  height: 52px;
}

.editor-form input + label {
  margin-top: 16px;
}

.editor-form textarea {
  resize: vertical;
  line-height: 1.5;
}

.editor-form input:focus,
.editor-form textarea:focus {
  box-shadow:
    var(--well-shadow),
    inset 0 0 0 2px var(--accent),
    0 0 0 4px rgba(61, 226, 180, 0.1);
}

.app-export-dialog textarea {
  min-height: 0;
  color: var(--muted);
  font-size: 0.8rem;
  word-break: break-all;
}

.dialog-note {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.dialog-note .glyph {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.dialog-note.is-done {
  color: var(--accent);
  font-weight: 800;
}

.dialog-note.is-done .glyph {
  animation: coin-pop 520ms var(--ease-pop);
}

.editor-form .form-actions {
  justify-content: flex-end;
  margin-top: 22px;
}

footer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 40px;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
  border-top: 1px solid var(--hairline);
}


[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  transition:
    opacity 700ms ease,
    transform 820ms var(--ease-smooth);
}

[data-reveal][data-reveal-delay="1"] {
  transition-delay: 110ms;
}

[data-reveal][data-reveal-delay="2"] {
  transition-delay: 220ms;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.is-ready .hero .eyebrow {
  animation: rise-in 700ms 40ms var(--ease-smooth) both;
}

body.is-ready .hero h1 {
  animation: rise-in 820ms 120ms var(--ease-smooth) both;
}

body.is-ready .hero__lead {
  animation: rise-in 860ms 220ms var(--ease-smooth) both;
}

body.is-ready .guide__title {
  animation: rise-in 700ms 320ms var(--ease-smooth) both;
}


@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes coin-pop {
  0% {
    transform: scale(0.4) rotate(-24deg);
  }
  55% {
    transform: scale(1.14) rotate(6deg);
  }
  78% {
    transform: scale(0.95) rotate(-2deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes coin-drop {
  0% {
    opacity: 0;
    transform: translateY(-26px) scale(0.35) rotate(-40deg);
  }
  45% {
    opacity: 1;
  }
  70% {
    transform: translateY(3px) scale(1.06) rotate(6deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes key-done {
  0% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-2px) scale(1.04);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes vf-float {
  0%,
  100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-2.4em) rotate(-3deg);
  }
}

@keyframes vf-breathe {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.95;
  }
}

@keyframes vf-beam {
  from {
    transform: translateY(-40%);
  }
  to {
    transform: translateY(40%);
  }
}

@keyframes vf-hit {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  35% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes frame-in {
  0% {
    transform: scaleY(0.3);
  }
  60% {
    transform: scaleY(1.35);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes bubble-land {
  0% {
    transform: translateY(10px) scale(0.92);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes contact-enter {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes chat-surface-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes chat-header-enter {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes chat-switch {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.994);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes message-enter {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes composer-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes theme-pop {
  0% {
    opacity: 0;
    transform: rotate(-100deg) scale(0.55);
  }
  70% {
    transform: rotate(8deg) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translate(-50%, 14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dialog-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

@keyframes backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes backdrop-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}


@media (max-width: 980px) {
  .connect {
    grid-template-areas:
      "hero"
      "scanner"
      "guide";
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-top: clamp(28px, 6vw, 48px);
  }

  .hero {
    align-self: start;
  }

  h1 {
    max-width: 16ch;
  }
}

@media (max-width: 760px) {
  .brand span {
    display: none;
  }

  .site-header__inner {
    min-height: 60px;
  }

  h1 {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }

  .scan-card {
    padding: 16px;
  }

  .viewfinder {
    border-radius: 18px;
  }

  .results-toolbar {
    align-items: stretch;
  }

  .results-toolbar__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .results-toolbar__actions .button {
    padding-inline: 12px;
  }

  .chat-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .contact-list {
    position: static;
    display: flex;
    gap: 8px;
    max-height: none;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .contact-list::-webkit-scrollbar {
    display: none;
  }

  .contact-link {
    flex: 0 0 172px;
    scroll-snap-align: start;
  }

  .chat-card__header {
    gap: 10px;
    padding: 12px 12px 12px 14px;
  }

  .chat-card__header .item-actions {
    gap: 6px;
  }

  .chat-card__header .icon-action {
    width: 36px;
    height: 36px;
  }

  .message-list {
    padding: 30px 14px 24px;
  }

  .message-row__content {
    gap: 10px;
  }

  .message-content {
    max-width: calc(100% - 54px);
  }

  .message-row--actions-open .message-content {
    max-width: calc(100% - 146px);
  }

  .message-action-menu {
    --message-action-axis-x: -72px;
    --message-action-diagonal-x: -60px;
    --message-action-upper-y: -40px;
    --message-action-lower-y: 40px;
  }

  .editor-form .form-actions,
  .paste-transfer .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .action-toast {
    bottom: 16px;
    width: calc(100% - 32px);
  }
}

@media (max-width: 480px) {
  .offline-badge {
    padding-right: 6px;
  }

  .offline-badge__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .results-toolbar__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .results-toolbar__actions .button--primary {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}