/* ============================================================
   ГРАВИУМ ПИТОМЦЫ — v2 design system
   Aligned with info.gravium.ru: dark #050505, gold, sharp corners
   ============================================================ */

:root {
  --bg:        #050505;
  --ink:       #f7f2e8;
  --muted:     rgba(247,242,232,.55);
  --line:      rgba(255,255,255,.09);
  --line2:     rgba(255,255,255,.13);
  --accent:    #f2bf68;
  --accent-2:  #edcf94;
  --accent-bg: rgba(242,191,104,.07);
  --panel:     rgba(255,255,255,.042);
  --panel2:    rgba(255,255,255,.068);
  --shadow:    0 20px 64px rgba(0,0,0,.52);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse 55% 28% at 68%  4%, rgba(255,210,100,.04), transparent),
    radial-gradient(ellipse 45% 32% at 14% 16%, rgba(255,140, 30,.03), transparent),
    linear-gradient(180deg, #010101 0%, #050505 50%, #090909 100%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font: inherit; }

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Reveal animations ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .52s ease, transform .52s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5,5,5,.84);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: invert(1) brightness(1.1);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-text strong {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-text span {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--muted);
  border: 1px solid transparent;
  transition: color .18s, border-color .18s, background .18s;
  white-space: nowrap;
}
.nav a:hover {
  color: var(--ink);
  border-color: var(--line2);
  background: var(--panel);
}
.topbar-cta {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Mobile nav strip ─────────────────────────────────────────── */
.mobile-nav-strip {
  display: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: rgba(5,5,5,.96);
  border-bottom: 1px solid var(--line);
}
.mobile-nav-strip::-webkit-scrollbar { display: none; }
.mobile-nav-strip a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 14px;
  height: 38px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  transition: color .14s, background .14s;
}
.mobile-nav-strip a:last-child { border-right: 0; }
.mobile-nav-strip a:hover { color: var(--ink); background: rgba(255,255,255,.04); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--line2);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}
.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(242,191,104,.4);
  box-shadow: 0 8px 24px rgba(242,191,104,.12);
}
.btn.btn-primary,
.btn-primary {
  background: linear-gradient(135deg, #edcf94, #d4a840);
  border-color: rgba(242,191,104,.55);
  color: #150d00;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(242,191,104,.22);
}
.btn.btn-primary:hover,
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(242,191,104,.35);
  border-color: var(--accent-2);
}
.btn.secondary {
  background: transparent;
  border-color: var(--line2);
  color: var(--ink);
}
.btn.secondary:hover {
  border-color: rgba(242,191,104,.35);
  background: var(--accent-bg);
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  padding: 28px 0 0;
}
.hero-box {
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  border: 1px solid var(--line2);
  background:
    linear-gradient(100deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.90) 38%, rgba(5,5,5,.54) 64%, rgba(5,5,5,.12) 100%),
    url('/static/banner.jpg') center right / cover no-repeat;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
}
.hero-box.hero-ready {
  opacity: 1;
  transform: translateY(0);
}
.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 52% 64% at 18% 52%, rgba(242,191,104,.10), transparent 58%),
    radial-gradient(ellipse 30% 40% at 70% 60%, rgba(242,191,104,.05), transparent 60%);
  pointer-events: none;
}

/* ── Hero embers ─────────────────────────────────────────────── */
.hero-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-embers i {
  position: absolute;
  bottom: -4px;
  border-radius: 50%;
  will-change: opacity, transform;
  animation: heroEmberPet var(--dur,4.2s) ease-in var(--del,0s) infinite;
}
@keyframes heroEmberPet {
  0%   { opacity: 0;             transform: translate(0,0) scale(1.2); }
  9%   { opacity: var(--pk,.36); }
  76%  { opacity: .08;           transform: translate(var(--ex,10px), calc(var(--ey,-200px) * .78)) scale(.40); }
  100% { opacity: 0;             transform: translate(var(--ex,10px), var(--ey,-200px)) scale(.06); }
}
.hero-embers i:nth-child(1)  { left:5%;  width:2px; height:2px; background:rgba(255,175,42,.88); --dur:4.4s; --del:0.00s; --ex:12px;  --ey:-240px; --pk:.30; }
.hero-embers i:nth-child(2)  { left:12%; width:3px; height:3px; background:rgba(242,191,104,.88);--dur:5.0s; --del:1.20s; --ex:-8px;  --ey:-290px; --pk:.26; }
.hero-embers i:nth-child(3)  { left:22%; width:2px; height:2px; background:rgba(255,225,90,.88); --dur:4.6s; --del:2.40s; --ex:10px;  --ey:-220px; --pk:.32; }
.hero-embers i:nth-child(4)  { left:34%; width:2px; height:2px; background:rgba(255,255,210,.88);--dur:3.8s; --del:0.70s; --ex:-10px; --ey:-200px; --pk:.38; }
.hero-embers i:nth-child(5)  { left:46%; width:3px; height:3px; background:rgba(255,165,38,.90); --dur:4.8s; --del:1.70s; --ex:16px;  --ey:-260px; --pk:.28; }
.hero-embers i:nth-child(6)  { left:56%; width:4px; height:4px; background:rgba(242,191,104,.92);--dur:4.2s; --del:0.40s; --ex:-14px; --ey:-310px; --pk:.42; }
.hero-embers i:nth-child(7)  { left:64%; width:2px; height:2px; background:rgba(255,240,165,.92);--dur:3.6s; --del:2.00s; --ex:12px;  --ey:-240px; --pk:.46; }
.hero-embers i:nth-child(8)  { left:72%; width:3px; height:3px; background:rgba(255,182,48,.92); --dur:5.2s; --del:0.90s; --ex:-18px; --ey:-300px; --pk:.38; }
.hero-embers i:nth-child(9)  { left:80%; width:2px; height:2px; background:rgba(255,205,70,.92); --dur:4.0s; --del:1.50s; --ex:10px;  --ey:-250px; --pk:.44; }
.hero-embers i:nth-child(10) { left:88%; width:3px; height:3px; background:rgba(242,191,104,.92);--dur:4.6s; --del:0.20s; --ex:-12px; --ey:-280px; --pk:.40; }
.hero-embers i:nth-child(11) { left:94%; width:2px; height:2px; background:rgba(255,255,215,.92);--dur:3.9s; --del:2.80s; --ex:8px;   --ey:-215px; --pk:.50; }
.hero-embers i:nth-child(12) { left:68%; width:4px; height:4px; background:rgba(255,192,56,.92); --dur:5.0s; --del:3.20s; --ex:20px;  --ey:-340px; --pk:.36; }

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  padding: 64px 56px;
}
.hero-kicker {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s .1s, transform .4s .1s;
}
.hero-kicker.hero-ready { opacity: 1; transform: translateY(0); }
.hero-box h1 {
  font-size: clamp(38px, 5.8vw, 68px);
  line-height: .96;
  letter-spacing: -.03em;
  margin-bottom: 22px;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s .18s, transform .45s .18s;
}
.hero-box h1.hero-ready { opacity: 1; transform: translateY(0); }
.hero-box p {
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s .26s, transform .45s .26s;
}
.hero-box p.hero-ready { opacity: 1; transform: translateY(0); }
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s .34s, transform .4s .34s;
}
.hero-actions.hero-ready { opacity: 1; transform: translateY(0); }
.hero-stats {
  opacity: 0;
  transition: opacity .4s .44s;
}
.hero-stats.hero-ready { opacity: 1; }
.hero-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid rgba(242,191,104,.28);
  background: rgba(242,191,104,.07);
  color: var(--accent-2);
  font-size: 13px;
  letter-spacing: .04em;
}

