/* ═══════════════════════════════════════════════════════════
   Прототип приложения «Мой Хвостик» — Фаза 1, только интерфейс.
   Данные зашиты, сервера нет. Цвета и шрифты берутся из tokens.css,
   чтобы прототип не разъезжался с лендингом.
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--sans);font-size:16px;line-height:1.5;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}

/* Скрытие по атрибуту hidden должно побеждать display у классов:
   иначе .sec-add{display:inline-flex} и .sos-pet{display:inline-block}
   остаются видны при hidden. Стоит здесь, в базовых правилах, а не в конце
   файла — однажды оно уже пропало вместе с вырезанным блоком стилей. */
[hidden]{display:none !important;}

/* ── Демо-плашка ──
   Тело страницы — колонка из плашки и приложения. Так плашка занимает
   столько, сколько нужно её тексту (на узком экране он переносится),
   а приложение забирает остаток без магических чисел высоты. */
body{display:flex;flex-direction:column;}

.demo-bar{
  flex:0 0 auto;z-index:200;
  background:var(--accent-deep);color:#fff;
  padding:calc(env(safe-area-inset-top,0px) + 9px) 16px 9px;
  font-size:12px;line-height:1.4;text-align:center;
  box-shadow:0 2px 10px rgba(43,43,38,.16);
}
.demo-bar strong{font-weight:700;}
.demo-bar a{
  color:#fff;text-decoration:underline;text-underline-offset:2px;
  white-space:nowrap;margin-left:6px;opacity:.85;
}
.demo-bar a:hover{opacity:1;}

