:root {
  --blue: #11a7ff;
  --blue-dark: #0b87cf;
  --dark: #0f172a;
  --text: #1e293b;
  --muted: #64748b;
  --white: #ffffff;
  --border: #dbe7f0;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;
  --success-text: #065f46;
  --warn-bg: #fff7ed;
  --warn-border: #fdba74;
  --warn-text: #9a3412;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', sans-serif; background: linear-gradient(180deg, #f8fbff 0%, #ffffff 50%, #f3faff 100%); color: var(--text); }
.page { min-height: 100vh; padding: 32px 16px; }
.hero { max-width: 960px; margin: 0 auto; }
.hero__top { margin-bottom: 24px; }
.badge { display: inline-block; background: rgba(17, 167, 255, 0.12); color: var(--blue-dark); font-weight: 700; font-size: 12px; border-radius: 999px; padding: 8px 12px; margin-bottom: 12px; }
h1 { margin: 0 0 10px; font-size: 42px; line-height: 1.05; color: var(--dark); }
h2 { margin: 0 0 8px; font-size: 28px; color: var(--dark); }
p { margin: 0; }
.muted { color: var(--muted); margin-bottom: 18px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.step { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; font-weight: 600; color: var(--muted); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); }
.step.active { border-color: var(--blue); color: var(--blue-dark); background: #f0f9ff; }
.card { background: var(--white); border-radius: 28px; padding: 28px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08); border: 1px solid rgba(219, 231, 240, 0.8); }
.hidden { display: none; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
label { font-size: 14px; font-weight: 600; color: var(--text); }
input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; font-size: 15px; font-family: inherit; outline: none; background: var(--white); }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(17, 167, 255, 0.12); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.btn { appearance: none; border: 0; text-decoration: none; border-radius: 16px; padding: 14px 22px; font-weight: 700; cursor: pointer; transition: 0.2s ease; font-size: 15px; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-outline { background: #fff; color: var(--text); border: 1px solid var(--border); }
.autocomplete { position: relative; }
.autocomplete-list { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1); z-index: 20; overflow: hidden; }
.autocomplete-item { padding: 14px 16px; cursor: pointer; border-bottom: 1px solid #eef4f8; }
.autocomplete-item:last-child { border-bottom: 0; }
.autocomplete-item:hover { background: #f8fbff; }
.availability { border-radius: 22px; padding: 18px; border: 1px solid; margin: 18px 0; }
.availability.success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.availability.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.form-message { margin-top: 16px; font-weight: 600; }
.form-message.success { color: var(--success-text); }
.form-message.error { color: #b91c1c; }
@media (max-width: 768px) { h1 { font-size: 32px; } h2 { font-size: 24px; } .steps, .grid { grid-template-columns: 1fr; } .card { padding: 22px; } }