:root {
  color-scheme: dark;
  --bg: #0f172a;
  --panel: rgba(17, 24, 39, 0.94);
  --panel-2: rgba(31, 41, 55, 0.9);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --soft: #94a3b8;
  --border: rgba(148, 163, 184, 0.25);
  --accent: #38bdf8;
  --accent-2: #22d3ee;
  --danger: #fb7185;
  --ok: #86efac;
  --warning: #facc15;
  --shadow: 0 24px 70px rgba(2, 6, 23, 0.48);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 0%, rgba(56, 189, 248, 0.22), transparent 31rem),
    radial-gradient(circle at 88% 8%, rgba(168, 85, 247, 0.16), transparent 28rem),
    linear-gradient(180deg, #0f172a 0%, #020617 100%);
  padding-bottom: var(--safe-bottom);
}

button, input, textarea, select { font: inherit; }
button, .file-button {
  border: 0;
  border-radius: 14px;
  padding: 0.75rem 1rem;
  color: #06121f;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-weight: 850;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 12px 30px rgba(56, 189, 248, 0.18);
  text-align: center;
}
button:hover, .file-button:hover { transform: translateY(-1px); }
button:active, .file-button:active { transform: translateY(0); opacity: 0.9; }
button.ghost, .file-button.ghost { background: rgba(148, 163, 184, 0.12); color: var(--text); box-shadow: none; border: 1px solid var(--border); }
button.danger, .danger { color: #fecdd3; border-color: rgba(251, 113, 133, 0.45); }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.file-button input { position: fixed; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.tab:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible, .file-button:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  transform: translateY(0);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: var(--accent);
  color: #06121f;
  z-index: 1000;
}
.skip-link:focus { top: 1rem; }

.app-header {
  max-width: 1220px;
  margin: 0 auto;
  padding: calc(2rem + env(safe-area-inset-top, 0px)) 1rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.eyebrow { margin: 0 0 0.35rem; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; font-weight: 900; }
h1 { margin: 0; font-size: clamp(2.15rem, 5vw, 4.7rem); line-height: 0.92; letter-spacing: -0.055em; }
h2 { margin: 0 0 1rem; font-size: 1.35rem; }
h3 { margin: 0; font-size: 1.1rem; }
p { line-height: 1.55; }
.subtitle { color: var(--muted); max-width: 880px; margin: 0.85rem 0 0; }
.header-actions, .actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }

.tabs {
  max-width: 1220px;
  margin: 0.5rem auto 0;
  padding: 0.35rem;
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  background: rgba(15, 23, 42, 0.76);
  border: 1px solid var(--border);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  scrollbar-width: thin;
}
.tab { white-space: nowrap; background: transparent; color: var(--muted); box-shadow: none; border: 1px solid transparent; }
.tab.active { background: rgba(56, 189, 248, 0.14); color: var(--text); border-color: rgba(56, 189, 248, 0.32); }

.layout { max-width: 1220px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.panel { display: none; }
.panel.active { display: block; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: minmax(0, 1.14fr) minmax(340px, 0.86fr); }
.create-grid { align-items: start; }

.card, .incoming-hero {
  background: linear-gradient(180deg, rgba(31, 41, 55, 0.9), rgba(17, 24, 39, 0.97));
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.15rem;
  box-shadow: var(--shadow);
}
.incoming-hero { margin-bottom: 1rem; }

.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.section-head.compact { margin-bottom: 0.8rem; }
.controls-stack { display: grid; gap: 0.7rem; min-width: 250px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
label { display: grid; gap: 0.38rem; color: var(--muted); font-weight: 650; }
label.wide { grid-column: 1 / -1; }
.small-label { min-width: 180px; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
  padding: 0.75rem 0.85rem;
}
input[type="checkbox"] { width: auto; accent-color: #38bdf8; }
textarea { resize: vertical; }
::placeholder { color: rgba(203, 213, 225, 0.55); }
.hint { color: var(--soft); font-size: 0.94rem; margin: 0.3rem 0 0; }
.status { min-height: 1.3rem; color: var(--soft); margin: 0.85rem 0 0; }
.status.ok { color: var(--ok); }
.status.error { color: var(--danger); }
.status.warning { color: var(--warning); }

.visual-frame {
  display: block;
  width: 100%;
  min-height: 560px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #020617;
}
.visual-frame.tall { min-height: 650px; }

.visibility-card {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.42);
}
.visibility-card summary { cursor: pointer; color: var(--text); font-weight: 900; }
.visibility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; margin-top: 1rem; }
.visibility-group { margin: 0; padding: 0.85rem; border: 1px solid var(--border); border-radius: 16px; display: grid; gap: 0.35rem; }
.visibility-group legend { padding: 0 0.35rem; color: var(--accent); font-weight: 900; }
.check-line { display: flex; align-items: center; gap: 0.45rem; color: var(--muted); font-weight: 650; }
.sticky-actions { position: sticky; bottom: var(--safe-bottom); margin-top: 1rem; padding-top: 0.8rem; background: linear-gradient(180deg, transparent, rgba(17, 24, 39, 0.98) 24%); z-index: 5; }

.share-stage { position: relative; min-height: 340px; display: grid; place-items: center; overflow: hidden; border-radius: 22px; }
.share-flight-card {
  position: absolute;
  z-index: 2;
  width: min(74%, 340px);
  min-height: 210px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(135deg, rgba(248,250,252,.95), rgba(125,211,252,.95));
  color: #0f172a;
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.94) rotateX(0deg);
  box-shadow: 0 30px 90px rgba(56,189,248,.28);
  pointer-events: none;
}
.share-flight-card::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(255,255,255,.55), transparent 30%);
  opacity: 0;
}
.share-flight-card.ready { opacity: 1; }
.share-flight-card.fly {
  animation: cardFly 900ms cubic-bezier(.2,.78,.18,1) both;
}
.share-flight-card.fly::after { animation: trailPulse 900ms ease both; }
.flight-name { font-size: 1.45rem; line-height: 1.05; font-weight: 950; letter-spacing: -.04em; text-align: center; }
.flight-meta { color: rgba(15,23,42,.7); text-align: center; font-weight: 700; }

@keyframes cardFly {
  0% { opacity: 1; transform: translate3d(0, 16px, 0) scale(.96) rotateX(0deg) rotateZ(0); filter: blur(0); }
  45% { opacity: 1; transform: translate3d(0, -18px, 0) scale(.86) rotateX(18deg) rotateZ(-2deg); filter: blur(0); }
  100% { opacity: 0; transform: translate3d(42vw, -46vh, 0) scale(.18) rotateX(42deg) rotateZ(14deg); filter: blur(2px); }
}
@keyframes trailPulse {
  0%, 25% { opacity: 0; transform: scale(.5); }
  55% { opacity: .65; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

.qr-host {
  min-height: 320px;
  width: 100%;
  display: grid;
  place-items: center;
  background: rgba(248, 250, 252, 0.04);
  border: 1px dashed var(--border);
  border-radius: 20px;
  padding: 1rem;
  color: var(--muted);
}
.qr-svg { width: min(100%, 360px); height: auto; border-radius: 18px; background: #fff; padding: 8px; }
.result {
  margin-top: 1rem;
  min-height: 3rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.9rem;
  background: rgba(15, 23, 42, 0.55);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.result.error { color: var(--danger); border-color: rgba(251, 113, 133, 0.45); }
.result.ok { color: var(--ok); border-color: rgba(134, 239, 172, 0.45); }
.result strong { color: var(--text); }
a { color: var(--accent-2); }

.contacts-list { display: grid; gap: 0.85rem; }
.small-list { gap: .55rem; }
.contact-card {
  position: relative;
  display: grid;
  gap: 0.55rem;
  padding: 0.95rem;
  padding-right: 6.4rem;
  min-height: 7rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.45);
}
.record-mini-qr {
  position: absolute;
  right: 0.95rem;
  top: 0.95rem;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  padding: 5px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.92);
  color: #0f172a;
  font-weight: 950;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  cursor: pointer;
}
.record-mini-qr svg { width: 64px; height: 64px; display: block; }
.record-mini-qr:hover { transform: translateY(-1px) scale(1.02); }
.contact-card p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.record-top { display: flex; justify-content: space-between; align-items: start; gap: 0.8rem; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 32px; border-radius: 999px; font-size: 0.75rem; font-weight: 900; border: 1px solid var(--border); color: var(--accent); }
.badge.own { color: var(--ok); }
.badge.received { color: var(--warning); }
.badge.expired { color: var(--danger); }

pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem;
  color: #dbeafe;
}
code { color: #bae6fd; }
.audit-list { color: var(--muted); padding-left: 1.2rem; }
.audit-list li { margin: 0.55rem 0; line-height: 1.5; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(100%, 760px);
  max-height: min(92vh, 900px);
  overflow: auto;
  background: linear-gradient(180deg, rgba(31, 41, 55, 0.98), rgba(17, 24, 39, 0.99));
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.15rem;
  box-shadow: var(--shadow);
}
.wide-modal { width: min(100%, 860px); }
.category-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.category-buttons button { min-height: 72px; font-size: 1.05rem; }
.modal-actions { margin-top: 1rem; }

@media (max-width: 940px) {
  .app-header { flex-direction: column; }
  .grid.two { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; }
  .controls-stack { width: 100%; }
  .visual-frame, .visual-frame.tall { min-height: 560px; }
}

@media (max-width: 680px) {
  .contact-card { padding-right: 0.95rem; }
  .record-mini-qr { position: static; width: 70px; height: 70px; justify-self: start; }
  .record-mini-qr svg { width: 58px; height: 58px; }
  .layout { padding: 0.8rem 0.7rem 2rem; }
  .app-header { padding: calc(1.2rem + env(safe-area-inset-top, 0px)) 0.7rem 0.7rem; }
  .form-grid, .visibility-grid, .category-buttons { grid-template-columns: 1fr; }
  .tabs { margin-inline: 0.7rem; }
  .card, .incoming-hero { border-radius: 20px; padding: 0.9rem; }
  .visual-frame, .visual-frame.tall { min-height: 520px; }
  .header-actions, .actions { width: 100%; }
  .actions button, .header-actions button, .file-button { flex: 1 1 auto; }
  .share-stage { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .share-flight-card.fly { opacity: 0; transform: scale(.7); }
}

/* User-facing transfer choices */
.transfer-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}
.transfer-choice {
  min-height: 96px;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  color: var(--text);
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid var(--border);
  box-shadow: none;
}
.transfer-choice.primary-choice {
  color: #06121f;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 18px 42px rgba(56, 189, 248, 0.22);
}
.transfer-choice strong {
  display: block;
  font-size: 1rem;
  line-height: 1.15;
}
.transfer-choice small {
  display: block;
  margin-top: 0.25rem;
  color: currentColor;
  opacity: 0.76;
  font-weight: 700;
  line-height: 1.3;
}
.choice-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1.35rem;
}
.transfer-choice.primary-choice .choice-icon {
  background: rgba(6, 18, 31, 0.10);
}
.advanced-transfer {
  margin-top: 0.9rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.36);
}
.advanced-transfer summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 850;
}
.extra-actions { margin-top: 0.85rem; }
.format-explainer {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1rem;
  color: var(--muted);
}
.format-explainer p { margin: 0; }
.payload-label { margin-top: 1rem; }
.qr-host.qr-focus {
  border-color: rgba(56, 189, 248, 0.72);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12), 0 18px 46px rgba(56, 189, 248, 0.12);
}
.qr-modal-card { width: min(100%, 660px); }
.qr-modal-host {
  min-height: 420px;
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 22px;
  background: rgba(248, 250, 252, 0.04);
}
.qr-modal-host .qr-svg,
.qr-modal-host svg {
  width: min(100%, 420px);
  height: auto;
  border-radius: 18px;
  background: #fff;
  padding: 8px;
}
@media (max-width: 680px) {
  .transfer-choice-grid { grid-template-columns: 1fr; }
  .transfer-choice { min-height: 86px; }
  .qr-modal-host { min-height: 340px; }
}

