<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Алименты-Расчёт — Калькулятор алиментов и раздела имущества при разводе 2025</title>
    <meta name="description" content="Бесплатный онлайн калькулятор алиментов и раздела имущества при разводе. Расчёт по Семейному кодексу РФ.">
    <link rel="stylesheet" href="/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <meta name="description" content="Бесплатный онлайн калькулятор алиментов и раздела имущества при разводе. Расчёт по Семейному кодексу РФ. Готовые исковые заявления. Подбор юриста.">
    <meta name="keywords" content="калькулятор алиментов, раздел имущества при разводе, расчёт алиментов онлайн, исковое заявление на алименты, раздел имущества супругов, семейный кодекс РФ, развод калькулятор, алименты на ребёнка">
    <meta name="author" content="Алименты-Расчёт">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#4F46E5">
    <link rel="canonical" href="https://алименты-расчет.рф/">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://алименты-расчет.рф/">
    <meta property="og:title" content="Алименты-Расчёт — Калькулятор алиментов и раздела имущества">
    <meta property="og:description" content="Бесплатный расчёт алиментов и раздела имущества при разводе. Готовые иски в суд. Подбор юриста.">
    <meta property="og:image" content="https://алименты-расчет.рф/og-image.png">
    <meta property="og:locale" content="ru_RU">
    <meta property="og:site_name" content="Алименты-Расчёт">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Алименты-Расчёт — Калькулятор алиментов и раздела имущества">
    <meta name="twitter:description" content="Бесплатный расчёт алиментов и раздела имущества при разводе. Готовые иски в суд.">
    <meta name="twitter:image" content="https://алименты-расчет.рф/og-image.png">

    <!-- Яндекс -->
    <meta name="yandex-verification" content="ВСТАВЬТЕ_КОД_ЯНДЕКС_ВЕБМАСТЕР">

    <!-- JSON-LD Schema -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "Алименты-Расчёт",
        "url": "https://алименты-расчет.рф",
        "description": "Калькулятор алиментов и раздела имущества при разводе по Семейному кодексу РФ",
        "applicationCategory": "FinanceApplication",
        "operatingSystem": "Web",
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "RUB",
            "description": "Бесплатный базовый расчёт"
        },
        "author": {
            "@type": "Organization",
            "name": "Алименты-Расчёт"
        }
    }
    </script>

    <!-- Яндекс.Метрика -->
    <!-- ЗАМЕНИТЕ 00000000 НА ВАШ НОМЕР СЧЁТЧИКА -->
    <!--
    <script type="text/javascript">
       (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
       m[i].l=1*new Date();
       for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
       k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
       ym(00000000, "init", {
            clickmap:true,
            trackLinks:true,
            accurateTrackBounce:true,
            webvisor:true
       });
    </script>
    <noscript><div><img src="https://mc.yandex.ru/watch/00000000" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
    -->
    <!-- /Яндекс.Метрика -->
</head>
<body>
    <div id="app">
        <!-- Хедер -->
        
        <header class="header">
            <div class="container">
                <div class="header-top">
                    <div class="logo">
                        <span class="logo-icon">⚖️</span>
                        <span class="logo-text">Алименты-Расчёт</span>
                    </div>

                    <div class="auth-buttons" id="auth-buttons">
                        <button class="btn btn-secondary" onclick="findLawyer()" style="margin-right:8px;background:#F59E0B;color:white;border:none">👨‍⚖️ Найти юриста</button>
                        <button class="btn btn-ghost" onclick="showAuthModal('login')">Войти</button>
                        <button class="btn btn-white-outline" onclick="showAuthModal('register')">Регистрация</button>
                    </div>

                    <div class="user-menu" id="user-menu" style="display:none;">
                        <button class="btn btn-secondary" onclick="findLawyer()" style="margin-right:8px;background:#F59E0B;color:white;border:none">👨‍⚖️ Найти юриста</button>
                        <span id="user-name"></span>
                        <button class="btn btn-ghost" onclick="showMyCalculations()">Мои расчёты</button>
                        <button class="btn btn-ghost" onclick="logout()">Выйти</button>
                    </div>
                </div>
                <p class="header-subtitle">Калькулятор алиментов и раздела имущества при разводе</p>
            </div>
        </header>

        <nav class="steps-nav">
            <div class="container">
                <div class="steps">
                    <div class="step active" data-step="1">
                        <div class="step-number">1</div>
                        <span>Общая информация</span>
                    </div>
                    <div class="step-line"></div>
                    <div class="step" data-step="2">
                        <div class="step-number">2</div>
                        <span>Дети</span>
                    </div>
                    <div class="step-line"></div>
                    <div class="step" data-step="3">
                        <div class="step-number">3</div>
                        <span>Алименты</span>
                    </div>
                    <div class="step-line"></div>
                    <div class="step" data-step="4">
                        <div class="step-number">4</div>
                        <span>Имущество</span>
                    </div>
                    <div class="step-line"></div>
                    <div class="step" data-step="5">
                        <div class="step-number">5</div>
                        <span>Долги</span>
                    </div>
                    <div class="step-line"></div>
                    <div class="step" data-step="6">
                        <div class="step-number">6</div>
                        <span>Итоги</span>
                    </div>
                </div>
            </div>
        </nav>

        <!-- Контент -->

        <main class="main">
            <div class="container">
                <!-- Шаг 1 -->
                <section class="step-content active" id="step-1">
                    <div class="card">
                        <h2 class="card-title">👤 Общая информация</h2>
                        <div class="two-columns">
                            <div class="column">
                                <h3 class="column-title spouse-1-title">Супруг 1</h3>
                                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px">
                                    <div class="form-group">
                                        <label>Фамилия</label>
                                        <input type="text" id="spouse1-surname" placeholder="Иванов">
                                    </div>
                                    <div class="form-group">
                                        <label>Имя</label>
                                        <input type="text" id="spouse1-name" placeholder="Иван">
                                    </div>
                                    <div class="form-group">
                                        <label>Отчество</label> 
                                        <input type="text" id="spouse1-patronymic" placeholder="Петрович">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Пол</label>
                                    <select id="spouse1-gender">
                                        <option value="male">Мужчина</option>
                                        <option value="female">Женщина</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Доход (₽/мес)</label>
                                    <input type="number" id="spouse1-income" placeholder="80000" min="0">
                                </div>
                                <div class="form-group">
                                    <label>Занятость</label>
                                    <select id="spouse1-employment">
                                        <option value="employed">Работает</option>
                                        <option value="self-employed">ИП / Самозанятый</option>
                                        <option value="unemployed">Не работает</option>
                                        <option value="disabled">Инвалидность</option>
                                        <option value="retired">Пенсионер</option>
                                    </select>
                                </div>
                            </div>
                            <div class="column">
                                <h3 class="column-title spouse-2-title">Супруг 2</h3>
                                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px">
                                    <div class="form-group">
                                        <label>Фамилия</label>
                                        <input type="text" id="spouse2-surname" placeholder="Иванова">
                                    </div>
                                    <div class="form-group">
                                        <label>Имя</label>
                                        <input type="text" id="spouse2-name" placeholder="Мария">
                                    </div>
                                    <div class="form-group">
                                        <label>Отчество</label>
                                        <input type="text" id="spouse2-patronymic" placeholder="Сергеевна">
                                    </div>  
                                </div>           
                                <div class="form-group">
                                    <label>Пол</label>
                                    <select id="spouse2-gender">
                                        <option value="female">Женщина</option>
                                        <option value="male">Мужчина</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Доход (₽/мес)</label>
                                    <input type="number" id="spouse2-income" placeholder="50000" min="0">
                                </div>
                                <div class="form-group">
                                    <label>Занятость</label>
                                    <select id="spouse2-employment">
                                        <option value="employed">Работает</option>
                                        <option value="self-employed">ИП / Самозанятый</option>
                                        <option value="unemployed">Не работает</option>
                                        <option value="disabled">Инвалидность</option>
                                        <option value="retired">Пенсионер</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Дата заключения брака</label>
                            <input type="date" id="marriage-date">
                        </div>
                        <div class="form-group">
                            <label>Брачный договор</label>
                            <div class="toggle-group">
                                <label class="toggle"><input type="radio" name="prenup" value="no" checked><span class="toggle-btn">Нет</span></label>
                                <label class="toggle"><input type="radio" name="prenup" value="yes"><span class="toggle-btn">Да</span></label>
                            </div>
                        </div>
                        <div class="form-group" id="prenup-details" style="display:none;">
                            <label>Условия брачного договора</label>
                            <textarea id="prenup-text" placeholder="Основные условия..."></textarea>
                        </div>
                        <div class="form-group">
                            <label>Регион</label>
                            <select id="region">
    <optgroup label="Города федерального значения">
        <option value="moscow">Москва</option>
        <option value="spb">Санкт-Петербург</option>
        <option value="sevastopol">Севастополь</option>
    </optgroup>
    <optgroup label="Центральный ФО">
        <option value="belgorod">Белгородская область</option>
        <option value="bryansk">Брянская область</option>
        <option value="vladimir">Владимирская область</option>
        <option value="voronezh">Воронежская область</option>
        <option value="ivanovo">Ивановская область</option>
        <option value="kaluga">Калужская область</option>
        <option value="kostroma">Костромская область</option>
        <option value="kursk">Курская область</option>
        <option value="lipetsk">Липецкая область</option>
        <option value="moskovskaya">Московская область</option>
        <option value="orel">Орловская область</option>
        <option value="ryazan">Рязанская область</option>
        <option value="smolensk">Смоленская область</option>
        <option value="tambov">Тамбовская область</option>
        <option value="tver">Тверская область</option>
        <option value="tula">Тульская область</option>
        <option value="yaroslavl">Ярославская область</option>
    </optgroup>
    <optgroup label="Северо-Западный ФО">
        <option value="arkhangelsk">Архангельская область</option>
        <option value="vologda">Вологодская область</option>
        <option value="kaliningrad">Калининградская область</option>
        <option value="karelia">Республика Карелия</option>
        <option value="komi">Республика Коми</option>
        <option value="leningradskaya">Ленинградская область</option>
        <option value="murmansk">Мурманская область</option>
        <option value="novgorod">Новгородская область</option>
        <option value="pskov">Псковская область</option>
    </optgroup>
    <optgroup label="Южный ФО">
        <option value="adygea">Республика Адыгея</option>
        <option value="astrakhan">Астраханская область</option>
        <option value="volgograd">Волгоградская область</option>
        <option value="kalmykia">Республика Калмыкия</option>
        <option value="krasnodar">Краснодарский край</option>
        <option value="crimea">Республика Крым</option>
        <option value="rostov">Ростовская область</option>
    </optgroup>
    <optgroup label="Северо-Кавказский ФО">
        <option value="dagestan">Республика Дагестан</option>
        <option value="ingushetia">Республика Ингушетия</option>
        <option value="kbr">Кабардино-Балкарская Республика</option>
        <option value="kchr">Карачаево-Черкесская Республика</option>
        <option value="osetia">Северная Осетия — Алания</option>
        <option value="chechnya">Чеченская Республика</option>
        <option value="stavropol">Ставропольский край</option>
    </optgroup>
    <optgroup label="Приволжский ФО">
        <option value="bashkortostan">Республика Башкортостан</option>
        <option value="kirov">Кировская область</option>
        <option value="mariel">Республика Марий Эл</option>
        <option value="mordovia">Республика Мордовия</option>
        <option value="nizhegorod">Нижегородская область</option>
        <option value="orenburg">Оренбургская область</option>
        <option value="penza">Пензенская область</option>
        <option value="perm">Пермский край</option>
        <option value="samara">Самарская область</option>
        <option value="saratov">Саратовская область</option>
        <option value="tatarstan">Республика Татарстан</option>
        <option value="udmurtia">Удмуртская Республика</option>
        <option value="ulyanovsk">Ульяновская область</option>
        <option value="chuvashia">Чувашская Республика</option>
    </optgroup>
    <optgroup label="Уральский ФО">
        <option value="kurgan">Курганская область</option>
        <option value="sverdlovsk">Свердловская область</option>
        <option value="tyumen">Тюменская область</option>
        <option value="chelyabinsk">Челябинская область</option>
        <option value="khmao">Ханты-Мансийский АО</option>
        <option value="yanao">Ямало-Ненецкий АО</option>
    </optgroup>
    <optgroup label="Сибирский ФО">
        <option value="altai-krai">Алтайский край</option>
        <option value="altai-rep">Республика Алтай</option>
        <option value="buryatia">Республика Бурятия</option>
        <option value="irkutsk">Иркутская область</option>
        <option value="kemerovo">Кемеровская область</option>
        <option value="krasnoyarsk">Красноярский край</option>
        <option value="novosibirsk">Новосибирская область</option>
        <option value="omsk">Омская область</option>
        <option value="tomsk">Томская область</option>
        <option value="tuva">Республика Тыва</option>
        <option value="khakassia">Республика Хакасия</option>
        <option value="zabaikal">Забайкальский край</option>
    </optgroup>
    <optgroup label="Дальневосточный ФО">
        <option value="amur">Амурская область</option>
        <option value="eao">Еврейская автономная область</option>
        <option value="kamchatka">Камчатский край</option>
        <option value="magadan">Магаданская область</option>
        <option value="primorsky">Приморский край</option>
        <option value="yakutia">Республика Саха (Якутия)</option>
        <option value="sakhalin">Сахалинская область</option>
        <option value="khabarovsk">Хабаровский край</option>
        <option value="chukotka">Чукотский АО</option>
    </optgroup>
</select>
                        </div>
                    </div>
                </section>

                <!-- Шаг 2: Дети -->
                <section class="step-content" id="step-2">
                    <div class="card">
                        <h2 class="card-title">👶 Дети</h2>
                        <div class="form-group">
                            <label>Несовершеннолетних детей</label>
                            <div class="counter">
                                <button class="counter-btn minus" onclick="changeChildCount(-1)">−</button>
                                <span id="child-count" class="counter-value">0</span>
                                <button class="counter-btn plus" onclick="changeChildCount(1)">+</button>
                            </div>
                        </div>
                        <div id="children-list"></div>
                        <div class="info-box" id="children-info" style="display:none;">
                            <div class="info-icon">ℹ️</div>
                            <div><strong>СК РФ:</strong> 1 ребёнок — 25%, 2 — 33%, 3+ — 50% дохода</div>
                        </div>
                    </div>
                </section>

                <!-- Шаг 3: Алименты -->
                <section class="step-content" id="step-3">
                    <div class="card">
                        <h2 class="card-title">💰 Алименты</h2>
                        <div class="form-group">
                            <label>Плательщик</label>
                            <select id="alimony-payer">
                                <option value="spouse1">Супруг 1</option>
                                <option value="spouse2">Супруг 2</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Способ</label>
                            <div class="toggle-group">
                                <label class="toggle"><input type="radio" name="alimony-type" value="percent" checked><span class="toggle-btn">% от дохода</span></label>
                                <label class="toggle"><input type="radio" name="alimony-type" value="fixed"><span class="toggle-btn">В твёрдой сумме</span></label>
                                <label class="toggle"><input type="radio" name="alimony-type" value="mixed"><span class="toggle-btn">% + твёрдая сумма</span></label>
                            </div>
                        </div>
                        <div id="alimony-percent-section">
                            <div class="alimony-result-preview">
                                <div class="preview-label">Процент:</div>
                                <div class="preview-value" id="alimony-percent-display">25%</div>
                                <div class="preview-label">Сумма в месяц:</div>
                                <div class="preview-value highlight" id="alimony-monthly-display">0 ₽</div>
                            </div>
                        </div>
                        <div id="alimony-fixed-section" style="display:none;">
                            <div class="form-group">
                                <label>Фиксированная сумма (₽/мес)</label>
                                <input type="number" id="alimony-fixed-amount" placeholder="0" min="0" oninput="this.dataset.autoSet='false'">
                                <small>Введите желаемую сумму или выберите долю ПМ ниже</small>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Доп. расходы на детей (₽/мес)</label>
                            <input type="number" id="extra-child-expenses" placeholder="0" min="0">
                            <small>Делятся пополам (ст. 86 СК РФ)</small>
                        </div>
                        <div class="divider"></div>
                        <h3>Алименты на супруга</h3>
                        <div class="form-group">
                            <div class="checkbox-group">
                                <label class="checkbox-label"><input type="checkbox" id="spouse-alimony-pregnancy"><span>Беременность / ребёнок до 3 лет</span></label>
                                <label class="checkbox-label"><input type="checkbox" id="spouse-alimony-disabled-child"><span>Ребёнок-инвалид</span></label>
                                <label class="checkbox-label"><input type="checkbox" id="spouse-alimony-disabled"><span>Нетрудоспособность</span></label>
                                <label class="checkbox-label"><input type="checkbox" id="spouse-alimony-retired"><span>Пенсионер</span></label>
                            </div>
                        </div>
                        <div class="form-group" id="spouse-alimony-amount-group" style="display:none;">
                            <label>Сумма на супруга (₽/мес)</label>
                            <input type="number" id="spouse-alimony-amount" placeholder="10000" min="0">
                        </div>
                        <div class="summary-box" id="alimony-summary">
                            <h3>📊 Сводка</h3>
                            <div class="summary-grid" id="alimony-summary-content"></div>
                        </div>
                    </div>
                </section>

                <!-- Шаг 4: Имущество -->
                <section class="step-content" id="step-4">
                    <div class="card">
                        <h2 class="card-title">🏠 Имущество</h2>
                        <div class="info-box">
                            <div class="info-icon">⚖️</div>
                            <div>Совместное имущество — <strong>50/50</strong>. До брака / дар / наследство — <strong>не делится</strong>.</div>
                        </div>
                        <div id="property-categories">
                            <div class="property-category" data-cat="realty">
                                <div class="category-header" onclick="toggleCategory('realty')"><span>🏢 Недвижимость</span><span class="category-total" id="realty-total">0 ₽</span><span class="chevron" id="realty-chevron">▼</span></div>
                                <div class="category-body" id="realty-body"><div id="realty-items"></div><button class="add-btn" onclick="addPropertyItem('realty')">+ Добавить</button></div>
                            </div>
                            <div class="property-category" data-cat="vehicles">
                                <div class="category-header" onclick="toggleCategory('vehicles')"><span>🚗 Транспорт</span><span class="category-total" id="vehicles-total">0 ₽</span><span class="chevron" id="vehicles-chevron">▼</span></div>
                                <div class="category-body" id="vehicles-body"><div id="vehicles-items"></div><button class="add-btn" onclick="addPropertyItem('vehicles')">+ Добавить</button></div>
                            </div>
                            <div class="property-category" data-cat="accounts">
                                <div class="category-header" onclick="toggleCategory('accounts')"><span>🏦 Вклады и счета</span><span class="category-total" id="accounts-total">0 ₽</span><span class="chevron" id="accounts-chevron">▼</span></div>
                                <div class="category-body" id="accounts-body"><div id="accounts-items"></div><button class="add-btn" onclick="addPropertyItem('accounts')">+ Добавить</button></div>
                            </div>
                            <div class="property-category" data-cat="business">
                                <div class="category-header" onclick="toggleCategory('business')"><span>💼 Бизнес</span><span class="category-total" id="business-total">0 ₽</span><span class="chevron" id="business-chevron">▼</span></div>
                                <div class="category-body" id="business-body"><div id="business-items"></div><button class="add-btn" onclick="addPropertyItem('business')">+ Добавить</button></div>
                            </div>
                            <div class="property-category" data-cat="other">
                                <div class="category-header" onclick="toggleCategory('other')"><span>📦 Прочее</span><span class="category-total" id="other-total">0 ₽</span><span class="chevron" id="other-chevron">▼</span></div>
                                <div class="category-body" id="other-body"><div id="other-items"></div><button class="add-btn" onclick="addPropertyItem('other')">+ Добавить</button></div>
                            </div>
                        </div>
                        <div class="summary-box">
                            <h3>📊 Имущество</h3>
                            <div class="property-summary-visual">
                                <div class="bar-chart"><div class="bar-label">Совместное</div><div class="bar-container"><div class="bar bar-joint" id="bar-joint" style="width:0%"><span id="bar-joint-value">0 ₽</span></div></div></div>
                                <div class="split-visual">
                                    <div class="split-half"><div class="split-label" id="split-spouse1-label">Супруг 1</div><div class="split-value" id="split-spouse1-value">0 ₽</div></div>
                                    <div class="split-divider">50/50</div>
                                    <div class="split-half"><div class="split-label" id="split-spouse2-label">Супруг 2</div><div class="split-value" id="split-spouse2-value">0 ₽</div></div>
                                </div>
                            </div>
                            <div class="personal-property">
                                <div class="personal-item"><span id="personal-spouse1-label">Личное Супруга 1:</span><strong id="personal-spouse1-value">0 ₽</strong></div>
                                <div class="personal-item"><span id="personal-spouse2-label">Личное Супруга 2:</span><strong id="personal-spouse2-value">0 ₽</strong></div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Шаг 5: Долги -->
                <section class="step-content" id="step-5">
                    <div class="card">
                        <h2 class="card-title">💳 Долги и кредиты</h2>
                        <div class="info-box"><div class="info-icon">⚠️</div><div>Совместные долги делятся 50/50 (ст. 39 п. 3 СК РФ)</div></div>
                        <div id="debts-list"></div>
                        <button class="add-btn" onclick="addDebt()">+ Добавить долг</button>
                        <div class="summary-box" id="debts-summary"><h3>📊 Долги</h3><div class="summary-grid" id="debts-summary-content"><p class="empty-state">Добавьте долги</p></div></div>
                    </div>
                </section>

                <!-- Шаг 6: Итоги -->
                <section class="step-content" id="step-6">
                    <div class="card">
                        <h2 class="card-title">📋 Итоговый отчёт</h2>
                        <div id="final-report"></div>
                        <div class="report-actions">
                            <button class="btn btn-primary" id="btn-full" onclick="buyFullReport()">📊 Полный расчёт + план — 299 ₽</button>
                            <button class="btn btn-secondary" id="btn-lawsuit" onclick="buyLawsuit()">⚖️ Готовый иск в суд — 990 ₽</button>
                            <button class="btn btn-outline" onclick="downloadPDF()">📄 Скачать PDF</button>
                            <button class="btn btn-outline" onclick="downloadLawsuitPDF()">📄 PDF иска</button>
                            <button class="btn btn-outline" onclick="findLawyer()">👨‍⚖️ Найти юриста</button>
                    <button class="btn btn-outline" onclick="saveToServer()">💾 Сохранить</button>
                        </div>
                        <div class="disclaimer">
                            <strong>⚠️ Важно:</strong> Информационный расчёт, не является юридической консультацией. Обратитесь к квалифицированному юристу.
                        </div>
                    </div>
                </section>

                <!-- Навигация -->
                <div class="step-navigation">
                    <button class="btn btn-outline" id="prev-btn" onclick="prevStep()" style="display:none;">← Назад</button>
                    <button class="btn btn-primary" id="next-btn" onclick="nextStep()">Далее →</button>
                </div>
            </div>
        </main>

        <!-- Модальное окно авторизации -->
        <div class="modal-overlay" id="auth-modal" style="display:none;" onclick="closeModal(event)">
            <div class="modal">
                <button class="modal-close" onclick="hideAuthModal()">✕</button>
                <div id="auth-modal-content"></div>
            </div>
        </div>

        <footer class="footer">
            <div class="container">
                <p>⚖️ Алименты-Расчёт — расчёты по Семейному кодексу РФ</p>
            </div>
        <div style="margin-top:12px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap">
                <a href="/privacy" style="color:rgba(255,255,255,.6);text-decoration:none;font-size:12px">Политика конфиденциальности</a>
                <a href="/terms" style="color:rgba(255,255,255,.6);text-decoration:none;font-size:12px">Пользовательское соглашение</a>
                <a href="/contacts" style="color:rgba(255,255,255,.6);text-decoration:none;font-size:12px">Контакты</a>
            </div>
        </div>
    </footer>
    </div>
    <script src="/app.js"></script>

    <div id="cookie-banner" style="display:none;position:fixed;bottom:0;left:0;right:0;background:#1E293B;color:#E2E8F0;padding:16px 24px;z-index:9999;box-shadow:0 -4px 20px rgba(0,0,0,.2);font-size:14px">
        <div style="max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap">
            <div style="flex:1;min-width:280px">
                🍪 Мы используем cookie для работы сервиса и улучшения качества обслуживания.
                <a href="/privacy#9-cookie-файлы" style="color:#818CF8;text-decoration:none"> Подробнее</a>
            </div>
            <div style="display:flex;gap:8px">
                <button onclick="acceptCookies()" style="padding:10px 24px;background:#4F46E5;color:white;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px">Принимаю</button>
                <button onclick="declineCookies()" style="padding:10px 24px;background:transparent;color:#94A3B8;border:1px solid #334155;border-radius:8px;cursor:pointer;font-size:14px">Отклонить</button>
            </div>
        </div>
    </div>
    <script>
    function acceptCookies() {
        fetch('/api/consent',{
            method:'POST',
            headers:{'Content-Type':'application/json'},
            body:JSON.stringify({type:'cookies_accepted'})
        }).catch(function(){});
        localStorage.setItem('cookies_accepted', 'yes');
        document.getElementById('cookie-banner').style.display = 'none';
    }
    function declineCookies() {
        fetch('/api/consent',{
            method:'POST',
            headers:{'Content-Type':'application/json'},
            body:JSON.stringify({type:'cookies_declined'})
        }).catch(function(){});
        localStorage.setItem('cookies_accepted', 'no');
        document.getElementById('cookie-banner').style.display = 'none';
    }
    if (!localStorage.getItem('cookies_accepted')) {
        document.getElementById('cookie-banner').style.display = 'block';
    }
    </script>

    <!-- Юридическое предупреждение -->
    <div id="legal-warning-modal" style="position:fixed;inset:0;background:rgba(15,23,42,.85);z-index:99999;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px)">
        <div style="background:white;border-radius:20px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;padding:36px">
            <div style="text-align:center;margin-bottom:20px">
                <span style="font-size:48px">⚖️</span>
                <h2 style="font-size:24px;margin-top:12px;color:#1E293B">Важная информация</h2>
                <p style="font-size:14px;color:#64748B;margin-top:8px">Пожалуйста, ознакомьтесь перед использованием сервиса</p>
            </div>

            <div style="background:#FEF2F2;border:1px solid #FECACA;border-radius:12px;padding:16px;margin-bottom:16px">
                <p style="font-size:14px;color:#991B1B;line-height:1.7;font-weight:600">
                    ⚠️ Данный сервис НЕ является юридической консультацией
                </p>
            </div>

            <div style="background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:16px;margin-bottom:16px">
                <ul style="font-size:14px;color:#475569;line-height:2;padding-left:20px">
                    <li>Все расчёты носят <strong>информационно-справочный характер</strong> и основаны на нормах Семейного кодекса РФ</li>
                    <li>Окончательное решение по делу принимает <strong>только суд</strong> с учётом всех обстоятельств</li>
                    <li>Формируемые исковые заявления являются <strong>шаблонами</strong> и могут требовать доработки под конкретную ситуацию</li>
                    <li>Сервис не гарантирует <strong>точность расчётов</strong> и не несёт ответственности за решения, принятые на их основе</li>
                    <li>Для принятия юридически значимых решений <strong>обратитесь к квалифицированному юристу</strong></li>
                </ul>
            </div>

            <div style="background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:16px;margin-bottom:20px">
                <p style="font-size:13px;color:#92400E;line-height:1.7">
                    📋 Используя сервис, вы подтверждаете, что ознакомились с
                    <a href="/terms" target="_blank" style="color:#4F46E5;font-weight:600">Пользовательским соглашением</a> и
                    <a href="/privacy" target="_blank" style="color:#4F46E5;font-weight:600">Политикой конфиденциальности</a>,
                    а также понимаете, что результаты расчётов не являются юридической консультацией.
                </p>
            </div>

            <label style="display:flex;align-items:flex-start;gap:12px;background:#F0FDF4;border:2px solid #BBF7D0;border-radius:12px;padding:14px 16px;margin-bottom:20px;cursor:pointer">
                <input type="checkbox" id="legal-warning-agree" style="width:22px;height:22px;min-width:22px;margin-top:2px;accent-color:#4F46E5">
                <span style="font-size:14px;color:#166534;line-height:1.5">
                    Я понимаю, что сервис носит <strong>информационный характер</strong>,
                    не является юридической консультацией и не гарантирует результат в суде
                </span>
            </label>

            <button id="legal-warning-btn" onclick="acceptLegalWarning()" disabled
                style="width:100%;padding:16px;background:#CBD5E1;color:white;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:not-allowed;font-family:inherit;transition:all .2s">
                Продолжить
            </button>

            <p style="text-align:center;margin-top:12px;font-size:12px;color:#94A3B8">
                Нажимая «Продолжить», вы принимаете условия использования сервиса
            </p>
        </div>
    </div>

    <script>
    // Активация кнопки при чекбоксе
    document.addEventListener('change', function(e) {
        if (e.target && e.target.id === 'legal-warning-agree') {
            var btn = document.getElementById('legal-warning-btn');
            if (e.target.checked) {
                btn.disabled = false;
                btn.style.background = '#4F46E5';
                btn.style.cursor = 'pointer';
            } else {
                btn.disabled = true;
                btn.style.background = '#CBD5E1';
                btn.style.cursor = 'not-allowed';
            }
        }
    });

    function acceptLegalWarning() {
        var cb = document.getElementById('legal-warning-agree');
        if (!cb || !cb.checked) return;

        localStorage.setItem('legal_warning_accepted', 'yes');
        document.getElementById('legal-warning-modal').style.display = 'none';

        // Логируем согласие
        fetch('/api/consent', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                type: 'legal_warning_accepted',
                email: '',
                name: ''
            })
        }).catch(function(){});
    }

    // Показываем при загрузке если ещё не принято
    document.addEventListener('DOMContentLoaded', function() {
        if (localStorage.getItem('legal_warning_accepted') !== 'yes') {
            document.getElementById('legal-warning-modal').style.display = 'flex';
        }
    });
    </script>
<script src="/html2pdf.min.js"></script>
</body>
</html>