/* =========================================================
   Clay Soft — мʼякий «пластиліновий» стиль AiPhoto.
   Підключається останнім на всіх сторінках (після base/landing/auth/app/studio/legal)
   і перевизначає ті самі токени (--studio, --print, --film, --wax, --ink…), тож спільні
   компоненти беруть нові кольори самі. Форма — опуклі картки на теплому бежевому тлі:
   світла тінь зліва-згори, тепла темна справа-знизу; натиснуте — вдавлене.
   Плівкові мотиви старого дизайну (перфорація, олівець, мотузка) тут вимкнено.
   ========================================================= */

/* ---------- Токени ---------- */
:root {
  --studio: #efe5da;      /* тло сторінки */
  --studio-2: #dccfc1;
  --studio-3: #f5ede4;
  --print: #f7f0e8;       /* світла поверхня: поля, кнопки, дрібні відбитки */
  --film: #4a362d;        /* какао: темні плашки й панелі */
  --film-2: #5b463b;
  --film-ink: #fbefe4;
  --film-ink-2: #dcc7b7;
  --wax: #ec7a45;         /* помаранчева глина — головна дія й позначки */
  --wax-deep: #c85a26;
  --edge: #ffb35c;        /* номери кадрів і акценти на какао */
  --ink: #3b2c25;
  --ink-2: #5e4a40;
  --ink-3: #75604f;
  --line: rgba(59, 44, 37, 0.1);
  --line-strong: rgba(59, 44, 37, 0.18);
  --blue-tint: rgba(59, 44, 37, 0.06);
  --blue-line: rgba(59, 44, 37, 0.2);

  --r-xs: 8px;
  --r-s: 14px;
  --r-btn: 20px;
  --r-m: 18px;
  --r-l: 28px;

  --shadow-print: 8px 8px 20px #d3c3b2, -8px -8px 20px #fffaf3;
  --shadow-float: 14px 14px 32px #cdbca9, -12px -12px 28px #fffaf3;

  /* Глина */
  --clay-bg: #efe5da;
  --clay-card: #f3eae0;
  --clay-hi: #fffaf3;     /* світла тінь */
  --clay-lo: #d3c3b2;     /* темна тінь */
  --clay-r: 32px;
  --clay-r-sm: 22px;
  --clay-r-img: 20px;
  --clay-gap: clamp(8px, 1.6vw, 20px);
  --clay-raise: 12px 12px 28px var(--clay-lo), -12px -12px 28px var(--clay-hi), inset 2px 2px 3px rgba(255, 255, 255, 0.7), inset -3px -3px 6px rgba(120, 80, 50, 0.06);
  --clay-raise-sm: 5px 5px 12px var(--clay-lo), -5px -5px 12px var(--clay-hi);
  --clay-press: inset 4px 4px 10px var(--clay-lo), inset -4px -4px 10px var(--clay-hi);
  --clay-cta: inset 3px 3px 6px rgba(255, 205, 170, 0.8), inset -4px -4px 8px rgba(170, 70, 25, 0.45), 8px 10px 20px -6px rgba(200, 95, 45, 0.5);
  --clay-cocoa: inset 2px 2px 4px rgba(255, 255, 255, 0.15), inset -3px -3px 6px rgba(0, 0, 0, 0.3), 6px 8px 16px -6px rgba(74, 54, 45, 0.6);
  --clay-sunk: inset 6px 6px 14px rgba(0, 0, 0, 0.35), inset -6px -6px 14px rgba(255, 255, 255, 0.06);
  --clay-deep: radial-gradient(55% 75% at 50% -12%, rgba(236, 122, 69, 0.55), transparent 70%), #45322a;

  accent-color: var(--wax);
}
@media (max-width: 620px) {
  :root { --clay-raise: 8px 8px 18px var(--clay-lo), -8px -8px 18px var(--clay-hi), inset 2px 2px 3px rgba(255, 255, 255, 0.7), inset -3px -3px 6px rgba(120, 80, 50, 0.06); }
}