/* 3.3 VIZONDO simple creation flow */
/* overflow-x: clip — клиппинг горизонтали БЕЗ создания скролл-контейнера,
   иначе ломается position: sticky (липкое меню разделов и кнопка «Сохранить»). */
html, body { width: 100%; max-width: 100%; }
body { overflow-x: clip; }
*, *::before, *::after { min-width: 0; }
[hidden] { display: none !important; }
button, .file-button { min-height: 56px; }
input, textarea, select { min-height: 52px; }
textarea { max-width: 100%; overflow-wrap: anywhere; }

.create-category-chooser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0.9rem 0 0.8rem;
}
.create-category-card {
  min-height: 156px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.45rem;
  align-content: start;
  text-align: left;
  color: var(--text);
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid var(--border);
  box-shadow: none;
}
.create-category-card.active,
.create-category-card[aria-pressed="true"] {
  color: #06121f;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: rgba(255,255,255,.36);
  box-shadow: 0 18px 44px rgba(56, 189, 248, 0.24);
}
.create-category-card strong { display: block; font-size: 1.15rem; line-height: 1.1; }
.create-category-card small { display: block; color: currentColor; opacity: 0.78; font-weight: 750; line-height: 1.35; }
.category-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  font-size: 1.45rem;
}
.create-category-card.active .category-icon { background: rgba(6,18,31,.10); }
.create-form-body {
  margin-top: 0.8rem;
  animation: sheetIn 180ms ease-out both;
}

.segmented-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.segmented-filters button {
  min-height: 48px;
  padding-inline: 0.9rem;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid var(--border);
  box-shadow: none;
}
.segmented-filters button.active,
.segmented-filters button[aria-pressed="true"] {
  color: #06121f;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: rgba(255,255,255,.32);
}
.mycards-category-group {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.34);
}
.mycards-category-group + .mycards-category-group { margin-top: 0.9rem; }
.mycards-category-group > h3 { color: var(--accent); }

.send-actions {
  display: grid;
  gap: 0.85rem;
}
.send-sheet {
  animation: sheetIn 180ms ease-out both;
}
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .create-category-chooser { grid-template-columns: 1fr; }
  .create-category-card { min-height: 120px; }
}

@media (max-width: 680px) {
  body { overscroll-behavior-x: none; }
  button, .file-button { min-height: 58px; border-radius: 18px; }
  .modal { place-items: end center; padding: 0.75rem 0.75rem calc(0.75rem + var(--safe-bottom)); }
  .modal-card { width: 100%; max-height: calc(100dvh - 1.5rem - var(--safe-bottom)); border-radius: 24px; }
  .send-after-save-modal { place-items: end center; }
  .send-sheet { border-radius: 26px 26px 18px 18px; }
  .transfer-choice { grid-template-columns: 52px 1fr; min-height: 94px; }
  .choice-icon { width: 52px; height: 52px; }
  .sticky-actions { position: static; background: transparent; padding-top: 0.7rem; }
  .sticky-actions button { flex: 1 1 100%; }
  .visual-frame, .visual-frame.tall { min-height: 440px; }
  .qr-svg { width: min(100%, 380px); }
}


/* VIZONDO 3.3 mobile navigation and polished hero */
.app-header h1 {
  text-transform: uppercase;
  letter-spacing: -0.065em;
}
.app-header .subtitle {
  font-size: clamp(1rem, 2vw, 1.14rem);
}
.tabs {
  overscroll-behavior-x: contain;
}
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 16px;
  line-height: 1.15;
}
@media (max-width: 680px) {
  .tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    gap: 0.45rem;
    padding: 0.45rem;
    margin: 0.55rem 0.7rem 0;
    border-radius: 22px;
  }
  .tab {
    width: 100%;
    min-height: 48px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    padding: 0.62rem 0.35rem;
    font-size: 0.88rem;
    text-align: center;
    box-shadow: none;
  }
  .app-header h1 {
    font-size: clamp(2.75rem, 16vw, 4.4rem);
    line-height: 0.88;
  }
  .eyebrow {
    max-width: 100%;
    letter-spacing: 0.045em;
    font-size: 0.72rem;
  }
  .subtitle {
    margin-top: 0.75rem;
  }
}
@media (max-width: 380px) {
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab { font-size: 0.86rem; }
}

/* VIZONDO 3.3: About, legal, accessibility and high contrast */
html[data-contrast="high"] {
  --bg: #000000;
  --panel: #000000;
  --panel-2: #111111;
  --text: #ffffff;
  --muted: #ffffff;
  --soft: #f8fafc;
  --border: rgba(255, 255, 255, 0.78);
  --accent: #ffff00;
  --accent-2: #00ffff;
  --danger: #ff8fa3;
  --ok: #7dff9d;
  --warning: #ffff66;
  --shadow: 0 0 0 2px rgba(255,255,255,.28);
  color-scheme: dark;
}
html[data-contrast="high"] body {
  background: #000000;
}
html[data-contrast="high"] .card,
html[data-contrast="high"] .incoming-hero,
html[data-contrast="high"] .modal-card,
html[data-contrast="high"] .tabs {
  background: #000000;
  border-color: var(--border);
}
html[data-contrast="high"] button,
html[data-contrast="high"] .file-button,
html[data-contrast="high"] .button-link {
  background: #ffff00;
  color: #000000;
  border: 2px solid #ffffff;
  box-shadow: none;
}
html[data-contrast="high"] button.ghost,
html[data-contrast="high"] .file-button.ghost,
html[data-contrast="high"] .ghost-link {
  background: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
}
html[data-contrast="high"] input,
html[data-contrast="high"] textarea,
html[data-contrast="high"] select {
  background: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
}
html[data-contrast="high"] .tab.active,
html[data-contrast="high"] .segmented-filters button.active,
html[data-contrast="high"] .create-category-card.active,
html[data-contrast="high"] .transfer-choice.primary-choice {
  background: #ffff00;
  color: #000000;
  border-color: #ffffff;
}
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: 14px;
  padding: 0.75rem 1rem;
  color: #06121f;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(56, 189, 248, 0.18);
}
.ghost-link {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text);
  box-shadow: none;
  border: 1px solid var(--border);
}
.developer-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1rem 0;
  padding: 1.1rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(56,189,248,0.10), rgba(34,211,238,0.06)), rgba(15, 23, 42, 0.42);
  box-shadow: var(--shadow);
}
.developer-card p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.dev-avatar {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center; font-weight: 900; font-size: 1.45rem; letter-spacing: 0.04em;
  color: #04121f; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 26px rgba(34,211,238,0.30);
}
.dev-info { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.dev-name { font-size: 1.18rem; font-weight: 800; color: var(--text); line-height: 1.15; }
.dev-role { font-size: 0.9rem; color: var(--accent); font-weight: 700; }
.dev-contact {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  color: var(--muted); text-decoration: none; overflow-wrap: anywhere;
}
.dev-contact svg { flex: 0 0 auto; color: var(--accent); }
.dev-contact:hover, .dev-contact:focus-visible { color: var(--text); }
.dev-contact:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 560px) {
  .developer-card { flex-direction: column; align-items: flex-start; text-align: left; }
}
.about-actions { margin-bottom: 1rem; }
.about-language { max-width: 320px; margin: 1rem 0; }
.legal-links {
  display: grid;
  gap: 0.65rem;
  padding-left: 1.2rem;
  color: var(--muted);
}
.legal-links a { font-weight: 850; }
.compact-links { margin: 0.7rem 0 1rem; }
.terms-check {
  align-items: flex-start;
  margin-top: 0.7rem;
}
.terms-check input { margin-top: 0.2rem; }
.modal-title-actions { justify-content: flex-end; }
@media (max-width: 680px) {
  .modal-title-actions { width: 100%; }
  .modal-title-actions button { flex: 1 1 auto; }
  .button-link { flex: 1 1 auto; }
}

/* VIZONDO 3.3.1 smart search in My Cards */
.mycards-search-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
  margin: 0 0 0.9rem;
  padding: 0.85rem;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.12), rgba(15, 23, 42, 0.34));
}
.mycards-search-label {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 900;
}
.mycards-search-label input[type="search"] {
  min-height: 58px;
  font-size: 1.04rem;
  border-color: rgba(56, 189, 248, 0.42);
  background: rgba(2, 6, 23, 0.56);
}
.mycards-search-label input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}
.wide-search-hint {
  grid-column: 1 / -1;
}
.search-results-group {
  border-color: rgba(56, 189, 248, 0.42);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.10), rgba(15, 23, 42, 0.38));
}
.search-hit {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  background: rgba(56, 189, 248, 0.12);
  color: #dff7ff;
  font-weight: 750;
  overflow-wrap: anywhere;
}
@media (max-width: 680px) {
  .mycards-search-panel {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }
  .mycards-search-panel button {
    width: 100%;
  }
}

