/* ============================================================
   Сценария — кастомные стили (поверх Tailwind CDN)
   ============================================================ */

html { scroll-behavior: smooth; background: #f6f4ef; }
body {
  font-family: 'Manrope', sans-serif;
  overflow-x: hidden;
  background: transparent;   /* прозрачно — чтобы фоновое конфетти было видно */
  color: #161422;
}

/* Праздничный фон-канвас */
#fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
::selection { background: #c7bdec; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Плавающие градиентные пятна фона --- */
.aurora {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: .4;
  animation: float 18s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -24px) scale(1.12); }
}
@keyframes floatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.floaty { animation: floatSlow 8s ease-in-out infinite; }

/* --- Блик на кнопках --- */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: '';
  position: absolute; top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
}
.btn-shine:hover::after { animation: swipe .9s; }
@keyframes swipe { to { left: 130%; } }

/* --- Появление при скролле --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.in { opacity: 1; transform: none; }

/* --- Бегущая строка --- */
.marquee { display: flex; gap: 3.5rem; width: max-content; animation: scrollx 30s linear infinite; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* --- 3D-тилт карточек --- */
.tilt { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.tilt-media { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.tilt:hover .tilt-media { transform: scale(1.06); }

/* --- Монохромная обложка карточки (тон-в-тон) --- */
.cover {
  position: relative;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(150deg, var(--c1), var(--c2));
}
.cover::after {
  content: '';
  position: absolute; inset: 0;
  opacity: .10;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 16px 16px;
}
.monogram { font-family: 'Fraunces', serif; letter-spacing: -.02em; }

/* --- Модалка --- */
.modal-back { animation: fadeIn .25s ease both; }
.modal-card { animation: pop .4s cubic-bezier(.16,1.2,.3,1) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .6s ease both; }

/* --- Пульсирующая точка --- */
.pulse { position: relative; }
.pulse::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: inherit;
  animation: ping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

/* Двойной ползунок бюджета (страница заказов) */
.op-range input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;margin:0;height:20px}
.op-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #5e49b3;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.op-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #5e49b3;cursor:pointer}
.op-range input[type=range]::-moz-range-track{background:transparent}

/* Главный баннер: лёгкое «парение» фото в коллаже */
@keyframes heroFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.hero-float { animation: heroFloat 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-float { animation: none; } }

/* Мессенджер: анимированные стикеры и GIF */
@keyframes mgBounce { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes mgShake { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-14deg) } 75% { transform: rotate(14deg) } }
@keyframes mgSway { 0%,100% { transform: rotate(-10deg) translateX(-4px) } 50% { transform: rotate(10deg) translateX(4px) } }
@keyframes mgPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.22) } }
@keyframes mgSpin { to { transform: rotate(360deg) } }
@keyframes mgPop { 0% { transform: scale(.3); opacity: 0 } 70% { transform: scale(1.15); opacity: 1 } 100% { transform: scale(1) } }
.mg-bounce { animation: mgBounce 1s ease-in-out infinite; display: inline-block; }
.mg-shake { animation: mgShake .6s ease-in-out infinite; display: inline-block; }
.mg-sway { animation: mgSway 1.2s ease-in-out infinite; display: inline-block; }
.mg-pulse { animation: mgPulse 1s ease-in-out infinite; display: inline-block; }
.mg-spin { animation: mgSpin 2.4s linear infinite; display: inline-block; }
.mg-pop { animation: mgPop .45s cubic-bezier(.2,.9,.3,1.3) both; display: inline-block; }
.mg-spin-once { animation: mgSpin .6s cubic-bezier(.2,.9,.3,1) 1; }
#mgPage ::-webkit-scrollbar { width: 6px } #mgPage ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 9px }
@media (prefers-reduced-motion: reduce) { .mg-bounce,.mg-shake,.mg-sway,.mg-pulse,.mg-spin { animation: none } }

/* ============================================================
   НОЧНАЯ ТЕМА — класс html.dark (переключатель #themeBtn в шапке).
   Переопределяем светлые токены Tailwind; тёмные блоки (bg-ink: шапка, баннер,
   кабинет артиста, мессенджер) остаются как есть.
   ============================================================ */