/* ── Quick paths ─────────────────────────────────────────────── */
.quick-paths-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.014);
}
.quick-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.quick-path-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px;
  border-right: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: background .18s;
}
.quick-path-card:last-child { border-right: 0; }
.quick-path-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.quick-path-card:hover { background: rgba(242,191,104,.04); }
.quick-path-card:hover::before { opacity: 1; }
.quick-path-num {
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(242,191,104,.45);
  font-weight: 700;
}
.quick-path-label {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.quick-path-card strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.quick-path-arrow {
  margin-top: auto;
  font-size: 20px;
  color: rgba(242,191,104,.35);
  transition: color .18s, transform .18s;
}
.quick-path-card:hover .quick-path-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* ── Sections ────────────────────────────────────────────────── */
.section {
  padding: 52px 0;
}
.section-head {
  margin-bottom: 32px;
}
.section-kicker {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.section-head h2 {
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin-bottom: 14px;
}
.section-head p.lead,
p.lead {
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.65;
  color: var(--muted);
}

/* ── Grids ───────────────────────────────────────────────────── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 32px;
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(242,191,104,.32);
  box-shadow: var(--shadow);
}
.card h3 {
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 12px;
}
.card p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

/* ── Feature card ────────────────────────────────────────────── */
.feature-card { background: var(--bg); }
.grid-3 .feature-card { border: none; }
.step-num {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(242,191,104,.35);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* ── Preview pet ─────────────────────────────────────────────── */
.preview-pet {
  display: grid;
  grid-template-columns: 220px 1fr;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
}
.preview-pet-photo {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--panel2);
  border-right: 1px solid var(--line);
}
.home-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-preview-placeholder { opacity: .35; }
.preview-list {
  padding: 32px;
  display: grid;
  gap: 12px;
}
.preview-line {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.preview-label {
  color: var(--ink);
  font-weight: 500;
}
.preview-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ── Lost home section ───────────────────────────────────────── */
.lost-home-card {
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}
.lost-home-head {
  padding: 48px 48px 36px;
  border-bottom: 1px solid var(--line);
}
.lost-home-copy h2 {
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.lost-home-actions { margin-top: 24px; }
.lost-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
}
.lost-home-item {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transition: background .18s, transform .18s;
}
.lost-home-item:hover {
  background: var(--accent-bg);
  transform: translateY(-2px);
}
.lost-home-photo {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}
.lost-home-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.lost-home-item:hover .lost-home-photo img { transform: scale(1.04); }
.lost-home-body { padding: 20px; flex: 1; }
.lost-home-badge {
  display: inline-flex;
  padding: 4px 12px;
  background: rgba(220,60,60,.10);
  border: 1px solid rgba(220,60,60,.26);
  color: #e07070;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.lost-home-body h3 {
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 6px;
}
.lost-home-meta { font-size: 13px; color: var(--muted); }
.lost-home-empty {
  padding: 48px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  border-top: 1px solid var(--line);
}

/* ── Lost page ───────────────────────────────────────────────── */
.lost-hero-card {
  border: 1px solid var(--line2);
  background: var(--panel);
  border-top: 2px solid var(--accent);
  margin-bottom: 32px;
}
.lost-page-head {
  padding: 40px 48px;
  margin-bottom: 0;
}
.lost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.lost-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transition: background .18s, transform .18s;
}
.lost-card:hover {
  background: rgba(242,191,104,.04);
  transform: translateY(-2px);
}
.lost-card-photo {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}
.lost-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.lost-card:hover .lost-card-photo img { transform: scale(1.04); }
.lost-card-body { padding: 22px; flex: 1; }
.lost-badge {
  display: inline-flex;
  padding: 4px 12px;
  background: rgba(220,60,60,.10);
  border: 1px solid rgba(220,60,60,.28);
  color: #e07070;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.lost-card-body h3 {
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.lost-meta { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.lost-city { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.lost-notes {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lost-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--accent-2);
  margin-top: auto;
  padding-top: 8px;
}
.lost-live-note {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
}

/* ── Profile wrap ─────────────────────────────────────────────── */
.profile-wrap { padding: 28px 0 52px; }
.profile-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid rgba(242,191,104,.22);
  border-top: 2px solid var(--accent);
  box-shadow: 0 24px 80px rgba(0,0,0,.50);
}
.compact-profile { /* same variant */ }
.left-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
}
.profile-photo-wrap { overflow: hidden; }
.profile-photo {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--panel2);
  position: relative;
}
.profile-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -60px 40px rgba(5,5,5,.55);
  pointer-events: none;
}
.compact-photo { aspect-ratio: 1/1; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ── Mini brand / QR card ─────────────────────────────────────── */
.mini-brand-card {
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(242,191,104,.07), transparent 60%),
    var(--panel);
  padding: 22px;
  border-top: 1px solid var(--line);
}
.mini-brand-title {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.mini-brand-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 16px;
}
.qr-panel { margin-top: 16px; }
.qr-wrap {
  background: #fff;
  padding: 12px;
  display: inline-block;
  margin-bottom: 12px;
}
.qr-image {
  display: block;
  width: 140px;
  height: 140px;
  image-rendering: pixelated;
}
.qr-caption { font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.qr-subcaption { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.qr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  font-size: 13px;
  border: 1px solid rgba(242,191,104,.35);
  background: var(--accent-bg);
  color: var(--accent-2);
  transition: background .18s, border-color .18s;
}
.qr-btn:hover { background: rgba(242,191,104,.14); border-color: var(--accent); }
.qr-btn.secondary { background: transparent; border-color: var(--line2); color: var(--muted); }

/* ── Profile right column ─────────────────────────────────────── */
.profile-card > div:not(.left-stack) {
  padding: 32px 40px 40px;
  background:
    radial-gradient(ellipse 80% 50% at 80% 0%, rgba(242,191,104,.06), transparent 50%),
    var(--panel);
}
.profile-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid rgba(242,191,104,.25);
  background: var(--accent-bg);
  color: var(--accent-2);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.profile-title {
  font-size: clamp(36px, 5vw, 64px);
  line-height: .92;
  letter-spacing: -.04em;
  margin-bottom: 12px;
  word-break: break-word;
}
.profile-subtitle { font-size: 18px; color: var(--muted); margin-bottom: 20px; }

/* ── Status chips ─────────────────────────────────────────────── */
.pet-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  border: 1px solid var(--line2);
  background: var(--panel);
  color: var(--muted);
}
.pet-status-chip-lost  { border-color: rgba(220,60,60,.35);  background: rgba(220,60,60,.08);  color: #e07070; }
.pet-status-chip-found { border-color: rgba(60,180,100,.35); background: rgba(60,180,100,.08); color: #70c890; }
.pet-status-chip-archive { border-color: var(--line2); background: var(--panel); color: var(--muted); }

/* ── Pet alerts ───────────────────────────────────────────────── */
.pet-alert {
  padding: 16px 22px;
  margin-bottom: 20px;
  border: 1px solid var(--line2);
  background: var(--panel);
  font-size: 15px;
  line-height: 1.5;
}
.pet-alert-lost    { border-color: rgba(220,60,60,.35);         background: rgba(220,60,60,.08);         color: #e07070; }
.pet-alert-found   { border-color: rgba(60,180,100,.35);        background: rgba(60,180,100,.08);        color: #70c890; }
.pet-alert-demo    { border-color: rgba(242,191,104,.35);       background: var(--accent-bg);            color: var(--accent-2); }
.pet-alert-archive { border-color: var(--line2);                background: var(--panel);                color: var(--muted); }

/* ── Contact box ──────────────────────────────────────────────── */
.contact-box {
  margin: 24px 0;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.contact-box-top { margin-bottom: 20px; }
.contact-title {
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.contact-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 14px;
}
.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--line2);
  background: var(--panel);
  color: var(--ink);
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
  cursor: pointer;
  text-decoration: none;
}
.contact-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(242,191,104,.4);
  box-shadow: 0 8px 24px rgba(242,191,104,.12);
}
.contact-btn.primary {
  background: linear-gradient(135deg, #edcf94, #d4a840);
  border-color: rgba(242,191,104,.55);
  color: #150d00;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(242,191,104,.22);
}
.contact-btn.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(242,191,104,.38);
}
.contact-btn.secondary { background: transparent; border-color: var(--line2); }
.contact-btn.secondary:hover { border-color: rgba(242,191,104,.35); background: var(--accent-bg); }
.contact-btn.found-pet-btn {
  background: transparent;
  border: 1px solid rgba(242,191,104,.38);
  color: var(--accent-2);
}
.contact-btn.found-pet-btn:hover { background: var(--accent-bg); border-color: var(--accent); }
.contact-phone-visible { margin-top: 10px; font-size: 14px; color: var(--muted); }
.contact-phone-visible a { color: var(--accent-2); border-bottom: 1px solid rgba(242,191,104,.3); }

/* ── Found-pet form ───────────────────────────────────────────── */
.found-pet-form {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid rgba(242,191,104,.18);
  background: rgba(242,191,104,.04);
}
.found-pet-form-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.found-pet-form-text { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
.found-pet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.found-pet-field { display: flex; flex-direction: column; gap: 6px; }
.found-pet-field.full { grid-column: 1 / -1; }
.found-pet-field label {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.found-pet-field input,
.found-pet-field textarea {
  padding: 12px 14px;
  border: 1px solid var(--line2);
  background: rgba(5,5,5,.6);
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .18s;
}
.found-pet-field input:focus,
.found-pet-field textarea:focus { border-color: rgba(242,191,104,.5); }
.found-pet-field textarea { min-height: 90px; resize: vertical; }
.found-pet-ready { margin-bottom: 14px; }
.found-pet-ready-label {
  display: block;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.found-pet-ready-message {
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  border: 1px solid var(--line2);
  background: rgba(5,5,5,.7);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
}
.found-pet-copy-row { margin-bottom: 14px; }
.found-pet-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.found-send-btn { font-size: 14px; min-height: 44px; padding: 0 18px; }
.found-pet-hint { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ── Finder help ──────────────────────────────────────────────── */
.finder-help-box {
  margin: 24px 0;
  padding: 20px 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-left: 2px solid var(--accent);
}
.finder-help-title {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.finder-help-list { display: flex; flex-direction: column; gap: 8px; }
.finder-help-item { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* ── Notes ────────────────────────────────────────────────────── */
.note {
  margin: 16px 0;
  padding: 18px 22px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.note-title {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
  font-weight: 600;
}
.note-important {
  border-color: rgba(242,191,104,.22);
  background: var(--accent-bg);
  border-left: 2px solid var(--accent);
}
.warning,
.note-critical {
  border-color: rgba(220,60,60,.22);
  background: rgba(220,60,60,.06);
  border-left: 2px solid rgba(220,60,60,.6);
  color: #e8b4b4;
}

/* ── Info grid ────────────────────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 20px 0;
}
.info-item {
  padding: 16px 18px;
  background: var(--panel);
  transition: background .18s;
}
.info-item:hover { background: var(--panel2); }
.info-key {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.info-val { font-size: 16px; color: var(--ink); line-height: 1.4; }

/* ── Share box ────────────────────────────────────────────────── */
.share-box {
  margin: 20px 0;
  padding: 18px 22px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.share-title {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.share-url { color: var(--ink); font-size: 14px; word-break: break-all; line-height: 1.5; }

/* ── Footer ───────────────────────────────────────────────────── */
.footer {
  margin-top: 80px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  background: rgba(5,5,5,.92);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 1fr;
  gap: 32px;
  align-items: start;
}
.footer-left { display: flex; align-items: flex-start; gap: 14px; }
.footer-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: invert(1) brightness(1.1);
  flex-shrink: 0;
}
.footer-brand {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(247,242,232,.8);
  margin-bottom: 5px;
}
.footer-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.footer-center { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.footer-center a { font-size: 13px; color: var(--muted); transition: color .18s; }
.footer-center a:hover { color: var(--accent-2); }
.footer-right { text-align: right; }
.footer-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.footer-mail { font-size: 14px; color: var(--accent-2); transition: color .18s; }
.footer-mail:hover { color: var(--accent); }

/* ── Form elements ────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-block-title {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 24px 0 14px;
}
.input,
.textarea,
.select {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--line2);
  background: rgba(5,5,5,.65);
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .18s, background .18s;
  appearance: none;
}
.textarea { min-height: 120px; resize: vertical; }
.input:focus,
.textarea:focus,
.select:focus {
  border-color: rgba(242,191,104,.55);
  background: rgba(242,191,104,.04);
}
.input::placeholder,
.textarea::placeholder { color: rgba(247,242,232,.26); }
.label {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.flash {
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid rgba(220,60,60,.28);
  background: rgba(220,60,60,.07);
  color: #e07070;
  font-size: 15px;
}

/* ── Custom select ────────────────────────────────────────────── */
.g-select { position: relative; }
.g-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--line2);
  background: rgba(5,5,5,.65);
  color: var(--muted);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s;
}
.g-select-trigger.filled { color: var(--ink); }
.g-select-trigger:focus { outline: none; border-color: rgba(242,191,104,.55); }
.g-select-arrow { font-size: 16px; color: var(--muted); }
.g-select-menu {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 2px);
  z-index: 50;
  border: 1px solid var(--line2);
  background: #0a0a0a;
  display: none;
}
.g-select.open .g-select-menu { display: block; }
.g-select-option {
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  font-size: 15px;
  font-family: inherit;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background .14s, color .14s;
}
.g-select-option:last-child { border-bottom: none; }
.g-select-option:hover { background: var(--panel2); color: var(--ink); }
.g-select-option.selected { color: var(--accent-2); background: var(--accent-bg); }

/* ── Photo preview ────────────────────────────────────────────── */
.photo-preview-box {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 16px;
}
.photo-preview-title {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.photo-preview-frame img {
  max-width: 180px;
  max-height: 180px;
  object-fit: cover;
  border: 1px solid var(--line2);
}

/* ── Empty box ────────────────────────────────────────────────── */
.empty-box {
  border: 1px solid var(--line);
  background: var(--panel);
  border-top: 2px solid var(--accent);
  padding: 56px 40px;
  text-align: center;
}
.empty-box h1 {
  font-size: clamp(26px, 3.5vw, 42px);
  margin-bottom: 12px;
  letter-spacing: -.02em;
}
.empty-box p { color: var(--muted); font-size: 18px; margin-bottom: 24px; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .topbar-cta { display: none; }
  .nav a { padding: 8px 10px; font-size: 13px; }
  .hero-content { padding: 64px 40px; }
  .profile-card { grid-template-columns: 260px 1fr; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .topbar-cta { display: none; }
  .mobile-nav-strip { display: flex; }
  .hero { padding: 20px 0 0; }
  .hero-box { min-height: 80vh; }
  .hero-content { padding: 48px 28px; max-width: 100%; }
  .grid-3 { grid-template-columns: 1fr; }
  .quick-paths { grid-template-columns: 1fr; }
  .section { padding: 40px 0; }
  .preview-pet { grid-template-columns: 1fr; }
  .preview-pet-photo { aspect-ratio: 16/9; border-right: none; border-bottom: 1px solid var(--line); }
  .profile-card { grid-template-columns: 1fr; }
  .profile-card > div:not(.left-stack) { padding: 24px; }
  .info-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-right { text-align: left; }
  .lost-home-head { padding: 32px 24px; }
  .lost-page-head { padding: 32px 24px; }
}

@media (max-width: 600px) {
  .container { padding: 0 14px; }
  .hero-content { padding: 40px 20px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .profile-card > div:not(.left-stack) { padding: 20px; }
  .quick-path-card { padding: 22px 20px; }
  .lost-home-head { padding: 24px 20px; }
  .lost-home-empty { padding: 28px 20px; }
  .lost-home-body { padding: 16px; }
  .hero-box {
    background:
      linear-gradient(180deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.90) 55%, rgba(5,5,5,.76) 100%),
      url('/static/banner.jpg') center bottom / cover no-repeat;
  }
  .found-pet-grid { grid-template-columns: 1fr; }
  .contact-btn { width: 100%; }
  .lost-home-grid { grid-template-columns: 1fr; }
  .empty-box { padding: 40px 20px; }
  .footer { margin-top: 48px; }
}
/* ═══════════════════════════════════════════════════════════
   pet.gravium.ru v2 — border-radius + animations
   matching info.gravium.ru design language
   ═══════════════════════════════════════════════════════════ */

/* ── Pill shape: кнопки, пиллы, nav-ссылки ──────────────── */
.btn,
.btn-primary,
.btn.secondary,
.btn.btn-primary {
  border-radius: 999px;
}
.contact-btn {
  border-radius: 999px;
}
.nav a {
  border-radius: 999px;
}
.topbar-cta {
  border-radius: 999px;
}
.qr-btn {
  border-radius: 999px;
}
.hero-stat-pill {
  border-radius: 999px;
}
.lost-action {
  border-radius: 999px;
}

/* ── Мягкое скругление: бейджи, чипы, статусы ───────────── */
.pet-status-chip,
.pet-alert,
.lost-badge,
.lost-home-badge,
.profile-status {
  border-radius: 4px;
}
.finder-help-box {
  border-radius: 0 4px 4px 0;
}
.note,
.note-important,
.note-critical {
  border-radius: 0 4px 4px 0;
}
.flash {
  border-radius: 4px;
}
.mini-brand-card,
.qr-card {
  border-radius: 0;
}

/* ── Профиль: слегка скругляем весь блок ────────────────── */
.profile-card {
  border-radius: 6px;
  overflow: hidden;
}
.pet-alert {
  border-radius: 4px;
}
.empty-box {
  border-radius: 6px;
}
.lost-hero-card {
  border-radius: 6px;
  overflow: hidden;
}
.preview-pet {
  border-radius: 6px;
  overflow: hidden;
}
.lost-home-card {
  border-radius: 6px;
  overflow: hidden;
}
.card {
  border-radius: 4px;
}
.found-pet-form {
  border-radius: 4px;
}
.contact-box {
  border-radius: 4px;
}
.share-box {
  border-radius: 4px;
}
.g-select-trigger {
  border-radius: 4px;
}
.g-select-menu {
  border-radius: 0 0 4px 4px;
}
.hero-box {
  border-radius: 8px;
}

/* ── Hero: анимированный sweep-эффект (лазерный луч) ─────── */
@keyframes heroLaserSweep {
  0%    { opacity: 0; transform: translateX(-110%) skewX(-12deg); }
  14%   { opacity: 1; }
  86%   { opacity: .6; }
  100%  { opacity: 0; transform: translateX(130%)  skewX(-12deg); }
}

.hero-box::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  background: linear-gradient(
    90deg,
    transparent                      0%,
    rgba(242,191,104,.00)            38%,
    rgba(242,191,104,.06)            50%,
    rgba(255,255,255,.04)            52%,
    rgba(242,191,104,.03)            56%,
    transparent                     100%
  );
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
  animation: heroLaserSweep 9s cubic-bezier(.4,0,.2,1) 1.2s infinite;
}

/* ── Hero bottom ember-glow (снизу тепло нарастает) ──────── */
.hero-box::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(to top,
    rgba(80, 36, 4, .18) 0%,
    rgba(60, 24, 2, .07) 55%,
    transparent           100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Sparks на hero ──────────────────────────────────────── */
.hero-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Точки-искры */
@keyframes sparkDot {
  0%   { opacity: 0;    transform: translate(0,0) scale(1); }
  12%  { opacity: var(--pk,.9); }
  100% { opacity: 0;    transform: translate(var(--tx,14px), var(--ty,-40px)) scale(0); }
}

/* Линии-искры */
@keyframes sparkLine {
  0%   { opacity: 0;    transform: translate(0,0) rotate(var(--rot,45deg)) scaleY(1); }
  10%  { opacity: var(--pk,.8); }
  100% { opacity: 0;    transform: translate(var(--tx,18px), var(--ty,-52px)) rotate(var(--rot,45deg)) scaleY(0); }
}

/* Точки — 5 штук */
.hero-sparks .sd {
  position: absolute;
  border-radius: 50%;
  will-change: opacity, transform;
  animation: sparkDot var(--dur,0.9s) ease-out var(--del,0s) infinite;
}
.hero-sparks .sd:nth-child(1) { left:44%; bottom:38%; width:4px; height:4px; background:rgba(242,191,104,.95); --dur:2.8s; --del:0.0s; --tx:16px;  --ty:-48px; --pk:.9; }
.hero-sparks .sd:nth-child(2) { left:52%; bottom:34%; width:3px; height:3px; background:rgba(255,255,215,.90); --dur:3.2s; --del:1.1s; --tx:-12px; --ty:-38px; --pk:.8; }
.hero-sparks .sd:nth-child(3) { left:60%; bottom:41%; width:5px; height:5px; background:rgba(255,195,60,.92);  --dur:2.6s; --del:0.5s; --tx:20px;  --ty:-56px; --pk:.9; }
.hero-sparks .sd:nth-child(4) { left:67%; bottom:36%; width:3px; height:3px; background:rgba(242,191,104,.88); --dur:3.5s; --del:1.8s; --tx:-18px; --ty:-42px; --pk:.7; }
.hero-sparks .sd:nth-child(5) { left:56%; bottom:44%; width:4px; height:4px; background:rgba(255,240,165,.90); --dur:2.9s; --del:2.4s; --tx:10px;  --ty:-50px; --pk:.85;}

/* Линии — 4 штуки */
.hero-sparks .sl {
  position: absolute;
  border-radius: 2px;
  will-change: opacity, transform;
  animation: sparkLine var(--dur,1.0s) ease-out var(--del,0s) infinite;
}
.hero-sparks .sl:nth-child(6) { left:48%; bottom:38%; width:2px; height:10px; background:rgba(255,255,220,.85); --dur:2.7s; --del:0.7s; --tx:22px;  --ty:-44px; --rot:30deg;  --pk:.8; }
.hero-sparks .sl:nth-child(7) { left:57%; bottom:42%; width:2px; height:8px;  background:rgba(242,191,104,.80); --dur:3.1s; --del:1.5s; --tx:-16px; --ty:-36px; --rot:-25deg; --pk:.7; }
.hero-sparks .sl:nth-child(8) { left:63%; bottom:37%; width:2px; height:12px; background:rgba(255,210,80,.82);  --dur:2.5s; --del:2.1s; --tx:18px;  --ty:-52px; --rot:50deg;  --pk:.75;}
.hero-sparks .sl:nth-child(9) { left:51%; bottom:45%; width:2px; height:9px;  background:rgba(255,255,215,.78); --dur:3.4s; --del:0.3s; --tx:-14px; --ty:-46px; --rot:-40deg; --pk:.72;}

/* ── Quick-path cards: анимация верхней линии ────────────── */
.quick-path-card::before {
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(242,191,104,.0));
  border-radius: 1px;
}

/* ── Reveal: более плавные задержки для грид-3 ───────────── */
.grid-3 .reveal:nth-child(1) { transition-delay: 0s;    }
.grid-3 .reveal:nth-child(2) { transition-delay: .10s;  }
.grid-3 .reveal:nth-child(3) { transition-delay: .20s;  }
.quick-paths .reveal:nth-child(1) { transition-delay: 0s;   }
.quick-paths .reveal:nth-child(2) { transition-delay: .08s; }
.quick-paths .reveal:nth-child(3) { transition-delay: .16s; }

/* ── Ambient glow пульс вокруг hero-glow ─────────────────── */
@keyframes heroPulse {
  0%, 100% { opacity: .8; }
  50%       { opacity: 1; }
}
.hero-glow {
  animation: heroPulse 6s ease-in-out infinite;
}

/* ── Mobile: убираем sweep и sparks (экономия батареи) ───── */
@media (max-width: 600px) {
  .hero-box::before { animation: none; opacity: 0; }
  .hero-sparks { display: none; }
  .hero-box { border-radius: 0; }
}

/* ── accent shift: gold → warm amber-orange ── */
:root {
  --accent:    #e09640;
  --accent-2:  #edaa6a;
  --accent-bg: rgba(224,150,64,.07);
}
.btn.btn-primary,
.btn-primary {
  background: linear-gradient(135deg, #edaa6a, #c8820a);
}
.contact-btn.primary {
  background: linear-gradient(135deg, #edaa6a, #c8820a);
}

/* ── Inter font-family ── */
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }

/* ===== Админка: таблицы и действия (2026-06-21) ===== */
.admin-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; color:var(--ink); }
.admin-table thead th{
  padding:11px 14px; text-align:left;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:rgba(255,255,255,.035);
  border-bottom:1px solid var(--line2); white-space:nowrap;
}
.admin-table thead th:first-child{ border-top-left-radius:12px; }
.admin-table thead th:last-child{ border-top-right-radius:12px; }
.admin-table tbody td{
  padding:12px 14px; vertical-align:middle;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.admin-table tbody tr:hover{ background:rgba(255,255,255,.025); }
.admin-table tbody tr:last-child td{ border-bottom:0; }
.admin-table td:first-child{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--muted); }
.admin-table td:empty::after{ content:"—"; color:var(--muted); }

.admin-actions{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.admin-actions form{ margin:0; }
.admin-actions a, .admin-actions button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:10px; line-height:1;
  font-size:12.5px; font-weight:700; white-space:nowrap; cursor:pointer; text-decoration:none;
  border:1px solid var(--line2); background:var(--panel); color:var(--ink);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.admin-actions a:hover{ border-color:rgba(224,150,64,.45); background:var(--accent-bg); color:var(--accent-2); }
.admin-actions button{ color:#ff9a9a; border-color:rgba(255,120,120,.28); background:rgba(255,90,90,.06); }
.admin-actions button:hover{ background:rgba(255,90,90,.15); border-color:rgba(255,120,120,.55); color:#ffb3b3; }

.manage-link{
  display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:700; white-space:nowrap; text-decoration:none;
  color:var(--accent-2); border:1px solid rgba(224,150,64,.3); background:var(--accent-bg);
  transition:border-color .15s ease, background .15s ease;
}
.manage-link:hover{ border-color:var(--accent); background:rgba(224,150,64,.13); }

/* обёртка таблицы — карточка со скроллом */
.admin-table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.015); }

/* ===== Партнёрские страницы + блок мероприятия (2026-06-21) ===== */
.accent{ color:var(--accent-2); }

/* Hero партнёров */
.partners-hero{ padding-top:48px; }
.partners-hero-inner{ max-width:820px; }
.partners-hero-title{ font-size:clamp(34px,6vw,64px); line-height:1.02; letter-spacing:-.02em; margin:14px 0 18px; }
.partners-hero-lead{ color:var(--muted); font-size:clamp(15px,2vw,19px); line-height:1.6; max-width:640px; }
.partners-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

.btn-ghost{ background:transparent; border:1px solid var(--line2); color:var(--ink); }
.btn-ghost:hover{ border-color:rgba(224,150,64,.45); background:var(--accent-bg); color:var(--accent-2); }

/* Сетки карточек */
.partners-grid{ display:grid; gap:16px; }
.partners-grid.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.partners-grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pcard{ padding:24px; }
.pcard-ico{ font-size:30px; margin-bottom:12px; line-height:1; }
.pcard h3{ margin:0 0 8px; font-size:18px; }
.pcard p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.55; }

/* Шаги */
.steps-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.step-card{ padding:22px; }
.step-num{ font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--accent-2); margin-bottom:12px; }
.step-card h3{ margin:0 0 8px; font-size:17px; }
.step-card p{ margin:0; color:var(--muted); font-size:14px; line-height:1.55; }

/* Демо «что увидит человек» */
.scan-demo{ max-width:560px; margin:0 auto; padding:26px; }
.scan-demo-badge{ display:inline-flex; padding:7px 14px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.04em;
  color:var(--accent-2); background:var(--accent-bg); border:1px solid rgba(224,150,64,.3); margin-bottom:18px; }
.scan-demo-row{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.scan-demo-row span{ color:var(--muted); }
.scan-demo-row b{ text-align:right; }
.scan-demo-note{ margin:16px 0 0; padding:14px 16px; border-radius:12px; background:var(--accent-bg);
  border:1px solid rgba(224,150,64,.2); color:var(--accent-2); font-style:italic; font-size:14px; line-height:1.5; }
.scan-demo-foot{ margin-top:14px; color:var(--muted); font-size:13px; }

/* CTA */
.partners-cta{ text-align:center; padding:36px 28px; background:var(--accent-bg); border-color:rgba(224,150,64,.22); }
.partners-cta h2{ margin:0 0 10px; }
.partners-cta p{ margin:0 0 20px; color:var(--muted); }
.partners-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* Страница организатора */
.partner-head{ display:flex; gap:24px; align-items:flex-start; padding:28px; }
.partner-logo img{ width:96px; height:96px; object-fit:contain; border-radius:14px; background:rgba(255,255,255,.04); padding:8px; }
.partner-city{ color:var(--muted); margin:4px 0 12px; }
.partner-links,.commemorative-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.link-chip{ display:inline-flex; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700; text-decoration:none;
  color:var(--accent-2); border:1px solid rgba(224,150,64,.3); background:var(--accent-bg); transition:border-color .15s ease, background .15s ease; }
.link-chip:hover{ border-color:var(--accent); background:rgba(224,150,64,.13); }
.partner-badge-block{ margin-top:28px; padding:24px; }
.partner-badge-block h3{ margin:6px 0 8px; }
.partner-badge-block p{ color:var(--muted); margin:0 0 16px; }

/* Карточки мероприятий */
.event-card{ display:block; text-decoration:none; color:inherit; overflow:hidden; padding:0; transition:border-color .15s ease, transform .15s ease; }
.event-card:hover{ border-color:rgba(224,150,64,.4); transform:translateY(-2px); }
.event-card-cover img{ width:100%; height:160px; object-fit:cover; display:block; }
.event-card-body{ padding:18px 20px; }
.event-card-body h3{ margin:0 0 6px; font-size:17px; }
.event-card-meta{ color:var(--accent-2); font-size:13px; margin-bottom:8px; }
.event-card-body p{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }

/* Страница мероприятия */
.event-cover{ border-radius:18px; overflow:hidden; margin-bottom:24px; }
.event-cover img{ width:100%; max-height:380px; object-fit:cover; display:block; }
.event-head h1{ margin:10px 0 12px; }
.event-meta{ display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:15px; align-items:center; }
.event-meta-partner{ color:var(--accent-2); text-decoration:none; font-weight:700; }
.event-desc{ padding:24px; margin-bottom:18px; }
.event-desc p{ margin:0; line-height:1.65; color:var(--ink); }
.event-commem{ padding:24px; margin-bottom:18px; background:var(--accent-bg); border-color:rgba(224,150,64,.22); }
.event-commem p{ margin:8px 0 0; font-style:italic; color:var(--accent-2); line-height:1.6; }

/* Блок «Памятный адресник участника» на странице питомца */
.commemorative-block{ position:relative; overflow:hidden; padding:28px; border-radius:20px; margin-top:20px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(224,150,64,.14), transparent 55%),
    linear-gradient(165deg, rgba(224,150,64,.08), rgba(255,255,255,.015));
  border:1px solid rgba(224,150,64,.28);
  box-shadow:0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); }
.commemorative-block::before{ content:""; position:absolute; left:28px; right:28px; top:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(242,202,120,.8), transparent); }
.commemorative-head{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.commemorative-logo{ flex:0 0 auto; width:68px; height:68px; border-radius:16px; padding:8px;
  background:rgba(255,255,255,.05); border:1px solid rgba(224,150,64,.22); display:flex; align-items:center; justify-content:center; }
.commemorative-logo img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.commemorative-head-text{ min-width:0; }
.commemorative-badge{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; font-size:11.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:#1a1206; background:linear-gradient(135deg,#f3da95,#e0a040); margin-bottom:10px; }
.commemorative-badge::before{ content:"🏅"; font-size:13px; }
.commemorative-title{ font-size:21px; font-weight:850; line-height:1.28; }
.commemorative-rows{ display:grid; gap:0; margin-top:4px; }
.commemorative-row{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:14.5px; }
.commemorative-row:last-child{ border-bottom:0; }
.commemorative-row span{ color:var(--muted); }
.commemorative-row b{ text-align:right; font-weight:700; }
.commemorative-row b a{ color:var(--accent-2); text-decoration:none; }
.commemorative-row b a:hover{ text-decoration:underline; }
.commemorative-text{ margin:18px 0 0; padding:16px 18px; border-radius:14px;
  background:rgba(0,0,0,.18); border:1px solid rgba(224,150,64,.16);
  font-style:italic; color:var(--accent-2); line-height:1.6; font-size:14.5px; }
.commemorative-foot{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07);
  text-align:center; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
@media (max-width:560px){
  .commemorative-block{ padding:22px 20px; }
  .commemorative-head{ gap:14px; }
  .commemorative-logo{ width:54px; height:54px; }
  .commemorative-title{ font-size:18px; }
}

/* Статус-пилюли в админке */
.status-pill{ display:inline-flex; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.status-pill.active{ color:#8cffc3; background:rgba(70,220,145,.13); border:1px solid rgba(70,220,145,.28); }
.status-pill.wait{ color:#ffd28a; background:rgba(242,191,104,.13); border:1px solid rgba(242,191,104,.3); }
.status-pill.muted{ color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line2); }

/* Адаптив */
@media (max-width:860px){
  .partners-grid.three, .steps-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .partners-grid.two, .partners-grid.three, .steps-grid{ grid-template-columns:1fr; }
  .partner-head{ flex-direction:column; gap:16px; }
  .commemorative-row, .scan-demo-row{ font-size:13.5px; }
}

/* Личный кабинет владельца */
.topbar-logout{ margin:0; }
.account-narrow{ max-width:680px; margin-inline:auto; }
.account-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 20px; }
.account-actions.compact{ margin:14px 0 0; }
.account-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pet-account-card{ display:flex; gap:16px; padding:16px; align-items:center; }
.pet-account-photo{ flex:0 0 92px; width:92px; height:92px; border-radius:16px; overflow:hidden; border:1px solid var(--line2); background:rgba(255,255,255,.035); }
.pet-account-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.pet-account-main{ min-width:0; }
.pet-account-main h3,.empty-account h3,.club-card h3,.activation-confirm h3{ margin:4px 0 7px; }
.pet-account-main p,.empty-account p,.club-card p{ margin:0; color:var(--muted); line-height:1.5; }
.empty-account{ grid-column:1/-1; }
.club-card{ margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-color:rgba(224,150,64,.25); background:linear-gradient(135deg,rgba(224,150,64,.09),rgba(255,255,255,.02)); }
.privacy-panel{ display:flex; gap:13px 22px; flex-wrap:wrap; align-items:center; padding:18px; margin-top:16px; border:1px solid rgba(224,150,64,.2); background:rgba(224,150,64,.05); border-radius:14px; }
.privacy-panel .form-block-title{ width:100%; margin:0 0 2px; }
.privacy-panel label{ color:var(--ink); font-size:14px; }
.visibility-select{ display:flex; align-items:center; gap:9px; }
.visibility-select .input{ width:auto; min-width:130px; padding:8px 10px; }
.form-help{ color:var(--muted); margin:7px 0 0; font-size:12px; }
.social-login{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line2); }
.social-login-title{ color:var(--muted); font-size:13px; margin-bottom:12px; text-align:center; }
.social-login-buttons{ display:flex; gap:9px; flex-wrap:wrap; justify-content:center; }
.social-login-buttons .btn{ flex:1 1 130px; text-align:center; }
.activation-confirm{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line2); }
@media (max-width:700px){ .account-grid{ grid-template-columns:1fr; } .club-card{ align-items:flex-start; flex-direction:column; } }
@media (max-width:560px){ .pet-account-card{ align-items:flex-start; } .pet-account-photo{ width:72px; height:72px; flex-basis:72px; } .privacy-panel{ flex-direction:column; align-items:flex-start; } }

/* Preview polish: clear account actions and a static hero. */
.topbar-inner{justify-content:flex-start;gap:24px}
.nav-primary{margin-left:auto}
.auth-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;padding-left:14px;border-left:1px solid var(--line)}
.auth-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 12px;border-radius:10px;color:rgba(247,242,232,.72);font-size:13px;font-weight:650;white-space:nowrap;transition:color .18s,background .18s,border-color .18s}
.auth-link:hover{color:var(--ink);background:rgba(255,255,255,.045)}
.auth-login{border:1px solid var(--line2);background:rgba(255,255,255,.018);color:var(--ink)}
.auth-login:hover{border-color:rgba(242,191,104,.36);background:rgba(242,191,104,.08)}
.auth-register{color:var(--accent-2)}
.topbar-cta{min-height:44px!important;padding:0 17px!important}
.topbar-cta span{font-size:16px;line-height:1}

/* No sparkles, no delayed reveal: the image and information stay still. */
.hero-box{opacity:1!important;transform:none!important;transition:none!important}
.hero-kicker,.hero-box h1,.hero-box p,.hero-actions,.hero-stats{opacity:1!important;transform:none!important;transition:none!important}
.hero-embers,.hero-sparks,.hero-glow,.hero-box::before{display:none!important}

/* The landing image is a scene, not a card: let it run edge to edge while
   keeping the copy aligned to the site grid. */
.hero{padding:0}
.hero>.container{width:100%;max-width:none;margin:0;padding:0}
.hero-box{min-height:90vh;border-left:0;border-right:0;border-radius:0}
@media (min-width:861px){
  .hero-content{padding-left:max(76px,calc((100vw - 1180px)/2 + 76px))}
}
@media (max-width:860px){
  .hero-box{min-height:80vh}
}

@media (max-width:760px){
  .topbar-inner{min-height:68px;gap:10px}
  .brand-logo{width:34px;height:34px}
  .brand-text{display:none}
  .nav-primary{display:none}
  .auth-actions{margin-left:auto;gap:7px;padding-left:0;border-left:0}
  .auth-register{display:none}
  .auth-link{min-height:38px;padding:0 10px;font-size:12px}
  .topbar-cta{min-height:40px!important;padding:0 13px!important;font-size:12px!important}
  .topbar-cta span{display:none}
  .mobile-nav-strip{display:flex!important;justify-content:space-around;overflow:visible}
  .mobile-nav-strip a{flex:1 1 0;justify-content:center;padding:0 8px;font-size:11px}
}

/* ════════ Preview polish — герой + шапка (2026-06-22) ════════ */

/* — Шапка: чище, авторизация в углу — */
.topbar-inner{ gap:24px !important; min-height:76px !important; }
.nav.nav-primary{ margin-left:auto; gap:2px !important; }
.nav.nav-primary a{ color:rgba(247,242,232,.74) !important; font-weight:600 !important; }
.nav.nav-primary a:hover{ color:#fff !important; border-color:transparent !important; background:rgba(255,255,255,.05) !important; }
.auth-actions{ gap:18px !important; padding-left:20px !important; border-left:1px solid var(--line) !important; }
/* Войти — лёгкая текст-ссылка (не кнопка) */
.auth-login{
  min-height:auto !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; color:rgba(247,242,232,.78) !important;
  font-size:14.5px !important; font-weight:600 !important; letter-spacing:-.01em !important;
}
.auth-login:hover{ color:#fff !important; background:transparent !important; }
/* Создать аккаунт — единственная акцентная кнопка */
.auth-actions .topbar-cta{
  min-height:46px !important; padding:0 20px !important; border-radius:999px !important; border:0 !important;
  color:#1c1206 !important; font-weight:700 !important; font-size:14.5px !important; letter-spacing:-.01em !important;
  background:linear-gradient(135deg,#ffe0a6 0%,#eaa24a 52%,#d98a32 100%) !important;
  box-shadow:0 12px 26px -12px rgba(234,162,74,.55), inset 0 1px 0 rgba(255,255,255,.4) !important;
  transition:transform .18s var(--ease,ease), box-shadow .2s, filter .18s !important;
}
.auth-actions .topbar-cta:hover{ transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 18px 36px -14px rgba(234,162,74,.65), inset 0 1px 0 rgba(255,255,255,.5) !important; }
.auth-actions .topbar-cta span{ font-size:15px !important; margin-left:2px; }

/* — Герой: крупнее, читаемее, с золотым акцентом — */
.hero-content{ max-width:660px !important; padding:64px 56px !important; }
.hero-kicker{
  display:inline-flex !important; align-items:center; gap:10px;
  font-size:11px !important; font-weight:800 !important; letter-spacing:.2em !important;
  color:var(--accent) !important; margin-bottom:22px !important;
}
.hero-kicker span{ display:inline-block; width:24px; height:1.5px; border-radius:2px; background:linear-gradient(90deg,var(--accent),transparent); }
.hero-box h1{
  font-size:clamp(40px,5.4vw,74px) !important; line-height:1.0 !important;
  font-weight:900 !important; letter-spacing:-.035em !important; color:#fff !important;
  margin-bottom:24px !important; text-shadow:0 4px 44px rgba(0,0,0,.55);
}
.hero-box h1 em{ font-style:normal !important; color:var(--accent-2) !important; }
.hero-box p{
  font-size:clamp(16px,1.45vw,19px) !important; line-height:1.6 !important;
  color:rgba(247,242,232,.82) !important; max-width:480px !important; margin-bottom:34px !important;
}
.hero-actions{ gap:13px !important; margin-bottom:34px !important; }
.hero-actions .btn{ min-height:54px !important; padding:0 26px !important; }

/* — Счётчик-пилюля: премиальнее, с живой точкой — */
.hero-stat-pill{
  padding:11px 20px 11px 16px !important; border-radius:999px !important;
  border:1px solid rgba(242,191,104,.28) !important; background:rgba(242,191,104,.07) !important;
  color:var(--ink) !important; font-size:14px !important; font-weight:600 !important;
}
.hero-stat-pill::before{
  content:""; width:8px; height:8px; border-radius:50%; background:#7ee0a0;
  box-shadow:0 0 0 0 rgba(126,224,160,.6); animation:pvPulse 2.4s ease-out infinite;
}
@keyframes pvPulse{ 0%{box-shadow:0 0 0 0 rgba(126,224,160,.5)} 70%{box-shadow:0 0 0 8px rgba(126,224,160,0)} 100%{box-shadow:0 0 0 0 rgba(126,224,160,0)} }

@media (max-width:860px){
  .nav.nav-primary{ display:none !important; }
  .hero-content{ padding:48px 26px !important; }
}

/* ── Превью-страница питомца: фокус фото на морде (было видно только уши) ── */
.preview-pet-photo .home-preview-img,
.home-preview-img{ object-fit:cover !important; object-position:center 38% !important; }
.preview-pet-photo{ background:#0b0b0d !important; }

/* ════ Выпадающее меню «Партнёры» (2026-06-23) ════ */
.nav-dd{ position:relative; display:inline-flex; }
.nav-dd-top{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.nav-dd-caret{ font-size:10px; font-style:normal; opacity:.65; transition:transform .16s ease, opacity .16s ease; }
.nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret{ transform:rotate(180deg); opacity:1; }
.nav-dd-menu{
  position:absolute; top:100%; left:0; min-width:210px; margin-top:6px; padding:7px;
  border-radius:14px; background:#0c0c0e; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.7); z-index:300;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-dd-menu a{
  display:block !important; padding:10px 13px !important; border-radius:9px !important; white-space:nowrap;
  font-size:14px !important; color:rgba(247,242,232,.82) !important; border:0 !important; background:transparent !important;
}
.nav-dd-menu a:hover{ background:rgba(234,162,74,.1) !important; color:#f4c987 !important; }

/* ════════════ Блок «Сообщество» на главной (preview10) ════════════ */
.community-home{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,48px); align-items:center;
  padding:clamp(28px,4vw,52px); border-radius:28px; border:1px solid rgba(234,162,74,.22);
  background:radial-gradient(120% 140% at 90% -10%, rgba(234,162,74,.12), transparent 55%), linear-gradient(160deg,#161310,#100d0a); }
.community-home-copy h2{ margin:10px 0 14px; }
.community-home-points{ list-style:none; padding:0; margin:18px 0 24px; display:grid; gap:10px; }
.community-home-points li{ position:relative; padding-left:26px; color:rgba(246,241,231,.78); font-size:15px; line-height:1.5; }
.community-home-points li::before{ content:"🐾"; position:absolute; left:0; top:0; font-size:14px; }
.community-home-points b{ color:#f6f1e7; }
.community-home-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.community-home-pets{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.community-pet{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; }
.community-pet-photo{ width:100%; aspect-ratio:1; border-radius:18px; overflow:hidden; background:#0a0a0a;
  border:1px solid rgba(234,162,74,.22); transition:.18s; }
.community-pet:hover .community-pet-photo{ border-color:rgba(234,162,74,.55); transform:translateY(-2px); }
.community-pet-photo img{ width:100%; height:100%; object-fit:cover; }
.community-pet-name{ color:rgba(246,241,231,.82); font-size:13px; font-weight:600; }
@media (max-width:760px){ .community-home{ grid-template-columns:1fr; } }