/* ═══════════ Бьюти-друг · прототип · перламутровая тема ═══════════ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --ink: #3a2f45;
  --ink-soft: #6f6380;
  --pearl-1: #ffd5eb;
  --pearl-2: #d2e8ff;
  --pearl-3: #d7f7eb;
  --pearl-4: #e8d8ff;
  --card: rgba(255,255,255,.78);
  --card-solid: #ffffff;
  --accent: #e75c9d;
  --accent-soft: #fbdcec;
  --ok: #2e9e6b;
  --warn: #b5691a;
  --danger: #c0392b;
  --radius: 20px;
  --shadow: 0 7px 26px rgba(137, 96, 177, .24), inset 0 1px 0 rgba(255,255,255,.76);
}

html { font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background:
    url('assets/mother-of-pearl-background-v1.webp') center top / cover no-repeat,
    radial-gradient(82% 54% at -10% 7%, rgba(246,190,220,.66), transparent 72%),
    radial-gradient(74% 48% at 108% 22%, rgba(168,215,244,.68), transparent 74%),
    radial-gradient(76% 50% at -8% 70%, rgba(177,232,211,.64), transparent 72%),
    radial-gradient(70% 44% at 102% 92%, rgba(210,181,236,.66), transparent 74%),
    linear-gradient(155deg, #efb7d7 0%, #acd7f2 31%, #b6e8d5 62%, #d2b7eb 100%) fixed;
  min-height: 100vh;
  padding-bottom: calc(210px + env(safe-area-inset-bottom, 0px));
  line-height: 1.45;
}
/* Заметные жемчужные блики только на общем фоне приложения. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 18% 14%, rgba(255,255,255,.18) 0 18%, rgba(190,218,238,.44) 25%, rgba(255,255,255,.72) 28% 29.4%, rgba(250,205,229,.34) 32%, transparent 43%),
    radial-gradient(ellipse at 92% 48%, transparent 0 21%, rgba(216,194,239,.38) 27%, rgba(255,255,255,.68) 30% 31.5%, rgba(184,231,219,.32) 35%, transparent 46%),
    radial-gradient(ellipse at 28% 92%, transparent 0 22%, rgba(191,224,240,.42) 29%, rgba(255,255,255,.64) 32% 33.6%, rgba(240,201,227,.32) 37%, transparent 49%),
    linear-gradient(128deg, transparent 6%, rgba(255,255,255,.32) 19%, rgba(224,232,246,.36) 27%, rgba(249,232,242,.28) 36%, transparent 51%),
    linear-gradient(312deg, transparent 38%, rgba(255,255,255,.38) 51%, rgba(224,232,246,.34) 60%, rgba(237,225,244,.30) 69%, transparent 83%);
  background-size: 170% 170%;
  filter: blur(.7px) contrast(1.06);
  opacity: .42;
  animation: pearlDrift 16s ease-in-out infinite alternate;
}
body::after {
  content: ''; position: fixed; inset: -10%; pointer-events: none; z-index: 0;
  background:
    linear-gradient(106deg, transparent 32%, rgba(255,255,255,.16) 42%, rgba(255,255,255,.82) 49%, rgba(215,232,244,.34) 52%, rgba(252,220,238,.22) 56%, transparent 68%);
  background-size: 165% 165%;
  filter: contrast(1.04) drop-shadow(0 0 7px rgba(255,255,255,.62));
  opacity: .58;
  animation: pearlSheen 16s ease-in-out infinite alternate;
}
@keyframes pearlSheen {
  from { background-position: 4% 30%; opacity: .66; }
  to { background-position: 96% 68%; opacity: .96; }
}
@keyframes pearlDrift {
  from { background-position: 8% 20%; transform: translate3d(-2%, -1%, 0); }
  to { background-position: 92% 74%; transform: translate3d(2%, 1%, 0); }
}
main, header, nav, footer { position: relative; z-index: 1; }
.crystal-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* One material language for retained emoji, raster status art and authored SVG icons. */
.crystal-glyph {
  position: relative; display: inline-grid; place-items: center; min-width: 1.36em; min-height: 1.36em;
  padding: .12em; border: 1px solid rgba(255,255,255,.9); border-radius: .48em;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,137,199,.44) 34%, rgba(145,226,255,.58) 62%, rgba(188,148,255,.62));
  box-shadow: 0 3px 7px rgba(102,60,131,.24), inset 1px 1px 2px rgba(255,255,255,.96), inset -1px -2px 3px rgba(119,72,166,.18);
  filter: saturate(1.24) contrast(1.06); vertical-align: -.2em; line-height: 1;
}
.crystal-glyph::after {
  content: ''; position: absolute; inset: 8% 15% 54% 12%; border-radius: 999px;
  background: linear-gradient(115deg, rgba(255,255,255,.96), rgba(255,255,255,0)); transform: rotate(-9deg); pointer-events: none;
}
.crystal-glyph--compact { min-width: 1.18em; min-height: 1.18em; padding: .08em; }

