/* PRIMARA — общие стили (mobile-first) */

* { -webkit-tap-highlight-color: transparent; }

/* ─── Универсальные nav-кнопки в шапке (как градиентные плитки на лендинге) ─── */
.nav-pill {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: 9px 6px;
  border-radius: 14px;
  background: linear-gradient(to bottom right, rgba(255, 185, 151, 0.28), #FFFFFF);
  border: 1px solid #ECECEC;
  color: #0A0A0A;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-pill:hover { border-color: #0A0A0A; transform: translateY(-1px); }
.nav-pill[data-active="true"],
.nav-pill.active {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #FAFAF7;
  font-weight: 700;
}
.nav-pill[data-active="true"]:hover,
.nav-pill.active:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  transform: none;
}
@media (min-width: 640px) {
  .nav-pill { font-size: 13px; padding: 10px 12px; }
}

html, body {
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

/* Плавная появляемость превью */
img { transition: opacity .25s ease; }

/* Drop zone hover/drag-state */
.drop-active {
  border-color: #0A0A0A !important;
  background: #FFF;
}

/* Активная вкладка / опция */
.tab-btn[data-active="true"] {
  background: #0A0A0A;
  color: #FAFAF7;
}
.tab-btn:not([data-active="true"]) {
  background: transparent;
  color: #6B6B6B;
}

.scene-opt input:checked + .opt-ui,
.opt-ui[data-active="true"] {
  background: #0A0A0A;
  color: #FAFAF7;
  border-color: #0A0A0A;
}

.aspect-btn[data-active="true"] {
  background: #0A0A0A;
  color: #FAFAF7;
  border-color: #0A0A0A;
}

.cat-chip[data-active="true"] {
  background: #0A0A0A;
  color: #FAFAF7;
  border-color: #0A0A0A;
}

.part-slot[data-filled="true"] {
  border-color: #0A0A0A;
}

/* Чтобы кнопка-CTA не прыгала на iOS Safari */
button:focus { outline: none; }
button:focus-visible { outline: 2px solid #FF6B35; outline-offset: 2px; }

/* Hero italic микрофикс — Inter italic тонковат, чуть подтягиваем вес */
h1 .italic { font-weight: 300; }

/* Безопасный отступ под sticky CTA на app.html */
@media (max-width: 640px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* Гарантия что details/summary без дефолтной стрелки */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] summary span:last-child { transform: rotate(45deg); display: inline-block; transition: transform .2s ease; }
summary span:last-child { transition: transform .2s ease; }