html.dark { background: #0e0c16; color-scheme: dark; }
html.dark body { color: #ece9f5; }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease !important;
}
html.dark ::selection { background: #4a3795; }

/* фоны */
html.dark .bg-paper, html.dark .hover\:bg-paper:hover, html.dark .from-paper { background-color: #0e0c16; }
html.dark .bg-white, html.dark .bg-card, html.dark .focus\:bg-white:focus { background-color: #1a1726; }
html.dark .hover\:bg-white:hover { background-color: #242036; }
html.dark .bg-paper\/90 { background-color: rgba(14,12,22,.9); }
html.dark .bg-paper\/60 { background-color: rgba(14,12,22,.6); }
html.dark .bg-white\/80, html.dark .bg-white\/90 { background-color: rgba(26,23,38,.9); }
html.dark .bg-line, html.dark .hover\:bg-line:hover, html.dark .hover\:bg-line\/60:hover { background-color: #2e2940; }
html.dark .hover\:bg-black\/5:hover, html.dark .bg-black\/5 { background-color: rgba(255,255,255,.06); }
html.dark .bg-accent-50, html.dark .hover\:bg-accent-50:hover, html.dark .bg-accent-100 { background-color: rgba(127,107,203,.18); }
html.dark .bg-emerald-50 { background-color: rgba(16,185,129,.15); }
html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: rgba(245,158,11,.15); }
html.dark .bg-rose-50, html.dark .hover\:bg-rose-50:hover, html.dark .bg-red-50, html.dark .hover\:bg-red-50:hover { background-color: rgba(244,63,94,.15); }
html.dark .bg-emerald-100 { background-color: rgba(16,185,129,.2); }

/* текст */
html.dark .text-ink, html.dark .hover\:text-ink:hover { color: #ece9f5; }
html.dark .text-ink-soft { color: #c3bdd6; }
html.dark .text-ink-mute { color: #8f89a6; }
html.dark .text-accent-600, html.dark .text-accent-700, html.dark .hover\:text-accent-700:hover, html.dark .hover\:text-accent-600:hover { color: #b3a5ec; }
html.dark .text-emerald-700 { color: #6ee7b7; }
html.dark .text-amber-700 { color: #fcd34d; }
html.dark .text-rose-600, html.dark .text-red-600 { color: #fda4af; }
html.dark .placeholder\:text-ink-mute::placeholder, html.dark input::placeholder, html.dark textarea::placeholder { color: #6f6a86; }

/* границы и кольца */
html.dark .border-line, html.dark .divide-line > * + * { border-color: #2e2940; }
html.dark .ring-line { --tw-ring-color: #2e2940; }
html.dark .ring-paper, html.dark .ring-card { --tw-ring-color: #0e0c16; }
html.dark .hover\:border-accent-200:hover, html.dark .border-accent-200 { border-color: #4a3795; }

/* кнопки «чернилами» на тёмном фоне — чуть светлее, чтобы не сливались */
html.dark main .bg-ink, html.dark .rounded-3xl .bg-ink, html.dark [id$="Modal"] .bg-ink, html.dark #artistPage .bg-ink:not(.absolute) { background-color: #3a3452; }
html.dark .shadow-soft { box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5); }
html.dark .cover { filter: brightness(.9); }
html.dark select option { background: #1a1726; color: #ece9f5; }

/* иконка переключателя: луна в светлой теме, солнце в тёмной */
.theme-sun { display: none; } html.dark .theme-sun { display: block; } html.dark .theme-moon { display: none; }
#themeBtn svg { grid-area: 1 / 1; }
/* светлые плашки внутри тёмного баннера — заметная рамка в ночной теме */
html.dark section.bg-ink .bg-white { background-color: #221d33; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 20px 50px -18px rgba(0,0,0,.6); }

/* Плитки категорий в баннере: объёмные карточки с бликом, рамкой и цветным свечением */
.cat-tile__box {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 24px rgba(0,0,0,.28), 0 14px 30px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s ease;
}
.cat-tile:hover .cat-tile__box, .cat-tile:focus-visible .cat-tile__box {
  transform: translateY(-6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -10px 24px rgba(0,0,0,.25), 0 18px 36px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.2), 0 0 34px 2px rgba(var(--glow), .55);
}

/* Календарь-доска артиста (studioboard.js) */
.sb-slot { transition: background-color .15s; }
.sb-slot:hover { background-color: rgba(94, 73, 179, .06); }
.sb-hatch { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(111, 106, 134, .09) 6px 12px); }

/* ============================================================
   ВЫПАДАЮЩИЕ СПИСКИ — единый вид (логика в assets/js/dropdown.js).
   Закрытое поле: своя стрелка вместо системной; открытое — меню .dd-menu.
   ============================================================ */
select:not([multiple]):not(.appearance-none):not(.opacity-0) {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 2.25rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6a86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px;
}
select.dd-open { border-color: #5e49b3 !important; box-shadow: 0 0 0 3px rgba(94, 73, 179, .12); }
.dd-menu {
  position: fixed; z-index: 200; overflow-y: auto; padding: 6px;
  background: #fff; border: 1px solid #e7e3da; border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(22, 20, 34, .22), 0 2px 6px rgba(22, 20, 34, .06);
  font-family: Manrope, system-ui, sans-serif; font-size: 14px; color: #161422;
  animation: ddIn .14s ease-out; scrollbar-width: thin;
}
.dd-menu.dd-up { animation-name: ddInUp; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ddInUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dd-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; color: #3b3752;
}
.dd-item.dd-active { background: #f6f4ef; color: #161422; }
.dd-item .dd-sub { font-size: 11px; color: #6f6a86; white-space: nowrap; }
.dd-item.dd-selected { color: #4a3795; font-weight: 600; }
.dd-item.dd-selected.dd-active { background: rgba(94, 73, 179, .08); }
.dd-item.dd-disabled { color: #b5b1c4; cursor: default; }
.dd-group { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6f6a86; }
html.dark select:not([multiple]):not(.appearance-none):not(.opacity-0) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239d98b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html.dark .dd-menu { background: #1f1b2e; border-color: rgba(255, 255, 255, .1); color: #ece9f5; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); }
html.dark .dd-item { color: #c9c4dc; }
html.dark .dd-item .dd-sub { color: #8a84a3; }
html.dark .dd-item.dd-active { background: rgba(255, 255, 255, .06); color: #fff; }
html.dark .dd-item.dd-selected { color: #b3a5ee; }
html.dark .dd-item.dd-selected.dd-active { background: rgba(94, 73, 179, .22); }
html.dark .dd-item.dd-disabled { color: #5d5873; }
html.dark .dd-group { color: #8a85a0; }

/* Перетаскивание фото в портфолио: полоса места вставки */

.ap-drag::after { content: ''; position: absolute; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: #5e49b3; box-shadow: 0 0 0 3px rgba(94,73,179,.25); opacity: 0; pointer-events: none; transition: opacity .12s; }
.ap-drag[data-side="before"]::after { left: -8px; opacity: 1; }
.ap-drag[data-side="after"]::after { right: -8px; opacity: 1; }
.ap-drag > img { border-radius: .75rem; }

/* Тонкая полоса прокрутки внутри скруглённых окон (быстрый просмотр и т. п.) */
.thin-scroll { scrollbar-width: thin; scrollbar-color: rgba(111, 106, 134, .45) transparent; }
.thin-scroll::-webkit-scrollbar { width: 8px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(111, 106, 134, .45); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

/* Предпросмотр «Контента главной»: изменённые, но не сохранённые места */
.cms-changed { outline: 3px solid #f59e0b !important; outline-offset: 4px; border-radius: 10px; }

/* Коллаж баннера с отзывом под карточками — баннер выше, чтобы поиск не наезжал на отзыв (cms.js heroReviewSpace) */
@media (min-width: 1024px) { .hero-has-review { min-height: 430px !important; } }

/* ===== БАННЕРЫ ГЛАВНОЙ ДЛЯ СВЕТЛОЙ И НОЧНОЙ ТЕМЫ =====
   applySiteContent (admin.js) кладёт в элемент --bg-light / --bg-dark; при смене темы фото меняется само. */
.theme-bg { background-image: var(--bg-light, none); }
html.dark .theme-bg { background-image: var(--bg-dark, var(--bg-light, none)); }

/* ===== СВЕТЛЫЙ ПЕРВЫЙ ЭКРАН — всегда в светлой теме =====
   Фото главного баннера без затемнения, подложка paper, текст ink. В ночной теме правила не действуют —
   баннер остаётся тёмным (классы Tailwind в разметке). */
html:not(.dark) #heroSection { background-color: #f6f4ef; color: #161422; }
html:not(.dark) #heroSection #cHeroBg { opacity: 1 !important; }
html:not(.dark) #heroSection #cHeroShade {
  /* слева — под заголовок, снизу — под поиск и подписи плиток (иначе тёмная часть фото глушит тёмный текст) */
  background-image:
    linear-gradient(to top, rgba(246,244,239,.97) 0%, rgba(246,244,239,.85) 28%, rgba(246,244,239,0) 55%),
    linear-gradient(to right, rgba(246,244,239,.94) 0%, rgba(246,244,239,.7) 38%, rgba(246,244,239,.15) 62%, rgba(246,244,239,0) 75%) !important;
}
html:not(.dark) #heroSection .hero-glow { display: none; }
html:not(.dark) #heroSection #cHeroTitle { color: #161422; }
html:not(.dark) #heroSection #cHeroTitle .text-accent-300 { color: #4a3795; }
html:not(.dark) #heroSection #cHeroSub { color: #3b3752; }
html:not(.dark) #heroSection .text-white\/70,
html:not(.dark) #heroSection .text-white\/85 { color: #3b3752; }
html:not(.dark) #heroSection .text-white\/90 { color: #161422; }
html:not(.dark) #heroSection .border-white\/15 { border-color: rgba(22,20,34,.12); }
html:not(.dark) #heroSection .bg-white\/10 { background-color: rgba(255,255,255,.7); }
html:not(.dark) #heroSection svg[stroke="#6ee7b7"] { stroke: #047857; }
html:not(.dark) #heroSection .shadow-lift { box-shadow: 0 12px 32px -14px rgba(40,31,77,.28); border: 1px solid #e7e3da; }

/* ============================================================
   КАЛЕНДАРЬ — единый вид полей даты (логика в assets/js/datepicker.js).
   ============================================================ */
input[type="date"] { cursor: pointer; }
@media (pointer: fine) {
  input[type="date"] {
    padding-right: 2.4rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6a86' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .8rem center; background-size: 16px;
  }
  input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
  html.dark input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239d98b3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  }
}
input[type="date"].dp-open { border-color: #5e49b3 !important; box-shadow: 0 0 0 3px rgba(94, 73, 179, .12); }
.dp-menu {
  position: fixed; z-index: 200; width: 288px; padding: 12px;
  background: #fff; border: 1px solid #e7e3da; border-radius: 18px;
  box-shadow: 0 18px 40px -12px rgba(22, 20, 34, .22), 0 2px 6px rgba(22, 20, 34, .06);
  font-family: Manrope, system-ui, sans-serif; color: #161422; animation: ddIn .14s ease-out; user-select: none;
}
.dp-menu.dp-up { animation-name: ddInUp; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-title { font-family: Fraunces, Georgia, serif; font-size: 17px; font-weight: 600; }
.dp-title span { color: #6f6a86; font-weight: 400; }
.dp-nav { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #3b3752; transition: background .15s; }
.dp-nav:hover { background: #f6f4ef; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow span { padding: 4px 0 6px; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6f6a86; }
.dp-day { height: 36px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: #3b3752; transition: background .12s, color .12s; }
.dp-day.dp-we { color: #6f6a86; }
.dp-day:hover:not(:disabled) { background: #f6f4ef; color: #161422; }
.dp-day.dp-today { box-shadow: inset 0 0 0 1.5px rgba(94, 73, 179, .45); color: #4a3795; font-weight: 700; }
.dp-day.dp-sel, .dp-day.dp-sel:hover { background: #5e49b3; color: #fff; font-weight: 700; box-shadow: none; }
.dp-day:disabled { color: #cfcbd9; cursor: default; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e7e3da; }
.dp-link { padding: 6px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #6f6a86; transition: background .15s, color .15s; }
.dp-link:hover:not(:disabled) { background: #f6f4ef; color: #161422; }
.dp-link.dp-strong { color: #4a3795; }
.dp-link:disabled { opacity: .4; cursor: default; }
html.dark .dp-menu { background: #1f1b2e; border-color: rgba(255, 255, 255, .1); color: #ece9f5; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); }
html.dark .dp-title span, html.dark .dp-dow span, html.dark .dp-day.dp-we, html.dark .dp-link { color: #8a84a3; }
html.dark .dp-nav, html.dark .dp-day { color: #c9c4dc; }
html.dark .dp-nav:hover, html.dark .dp-day:hover:not(:disabled), html.dark .dp-link:hover:not(:disabled) { background: rgba(255, 255, 255, .06); color: #fff; }
html.dark .dp-day.dp-today { color: #b3a5ee; box-shadow: inset 0 0 0 1.5px rgba(179, 165, 238, .5); }
html.dark .dp-day.dp-sel { background: #5e49b3; color: #fff; }
html.dark .dp-day:disabled { color: #4a4560; }
html.dark .dp-link.dp-strong { color: #b3a5ee; }
html.dark .dp-foot { border-color: rgba(255, 255, 255, .1); }

/* ============================================================
   ТЕЛЕФОНЫ: БЕЗ САМОПРОИЗВОЛЬНОГО УВЕЛИЧЕНИЯ
   Safari на iPhone приближает страницу, когда фокус попадает в поле со шрифтом меньше 16 px, и сам не отдаляет —
   страница «увеличивалась», по ней было неудобно перемещаться. На сенсорных экранах поля — 16 px.
   touch-action: manipulation убирает приближение двойным касанием (щипок двумя пальцами остаётся).
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea { font-size: 16px !important; }
}

/* Тип мероприятия (страница заказа): 3D-иконки из макета на светлой подложке; в ночной теме подложка остаётся светлой-приглушённой */
.op-type-ico { background: #f3f0fb; }
.op-type-ico img { mix-blend-mode: multiply; }
html.dark .op-type-ico { background: #e9e4f8; }
/* выбранный тип мероприятия — заметнее; в ночной теме фон и обводка ярче, кольцо галочки — цвета карточки */
.op-type.op-on { background-color: rgba(94, 73, 179, .12) !important; }
html.dark .op-type.op-on { background-color: rgba(127, 107, 203, .28) !important; border-color: #8b76e0 !important; }
html.dark .op-type .op-check { --tw-ring-color: #1f1b2e; }