/* ------------------------------------------------------------------
   PET GRAVIUM — unified night system
   This layer is intentionally loaded after the legacy stylesheet.
   It keeps existing routes and templates intact while giving every
   screen the same quiet black-and-gold language as the new home page.
   ------------------------------------------------------------------ */

:root {
  --bg: #050505;
  --ink: #f7f3eb;
  --ink-soft: rgba(247,243,235,.67);
  --muted: rgba(247,243,235,.55);
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.16);
  --accent: #e8a044;
  --accent-2: #ffd08b;
  --accent-bg: rgba(232,160,68,.08);
  --panel: rgba(255,255,255,.035);
  --panel-2: rgba(255,255,255,.065);
  --shadow: 0 28px 70px rgba(0,0,0,.48);
  --shadow-small: 0 14px 36px rgba(0,0,0,.32);
}

body {
  background:
    radial-gradient(ellipse 52% 28% at 82% -4%, rgba(232,160,68,.085), transparent 70%),
    radial-gradient(ellipse 36% 22% at 5% 10%, rgba(232,160,68,.035), transparent 72%),
    #050505 !important;
  color: var(--ink) !important;
}
.site-main { min-height: calc(100vh - 210px); overflow: clip; }

/* Header — hierarchy lives in the actions, not in a wall of links. */
.topbar { background: rgba(5,5,5,.9) !important; border-bottom-color: var(--line) !important; }
.topbar-inner { min-height: 76px !important; gap: 24px !important; justify-content: flex-start !important; }
.brand { gap: 11px !important; }
.brand-logo { width: 42px !important; height: 42px !important; }
.nav-primary, .topbar .nav { margin-left: auto; gap: 2px !important; }
.topbar .nav a { padding: 9px 11px !important; color: var(--muted) !important; font-size: 14px !important; font-weight: 650 !important; }
.topbar .nav a:hover { color: var(--ink) !important; border-color: transparent !important; background: transparent !important; }
.auth-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-left: 16px; border-left: 1px solid var(--line); }
.auth-link { display: inline-flex; min-height: 42px; align-items: center; padding: 0 10px; color: var(--muted); font-size: 13px; font-weight: 750; white-space: nowrap; }
.auth-link:hover { color: var(--ink); }
.auth-login { color: var(--ink); border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.auth-login:hover { border-color: rgba(232,160,68,.44); background: var(--accent-bg); }
.auth-register { color: var(--accent-2); }
.topbar-cta { min-height: 44px !important; padding: 0 18px !important; border-radius: 999px !important; background: linear-gradient(135deg, #ffd18a, #dc8d1a) !important; border-color: transparent !important; color: #1c1002 !important; font-weight: 800 !important; box-shadow: 0 10px 26px rgba(232,160,68,.18) !important; }
.topbar-cta:hover { transform: translateY(-1px) !important; box-shadow: 0 14px 32px rgba(232,160,68,.30) !important; }
.topbar-logout { margin: 0; }
.topbar-text-action { min-height: 42px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.topbar-text-action:hover { color: var(--ink); }

/* Typography and reusable surfaces. */
.section, .section-v2 { padding: clamp(54px, 7vw, 92px) 0 !important; background: transparent !important; }
.section-head { max-width: 720px !important; margin-bottom: clamp(26px, 4vw, 44px) !important; }
.section-kicker, .eyebrow { color: var(--accent-2) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .17em !important; text-transform: uppercase; }
.section-head h1, .section-head h2, .section-intro h2 { color: var(--ink) !important; font-size: clamp(34px, 4.8vw, 60px) !important; line-height: 1.02 !important; letter-spacing: -.055em !important; }
.section-head .lead, .lead, .section-intro p { color: var(--ink-soft) !important; line-height: 1.65 !important; }
.card, .empty-box { background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: var(--shadow-small); }
.card:hover { border-color: rgba(232,160,68,.28); }
.btn { min-height: 48px !important; padding: 0 21px !important; border-radius: 999px !important; border-color: var(--line-strong) !important; background: rgba(255,255,255,.025) !important; color: var(--ink) !important; font-weight: 750 !important; }
.btn:hover { transform: translateY(-1px) !important; border-color: rgba(232,160,68,.48) !important; background: var(--accent-bg) !important; box-shadow: 0 10px 24px rgba(0,0,0,.24) !important; }
.btn.btn-primary, .btn-primary { border-color: transparent !important; background: linear-gradient(135deg, #ffd18a, #dc8d1a) !important; color: #1d1001 !important; box-shadow: 0 10px 24px rgba(232,160,68,.18) !important; }
.btn-quiet, .btn.secondary, .btn-ghost { background: transparent !important; color: var(--ink) !important; }
/* Legacy home animations must never hide actions on ordinary content pages. */
.hero-actions { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Forms are calm, contrasty and comfortable on touch devices. */
.account-narrow { max-width: 690px !important; }
.form-grid, .form-stack { gap: 15px !important; }
.label { display: grid !important; gap: 8px !important; color: var(--ink) !important; font-size: 12px !important; font-weight: 760 !important; letter-spacing: .01em; }
.input, .textarea, .select, .g-select-trigger { border: 1px solid var(--line) !important; border-radius: 12px !important; background: rgba(255,255,255,.035) !important; color: var(--ink) !important; box-shadow: none !important; }
.input { min-height: 50px !important; padding: 0 14px !important; }
.textarea { min-height: 124px !important; padding: 14px !important; }
.input::placeholder, .textarea::placeholder { color: rgba(247,243,235,.38) !important; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(232,160,68,.13) !important; }
.form-block-title { border-top-color: var(--line) !important; color: var(--ink) !important; }
.form-help { color: var(--muted) !important; }
.privacy-panel { border-color: var(--line) !important; border-radius: 16px !important; background: rgba(255,255,255,.028) !important; color: var(--ink) !important; }
.flash { border: 1px solid rgba(232,160,68,.32) !important; border-radius: 13px !important; background: rgba(232,160,68,.10) !important; color: #ffd7a4 !important; }

/* Authentication: a restrained side story, never a separate product. */
.auth-page { padding: clamp(34px, 5vw, 68px) 0 clamp(62px, 7vw, 96px) !important; background: transparent !important; }
.auth-shell { overflow: hidden; border: 1px solid var(--line) !important; border-radius: 20px !important; background: #0c0d0d !important; box-shadow: var(--shadow) !important; }
.auth-aside { background: radial-gradient(circle at 12% 12%, rgba(232,160,68,.20), transparent 36%), linear-gradient(145deg, #19130c, #0c0d0d 72%) !important; }
.auth-aside h1, .auth-card h2 { color: var(--ink) !important; }
.auth-aside h1 em { color: var(--accent-2) !important; }
.auth-aside > p, .auth-aside-note, .auth-card-lead, .auth-switch, .auth-separator { color: var(--ink-soft) !important; }
.auth-switch a { color: var(--accent-2) !important; }
.auth-separator::before, .auth-separator::after { background: var(--line) !important; }
.social-login-buttons .btn { min-height: 44px !important; }

/* Cabinet: product cards, not an admin dashboard. */
.account-page { padding-top: clamp(42px, 6vw, 76px) !important; }
.account-hero h1, .account-toolbar b, .pet-dashboard-content h2, .account-empty h2, .club-sync-card h2 { color: var(--ink) !important; }
.account-hero p, .account-toolbar span, .pet-state, .account-empty p, .club-sync-card p { color: var(--ink-soft) !important; }
.pet-dashboard-card { overflow: hidden; border: 1px solid var(--line) !important; border-radius: 18px !important; background: linear-gradient(145deg, #151515, #0d0e0e) !important; box-shadow: var(--shadow-small); }
.pet-dashboard-card:hover { border-color: rgba(232,160,68,.35) !important; box-shadow: var(--shadow) !important; }
.pet-dashboard-image { background: #080808 !important; }
.pet-dashboard-image img { object-fit: cover; }
.pet-code, .pet-dashboard-actions a { color: var(--accent-2) !important; }
.pet-state.is-active::before { background: #80c99c !important; }
.account-empty { border-color: var(--line-strong) !important; background: rgba(255,255,255,.018) !important; }
.club-sync-card { border: 1px solid rgba(232,160,68,.24) !important; border-radius: 18px !important; background: linear-gradient(112deg, rgba(232,160,68,.13), rgba(255,255,255,.025) 48%) !important; }
.club-sync-mark { background: var(--accent) !important; color: #1e1000 !important; }

/* Search, partners and events stay in the same warm, dark world. */
.lost-hero-card, .partners-hero { border: 1px solid var(--line) !important; border-radius: 20px !important; background: radial-gradient(circle at 86% 6%, rgba(232,160,68,.14), transparent 35%), linear-gradient(135deg, #15120e, #0b0c0c 72%) !important; box-shadow: var(--shadow-small); }
.lost-live-note { background: rgba(232,160,68,.12) !important; color: #ffdbac !important; }
.lost-card { overflow: hidden; border: 1px solid var(--line) !important; border-radius: 16px !important; background: #111212 !important; }
.lost-card:hover { border-color: rgba(232,160,68,.34) !important; box-shadow: var(--shadow-small) !important; }
.lost-card-body p, .lost-meta, .lost-city, .lost-notes, .empty-box p { color: var(--ink-soft) !important; }
.lost-badge, .lost-home-badge { background: rgba(232,160,68,.14) !important; color: #ffd3a0 !important; }
.partners-hero-title, .event-head h1 { color: var(--ink) !important; }
.partners-hero-lead, .partner-city, .event-meta, .event-card-body p { color: var(--ink-soft) !important; }
.pcard, .step-card, .scan-demo, .partners-cta, .event-desc, .event-commem, .partner-head, .partner-badge-block { border-color: var(--line) !important; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important; }
.pcard-ico { background: var(--accent-bg) !important; color: var(--accent-2) !important; }
.event-card { border: 1px solid var(--line) !important; border-radius: 16px !important; background: #111212 !important; }
.event-card:hover { border-color: rgba(232,160,68,.38) !important; }
.event-card-meta, .event-meta-partner, .link-chip { color: var(--accent-2) !important; }
.event-cover { border-radius: 18px !important; border: 1px solid var(--line); }
.events-empty { grid-column: 1 / -1; text-align: left; padding: clamp(30px, 5vw, 52px) !important; }
.events-empty h3 { margin: 10px 0 10px; color: var(--ink); font-size: clamp(25px, 3vw, 34px); letter-spacing: -.045em; }
.events-empty p { max-width: 530px; margin: 0 0 22px; color: var(--ink-soft); }

/* Public QR profile gets contrast without looking clinical. */
.profile-wrap { background: transparent !important; }
.compact-profile, .profile-card { border-color: var(--line) !important; border-radius: 20px !important; background: linear-gradient(145deg, #151515, #0d0e0e) !important; box-shadow: var(--shadow) !important; }
.left-stack { background: linear-gradient(160deg, #19140f, #101010) !important; }
.profile-photo, .compact-photo { background: #080808 !important; border-color: var(--line) !important; }
.mini-brand-card, .qr-card { border-color: var(--line) !important; background: rgba(255,255,255,.025) !important; }
.profile-status { border-color: rgba(232,160,68,.34) !important; background: rgba(232,160,68,.10) !important; color: #ffd4a1 !important; }
.profile-title, .contact-title, .finder-help-title, .note-title, .info-val, .mini-brand-title, .qr-caption { color: var(--ink) !important; }
.profile-subtitle, .mini-brand-text, .qr-subcaption, .contact-phone-visible, .finder-help-item, .info-key { color: var(--ink-soft) !important; }
.contact-box { border-color: rgba(232,160,68,.27) !important; background: linear-gradient(145deg, rgba(232,160,68,.12), rgba(255,255,255,.025)) !important; }
.contact-phone-visible a { color: var(--accent-2) !important; }
.finder-help-box { border-left-color: var(--accent) !important; background: rgba(232,160,68,.07) !important; }
.note, .info-item { border-color: var(--line) !important; background: rgba(255,255,255,.025) !important; }
.note-important { border-color: rgba(232,160,68,.30) !important; background: rgba(232,160,68,.10) !important; }
.commemorative-block { border-color: rgba(232,160,68,.30) !important; background: linear-gradient(135deg, #25180c, #12100d) !important; }

@media (max-width: 860px) {
  .topbar-inner { min-height: 68px !important; gap: 10px !important; }
  .brand-logo { width: 34px !important; height: 34px !important; }
  .brand-text, .nav-primary, .topbar .nav { display: none !important; }
  .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 { display: inline-flex !important; min-height: 40px !important; padding: 0 13px !important; font-size: 12px !important; }
  .mobile-nav-strip { display: flex !important; justify-content: space-around; overflow: visible !important; background: #080808 !important; }
  .mobile-nav-strip a { flex: 1 1 0; justify-content: center; padding: 0 8px !important; border-right-color: var(--line) !important; color: var(--muted) !important; font-size: 11px !important; }
  .auth-shell { grid-template-columns: 1fr !important; }
  .auth-aside { padding: 34px 28px !important; }
  .auth-card { padding: 34px 26px !important; }
  .account-hero { align-items: flex-start !important; flex-direction: column; }
  .pet-dashboard-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .container { padding: 0 16px !important; }
  .section, .section-v2 { padding: 46px 0 !important; }
  .section-head h1, .section-head h2 { font-size: clamp(31px, 10vw, 44px) !important; }
  .card, .empty-box, .lost-hero-card, .partners-hero { border-radius: 15px !important; }
  .pet-dashboard-card { grid-template-columns: 116px 1fr !important; min-height: 176px !important; }
  .pet-dashboard-content { padding: 17px !important; }
  .club-sync-card { align-items: flex-start !important; flex-wrap: wrap; padding: 21px !important; }
  .club-sync-card .btn { margin-left: 58px !important; }
}

/* ── Смягчённый CTA «Активировать QR» в шапке: мягкое золото вместо резкого оранжевого (night3) ── */
.topbar-cta.btn-primary,
.topbar-cta {
  background: linear-gradient(180deg, rgba(234,162,74,.15), rgba(234,162,74,.085)) !important;
  border: 1px solid rgba(234,162,74,.46) !important;
  color: #f4cf94 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.topbar-cta.btn-primary:hover,
.topbar-cta:hover {
  background: linear-gradient(180deg, rgba(234,162,74,.25), rgba(234,162,74,.15)) !important;
  border-color: rgba(234,162,74,.72) !important;
  color: #ffdca6 !important;
  box-shadow: none !important;
}