/* ================================================================
   ДЫХАТЕЛЬНАЯ ГИМНАСТИКА ВИМА ХОФА
   ================================================================ */

.wh-root { padding: 28px 32px; }

/* ---------- Предупреждение ---------- */
.wh-warning {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    background: #FFF8E1;
    border: 2px solid #FFA000;
    border-radius: 16px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.6;
    color: #1A1420;
}

.wh-warning__icon { font-size: 28px; flex-shrink: 0; line-height: 1; }

/* ---------- Экраны ---------- */
.wh-screen {
    animation: whFadeIn .4s ease;
}

@keyframes whFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Введение ---------- */
.wh-intro {
    text-align: center;
    padding: 40px 20px;
    max-width: 640px;
    margin: 0 auto;
}

.wh-intro__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 32px;
    color: #2A1745;
    margin: 0 0 16px;
}

.wh-intro__desc {
    font-size: 16px;
    line-height: 1.7;
    color: #6B6470;
    margin: 0 0 32px;
}

.wh-intro__buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Цикл ---------- */
.wh-cycle__header {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: #6B6470;
    margin-bottom: 24px;
}

.wh-cycle__header strong { color: #6B3FA0; font-size: 18px; }

.wh-phase {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.wh-phase__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 26px;
    color: #2A1745;
    margin: 0 0 12px;
}

.wh-phase__desc {
    font-size: 15px;
    line-height: 1.7;
    color: #6B6470;
    margin: 0 0 28px;
}

/* ---------- Счётчик вдохов ---------- */
.wh-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
}

.wh-counter__num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 72px;
    font-weight: 700;
    color: #6B3FA0;
    line-height: 1;
}

.wh-counter__label {
    font-size: 14px;
    color: #6B6470;
    margin-top: 8px;
}

/* ---------- Таймеры ---------- */
.wh-timer {
    font-family: 'JetBrains Mono', monospace;
    font-size: 96px;
    font-weight: 700;
    color: #2A1745;
    line-height: 1;
    margin-bottom: 28px;
    letter-spacing: -.02em;
}

.wh-timer--small { font-size: 64px; color: #6B3FA0; }

/* ---------- Кнопки ---------- */
.wh-btn {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 14px;
    border: none;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
}

.wh-btn--primary {
    background: linear-gradient(135deg, #6B3FA0 0%, #2A1745 100%);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(107, 63, 160, .6);
}

.wh-btn--primary:hover { transform: translateY(-2px); }

.wh-btn--danger {
    background: #E53935;
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(229, 57, 53, .6);
}

.wh-btn--ghost {
    background: #fff;
    color: #2A1745;
    border: 2px solid #E8E2DA;
}

.wh-btn--ghost:hover { border-color: #6B3FA0; color: #6B3FA0; }

/* ---------- Результаты ---------- */
.wh-results {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.wh-results__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 900;
    font-size: 32px;
    color: #2A1745;
    margin: 0 0 24px;
}

.wh-results__stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: #6B6470;
}

/* ---------- Сертификат ---------- */
.wh-certificate {
    padding: 32px;
    background: linear-gradient(135deg, #FAF0FB 0%, #F1E0F5 100%);
    border: 3px solid #6B3FA0;
    border-radius: 20px;
    margin-bottom: 32px;
}

.wh-certificate__inner h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    color: #6B3FA0;
    margin: 0 0 16px;
}

.wh-certificate__inner p {
    font-size: 15px;
    line-height: 1.7;
    margin: 4px 0;
    color: #1A1420;
}

.wh-certificate__slogan {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    color: #6B3FA0;
    margin-top: 18px !important;
    font-weight: 700;
}

.wh-results__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Памятка ---------- */
.wh-reminder { margin-top: 32px; }

.wh-details {
    border: 1.5px solid #E8E2DA;
    border-radius: 14px;
    overflow: hidden;
    background: #FAF6F0;
}

.wh-details summary {
    padding: 16px 20px;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #2A1745;
    list-style: none;
}

.wh-details summary::-webkit-details-marker { display: none; }

.wh-details__body {
    padding: 0 20px 20px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #1A1420;
}

.wh-details__body ul { padding-left: 20px; margin: 10px 0; }
.wh-details__body li { margin-bottom: 6px; }

/* ---------- Адаптив ---------- */
@media (max-width: 640px) {
    .wh-root { padding: 18px 14px; }
    .wh-timer { font-size: 64px; }
    .wh-counter__num { font-size: 56px; }
    .wh-phase__title { font-size: 22px; }
}

/* ---------- Ввод имени после практики ---------- */
.wh-name-step {
    max-width: 520px;
    margin: 0 auto 32px;
    padding: 28px 24px;
    background: #FAF6F0;
    border: 2px solid #E8E2DA;
    border-radius: 18px;
    text-align: center;
}

.wh-name-step__text {
    font-size: 15px;
    line-height: 1.6;
    color: #6B6470;
    margin: 0 0 16px;
}

.wh-name-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #E8E2DA;
    border-radius: 14px;
    background: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    color: #1A1420;
    text-align: center;
    margin-bottom: 14px;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.wh-name-input:focus {
    outline: none;
    border-color: #6B3FA0;
    box-shadow: 0 0 0 3px rgba(107, 63, 160, .12);
}

.wh-name-input--error {
    border-color: #E53935;
    animation: whShake .3s ease;
}

@keyframes whShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

.wh-certificate-wrap {
    animation: whFadeIn .4s ease;
}