/* VIZONDO 3.4 i18n, language gate and translation UX */
.language-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
  overflow: auto;
  background:
    radial-gradient(circle at 20% 15%, rgba(56, 189, 248, 0.24), transparent 32rem),
    radial-gradient(circle at 78% 10%, rgba(168, 85, 247, 0.20), transparent 30rem),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.99));
}
.language-gate-v {
  position: fixed;
  inset: auto;
  font-size: min(56vw, 520px);
  line-height: .7;
  font-weight: 1000;
  letter-spacing: -0.13em;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
  user-select: none;
  transform: translateX(-0.04em);
}
.language-gate-card {
  position: relative;
  width: min(100%, 920px);
  max-height: min(92dvh, 920px);
  overflow: auto;
  padding: clamp(1rem, 3vw, 1.55rem);
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(17, 24, 39, 0.88));
  box-shadow: 0 36px 110px rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  animation: sheetIn 240ms ease-out both;
}
.language-gate-card h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.055em;
}
.language-gate-subtitle,
.language-gate-recommended,
.language-gate-note {
  color: var(--muted);
  margin: .75rem 0;
}
.language-gate-card input[type="search"] {
  margin: .75rem 0 1rem;
  min-height: 58px;
  border-radius: 20px;
  font-size: 1.04rem;
}
.language-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.language-option {
  min-height: 92px;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: .75rem;
  text-align: left;
  color: var(--text);
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: none;
}
.language-option.selected,
.language-option[aria-pressed="true"] {
  color: #06121f;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 18px 44px rgba(56, 189, 248, 0.22);
}
.language-option-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 950;
}
.language-option strong,
.language-option small {
  display: block;
  line-height: 1.25;
}
.language-option small {
  margin-top: .2rem;
  opacity: .78;
  font-weight: 700;
}
.language-continue {
  width: 100%;
  margin-top: 1rem;
  min-height: 60px;
  border-radius: 20px;
  font-size: 1.06rem;
}
.language-translation-settings,
.translation-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.38);
}
.settings-subtitle { margin-bottom: .75rem; }
.settings-grid,
.translation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  align-items: end;
}
.translation-panel[hidden] { display: none !important; }
.translation-panel h3 { margin: 0 0 .75rem; }
.translation-status { grid-column: 1 / -1; }
.original-translation-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.original-translation-toggle button[aria-pressed="true"] {
  color: #06121f;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: rgba(255,255,255,.32);
}
[dir="rtl"] body,
body[dir="rtl"] { direction: rtl; }
[dir="rtl"] .app-header,
[dir="rtl"] .section-head,
[dir="rtl"] .record-top { text-align: right; }
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] textarea,
[dir="rtl"] code,
[dir="rtl"] pre { direction: ltr; text-align: left; }
[dir="rtl"] .language-option,
[dir="rtl"] .transfer-choice { text-align: right; }

@media (max-width: 760px) {
  .language-grid,
  .settings-grid,
  .translation-grid { grid-template-columns: 1fr; }
  .language-gate-card { border-radius: 24px; }
  .language-option { min-height: 82px; }
}

/* VIZONDO 3.5 app themes, card design studio and QR logo polish */
html[data-app-theme="day"] {
  color-scheme: light;
  --bg: #f7f4ec;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-2: rgba(248, 250, 252, 0.94);
  --text: #172033;
  --muted: #475569;
  --soft: #64748b;
  --border: rgba(100, 116, 139, 0.25);
  --accent: #0ea5e9;
  --accent-2: #38bdf8;
  --shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}
