:root {
  --radius: 14px;
  --radius-lg: 18px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --content-actions: 300px;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-brand: "Inter", var(--font);
  --title-size: clamp(1.375rem, 4.5vw, 1.75rem);
  --lead-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: -0.011em;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
  font-feature-settings: "kern" 1, "liga" 1;
}

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top left, var(--ambient-a), transparent 32%),
    radial-gradient(circle at top right, var(--ambient-b), transparent 26%),
    radial-gradient(circle at bottom center, var(--ambient-c), transparent 30%);
  z-index: 0;
  transition: opacity 0.25s ease;
}

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin: 0 auto;
  overflow-x: clip;
  padding:
    max(20px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(40px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

/* Header */
.top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  flex: 1;
}

.brand-logo {
  display: block;
  width: auto;
  height: 34px;
  max-width: min(200px, 58vw);
}

.brand-tag {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--lead, var(--muted));
  font-weight: 400;
  letter-spacing: 0.01em;
}

.status {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--muted);
  line-height: 1.2;
}

.status[data-ready="true"] {
  color: var(--status-ready-color);
  border-color: var(--status-ready-border);
  background: var(--status-ready-bg);
}

.status[data-ready="false"] {
  color: var(--status-error-color);
  border-color: var(--status-error-border);
}

/* Flow steps */
.flow {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-lg);
}

.flow-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.2s;
}

.flow-step:disabled {
  cursor: default;
  opacity: 0.5;
}

.flow-step:not(:disabled):hover {
  color: var(--text);
}

.flow-step.active {
  color: var(--text);
}

.flow-step.active .flow-num {
  border: none;
  background: var(--gradient);
  color: var(--on-gradient);
  box-shadow: var(--shadow-btn);
}

.flow-step.done .flow-num {
  border-color: var(--status-ready-border);
  color: var(--status-ready-color);
}