/* ── Оболочка: на телефоне во весь экран, на десктопе — колонка по центру ── */
.app{
  width:100%;max-width:480px;margin:0 auto;
  flex:1 1 auto;min-height:0;background:var(--bg);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
/* Планшетная полоса: телефонная колонка на однотонном холсте.
   С 900px включается отдельная десктопная раскладка ниже. */
@media (min-width:520px) and (max-width:899px){
  body{background:#EDE4D9;}
  .app{box-shadow:0 0 60px rgba(43,43,38,.16);}
}

/* Декоративные кляксы */
.decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.blob{position:absolute;border-radius:50%;}
.blob.a{width:380px;height:380px;top:-160px;right:-140px;background:var(--accent-soft);}
.blob.b{width:300px;height:300px;bottom:40px;left:-140px;background:var(--sand);}

.safetop{height:env(safe-area-inset-top,0);flex:0 0 auto;}

.viewport{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1;-webkit-overflow-scrolling:touch;}
.viewport::-webkit-scrollbar{width:0;}

/* Нижний отступ с запасом: внизу висит плашка прототипа,
   и без него она накрывает последнюю кнопку. */
.screen{display:none;padding:10px 20px 64px;}
.screen.active{display:block;animation:fadeup .26s ease;}
@keyframes fadeup{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ── Шапка экрана ── */
.scr-head{display:flex;align-items:flex-start;gap:12px;padding:10px 0 18px;}
.scr-lockup{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.scr-brand{font-family:var(--serif);font-size:28px;line-height:1.08;}
.scr-sub{font-family:var(--sans);font-size:13px;color:var(--text3);line-height:1.35;}
.scr-bell{
  width:34px;height:34px;border-radius:50%;background:var(--icon-bg);
  display:flex;align-items:center;justify-content:center;flex:0 0 34px;position:relative;
  margin-top:3px;   /* к первой строке названия, а не к середине блока */
}
.scr-bell svg{width:17px;height:17px;stroke:var(--text2);fill:none;stroke-width:1.9;}
.scr-bell .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--accent);}

.page-title{font-family:var(--serif);font-size:28px;line-height:1.15;margin:6px 0 4px;}
.page-sub{font-size:14px;color:var(--text2);margin-bottom:20px;line-height:1.5;}

.sec-title{font-family:var(--serif);font-size:20px;margin:26px 0 12px;}

/* ── Полоса питомцев ──
   Горизонтальная прокрутка: с тремя-четырьмя питомцами список сверху
   съел бы весь экран, а выбор нужен один раз и мельком. */
.pet-strip{
  display:flex;gap:9px;overflow-x:auto;
  margin:0 -20px 12px;padding:2px 20px 6px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pet-strip::-webkit-scrollbar{display:none;}

.pet-chip{
  flex:0 0 auto;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:72px;padding:8px 4px;border-radius:16px;
  border:1.5px solid transparent;
  transition:border-color .16s ease, background-color .16s ease;
}
.pet-chip.on{border-color:var(--accent-line);background:var(--accent-soft);}

.pet-chip-ava{
  width:44px;height:44px;border-radius:50%;flex:0 0 44px;
  background:var(--icon-bg);border:1.5px solid rgba(163,54,49,.13);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pet-chip-ava.has-photo{border-color:var(--accent);background:none;}
.pet-chip-ava svg{width:22px;height:22px;fill:var(--accent);opacity:.65;}
.pet-chip.on .pet-chip-ava{border-color:var(--accent);}
.pet-chip.on .pet-chip-ava svg{opacity:1;}

.pet-chip-name{
  font-size:11.5px;line-height:1.25;color:var(--text2);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pet-chip.on .pet-chip-name{color:var(--accent);font-weight:600;}

/* ── Добавить питомца ── */
.pet-add{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;margin-top:9px;padding:11px;
  border:1px dashed var(--accent-line);border-radius:14px;
  font-size:14px;font-weight:600;color:var(--accent);
  transition:background-color .15s;
}
.pet-add:hover{background:var(--accent-soft);}
.pet-add svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;}

/* Удаление — не кнопка действия, а выход: серым и без рамки,
   чтобы не соседствовать по весу с «Сохранить». */
.pet-remove{
  display:block;width:100%;margin-top:18px;padding:10px;
  font-size:13.5px;color:var(--text3);
  transition:color .15s;
}
.pet-remove:hover{color:var(--accent);}

/* ── Карточка питомца ── */
.pet-card{
  position:relative;
  background:var(--card);border-radius:20px;padding:20px;
  display:flex;align-items:center;gap:16px;
  box-shadow:var(--shadow);margin-bottom:4px;width:100%;text-align:left;
}
.pet-ava{
  width:80px;height:80px;border-radius:50%;flex:0 0 80px;
  background:var(--icon-bg);border:2px solid rgba(163,54,49,.13);
  display:flex;align-items:center;justify-content:center;
}
.pet-ava svg{width:38px;height:38px;fill:var(--accent);}

/* «Изменить» — подпись на самой карточке, а не вложенная кнопка:
   карточка сама по себе <button>, и кнопка внутри кнопки — невалидная
   разметка. Ведут они всё равно в одно место, в анкету. Карандаш
   нарисован в background, потому что у псевдоэлемента один content. */
.pet-card::after{
  content:'Изменить';
  position:absolute;top:16px;right:16px;
  padding:5px 12px 5px 29px;border-radius:20px;
  border:1px solid var(--hairline);background:var(--bg) no-repeat 11px center/13px 13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F5F57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  font-size:12px;font-weight:600;color:var(--text2);line-height:1.5;
}
/* В пустом состоянии менять нечего — там зовут завести питомца */
.pet-card.empty::after{content:none;}
.pet-card:not(.empty) .chev{display:none;}
/* Место под «Изменить» освобождают только верхние строки: подпись
   висит в углу и до тегов не достаёт, а сузь мы всю колонку — теги
   вставали бы по одному в строку. */
.pet-card:not(.empty) .pet-name,
.pet-card:not(.empty) .pet-breed{padding-right:92px;}
/* С фото рамка становится акцентной: пустой кружок с лапой — заглушка,
   а фото — то, ради чего аватарку вообще показывают. */
.pet-ava.has-photo{border:2px solid var(--accent);background:none;overflow:hidden;padding:0;}
.pet-photo{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.pet-name{font-family:var(--serif);font-size:20px;line-height:1.15;display:block;}
.pet-breed{font-size:13.5px;color:var(--text2);margin-top:3px;display:block;}
.pet-meta{font-size:12.5px;color:var(--text3);margin-top:3px;display:block;}

/* ── Характер питомца ──
   Теги в карточке и те же теги в анкете. Карточка — это <button>,
   поэтому строке тегов нужен явный display, иначе она ляжет в строку
   с кличкой. Перенос разрешён: пять слов в одну строку не влезут. */
.traits{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
/* В карточке теги крупнее и светлее, чем в анкете: там они
   редактируются и должны читаться как поля, здесь — как подпись. */
.pet-card .traits{gap:8px;margin-top:12px;}
.pet-card .trait{
  background:none;border:1px solid var(--sand-line);
  padding:6px 16px;font-size:13px;font-weight:500;border-radius:20px;
}
.trait{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--sand);border:1px solid var(--sand-line);
  border-radius:999px;padding:3px 10px;
  font-size:11.5px;font-weight:600;color:var(--text2);
  line-height:1.5;white-space:nowrap;
}
.chev{width:16px;height:16px;stroke:var(--text3);fill:none;stroke-width:2.4;flex:0 0 16px;}

/* ── Карточки-строки ── */
.card{
  background:var(--card);border-radius:16px;padding:14px;
  display:flex;align-items:center;gap:13px;
  box-shadow:var(--shadow-soft);width:100%;text-align:left;
  transition:transform .15s ease;
}
.card:active{transform:scale(.985);}
.stack{display:flex;flex-direction:column;gap:9px;}

/* Два в ряд — только на главном экране. Тот же .stack лежит в листе
   «Ближайшие напоминания», где строки читаются списком, поэтому
   сетку вешаем на #today-events, а не на класс. */
#today-events{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;}
#today-events .card{
  position:relative;flex-direction:column;align-items:flex-start;gap:10px;
  padding:16px;border-radius:16px;box-shadow:0 2px 12px rgba(43,43,38,.06);
}
/* На узкой колонке иконка и текст не помещаются в строку, поэтому
   внутри карточки они встают друг под друга. */
#today-events .card .tile{border-radius:50%;width:38px;height:38px;flex:0 0 38px;}
#today-events .card .grow{width:100%;}
#today-events .card .t-title{font-size:14.5px;}
#today-events .card .t-sub{font-size:12px;}
/* Галочка в угол: третьим элементом в колонке она сбивала ритм */
#today-events .card .done-btn{position:absolute;top:14px;right:14px;}
/* Пустому состоянию сетка не нужна — оно одно на всю ширину */
#today-events .rem-empty{grid-column:1 / -1;}
.tile{
  width:42px;height:42px;border-radius:13px;flex:0 0 42px;
  background:var(--icon-bg);display:flex;align-items:center;justify-content:center;
}
.tile svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.tile svg.solid{fill:var(--accent);stroke:none;}
.grow{flex:1;min-width:0;}
.t-title{font-size:15.5px;font-weight:600;line-height:1.3;display:block;}
.t-sub{font-size:13px;color:var(--text2);margin-top:2px;display:block;}
.t-sub .overdue{color:var(--accent);font-weight:700;}

.pill{font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap;flex:0 0 auto;}
.pill.soon{background:rgba(199,154,62,.15);color:#8A6A22;}
.pill.ok{background:rgba(94,140,90,.15);color:#3F6B3C;}
.pill.due{background:var(--accent-soft);color:var(--accent);}

/* Кнопка «Выполнено» */
.done-btn{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--accent-line);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s, border-color .15s;
}
.done-btn svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.done-btn.is-done{background:var(--accent);border-color:var(--accent);}
.done-btn.is-done svg{stroke:#fff;}

/* ── Главная кнопка SOS ── */
.sos-btn{
  display:flex;align-items:center;gap:12px;
  width:100%;min-height:60px;background:var(--accent-grad);color:#fff;
  border-radius:16px;padding:0 18px;
  font-size:17px;font-weight:600;
  box-shadow:0 10px 24px rgba(126,35,34,.3);
  margin-top:20px;
  /* Плавающая кнопка обратной связи (z-index 90) неизбежно проходит
     над этой полосой при прокрутке. Раньше полосу под неё сужали,
     но на 390 пикселях текст переставал помещаться в строку.
     Поэтому главная кнопка просто лежит выше: в месте пересечения
     нажатие достаётся ей, а не форме обратной связи. Промах по ней
     в тревожный момент стоит дороже, чем недоступная пару секунд
     кнопка «Напишите нам» — до неё достаточно прокрутить. */
  position:relative;z-index:95;
}
.sos-paw{width:22px;height:22px;fill:#fff;flex:0 0 22px;}
.sos-btn .grow{text-align:left;}
.sos-btn .chev{stroke:#fff;opacity:.9;}

/* ── Баннер подписки ── */
.sub-banner{
  margin-top:22px;
  margin-top:20px;background:linear-gradient(135deg,#fff8f0 0%,#fff0e6 100%);
  border:1.5px solid var(--accent);border-radius:18px;padding:16px;
  display:flex;flex-direction:column;gap:12px;
}
.sub-banner-body{display:flex;align-items:flex-start;gap:12px;}
.sub-banner-ico{flex:0 0 32px;width:32px;height:32px;color:var(--accent);}
.sub-banner-ico svg{width:100%;height:100%;}
.sub-banner-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sub-banner-text strong{font-size:15.5px;font-weight:700;color:var(--text);}
.sub-banner-text span{font-size:13px;color:var(--text2);line-height:1.4;}
.sub-banner-btn{
  width:100%;background:var(--accent-grad);color:#fff;
  border-radius:999px;padding:13px;
  font-size:15px;font-weight:600;
  box-shadow:0 6px 16px rgba(126,35,34,.25);
  transition:transform .12s;
}
.sub-banner-btn:active{transform:scale(.97);}
.sub-banner-btn:disabled{opacity:.6;pointer-events:none;}

/* Зелёный здесь не из палитры бренда намеренно: это системное
   подтверждение оплаты, а не элемент интерфейса. */
.sub-success{
  margin-top:20px;background:#e8f9ee;border:1.5px solid #34c759;
  border-radius:16px;padding:14px 16px;
  display:flex;align-items:center;gap:10px;color:#1a7a33;
}
.sub-success svg{width:22px;height:22px;flex:0 0 22px;}
.sub-success span{font-size:14px;font-weight:500;line-height:1.3;}

/* Два входа в ряд. Внутри колонка: на узкой колонке иконка, заголовок
   и подпись в строку не помещаются, а переносить подпись по слогам
   хуже, чем поставить её под иконкой. */
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.quick-btn{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:var(--card);border:1px solid var(--hairline);border-radius:16px;
  padding:16px;text-align:left;
  box-shadow:0 2px 12px rgba(43,43,38,.06);
  transition:transform .15s ease;
}
.quick-btn:active{transform:scale(.985);}
.quick-ico{
  width:40px;height:40px;border-radius:50%;flex:0 0 40px;
  display:flex;align-items:center;justify-content:center;
}
.quick-ico svg{width:20px;height:20px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
/* Цвет кружка отличает подсказку от документов: две одинаковые
   карточки рядом читались бы как одна кнопка на две колонки. */
.quick-ico.warm{background:rgba(199,154,62,.18);}
.quick-ico.warm svg{stroke:#8A6A22;}
.quick-ico.rose{background:var(--accent-soft);}
.quick-ico.rose svg{stroke:var(--accent);}
.quick-t{display:block;font-size:15px;font-weight:600;line-height:1.25;}
.quick-s{display:block;font-size:12.5px;color:var(--text2);line-height:1.35;margin-top:-4px;}
.quick-btn .chev{position:absolute;top:19px;right:14px;}

/* ── История: лента по датам ── */
.history{display:flex;flex-direction:column;gap:22px;}

.h-date{
  font-family:var(--serif);font-weight:400;
  font-size:16px;line-height:1.2;color:var(--text);
  margin:0 0 10px 2px;
}

/* Нить соединяет точки записей одного дня. Рисуется от каждой точки
   до следующей, а не на всю высоту списка: иначе у одиночной записи
   висела бы нить в никуда, а у раскрытой — тянулась вдоль подробностей. */
.h-list{list-style:none;display:flex;flex-direction:column;gap:9px;padding-left:22px;}
.h-item{position:relative;}
.h-item:not(:last-child)::after{
  content:"";position:absolute;
  left:-16.75px;              /* центр точки: -22px + 12px / 2 − 0,75px */
  top:31px;                   /* сразу под точкой */
  bottom:-24px;               /* до точки следующей записи: 9px зазора + 17px − 2px */
  width:1.5px;background:var(--sand-line);border-radius:2px;
}

/* Точка по типу: эпизод — акцентная, событие — нейтральная */
.h-dot{
  position:absolute;left:-22px;top:17px;
  width:12px;height:12px;border-radius:50%;
  background:var(--bg);border:2px solid var(--text3);
}
.h-item.episode .h-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

.h-card{
  display:block;width:100%;text-align:left;
  background:var(--card);border-radius:14px;padding:13px 14px;
  box-shadow:var(--shadow-soft);
  transition:box-shadow .15s ease;
}
.h-card:hover{box-shadow:var(--shadow);}
.h-item.open .h-card{border-bottom-left-radius:0;border-bottom-right-radius:0;}

.h-top{display:flex;align-items:center;gap:9px;}
.h-title{flex:1;min-width:0;font-size:15px;font-weight:600;line-height:1.3;color:var(--text);}
.h-chev{
  width:15px;height:15px;flex:0 0 15px;
  stroke:var(--text3);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease;
}
.h-item.open .h-chev{transform:rotate(180deg);}

/* Одна строка: длинное описание обрезается многоточием, целиком — в подробностях */
.h-sum{
  display:block;margin-top:4px;
  font-size:13px;line-height:1.45;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.urg-pill{
  flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.urg-pill.watch{background:rgba(94,140,90,.15);color:#3F6B3C;}
.urg-pill.plan{background:rgba(58,90,99,.13);color:#30505A;}
.urg-pill.today{background:rgba(199,154,62,.18);color:#6E5417;}
.urg-pill.urgent{background:var(--accent-soft);color:var(--accent);}

.h-details{
  background:var(--card);border-top:1px solid var(--hairline);
  border-radius:0 0 14px 14px;box-shadow:var(--shadow-soft);
  padding:4px 14px 12px;
}
.h-kv{display:flex;flex-direction:column;gap:2px;padding-top:10px;}
.h-k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);}
.h-v{font-size:13.5px;line-height:1.5;color:var(--text);}

/* Пусто — тёплое приглашение, а не пустая страница */
.h-empty{text-align:center;padding:48px 24px 24px;}
.h-empty-ico{
  width:58px;height:58px;margin:0 auto 16px;border-radius:50%;
  background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
}
.h-empty-ico svg{width:26px;height:26px;fill:var(--accent);opacity:.75;}
.h-empty-t{font-family:var(--serif);font-size:19px;line-height:1.35;color:var(--text);max-width:280px;margin:0 auto 8px;text-wrap:balance;}
.h-empty-s{font-size:13px;line-height:1.5;color:var(--text2);max-width:280px;margin:0 auto;}

/* ── Профиль питомца ── */
.field-group{background:var(--card);border-radius:18px;box-shadow:var(--shadow-soft);overflow:hidden;margin-bottom:16px;}
.field-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--hairline);}
.field-row:last-child{border-bottom:none;}
.field-k{font-size:14.5px;color:var(--text2);flex:1;}
.field-v{font-size:14.5px;font-weight:600;text-align:right;}
.field-v.muted{font-weight:400;color:var(--text3);}

.group-label{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text3);margin:22px 2px 10px;
}

/* ── Нижние вкладки ── */
.side-brand{display:none;}

.tabbar{
  flex:0 0 auto;display:flex;background:var(--card);
  border-top:1px solid var(--hairline);
  padding:9px 6px calc(env(safe-area-inset-bottom,8px) + 10px);
  position:relative;z-index:40;
  box-shadow:0 -4px 20px rgba(43,43,38,.04);
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:5px 0;color:var(--text3);transition:color .18s;
}
.tab svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.tab svg.solid{fill:currentColor;stroke:none;}
.tab span{font-size:10px;font-weight:600;}
.tab.active{color:var(--accent);}

/* ══════════ SOS: поверх всего ══════════ */
/* absolute, а не fixed: слой лежит внутри .app и потому накрывает
   приложение, но не демо-плашку над ним */
.sos{
  position:absolute;inset:0;z-index:100;background:var(--bg);
  display:none;flex-direction:column;
  max-width:480px;margin:0 auto;
}
.sos.open{display:flex;animation:slideup .28s ease;}
@keyframes slideup{from{transform:translateY(16px);opacity:0;}to{transform:none;opacity:1;}}

.sos-head{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top,0) + 16px) 20px 14px;
  border-bottom:1px solid var(--hairline);background:var(--bg);
}
.sos-close{
  width:34px;height:34px;border-radius:50%;background:var(--icon-bg);
  display:flex;align-items:center;justify-content:center;flex:0 0 34px;
}
.sos-close svg{width:16px;height:16px;stroke:var(--text2);fill:none;stroke-width:2.4;stroke-linecap:round;}
.sos-step-label{font-size:12.5px;color:var(--text3);font-weight:600;}
.sos-head-title{font-size:15px;font-weight:600;}

/* Прогресс */
.sos-bar{flex:0 0 auto;height:3px;background:var(--icon-bg);}
.sos-bar span{display:block;height:100%;background:var(--accent);width:33%;transition:width .35s ease;}

.sos-body{flex:1;overflow-y:auto;padding:22px 20px 28px;}
.sos-body::-webkit-scrollbar{width:0;}
.sos-step{display:none;}
.sos-step.active{display:block;animation:fadeup .26s ease;}

.sos-q{font-family:var(--serif);font-size:24px;line-height:1.2;margin-bottom:8px;}
.sos-hint-txt{font-size:14px;color:var(--text2);margin-bottom:20px;line-height:1.5;}

.sos-input{
  width:100%;min-height:130px;resize:none;
  background:var(--card);border:1px solid var(--sand-line);border-radius:16px;
  padding:15px;font-size:16px;line-height:1.5;
  transition:border-color .16s, box-shadow .16s;
}
.sos-input::placeholder{color:var(--text3);}
.sos-input:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft);}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.chip{
  border:1px solid var(--accent-line);background:transparent;color:var(--text2);
  border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;
  transition:background-color .15s,color .15s,border-color .15s;
}
.chip:active{background:var(--accent-soft);}

/* Варианты ответа на уточняющий вопрос */
.opts{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
.opt{
  background:var(--card);border:1.5px solid transparent;border-radius:14px;
  padding:15px 16px;font-size:15px;text-align:left;width:100%;
  box-shadow:var(--shadow-soft);display:flex;align-items:center;gap:12px;
  transition:border-color .15s, background-color .15s;
}
.opt .radio{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;
  border:1.5px solid var(--sand-line);position:relative;transition:border-color .15s;
}
.opt.sel{border-color:var(--accent);}
.opt.sel .radio{border-color:var(--accent);}
.opt.sel .radio::after{
  content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--accent);
}

.sos-foot{
  flex:0 0 auto;padding:14px 20px calc(env(safe-area-inset-bottom,8px) + 16px);
  border-top:1px solid var(--hairline);background:var(--bg);
}
.btn-main{
  width:100%;background:var(--accent-grad);color:#fff;
  border-radius:999px;padding:16px;font-size:16px;font-weight:600;
  box-shadow:0 8px 20px rgba(126,35,34,.26);
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:opacity .15s;
}
.btn-main[disabled]{opacity:.4;box-shadow:none;pointer-events:none;}
.btn-main svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

/* Кнопки на экране результата — настоящие ссылки, поэтому гасим
   подчёркивание и цвет, которые браузер даёт ссылкам по умолчанию. */
a.btn-main, a.btn-soft{text-decoration:none;}
a.btn-main{color:#fff;}
a.btn-soft{color:var(--text);}
.btn-soft{
  width:100%;background:transparent;border:1px solid var(--sand-line);
  border-radius:999px;padding:15px;font-size:15px;font-weight:600;color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:9px;
}
.btn-soft svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

/* ── Результат разбора ── */
.urg{
  border-radius:18px;padding:18px;margin-bottom:18px;
  display:flex;gap:14px;align-items:flex-start;
}
.urg-ico{
  width:42px;height:42px;border-radius:50%;flex:0 0 42px;
  display:flex;align-items:center;justify-content:center;
}
.urg-ico svg{width:21px;height:21px;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.urg-label{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85;}
.urg-txt{font-family:var(--serif);font-size:21px;line-height:1.2;margin-top:3px;}
.urg-why{font-size:13.5px;margin-top:7px;line-height:1.5;opacity:.9;}

.urg.watch{background:rgba(94,140,90,.11);border:1px solid rgba(94,140,90,.3);color:#33562F;}
.urg.watch .urg-ico{background:rgba(94,140,90,.16);}
.urg.watch .urg-ico svg{stroke:#3F6B3C;}
.urg.plan{background:rgba(58,90,99,.10);border:1px solid rgba(58,90,99,.28);color:#2B454E;}
.urg.plan .urg-ico{background:rgba(58,90,99,.15);}
.urg.plan .urg-ico svg{stroke:#30505A;}
.urg.today{background:rgba(199,154,62,.12);border:1px solid rgba(199,154,62,.35);color:#6E5417;}
.urg.today .urg-ico{background:rgba(199,154,62,.18);}
.urg.today .urg-ico svg{stroke:#8A6A22;}
.urg.urgent{background:var(--accent-grad);border:1px solid var(--accent-deep);color:#fff;}
.urg.urgent .urg-ico{background:rgba(255,255,255,.18);}
.urg.urgent .urg-ico svg{stroke:#fff;}

.res-block{background:var(--card);border-radius:16px;padding:16px;box-shadow:var(--shadow-soft);margin-bottom:12px;}
.res-h{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.res-h svg{width:18px;height:18px;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex:0 0 18px;}
.res-h.do svg{stroke:#3F6B3C;}
.res-h.dont svg{stroke:var(--accent);}
.res-h span{font-size:14.5px;font-weight:700;}
.res-list{list-style:none;display:flex;flex-direction:column;gap:11px;}
.res-list li{display:flex;gap:11px;font-size:14.5px;line-height:1.5;color:var(--text);}
.res-list .b{width:6px;height:6px;border-radius:50%;flex:0 0 6px;margin-top:8px;}
.res-block.do .b{background:#5E8C5A;}
.res-block.dont .b{background:var(--accent);}

.disclaim{
  background:var(--sand);border:1px solid var(--sand-line);border-radius:14px;
  padding:14px 15px;display:flex;gap:11px;align-items:flex-start;margin:16px 0 4px;
}
.disclaim svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--text2);fill:none;stroke-width:1.9;margin-top:1px;}
.disclaim p{font-size:12.5px;line-height:1.5;color:var(--text2);}

/* ── Колокольчик: ближайшие напоминания ── */
.bell-empty{text-align:center;padding:42px 20px 24px;}
.bell-empty .rem-empty-ico{margin-bottom:16px;}

.bell-row .t-sub{color:var(--text2);}
.bell-row.late{border:1px solid var(--accent-line);background:var(--accent-soft);}
.pill.soon{background:var(--sand);color:var(--text2);}

/* Строка Telegram: выглядит как будущая кнопка, но честно неактивна */
.tg-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1px dashed var(--sand-line);border-radius:16px;padding:13px 15px;
}
.tg-row:disabled{cursor:default;opacity:1;}
.tg-ico{
  width:36px;height:36px;border-radius:50%;flex:0 0 36px;
  background:var(--icon-bg);display:flex;align-items:center;justify-content:center;
}
.tg-ico svg{width:18px;height:18px;fill:none;stroke:var(--text3);stroke-width:1.8;stroke-linejoin:round;}
.tg-text{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--text2);}
.tg-sub{display:block;font-size:12px;font-weight:400;color:var(--text3);margin-top:2px;line-height:1.4;}
.tg-soon{
  flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  background:var(--sand);color:var(--text3);border-radius:999px;padding:4px 10px;
}

/* Всплывающее сообщение */
.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,8px) + 120px);
  transform:translateX(-50%) translateY(10px);
  background:var(--text);color:#fff;font-size:13.5px;font-weight:600;
  padding:12px 20px;border-radius:999px;z-index:200;
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;
  box-shadow:0 10px 26px rgba(43,43,38,.28);white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── Анкета питомца ── */
.field-row{cursor:text;}
.field-k{flex:0 0 auto;}
.field-in{
  flex:1 1 auto;min-width:0;width:100%;
  background:transparent;border:none;
  font-size:14.5px;font-weight:600;color:var(--text);
  text-align:right;padding:2px 0;
  text-overflow:ellipsis;
}
.field-in::placeholder{font-weight:400;color:var(--text3);}
/* Пустое поле не должно выглядеть заполненным */
.field-in.is-empty{font-weight:400;color:var(--text3);}
.field-in:focus{outline:none;}
.field-row:focus-within{background:var(--accent-soft);}
select.field-in{cursor:pointer;-webkit-appearance:none;appearance:none;}
input[type="date"].field-in{min-width:130px;}

.notes-in{
  width:100%;min-height:86px;resize:none;margin-top:4px;
  background:var(--card);border:1px solid var(--sand-line);border-radius:14px;
  padding:13px 15px;font-size:15px;line-height:1.5;
}
.notes-in::placeholder{color:var(--text3);}
.notes-in:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft);}

.pet-foot{font-size:12.5px;color:var(--text3);text-align:center;margin-top:12px;line-height:1.45;}

/* ── Фото питомца в анкете ── */
.ava-edit{display:flex;align-items:center;gap:16px;margin:0 2px 20px;}

.ava-btn{
  position:relative;flex:0 0 84px;width:84px;height:84px;
  border-radius:50%;overflow:hidden;
  border:2px solid var(--accent);background:var(--icon-bg);
  display:flex;align-items:center;justify-content:center;
}
.ava-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.ava-img svg{width:38px;height:38px;fill:var(--accent);opacity:.7;}

/* Оверлей с камерой: подсказка, что по кружку можно нажать.
   На тач-устройствах ховера нет, поэтому там он виден всегда
   и приглушён — иначе кнопка выглядит просто картинкой. */
.ava-over{
  position:absolute;inset:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(43,43,38,.42);
  opacity:0;transition:opacity .18s ease;
}
.ava-over svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round;}
.ava-btn:hover .ava-over,
.ava-btn:focus-visible .ava-over{opacity:1;}
@media (hover:none){
  .ava-over{opacity:1;background:rgba(43,43,38,.22);}
  .ava-over svg{width:22px;}
}

.ava-side{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;}
.ava-link{
  font-size:14px;font-weight:600;color:var(--accent);
  padding:4px 0;text-align:left;
}
.ava-link.muted{color:var(--text3);font-weight:400;font-size:13px;}
.ava-link.muted:hover{color:var(--accent);}
.ava-note{font-size:12px;line-height:1.45;color:var(--text3);margin-top:2px;}

/* ── Ветпаспорт ──
   Прививки и обработки — списки записей, а не поля: у каждой своя дата,
   и добавлять их можно сколько угодно. */
.pp-block{margin-bottom:16px;}
.pp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 9px;}
.pp-title{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--text);}

.pp-list{display:flex;flex-direction:column;gap:8px;}
.pp-empty{
  font-size:13px;line-height:1.5;color:var(--text2);
  border:1px dashed var(--accent-line);border-radius:14px;padding:14px 16px;
}

.pp-item{
  display:flex;align-items:stretch;gap:2px;
  background:var(--card);border-radius:14px;box-shadow:var(--shadow-soft);overflow:hidden;
}
.pp-main{flex:1;min-width:0;text-align:left;padding:12px 4px 12px 14px;}
.pp-name{display:block;font-size:14.5px;font-weight:600;line-height:1.3;}
.pp-meta{display:block;font-size:12.5px;color:var(--text2);margin-top:3px;line-height:1.4;}
.pp-del{
  flex:0 0 42px;display:flex;align-items:center;justify-content:center;
  color:var(--text3);transition:color .15s, background-color .15s;
}
.pp-del svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;}
.pp-del:hover{color:var(--accent);background:var(--accent-soft);}
.pp-item.late{border:1px solid var(--accent-line);}
.pp-late{color:var(--accent);font-weight:700;}

/* ── Характер в анкете ── */
.traits-box{
  background:var(--card);border-radius:18px;box-shadow:var(--shadow-soft);
  padding:14px 16px 15px;
}
/* Пустой ряд не должен занимать место над полем ввода */
.traits.edit:empty{display:none;}
.traits.edit{margin:0 0 11px;}
.traits.edit .trait{
  font-size:13px;padding:5px 6px 5px 12px;
  background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);
}
.trait-x{
  display:flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;flex:0 0 17px;
  background:rgba(141,50,49,.12);transition:background-color .15s;
}
.trait-x svg{width:9px;height:9px;stroke:var(--accent);fill:none;stroke-width:2.8;stroke-linecap:round;}
.trait-x:hover{background:rgba(141,50,49,.22);}

.traits-in{
  width:100%;background:var(--bg);border:1px solid var(--sand-line);border-radius:12px;
  padding:11px 13px;font-size:15px;
  transition:border-color .16s, box-shadow .16s;
}
.traits-in::placeholder{color:var(--text3);}
.traits-in:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft);}
.traits-in:disabled{background:var(--icon-bg);color:var(--text3);cursor:default;}

.traits-box .chips{margin-top:10px;gap:7px;}
.traits-box .chip{padding:6px 12px;font-size:12.5px;}
.traits-box .chip:empty{display:none;}
.traits-foot{font-size:12px;color:var(--text3);line-height:1.45;margin-top:11px;}

/* Пустая карточка питомца на главной */
.pet-card.empty{border:1px dashed var(--accent-line);box-shadow:none;background:transparent;}
.pet-card.empty .pet-ava{background:var(--accent-soft);border-style:dashed;}
.pet-card.empty .pet-ava svg{fill:var(--accent);opacity:.7;}
.pet-empty-t{display:block;font-size:16px;font-weight:600;color:var(--text);}
.pet-empty-s{display:block;font-size:13px;color:var(--text2);margin-top:3px;line-height:1.4;}

/* Кого разбираем — в именительном падеже, без склонения клички */
.sos-pet{
  display:inline-block;margin-bottom:18px;
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:999px;padding:7px 14px;
  font-size:12.5px;font-weight:600;color:var(--accent);
}


/* ═══════════════════════════════════════════════════════════
   ДЕСКТОП, от 900px

   Мобильная вёрстка не трогается: всё ниже живёт в медиазапросе.
   Колонка контента остаётся той же ширины и становится карточкой
   на холсте, а нижние вкладки превращаются в левый сайдбар.
   ═══════════════════════════════════════════════════════════ */

@media (min-width:900px){

  :root{ --side-w:268px; --canvas-gap:26px; }

  /* Холст: очень деликатный тёплый градиент, без пятен и шума */
  body{
    background:
      radial-gradient(1100px 700px at 72% -12%, rgba(141,50,49,.045), transparent 62%),
      radial-gradient(900px 620px at 18% 112%, rgba(201,178,140,.26), transparent 60%),
      linear-gradient(180deg, #F8F1E6 0%, #F1E6D7 100%);
    background-attachment:fixed;
  }

  /* Оболочка раскладывается в строку: слева сайдбар, справа колонка */
  .app{
    max-width:none;
    flex-direction:row;
    align-items:stretch;
    background:transparent;
    box-shadow:none;
  }

  .safetop{display:none;}
  .decor{display:none;}          /* фон теперь несёт холст, кляксы были бы шумом */

  /* ── Колонка контента как карточка ── */
  .viewport{
    flex:1 1 auto;
    max-width:480px;
    margin:var(--canvas-gap) auto;
    height:calc(100% - var(--canvas-gap) * 2);
    background:var(--bg);
    border-radius:28px;
    box-shadow:0 1px 2px rgba(43,43,38,.04), 0 18px 48px rgba(43,43,38,.10);
  }
  .screen{padding:18px 24px 30px;}

  /* Имя бренда живёт в сайдбаре, в шапке экрана оно было бы вторым */
  /* В сайдбаре уже есть логотип — в шапке экрана он лишний */
  .scr-lockup{display:none;}
  .scr-head{justify-content:flex-end;padding-top:4px;}

  /* ── Сайдбар вместо нижних вкладок ── */
  .tabbar{
    /* В разметке вкладки идут последними (внизу экрана на телефоне),
       поэтому в строке их нужно явно переставить вперёд. */
    order:-1;
    flex:0 0 var(--side-w);
    /* Без min-width:0 текст логотипа распирал бы сайдбар шире заданного,
       и слои SOS переставали совпадать с колонкой по центру. */
    min-width:0;
    flex-direction:column;
    justify-content:flex-start;
    gap:4px;
    height:100%;
    padding:calc(var(--canvas-gap) + 6px) 20px var(--canvas-gap);
    background:transparent;
    border-top:none;
    box-shadow:none;
  }

  .side-brand{
    display:flex;align-items:center;gap:11px;
    padding:0 12px;margin-bottom:26px;
  }
  .side-mark{
    width:40px;height:40px;border-radius:12px;flex:0 0 40px;
    background:var(--accent-bright);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px rgba(141,50,49,.22);
  }
  .side-mark svg{width:22px;height:22px;fill:#fff;}
  .side-lockup{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden;}
  .side-name{
    font-family:var(--serif);font-size:19px;line-height:1.05;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .side-slogan{
    font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  .tab{
    flex:0 0 auto;
    flex-direction:row;
    justify-content:flex-start;
    gap:13px;
    padding:12px 14px;
    border-radius:14px;
    transition:background-color .16s, color .16s;
  }
  .tab svg{width:21px;height:21px;}
  .tab span{font-size:14.5px;font-weight:600;}
  .tab:hover{background:rgba(255,255,255,.55);color:var(--text2);}
  .tab.active{
    background:var(--card);
    color:var(--accent);
    box-shadow:0 1px 2px rgba(43,43,38,.04), 0 6px 16px rgba(43,43,38,.07);
  }
  .tab.active:hover{background:var(--card);color:var(--accent);}

  /* ── Полноэкранные слои встают ровно на колонку ── */
  .sos{
    left:var(--side-w);right:0;
    top:var(--canvas-gap);bottom:var(--canvas-gap);
    margin:0 auto;max-width:480px;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(43,43,38,.04), 0 18px 48px rgba(43,43,38,.10);
  }
  .sos-head{padding-top:20px;}

  .sos-foot{padding-bottom:18px;}
  .tabbar, .side-brand{z-index:120;}   /* сайдбар остаётся виден поверх слоёв */

  /* ── Мелочи, привязанные к низу экрана ── */
  .toast{
    bottom:34px;
    left:calc(var(--side-w) + (100% - var(--side-w)) / 2);
  }
  .toast.show{transform:translateX(-50%) translateY(0);}
}


/* ── Напоминания ── */
.sec-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px 0 12px;}
.sec-row .sec-title{margin:0;}
.sec-add{
  display:inline-flex;align-items:center;gap:5px;
  font-size:13.5px;font-weight:600;color:var(--accent);
  padding:6px 4px;border-radius:8px;
}
.sec-add svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;}

.rem-empty{
  text-align:center;padding:24px 20px 22px;
  border:1px dashed var(--accent-line);border-radius:18px;
}
.rem-empty-ico{
  width:48px;height:48px;margin:0 auto 12px;border-radius:50%;
  background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
}
.rem-empty-ico svg{width:21px;height:21px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85;}
.rem-empty-t{font-family:var(--serif);font-size:17px;line-height:1.35;color:var(--text);max-width:290px;margin:0 auto 6px;text-wrap:balance;}
.rem-empty-s{font-size:13px;line-height:1.5;color:var(--text2);margin:0 auto 14px;}
.rem-empty-btn{
  font-size:14px;font-weight:600;color:var(--accent);
  border:1px solid var(--accent-line);border-radius:999px;padding:10px 18px;
  transition:background-color .15s;
}
.rem-empty-btn:hover{background:var(--accent-soft);}


/* ── Кнопка «Можно ли?» на главной ── */
/* ── Экран «Можно ли?» ── */
.can-input{
  width:100%;background:var(--card);border:1px solid var(--sand-line);border-radius:16px;
  padding:15px;font-size:16px;line-height:1.4;
  transition:border-color .16s, box-shadow .16s;
}
.can-input::placeholder{color:var(--text3);}
.can-input:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft);}

.can-hint{
  margin-top:26px;text-align:center;font-size:14.5px;line-height:1.6;
  color:var(--text2);max-width:300px;margin-left:auto;margin-right:auto;
}

/* Вердикт: пять уровней, цвет несёт смысл.
   «Нужен врач» берёт сине-серый той же шкалы, что «к врачу планово»
   в разборе, — это не тревога, а направление к специалисту. */
.v-card{margin-top:20px;border-radius:18px;padding:18px 20px;}
.v-label{display:block;font-family:var(--serif);font-size:26px;line-height:1.15;}
.v-name{display:block;font-size:13.5px;margin-top:4px;opacity:.85;}
.v-card.yes{background:rgba(94,140,90,.13);border:1px solid rgba(94,140,90,.32);color:#2F5A2B;}
.v-card.caution{background:rgba(199,154,62,.14);border:1px solid rgba(199,154,62,.38);color:#6A5115;}
.v-card.vet{background:rgba(58,90,99,.11);border:1px solid rgba(58,90,99,.30);color:#2B454E;}
.v-card.no{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);}
.v-card.danger{background:var(--accent-grad);border:1px solid var(--accent-deep);color:#fff;}

.v-why{font-size:15.5px;line-height:1.6;color:var(--text);margin:16px 0 4px;}

.v-ate{
  display:block;width:100%;margin:14px 0 4px;
  border:1px dashed var(--accent-line);border-radius:999px;padding:12px;
  font-size:14.5px;font-weight:600;color:var(--accent);
  transition:background-color .15s;
}
.v-ate:hover{background:var(--accent-soft);}

/* Плашка вердикта в истории */
.v-pill{
  flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.v-pill.yes{background:rgba(94,140,90,.15);color:#3F6B3C;}
.v-pill.caution{background:rgba(199,154,62,.18);color:#6E5417;}
.v-pill.vet{background:rgba(58,90,99,.13);color:#30505A;}
.v-pill.no{background:var(--accent-soft);color:var(--accent);}
.v-pill.danger{background:var(--accent);color:#fff;}

/* Точка вопроса в ленте: кольцо, чтобы отличать от эпизода и события */
.h-item.answer .h-dot{background:var(--bg);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
/* Ветпаспорт: зелёная точка — это сделанная процедура, а не тревога */
.h-item.passport .h-dot{background:#5E8C5A;border-color:#5E8C5A;}

/* ══════════ ОБРАТНАЯ СВЯЗЬ ══════════ */
/* Цвет берём из токенов, а не литералом: у приложения один акцент,
   и второй, из другой палитры, читался бы как чужая кнопка. */
.feedback-fab{
  /* Нижние вкладки — часть потока, высотой около 72px, и кнопка на
     24px от низа садилась ровно на «Питомец». Отступ считаем от них,
     а не от экрана; на десктопе вкладки уезжают в сайдбар — там ниже
     возвращаем обычные 24px. */
  position:absolute;right:20px;bottom:calc(env(safe-area-inset-bottom,8px) + 90px);
  z-index:90;width:56px;height:56px;border-radius:50%;
  background:var(--accent-grad);color:var(--accent-text);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(126,35,34,.32);
  transition:transform .15s ease, box-shadow .15s ease;
}
.feedback-fab:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(126,35,34,.36);}
.feedback-fab:active{transform:none;}
.feedback-fab svg{width:24px;height:24px;fill:currentColor;}

/* Лист поверх приложения — как .sos: absolute внутри .app, чтобы
   не накрывать оговорку о том, что сервис не заменяет врача. */
.feedback-overlay{
  position:absolute;inset:0;z-index:110;
  background:rgba(38,22,22,.42);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadein .18s ease;
}
.feedback-overlay[hidden]{display:none;}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}

.feedback-modal{
  width:calc(100% - 32px);max-width:400px;
  background:var(--card);border-radius:16px 16px 0 0;
  padding:24px 24px calc(env(safe-area-inset-bottom,0) + 24px);
  box-shadow:0 -10px 40px rgba(38,22,22,.18);
  animation:slideup .26s ease;
}
.feedback-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px;}
.feedback-head h2{
  flex:1;font-family:var(--serif);font-size:22px;line-height:1.2;font-weight:400;
}
.feedback-close{
  flex:0 0 auto;border:0;background:none;padding:0;
  font-size:24px;line-height:1;color:var(--text3);cursor:pointer;
}
.feedback-close:hover{color:var(--text);}

.feedback-hint{font-size:14px;color:var(--text2);line-height:1.5;margin-bottom:14px;}

.feedback-input{
  width:100%;border:1px solid var(--hairline);border-radius:12px;
  padding:12px;resize:vertical;min-height:96px;
  font:inherit;font-size:15px;color:var(--text);background:var(--bg);
}
.feedback-input::placeholder{color:var(--text3);}
.feedback-input:focus{border-color:var(--accent-line);}

.feedback-note{font-size:12px;color:var(--text3);line-height:1.5;margin:10px 0 16px;}
.feedback-note a{color:var(--accent);text-decoration:underline;}

.feedback-send{
  width:100%;border-radius:12px;padding:14px;
  background:var(--accent-grad);color:var(--accent-text);
  font-size:15px;font-weight:600;
}
.feedback-send:disabled{opacity:.6;cursor:default;}

/* На телефоне кнопка живёт в одной колонке с главным действием
   приложения. Подниматься ей некуда: над ней карточка напоминаний,
   под ней вкладки. Поэтому место резервируем по горизонтали —
   «Что случилось с хвостиком?» заканчивается, не доходя до кнопки.
   Вертикально они всё равно разойдутся при прокрутке, а промах по
   главной кнопке в тревожный момент стоит слишком дорого. */
@media (max-width:899px){
  /* Плавающая кнопка неизбежно накрывает угол экрана. Для остальных
     кнопок это терпимо, но только если из-под неё можно прокрутить:
     запас внизу гарантирует, что до любой из них получится добраться. */
  .screen{padding-bottom:152px;}
}

@media (min-width:900px){
  /* Вкладки стали сайдбаром слева, колонка узкая и стоит по центру —
     кнопке хватает пустого холста справа, резервировать нечего. */
  .feedback-fab{right:24px;bottom:24px;}
}

.profile-foot{
  margin-top:26px;font-size:12.5px;color:var(--text3);line-height:1.6;
}
.profile-foot a{color:var(--text2);text-decoration:underline;}

/* ══════════ МОЯ ПОДПИСКА ══════════ */
.sub-panel{margin-top:26px;padding-top:20px;border-top:1px solid var(--hairline);}
.sub-panel[hidden]{display:none;}

.sub-panel-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;
}
.sub-panel-row[hidden]{display:none;}
.sub-panel-k{font-size:13.5px;color:var(--text2);}
.sub-panel-v{font-size:14.5px;font-weight:600;color:var(--text);text-align:right;}

/* Зелёный — единственный случай в приложении, когда цвет означает
   «всё в порядке». Тот же оттенок, что у сделанной процедуры
   в ветпаспорте, чтобы не разводить две зелёные палитры. */
.sub-badge{
  font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;
  background:rgba(94,140,90,.15);color:#3F6B3C;white-space:nowrap;
}
.sub-badge.off{background:var(--sand);color:var(--text2);}

.sub-panel-note{font-size:12.5px;color:var(--text3);line-height:1.5;margin:6px 0 14px;}

/* Отмена — действие обратимое и не срочное, поэтому контур,
   а не заливка: залитая кнопка читалась бы как главное действие
   экрана, хотя главное здесь — анкета питомца. */
.sub-cancel{
  width:100%;border-radius:12px;padding:12px;
  border:1px solid var(--accent-line);background:none;
  font-size:14.5px;font-weight:600;color:var(--accent);
  transition:background-color .15s;
}
.sub-cancel:hover{background:var(--accent-soft);}
.sub-cancel:disabled{opacity:.6;cursor:default;}

/* ══════════ ОТМЕНА ПОДПИСКИ ══════════ */
.cancel-overlay{
  position:absolute;inset:0;z-index:120;
  background:rgba(38,22,22,.42);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadein .18s ease;
}
.cancel-overlay[hidden]{display:none;}

.cancel-modal{
  width:calc(100% - 32px);max-width:400px;
  background:var(--card);border-radius:16px 16px 0 0;
  padding:24px 24px calc(env(safe-area-inset-bottom,0) + 24px);
  box-shadow:0 -10px 40px rgba(38,22,22,.18);
  animation:slideup .26s ease;
}
.cancel-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px;}
.cancel-head h2{flex:1;font-family:var(--serif);font-size:22px;line-height:1.2;font-weight:400;}

.cancel-lead{font-size:15px;color:var(--text);line-height:1.5;margin-bottom:16px;}

.cancel-pay{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--icon-bg);border-radius:12px;padding:12px 14px;margin-bottom:14px;
}
.cancel-pay[hidden]{display:none;}
.cancel-pay-k{font-size:12.5px;color:var(--text2);}
.cancel-pay-v{font-size:14.5px;font-weight:600;color:var(--text);}

.cancel-warn{
  font-size:13px;line-height:1.5;color:var(--text2);
  background:var(--sand);border:1px solid var(--sand-line);
  border-radius:12px;padding:12px 14px;margin-bottom:18px;
}

.cancel-btns{display:flex;flex-direction:column;gap:9px;}
.cancel-do{
  width:100%;border-radius:12px;padding:14px;
  background:var(--accent-grad);color:var(--accent-text);
  font-size:15px;font-weight:600;
}
.cancel-do:disabled{opacity:.6;cursor:default;}
.cancel-back{
  width:100%;border-radius:12px;padding:13px;
  border:1px solid var(--hairline);background:none;
  font-size:14.5px;font-weight:600;color:var(--text2);
}
.cancel-back:hover{color:var(--text);}

/* ══════════ КОНЕЦ ПРОБНОГО ПЕРИОДА ══════════ */
/* z-index 190 — выше всех слоёв приложения (листы 100, обратная
   связь 110), но ниже экрана входа (200): со стены должен быть
   выход для того, кто уже платил с другого устройства. */
.paywall{
  position:absolute;inset:0;z-index:190;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px calc(env(safe-area-inset-bottom,0) + 24px);
  overflow-y:auto;
}
.paywall[hidden]{display:none;}

.paywall-box{width:100%;max-width:340px;text-align:center;}

.paywall-mark{
  width:64px;height:64px;border-radius:20px;margin:0 auto 20px;
  background:var(--accent-bright);display:flex;align-items:center;justify-content:center;
}
.paywall-mark svg{width:34px;height:34px;fill:#fff;}

.paywall-title{font-family:var(--serif);font-size:27px;line-height:1.15;font-weight:400;}
.paywall-lead{font-size:14.5px;color:var(--text2);line-height:1.5;margin:10px 0 24px;}

.paywall-btn{
  width:100%;border-radius:14px;padding:16px;
  background:var(--accent-grad);color:var(--accent-text);
  font-size:16px;font-weight:600;
  box-shadow:0 10px 24px rgba(126,35,34,.28);
}
.paywall-btn:disabled{opacity:.6;cursor:default;}

.paywall-note{font-size:12.5px;color:var(--text3);line-height:1.55;margin-top:16px;}
.paywall-note a{color:var(--text2);text-decoration:underline;}
.paywall-login{
  font-size:13.5px;font-weight:600;color:var(--accent);
  text-decoration:underline;padding:4px;
}

/* ══════════ ВХОД ══════════ */
/* z-index выше всех слоёв приложения и сайдбара: пока человек
   не решил, входить ему или нет, за экраном делать нечего. */
.auth{
  position:absolute;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px calc(env(safe-area-inset-bottom,0) + 24px);
  overflow-y:auto;
}
.auth[hidden]{display:none;}

.auth-box{width:100%;max-width:360px;text-align:center;}

.auth-mark{
  width:46px;height:46px;border-radius:14px;margin:0 auto 16px;
  background:var(--accent-bright);display:flex;align-items:center;justify-content:center;
}
.auth-mark svg{width:25px;height:25px;fill:#fff;}

.auth-title{font-family:var(--serif);font-size:27px;line-height:1.15;font-weight:400;}
.auth-lead{font-size:14px;color:var(--text2);line-height:1.5;margin:8px 0 22px;}

/* Две вкладки одной кнопкой-переключателем: форма ниже одна и та же,
   меняется только надпись на кнопке и текст сверху. */
.auth-tabs{
  display:flex;gap:4px;padding:4px;margin-bottom:18px;
  background:var(--icon-bg);border-radius:999px;
}
.auth-tab{
  flex:1;padding:9px 0;border-radius:999px;
  font-size:14px;font-weight:600;color:var(--text2);
  transition:background-color .18s, color .18s;
}
.auth-tab.active{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(43,43,38,.08);}

.auth-form{display:flex;flex-direction:column;gap:12px;text-align:left;}
.auth-field{display:flex;flex-direction:column;gap:6px;}
.auth-field span{font-size:12.5px;font-weight:600;color:var(--text3);}
.auth-field input{
  width:100%;border:1px solid var(--hairline);border-radius:12px;
  padding:13px 14px;font:inherit;font-size:15px;
  color:var(--text);background:var(--card);
}
.auth-field input::placeholder{color:var(--text3);}
.auth-field input:focus{border-color:var(--accent-line);}

.auth-err{
  font-size:13px;line-height:1.45;color:var(--accent);
  background:var(--accent-soft);border-radius:10px;padding:10px 12px;
}
.auth-err[hidden]{display:none;}

.auth-send{
  width:100%;border-radius:12px;padding:14px;margin-top:4px;
  background:var(--accent-grad);color:var(--accent-text);
  font-size:15px;font-weight:600;
}
.auth-send:disabled{opacity:.6;cursor:default;}

.auth-skip{
  width:100%;padding:13px;margin-top:10px;border-radius:12px;
  background:var(--icon-bg);color:var(--text2);
  font-size:14.5px;font-weight:600;
}
.auth-skip:hover{color:var(--text);}

.auth-migrate{
  margin-top:16px;padding:14px;border-radius:12px;
  background:var(--accent-soft);text-align:left;
}
.auth-migrate[hidden]{display:none;}
.auth-migrate p{font-size:14px;line-height:1.5;color:var(--text);margin-bottom:12px;}
.auth-migrate-btns{display:flex;flex-direction:column;gap:8px;}
.auth-migrate-btns .auth-send,
.auth-migrate-btns .auth-skip{margin:0;padding:11px;font-size:14px;}

.auth-note{font-size:11.5px;color:var(--text3);line-height:1.55;margin-top:18px;}
.auth-note a{color:var(--text2);text-decoration:underline;}

/* ══════════ АККАУНТ В АНКЕТЕ ══════════ */
/* Раньше блок висел в конце анкеты питомца и нуждался в разделителе.
   Теперь у него свой экран — верхняя черта там лишняя. */
.account{margin-top:4px;}
.account-row{display:flex;align-items:baseline;gap:10px;}
.account-k{font-size:12.5px;font-weight:600;color:var(--text3);}
.account-v{flex:1;font-size:14.5px;color:var(--text);overflow-wrap:anywhere;}
.account-note{font-size:12.5px;color:var(--text3);line-height:1.5;margin:8px 0 14px;}
.account-btn{
  width:100%;border-radius:12px;padding:12px;
  background:var(--accent-grad);color:var(--accent-text);
  font-size:14.5px;font-weight:600;
}
.account-btn.ghost{background:var(--icon-bg);color:var(--text2);}
.account-btn[hidden]{display:none;}