.hidden { display: none !important; }

/* ───── шапка ───── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 10px;
}
.topbar-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; }
.icon-btn { background: var(--card); border: none; border-radius: 14px; width: 40px; height: 40px; font-size: 1.1rem; box-shadow: var(--shadow); cursor: pointer; }

/* ───── экраны ───── */
.screen { padding: 4px 16px 24px; max-width: 560px; margin: 0 auto; }
.date-line { color: var(--ink-soft); font-size: .95rem; margin: 2px 2px 12px; text-transform: capitalize; }

/* ───── карточки слотов ───── */
.slot-card {
  position: relative; overflow: hidden;
  background: var(--card); backdrop-filter: blur(8px);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 14px 12px; margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.86);
}
.slot-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.slot-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 1.05rem; }
.routine-title-icon { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 2px 4px rgba(198, 132, 30, .24)); }
.btn-mini {
  border: none; background: var(--accent-soft); color: var(--accent);
  font-weight: 700; border-radius: 12px; padding: 7px 12px; font-size: .85rem; cursor: pointer;
}
.slot-items { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 8px; min-height: 82px; }
.slot-empty { color: var(--ink-soft); font-size: .88rem; padding: 14px 4px; }
.btn-done {
  margin-top: 10px; width: 100%; border: none; border-radius: 14px; padding: 10px;
  font-weight: 700; font-size: .95rem; cursor: pointer;
  background: linear-gradient(120deg, #d8f5e6, #d2ecff); color: #1e7a52;
}
.btn-done.done { background: #e9e5f2; color: var(--ink-soft); }
.btn-done:disabled { background: #f1edf4; color: var(--ink-soft); cursor: default; }
.completion-flower-icon,
.crystal-flower-icon { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; filter: saturate(1.65) brightness(1.16) contrast(1.08) drop-shadow(0 1px 4px rgba(236, 70, 151, .58)); }
.completion-flower-icon { margin-left: 3px; }
.crystal-flower-icon--compact { width: 22px; height: 22px; flex: 0 0 22px; }
.crystal-flower-icon--hero { width: 78px; height: 78px; }
.crystal-flower-icon--product { width: 48px; height: 48px; }
.demo-banner > span { display: inline-flex; align-items: center; gap: 5px; }

/* ───── стикеры-продукты ───── */
.sticker {
  width: 72px; min-width: 0; display: grid; grid-template-rows: 76px auto; justify-items: center; align-items: end; gap: 5px;
  border: none; background: none; cursor: pointer; position: relative;
}
.sticker-img {
  position: relative; width: 60px; height: 72px; padding: 7px; border-radius: 17px; display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; font-weight: 800; color: #fff;
  box-shadow: 0 4px 12px rgba(150,110,170,.25), inset 0 0 14px rgba(255,255,255,.35);
  background: linear-gradient(140deg, #f8b9d4, #b9d8f8);
  overflow: hidden;
}
.sticker-img img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.sticker-img.has-photo {
  align-self: end; padding: 2px 3px 5px; overflow: visible;
  background: linear-gradient(140deg, #f8b9d4, #b9d8f8);
  box-shadow: 0 4px 12px rgba(150,110,170,.18), inset 0 0 14px rgba(255,255,255,.42);
}
.sticker-img.has-photo::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 5px; z-index: 0;
  border-radius: 50%; background: rgba(72,48,70,.14); filter: blur(3px);
}
.sticker-img.has-photo img {
  position: relative; z-index: 1; transform-origin: center bottom;
  /* One optical baseline for photos with unequal transparent padding. The
     subtle coloured edge restores volume when a cutout lost a thin contour. */
  transform: translateY(3px) scale(1.035);
  filter: drop-shadow(-1px 0 1px rgba(232,126,173,.22))
          drop-shadow(1px 0 1px rgba(126,174,224,.20))
          drop-shadow(0 4px 3px rgba(80,55,90,.18));
}
.sticker-name {
  width: 100%; min-height: 2.3em; padding: 0 2px; font-size: .68rem; color: var(--ink);
  text-align: center; line-height: 1.15; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sticker-badge {
  position: absolute; top: -4px; right: 0; font-size: .85rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
.routine-sticker {
  width: 72px; flex: 0 0 72px; position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.routine-sticker > .sticker { width: 100%; }
.routine-sticker .sticker-name { display: block; width: 100%; }
.sticker-remove {
  position: absolute; top: -6px; left: -2px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.95); color: var(--danger); font-size: .8rem; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); cursor: pointer;
}

/* ───── предупреждения ───── */
.warning {
  border-radius: 16px; padding: 11px 14px; margin-bottom: 10px; font-size: .9rem;
  display: flex; gap: 9px; align-items: flex-start; box-shadow: var(--shadow);
}
.warning.warn { background: #fff3e2; color: #7a4a10; border: 1px solid #f5ddba; }
.warning.info { background: #e9f3ff; color: #1e4f7a; border: 1px solid #cfe4f7; }
.warning.danger { background: #ffe9e5; color: #8e2417; border: 1px solid #f5c9c0; }

/* ───── чек-ин ───── */
.checkin-card { position: relative; overflow: hidden; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-top: 4px; border: 1px solid rgba(255,255,255,.7); }
.checkin-head { font-weight: 700; margin-bottom: 10px; }
.checkin-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1.5px solid #e8d9ef; background: #fff; border-radius: 999px; padding: 8px 14px;
  font-size: .88rem; cursor: pointer; color: var(--ink);
}
.chip-ok { background: linear-gradient(120deg, #ffe9f3, #e6fbf3); border-color: #f3cfe2; font-weight: 600; }
.chip.sel { background: var(--accent); color: #fff; border-color: var(--accent); }
.checkin-log { margin-top: 10px; font-size: .85rem; color: var(--ink-soft); }
.checkin-log .ci-row { padding: 3px 0; }

/* ───── календарь ухода ───── */
.calendar-card { position: relative; overflow: hidden; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 14px; margin-top: 14px; border: 1px solid rgba(255,255,255,.7); }
/* Only the three main Today surfaces receive the real mother-of-pearl material. */
.calendar-card,
.slot-card {
  background: rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(14px) saturate(.82);
  backdrop-filter: blur(14px) saturate(.82);
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 8px 28px rgba(116, 92, 153, .18),
    inset 0 1px 0 rgba(255, 255, 255, .82);
}
:is(.calendar-card, .slot-card)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(118deg, rgba(255,244,250,.30) 8%, rgba(255,255,255,.72) 46%, rgba(240,244,255,.24) 74%),
    radial-gradient(120% 92% at 14% 4%, rgba(255,255,255,.78), transparent 42%),
    radial-gradient(100% 82% at 88% 94%, rgba(215,235,241,.34), transparent 52%),
    url('assets/mother-of-pearl-background-v1.webp') center / cover no-repeat;
  background-blend-mode: screen, screen, color, normal;
  opacity: .24;
  filter: saturate(.72) contrast(1.06) brightness(1.12);
}
:is(.calendar-card, .slot-card)::after {
  content: '';
  position: absolute;
  inset: -42% -70%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(108deg,
    transparent 38%,
    rgba(202,224,239,.18) 43%,
    rgba(255,255,255,.88) 48%,
    rgba(249,215,235,.30) 52%,
    rgba(190,230,220,.22) 56%,
    transparent 63%);
  filter: blur(1.2px) drop-shadow(0 0 6px rgba(255,255,255,.55));
  opacity: .78;
  transform: translate3d(-18%, -4%, 0);
  animation: cardPearlGlint 9s cubic-bezier(.42, 0, .58, 1) infinite alternate;
}
:is(.calendar-card, .slot-card) > * {
  position: relative;
  z-index: 1;
}
@keyframes cardPearlGlint {
  from { transform: translate3d(-18%, -4%, 0); opacity: .58; }
  to { transform: translate3d(18%, 4%, 0); opacity: .88; }
}
.calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calendar-head h2 { font-size: 1.05rem; }
.calendar-head p { color: var(--ink-soft); font-size: .8rem; margin-top: 2px; }
.calendar-nav { display: flex; gap: 6px; }
.calendar-nav button { width: 34px; height: 34px; border: none; border-radius: 11px; background: #fff; color: var(--ink); font-size: 1.35rem; line-height: 1; box-shadow: 0 2px 8px rgba(160,120,180,.12); cursor: pointer; }
.calendar-month { display: flex; align-items: center; gap: 6px; width: max-content; border: none; background: none; color: var(--ink); font: inherit; font-weight: 800; margin: 14px 2px 8px; padding: 0; text-transform: capitalize; cursor: pointer; }
.calendar-month::after { content: '⌄'; font-size: .9rem; transition: transform .2s ease; }
.calendar-month[aria-expanded="true"]::after { transform: rotate(180deg); }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-weekdays span { text-align: center; color: var(--ink-soft); font-size: .68rem; font-weight: 700; padding: 2px 0; }
.calendar-day { position: relative; aspect-ratio: 1; min-width: 0; border: none; border-radius: 12px; background: rgba(255,255,255,.52); color: var(--ink); font: inherit; font-size: .82rem; cursor: pointer; }
.calendar-day.empty { visibility: hidden; }
.calendar-day.today, .calendar-day.selected { background: var(--accent); color: #fff; font-weight: 800; }
.calendar-day.has-plan::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); left: 50%; bottom: 4px; transform: translateX(-50%); }
.calendar-day.today::after, .calendar-day.selected::after { background: #fff; }
.calendar-day.complete::after { background: var(--ok); box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--ink-soft); font-size: .7rem; margin: 10px 2px 0; }
.calendar-legend span { display: flex; align-items: center; gap: 5px; }
.calendar-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.calendar-legend i.complete { background: var(--ok); }
.day-plan-slot { background: #faf6fd; border-radius: 16px; padding: 12px; margin-bottom: 10px; }
.day-plan-title { font-weight: 800; margin-bottom: 8px; }
.day-plan-items { display: flex; flex-direction: column; gap: 6px; }
.day-plan-item { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.day-plan-item .sticker-img { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; flex-shrink: 0; }
.day-plan-remove { margin-left: auto; border: none; background: #fff; color: var(--danger); border-radius: 9px; width: 28px; height: 28px; cursor: pointer; }
.day-plan-add { margin-top: 9px; display: flex; gap: 6px; }
.day-plan-add select { flex: 1; min-width: 0; padding: 8px; font-size: .82rem; }
.day-plan-add button { border: none; border-radius: 11px; padding: 8px 11px; background: var(--accent-soft); color: var(--accent); font-weight: 800; cursor: pointer; }

/* ───── кнопки ───── */
.btn { display: block; width: 100%; border: none; border-radius: 16px; padding: 14px; font-size: 1rem; font-weight: 700; cursor: pointer; margin-top: 10px; }
.btn-primary { background: linear-gradient(120deg, #e75c9d, #9d7bea); color: #fff; box-shadow: 0 6px 18px rgba(190,90,160,.35); }
.btn-soft { background: var(--card); color: var(--ink); box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.7); }
.btn-ghost { background: none; color: var(--ink-soft); font-weight: 600; }
.btn-danger-ghost { background: none; color: var(--danger); font-weight: 600; }

/* ───── полка ───── */
.shelf-tabs { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; padding: 1px 1px 5px; }
.shelf-tabs::-webkit-scrollbar { display: none; }
.shelf-tab {
  flex: 1 0 auto; min-width: 82px; border: none; border-radius: 14px; padding: 10px 12px; font-weight: 700; font-size: .9rem; cursor: pointer;
  background: rgba(255,255,255,.55); color: var(--ink-soft);
}
.shelf-tab.active { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.shelf-filter { margin-bottom: 12px; }
.shelf-care-groups, .shelf-status-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.shelf-care-groups { margin-bottom: 8px; }
.shelf-filter .chip { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; padding: 6px 11px; }
.crystal-filter-icon {
  display: block; width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain;
  transform: translateY(-.5px);
  filter: saturate(1.32) brightness(1.08) contrast(1.08) drop-shadow(0 2px 3px rgba(83,45,93,.32));
}
.crystal-filter-icon--heart,
.crystal-status-icon--heart {
  filter: saturate(2.45) brightness(1.08) contrast(1.16) hue-rotate(-8deg) drop-shadow(0 2px 5px rgba(255, 20, 147, .68));
}
.shelf-status-filters .chip.sel .crystal-filter-icon { filter: saturate(1.48) brightness(1.1) contrast(1.12) drop-shadow(0 3px 4px rgba(69,31,83,.38)); }
.shelf-status-filters .chip.sel .crystal-filter-icon--heart { filter: saturate(2.7) brightness(1.1) contrast(1.18) hue-rotate(-8deg) drop-shadow(0 3px 6px rgba(255, 20, 147, .74)); }
.crystal-status-icon {
  display: inline-block; width: 1.45em; height: 1.45em; object-fit: contain; vertical-align: -.35em;
  filter: saturate(1.34) brightness(1.08) contrast(1.08) drop-shadow(0 2px 3px rgba(83,45,93,.3));
}
.sticker-badge .crystal-status-icon { width: 22px; height: 22px; vertical-align: 0; }
@media (prefers-reduced-motion: reduce) { .crystal-filter-icon { transform: none; } }
.shelf {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 12px 22px; border: 1px solid rgba(255,255,255,.7);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); align-items: start; gap: 16px 7px;
  min-height: 200px;
}
.shelf-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); font-size: .92rem; padding: 30px 10px; }
/* полочная перекладина */
.shelf .sticker { width: 100%; }
.shelf .sticker::after { content: ''; position: absolute; top: 73px; left: 2px; right: 2px; height: 3px; border-radius: 999px; background: rgba(180,150,120,.25); }
.fab {
  position: fixed; right: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); z-index: 5;
  border: none; border-radius: 999px; padding: 14px 20px; font-size: .95rem; font-weight: 700; cursor: pointer;
  background: linear-gradient(120deg, #e75c9d, #9d7bea); color: #fff; box-shadow: 0 8px 22px rgba(190,90,160,.4);
}

/* ───── анализ ───── */
.sig-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.7); }
.sig-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.02rem; margin-bottom: 4px; }
.sig-level { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.sig-level.strong { background: #ffe4ee; color: #a92960; }
.sig-level.mid { background: #fff0dd; color: #8a5a14; }
.sig-level.weak { background: #eef1f5; color: #5c6672; }
.sig-body { font-size: .9rem; color: var(--ink); }
.sig-evidence { margin-top: 8px; font-size: .84rem; color: var(--ink-soft); }
.sig-evidence li { margin-left: 18px; padding: 1px 0; }
.sig-actions { margin-top: 10px; display: flex; gap: 8px; }
.progress-card { text-align: center; padding: 26px 18px; }
.progress-card .big { font-size: 2rem; margin-bottom: 8px; }
.an-section-title { font-weight: 800; font-size: 1.05rem; margin: 18px 4px 10px; }
.manual-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.manual-list .chip { background: #fff; }
.manual-list .chip b { color: var(--danger); }

/* ───── проверка ───── */
.check-intro h2 { font-size: 1.2rem; margin-bottom: 6px; }
.check-intro p { color: var(--ink-soft); font-size: .92rem; margin-bottom: 12px; }
textarea, input[type=text], select {
  width: 100%; border: 1.5px solid #e8d9ef; border-radius: 14px; padding: 12px; font-size: .95rem;
  font-family: inherit; background: rgba(255,255,255,.9); color: var(--ink); resize: vertical;
}
textarea:focus, input:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.verdict { border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-top: 14px; }
.verdict.red { background: #ffe9e5; border: 1px solid #f5c9c0; }
.verdict.yellow { background: #fff3e2; border: 1px solid #f5ddba; }
.verdict.green { background: #e4f7ec; border: 1px solid #c4e8d3; }
.verdict h3 { font-size: 1.05rem; margin-bottom: 8px; }
.verdict ul { margin: 6px 0 4px 18px; font-size: .9rem; }
.verdict .muted { font-size: .82rem; color: var(--ink-soft); margin-top: 8px; }
.ing-chip { display: inline-block; border-radius: 8px; padding: 2px 7px; margin: 2px; font-size: .82rem; background: rgba(255,255,255,.8); }
.ing-chip.hit { background: #ffd7cd; font-weight: 700; }
.ing-chip.soft-hit { background: #ffe9c7; }

/* ───── нижняя навигация ───── */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-around;
  isolation: isolate;
  padding: 8px 6px calc(env(safe-area-inset-bottom, 0px) + 8px);
}
/* Fade only the material into the page; controls stay opaque and clickable. */
.tabbar::before {
  content: "";
  position: absolute; inset: -24px 0 0; z-index: -1;
  pointer-events: none;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 36px);
  mask-image: linear-gradient(to bottom, transparent, #000 36px);
}

/* Lower the ornament to the screen edge; tabs render above it. */
.tabbar::after {
  content: ""; position: absolute; pointer-events: none;
  width: min(100%, 560px); aspect-ratio: 1536 / 320;
  max-height: calc(100% - env(safe-area-inset-bottom, 0px));
  left: 50%; bottom: -4px; z-index: 0; transform: translateX(-50%) scaleY(.82);
  transform-origin: center bottom;
  mix-blend-mode: multiply;
  /* 06.09.2026: Анжелика просила заполнить пустоту нижнего меню, не перекрывая кнопки —
     рисунок выше и заметнее, кнопки по-прежнему над ним (z-index). */
  background: url('assets/pearl-seashell-frame-v2.webp') center bottom / 100% auto no-repeat;
}

.tab {
  position: relative; z-index: 1;
  border: none; background: rgba(255,255,255,.92); font-size: .72rem; font-weight: 600; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; padding: 4px 10px; border-radius: 12px;
  min-height: 52px; color: #51405e; text-shadow: 0 1px 3px #fff, 0 0 6px #fff;
}
.crystal-nav-icon {
  width: 32px; height: 32px; overflow: visible;
  filter: saturate(1.38) brightness(1.06) drop-shadow(0 3px 3px rgba(91,52,125,.3));
}
.crystal-nav-icon .crystal-main { fill: url(#crystalNav); stroke: #846895; stroke-width: .85; stroke-linejoin: round; }
.crystal-nav-icon .crystal-facet { fill: none; stroke: rgba(92,63,132,.58); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.crystal-nav-icon .crystal-glint { fill: url(#crystalShine); stroke: rgba(255,255,255,.76); stroke-width: .7; stroke-linejoin: round; }
.tab.active .crystal-nav-icon { filter: saturate(1.62) brightness(1.1) drop-shadow(0 3px 5px rgba(197,62,146,.42)); transform: translateY(-1px) scale(1.05); }
.tab.active { color: #923365; background: rgba(255,221,240,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 2px 8px rgba(136,63,115,.15); }
.tab:focus-visible { outline: 2px solid #774a93; outline-offset: 2px; }

/* ───── модалки ───── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(60,40,70,.35); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: #fff; border-radius: 24px 24px 0 0; width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto; padding: 20px 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
  animation: slideUp .22s ease-out;
}
@keyframes slideUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.modal h3 { font-size: 1.15rem; margin-bottom: 12px; }
.modal .form-row { margin-bottom: 12px; }
.modal label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 5px; }
.field-hint { color: var(--ink-soft); font-size: .74rem; margin-top: 5px; }
.name-suggestions {
  padding: 12px; border-radius: 16px; background: linear-gradient(135deg, #fff4f8, #f7f2ff);
}
.name-suggestions .seg button { padding: 7px 10px; font-size: .8rem; }
input[aria-invalid="true"] { border-color: #c0446d; box-shadow: 0 0 0 3px rgba(192, 68, 109, .14); }
.modal-close { position: sticky; top: 0; float: right; border: none; background: #f2ecf7; border-radius: 50%; width: 32px; height: 32px; font-size: 1rem; cursor: pointer; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
  border: 1.5px solid #e8d9ef; background: #fff; border-radius: 12px; padding: 8px 12px; font-size: .85rem; cursor: pointer; color: var(--ink);
}
.seg button.sel { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.photo-drop {
  border: 2px dashed #e0cdea; border-radius: 16px; padding: 14px; text-align: center; color: var(--ink-soft);
  font-size: .88rem; cursor: pointer; background: rgba(255,255,255,.6);
}
.photo-drop img { max-width: 90px; border-radius: 14px; display: block; margin: 8px auto 0; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 16px 8px; padding-bottom: 8px; }
.picker-hint { color: var(--ink-soft); font-size: .85rem; margin: -5px 0 14px; }
.picker-choice { position: relative; display: block; cursor: pointer; margin: 0; }
.picker-choice input { position: absolute; opacity: 0; pointer-events: none; }
.picker-choice .sticker { width: 100%; border: 2px solid transparent; border-radius: 16px; padding: 4px 2px 7px; transition: border-color .15s, background .15s, transform .15s; }
.picker-choice input:checked ~ .sticker { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.picker-check {
  position: absolute; z-index: 2; top: -2px; right: 2px; width: 25px; height: 25px; border-radius: 8px;
  display: grid; place-items: center; background: #fff; border: 2px solid #dfd2e7; color: transparent;
  font-size: .8rem; font-weight: 900; box-shadow: 0 2px 7px rgba(90,60,100,.14);
}
.picker-choice input:checked ~ .picker-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.picker-choice input:checked ~ .picker-check::after { content: '✓'; color: #fff; font-size: 1rem; line-height: 1; }
.picker-choice input:focus-visible ~ .sticker { outline: 2px solid var(--accent); outline-offset: 2px; }
.picker-submit:disabled { opacity: .5; cursor: default; }
.picker-action { position: sticky; z-index: 4; bottom: -20px; display: grid; grid-template-columns: 1fr minmax(130px, 1.2fr); align-items: center; gap: 10px; margin: 10px -18px -20px; padding: 12px 18px calc(env(safe-area-inset-bottom, 0px) + 14px); background: rgba(255,255,255,.96); border-top: 1px solid #eee5f2; box-shadow: 0 -5px 18px rgba(80,50,90,.08); }
.picker-action .btn { margin: 0; padding: 12px; }
.picker-count { color: var(--ink-soft); font-size: .82rem; font-weight: 700; }

/* карточка продукта */
.prod-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.prod-hero .sticker-img { width: 84px; height: 84px; font-size: 2.1rem; flex-shrink: 0; align-self: center; }
.prod-hero h3 { margin: 0 0 2px; }
.prod-hero .muted { color: var(--ink-soft); font-size: .85rem; }
.inci-box { background: #faf6fd; border-radius: 14px; padding: 10px; font-size: .85rem; margin-top: 6px; max-height: 160px; overflow-y: auto; }
.status-note { font-size: .85rem; color: var(--ink-soft); margin-top: 8px; }

/* ───── тосты и пузыри ───── */
#toastRoot { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 0; right: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  background: rgba(45,35,55,.92); color: #fff; border-radius: 14px; padding: 10px 18px; font-size: .9rem;
  animation: toastIn .25s ease-out; max-width: 90%;
}
@keyframes toastIn { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
#bubbleRoot { position: fixed; inset: 0; pointer-events: none; z-index: 240; overflow: hidden; }
.bubble {
  position: absolute;
  bottom: var(--bubble-start-bottom);
  width: var(--bubble-size);
  height: var(--bubble-size);
  border: 1.5px solid rgba(158,198,244,.78);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 31% 25%, rgba(255,255,255,.94) 0 2%, rgba(255,255,255,.34) 4%, transparent 14%),
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(255,255,255,.18) 64%, rgba(149,213,255,.38) 73%, rgba(245,168,224,.36) 81%, transparent 88%),
    conic-gradient(from 202deg at 50% 50%, rgba(139,204,255,.38), rgba(255,255,255,.14) 18%, rgba(255,209,129,.34) 35%, rgba(242,154,221,.36) 53%, rgba(181,159,255,.30) 69%, rgba(255,255,255,.14) 86%, rgba(139,204,255,.38));
  box-shadow:
    0 12px 22px rgba(93,82,121,.17),
    0 0 0 1px rgba(242,167,222,.34),
    0 0 7px rgba(137,198,245,.28),
    inset 5px 6px 10px rgba(255,255,255,.30),
    inset -7px -8px 14px rgba(226,137,214,.14),
    inset 0 0 0 2px rgba(255,255,255,.18);
  filter:
    drop-shadow(0 8px 10px rgba(83,70,112,.12))
    drop-shadow(-3px -2px 6px rgba(171,220,255,.10));
  backdrop-filter: blur(.45px);
  animation: pearlRise var(--bubble-duration) cubic-bezier(.22,.62,.32,1) var(--bubble-delay) forwards;
}
.bubble::before,
.bubble::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.bubble::before {
  inset: 9% 12% 54% 16%;
  border-top: 3px solid rgba(255,255,255,.82);
  border-left: 1px solid rgba(255,255,255,.46);
  filter: blur(.15px);
  transform: rotate(-22deg);
}
.bubble::after {
  inset: 55% 13% 10% 50%;
  border-right: 2px solid rgba(255,210,238,.42);
  border-bottom: 2px solid rgba(151,210,255,.36);
  box-shadow: inset -2px -2px 4px rgba(255,255,255,.18);
  filter: blur(.25px);
  transform: rotate(18deg);
}
@keyframes pearlRise {
  0% { transform: translate3d(0, 0, 0) scale(.72); opacity: 0; }
  12% { opacity: .80; }
  48% { transform: translate3d(calc(var(--bubble-drift) * -.35), -48vh, 0) scale(.94); opacity: .72; }
  100% { transform: translate3d(var(--bubble-drift), -118vh, 0) scale(1.08); opacity: 0; }
}
.butterfly {
  position: absolute;
  width: var(--butterfly-size);
  height: calc(var(--butterfly-size) * .7);
  opacity: 0;
  filter: drop-shadow(0 7px 9px rgba(91,72,130,.28));
  animation: butterflyFloat var(--butterfly-duration) linear var(--butterfly-delay) forwards;
}
.butterfly--exit-side-left { animation-name: butterflyFloatSideLeft; }
.butterfly--exit-side-right { animation-name: butterflyFloatSideRight; }
.butterfly img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(74,57,107,.28));
  transform-origin: 50% 52%;
  will-change: transform;
  animation: butterflyWingFlap var(--butterfly-flap-duration) ease-in-out infinite;
}
.butterfly--blue img { filter: drop-shadow(0 2px 2px rgba(67,91,135,.30)) saturate(1.28) contrast(1.08) hue-rotate(-8deg) brightness(1.03); }
.butterfly--rose img { filter: drop-shadow(0 2px 2px rgba(126,64,108,.28)) saturate(1.34) contrast(1.09) hue-rotate(13deg) brightness(1.01); }
.butterfly--pearl img { filter: drop-shadow(0 2px 2px rgba(108,84,126,.25)) saturate(1.12) contrast(1.04) brightness(1.05); }
.butterfly--small-rose img { filter: drop-shadow(0 2px 2px rgba(126,64,108,.28)) saturate(1.08) contrast(1.04) brightness(1.03); }
@keyframes butterflyWingFlap {
  0%, 42% { transform: perspective(180px) scaleX(1) scaleY(1); }
  50% { transform: perspective(180px) scaleX(.92) scaleY(1.008); }
  58%, 100% { transform: perspective(180px) scaleX(1) scaleY(1); }
}
@keyframes butterflyFloat {
  0% { transform: translate3d(0, 18px, 0) rotate(-5deg) scale(.82); opacity: 0; }
  18% { opacity: .88; }
  45% { transform: translate3d(calc(var(--butterfly-drift) * -.45), -32px, 0) rotate(5deg) scale(1); opacity: .96; }
  78% { opacity: .82; }
  100% { transform: translate3d(var(--butterfly-drift), -110vh, 0) rotate(-3deg) scale(.94); opacity: .82; }
}
@keyframes butterflyFloatSideLeft {
  0% { transform: translate3d(0, 18px, 0) rotate(5deg) scale(.82); opacity: 0; }
  18% { transform: translate3d(-10vw, -8px, 0) rotate(1deg) scale(.9); opacity: .88; }
  45% { transform: translate3d(-38vw, -9vh, 0) rotate(-4deg) scale(1); opacity: .96; }
  70% { transform: translate3d(-70vw, -17vh, 0) rotate(-8deg) scale(.98); opacity: .9; }
  100% { transform: translate3d(-118vw, -29vh, 0) rotate(-12deg) scale(.94); opacity: .82; }
}
@keyframes butterflyFloatSideRight {
  0% { transform: translate3d(0, 18px, 0) rotate(-5deg) scale(.82); opacity: 0; }
  18% { transform: translate3d(10vw, -7px, 0) rotate(-1deg) scale(.9); opacity: .88; }
  45% { transform: translate3d(38vw, -10vh, 0) rotate(4deg) scale(1); opacity: .96; }
  70% { transform: translate3d(70vw, -19vh, 0) rotate(8deg) scale(.98); opacity: .9; }
  100% { transform: translate3d(118vw, -31vh, 0) rotate(12deg) scale(.94); opacity: .82; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  :is(.calendar-card, .slot-card)::after { animation: none; }
  .bubble {
    bottom: 10vh;
    animation: pearlFade 1.2s ease-out var(--bubble-delay) forwards;
  }
  .butterfly {
    animation: none;
    opacity: .42;
  }
  .butterfly img {
    animation: none;
    transform: none;
  }
  @keyframes pearlFade {
    0% { transform: scale(.9); opacity: 0; }
    35% { opacity: .7; }
    100% { transform: scale(1); opacity: 0; }
  }
}

/* ───── онбординг ───── */
.onboarding {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  background: linear-gradient(160deg, var(--pearl-1), var(--pearl-2) 45%, var(--pearl-3));
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ob-step { max-width: 420px; text-align: center; }
.ob-art { font-size: 3.4rem; margin-bottom: 14px; filter: drop-shadow(0 4px 10px rgba(190,90,160,.3)); }
.ob-step h1 { font-size: 1.5rem; margin-bottom: 12px; letter-spacing: -.02em; }
.ob-lead { font-size: 1rem; margin-bottom: 10px; }
.ob-sub { font-size: .85rem; color: var(--ink-soft); margin-bottom: 18px; }

/* ───── дисклеймер ───── */
.disclaimer {
  max-width: 560px; margin: 8px auto 0; padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 96px);
  font-size: .75rem; color: var(--ink-soft); text-align: center; pointer-events: none;
}

/* ───── демо-баннер, ряд «повторить», строки выбора ───── */
.demo-banner {
  max-width: 560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 16px; margin-top: 2px;
  background: rgba(255,255,255,.7); border-radius: 12px; font-size: .85rem; color: var(--ink-soft);
  box-shadow: var(--shadow);
}
.demo-banner button { border: none; background: var(--accent-soft); color: var(--accent); font-weight: 700; border-radius: 10px; padding: 5px 12px; font-size: .82rem; cursor: pointer; }
.repeat-row { display: flex; gap: 8px; }
.repeat-row .btn { margin-top: 0; font-size: .88rem; padding: 12px 8px; }
.day-plan-picker { margin-top: 12px; }
.day-plan-picker-title { color: var(--ink-soft); font-size: .78rem; font-weight: 700; margin-bottom: 8px; }
.day-plan-picker .picker-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 10px 5px; }
.day-plan-picker .sticker { width: 100%; }
.day-plan-repeat { width: 100%; margin: 12px 0 2px; }
.day-plan-repeat:disabled { opacity: .48; cursor: default; }
.day-plan-repeat-note { color: var(--ink-soft); font-size: .75rem; text-align: center; margin: 5px 0 10px; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: .9rem; cursor: pointer; }
.pick-row input { width: 20px; height: 20px; accent-color: var(--accent); }
.sticker-img.sm { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 12px; flex-shrink: 0; align-self: center; }

@media (min-width: 600px) {
  .modal-overlay { align-items: center; }
  .modal { border-radius: 24px; }
}