/* ============================================================================
 * styles.css — Marketing Maslahatchi Mini App
 * Палитра: голубой (акцент/прогресс), зелёный (выбор/успех), белый (фон)
 * ========================================================================== */

:root {
  --blue:        #2D7FF9;
  --blue-dark:   #1B5FD0;
  --blue-soft:   #EAF2FE;
  --green:       #1FA971;
  --green-dark:  #16855A;
  --green-soft:  #E6F6EF;
  --white:       #FFFFFF;
  --ink:         #1A2233;
  --ink-soft:    #5A6577;
  --border:      #E2E6ED;
  --bg:          #F5F7FA;
  --danger:      #E0533D;
  --radius:      14px;
  --radius-sm:   10px;
}

/* Тёмная тема Telegram — мягкая адаптация, без слепящего белого */
@media (prefers-color-scheme: dark) {
  :root {
    --white:    #1E2430;
    --ink:      #ECEFF4;
    --ink-soft: #9AA4B5;
    --border:   #333B4A;
    --bg:       #151A23;
    --blue-soft:#1C2B44;
    --green-soft:#15302492;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

#app { height: 100%; display: flex; flex-direction: column; }

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ─────────────────────────── INTRO ──────────────────────────────────────── */

#intro-screen {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  gap: 8px;
}

.intro-logo {
  width: 76px; height: 76px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--blue), var(--green));
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  margin-bottom: 12px;
}

.intro-title {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
}

.intro-sub {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 320px;
  margin: 8px 0 4px;
}

.intro-points {
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 12px 0 20px;
  max-width: 340px;
  width: 100%;
}

.intro-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 0;
}

.intro-point .dot {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}

/* ─────────────────────────── FORM ───────────────────────────────────────── */

#form-screen { display: none; }

.progress-wrap {
  padding: 16px 20px 8px;
  flex-shrink: 0;
}

.progress-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 3px;
  width: 0%;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-label {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 8px;
  font-weight: 600;
}

.step-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 20px;
}

.step { will-change: transform, opacity; }

.step-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.32;
  margin-bottom: 6px;
}

.step-hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  line-height: 1.45;
}

.text-input {
  width: 100%;
  padding: 15px 16px;
  font-size: 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
}
.text-input:focus { border-color: var(--blue); }

.options {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 6px;
}

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  font-size: 15px;
  text-align: left;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.08s;
}
.option:active { transform: scale(0.99); }

.option-text { flex: 1; line-height: 1.4; }

.option-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  color: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.18s;
}

.option.selected {
  border-color: var(--green);
  background: var(--green-soft);
}
.option.selected .option-check {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

/* ─────────────────────── Анимации переходов ─────────────────────────────── */

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-28px); }
}
@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(28px); }
}
.slide-in-right  { animation: slideInRight 0.22s ease both; }
.slide-in-left   { animation: slideInLeft 0.22s ease both; }
.slide-out-left  { animation: slideOutLeft 0.16s ease both; }
.slide-out-right { animation: slideOutRight 0.16s ease both; }

/* ─────────────────────────── Кнопки ─────────────────────────────────────── */

.controls {
  flex-shrink: 0;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.08s;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  flex: 1;
  padding: 15px;
  background: var(--blue);
  color: #fff;
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-ghost {
  padding: 15px 16px;
  background: transparent;
  color: var(--ink-soft);
  border: 2px solid var(--border);
}

.btn-skip {
  display: none;
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  background: transparent;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

#start-btn {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  font-size: 16px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
}

/* ─────────────────────────── RESULT ─────────────────────────────────────── */

#result-screen {
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 28px;
  gap: 6px;
}

.result-icon {
  font-size: 64px;
  margin-bottom: 8px;
}

.result-title {
  font-size: 22px;
  font-weight: 700;
}

.result-text {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 320px;
  margin-top: 6px;
}

.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--blue-soft);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 4px 0;
}
@keyframes spin { to { transform: rotate(360deg); } }