html[data-app-theme="day"] body {
  background: radial-gradient(circle at 10% 0%, rgba(14, 165, 233, 0.18), transparent 32rem), linear-gradient(180deg, #fffaf0 0%, #e0f2fe 100%);
}
html[data-app-theme="night"] body {
  background: radial-gradient(circle at 8% 0%, rgba(56, 189, 248, 0.22), transparent 31rem), radial-gradient(circle at 88% 8%, rgba(168, 85, 247, 0.16), transparent 28rem), linear-gradient(180deg, #0f172a 0%, #020617 100%);
}
html[data-app-theme="ocean"] {
  --bg: #082f49; --panel: rgba(8, 47, 73, .92); --panel-2: rgba(12, 74, 110, .88); --text: #f0f9ff; --muted: #bae6fd; --soft: #7dd3fc; --border: rgba(125, 211, 252, .28); --accent: #22d3ee; --accent-2: #38bdf8;
}
html[data-app-theme="ocean"] body { background: radial-gradient(circle at 12% 8%, rgba(34,211,238,.23), transparent 32rem), linear-gradient(180deg,#082f49,#020617); }
html[data-app-theme="rose"] {
  --bg: #3f0a19; --panel: rgba(76, 5, 25, .9); --panel-2: rgba(136, 19, 55, .55); --text: #fff7fb; --muted: #fecdd3; --soft: #fda4af; --border: rgba(253, 164, 175, .32); --accent: #fb7185; --accent-2: #f9a8d4;
}
html[data-app-theme="rose"] body { background: radial-gradient(circle at 80% 0%, rgba(251,113,133,.28), transparent 30rem), linear-gradient(180deg,#3f0a19,#19040b); }
html[data-app-theme="forest"] {
  --bg: #052e16; --panel: rgba(5, 46, 22, .92); --panel-2: rgba(20, 83, 45, .72); --text: #ecfdf5; --muted: #bbf7d0; --soft: #86efac; --border: rgba(134, 239, 172, .27); --accent: #22c55e; --accent-2: #86efac;
}
html[data-app-theme="forest"] body { background: radial-gradient(circle at 14% 0%, rgba(34,197,94,.22), transparent 32rem), linear-gradient(180deg,#052e16,#020617); }
html[data-app-theme="amber"] {
  --bg: #451a03; --panel: rgba(69, 26, 3, .90); --panel-2: rgba(120, 53, 15, .70); --text: #fffbeb; --muted: #fde68a; --soft: #fcd34d; --border: rgba(251, 191, 36, .30); --accent: #f59e0b; --accent-2: #fbbf24;
}
html[data-app-theme="amber"] body { background: radial-gradient(circle at 12% 0%, rgba(245,158,11,.26), transparent 32rem), linear-gradient(180deg,#451a03,#111827); }
html[data-app-theme="violet"] {
  --bg: #2e1065; --panel: rgba(46, 16, 101, .91); --panel-2: rgba(76, 29, 149, .74); --text: #faf5ff; --muted: #ddd6fe; --soft: #c4b5fd; --border: rgba(196, 181, 253, .30); --accent: #a78bfa; --accent-2: #c084fc;
}
html[data-app-theme="violet"] body { background: radial-gradient(circle at 85% 0%, rgba(167,139,250,.24), transparent 32rem), linear-gradient(180deg,#2e1065,#020617); }
html[data-app-theme="mono"] {
  color-scheme: light;
  --bg: #e5e7eb; --panel: rgba(255,255,255,.94); --panel-2: rgba(243,244,246,.96); --text: #111827; --muted: #374151; --soft: #6b7280; --border: rgba(17,24,39,.20); --accent: #111827; --accent-2: #4b5563; --shadow: 0 24px 70px rgba(17,24,39,.14);
}
html[data-app-theme="mono"] body { background: linear-gradient(180deg,#f9fafb,#d1d5db); }
html[data-app-theme="day"] .card,
html[data-app-theme="mono"] .card,
html[data-app-theme="day"] .incoming-hero,
html[data-app-theme="mono"] .incoming-hero,
html[data-app-theme="day"] .modal-card,
html[data-app-theme="mono"] .modal-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
}
html[data-app-theme="day"] input,
html[data-app-theme="day"] textarea,
html[data-app-theme="day"] select,
html[data-app-theme="mono"] input,
html[data-app-theme="mono"] textarea,
html[data-app-theme="mono"] select {
  background: rgba(255,255,255,.82);
  color: var(--text);
}
.header-select {
  min-width: min(100%, 210px);
  color: var(--muted);
  font-size: .86rem;
}
.header-select select { min-height: 46px; padding-block: .55rem; }
.design-studio {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(56, 189, 248, .28);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(56,189,248,.10), rgba(15,23,42,.34));
}
.design-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.design-option {
  min-height: 118px;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: .7rem;
  text-align: left;
  color: var(--text);
  background: rgba(148, 163, 184, .12);
  border: 1px solid var(--border);
  box-shadow: none;
}
.design-option.active,
.design-option[aria-pressed="true"] {
  color: #06121f;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 18px 42px rgba(56,189,248,.22);
}
.design-option-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.16);
  font-size: 1.35rem;
  font-weight: 950;
}
.design-option strong,
.design-option small { display: block; line-height: 1.25; }
.design-option small { margin-top: .25rem; opacity: .76; font-weight: 750; }
.frame-title { margin: 1rem 0 .75rem; }
.compact-design-option { min-height: 92px; }
.qr-svg .vizondo-qr-v { pointer-events: none; }
@media (max-width: 900px) { .design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .header-select { flex: 1 1 100%; }
  .design-grid { grid-template-columns: 1fr; }
  .design-option { min-height: 92px; }
}

/* VIZONDO 4.0.0 production hardening: mobile overflow, long strings, and touch targets */
html,
body {
  min-height: 100vh;
  min-height: 100dvh;
}
/* VIZONDO 4.5.0-f: overflow-x только на body (НЕ на html) — иначе на мобильных html
   делает body скролл-контейнером и position:fixed нижний таб-бар «уезжает» при скролле. */
body { overflow-x: clip; }

body,
main,
section,
article,
header,
footer,
.card,
.glass,
.modal-card,
.incoming-hero,
.visual-frame,
.contact-card,
.record-card,
.preview-shell,
.qr-shell,
.qr-host,
.qr-modal-host,
.form-grid,
.actions,
.header-actions,
.modal-actions,
.modal-title-actions,
.language-gate-card,
.language-grid,
.design-grid,
.design-option,
.create-category-card,
.transfer-choice {
  max-width: 100%;
  min-width: 0;
}

h1,
h2,
h3,
h4,
p,
label,
legend,
button,
a,
.status,
.hint,
.eyebrow,
.tab,
.chip,
.badge,
.form-hint,
.empty-state,
.legal-text,
.transfer-choice,
.design-option,
.create-category-card,
.contact-card,
.record-card,
.modal-card,
.incoming-hero,
.visual-frame,
.card-title,
.card-subtitle,
.card-line,
.payload-text,
.qr-note {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: manual;
}

input,
select,
textarea {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

textarea,
pre,
code,
.payload-label textarea,
#payloadText,
#receiveInput,
#shareFallbackLink {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.actions > *,
.header-actions > *,
.modal-actions > *,
.modal-title-actions > *,
.tabs > *,
.language-actions > * {
  min-width: 0;
}

button,
.button,
.tab,
.icon-button,
.language-option,
.design-option,
.transfer-choice {
  min-height: 44px;
  touch-action: manipulation;
}

img,
svg,
canvas,
video,
iframe {
  max-width: 100%;
}

.qr-host svg,
.qr-modal-host svg,
.mini-qr svg {
  width: 100%;
  height: auto;
  max-width: 100%;
}

@media (max-width: 430px) {
  .modal-card {
    width: min(100%, calc(100dvw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))));
  }

  .modal-body,
  .legal-scroll,
  .receive-preview,
  .share-fallback-body {
    max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .actions,
  .modal-actions,
  .header-actions {
    gap: 8px;
  }

  .actions > *,
  .modal-actions > *,
  .header-actions > * {
    flex: 1 1 100%;
  }
}


/* VIZONDO 4.0.0 hardening: virtualized contact lists */
.contacts-list.is-virtualized {
  display: block;
}

.virtual-list-scroll {
  position: relative;
  width: 100%;
  max-height: min(72dvh, 760px);
  min-height: min(58dvh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 4px;
  scroll-behavior: auto;
  contain: strict;
  border-radius: 24px;
}

.virtual-list-spacer {
  position: relative;
  min-width: 0;
}

.virtual-list-item {
  width: 100%;
  contain: layout paint style;
  box-sizing: border-box;
}

.virtual-group-title {
  margin: 0 0 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  overflow-wrap: anywhere;
}

.tab.attention {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .35);
}

@media (max-width: 680px) {
  .virtual-list-scroll {
    max-height: min(74dvh, 680px);
    min-height: 430px;
    padding-right: 0;
  }
}

/* VIZONDO 3.9.0 expert fixes */
.noscript-warning {
  margin: 1rem auto;
  max-width: 1220px;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(250, 204, 21, 0.45);
  border-radius: 18px;
  background: rgba(250, 204, 21, 0.12);
  color: var(--warning);
  font-weight: 800;
}

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

.receive-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr);
  gap: 0.85rem;
  align-items: stretch;
  margin: 0.9rem 0 0.7rem;
  clear: both;
}

.receive-file-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  line-height: 1.2;
  white-space: normal;
}

.receive-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  width: 100%;
  margin: 0;
  align-items: stretch;
}

.receive-actions > button {
  width: 100%;
  min-width: 0;
  white-space: normal;
  margin: 0;
}

#panel-receive .result {
  clear: both;
}

.record-mini-qr[data-qr-loading="1"]::after {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid rgba(148, 163, 184, 0.35);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: vizondoSpin 700ms linear infinite;
}

.record-mini-qr[data-qr-ready="1"]::after {
  content: none;
}

@keyframes vizondoSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 920px) {
  .receive-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .receive-actions {
    grid-template-columns: 1fr;
  }
}

/* VIZONDO 4.0.0 predictive performance hardening */
.contact-card,
.visual-card,
.virtual-list-item {
  content-visibility: auto;
  contain-intrinsic-size: 340px;
}
.virtual-group-title {
  content-visibility: auto;
  contain-intrinsic-size: 64px;
}
@media (prefers-reduced-motion: reduce) {
  .contact-card,
  .visual-card,
  .virtual-list-item {
    scroll-margin-top: 8px;
  }
}

/* ============================================================
   VIZONDO 4.3.0 · тема "Glass" (AMOLED-стекло, спокойная цифровая вещь)
   Аддитивный слой: активен только при html[data-app-theme="glass"].
   Существующие темы и вёрстка не затрагиваются.
   ============================================================ */
html[data-app-theme="glass"] {
  color-scheme: dark;
  --bg: #000000;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-2: rgba(255, 255, 255, 0.08);
  --text: #f4f4f7;
  --muted: #9aa0ad;
  --soft: #7c8290;
  --border: rgba(255, 255, 255, 0.10);
  --accent: #8b7bff;
  --accent-2: #27e0c8;
  --danger: #ff6f8e;
  --ok: #6ee7b7;
  --warning: #ffd166;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  --tz-hue: 265;
}
html[data-app-theme="glass"] body {
  background:
    radial-gradient(130% 80% at 50% -12%, hsl(var(--tz-hue) 60% 10% / 0.55), transparent 60%),
    radial-gradient(100% 60% at 100% 115%, hsl(calc(var(--tz-hue) + 40) 60% 8% / 0.42), transparent 55%),
    #000;
  transition: background 0.9s ease;
}
/* Стеклянные поверхности */
html[data-app-theme="glass"] .card,
html[data-app-theme="glass"] .incoming-hero,
html[data-app-theme="glass"] .modal-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.55);
  border-radius: 26px;
}
html[data-app-theme="glass"] .tabs {
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border-radius: 22px;
}
html[data-app-theme="glass"] .tab[aria-selected="true"],
html[data-app-theme="glass"] .tab.active {
  background: linear-gradient(135deg, rgba(139, 123, 255, 0.30), rgba(39, 224, 200, 0.20));
  color: var(--text);
  border: 1px solid rgba(139, 123, 255, 0.50);
}
/* Типографика как интерфейс */
html[data-app-theme="glass"] .app-header h1 {
  letter-spacing: -0.05em;
  font-weight: 900;
  text-shadow: 0 0 40px rgba(139, 123, 255, 0.30);
}
html[data-app-theme="glass"] .eyebrow {
  letter-spacing: 0.24em;
  color: #a89bff;
}
/* Кнопки-стекло (вторичные); первичные сохраняют акцентный градиент через переменные */
html[data-app-theme="glass"] button.ghost,
html[data-app-theme="glass"] .file-button.ghost {
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
/* Поля ввода — стекло */
html[data-app-theme="glass"] input,
html[data-app-theme="glass"] textarea,
html[data-app-theme="glass"] select {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
}
html[data-app-theme="glass"] input:focus,
html[data-app-theme="glass"] textarea:focus,
html[data-app-theme="glass"] select:focus {
  border-color: rgba(139, 123, 255, 0.60);
  outline-color: rgba(139, 123, 255, 0.60);
}
/* Контактные значения и код — моноширинно */
html[data-app-theme="glass"] .contact-card p,
html[data-app-theme="glass"] code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
/* Glass: стекло на дополнительных поверхностях (категории, контакты, разработчик, fieldset, QR-хост) */
html[data-app-theme="glass"] .create-category-card,
html[data-app-theme="glass"] .contact-card,
html[data-app-theme="glass"] .developer-card,
html[data-app-theme="glass"] fieldset,
html[data-app-theme="glass"] .qr-modal-host {
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-radius: 20px;
}
/* Glass: градиентный аватар-плитка в библиотеке (замена белого QR-бокса для фото/больших карточек) */
.record-mini-qr.record-avatar { border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 30px rgba(0,0,0,.4); }
.record-avatar-initials { font-size: 28px; font-weight: 900; color: #fff; letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* Glass: лёгкий «рассыпанный» наклон карточек как в прототипе */
html[data-app-theme="glass"] .contact-card { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
html[data-app-theme="glass"] .contact-card:nth-child(odd) { transform: rotate(-0.55deg); }
html[data-app-theme="glass"] .contact-card:nth-child(even) { transform: rotate(0.5deg); }
html[data-app-theme="glass"] .contact-card:hover,
html[data-app-theme="glass"] .contact-card:focus-within { transform: rotate(0deg) translateY(-2px); }
/* ===== VIZONDO 4.4.0: стеклянное меню жестов (long-press) и свайп-обратная связь ===== */
html[data-app-theme="glass"] .contact-card { touch-action: pan-y; }
.card-sheet-back { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 1200; }
.card-sheet-back.open { opacity: 1; pointer-events: auto; }
.card-sheet { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 160%); width: min(520px, 92vw); z-index: 1201; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05)); backdrop-filter: blur(30px) saturate(1.2); -webkit-backdrop-filter: blur(30px) saturate(1.2); border: 1px solid rgba(255,255,255,.12); border-radius: 28px; padding: 14px; transition: transform .4s cubic-bezier(.2,.9,.2,1); box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.card-sheet.open { transform: translate(-50%, 0); }
.card-sheet-title { margin: 6px 8px 12px; font-size: 15px; font-weight: 700; color: #f4f4f7; }
.card-sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.card-sheet-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); color: #f4f4f7; font-size: 11px; cursor: pointer; min-height: auto; box-shadow: none; text-align: center; line-height: 1.2; }
.card-sheet-tile .cst-em { font-size: 22px; }
.card-sheet-tile:hover { transform: none; background: rgba(255,255,255,.09); }
.card-sheet-tile:active { transform: scale(.93); }
/* Жесты: блокируем нативное выделение/callout iOS только на время касания (чтобы свайп/долгое нажатие срабатывали) */
.contact-card.gesturing { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* ===== VIZONDO 4.4.3: карточка библиотеки ближе к прототипу (Glass) ===== */
html[data-app-theme="glass"] .contact-card { padding: 20px 18px; border-radius: 24px; }
html[data-app-theme="glass"] .contact-card h3 { font-size: clamp(21px, 5.4vw, 27px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
html[data-app-theme="glass"] .contact-card .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
html[data-app-theme="glass"] .contact-card .actions .ghost { border-radius: 16px; padding: 13px 12px; font-weight: 600; }
html[data-app-theme="glass"] .card-more-btn { font-weight: 700; }
/* ===== VIZONDO 4.4.5: библиотечная карточка в раскладке прототипа (Glass) ===== */
.card-proto { position: relative; }
.card-proto .card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.card-proto .record-mini-qr { position: static; margin: 0; flex: none; width: 70px; height: 70px; align-self: center; justify-self: auto; }
.card-proto .record-titlebox { min-width: 0; flex: 1 1 auto; padding-right: 40px; }
.card-proto .record-titlebox h3 { margin: 0; }
.card-proto .record-titlebox .hint { margin: 5px 0 0; font-size: 12px; line-height: 1.3; }
.card-proto .badge { position: absolute; top: 16px; right: 16px; }
.card-proto::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(139,123,255,.55), rgba(34,211,238,.20) 42%, rgba(255,255,255,0) 72%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
/* ===== VIZONDO 4.4.6: мини-статус (пилюля) в библиотеке ===== */
.card-status-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.3); color: #86efac; font-size: 11px; font-weight: 600; line-height: 1; max-width: 100%; }
.card-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; flex: none; }
/* ===== VIZONDO 4.4.7: «Сканируй меня» — крупный QR + «Поделиться»-герой (iPhone/Android/десктоп) ===== */
.qr-modal-host { background: #fff; border: 0; padding: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.qr-modal-host .qr-svg, .qr-modal-host svg { background: #fff; padding: 0; width: min(100%, 300px); }
.qr-modal-host.qr-too-large { background: rgba(248,250,252,0.04); border: 1px dashed var(--border); box-shadow: none; color: var(--muted); font-size: 14px; text-align: center; padding: 28px; min-height: 200px; line-height: 1.5; }
.qr-share-hero { width: 100%; margin-top: 14px; padding: 16px; font-size: 16px; font-weight: 800; border: 0; border-radius: 18px; color: #04121f; background: linear-gradient(135deg, #8b7bff, #22d3ee); box-shadow: 0 14px 36px rgba(34,211,238,.28); cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; }
.qr-share-hero:hover { transform: translateY(-1px); box-shadow: 0 18px 44px rgba(34,211,238,.36); }
.qr-share-hero:active { transform: translateY(0); }
.qr-share-hint { text-align: center; margin: 8px 0 2px; }
.qr-secondary-actions { margin-top: 10px; }
/* ===== VIZONDO 4.4.8: чище как в прототипе + обнаруживаемый статус ===== */
.card-proto .card-updated { display: none; }
.card-status-empty { background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.22); color: #93a4bd; cursor: pointer; font-weight: 600; }
.card-status-empty::before { display: none; }
.card-status-empty:hover { background: rgba(255,255,255,.09); color: #cbd5e1; }
/* ===== VIZONDO 4.4.9: #2 липкое меню разделов (закрепляется вверху с отступом) ===== */
.tabs { position: sticky; top: max(6px, env(safe-area-inset-top, 0px)); z-index: 35; }
/* ===== VIZONDO 4.4.9: #1 лейбл-строки контактов как в прототипе (Glass) ===== */
.card-rows { display: grid; gap: 7px; margin-top: 4px; }
.card-row { display: flex; align-items: baseline; gap: 10px; }
.card-row-label { flex: none; width: 78px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #7c8aa3; font-weight: 600; }
.card-row-value { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: #cbd5e1; overflow-wrap: anywhere; }
/* ===== VIZONDO 4.4.10: единая Визитница + QR-точка в углу карточки (как в прототипе) ===== */
/* own/received понятны по разделу визитницы → бейдж MY/IN в стекле скрываем (как в прототипе) */
html[data-app-theme="glass"] .card-proto .badge { display: none; }
/* живая точка → QR в углу карточки (видна только в стеклянной теме; в других
   темах раскрытие открывается тапом по аватару — функция доступна везде) */
.qr-dot { display: none; }
.card-proto .qr-dot {
  display: block; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px;
  border-radius: 50%; border: none; padding: 0; cursor: pointer; z-index: 6;
  background: radial-gradient(circle at 35% 35%, #fff, var(--accent));
  box-shadow: 0 0 0 0 rgba(139, 123, 255, .55);
  animation: vzQrPulse 2.4s infinite;
}
.card-proto .qr-dot:active { transform: scale(.9); }
@keyframes vzQrPulse {
  0% { box-shadow: 0 0 0 0 rgba(139, 123, 255, .55); }
  70% { box-shadow: 0 0 0 12px rgba(139, 123, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(139, 123, 255, 0); }
}
/* раскрытие QR — оверлеем поверх карточки: высота карточки не меняется → виртуальный список цел */
.card-qr-reveal {
  position: absolute; inset: 0; z-index: 8; border-radius: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, rgba(8, 10, 18, .95), rgba(8, 10, 18, .98));
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  padding: 14px; cursor: pointer; animation: vzQrIn .22s ease; overflow: auto;
}
@keyframes vzQrIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
/* переключатель режимов QR: Контакт / Визитка VIZONDO */
.card-qr-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); flex: none; }
.card-qr-mode { padding: 6px 12px; min-height: auto; border: none; border-radius: 9px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: none; transition: background .15s ease, color .15s ease; }
.card-qr-mode:hover { transform: none; color: var(--text); }
.card-qr-mode.active { background: var(--accent); color: #fff; }
.card-qr-box {
  width: 158px; height: 158px; max-width: 64%; box-sizing: border-box; flex: none;
  background: #fff; border-radius: 16px; padding: 11px;
  display: grid; place-items: center; box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.card-qr-box svg, .card-qr-box .qr-svg { width: 100%; height: 100%; display: block; background: #fff; }
.card-qr-cap { font-size: 11px; color: var(--muted); letter-spacing: .04em; text-align: center; max-width: 94%; line-height: 1.35; }
.card-qr-box { cursor: pointer; }
.card-qr-hint { margin-top: 6px; font-size: 10px; line-height: 1.3; color: var(--muted); opacity: .72; text-align: center; letter-spacing: .03em; }
/* подсказка категории при приёме */
.suggest-hint { margin: 0 0 12px; font-size: 13px; color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid var(--accent); border-radius: 14px; padding: 9px 13px; line-height: 1.4; }
.category-buttons button.suggested { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent); }
.suggest-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; background: var(--accent); color: #fff; vertical-align: middle; }
/* ===== VIZONDO 4.4.13: пикер «Цвет аватара» (свотчи) ===== */
.avatar-color-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
.avatar-swatch { width: 38px; height: 38px; min-height: auto; padding: 0; border-radius: 12px; border: 2px solid var(--border); background: var(--sw, var(--panel)); cursor: pointer; box-shadow: none; transition: transform .12s ease, border-color .12s ease; }
.avatar-swatch:hover { transform: translateY(-1px) scale(1.04); }
.avatar-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.avatar-swatch-auto { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 10px; background: linear-gradient(140deg, hsl(265 70% 52%), hsl(170 65% 38%)); color: #fff; font-weight: 900; font-size: 14px; }
/* ===== VIZONDO 4.4.14: тост «Отменить» + подсказка установки ===== */
.vz-toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 140%); z-index: 9999; display: flex; align-items: center; gap: 12px; max-width: min(92vw, 460px); padding: 12px 14px; border-radius: 16px; background: rgba(20, 22, 30, 0.96); color: #f4f4f7; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: transform .28s ease, opacity .28s ease; font-size: 14px; }
.vz-toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.vz-toast-msg { flex: 1; line-height: 1.3; }
.vz-toast-action { flex: none; min-height: auto; padding: 7px 12px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; }
.install-hint { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(139, 123, 255, 0.12); border: 1px solid rgba(139, 123, 255, 0.3); color: var(--text); font-size: 13px; line-height: 1.4; }
.backup-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 209, 102, 0.10); border: 1px solid rgba(255, 209, 102, 0.34); }
.backup-banner-text { flex: 1 1 220px; font-size: 13px; line-height: 1.4; color: var(--text); }
.backup-banner-actions { display: flex; gap: 8px; flex: none; }
.backup-banner-actions button { min-height: auto; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; }
/* ===== VIZONDO 4.4.11: удобство создания на мобильных — превью наверх + липкая «Сохранить» ===== */
@media (max-width: 940px) {
  /* «Живой визуал» поднимаем над формой и делаем компактнее — карточка видна при заполнении */
  .create-grid .preview-card { order: -1; }
  .create-grid .preview-card .visual-frame.tall { height: 280px; }
}
@media (max-width: 680px) {
  /* «Сохранить» снова липкая снизу на телефоне (раньше была static) — всегда под рукой */
  .sticky-actions { position: sticky; bottom: var(--safe-bottom); background: var(--bg); padding-top: 0.7rem; padding-bottom: 0.45rem; z-index: 20; }
  .sticky-actions button { flex: 1 1 100%; }
  /* запас снизу, чтобы липкая панель не перекрывала последний контент/статус */
  #saveStatus { margin-bottom: 4.5rem; }
}

/* ============================================================
   VIZONDO 4.5.0 · тема "Light" (светлая деловая) — НОВЫЙ ДЕФОЛТ.
   Аддитивный слой: активен только при html[data-app-theme="light"].
   Эталон: VIZONDO_shell_prototype_v2. Существующие темы/glass не затрагиваются.
   ============================================================ */
html[data-app-theme="light"] {
  color-scheme: light;
  --bg: #eef2f9; --bg2: #f7f9fc;
  --surface: #ffffff; --surface-2: #f6f8fc;
  --panel: #ffffff; --panel-2: #f6f8fc;
  --text: #18223b; --ink: #18223b; --muted: #6b7488; --soft: #9aa2b3;
  --border: #e6eaf3; --line: #e6eaf3; --line-2: #dde3ef;
  --accent: #2f54eb; --accent-2: #5b7cf7; --primary-soft: #eef3ff;
  --danger: #e5484d; --ok: #15803d; --ok-bg: #e8f6ed; --ok-line: #c6ebd2; --warning: #b45309;
  --av-a: #3b5bd6; --av-b: #6786ec;
  --shadow: 0 2px 6px rgba(20,30,60,.08), 0 16px 36px rgba(20,30,60,.12);
  --sh: 0 1px 3px rgba(20,30,60,.06), 0 8px 24px rgba(20,30,60,.07);
  --sh-lift: 0 2px 6px rgba(20,30,60,.08), 0 16px 36px rgba(20,30,60,.12);
}
html[data-app-theme="light"] body {
  background: radial-gradient(120% 90% at 50% 0%, #dfe7f4 0%, #eef2f9 60%, #f7f9fc 100%);
  color: var(--ink);
}
/* поверхности */
html[data-app-theme="light"] .card,
html[data-app-theme="light"] .incoming-hero,
html[data-app-theme="light"] .modal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: var(--sh);
  border-radius: 20px;
  color: var(--ink);
}
html[data-app-theme="light"] .tabs {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-radius: 18px;
}
html[data-app-theme="light"] .tab { color: var(--soft); }
html[data-app-theme="light"] .tab[aria-selected="true"],
html[data-app-theme="light"] .tab.active {
  background: var(--primary-soft);
  color: var(--accent);
  border: 1px solid #d6e1ff;
}
html[data-app-theme="light"] .app-header h1 { font-weight: 800; letter-spacing: -.04em; text-shadow: none; color: var(--ink); }
html[data-app-theme="light"] .eyebrow { letter-spacing: .12em; color: var(--muted); }
html[data-app-theme="light"] h1, html[data-app-theme="light"] h2, html[data-app-theme="light"] h3 { color: var(--ink); }
html[data-app-theme="light"] .hint, html[data-app-theme="light"] .sub, html[data-app-theme="light"] .small-label { color: var(--muted); }
/* кнопки-стекло вторичные → светлые */
html[data-app-theme="light"] button.ghost,
html[data-app-theme="light"] .file-button.ghost {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: var(--sh);
}
/* поля ввода → белые */
html[data-app-theme="light"] input,
html[data-app-theme="light"] textarea,
html[data-app-theme="light"] select {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
html[data-app-theme="light"] input::placeholder,
html[data-app-theme="light"] textarea::placeholder { color: var(--soft); }
html[data-app-theme="light"] input:focus,
html[data-app-theme="light"] textarea:focus,
html[data-app-theme="light"] select:focus { border-color: var(--accent); outline-color: var(--accent); }
/* доп. поверхности */
html[data-app-theme="light"] .create-category-card,
html[data-app-theme="light"] .contact-card,
html[data-app-theme="light"] .developer-card,
html[data-app-theme="light"] fieldset,
html[data-app-theme="light"] .qr-modal-host {
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 20px;
  color: var(--ink);
}
/* убрать «рассыпанный» наклон карточек в деловой теме */
html[data-app-theme="light"] .contact-card,
html[data-app-theme="light"] .contact-card:nth-child(odd),
html[data-app-theme="light"] .contact-card:nth-child(even) { transform: none; }
html[data-app-theme="light"] .contact-card:hover,
html[data-app-theme="light"] .contact-card:focus-within { transform: translateY(-2px); }
/* убрать градиентную рамку-«стекло» прототипной карточки */
html[data-app-theme="light"] .card-proto::before { display: none; }
/* контактные значения/лейблы → тёмный текст на светлом */
html[data-app-theme="light"] .card-row-label { color: var(--soft); }
html[data-app-theme="light"] .card-row-value { color: var(--ink); }
html[data-app-theme="light"] .record-avatar-initials { color: #fff; text-shadow: 0 1px 2px rgba(20,30,60,.18); }
/* нижний лист действий карточки → светлый */
html[data-app-theme="light"] .card-sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: var(--sh-lift);
}
html[data-app-theme="light"] .card-sheet-title { color: var(--ink); }
html[data-app-theme="light"] .card-sheet-tile {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
}
html[data-app-theme="light"] .card-sheet-tile:hover { background: var(--primary-soft); }
/* статус-пилюля → зелёная на светлом */
html[data-app-theme="light"] .card-status-pill {
  background: var(--ok-bg);
  border: 1px solid var(--ok-line);
  color: var(--ok);
}
html[data-app-theme="light"] .card-status-pill::before { background: var(--ok); box-shadow: none; }
html[data-app-theme="light"] .card-status-empty {
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  color: var(--muted);
}
html[data-app-theme="light"] .card-status-empty:hover { background: var(--primary-soft); color: var(--accent); }
/* подсказки/баннеры → светлые */
html[data-app-theme="light"] .install-hint { background: var(--primary-soft); border: 1px solid #d6e1ff; color: var(--ink); }
html[data-app-theme="light"] .suggest-hint { background: var(--primary-soft); border: 1px solid var(--accent); color: var(--ink); }
html[data-app-theme="light"] .backup-banner { background: #fff8e6; border: 1px solid #ffe2a8; }
html[data-app-theme="light"] .backup-banner-text { color: var(--ink); }
/* QR-раскрытие поверх карточки → светлое */
html[data-app-theme="light"] .card-qr-reveal { background: linear-gradient(180deg, rgba(247,249,252,.96), rgba(255,255,255,.98)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html[data-app-theme="light"] .card-qr-modes { background: var(--surface-2); border: 1px solid var(--line); }
html[data-app-theme="light"] .card-qr-mode.active { background: var(--accent); color: #fff; }
/* сегментные фильтры визитницы */
html[data-app-theme="light"] .segmented-filters button { background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
html[data-app-theme="light"] .segmented-filters button.active { background: var(--primary-soft); border-color: var(--accent); color: var(--accent); }
/* toast «Отменить» оставляем тёмным (контраст на светлом — ок) */

/* ============================================================
   VIZONDO 4.5.0-a3 · добор светлой темы (аддитивно, только light):
   онбординг языка, поиск Визитницы, бейдж MY, системные тёмные поверхности.
   ============================================================ */
/* онбординг языка */
html[data-app-theme="light"] .language-gate {
  background: radial-gradient(circle at 20% 12%, rgba(47,84,235,.10), transparent 32rem), linear-gradient(180deg, #eef2f9, #f7f9fc);
}
html[data-app-theme="light"] .language-gate-v { color: rgba(20,30,60,.05); }
html[data-app-theme="light"] .language-gate-card {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--sh-lift); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-app-theme="light"] .language-gate-card h2 { color: var(--ink); }
html[data-app-theme="light"] .language-gate-subtitle,
html[data-app-theme="light"] .language-gate-recommended,
html[data-app-theme="light"] .language-gate-note { color: var(--muted); }
html[data-app-theme="light"] .language-option {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
}
html[data-app-theme="light"] .language-option.selected,
html[data-app-theme="light"] .language-option[aria-pressed="true"] {
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: #d6e1ff; box-shadow: 0 12px 28px rgba(47,84,235,.28);
}
html[data-app-theme="light"] .language-option-icon { background: var(--primary-soft); color: var(--accent); }
html[data-app-theme="light"] .language-translation-settings,
html[data-app-theme="light"] .translation-panel { background: var(--surface-2); border: 1px solid var(--line); }
html[data-app-theme="light"] .original-translation-toggle button[aria-pressed="true"] { color: #fff; }
/* поиск в Визитнице */
html[data-app-theme="light"] .mycards-search-panel { background: var(--surface); border: 1px solid var(--line); }
html[data-app-theme="light"] .mycards-search-label input[type="search"] { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
html[data-app-theme="light"] .wide-search-hint { color: var(--muted); }
html[data-app-theme="light"] .search-results-group { background: var(--surface-2); border-color: var(--line); }
/* бейдж MY на прото-карточке скрыт (как в glass) — «Моя ·» уже есть в мете */
html[data-app-theme="light"] .card-proto .badge { display: none; }
/* системный добор тёмных поверхностей */
html[data-app-theme="light"] .visual-frame { background: var(--surface-2); }
html[data-app-theme="light"] .visibility-card { background: var(--surface-2); }
html[data-app-theme="light"] .result { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
html[data-app-theme="light"] .advanced-transfer { background: var(--surface-2); }
html[data-app-theme="light"] .mycards-category-group { background: var(--surface-2); }
html[data-app-theme="light"] .modal { background: rgba(20,30,60,.32); }
html[data-app-theme="light"] pre { background: var(--surface-2); color: var(--ink); }
html[data-app-theme="light"] code { color: var(--accent); }

/* ============================================================
   VIZONDO 4.5.0-b · нижний таб-бар (3 группы) + сегмент-подменю.
   Переменные-driven (работает на всех темах; дефолт — светлый).
   ============================================================ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: 6px;
  padding: 8px 18px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(247,249,252,0), rgba(247,249,252,.94) 42%, #f7f9fc 100%);
  backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border-top: 1px solid var(--line);
}
.tabbar-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px; border: none; background: none; color: var(--soft);
  font: inherit; min-height: auto; box-shadow: none; cursor: pointer; border-radius: 14px;
  transition: color .18s ease;
}
.tabbar-btn .tb-i { font-size: 21px; line-height: 1; }
.tabbar-btn .tb-l { font-size: 10.5px; font-weight: 700; letter-spacing: .2px; }
.tabbar-btn.on { color: var(--accent); }
.tabbar-btn:active { transform: scale(.94); }
.subnav { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.subnav[hidden] { display: none; }
.subnav-btn {
  flex: 0 0 auto; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font: inherit; font-weight: 700; font-size: 13.5px; min-height: auto; box-shadow: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.subnav-btn.active { background: var(--primary-soft); border-color: var(--accent); color: var(--accent); }
/* запас снизу, чтобы фиксированный бар не перекрывал контент */
.layout { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================
   VIZONDO 4.5.0-c · компактные «wallet»-карточки списка + стопка (эталон prototype v2).
   ============================================================ */
#myCardsList, #contactsList { gap: 0; }
#myCardsList .virtual-group-title, #contactsList .virtual-group-title { margin: 20px 2px 12px; }
.card-compact {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px;
  padding: 14px 15px; border-radius: 20px; cursor: pointer; position: relative;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 -3px 14px rgba(30,42,75,.05), var(--sh);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-compact + .card-compact { margin-top: -34px; }
.card-compact:hover, .card-compact:focus-visible { transform: translateY(-3px); box-shadow: var(--sh-lift); z-index: 5; outline: none; }
.card-compact .cc-av {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: #fff; flex: none;
  background: linear-gradient(150deg, var(--av-a, var(--accent)), var(--av-b, var(--accent-2)));
  box-shadow: 0 5px 14px rgba(47,84,235,.28);
}
.card-compact .cc-main { min-width: 0; }
.card-compact .cc-name { font-weight: 700; font-size: 16px; letter-spacing: -.2px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-compact .cc-meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-compact .cc-tail { display: flex; align-items: center; gap: 9px; flex: none; }
.card-compact .cc-mine { font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--accent); background: var(--primary-soft); border: 1px solid #d6e1ff; padding: 3px 7px; border-radius: 7px; }
.card-compact .cc-exp { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--danger); background: #fdecec; border: 1px solid #f6c9c9; padding: 3px 7px; border-radius: 7px; }
.card-compact .cc-more { width: 34px; height: 34px; min-height: auto; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--soft); font-size: 18px; line-height: 1; box-shadow: none; cursor: pointer; flex: none; }
.card-compact .cc-more:hover { background: var(--primary-soft); color: var(--accent); }
.card-compact .card-status-pill { margin-top: 6px; }
.card-compact .search-hit { grid-column: 1 / -1; margin: 8px 0 0; }
/* кнопка «＋ Создать визитку» — как в эталоне (пунктир, акцент) */
.create-card-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 14px; background: var(--surface); border: 1.5px dashed var(--line-2); color: var(--accent); font-weight: 700; font-size: 14.5px; box-shadow: none; }
.create-card-btn::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 16px; line-height: 1; }
.create-card-btn:hover { background: var(--primary-soft); border-color: var(--accent); }

/* ============================================================
   VIZONDO 4.5.0-d · главный экран «Визитница» дословно по эталону (#s-home).
   ============================================================ */
.home-title { font-size: 29px; font-weight: 800; letter-spacing: -.6px; margin: 8px 2px 14px; display: flex; align-items: center; justify-content: space-between; color: var(--ink); }
.home-gear { width: 38px; height: 38px; min-height: auto; padding: 0; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; font-size: 17px; box-shadow: var(--sh); cursor: pointer; }
.home-gear:hover { background: var(--primary-soft); color: var(--accent); }
.home-search { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 12px 15px; box-shadow: var(--sh); margin-bottom: 6px; }
.home-search-icon { flex: none; color: var(--soft); }
.home-search input { border: none; outline: none; background: none; font: inherit; font-size: 15px; color: var(--ink); width: 100%; min-height: auto; box-shadow: none; padding: 0; }
.home-search input::placeholder { color: var(--soft); }
.home-search-clear { flex: none; width: 26px; height: 26px; min-height: auto; padding: 0; border-radius: 50%; border: none; background: var(--surface-2); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: none; }
.home-search-clear:hover { background: var(--primary-soft); color: var(--accent); }
.home-sec { display: flex; align-items: center; justify-content: space-between; margin: 24px 4px 13px; }
.home-sec h2 { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 0; }
.home-sec .cnt { color: var(--soft); font-weight: 600; }
#panel-mycards .create-card-btn { display: flex; width: 100%; justify-content: center; margin: 14px 0 4px; }

/* VIZONDO 4.5.0-e · перенос глобальной шапки в вкладки (чистые экраны) */
.panel-top-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.panel-top-actions button { flex: 0 1 auto; }

/* VIZONDO 4.5.0-g · QR-точка и разворот QR на компактной карточке списка */
@keyframes vzQrPulseBlue { 0% { box-shadow: 0 0 0 0 rgba(47,84,235,.5); } 70% { box-shadow: 0 0 0 12px rgba(47,84,235,0); } 100% { box-shadow: 0 0 0 0 rgba(47,84,235,0); } }
.card-compact .qr-dot { display: block; position: relative; width: 18px; height: 18px; min-height: auto; padding: 0; border: none; border-radius: 50%; cursor: pointer; flex: none; background: radial-gradient(circle at 35% 35%, #fff, var(--accent)); box-shadow: 0 0 0 0 rgba(47,84,235,.5); animation: vzQrPulseBlue 2.4s infinite; }
.card-compact .qr-dot:active { transform: scale(.9); }
.card-compact.qr-open { min-height: 234px; }
.card-compact .card-qr-reveal { border-radius: 20px; }

/* VIZONDO 4.5.0-h · «Ещё» как меню-список (#s-more): карточка Pro + список + back */
.more-pro { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 17px; border-radius: 20px; margin-bottom: 18px; background: linear-gradient(135deg, #312e81, #2f54eb); color: #fff; box-shadow: 0 16px 36px rgba(47,84,235,.32); border: none; cursor: pointer; min-height: auto; }
.more-pro-i { width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 22px; flex: none; }
.more-pro-txt { flex: 1; min-width: 0; }
.more-pro-t { display: block; font-weight: 800; font-size: 16px; }
.more-pro-d { display: block; color: rgba(255,255,255,.82); font-size: 12.5px; margin-top: 2px; }
.more-pro-b { margin-left: auto; background: #fff; color: #2f3a8c; font-weight: 800; font-size: 12.5px; padding: 8px 14px; border-radius: 11px; flex: none; }
.more-list { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--sh); }
.more-li { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border: none; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; cursor: pointer; min-height: auto; box-shadow: none; border-radius: 0; }
.more-li:last-child { border-bottom: none; }
.more-li:hover { background: var(--primary-soft); }
.more-li-t { flex: 1; font-weight: 600; font-size: 15px; }
.more-li-c { margin-left: auto; color: var(--soft); font-size: 18px; }
.more-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; box-shadow: var(--sh); cursor: pointer; min-height: auto; }
.more-back:hover { background: var(--primary-soft); color: var(--accent); }

/* ============================================================
   VIZONDO 4.5.0-i · app-shell (надёжный пин бара) + бренд + поиск + иконки бара + чипы
   ============================================================ */
/* APP-SHELL: страница не скроллится, скроллит только #main → fixed нижний бар не «уезжает» на iOS */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
#main.layout {
  position: fixed; inset: 0; max-width: none; margin: 0;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 14px 16px calc(104px + env(safe-area-inset-bottom, 0px));
}

/* БРЕНД-ЗАГОЛОВОК: VIZONDO с бегущей цветовой гаммой визитки + ВИЗИТНИЦА */
.brand-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 2px 16px; }
.brand-text { min-width: 0; }
.brand-logo {
  display: block; font-size: clamp(28px, 8.5vw, 34px); font-weight: 900; letter-spacing: -.01em; line-height: 1;
  background: linear-gradient(100deg, var(--accent) 0%, #22d3ee 26%, var(--accent-2) 50%, #7c3aed 74%, var(--accent) 100%);
  background-size: 280% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: brandRun 7s linear infinite;
}
@keyframes brandRun { 0% { background-position: 0% 50%; } 100% { background-position: 280% 50%; } }
.brand-sub { display: block; font-size: 12px; font-weight: 800; letter-spacing: .4em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* ШЕСТЕРЁНКА → круглая кнопка настроек с медленным вращением */
.home-settings { width: 42px; height: 42px; min-height: auto; padding: 0; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--accent); display: grid; place-items: center; box-shadow: var(--sh); cursor: pointer; flex: none; }
.home-settings .gear-ico { display: grid; place-items: center; animation: gearSpin 9s linear infinite; }
.home-settings:hover { background: var(--primary-soft); }
.home-settings:hover .gear-ico { animation-duration: 2.4s; }
.home-settings:active { transform: scale(.92); }
@keyframes gearSpin { to { transform: rotate(360deg); } }

/* ПОИСК — стиль VIZONDO (фокус-кольцо акцента, аккуратнее) */
.home-search { border-radius: 16px; padding: 13px 16px; transition: border-color .18s ease, box-shadow .18s ease; }
.home-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-soft), var(--sh); }
.home-search-icon { color: var(--accent); }
.home-search input { font-size: 15.5px; }
.home-search-clear { background: var(--primary-soft); color: var(--accent); }
.home-search-clear:hover { background: var(--accent); color: #fff; }

/* ЧИПЫ КАТЕГОРИЙ принятых визиток */
.contacts-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.contacts-filters button { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-weight: 700; font-size: 13px; min-height: auto; box-shadow: none; cursor: pointer; }
.contacts-filters button.active { background: var(--primary-soft); border-color: var(--accent); color: var(--accent); }

/* НИЖНИЙ БАР — SVG-иконки + анимация нажатия (увеличение активной) */
.tabbar-btn .tb-i { display: grid; place-items: center; height: 25px; }
.tabbar-btn .tb-i svg { width: 25px; height: 25px; transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.tabbar-btn.on .tb-i svg { transform: scale(1.22) translateY(-1px); }
.tabbar-btn.on .tb-l { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .brand-logo { animation: none; }
  .home-settings .gear-ico { animation: none; }
}

/* VIZONDO 4.5.0-j · убрать нативную рамку поля поиска (type=search) + раскрытие детали из карточки */
.home-search input { -webkit-appearance: none; appearance: none; }
.home-search input::-webkit-search-decoration, .home-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ============================================================
   VIZONDO 4.5.0-k · НАСТОЯЩИЙ flex app-shell:
   колонка 100dvh → верх (сегмент) фикс, середина (#main) скроллит, низ (бар) фикс.
   Чинит: бар не прячется под тулбар Safari, сегмент «Передать|Принять» не накрывается,
   нет горизонтального/вертикального «плавания».
   ============================================================ */
html { height: 100%; }
body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none; padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
#main.layout {
  position: static; inset: auto; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  max-width: none; margin: 0; padding: 14px 16px calc(28px + env(safe-area-inset-bottom, 0px));
}
#groupSubnav { flex: 0 0 auto; margin: 0; padding: 10px 16px 2px; }
#groupSubnav[hidden] { display: none; }
.tabbar {
  position: static; left: auto; right: auto; bottom: auto; z-index: auto; flex: 0 0 auto;
  padding: 8px 18px calc(10px + env(safe-area-inset-bottom, 0px));
}

/* #1 · языковой гейт: отступ снизу у кнопок (Продолжить / Вернуться) + safe-area */
.language-gate-card { padding-bottom: calc(clamp(1rem, 3vw, 1.55rem) + env(safe-area-inset-bottom, 0px)); }
.language-continue { margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); }

/* VIZONDO 4.5.0-l · гайд «Поделиться»: пошагово, с подсветкой и стрелками */
.share-guide { margin: 0 0 14px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh); }
.sg-steps { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.sg-step { display: flex; align-items: center; gap: 9px; flex: 1 1 160px; min-width: 0; padding: 9px 11px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); animation: sgGlow 3.3s ease-in-out infinite; animation-delay: var(--d, 0s); }
.sg-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(150deg, var(--accent), var(--accent-2)); }
.sg-tx { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
@keyframes sgGlow { 0%, 68%, 100% { box-shadow: none; border-color: var(--line); } 12%, 28% { box-shadow: 0 0 0 3px var(--primary-soft); border-color: var(--accent); } }
.sg-arrow { display: grid; place-items: center; color: var(--soft); font-size: 17px; flex: none; animation: sgArrow 3.3s ease-in-out infinite; }
@keyframes sgArrow { 0%, 100% { opacity: .4; transform: translateX(0); } 50% { opacity: 1; transform: translateX(3px); } }
.sg-hint { margin: 11px 2px 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.sg-qr-pointer { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 8px; color: var(--accent); font-weight: 800; font-size: 13.5px; }
.sg-down { display: inline-block; font-size: 18px; animation: sgBounce 1.4s ease-in-out infinite; }
@keyframes sgBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
#panel-transfer .share-stage { border-radius: 22px; outline: 2px dashed transparent; outline-offset: 3px; animation: sgQrRing 3.3s ease-in-out infinite; }
@keyframes sgQrRing { 0%, 100% { outline-color: transparent; } 50% { outline-color: var(--accent); } }
@media (max-width: 540px) { .sg-arrow { display: none; } .sg-step { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .sg-step, .sg-arrow, .sg-down, #panel-transfer .share-stage { animation: none; } }

/* VIZONDO 4.5.0-q: QR Intake scanner */
.qr-scan-card { max-width: 460px; }
.qr-scan-viewport { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 60vh; margin: 0 auto; background: #000; border-radius: 16px; overflow: hidden; }
.qr-scan-viewport video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-scan-frame { position: absolute; inset: 14%; border: 3px solid rgba(255,255,255,.92); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
#qrScanCanvas { display: none; }

/* VIZONDO 4.5.0-s: глобальная шестерня (один узел #homeGear) — Визитница/Принять/Поделиться */
.home-settings[hidden] { display: none !important; }
.home-settings-global {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 50;
}
/* Резерв сверху под фикс-шестерню, чтобы она не накрывала верхние контролы приёма/передачи
   (в «Визитнице» этот зазор уже даёт brand-head). */
#panel-receive, #panel-transfer { padding-top: 48px; }
@media (max-width: 380px) {
  .home-settings-global { top: calc(env(safe-area-inset-top, 0px) + 6px); right: 10px; }
}

/* VIZONDO 4.5.0-t: «Принять» — последовательный accordion (disclosure) */
.receive-ios-hint { margin: 4px 2px 16px; }
.receive-accordion { display: flex; flex-direction: column; gap: 12px; }
.receive-method-item { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--sh); }
.receive-method { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 16px; background: none; border: none; text-align: left; cursor: pointer; color: inherit; box-shadow: none; border-radius: 0; }
.receive-method .rm-ico { font-size: 24px; line-height: 1; flex: none; }
.receive-method .rm-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.receive-method .rm-label { font-weight: 700; font-size: 16px; }
.receive-method .rm-hint { font-size: 12.5px; color: var(--soft); line-height: 1.3; }
.receive-method .rm-chev { flex: none; font-size: 22px; color: var(--soft); transition: transform .2s ease; }
.receive-method[aria-expanded="true"] { background: var(--primary-soft); }
.receive-method[aria-expanded="true"] .rm-chev { transform: rotate(90deg); color: var(--accent); }
.receive-method[aria-expanded="true"] .rm-label { color: var(--accent); }
.receive-disclosure { padding: 4px 16px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.receive-disclosure[hidden] { display: none; }
.receive-mini-brand { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; }
.receive-mini-brand .brand-logo { font-weight: 800; letter-spacing: .5px; font-size: 14px; color: var(--accent); }
.receive-mini-brand .brand-sub { font-size: 13px; color: var(--soft); }
.receive-instr { background: var(--primary-soft); border-radius: 12px; padding: 10px 12px; }
.receive-instr strong { display: block; margin-bottom: 4px; font-size: 14px; }
.receive-textarea-label { display: block; }
.receive-result-slot:empty { display: none; }
.receive-method, .receive-disclosure button, .receive-disclosure .file-button { min-height: 44px; }
@media (max-width: 380px) {
  .receive-method { padding: 12px 12px; min-height: 56px; gap: 10px; }
  .receive-method .rm-label { font-size: 15px; }
}

/* VIZONDO 4.5.0-u hotfix */
/* T7: поиск «Визитницы» — убрать внутреннюю рамку/обводку, фокус на контейнере */
.home-search input,
.home-search input:focus,
.home-search input:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
/* T3: модалка дубля поверх модалки категорий */
.dup-modal { z-index: 240; }
/* T5: визуальная визитка — целиком, адаптивно, без пустого верхнего поля */
.visual-modal { place-items: center; }
.visual-modal .modal-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
.visual-modal .modal-card > .section-head { flex: 0 0 auto; }
.visual-modal .visual-frame,
.visual-modal .visual-frame.tall {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  width: 100%;
}
@media (max-width: 600px) {
  .visual-modal { place-items: center; padding: calc(0.6rem + env(safe-area-inset-top, 0px)) 0.6rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); }
  .visual-modal .modal-card { width: 100%; max-height: calc(100dvh - 1.2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .visual-modal .visual-frame,
  .visual-modal .visual-frame.tall { min-height: 0; }
}

/* ===== VIZONDO 4.5.0-v hotfix ===== */
/* T1/T10: пустой статус не занимает место (нет пустой рамки под способами) */
.result:empty { display: none; }
#receiveResult:empty { display: none; }

/* T6/T7: фирменные inline SVG-иконки вместо emoji */
.vz-line-icon { width: 24px; height: 24px; display: block; color: currentColor; }
.rm-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; color: var(--accent); }
.rm-ico .vz-line-icon { width: 26px; height: 26px; }
.category-buttons button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.cat-ico { display: inline-grid; place-items: center; color: var(--accent); }
.cat-ico .vz-line-icon { width: 28px; height: 28px; }
.contacts-filters button { display: inline-flex; align-items: center; gap: 7px; }
.contacts-filter-icon { display: inline-grid; place-items: center; color: currentColor; }
.contacts-filter-icon .vz-line-icon { width: 18px; height: 18px; }

/* T2/T11: visual modal — полноэкранный просмотрщик на mobile, без пустого поля и горизонтального уезда */
.visual-modal { place-items: stretch center; padding: 0; }
.visual-modal .modal-card {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  height: min(100dvh, var(--vz-app-vh, 100dvh));
  max-height: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
}
.visual-modal .modal-card > .section-head { flex: 0 0 auto; margin: 0; }
.visual-modal .modal-card > .section-head h2 { font-size: 1.05rem; }
.visual-modal .visual-frame,
.visual-modal .visual-frame.tall {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
}
@media (min-width: 760px) {
  .visual-modal { place-items: center; padding: 1rem; }
  .visual-modal .modal-card { width: min(100%, 760px); height: min(92dvh, 900px); border-radius: 24px; padding: 1.15rem; }
}

/* ===== VIZONDO 4.5.0-x ===== */
/* T2: фильтры контактов — «Все» отдельно сверху, категории одним рядом из 3 */
.contacts-filter-all-row { width: 100%; flex: 0 0 100%; display: flex; margin-bottom: 8px; }
.contacts-filter-all-row button { min-width: 0; }
.contacts-filter-category-row { width: 100%; flex: 0 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.contacts-filter-category-row button { min-width: 0; justify-content: center; padding: 9px 6px; font-size: 13px; }
.contacts-filter-category-row .contacts-filter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) {
  .contacts-filter-category-row { gap: 6px; }
  .contacts-filter-category-row button { padding: 8px 4px; font-size: 12px; gap: 4px; }
  .contacts-filter-category-row .contacts-filter-icon .vz-line-icon { width: 16px; height: 16px; }
}

/* T3/T4: мастер передачи */
.transfer-teach-title { margin: 4px 2px 4px; font-size: 1.15rem; }
.transfer-teach-text { margin: 0 2px 14px; }
.transfer-wizard { display: flex; flex-direction: column; gap: 12px; }
.transfer-step-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; text-align: left; font-weight: 700; }
.ts-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--accent); font-weight: 800; font-size: 14px; }
.transfer-selected { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--sh); }
.transfer-selected[hidden] { display: none; }
.transfer-step-label { display: flex; align-items: center; gap: 10px; font-weight: 700; margin: 4px 2px; }
.transfer-methods[hidden] { display: none; }
.transfer-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.transfer-method-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 64px; padding: 12px 14px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh); color: inherit; }
.transfer-method-tile strong { font-size: 14.5px; }
.transfer-method-tile small { font-size: 11.5px; color: var(--soft); line-height: 1.3; }
.transfer-method-tile.active { border-color: var(--accent); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary-soft), var(--sh); }
.transfer-send { min-height: 52px; }
.transfer-send:disabled { opacity: .5; cursor: not-allowed; }
.transfer-send-hint { text-align: center; margin: 2px 0 0; }
.transfer-advanced { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
.transfer-advanced > summary { cursor: pointer; font-weight: 700; color: var(--soft); padding: 6px 2px; }
.transfer-picker-filters { display: flex; gap: 8px; margin: 10px 0; }
.transfer-picker-filters button { flex: 1; min-height: 40px; }
.transfer-picker-filters button.active { background: var(--primary-soft); border-color: var(--accent); color: var(--accent); }
.transfer-picker-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; }
.transfer-picker-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 11px 14px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: inherit; }
.transfer-picker-item:hover, .transfer-picker-item:focus-visible { border-color: var(--accent); }
#transferCardPickerSearch { width: 100%; }
@media (max-width: 380px) {
  .transfer-method-grid { grid-template-columns: 1fr; }
}

/* u3: add-row для customLinks */
.custom-links-rows { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.custom-link-row { display: flex; gap: 8px; align-items: center; }
.custom-link-row .cl-label { flex: 0 0 34%; min-width: 0; }
.custom-link-row .cl-url { flex: 1 1 auto; min-width: 0; }
.custom-link-row .cl-remove { flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 0 10px; font-size: 1.25rem; line-height: 1; }
.custom-links-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.custom-links-actions button { min-height: 44px; }
@media (max-width: 560px) {
  .custom-link-row { flex-wrap: wrap; }
  .custom-link-row .cl-label, .custom-link-row .cl-url { flex: 1 1 100%; }
  .custom-link-row .cl-remove { flex: 0 0 auto; }
}


/* u5: убрать авто-переносы «на-жмите/кон-такт» на кнопках/тайлах передачи */
.transfer-choice, .transfer-choice small, .transfer-choice strong,
.transfer-method-tile, .transfer-method-tile small,
.transfer-choice-grid button, .sticky-actions button {
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; word-break: normal;
}