/* ═══════════════════════════════════════════════════
   Ректификация — rectification.css v1.0
   Quantum Life Guide
═══════════════════════════════════════════════════ */

/* ─── Заголовок ───────────────────────────────────── */
.rec-subtitle { font-size:1.05em; color:#a0aec0; margin-top:8px; }
.required      { color:#fc8181; }

/* ─── Wizard wrapper ──────────────────────────────── */
.rec-wizard-wrapper { max-width:820px; margin:0 auto; }

/* ─── Прогресс ────────────────────────────────────── */
.rec-progress {
  height:4px; background:rgba(255,255,255,0.08);
  border-radius:2px; margin-bottom:24px; overflow:hidden;
}
.rec-progress-bar {
  height:100%; background:linear-gradient(90deg,#667eea,#f093fb);
  border-radius:2px; transition:width 0.4s ease;
}

.rec-steps-nav {
  display:flex; align-items:center; justify-content:center;
  gap:0; margin-bottom:36px;
}
.rec-step-dot {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:2px solid rgba(255,255,255,0.15);
  color:#718096; font-size:0.9em; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.3s ease; flex-shrink:0;
}
.rec-step-dot.active  { background:rgba(102,126,234,0.25); border-color:#667eea; color:#667eea; }
.rec-step-dot.done    { background:rgba(104,211,145,0.2);  border-color:#68d391; color:#68d391; }
.rec-step-line { flex:1; height:2px; background:rgba(255,255,255,0.08); max-width:80px; }

/* ─── Шаги ────────────────────────────────────────── */
.rec-step { display:none; animation:fadeIn 0.3s ease; }
.rec-step.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.rec-step-header {
  display:flex; align-items:flex-start; gap:16px;
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.rec-step-icon  { font-size:2.2em; line-height:1; }
.rec-step-title { font-size:1.3em; font-weight:700; color:#f093fb; margin:0 0 4px; }
.rec-step-desc  { font-size:0.88em; color:#718096; margin:0; }

/* ─── Поля ────────────────────────────────────────── */
.rec-fields-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:16px; margin-bottom:20px;
}

/* ─── Приблизительное время ───────────────────────── */
.rec-time-options {
  display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;
}
.rec-time-opt {
  display:flex; align-items:center; gap:8px;
  padding:10px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; cursor:pointer; font-size:0.88em;
  transition:all 0.2s ease; user-select:none; color:#e2e8f0;
}
.rec-time-opt:has(input:checked),
.rec-time-opt.active {
  background:rgba(102,126,234,0.15);
  border-color:#667eea; color:#a5b4fc;
}
.rec-time-opt input { display:none; }

/* ─── Родители ────────────────────────────────────── */
.rec-parent-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:16px;
}
.rec-parent-card {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:20px;
}
.rec-parent-label {
  font-size:1em; font-weight:700; color:#f093fb;
  margin-bottom:14px;
}
.rec-optional-note {
  padding:12px 16px;
  background:rgba(236,201,75,0.08);
  border:1px solid rgba(236,201,75,0.2);
  border-radius:10px; font-size:0.85em; color:#ecc94b;
  margin-bottom:20px;
}

/* ─── События ─────────────────────────────────────── */
.rec-event-card {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:16px 20px;
  margin-bottom:12px;
  display:grid; grid-template-columns:1.6fr 0.8fr 0.8fr 1.2fr 36px;
  gap:12px; align-items:end;
  animation:fadeIn 0.25s ease;
}
.rec-add-event-btn {
  width:100%; padding:12px;
  background:rgba(102,126,234,0.1);
  border:2px dashed rgba(102,126,234,0.4);
  border-radius:12px; color:#667eea;
  font-size:0.95em; font-weight:600; cursor:pointer;
  margin-bottom:16px; transition:all 0.2s ease;
}
.rec-add-event-btn:hover { background:rgba(102,126,234,0.2); border-color:#667eea; }
.rec-event-remove-btn {
  width:32px; height:32px; border-radius:50%;
  background:rgba(252,129,129,0.15); border:1px solid rgba(252,129,129,0.3);
  color:#fc8181; cursor:pointer; font-size:0.85em; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s ease; align-self:flex-end;
}
.rec-event-remove-btn:hover { background:rgba(252,129,129,0.3); }
.rec-events-hint {
  padding:12px 16px;
  background:rgba(102,211,145,0.06);
  border:1px solid rgba(102,211,145,0.15);
  border-radius:10px; font-size:0.82em; color:#a0aec0;
  margin-bottom:20px;
}

/* ─── Психотест ───────────────────────────────────── */
.rec-psych-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px;
}
.rec-psych-card {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:16px 18px;
}
.rec-q-label {
  font-size:0.88em; font-weight:600; color:#e2e8f0;
  margin-bottom:12px;
}
.rec-q-options { display:flex; flex-direction:column; gap:8px; }
.rec-q-opt {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:8px; cursor:pointer; font-size:0.82em; color:#a0aec0;
  transition:all 0.2s ease; user-select:none;
}
.rec-q-opt:has(input:checked) {
  background:rgba(102,126,234,0.15);
  border-color:rgba(102,126,234,0.4); color:#c3cffe;
}
.rec-q-opt input { display:none; }

/* ─── Внешность + экстра ──────────────────────────── */
.rec-appear-grid, .rec-extra-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px;
}

/* ─── Дисклеймер ──────────────────────────────────── */
.rec-disclaimer {
  padding:14px 18px;
  background:rgba(252,129,129,0.07);
  border:1px solid rgba(252,129,129,0.2);
  border-radius:12px; font-size:0.85em; color:#feb2b2;
  margin-bottom:24px;
}

/* ─── Навигация ───────────────────────────────────── */
.rec-nav-btns {
  display:flex; justify-content:space-between;
  align-items:center; margin-top:24px; gap:12px;
}
.rec-back-btn {
  padding:12px 24px; border-radius:12px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  color:#a0aec0; font-size:0.95em; font-weight:600; cursor:pointer;
  transition:all 0.2s ease;
}
.rec-back-btn:hover { background:rgba(255,255,255,0.1); color:#e2e8f0; }
.rec-next-btn {
  padding:12px 28px; border-radius:12px;
  background:linear-gradient(135deg,#667eea,#764ba2);
  border:none; color:#fff; font-size:0.95em; font-weight:700; cursor:pointer;
  transition:all 0.2s ease; box-shadow:0 4px 16px rgba(102,126,234,0.35);
}
.rec-next-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(102,126,234,0.5); }
.rec-submit-btn {
  padding:14px 32px; border-radius:14px;
  background:linear-gradient(135deg,#f093fb,#f5576c);
  border:none; color:#fff; font-size:1em; font-weight:700; cursor:pointer;
  transition:all 0.2s ease; box-shadow:0 4px 16px rgba(240,147,251,0.4);
}
.rec-submit-btn:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(240,147,251,0.55); }

/* ─── Загрузка ────────────────────────────────────── */
.rec-loading {
  max-width:820px; margin:0 auto; text-align:center;
  padding:80px 20px;
}

/* ─── Результаты ──────────────────────────────────── */
.rec-results { max-width:820px; margin:0 auto; }

.rec-summary-bar {
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding:16px 20px;
  background:rgba(102,126,234,0.08);
  border:1px solid rgba(102,126,234,0.2);
  border-radius:14px; margin-bottom:24px; font-size:0.88em;
}
.rec-summary-item { color:#a0aec0; }
.rec-summary-item strong { color:#e2e8f0; }
.rec-summary-sep { color:#4a5568; }

.rec-ai-block {
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:16px; padding:28px 32px;
  font-size:0.9em; line-height:1.75; color:#e2e8f0;
}
.rec-ai-block h4 {
  color:#f093fb; font-size:1.05em; font-weight:700;
  margin:22px 0 10px; padding-bottom:6px;
  border-bottom:1px solid rgba(240,147,251,0.15);
}
.rec-ai-block h4:first-child { margin-top:0; }
.rec-ai-block p  { margin:8px 0; color:#cbd5e0; }
.rec-ai-block ul { padding-left:20px; margin:8px 0; }
.rec-ai-block li { margin-bottom:6px; color:#a0aec0; }
.rec-ai-block strong { color:#e2e8f0; }

/* ─── Таблица вариантов ───────────────────────────── */
.rec-variants-table { width:100%; border-collapse:collapse; font-size:0.85em; }
.rec-variants-table th {
  text-align:left; padding:10px 12px; color:#718096;
  border-bottom:1px solid rgba(255,255,255,0.08);
  font-size:0.8em; text-transform:uppercase; letter-spacing:0.04em;
}
.rec-variants-table td { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.04); }
.rec-variants-table tr:hover td { background:rgba(255,255,255,0.02); }
.rec-var-incl { color:#68d391; font-size:0.85em; }
.rec-var-excl { color:#4a5568; font-size:0.8em; }
.rec-var-time  { color:#a0aec0; font-size:0.8em; }

/* ─── BaZi чарт ───────────────────────────────────── */
.rec-chart-pillars {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; margin-bottom:24px;
}
.rec-pillar-card {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:18px; text-align:center;
}
.rec-pillar-name  { font-size:0.75em; color:#718096; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }
.rec-pillar-stem  { font-size:1.3em; font-weight:700; margin-bottom:4px; }
.rec-pillar-branch{ font-size:1em; color:#a0aec0; margin-bottom:8px; }
.rec-pillar-el    { font-size:0.8em; padding:4px 10px; border-radius:20px; display:inline-block; }

.rec-chart-note {
  padding:14px 18px;
  background:rgba(236,201,75,0.08); border:1px solid rgba(236,201,75,0.2);
  border-radius:10px; font-size:0.85em; color:#ecc94b;
}

/* ─── Адаптив ─────────────────────────────────────── */
@media (max-width: 640px) {
  .rec-fields-grid   { grid-template-columns:1fr; }
  .rec-parent-grid   { grid-template-columns:1fr; }
  .rec-psych-grid    { grid-template-columns:1fr; }
  .rec-appear-grid, .rec-extra-grid { grid-template-columns:1fr; }
  .rec-event-card    { grid-template-columns:1fr 1fr; }
  .rec-event-card > *:nth-child(3) { grid-column:span 1; }
  .rec-event-card > *:nth-child(4) { grid-column:span 2; }
  .rec-event-card > *:nth-child(5) { grid-column:span 2; justify-self:end; }
  .rec-ai-block      { padding:18px 16px; }
  .rec-chart-pillars { grid-template-columns:1fr; }
}