body {
        font-family: 'Inter', sans-serif;
        background: radial-gradient(circle at top right, #fdfcff, #f8fafc);
        min-height: 100vh;
        color: #1e293b;
    }

    /* AI LOADER */
    #ai-loader {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(15px);
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .loader-brain {
        position: relative;
        width: 100px;
        height: 100px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        box-shadow: 0 15px 35px rgba(124, 58, 237, 0.2);
    }

    .loader-ring {
        position: absolute;
        inset: -8px;
        border: 4px solid #f1f5f9;
        border-top-color: #7c3aed;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .progress-w {
        width: 240px;
        height: 6px;
        background: #f1f5f9;
        border-radius: 10px;
        margin-top: 30px;
        overflow: hidden;
    }

    .progress-inner {
        width: 0%;
        height: 100%;
        background: linear-gradient(90deg, #7c3aed, #a855f7);
        transition: width 1.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Чипсы */
    .ai-chip {
        padding: 14px 24px;
        border-radius: 1.5rem;
        font-size: 16px;
        font-weight: 700;
        color: #334155;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: 2px solid #f1f5f9;
        background: #fff;
        transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), background-color 0.25s;
    }
    .ai-chip:hover {
        transform: translateY(-3px) scale(1.03);
        background: #f0f4f8;
        border-color: #cbd5e1;
        box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    }
    .ai-chip.active {
        background: #7c3aed;
        color: #fff;
        border-color: #7c3aed;
        box-shadow: 0 16px 32px rgba(124,58,237,0.3);
        transform: translateY(-3px) scale(1.05);
    }

    .group-label {
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: #64748b;
        display: block;
        margin-bottom: 12px;
        margin-left: 4px;
    }

    .step-enter {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeSlideUp 0.5s forwards ease-out;
    }
    @keyframes fadeSlideUp {
        to { opacity: 1; transform: translateY(0); }
    }

    button[type="submit"] {
        position: relative;
        overflow: hidden;
        background: #111827;
        color: white;
        border-radius: 2.25rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.25em;
        font-size: 0.875rem;
        padding: 1.75rem 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    button[type="submit"]:hover {
        background: #7c3aed;
        box-shadow: 0 12px 28px rgba(124,58,237,0.3);
    }

    #event-section, #budget-section {
        display: none;
        opacity: 0;
    }

    #selection-feedback {
        margin-top: 1rem;
        font-weight: 700;
        color: #7c3aed;
        text-align: center;
        min-height: 1.5rem;
    }

    @media (max-width: 768px) {
          /* Увеличиваем чипсы, чтобы по ним было легче попасть */
          .ai-chip { font-size: 16px; padding: 14px 22px; }
      }

    @media (max-width: 480px) {
          #ai-loader { padding: 1.5rem; }
          .loader-brain { width: 80px; height: 80px; font-size: 32px; }
          .progress-w { width: 220px; height: 6px; } /* Делаем полоску чуть заметнее */

          /* ЧИПСЫ: 14px - это минимум для комфортного чтения */
          .ai-chip { font-size: 16px; padding: 12px 18px; }

          /* КНОПКА: 0.75rem (12px) - очень мелко. Поднимаем до 1rem (16px) */
          button[type="submit"] {
              padding: 1rem 0;
              font-size: 1rem;
              font-weight: 600; /* Добавим жирности для читаемости */
              letter-spacing: 0.5px;
          }

          /* ТЕКСТ ПОДСКАЗОК: 14px (0.875rem) вместо 12px */
          #selection-feedback {
              font-size: 0.875rem;
              line-height: 1.4;
          }
      }

/* --- МУЖСКОЙ ВЕКТОР --- */
.chip-muzh, .chip-papa, .chip-paren, .chip-drug, .chip-malchik {
    border-color: rgba(8, 122, 234, 0.4);
    background-color: rgba(8, 122, 234, 0.05); /* Легкий оттенок */
    color: #1e293b;
}

.chip-muzh:hover, .chip-papa:hover, .chip-paren:hover, .chip-drug:hover, .chip-malchik:hover,
.chip-muzh.active, .chip-papa.active, .chip-paren.active, .chip-drug.active, .chip-malchik.active  {
    background-color: #087aea;
    border-color: #087aea;
    color: white;
}

.chip-zhena, .chip-mama, .chip-devushka, .chip-podruga, .chip-devochka  {
    border-color: rgba(214, 111, 126, 0.4);
    background-color: rgba(214, 111, 126, 0.05);
    color: #1e293b;
}

.chip-zhena:hover, .chip-mama:hover, .chip-devushka:hover, .chip-podruga:hover, .chip-devochka:hover,
.chip-zhena.active, .chip-mama.active, .chip-devushka.active, .chip-podruga.active , .chip-devochka.active {
    background-color: #d66f7e;
    border-color: #d66f7e;
    color: white;
}


.chip-rodstvenniki, .chip-kollega {
    border-color: rgba(61, 109, 175, 0.2);
    background-color: rgb(255, 255, 255);
    color: #475569;
}

.chip-rodstvenniki:hover, .chip-kollega:hover,
.chip-rodstvenniki.active, .chip-kollega.active {
    background-color: #475569;
    border-color: #475569;
    color: white;
}