.flow-num {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.flow-line {
  flex: 1;
  height: 1px;
  min-width: 24px;
  margin: 0 12px;
  background: var(--border);
}

.flow-label {
  display: none;
}

@media (min-width: 480px) {
  .flow-label {
    display: inline;
  }
}

/* Views */
.view {
  display: none;
}

.view.active {
  display: block;
  animation: in 0.35s ease;
}

@keyframes in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.view-head {
  margin-bottom: var(--space-lg);
}

.view-title {
  margin: 0 0 10px;
  font-family: var(--font);
  font-size: var(--title-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.view-lead {
  margin: 0;
  color: var(--lead, var(--muted));
  font-size: var(--lead-size);
  line-height: 1.55;
  max-width: 34em;
  font-weight: 400;
}

.chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-md);
  padding: 8px 14px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow: var(--shadow-card, none);
}

.chip strong {
  color: var(--cyan);
  font-weight: 600;
}

/* Effects */
.effect-section {
  margin-bottom: var(--space-lg);
}

.effect-section:last-child {
  margin-bottom: var(--space-md);
}

.effect-section h2 {
  margin: 0 0 var(--space-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.effect-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
  grid-auto-rows: 1fr;
}

.effect-list--popular {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  grid-auto-rows: 1fr;
}

@media (max-width: 600px) {
  .effect-list--popular {
    grid-template-columns: 1fr;
  }
}

.effect-btn--hero .effect-btn__title {
  font-size: 0.9375rem;
}

.effect-btn {
  min-height: 76px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated, var(--surface));
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-card, none);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.effect-btn:hover:not(.selected) {
  transform: translateY(-1px);
  border-color: var(--effect-hover-border);
  background: var(--surface-hover);
}

.effect-btn.selected {
  transform: translateY(-1px);
  background: var(--gradient);
  color: var(--on-gradient);
  border-color: transparent;
  box-shadow: var(--shadow-btn-active);
}

.effect-btn.selected:hover {
  background: var(--gradient);
}

.effect-btn__title {
  display: block;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.effect-btn__sub {
  margin-top: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted);
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.effect-btn.selected .effect-btn__sub {
  color: inherit;
  opacity: 0.88;
}

/* Upload */
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 36px 24px;
  min-height: 128px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated, var(--surface));
  box-shadow: var(--shadow-card, none);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.drop:hover,
.drop.dragover {
  border-color: var(--drop-focus-border);
  box-shadow: 0 0 0 3px var(--drop-focus-shadow);
}

.drop input {
  display: none;
}

.drop-title {
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.drop-hint {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.drop--small {
  padding: 20px;
}

.mask {
  display: none;
  margin-top: 16px;
}

.mask.visible {
  display: block;
}

.mask-label {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Previews */
.previews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.previews.is-empty {
  display: none;
  margin: 0;
}

.previews:has(.frame--mask.hidden) {
  grid-template-columns: 1fr;
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 520px) {
  .previews,
  .compare {
    grid-template-columns: 1fr;
  }
}

.frame {
  margin: 0;
  padding: 12px 14px 14px;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card, none);
  min-height: 0;
}

#panel-2 .frame:has(img:not(.hidden)) {
  min-height: 100px;
}

#panel-3 .frame {
  min-height: 120px;
}

.frame figcaption {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.frame img {
  display: block;
  width: 100%;
  max-height: min(42vh, 240px);
  object-fit: contain;
  border-radius: 6px;
  background: var(--frame-img-bg);
}

.frame-empty {
  margin: 28px 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

.frame img:not(.hidden) ~ .frame-empty,
.frame:has(img:not(.hidden)) .frame-empty {
  display: none;
}

/* Status line */
.status-line {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.status-line.visible {
  display: flex;
}

.status-line__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet);
  animation: pulse 1.2s ease infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}

/* Buttons — DazeLink style */
.bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.bar--cta .btn-accent {
  flex: none;
  width: 100%;
}

.bar--split {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr;
  gap: var(--space-sm);
  align-items: center;
}

.bar--split .btn-text {
  justify-self: start;
  min-height: 48px;
  padding: 10px 4px 10px 0;
}

.bar--split .btn-accent {
  flex: none;
  width: 100%;
  min-width: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--radius-lg);
  border: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:not(:disabled):hover {
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: 0.78;
  cursor: not-allowed;
  transform: none;
}

.btn-accent {
  color: var(--on-gradient);
  background: var(--gradient);
  box-shadow: var(--shadow-btn);
}

.btn-accent:not(:disabled):hover {
  box-shadow: var(--shadow-btn-active);
}

.btn-outline {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
}

.btn-outline:not(:disabled):hover {
  border-color: var(--effect-hover-border);
  background: var(--surface-hover);
}

.bar:not(.bar--split):not(.bar--cta) .btn-accent {
  flex: 1 1 auto;
  min-width: 140px;
}

.btn-text {
  min-height: auto;
  padding: 8px 0;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9375rem;
}

.btn-text:not(:disabled):hover {
  color: var(--text);
  transform: none;
}

.seo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.test-banner {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 8px 12px;
  margin-bottom: var(--space-md);
  border-radius: 12px;
  background: var(--test-banner-bg);
  border: 1px solid var(--test-banner-border);
  color: var(--status-ready-color);
}

.consent {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 42em;
}

.consent a {
  color: var(--cyan);
}

.error-line {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  font-size: 0.875rem;
}

.foot {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

.foot-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0 0 12px;
  max-width: 100%;
}

.foot-nav a {
  display: block;
  min-width: 0;
  color: var(--muted);
  text-decoration: none;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.35;
}

.foot-nav a:hover {
  color: var(--cyan);
}

.foot-copy {
  margin: 0;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.9;
}

/* FAQ: в разметке для SEO и перелинковки; визуально скрыт через .seo-sr */
.faq.seo-sr {
  white-space: normal;
}

.hidden {
  display: none !important;
}

/* ——— Адаптивность: телефоны, планшеты, десктоп ——— */

@media (max-width: 380px) {
  .page {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .top {
    flex-wrap: wrap;
    margin-bottom: 28px;
    gap: 10px 12px;
  }

  .brand-tag {
    font-size: 0.75rem;
  }

  .status {
    margin-left: auto;
    font-size: 0.6875rem;
    padding: 5px 10px;
  }

  .flow {
    margin-bottom: 28px;
  }

  .flow-line {
    min-width: 12px;
    margin: 0 6px;
  }

  .flow-num {
    width: 32px;
    height: 32px;
  }

  .view-title {
    font-size: 1.25rem;
  }

  .view-lead {
    margin-bottom: 20px;
    font-size: 0.875rem;
  }

  .effect-list {
    grid-template-columns: 1fr;
  }

  .effect-btn {
    min-height: 64px;
    padding: 12px 14px;
  }

  .effect-btn--hero {
    min-height: 76px;
  }

  .drop {
    padding: 32px 16px;
  }

  .btn {
    min-height: 48px;
    font-size: 0.9375rem;
  }

  .bar--split {
    grid-template-columns: 1fr;
  }

  .bar--split .btn-accent {
    order: -1;
  }

  .bar--split .btn-text {
    text-align: center;
    padding: 10px 8px;
  }
}

@media (max-width: 479px) {
  .top {
    align-items: flex-start;
  }

  /* Только flex-бары; grid (.bar--split) не трогаем */
  .bar:not(.bar--split) {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .bar--cta .btn-accent {
    width: 100%;
    min-width: 0;
  }

  .bar--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bar--split .btn-text {
    justify-self: stretch;
    text-align: center;
    padding: 10px 8px;
  }

  .bar .btn-accent,
  .bar .btn-outline {
    width: 100%;
    flex: none;
  }

  #resultActions.bar {
    display: flex;
    flex-direction: column;
  }

  .consent {
    max-width: none;
    font-size: 0.75rem;
  }

}

@media (min-width: 520px) {
  .foot-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 381px) and (max-width: 599px) {
  .effect-list:not(.effect-list--popular) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .effect-list--popular {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 600px) {
  .bar--cta {
    justify-content: flex-start;
  }

  .bar--cta .btn-accent {
    width: auto;
    min-width: var(--content-actions);
    max-width: 100%;
  }

  .bar--split {
    grid-template-columns: 1fr 1.25fr;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .page {
    max-width: 640px;
    padding-top: max(28px, env(safe-area-inset-top, 0px));
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
    padding-bottom: max(48px, env(safe-area-inset-bottom, 0px));
  }

  .top {
    margin-bottom: var(--space-xl);
  }

  .brand-logo {
    height: 40px;
    max-width: 220px;
  }

  .brand-tag {
    font-size: 0.875rem;
  }

  .effect-list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }

  .effect-list--popular {
    gap: 12px;
  }

  .previews,
  .compare {
    gap: 16px;
  }

  .frame img {
    max-height: min(50vh, 320px);
  }
}

@media (min-width: 1024px) {
  .page {
    max-width: 680px;
  }

  .flow {
    margin-bottom: var(--space-xl);
  }

  .flow-step {
    font-size: 0.9375rem;
  }
}

@media (min-width: 1280px) {
  .page {
    max-width: 720px;
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .page {
    padding-top: 12px;
    padding-bottom: 24px;
  }

  .top {
    margin-bottom: 20px;
  }

  .flow {
    margin-bottom: 20px;
  }

  .ambient {
    opacity: 0.6;
  }
}

@media (hover: none) and (pointer: coarse) {
  .effect-btn:hover,
  .btn:not(:disabled):hover,
  .drop:hover {
    transform: none;
  }

  .effect-btn:active,
  .btn:not(:disabled):active {
    transform: scale(0.98);
  }

  .flow-step:not(:disabled) {
    min-height: 44px;
    padding: 4px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view.active {
    animation: none;
  }

  .status-line__dot {
    animation: none;
  }

  .effect-btn,
  .btn,
  .drop {
    transition-duration: 0.01ms;
  }
}