:root body { background: var(--clay-bg); }
:root ::selection { background: var(--wax); color: #fff; }

/* ---------- Шапка й меню ---------- */
:root .site-header { background: rgba(239, 229, 218, 0.88); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
:root .mobile-nav { background: rgba(239, 229, 218, 0.97); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* ---------- Плівкові мотиви — геть ---------- */
:root :is(.film, .darkroom, .how-step__frame)::before,
:root :is(.film, .darkroom, .final, .how-step__frame)::after,
:root :is(.fbox__top, .price-sheet)::after,
:root .plan::before,
:root .wax-mark,
:root :is(.dryline__cord, .dryline__peg) { display: none; }

/* ---------- Тло секцій: одне, як у глини ---------- */
:root :is(.series, .kit, .how, .pricing, .site-footer) { background: transparent; }
:root .reel__viewport { background: transparent; box-shadow: none; }

/* Какао-панелі замість чорних смуг */
:root .film { margin-inline: var(--clay-gap); border-radius: calc(var(--clay-r) + 8px); background: var(--film); box-shadow: var(--clay-sunk); }
:root :is(.darkroom, .final) { margin-inline: var(--clay-gap); border-radius: calc(var(--clay-r) + 12px); background: var(--clay-deep); }
:root .final { margin-bottom: var(--clay-gap); }

/* ---------- Картки ---------- */
:root :is(.print, .fbox, .plan, .review, .price-sheet, .desk__print, .pro-vs__crop) { border-radius: var(--clay-r); background: var(--clay-card); box-shadow: var(--clay-raise); }
:root .desk__print { rotate: none; padding: 10px; }
:root .print { padding: 8px 8px 16px; }
:root :is(.print__name, .print__hint) { padding-inline: 6px; }
:root :is(.beyond__print, .kit__print, .dryline__print) { border-radius: var(--clay-r-sm); background: var(--print); }
:root :is(.kit__visual, .beyond__visual) { border-radius: var(--clay-r-sm); }
:root .beyond__visual { box-shadow: var(--clay-press); }
:root .kit__visual { box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.12), inset -4px -4px 10px rgba(255, 255, 255, 0.5); }

/* Фото — з круглими кутами */
:root :is(.desk__compare, .print__img > img:first-child, .wipe, .series__frame img, .strip__frame button, .beyond__print > img:first-child,
  .kit__print img, .dryline__print img, .pro-vs__win, .how-step__img, .plan__sheet img, .kit__shape--post, .kit__shape--story) {
  border-radius: var(--clay-r-img);
}
:root :is(.strip__frame button, .how-step__img) { overflow: hidden; }
:root .wipe { border-color: var(--print); box-shadow: var(--clay-raise); }
:root .plan__sheet { border-radius: calc(var(--clay-r-img) + 4px); padding: 6px; background: var(--film); }
/* Вибраний кадр — помаранчева рамка замість олівцевого кола */
:root :is(.strip__frame.is-on button, .series__frame.is-picked img) { outline: 3px solid var(--wax); outline-offset: 3px; }
/* Номери кадрів: на світлому — темна глина, на какао — світлий помаранчевий */
:root .frame-no { color: var(--wax-deep); }
:root :is(.film, .how-step__frame, .mini-desk, .plan__sheet) .frame-no { color: var(--edge); }
:root :is(.strip, .marquee__row) { scrollbar-color: rgba(251, 239, 228, 0.28) transparent; }

/* Смужка таймера під світлостолом — вдавлений жолобок */
:root .desk__bar { height: 6px; margin-inline: 12px; border-radius: var(--r-pill); background: var(--clay-bg); box-shadow: inset 2px 2px 4px var(--clay-lo), inset -2px -2px 4px var(--clay-hi); }
:root .desk__bar span { border-radius: inherit; }

/* ---------- Плашки й мітки ---------- */
:root :is(.reel__count, .print__club, .beyond__tag, .plan__badge, .fbox__badge, .fbox__save, .price-row--free dd, .desk__tag) { border-radius: var(--r-pill); }
:root :is(.plan__badge, .fbox__badge) { padding-inline: 12px; }
:root :is(.beyond__quote, .mini-desk) { border-radius: 14px; }
:root .pricing__points li > span:first-child { border-radius: 10px; }

/* ---------- Перемикачі, стрілки, пауза: опуклі; вибране — вдавлене ---------- */
:root :is(.looks__tabs button, .edit-tabs button, .motion-toggle, .reel__arrow, .nav-toggle, .segmented label) {
  border: 0; border-radius: var(--r-pill); background: var(--clay-bg); color: var(--ink); box-shadow: var(--clay-raise-sm);
}
:root :is(.looks__tabs button, .edit-tabs button)[aria-pressed="true"],
:root .segmented input:checked + label { background: var(--clay-bg); color: var(--wax-deep); box-shadow: var(--clay-press); }
:root .looks__tabs button[aria-pressed="true"] span { color: inherit; opacity: 0.7; }
@media (hover: hover) { :root .reel__arrow:hover { background: var(--clay-bg); color: var(--wax-deep); box-shadow: var(--clay-press); } }

/* ---------- Кнопки ---------- */
:root :is(.btn--marker, .btn--key) { background: var(--wax); color: #fff; box-shadow: var(--clay-cta); }
@media (hover: hover) { :root :is(.btn--marker, .btn--key):hover { background: var(--wax); filter: brightness(1.05); } }
:root :is(.btn--dark, .btn--primary) { background: var(--film); color: #fff; box-shadow: var(--clay-cocoa); }
@media (hover: hover) { :root :is(.btn--dark, .btn--primary):hover { background: #3d2c24; } }
:root :is(.btn--ghost, .btn--light) { border-color: transparent; background: var(--clay-bg); color: var(--ink); box-shadow: 6px 6px 14px var(--clay-lo), -6px -6px 14px var(--clay-hi); }
@media (hover: hover) { :root :is(.btn--ghost, .btn--light):hover { background: var(--clay-bg); color: var(--wax-deep); border-color: transparent; } }
:root .btn:active:not(:disabled, [aria-disabled="true"]) { box-shadow: var(--clay-press); }
:root .btn--soft { background: var(--clay-bg); box-shadow: var(--clay-raise-sm); }

/* ---------- Поля форм — вдавлені ---------- */
:root .input { border: 0; border-radius: var(--r-s); background: var(--clay-bg); box-shadow: var(--clay-press); }
:root .input:focus { box-shadow: var(--clay-press), 0 0 0 2.5px var(--wax); }
:root .input[aria-invalid="true"] { box-shadow: var(--clay-press), 0 0 0 2px var(--danger); }
@media (hover: hover) { :root .input:hover:not(:focus) { border-color: transparent; } }

/* ---------- Як це працює: окремі какао-кадри ---------- */
:root .how-strip { gap: 14px; }
:root .how-step .how-step__frame { padding: 12px 12px 44px; border-radius: var(--clay-r); background: var(--film); box-shadow: var(--clay-sunk); }
:root .how-step__frame > .frame-no { left: 18px; bottom: 18px; }
@media (max-width: 620px) {
  :root .how-step .how-step__frame { padding: 10px; }
  :root .how-step__frame > .frame-no { position: static; }
  :root .how-strip { gap: 10px; }
}

/* ---------- Пакети ---------- */
:root .fbox__top { margin: 6px 6px 0; padding-bottom: 22px; border-radius: calc(var(--clay-r) - 6px); box-shadow: inset 3px 3px 8px rgba(120, 80, 50, 0.12), inset -3px -3px 8px rgba(255, 255, 255, 0.6); }
:root :is(.fbox--film, .fbox--wax) .fbox__top { box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.18), inset -4px -4px 10px rgba(0, 0, 0, 0.25); }
:root .fbox--popular { box-shadow: var(--clay-raise), inset 0 0 0 2px var(--wax); }

/* ---------- Абонементи на какао ---------- */
:root .darkroom { --clay-raise: 0 24px 44px -20px rgba(0, 0, 0, 0.6), inset 3px 3px 4px rgba(255, 255, 255, 0.8), inset -5px -5px 10px rgba(120, 80, 50, 0.14); }
:root .plan--popular { background: var(--wax); color: #fff; box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.6), inset 3px 3px 6px rgba(255, 205, 170, 0.8), inset -5px -5px 10px rgba(170, 70, 25, 0.45); }
:root .plan--popular :is(.plan__note, .plan__per, .plan__perks, .plan__price span) { color: rgba(255, 255, 255, 0.88); }
:root .plan--popular .plan__per b { color: #fff; }
:root .plan--popular .plan__perks { border-top-color: rgba(255, 255, 255, 0.35); }
:root .plan--popular .plan__perks li::before { border-color: #fff; }
:root .plan--popular .plan__badge { background: var(--film); color: var(--edge); }
:root .plan--popular .btn { background: #fff; color: var(--wax-deep); box-shadow: 0 8px 16px -6px rgba(120, 50, 20, 0.5); }
@media (max-width: 900px) {
  :root .plan { scroll-snap-align: center; }
  :root .subs__row { scroll-padding-inline: 0; }
}

/* ---------- Пейджер під стрічками на телефоні: вдавлений жолобок з крапками ---------- */
@media (max-width: 860px) {
  /* Стрічки гортаються вбік і обрізають тінь — даємо їй місце зверху й знизу */
  :root .fbox-row { padding-top: 16px; padding-bottom: 32px; }
  :root .fbox-pager { margin-top: -8px; }
  :root .fbox-pager__film { height: 28px; padding: 0 8px; border-radius: var(--r-pill); background: var(--clay-bg); box-shadow: inset 3px 3px 6px var(--clay-lo), inset -3px -3px 6px var(--clay-hi); }
  :root .fbox-pager i { width: 9px; height: 9px; border-radius: 50%; background: #cdbba9; transition: background-color 160ms ease, width 200ms var(--ease-out); }
  :root .fbox-pager button[aria-current="true"] i { width: 22px; border-radius: var(--r-pill); background: var(--wax); }
  :root .darkroom .fbox-pager__film { background: rgba(0, 0, 0, 0.22); box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.35), inset -2px -2px 5px rgba(255, 255, 255, 0.05); }
  :root .darkroom .fbox-pager i { background: rgba(251, 239, 228, 0.3); }
  :root .darkroom .fbox-pager button[aria-current="true"] i { background: var(--edge); }
  :root .fbox-pager button:focus-visible i { box-shadow: 0 0 0 2px var(--clay-bg), 0 0 0 4px var(--wax); }
}

/* ---------- Як ми бережемо фото: одна опукла картка — заголовок ліворуч, текст праворуч ---------- */
:root .how { padding-bottom: clamp(32px, 4vw, 56px); }
:root .privacy { padding-block: clamp(8px, 2vw, 24px); }
:root .privacy__grid { display: block; }
:root .privacy__copy {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(16px, 4vw, 56px); align-items: center;
  padding: clamp(24px, 4vw, 52px); border-radius: calc(var(--clay-r) + 8px); background: var(--clay-card); box-shadow: var(--clay-raise);
}
:root .privacy__copy .lead { max-width: none; }
@media (max-width: 760px) { :root .privacy__copy { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { :root .beyond__list { padding-top: 12px; padding-bottom: 28px; } }

/* ---------- Питання — опуклими картками ---------- */
:root .faq__list details { margin-bottom: 12px; padding: 0 20px; border: 0; border-radius: var(--clay-r-sm); background: var(--clay-card); box-shadow: 8px 8px 18px var(--clay-lo), -8px -8px 18px var(--clay-hi); }
:root .faq__list summary { padding-block: 14px; }
/* Плюс — опукла кнопочка; відкрите питання — хрестик у вдавленій */
:root .faq__list summary::after {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(var(--ink) 0 0) center / 12px 2px no-repeat, linear-gradient(var(--ink) 0 0) center / 2px 12px no-repeat, var(--clay-bg);
  box-shadow: var(--clay-raise-sm);
}
:root .faq__list details[open] summary::after { box-shadow: var(--clay-press); }

/* Пунктир квитанцій → тонка лінія */
:root :is(.price-row + .price-row, .fbox__price, .plan__perks, .site-footer__bottom) { border-top-style: solid; border-top-width: 1px; }

/* ---------- Вхід і реєстрація (auth.css) ---------- */
:root .otp-icon { border-radius: 18px; box-shadow: var(--clay-cocoa); }
:root .otp input { border: 0; background: var(--clay-bg); box-shadow: var(--clay-press); }
:root .otp input:focus { box-shadow: var(--clay-press), 0 0 0 2.5px var(--wax); }
:root .otp.is-full input { box-shadow: var(--clay-press), 0 0 0 1.5px var(--ink-3); }
:root .otp.is-error input { box-shadow: var(--clay-press), 0 0 0 2px var(--danger); }
:root .otp.is-done input { box-shadow: var(--clay-press), 0 0 0 2px var(--ok); }
:root .otp-change { background: var(--clay-card); box-shadow: var(--clay-raise-sm); }
:root .btn--oauth { border-color: transparent; background: var(--clay-bg); box-shadow: 6px 6px 14px var(--clay-lo), -6px -6px 14px var(--clay-hi); }
:root .auth__dev-note { background: var(--clay-card); box-shadow: var(--clay-press); }
/* Капча «Я не робот» (public/js/captcha.js): опукла плашка, квадратик стає помаранчевою галочкою */
:root .captcha { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--r-m); background: var(--clay-card); box-shadow: 6px 6px 14px var(--clay-lo), -6px -6px 14px var(--clay-hi); }
:root .captcha__box { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 12px; background: none; font-weight: 650; color: var(--ink); text-align: left; }
:root .captcha__mark { position: relative; display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--clay-bg); box-shadow: inset 3px 3px 6px var(--clay-lo), inset -3px -3px 6px var(--clay-hi); transition: background-color 200ms ease, box-shadow 200ms ease; }
:root .captcha[data-state="work"] .captcha__mark::after { content: ""; width: 16px; height: 16px; border: 2.5px solid var(--wax); border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
:root .captcha[data-state="done"] .captcha__mark { background: var(--wax); box-shadow: var(--clay-cta); }
:root .captcha[data-state="done"] .captcha__mark::after { content: ""; width: 12px; height: 7px; margin-top: -3px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; rotate: -45deg; animation: captcha-tick 260ms var(--ease-out); }
@keyframes captcha-tick { from { scale: 0.3; opacity: 0; } }
:root .captcha[data-state="fail"] .captcha__label { color: var(--danger); }
:root .captcha:has(.captcha__box:focus-visible) { box-shadow: 6px 6px 14px var(--clay-lo), -6px -6px 14px var(--clay-hi), 0 0 0 2.5px var(--wax); }
:root .captcha__box:focus-visible { outline: none; }

/* Панель швидкого входу (лише localhost) лишається чорною, без глини */
:root .dev-login .btn { box-shadow: none; }
:root .dev-login .btn--primary { background: var(--wax); color: #fff; }
:root .dev-login .btn--light { background: #fff; color: #111; }

/* ---------- Юридичні сторінки (legal.css) ---------- */
:root :is(.legal__toc, .legal__requisites) { border: 0; border-radius: var(--clay-r-sm); background: var(--clay-card); box-shadow: var(--clay-raise); }
:root .legal__doc table { box-shadow: var(--clay-raise-sm); }
:root .legal__callout { background: var(--clay-card); color: var(--ink); box-shadow: var(--clay-press); }

/* ---------- Кабінет: знімальна карта й світлостіл (studio.css, app.css) ---------- */
:root .chart { border-radius: var(--clay-r); box-shadow: var(--clay-cocoa); scrollbar-color: rgba(251, 239, 228, 0.25) transparent; }
:root .step { border-bottom-style: solid; border-bottom-color: rgba(251, 239, 228, 0.12); }
:root .step__no { border-radius: 8px; }
:root :is(.sitter__pick, .sitter__add, .sitter__pick img, .own__pick, .own__add, .own__pick img) { border-radius: 14px; }
:root .sitter__slot.is-loading { border-radius: 14px; }
:root .sitter { border-radius: 16px; }
/* Світлостіл — вдавлений теплий лоток, на якому лежать опуклі відбитки */
:root .lightbox {
  border-radius: calc(var(--clay-r) + 4px);
  background-color: #f2e9df;
  background-image:
    linear-gradient(rgba(59, 44, 37, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 44, 37, 0.035) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, #faf4ec 0%, #f3eae0 60%, #ece1d5 100%);
  box-shadow: inset 6px 6px 16px var(--clay-lo), inset -6px -6px 16px var(--clay-hi);
}
:root .sizes { border: 0; border-radius: var(--r-pill); background: var(--clay-bg); box-shadow: var(--clay-raise-sm); }
:root .sizes button[aria-pressed="true"] { background: var(--clay-bg); color: var(--wax-deep); box-shadow: var(--clay-press); }
:root .sizes button:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
:root .sizes button:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
:root :is(.print__tag, .look__club, .jump__n) { border-radius: var(--r-pill); }
:root dialog.loupe { border-radius: var(--clay-r); }
:root .plan-card__sheet { border-radius: 16px; }
:root .fbox__body .btn { padding-inline: 12px; white-space: normal; text-align: center; }

/* Баланс: вкладки, своя сума, підписка */
:root .tabs { padding: 4px; border-radius: var(--r-pill); background: var(--clay-bg); box-shadow: var(--clay-press); }
:root .tabs__tab { border-radius: var(--r-pill); }
:root :is(.tabs__tab[aria-selected="true"], .tabs__tab[aria-pressed="true"]) { background: var(--clay-card); color: var(--wax-deep); box-shadow: 3px 3px 8px var(--clay-lo), -3px -3px 8px var(--clay-hi); }
:root :is(.custom-topup, .sub-current, .plan-card) { border: 0; border-radius: var(--clay-r); background: var(--clay-card); box-shadow: var(--clay-raise); }
:root .sub-current--alert { background: #f7e1da; }
:root .custom-topup__total { border-radius: var(--clay-r-sm); background: var(--clay-bg); box-shadow: var(--clay-press); }
:root .stepper { gap: 10px; }
:root .stepper__btn { border: 0; border-radius: 50% !important; width: 52px; background: var(--clay-bg); box-shadow: var(--clay-raise-sm); }
:root .stepper__btn:active { background: var(--clay-bg); box-shadow: var(--clay-press); }
@media (hover: hover) { :root .stepper__btn:hover { background: var(--clay-bg); color: var(--wax-deep); } }
:root .stepper__input { border-radius: var(--r-pill); }
:root .chip { border: 0; border-radius: var(--r-pill); background: var(--clay-bg); box-shadow: var(--clay-raise-sm); }
:root .chip[aria-pressed="true"] { background: var(--clay-bg); color: var(--wax-deep); box-shadow: var(--clay-press); }
:root .plan-card--popular { box-shadow: var(--clay-raise), inset 0 0 0 2px var(--wax); }
:root .plan-card--current { background: #efe4d7; box-shadow: var(--clay-press), inset 0 0 0 1.5px var(--ink-3); }
:root .iban-pay__qr { border-color: transparent; border-radius: var(--clay-r-sm); box-shadow: var(--clay-raise-sm); }
:root .iban-req { border: 0; border-radius: var(--clay-r-sm); background: var(--clay-bg); box-shadow: var(--clay-press); }

/* ---------- Діалоги й сповіщення ---------- */
:root dialog.modal { background: var(--clay-card); box-shadow: var(--shadow-float); }
:root dialog.modal::backdrop { background: rgba(59, 44, 37, 0.45); backdrop-filter: blur(4px); }
:root .toast { border-radius: var(--r-m); box-shadow: var(--clay-cocoa); }