:root{ --brand:#156055; --fg:#156055; --muted:#5a6a67; --line:#e6eceb; --bg:#fff }
    #wizard *{ box-sizing:border-box; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial }
    #wizard{ max-width: 1060px; margin: 24px auto; border:1px solid var(--line); border-radius:16px; background:var(--bg); overflow:hidden; box-shadow: 0 8px 24px rgba(21,96,85,.08) }

    /* ===== Header + Progress bar ===== */
    #wizard .hdr{ padding:16px 20px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:10px }
    #wizard h3{ margin:0; font-size:18px; font-weight:800; letter-spacing:.2px; color:var(--fg) }
    #wizard .hdr-row{ display:flex; align-items:center; justify-content:space-between }
    #wizard .progress{ font-size:12px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.08em }
    .pbar{ height:4px; background:#eef4f3; border-radius:3px; overflow:hidden }
    .pbar .fill{ height:100%; width:0; background:var(--brand); transition: width .45s ease }

    /* ===== Steps ===== */
    .steps{ position:relative; min-height: 340px }
    .step{ padding:20px; opacity:0; transform:scale(.985) translateY(6px); transition: opacity .28s ease, transform .28s ease }
    .step.active{ opacity:1; transform:scale(1) translateY(0) }

    /* ===== Grid of options (text-only for max compatibility) ===== */
    .grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin-top:12px }
    @media (max-width: 560px){ .grid{ grid-template-columns: 1fr } }
    .opt{ position:relative; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; padding-left: 15px; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px; transition: border-color .2s ease, box-shadow .25s ease, transform .18s cubic-bezier(.2,.8,.2,1) }
    .opt:hover{ border-color:#d5e5e2; transform:translateY(-1px) scale(1.015); box-shadow:0 8px 22px rgba(21,96,85,.12) }
    .opt.active{ border-color:var(--brand); box-shadow:0 10px 28px rgba(21,96,85,.14), 0 0 0 3px rgba(21,96,85,.12); transform:translateY(-1px) scale(1.02) }
    .opt input{ position:absolute; inset:0; opacity:0; pointer-events:none }
    .opt .t{ font-weight:800; color:var(--fg) }

    /* ===== Navigation ===== */
    .nav{ display:flex; justify-content:space-between; gap:10px; padding:14px 20px; border-top:1px solid var(--line); background:#fff }
    .btn{ appearance:none; border:1px solid var(--line); background:#fff; padding:10px 14px; border-radius:10px; font-weight:800; cursor:pointer; color:var(--fg); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease }
    .btn:hover{ transform: translateY(-2px); box-shadow:0 8px 18px rgba(21,96,85,.15) }
    .btn:active{ transform: scale(.97) }
    .btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand) }
    .btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none }

    /* ===== Boxes & form ===== */
    .split{ display:grid; grid-template-columns: 1.1fr .9fr; gap:16px }
    @media (max-width: 900px){ .split{ grid-template-columns: 1fr } }
    .box{ border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff }

    .muted{ font-size:12px; color:#5a6a67 }
    .ok{ color:#0c3b34; font-weight:800 }

    /* ===== Thank-you animation ===== */
    .thanks{ display:flex; gap:14px; align-items:center }
    .check{ width:38px; height:38px }
    .check circle{ stroke: var(--brand); stroke-width:3; fill:none }
    .check path{ stroke: var(--brand); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 600ms ease forwards 200ms }
    @keyframes draw { to { stroke-dashoffset: 0; } }

    /* Gold accent for 10% on thank-you */
    .gold{ background: linear-gradient(90deg,#CDAA7D,#F5D28E,#CDAA7D); -webkit-background-clip:text; background-clip:text; color:transparent }
    .twinkle .num{ display:inline-block; animation: pulse10 1200ms ease-out 1 120ms }
    @keyframes pulse10{ 0%{ transform: scale(.92); filter: drop-shadow(0 0 0 rgba(245,210,142,0)); }
      55%{ transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(245,210,142,.55)); }
      100%{ transform: scale(1); filter: drop-shadow(0 0 0 rgba(245,210,142,0)); } }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .step{ transition:none }
      .opt{ transition:none }
      .btn{ transition:none }
      .pbar .fill{ transition:none }
      .check path{ animation:none }
    }
    /* === Версия 3.1: фото 112x112 на шаге 1 === */
    #step1 .opt{ display:grid; grid-template-columns: 112px 1fr; height: 80px; align-items:center }
    #step1 .thumb{ width:112px; height:75px; border-radius:10px; overflow:hidden; background:#f2f4f4; border:1px solid var(--line) }
    #step1 .thumb img{ width:100%; height:100%; object-fit:cover; display:block }