From 108e017a51d93be73db45254e2f7713587f79160 Mon Sep 17 00:00:00 2001
From: Zhanna <orazbekova.1979@mail.ru>
Date: Fri, 21 Aug 2026 10:54:12 +0000
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=BF=D1=83=D0=B1=D0=BB=D0=B8=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BD=D0=BE=20=D1=87=D0=B5=D1=80=D0=B5=D0=B7?=
 =?UTF-8?q?=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data.json    |  615 ---------------------
 index.html   | 1444 +++++++++++++++++++++++++++++---------------------
 package.json |   15 +
 3 files changed, 863 insertions(+), 1211 deletions(-)
 delete mode 100644 data.json
 create mode 100644 package.json

diff --git a/data.json b/data.json
deleted file mode 100644
index 61abab9..0000000
--- a/data.json
+++ /dev/null
@@ -1,615 +0,0 @@
-{
-  "cities": [
-    {
-      "id": "prague",
-      "name": "Прага",
-      "country": "Чехия",
-      "flag": "🇨🇿",
-      "nights": 4,
-      "priceRange": "€70–120",
-      "district": "Praha 1",
-      "description": "Столица Чехии — один из красивейших городов Европы с потрясающей архитектурой, вкуснейшим пивом и уютными улочками.",
-      "image": "https://loremflickr.com/1200/800/prague"
-    },
-    {
-      "id": "vienna",
-      "name": "Вена",
-      "country": "Австрия",
-      "flag": "🇦🇹",
-      "nights": 4,
-      "priceRange": "€80–140",
-      "district": "Внутренний город (Innere Stadt)",
-      "description": "Имперская столица Австрии с роскошными дворцами, богатой культурной программой и изысканными кофейнями.",
-      "image": "https://loremflickr.com/1200/800/vienna"
-    },
-    {
-      "id": "bratislava",
-      "name": "Братислава",
-      "country": "Словакия",
-      "flag": "🇸🇰",
-      "nights": 2,
-      "priceRange": "€60–100",
-      "district": "Старый город (Staré Mesto)",
-      "description": "Столица Словакии — компактный уютный город с красивым старым центром и дружелюбной атмосферой.",
-      "image": "https://loremflickr.com/1200/800/bratislava"
-    },
-    {
-      "id": "budapest",
-      "name": "Будапешт",
-      "country": "Венгрия",
-      "flag": "🇭🇺",
-      "nights": 4,
-      "priceRange": "€55–100",
-      "district": "Пешт (центр)",
-      "description": "Великолепная столица Венгрии с термальными источниками, впечатляющим парламентом и богатой историей.",
-      "image": "https://loremflickr.com/1200/800/budapest"
-    }
-  ],
-  "attractions": {
-    "prague": [
-      {
-        "name": "Карлов мост",
-        "description": "Один из символов Праги, старинный каменный мост через Влтаву с 30 статуями святых.",
-        "price": "Бесплатно",
-        "rating": 5,
-        "image": "https://loremflickr.com/800/600/charles+bridge+prague"
-      },
-      {
-        "name": "Пражский град",
-        "description": "Крупнейший замок в мире по площади, резиденция чешских королей и президента.",
-        "price": "от €10",
-        "rating": 5,
-        "image": "https://loremflickr.com/800/600/prague+castle"
-      },
-      {
-        "name": "Собор Святого Вита",
-        "description": "Готический кафедральный собор внутри Пражского града с великолепными витражами.",
-        "price": "от €8",
-        "rating": 5,
-        "image": "https://loremflickr.com/800/600/st+vitus+cathedral"
-      },
-      {
-        "name": "Староместская площадь",
-        "description": "Сердце Праги с архитектурными шедеврами всех эпох и стилей.",
-        "price": "Бесплатно",
-        "rating": 5,
-        "image": "https://loremflickr.com/800/600/old+town+square+prague"
-      },
-      {
-        "name": "Астрономические часы",
-        "description": "Средневековые куранты Орлой с hourly-шоу движущихся фигурок апостолов.",
-        "price": "Бесплатно (смотровая €6)",
-        "rating": 4,
-        "image": "https://loremflickr.com/800/600/astronomical+clock+prague"
-      },
-      {
-        "name": "Мала Страна",
-        "description": "Живописный район Праги под Пражским градом с барочными дворцами и тихими улочками.",
-        "price": "Бесплатно",
-        "rating": 4,
-        "image": "https://loremflickr.com/800/600/mala+strana+prague"
-      }
-    ],
-    "vienna": [
-      {
-        "name": "Дворец Шёнбрунн",
-        "description": "Летняя резиденция Габсбургов с роскошными интерьерами и огромным парком.",
-        "price": "от €22",
-        "rating": 5,
-        "image": "https://loremflickr.com/800/600/schonbrunn+palace"
-      },
-      {
-        "name": "Собор Святого Стефана",
-        "description": "Готический собор в центре Вены, символ города с потрясающим видом с башни.",
-        "price": "Бесплатно (башня €6)",
-        "rating": 5,
-        "image": "https://loremflickr.com/800/600/st+stephen+cathedral+vienna"
-      },
-      {
-        "name": "Венская опера",
-        "description": "Одна из ведущих оперных театров мира с богатой программой и роскошными интерьерами.",
-        "price": "от €15",
-        "rating": 5,
-        "image": "https://loremflickr.com/800/600/vienna+opera"
-      },
-      {
-        "name": "Бельведер",
-        "description": "Дворцовый комплекс с шедеврами австрийского искусства, включая работы Климта.",
-        "price": "от €16",
-        "rating": 4,
-        "image": "https://loremflickr.com/800/600/belvedere+vienna"
-      },
-      {
-        "name": "Рингштрассе",
-        "description": "Кольцевой бульвар вокруг старого города с главными достопримечательностями.",
-        "price": "Бесплатно",
-        "rating": 4,
-        "image": "https://loremflickr.com/800/600/ringstrasse+vienna"
-      }
-    ],
-    "bratislava": [
-      {
-        "name": "Братиславский град",
-        "description": "Замок на холме с панорамным видом на город и Дунай, исторический музей.",
-        "price": "€10",
-        "rating": 4,
-        "image": "https://loremflickr.com/800/600/bratislava+castle"
-      },
-      {
-        "name": "Старый город",
-        "description": "Исторический центр с узкими улочками, кафе и знаменитой статуей Чумила.",
-        "price": "Бесплатно",
-        "rating": 4,
-        "image": "https://loremflickr.com/800/600/bratislava+old+town"
-      },
-      {
-        "name": "Собор Святого Мартина",
-        "description": "Готический собор XIV века, где короновали венгерских королей.",
-        "price": "€2",
-        "rating": 4,
-        "image": "https://loremflickr.com/800/600/st+martin+cathedral+bratislava"
-      },
-      {
-        "name": "Нова-Словнафт Арена",
-        "description": "Современная набережная Дуная с ресторанами и видом на мост СНП.",
-        "price": "Бесплатно",
-        "rating": 3,
-        "image": "https://loremflickr.com/800/600/bratislava+waterfront"
-      }
-    ],
-    "budapest": [
-      {
-        "name": "Парламент Венгрии",
-        "description": "Великолепное неоготическое здание парламента на берегу Дуная — символ Будапешта.",
-        "price": "от €12",
-        "rating": 5,
-        "image": "https://loremflickr.com/800/600/hungarian+parliament"
-      },
-      {
-        "name": "Рыбацкий бастион",
-        "description": "Смотровая терраса в неоготическом стиле с панорамным видом на Пешт и Дунай.",
-        "price": "€4",
-        "rating": 5,
-        "image": "https://loremflickr.com/800/600/fishermans+bastion"
-      },
-      {
-        "name": "Церковь Матьяша",
-        "description": "Историческая церковь с красивой черепичной крышей и богатой историей коронаций.",
-        "price": "€8",
-        "rating": 4,
-        "image": "https://loremflickr.com/800/600/matyas+church+budapest"
-      },
-      {
-        "name": "Термальные купальни Сечени",
-        "description": "Крупнейший термальный комплекс Европы с 18 бассейнами под открытым небом.",
-        "price": "от €22",
-        "rating": 5,
-        "image": "https://loremflickr.com/800/600/szechenyi+thermal+bath"
-      },
-      {
-        "name": "Проспект Андраши",
-        "description": "Главный проспект Будапешта с роскошными зданиями, магазинами и_OPERA_.",
-        "price": "Бесплатно",
-        "rating": 4,
-        "image": "https://loremflickr.com/800/600/andrassy+avenue+budapest"
-      },
-      {
-        "name": "Центральный рынок",
-        "description": "Большой крытый рынок с венгерскими деликатесами, сувенирами и локальной едой.",
-        "price": "Бесплатно",
-        "rating": 4,
-        "image": "https://loremflickr.com/800/600/central+market+budapest"
-      }
-    ]
-  },
-  "hotels": {
-    "prague": [
-      {
-        "name": "Hotel Golden Well",
-        "category": "Премиум",
-        "price": "€180–250",
-        "rating": 5,
-        "district": "Мала Страна",
-        "image": "https://loremflickr.com/800/600/hotel+luxury"
-      },
-      {
-        "name": "Hotel Metamorphis",
-        "category": "Комфорт",
-        "price": "€90–130",
-        "rating": 4,
-        "district": "Старый город",
-        "image": "https://loremflickr.com/800/600/hotel+comfort"
-      },
-      {
-        "name": "Czech Inn Hostel",
-        "category": "Эконом",
-        "price": "€25–45",
-        "rating": 4,
-        "district": "Винограды",
-        "image": "https://loremflickr.com/800/600/hostel"
-      }
-    ],
-    "vienna": [
-      {
-        "name": "Hotel Sacher Wien",
-        "category": "Премиум",
-        "price": "€250–400",
-        "rating": 5,
-        "district": "Внутренний город",
-        "image": "https://loremflickr.com/800/600/hotel+sacher"
-      },
-      {
-        "name": "25hours Hotel beim MuseumsQuartier",
-        "category": "Комфорт",
-        "price": "€100–150",
-        "rating": 4,
-        "district": "Музейный квартал",
-        "image": "https://loremflickr.com/800/600/hotel+modern"
-      },
-      {
-        "name": "Wombat's City Hostel",
-        "category": "Эконом",
-        "price": "€30–50",
-        "rating": 4,
-        "district": "Леопольдштадт",
-        "image": "https://loremflickr.com/800/600/hostel+vienna"
-      }
-    ],
-    "bratislava": [
-      {
-        "name": "Hotel Devin",
-        "category": "Премиум",
-        "price": "€150–220",
-        "rating": 5,
-        "district": "Старый город",
-        "image": "https://loremflickr.com/800/600/hotel+devin"
-      },
-      {
-        "name": "Lindner Hotel Gateway",
-        "category": "Комфорт",
-        "price": "€80–120",
-        "rating": 4,
-        "district": "Старый город",
-        "image": "https://loremflickr.com/800/600/hotel+gateway"
-      },
-      {
-        "name": "Patio Hostel",
-        "category": "Эконом",
-        "price": "€20–40",
-        "rating": 4,
-        "district": "Старый город",
-        "image": "https://loremflickr.com/800/600/hostel+bratislava"
-      }
-    ],
-    "budapest": [
-      {
-        "name": "Four Seasons Hotel Gresham Palace",
-        "category": "Премиум",
-        "price": "€200–350",
-        "rating": 5,
-        "district": "Пешт, у моста",
-        "image": "https://loremflickr.com/800/600/four+seasons+budapest"
-      },
-      {
-        "name": "Brody House",
-        "category": "Комфорт",
-        "price": "€70–110",
-        "rating": 4,
-        "district": "Пешт",
-        "image": "https://loremflickr.com/800/600/brody+house"
-      },
-      {
-        "name": "Wombat's City Hostel",
-        "category": "Эконом",
-        "price": "€25–45",
-        "rating": 4,
-        "district": "Пешт",
-        "image": "https://loremflickr.com/800/600/wombats+budapest"
-      }
-    ]
-  },
-  "transport": [
-    {
-      "from": "Астана",
-      "to": "Прага",
-      "type": "✈️ Самолёт",
-      "duration": "≈ 6 часов",
-      "price": "€200–400",
-      "priceKZT": 100000
-    },
-    {
-      "from": "Прага",
-      "to": "Вена",
-      "type": "🚆 Поезд",
-      "duration": "≈ 4 часа",
-      "price": "€15–40",
-      "priceKZT": 25000
-    },
-    {
-      "from": "Вена",
-      "to": "Братислава",
-      "type": "🚆 Поезд",
-      "duration": "≈ 1 час",
-      "price": "€10–20",
-      "priceKZT": 12000
-    },
-    {
-      "from": "Братислава",
-      "to": "Будапешт",
-      "type": "🚆 Поезд",
-      "duration": "≈ 2,5 часа",
-      "price": "€15–30",
-      "priceKZT": 18000
-    },
-    {
-      "from": "Будапешт",
-      "to": "Астана",
-      "type": "✈️ Самолёт",
-      "duration": "≈ 5,5 часов",
-      "price": "€250–450",
-      "priceKZT": 120000
-    }
-  ],
-  "days": [
-    {
-      "day": 1,
-      "city": "prague",
-      "title": "Астана → Прага",
-      "icon": "✈️",
-      "activities": [
-        "Перелёт Астана — Прага",
-        "Трансфер в отель",
-        "Заселение",
-        "Вечерняя прогулка по центру"
-      ],
-      "cost": "25 000–40 000 ₸"
-    },
-    {
-      "day": 2,
-      "city": "prague",
-      "title": "Прага — Старый город",
-      "icon": "📍",
-      "activities": [
-        "Староместская площадь",
-        "Астрономические часы Орлой",
-        "Вацлавская площадь",
-        "Улица На Пршикопе"
-      ],
-      "cost": "20 000–30 000 ₸"
-    },
-    {
-      "day": 3,
-      "city": "prague",
-      "title": "Прага — Пражский град",
-      "icon": "🏰",
-      "activities": [
-        "Пражский град",
-        "Собор Святого Вита",
-        "Золотая улочка",
-        "Мала Страна"
-      ],
-      "cost": "25 000–35 000 ₸"
-    },
-    {
-      "day": 4,
-      "city": "prague",
-      "title": "Прага — Карлов мост",
-      "icon": "🌉",
-      "activities": [
-        "Карлов мост",
-        "Остров Кампа",
-        "Петршинская башня",
-        "Вечерняя прогулка"
-      ],
-      "cost": "15 000–25 000 ₸"
-    },
-    {
-      "day": 5,
-      "city": "vienna",
-      "title": "Прага → Вена",
-      "icon": "🚆",
-      "activities": [
-        "Поезд Прага — Вена (≈ 4 часа)",
-        "Заселение в отель",
-        "Рингштрассе",
-        "Прогулка по центру"
-      ],
-      "cost": "20 000–35 000 ₸"
-    },
-    {
-      "day": 6,
-      "city": "vienna",
-      "title": "Вена — Имперская",
-      "icon": "👑",
-      "activities": [
-        "Дворец Шёнбрунн",
-        "Парк Шёнбрунна",
-        "Триумфальная арка Глориетта",
-        "Вечер в традиционном ресторане"
-      ],
-      "cost": "30 000–45 000 ₸"
-    },
-    {
-      "day": 7,
-      "city": "vienna",
-      "title": "Вена — Культурная",
-      "icon": "🎭",
-      "activities": [
-        "Собор Святого Стефана",
-        "Венская опера (экскурсия или спектакль)",
-        "Музейный квартал",
-        "Прогулка по Грабену"
-      ],
-      "cost": "25 000–40 000 ₸"
-    },
-    {
-      "day": 8,
-      "city": "vienna",
-      "title": "Вена — Искусство",
-      "icon": "🎨",
-      "activities": [
-        "Бельведер (Климт)",
-        "Альбертина",
-        "Хофбург",
-        "Испанская школа верховой езды"
-      ],
-      "cost": "30 000–50 000 ₸"
-    },
-    {
-      "day": 9,
-      "city": "bratislava",
-      "title": "Вена → Братислава",
-      "icon": "🚆",
-      "activities": [
-        "Поезд Вена — Братислава (≈ 1 час)",
-        "Заселение",
-        "Старый город",
-        "Ужин на набережной Дуная"
-      ],
-      "cost": "15 000–25 000 ₸"
-    },
-    {
-      "day": 10,
-      "city": "bratislava",
-      "title": "Братислава — Компактная",
-      "icon": "🏛️",
-      "activities": [
-        "Братиславский град",
-        "Собор Святого Мартина",
-        "Старый город",
-        "Статуя Чумила"
-      ],
-      "cost": "15 000–20 000 ₸"
-    },
-    {
-      "day": 11,
-      "city": "budapest",
-      "title": "Братислава → Будапешт",
-      "icon": "🚆",
-      "activities": [
-        "Поезд Братислава — Будапешт (≈ 2,5 часа)",
-        "Заселение",
-        "Проспект Андраши",
-        "Вечерняя прогулка"
-      ],
-      "cost": "20 000–30 000 ₸"
-    },
-    {
-      "day": 12,
-      "city": "budapest",
-      "title": "Будапешт — Пешт",
-      "icon": "🏛️",
-      "activities": [
-        "Парламент Венгрии",
-        "Базилика Святого Иштвана",
-        "Центральный рынок",
-        "Еврейский квартал"
-      ],
-      "cost": "25 000–40 000 ₸"
-    },
-    {
-      "day": 13,
-      "city": "budapest",
-      "title": "Будапешт — Буда",
-      "icon": "🏰",
-      "activities": [
-        "Рыбацкий бастион",
-        "Церковь Матьяша",
-        "Замок Будайской крепости",
-        "Вид на Дунай"
-      ],
-      "cost": "20 000–30 000 ₸"
-    },
-    {
-      "day": 14,
-      "city": "budapest",
-      "title": "Будапешт — Релакс",
-      "icon": "♨️",
-      "activities": [
-        "Термальные купальни Сечени",
-        "Остров Маргит",
-        "Прогулка на кораблике по Дунаю",
-        "Прощальный ужин"
-      ],
-      "cost": "25 000–40 000 ₸"
-    },
-    {
-      "day": 15,
-      "city": "astana",
-      "title": "Будапешт → Астана",
-      "icon": "✈️",
-      "activities": [
-        "Завтрак",
-        "Трансфер в аэропорт",
-        "Перелёт Будапешт — Астана",
-        "Прибытие домой"
-      ],
-      "cost": "25 000–40 000 ₸"
-    }
-  ],
-  "tips": [
-    {
-      "icon": "🛂",
-      "title": "Документы",
-      "text": "Проверить требования для въезда и необходимые документы (загранпаспорт, виза)."
-    },
-    {
-      "icon": "💳",
-      "title": "Деньги",
-      "text": "Рекомендуется иметь банковскую карту + небольшой запас наличных евро."
-    },
-    {
-      "icon": "📱",
-      "title": "Интернет",
-      "text": "Подключить eSIM или туристическую SIM-карту для Европы."
-    },
-    {
-      "icon": "🛡️",
-      "title": "Страховка",
-      "text": "Оформить туристическую страховку на весь период поездки."
-    },
-    {
-      "icon": "🎒",
-      "title": "Багаж",
-      "text": "Для поездки на 15 дней оптимально — ручная кладь + заранее проверить нормы авиакомпании."
-    },
-    {
-      "icon": "🚆",
-      "title": "Поезда",
-      "text": "Билеты между городами лучше покупать заранее онлайн — дешевле и гарантия мест."
-    }
-  ],
-  "checklist": [
-    { "id": 1, "text": "Загранпаспорт", "done": false },
-    { "id": 2, "text": "Виза / документы для въезда", "done": false },
-    { "id": 3, "text": "Туристическая страховка", "done": false },
-    { "id": 4, "text": "Авиабилеты", "done": false },
-    { "id": 5, "text": "Брони отелей", "done": false },
-    { "id": 6, "text": "Билеты на поезда", "done": false },
-    { "id": 7, "text": "Банковские карты", "done": false },
-    { "id": 8, "text": "Наличные евро", "done": false },
-    { "id": 9, "text": "eSIM", "done": false },
-    { "id": 10, "text": "Зарядка", "done": false },
-    { "id": 11, "text": "Power Bank", "done": false }
-  ],
-  "budget": {
-    "flights": 220000,
-    "trains": 55000,
-    "hotels": {
-      "economy": 350000,
-      "comfort": 550000,
-      "premium": 900000
-    },
-    "food": {
-      "economy": 180000,
-      "medium": 280000,
-      "comfort": 400000
-    },
-    "attractions": {
-      "min": 60000,
-      "standard": 100000,
-      "many": 160000
-    },
-    "transport": 40000
-  }
-}
diff --git a/index.html b/index.html
index 9e0b580..f69a5d8 100644
--- a/index.html
+++ b/index.html
@@ -3,650 +3,902 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Europe Trip — 15 дней | Маршрут из Астаны</title>
+<title>Коммунальный бюджет | Корпоративная система</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Unbounded:wght@700&display=swap" rel="stylesheet">
-<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🇪🇺</text></svg>">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
 <style>
-:root{
-  --bg: #F7F7F8;
-  --ink: #172033;
-  --accent: #6C5CE7;
-  --accent-light: #FFB84D;
-  --white: #FFFFFF;
-  --gray-100: #E8E8EA;
-  --gray-200: #D0D0D3;
-  --gray-500: #6B7280;
-  --shadow: 0 4px 20px rgba(0,0,0,0.08);
-  --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
-  --radius: 16px;
-  --radius-sm: 8px;
+:root {
+  --primary: #1e3a5f;
+  --primary-light: #2c5282;
+  --primary-dark: #0f2744;
+  --accent: #3182ce;
+  --success: #38a169;
+  --danger: #e53e3e;
+  --warning: #d69e2e;
+  --bg: #f7fafc;
+  --white: #ffffff;
+  --gray-100: #f7fafc;
+  --gray-200: #edf2f7;
+  --gray-300: #e2e8f0;
+  --gray-400: #cbd5e0;
+  --gray-500: #718096;
+  --gray-600: #4a5568;
+  --gray-700: #2d3748;
+  --gray-800: #1a202c;
+  --shadow: 0 1px 3px rgba(0,0,0,0.1);
+  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
+  --radius: 8px;
+  --radius-lg: 12px;
 }
-*{box-sizing:border-box;margin:0;padding:0}
-body{font:17px/1.6 'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden}
-h1,h2,h3,h4{font:'Unbounded',sans-serif;line-height:1.2}
-a{text-decoration:none;color:inherit}
-img{max-width:100%;display:block;border-radius:var(--radius)}
-.container{max-width:1200px;margin:0 auto;padding:0 20px}
-.section{padding:80px 0}
-.section-title{font-size:36px;font-weight:700;margin-bottom:40px;text-align:center}
-.btn{display:inline-block;background:var(--accent);color:var(--white);padding:16px 32px;border-radius:var(--radius-sm);font-weight:700;font-size:16px;cursor:pointer;border:none;transition:all 0.3s ease}
-.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(108,92,231,0.4)}
-.btn-secondary{background:var(--white);color:var(--accent);border:2px solid var(--accent)}
-.btn-secondary:hover{background:var(--accent);color:var(--white)}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font: 14px/1.5 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--gray-800); background: var(--bg); }
+a { text-decoration: none; color: inherit; }
+button { cursor: pointer; font-family: inherit; }
+
+/* Layout */
+.app { display: flex; min-height: 100vh; }
+.sidebar { width: 260px; background: var(--primary); color: var(--white); position: fixed; inset: 0 0 0 auto; overflow-y: auto; z-index: 100; transition: transform 0.3s; }
+.sidebar-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
+.sidebar-title { font-size: 18px; font-weight: 700; }
+.sidebar-nav { padding: 20px 0; }
+.nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: rgba(255,255,255,0.8); transition: all 0.2s; cursor: pointer; }
+.nav-item:hover, .nav-item.active { background: rgba(255,255,255,0.1); color: var(--white); }
+.nav-icon { font-size: 18px; width: 20px; text-align: center; }
+.main { flex: 1; margin-left: 260px; display: flex; flex-direction: column; }
 
 /* Header */
-.header{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
-.header-inner{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;max-width:1400px;margin:0 auto}
-.logo{font:'Unbounded',sans-serif;font-size:20px;font-weight:700;color:var(--accent)}
-.nav{display:flex;gap:24px}
-.nav a{font-size:14px;font-weight:600;color:var(--gray-500);transition:color 0.3s}
-.nav a:hover{color:var(--accent)}
-.menu-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer}
+.header { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 50; }
+.header-left { display: flex; align-items: center; gap: 16px; }
+.year-select { padding: 8px 16px; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: 14px; font-weight: 600; background: var(--white); cursor: pointer; }
+.header-right { display: flex; align-items: center; gap: 16px; }
+.notification-btn { position: relative; background: none; border: none; font-size: 20px; color: var(--gray-500); cursor: pointer; }
+.notification-badge { position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; background: var(--danger); border-radius: 50%; }
+.user-menu { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gray-700); }
+.user-avatar { width: 32px; height: 32px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; }
+.menu-toggle { display: none; background: none; border: none; font-size: 24px; color: var(--gray-600); cursor: pointer; }
 
-/* Hero */
-.hero{position:relative;height:100vh;min-height:700px;display:flex;align-items:center;justify-content:center;overflow:hidden}
-.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg, var(--accent) 0%, #a78bfa 100%)}
-.hero-pattern{position:absolute;inset:0;opacity:0.1;background-image:radial-gradient(circle at 2px 2px, white 1px, transparent 0);background-size:40px 40px}
-.hero-content{position:relative;z-index:2;text-align:center;color:var(--white);max-width:900px;padding:0 20px}
-.hero h1{font-size:clamp(36px, 8vw, 72px);font-weight:700;margin-bottom:24px;line-height:1.1}
-.hero p{font-size:clamp(18px, 3vw, 24px);margin-bottom:32px;opacity:0.95}
-.hero-route{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:40px;font-size:clamp(14px, 2vw, 18px)}
-.hero-route span{background:rgba(255,255,255,0.2);padding:8px 16px;border-radius:20px}
-.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
-.hero-buttons .btn{padding:18px 36px;font-size:18px}
+/* Content */
+.content { padding: 24px; }
+.page { display: none; }
+.page.active { display: block; }
+.page-header { margin-bottom: 24px; }
+.page-title { font-size: 28px; font-weight: 700; color: var(--gray-800); margin-bottom: 8px; }
+.page-subtitle { color: var(--gray-500); }
 
-/* Route */
-.route-visual{display:flex;align-items:center;justify-content:center;gap:20px;margin:40px 0;flex-wrap:wrap}
-.route-city{text-align:center;padding:20px;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);min-width:140px;transition:transform 0.3s}
-.route-city:hover{transform:translateY(-5px)}
-.route-city .flag{font-size:48px;display:block;margin-bottom:8px}
-.route-city .name{font-weight:700;font-size:16px}
-.route-arrow{font-size:32px;color:var(--accent);animation:pulse 2s infinite}
-@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
+/* KPI Cards */
+.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; }
+.kpi-card { background: var(--white); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); border-left: 4px solid var(--accent); }
+.kpi-card.success { border-left-color: var(--success); }
+.kpi-card.danger { border-left-color: var(--danger); }
+.kpi-card.warning { border-left-color: var(--warning); }
+.kpi-label { font-size: 13px; color: var(--gray-500); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
+.kpi-value { font-size: 24px; font-weight: 700; color: var(--gray-800); }
+.kpi-delta { font-size: 13px; margin-top: 8px; display: flex; align-items: center; gap: 4px; }
+.kpi-delta.positive { color: var(--success); }
+.kpi-delta.negative { color: var(--danger); }
 
-/* City Cards */
-.cities-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px}
-.city-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:all 0.3s ease;cursor:pointer}
-.city-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
-.city-card-img{height:200px;object-fit:cover;width:100%}
-.city-card-body{padding:24px}
-.city-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
-.city-card-title{font-size:22px;font-weight:700}
-.city-card-nights{color:var(--accent);font-weight:600}
-.city-card-price{color:var(--gray-500);margin-bottom:16px}
-.city-card-district{font-size:14px;color:var(--gray-500);margin-bottom:16px}
+/* Cards */
+.card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 24px; }
+.card-header { padding: 20px; border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center; }
+.card-title { font-size: 18px; font-weight: 600; }
+.card-body { padding: 20px; }
 
-/* Timeline */
-.timeline{position:relative;max-width:800px;margin:0 auto}
-.timeline::before{content:'';position:absolute;left:30px;top:0;bottom:0;width:3px;background:linear-gradient(to bottom, var(--accent), var(--accent-light))}
-.timeline-item{position:relative;padding-left:80px;margin-bottom:40px;opacity:0;transform:translateY(30px);transition:all 0.6s ease}
-.timeline-item.in{opacity:1;transform:none}
-.timeline-marker{position:absolute;left:0;width:60px;height:60px;background:var(--white);border:3px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:var(--shadow)}
-.timeline-content{background:var(--white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
-.timeline-day{font-size:14px;color:var(--accent);font-weight:700;margin-bottom:8px}
-.timeline-title{font-size:20px;font-weight:700;margin-bottom:12px}
-.timeline-activities{list-style:none;margin-bottom:16px}
-.timeline-activities li{padding:6px 0;padding-left:20px;position:relative;color:var(--gray-500)}
-.timeline-activities li::before{content:'•';position:absolute;left:0;color:var(--accent)}
-.timeline-cost{font-weight:700;color:var(--accent-light)}
+/* Tables */
+.table-container { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; }
+th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--gray-200); }
+th { font-weight: 600; color: var(--gray-600); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; background: var(--gray-50); }
+tr:hover { background: var(--gray-50); }
+.status { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
+.status.active { background: #c6f6d5; color: #22543d; }
+.status.archived { background: var(--gray-200); color: var(--gray-600); }
+.status.draft { background: #fefcbf; color: #744210; }
+.status.approved { background: #bee3f8; color: #2c5282; }
 
-/* Attractions */
-.attractions-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:24px}
-.attraction-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform 0.3s}
-.attraction-card:hover{transform:translateY(-5px)}
-.attraction-img{height:240px;object-fit:cover;width:100%}
-.attraction-body{padding:24px}
-.attraction-name{font-size:20px;font-weight:700;margin-bottom:8px}
-.attraction-rating{color:var(--accent-light);margin-bottom:12px}
-.attraction-desc{color:var(--gray-500);margin-bottom:16px;line-height:1.5}
-.attraction-price{font-weight:700;color:var(--accent)}
+/* Buttons */
+.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius); font-weight: 600; font-size: 14px; border: none; transition: all 0.2s; }
+.btn-primary { background: var(--accent); color: var(--white); }
+.btn-primary:hover { background: var(--primary-light); }
+.btn-secondary { background: var(--gray-200); color: var(--gray-700); }
+.btn-secondary:hover { background: var(--gray-300); }
+.btn-success { background: var(--success); color: var(--white); }
+.btn-danger { background: var(--danger); color: var(--white); }
+.btn-sm { padding: 6px 12px; font-size: 13px; }
+.btn-icon { background: none; border: none; font-size: 18px; color: var(--gray-500); cursor: pointer; padding: 4px; }
+.btn-icon:hover { color: var(--accent); }
 
-/* Hotels */
-.hotels-section{background:var(--white)}
-.hotels-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:24px}
-.hotel-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
-.hotel-card-img{height:200px;object-fit:cover;width:100%}
-.hotel-card-body{padding:24px}
-.hotel-category{display:inline-block;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:700;margin-bottom:12px}
-.hotel-category.economy{background:#d1fae5;color:#065f46}
-.hotel-category.comfort{background:#dbeafe;color:#1e40af}
-.hotel-category.premium{background:#ede9fe;color:#5b21b6}
-.hotel-name{font-size:20px;font-weight:700;margin-bottom:8px}
-.hotel-district{color:var(--gray-500);margin-bottom:12px}
-.hotel-price{font-size:18px;font-weight:700;color:var(--accent)}
-
-/* Transport */
-.transport-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:20px}
-.transport-card{background:var(--white);border-radius:var(--radius);padding:24px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow);transition:transform 0.3s}
-.transport-card:hover{transform:translateX(5px)}
-.transport-icon{font-size:40px}
-.transport-info{flex:1}
-.transport-route{font-weight:700;margin-bottom:4px}
-.transport-type{color:var(--gray-500);font-size:14px}
-.transport-details{text-align:right}
-.transport-duration{font-size:14px;color:var(--gray-500)}
-.transport-price{font-weight:700;color:var(--accent)}
-
-/* Budget Calculator */
-.budget-section{background:linear-gradient(135deg, var(--accent) 0%, #a78bfa 100%);color:var(--white)}
-.budget-section .section-title{color:var(--white)}
-.calculator{background:var(--white);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow-lg);max-width:900px;margin:0 auto}
-.calculator-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:24px;margin-bottom:32px}
-.calculator-item label{display:block;font-weight:700;margin-bottom:12px;color:var(--ink)}
-.calculator-item select,.calculator-item input{width:100%;padding:14px;border:2px solid var(--gray-200);border-radius:var(--radius-sm);font-size:16px;font-family:inherit;cursor:pointer}
-.calculator-item select:focus,.calculator-item input:focus{outline:none;border-color:var(--accent)}
-.budget-result{background:var(--bg);border-radius:var(--radius);padding:32px}
-.budget-breakdown{margin-bottom:24px}
-.budget-line{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--gray-200)}
-.budget-line:last-child{border:none}
-.budget-label{display:flex;align-items:center;gap:12px}
-.budget-label span:first-child{font-size:20px}
-.budget-total{border-top:3px solid var(--ink);margin-top:16px;padding-top:24px}
-.budget-total .budget-line{font-size:24px;font-weight:700}
-.budget-per-person{font-size:18px;color:var(--accent);margin-top:16px;text-align:center}
-
-/* Budget Cards */
-.budget-cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:20px}
-.budget-card{background:var(--white);border-radius:var(--radius);padding:24px;text-align:center;box-shadow:var(--shadow);transition:all 0.3s}
-.budget-card:hover{transform:scale(1.05)}
-.budget-card-icon{font-size:48px;margin-bottom:16px}
-.budget-card-title{font-weight:700}
-
-/* Tips */
-.tips-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:24px}
-.tip-card{background:var(--white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
-.tip-icon{font-size:40px;margin-bottom:16px}
-.tip-title{font-size:20px;font-weight:700;margin-bottom:12px}
-.tip-text{color:var(--gray-500)}
-
-/* Checklist */
-.checklist-section{background:var(--white)}
-.checklist-container{max-width:600px;margin:0 auto}
-.checklist-progress{margin-bottom:32px}
-.checklist-progress-bar{height:12px;background:var(--gray-200);border-radius:6px;overflow:hidden;margin-top:12px}
-.checklist-progress-fill{height:100%;background:linear-gradient(90deg, var(--accent), var(--accent-light));transition:width 0.3s}
-.checklist-items{list-style:none}
-.checklist-item{display:flex;align-items:center;padding:16px;border-bottom:1px solid var(--gray-200);cursor:pointer;transition:background 0.3s}
-.checklist-item:hover{background:var(--bg)}
-.checklist-item:last-child{border:none}
-.checklist-checkbox{width:24px;height:24px;border:2px solid var(--gray-500);border-radius:6px;margin-right:16px;display:flex;align-items:center;justify-content:center;transition:all 0.3s}
-.checklist-item.done .checklist-checkbox{background:var(--accent);border-color:var(--accent)}
-.checklist-item.done .checklist-checkbox::after{content:'✓';color:var(--white);font-size:16px;font-weight:700}
-.checklist-item.done .checklist-text{text-decoration:line-through;color:var(--gray-500)}
-.checklist-text{flex:1;font-weight:600}
-
-/* Map */
-.map-section{background:var(--white)}
-.map-container{height:500px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
+/* Forms */
+.form-group { margin-bottom: 16px; }
+.form-label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--gray-700); }
+.form-input, .form-select { width: 100%; padding: 10px 14px; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: 14px; font-family: inherit; }
+.form-input:focus, .form-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1); }
+.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
 
 /* Modal */
-.modal{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
-.modal.open{display:flex}
-.modal-content{background:var(--white);border-radius:var(--radius);max-width:900px;max-height:90vh;overflow-y:auto;position:relative;animation:modalSlide 0.3s ease}
-@keyframes modalSlide{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}
-.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:32px;cursor:pointer;color:var(--gray-500);z-index:10}
-.modal-close:hover{color:var(--ink)}
-.modal-header{position:sticky;top:0;background:var(--white);padding:24px;border-bottom:1px solid var(--gray-200);z-index:5}
-.modal-title{font-size:32px;font-weight:700}
-.modal-body{padding:24px}
+.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: none; align-items: center; justify-content: center; }
+.modal.open { display: flex; }
+.modal-content { background: var(--white); border-radius: var(--radius-lg); max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; }
+.modal-header { padding: 20px; border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center; }
+.modal-title { font-size: 20px; font-weight: 700; }
+.modal-close { background: none; border: none; font-size: 24px; color: var(--gray-500); cursor: pointer; }
+.modal-body { padding: 20px; }
+.modal-footer { padding: 20px; border-top: 1px solid var(--gray-200); display: flex; justify-content: flex-end; gap: 12px; }
+
+/* Alerts */
+.alert { padding: 16px; border-radius: var(--radius); margin-bottom: 16px; display: flex; align-items: start; gap: 12px; }
+.alert-warning { background: #fffaf0; border-left: 4px solid var(--warning); }
+.alert-danger { background: #fff5f5; border-left: 4px solid var(--danger); }
+.alert-icon { font-size: 20px; }
+.alert-content { flex: 1; }
+.alert-title { font-weight: 600; margin-bottom: 4px; }
+.alert-text { color: var(--gray-600); font-size: 14px; }
+
+/* Charts placeholder */
+.chart-container { height: 300px; position: relative; }
+.chart-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--gray-400); font-size: 14px; }
+
+/* Timeline */
+.timeline { position: relative; padding-left: 30px; }
+.timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--gray-300); }
+.timeline-item { position: relative; padding-bottom: 20px; }
+.timeline-marker { position: absolute; left: -26px; width: 18px; height: 18px; background: var(--accent); border-radius: 50%; border: 3px solid var(--white); box-shadow: var(--shadow); }
+.timeline-date { font-size: 13px; color: var(--gray-500); margin-bottom: 4px; }
+.timeline-content { font-weight: 600; }
+
+/* Badge */
+.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
+.badge-blue { background: #bee3f8; color: #2c5282; }
+.badge-green { background: #c6f6d5; color: #22543d; }
+.badge-red { background: #fed7d7; color: #742a2a; }
+.badge-yellow { background: #fefcbf; color: #744210; }
 
 /* Responsive */
-@media (max-width: 768px){
-  .nav{display:none}
-  .menu-toggle{display:block}
-  .nav.active{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--white);flex-direction:column;padding:20px;box-shadow:var(--shadow)}
-  .hero-buttons{flex-direction:column;align-items:center}
-  .hero-buttons .btn{width:100%;max-width:300px}
-  .timeline::before{left:20px}
-  .timeline-item{padding-left:60px}
-  .timeline-marker{width:40px;height:40px;font-size:18px}
-  .calculator{padding:24px}
-  .section{padding:60px 0}
+@media (max-width: 1024px) {
+  .main { margin-left: 0; }
+  .sidebar { transform: translateX(-100%); }
+  .sidebar.open { transform: translateX(0); }
+  .menu-toggle { display: block; }
+}
+@media (max-width: 768px) {
+  .kpi-grid { grid-template-columns: 1fr; }
+  .form-row { grid-template-columns: 1fr; }
+  .header { padding: 12px 16px; }
+  .content { padding: 16px; }
 }
-
-/* Reveal animation */
-.reveal{opacity:0;transform:translateY(30px);transition:all 0.6s ease}
-.reveal.in{opacity:1;transform:none}
 </style>
 </head>
 <body>
 
-<!-- Header -->
-<header class="header">
-  <div class="header-inner">
-    <div class="logo">🇪🇺 Europe Trip</div>
-    <nav class="nav" id="nav">
-      <a href="#route">🗺️ Маршрут</a>
-      <a href="#days">📅 15 дней</a>
-      <a href="#hotels">🏨 Отели</a>
-      <a href="#transport">🚆 Транспорт</a>
-      <a href="#budget">💰 Бюджет</a>
-      <a href="#checklist">🎒 Чек-лист</a>
+<div class="app">
+  <!-- Sidebar -->
+  <aside class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+      <div class="sidebar-title">💧 Коммунальный бюджет</div>
+    </div>
+    <nav class="sidebar-nav">
+      <div class="nav-item active" data-page="dashboard">
+        <span class="nav-icon">📊</span>
+        <span>Главная</span>
+      </div>
+      <div class="nav-item" data-page="regulations">
+        <span class="nav-icon">📋</span>
+        <span>Регламент</span>
+      </div>
+      <div class="nav-item" data-page="budget">
+        <span class="nav-icon">💰</span>
+        <span>Бюджет</span>
+      </div>
+      <div class="nav-item" data-page="tariffs">
+        <span class="nav-icon">🏷️</span>
+        <span>Тарифы</span>
+      </div>
+      <div class="nav-item" data-page="consumption">
+        <span class="nav-icon">📈</span>
+        <span>Потребление</span>
+      </div>
+      <div class="nav-item" data-page="planfact">
+        <span class="nav-icon">⚖️</span>
+        <span>План-Факт</span>
+      </div>
+      <div class="nav-item" data-page="reports">
+        <span class="nav-icon">📑</span>
+        <span>Отчеты</span>
+      </div>
+      <div class="nav-item" data-page="settings">
+        <span class="nav-icon">⚙️</span>
+        <span>Настройки</span>
+      </div>
     </nav>
-    <button class="menu-toggle" id="menuToggle" aria-label="Меню">☰</button>
-  </div>
-</header>
+  </aside>
 
-<!-- Hero -->
-<section class="hero">
-  <div class="hero-bg"></div>
-  <div class="hero-pattern"></div>
-  <div class="hero-content">
-    <h1>ЕВРОПА ЗА 15 ДНЕЙ</h1>
-    <p>Идеальный маршрут для первой самостоятельной поездки из Астаны</p>
-    <div class="hero-route">
-      <span>🇰🇿 Астана</span>
-      <span>→</span>
-      <span>🇨🇿 Прага</span>
-      <span>→</span>
-      <span>🇦🇹 Вена</span>
-      <span>→</span>
-      <span>🇸🇰 Братислава</span>
-      <span>→</span>
-      <span>🇭🇺 Будапешт</span>
-    </div>
-    <div class="hero-buttons">
-      <button class="btn" onclick="document.getElementById('route').scrollIntoView({behavior:'smooth'})">Посмотреть маршрут</button>
-      <button class="btn btn-secondary" onclick="document.getElementById('budget').scrollIntoView({behavior:'smooth'})">Рассчитать бюджет</button>
-    </div>
-  </div>
-</section>
-
-<!-- Route -->
-<section class="section" id="route">
-  <div class="container">
-    <h2 class="section-title reveal">Ваш маршрут на 15 дней</h2>
-    <div class="route-visual reveal" id="routeVisual"></div>
-    <div class="cities-grid" id="citiesGrid"></div>
-  </div>
-</section>
-
-<!-- Days Timeline -->
-<section class="section" id="days" style="background:var(--white)">
-  <div class="container">
-    <h2 class="section-title reveal">15 дней в Европе</h2>
-    <div class="timeline" id="timeline"></div>
-  </div>
-</section>
-
-<!-- Hotels -->
-<section class="section hotels-section" id="hotels">
-  <div class="container">
-    <h2 class="section-title reveal">Где остановиться</h2>
-    <div class="hotels-grid" id="hotelsGrid"></div>
-  </div>
-</section>
-
-<!-- Transport -->
-<section class="section" id="transport">
-  <div class="container">
-    <h2 class="section-title reveal">Как перемещаться между городами</h2>
-    <div class="transport-grid" id="transportGrid"></div>
-  </div>
-</section>
-
-<!-- Budget Calculator -->
-<section class="section budget-section" id="budget">
-  <div class="container">
-    <h2 class="section-title">Сколько стоит поездка?</h2>
-    <div class="calculator reveal">
-      <div class="calculator-grid">
-        <div class="calculator-item">
-          <label>Путешественников</label>
-          <input type="number" id="travelers" value="1" min="1" max="10" onchange="calculateBudget()">
-        </div>
-        <div class="calculator-item">
-          <label>Категория отеля</label>
-          <select id="hotelCategory" onchange="calculateBudget()">
-            <option value="economy">Эконом</option>
-            <option value="comfort" selected>Комфорт</option>
-            <option value="premium">Премиум</option>
-          </select>
-        </div>
-        <div class="calculator-item">
-          <label>Питание</label>
-          <select id="foodCategory" onchange="calculateBudget()">
-            <option value="economy">Эконом</option>
-            <option value="medium" selected>Средний</option>
-            <option value="comfort">Комфорт</option>
-          </select>
-        </div>
-        <div class="calculator-item">
-          <label>Экскурсии</label>
-          <select id="attractionsCategory" onchange="calculateBudget()">
-            <option value="min">Минимум</option>
-            <option value="standard" selected>Стандарт</option>
-            <option value="many">Много экскурсий</option>
-          </select>
+  <!-- Main -->
+  <main class="main">
+    <!-- Header -->
+    <header class="header">
+      <div class="header-left">
+        <button class="menu-toggle" id="menuToggle">☰</button>
+        <select class="year-select" id="yearSelect" onchange="app.changeYear()">
+          <option value="2025">2025</option>
+          <option value="2026" selected>2026</option>
+          <option value="2027">2027</option>
+        </select>
+      </div>
+      <div class="header-right">
+        <button class="notification-btn">
+          🔔
+          <span class="notification-badge"></span>
+        </button>
+        <div class="user-menu">
+          <div class="user-avatar">Ж</div>
+          <span>Жанна</span>
         </div>
       </div>
-      <div class="budget-result">
-        <div class="budget-breakdown" id="budgetBreakdown"></div>
-        <div class="budget-total">
-          <div class="budget-line">
-            <span class="budget-label"><span>💰</span> ИТОГО:</span>
-            <span id="budgetTotal">0 ₸</span>
+    </header>
+
+    <!-- Content -->
+    <div class="content">
+      
+      <!-- Dashboard -->
+      <div class="page active" id="page-dashboard">
+        <div class="page-header">
+          <h1 class="page-title">Dashboard</h1>
+          <p class="page-subtitle">Обзор коммунального бюджета на 2026 год</p>
+        </div>
+
+        <!-- KPI Cards -->
+        <div class="kpi-grid" id="kpiGrid"></div>
+
+        <!-- Alerts -->
+        <div id="alertsContainer"></div>
+
+        <!-- Charts Row -->
+        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 24px;">
+          <!-- Plan/Fact Chart -->
+          <div class="card">
+            <div class="card-header">
+              <h3 class="card-title">План / Факт / Прогноз</h3>
+            </div>
+            <div class="card-body">
+              <div class="chart-container" id="planFactChart"></div>
+            </div>
+          </div>
+
+          <!-- Structure Chart -->
+          <div class="card">
+            <div class="card-header">
+              <h3 class="card-title">Структура расходов</h3>
+            </div>
+            <div class="card-body">
+              <div class="chart-container" id="structureChart"></div>
+            </div>
           </div>
         </div>
-        <div class="budget-per-person" id="budgetPerPerson"></div>
-      </div>
-    </div>
-    <div class="budget-cards reveal" style="margin-top:40px">
-      <div class="budget-card"><div class="budget-card-icon">✈️</div><div class="budget-card-title">Авиабилеты</div></div>
-      <div class="budget-card"><div class="budget-card-icon">🚆</div><div class="budget-card-title">Переезды</div></div>
-      <div class="budget-card"><div class="budget-card-icon">🏨</div><div class="budget-card-title">Отели</div></div>
-      <div class="budget-card"><div class="budget-card-icon">🍽️</div><div class="budget-card-title">Питание</div></div>
-      <div class="budget-card"><div class="budget-card-icon">🎟️</div><div class="budget-card-title">Достопримечательности</div></div>
-      <div class="budget-card"><div class="budget-card-icon">🚇</div><div class="budget-card-title">Транспорт</div></div>
-    </div>
-  </div>
-</section>
 
-<!-- Tips -->
-<section class="section" id="tips">
-  <div class="container">
-    <h2 class="section-title reveal">Перед поездкой</h2>
-    <div class="tips-grid" id="tipsGrid"></div>
-  </div>
-</section>
-
-<!-- Checklist -->
-<section class="section checklist-section" id="checklist">
-  <div class="container">
-    <h2 class="section-title reveal">Чек-лист подготовки</h2>
-    <div class="checklist-container">
-      <div class="checklist-progress">
-        <div style="display:flex;justify-content:space-between;font-weight:700">
-          <span>Готово:</span>
-          <span id="checklistCount">0 / 11</span>
-        </div>
-        <div class="checklist-progress-bar">
-          <div class="checklist-progress-fill" id="checklistProgress" style="width:0%"></div>
+        <!-- Recent Activity -->
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Журнал изменений</h3>
+          </div>
+          <div class="card-body">
+            <div class="table-container">
+              <table id="auditTable"></table>
+            </div>
+          </div>
         </div>
       </div>
-      <ul class="checklist-items" id="checklistItems"></ul>
-    </div>
-  </div>
-</section>
 
-<!-- Modal for City Details -->
-<div class="modal" id="cityModal">
+      <!-- Regulations -->
+      <div class="page" id="page-regulations">
+        <div class="page-header">
+          <h1 class="page-title">Регламент</h1>
+          <p class="page-subtitle">Электронная версия утвержденного регламента</p>
+        </div>
+        <div class="card">
+          <div class="card-body" id="regulationsContent"></div>
+        </div>
+      </div>
+
+      <!-- Budget -->
+      <div class="page" id="page-budget">
+        <div class="page-header">
+          <h1 class="page-title">Бюджет</h1>
+          <p class="page-subtitle">Годовой и помесячный бюджет коммунальных расходов</p>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Годовой бюджет 2026</h3>
+            <button class="btn btn-primary btn-sm" onclick="app.openBudgetModal()">+ Добавить статью</button>
+          </div>
+          <div class="card-body">
+            <div class="table-container">
+              <table id="budgetTable"></table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tariffs -->
+      <div class="page" id="page-tariffs">
+        <div class="page-header">
+          <h1 class="page-title">Тарифы</h1>
+          <p class="page-subtitle">Управление тарифами и история изменений</p>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Текущие тарифы</h3>
+            <button class="btn btn-primary btn-sm" onclick="app.openTariffModal()">+ Добавить тариф</button>
+          </div>
+          <div class="card-body">
+            <div class="table-container">
+              <table id="tariffTable"></table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Consumption -->
+      <div class="page" id="page-consumption">
+        <div class="page-header">
+          <h1 class="page-title">Потребление</h1>
+          <p class="page-subtitle">Ввод показаний и история потребления</p>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Внести показания</h3>
+            <button class="btn btn-primary btn-sm" onclick="app.openReadingModal()">+ Внести показания</button>
+          </div>
+          <div class="card-body">
+            <div class="table-container">
+              <table id="consumptionTable"></table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Plan-Fact -->
+      <div class="page" id="page-planfact">
+        <div class="page-header">
+          <h1 class="page-title">План-Факт анализ</h1>
+          <p class="page-subtitle">Сравнение плановых и фактических показателей</p>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Анализ отклонений</h3>
+          </div>
+          <div class="card-body">
+            <div class="table-container">
+              <table id="planFactTable"></table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Reports -->
+      <div class="page" id="page-reports">
+        <div class="page-header">
+          <h1 class="page-title">Отчеты</h1>
+          <p class="page-subtitle">Формирование и экспорт отчетов</p>
+        </div>
+        <div class="card">
+          <div class="card-body">
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;">
+              <div class="card" style="margin:0; cursor: pointer;" onclick="app.exportReport('budget')">
+                <div class="card-body">
+                  <h4 style="margin-bottom: 8px;">📊 Исполнение бюджета</h4>
+                  <p style="color: var(--gray-500); font-size: 13px;">Отчет по исполнению коммунального бюджета</p>
+                </div>
+              </div>
+              <div class="card" style="margin:0; cursor: pointer;" onclick="app.exportReport('planfact')">
+                <div class="card-body">
+                  <h4 style="margin-bottom: 8px;">⚖️ План-Факт</h4>
+                  <p style="color: var(--gray-500); font-size: 13px;">Сравнение плановых и фактических показателей</p>
+                </div>
+              </div>
+              <div class="card" style="margin:0; cursor: pointer;" onclick="app.exportReport('tariffs')">
+                <div class="card-body">
+                  <h4 style="margin-bottom: 8px;">🏷️ Динамика тарифов</h4>
+                  <p style="color: var(--gray-500); font-size: 13px;">История изменения тарифов</p>
+                </div>
+              </div>
+              <div class="card" style="margin:0; cursor: pointer;" onclick="app.exportReport('consumption')">
+                <div class="card-body">
+                  <h4 style="margin-bottom: 8px;">📈 Динамика потребления</h4>
+                  <p style="color: var(--gray-500); font-size: 13px;">Анализ потребления по месяцам</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Settings -->
+      <div class="page" id="page-settings">
+        <div class="page-header">
+          <h1 class="page-title">Настройки</h1>
+          <p class="page-subtitle">Справочники и параметры системы</p>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Справочник коммунальных услуг</h3>
+          </div>
+          <div class="card-body">
+            <div id="servicesList"></div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </main>
+</div>
+
+<!-- Modal Tariff -->
+<div class="modal" id="tariffModal">
   <div class="modal-content">
-    <button class="modal-close" onclick="closeModal()">&times;</button>
     <div class="modal-header">
-      <h2 class="modal-title" id="modalTitle"></h2>
+      <h3 class="modal-title">Добавить тариф</h3>
+      <button class="modal-close" onclick="app.closeModal('tariffModal')">&times;</button>
+    </div>
+    <div class="modal-body">
+      <form id="tariffForm">
+        <div class="form-group">
+          <label class="form-label">Коммунальная услуга *</label>
+          <select class="form-select" id="tariffService" required></select>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Поставщик *</label>
+          <input type="text" class="form-input" id="tariffSupplier" required>
+        </div>
+        <div class="form-row">
+          <div class="form-group">
+            <label class="form-label">Единица измерения *</label>
+            <select class="form-select" id="tariffUnit" required>
+              <option value="кВт·ч">кВт·ч</option>
+              <option value="Гкал">Гкал</option>
+              <option value="м³">м³</option>
+              <option value="тонна">тонна</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Тариф *</label>
+            <input type="number" step="0.01" class="form-input" id="tariffRate" required>
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group">
+            <label class="form-label">НДС %</label>
+            <input type="number" step="0.1" class="form-input" id="tariffVat" value="12">
+          </div>
+          <div class="form-group">
+            <label class="form-label">Дата начала *</label>
+            <input type="date" class="form-input" id="tariffDateFrom" required>
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Дата окончания</label>
+          <input type="date" class="form-input" id="tariffDateTo">
+        </div>
+        <div class="form-group">
+          <label class="form-label">Основание изменения</label>
+          <input type="text" class="form-input" id="tariffBasis">
+        </div>
+        <div class="form-group">
+          <label class="form-label">Комментарий</label>
+          <textarea class="form-input" id="tariffComment" rows="3"></textarea>
+        </div>
+      </form>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-secondary" onclick="app.closeModal('tariffModal')">Отмена</button>
+      <button class="btn btn-primary" onclick="app.saveTariff()">Сохранить</button>
     </div>
-    <div class="modal-body" id="modalBody"></div>
   </div>
 </div>
 
 <script>
-// Load data
-let DATA = null;
-let checklistData = [];
+// Data Store
+const store = {
+  year: 2026,
+  services: ['Электроэнергия', 'Теплоснабжение', 'Водоснабжение', 'Водоотведение', 'Газ', 'ТБО', 'Прочее'],
+  tariffs: [
+    { id: 1, service: 'Электроэнергия', supplier: 'АО "ЭК Астана"', unit: 'кВт·ч', rate: 28.10, vat: 12, dateFrom: '2026-07-01', dateTo: null, status: 'active' },
+    { id: 2, service: 'Электроэнергия', supplier: 'АО "ЭК Астана"', unit: 'кВт·ч', rate: 25.40, vat: 12, dateFrom: '2026-01-01', dateTo: '2026-06-30', status: 'archived' },
+    { id: 3, service: 'Теплоснабжение', supplier: 'ТОО "ТеплоКом"', unit: 'Гкал', rate: 4200, vat: 12, dateFrom: '2026-01-01', dateTo: null, status: 'active' },
+    { id: 4, service: 'Водоснабжение', supplier: 'ТОО "ВодаСервис"', unit: 'м³', rate: 520, vat: 12, dateFrom: '2026-04-01', dateTo: null, status: 'active' },
+    { id: 5, service: 'Водоснабжение', supplier: 'ТОО "ВодаСервис"', unit: 'м³', rate: 480, vat: 12, dateFrom: '2026-01-01', dateTo: '2026-03-31', status: 'archived' },
+    { id: 6, service: 'Водоотведение', supplier: 'ТОО "ВодаСервис"', unit: 'м³', rate: 380, vat: 12, dateFrom: '2026-01-01', dateTo: null, status: 'active' },
+    { id: 7, service: 'Газ', supplier: 'ТОО "ГазКаз"', unit: 'м³', rate: 18.50, vat: 12, dateFrom: '2026-01-01', dateTo: null, status: 'active' },
+  ],
+  consumption: [
+    { month: 'Янв', electricity: 10200, heat: 180, water: 520, sewerage: 520 },
+    { month: 'Фев', electricity: 10400, heat: 175, water: 530, sewerage: 530 },
+    { month: 'Мар', electricity: 9800, heat: 160, water: 510, sewerage: 510 },
+    { month: 'Апр', electricity: 9200, heat: 140, water: 490, sewerage: 490 },
+    { month: 'Май', electricity: 8800, heat: 100, water: 480, sewerage: 480 },
+    { month: 'Июн', electricity: 8600, heat: 60, water: 500, sewerage: 500 },
+    { month: 'Июл', electricity: 9000, heat: 40, water: 550, sewerage: 550 },
+    { month: 'Авг', electricity: 9400, heat: 45, water: 560, sewerage: 560 },
+    { month: 'Сен', electricity: 9600, heat: 80, water: 520, sewerage: 520 },
+    { month: 'Окт', electricity: 10000, heat: 130, water: 510, sewerage: 510 },
+    { month: 'Ноя', electricity: 10600, heat: 170, water: 530, sewerage: 530 },
+    { month: 'Дек', electricity: 11000, heat: 185, water: 540, sewerage: 540 },
+  ],
+  budget: {
+    plan: [1520, 1540, 1480, 1380, 1280, 1180, 1220, 1260, 1320, 1420, 1520, 1580],
+    fact: [1480, 1560, 1450, 1360, 1250, 1200, 1380, 1420, 1300, 1400, 1500, null],
+  },
+  auditLog: [
+    { date: '21.08.26', user: 'Жанна', object: 'Тариф', change: 'Электроэнергия: 25.40 → 28.10 ₸' },
+    { date: '20.08.26', user: 'Жанна', object: 'Бюджет', change: 'Перерасчет бюджета на II полугодие' },
+    { date: '19.08.26', user: 'Бухгалтер', object: 'Факт', change: 'Внесены фактические расходы за Июль' },
+  ]
+};
 
-fetch('data.json')
-  .then(r => r.json())
-  .then(data => {
-    DATA = data;
-    checklistData = [...data.checklist];
-    renderAll();
-    calculateBudget();
-    updateChecklist();
-  })
-  .catch(err => {
-    console.error('Failed to load data:', err);
-    document.getElementById('citiesGrid').innerHTML = '<p>Ошибка загрузки данных. Обновите страницу.</p>';
-  });
+// Application
+const app = {
+  init() {
+    this.renderNavigation();
+    this.renderDashboard();
+    this.renderTariffs();
+    this.renderBudget();
+    this.renderConsumption();
+    this.renderPlanFact();
+    this.renderRegulations();
+    this.renderSettings();
+    this.setupEventListeners();
+  },
 
-function renderAll() {
-  renderRoute();
-  renderCities();
-  renderTimeline();
-  renderHotels();
-  renderTransport();
-  renderTips();
-  renderChecklist();
-}
+  changeYear() {
+    store.year = parseInt(document.getElementById('yearSelect').value);
+    this.renderDashboard();
+    this.renderBudget();
+    this.renderPlanFact();
+  },
 
-function renderRoute() {
-  const route = document.getElementById('routeVisual');
-  const cities = DATA.cities;
-  let html = '<div class="route-city"><span class="flag">🇰🇿</span><div class="name">Астана</div></div>';
-  cities.forEach(city => {
-    html += '<div class="route-arrow">↓</div>';
-    html += `<div class="route-city"><span class="flag">${city.flag}</span><div class="name">${city.name}</div></div>`;
-  });
-  html += '<div class="route-arrow">↓</div>';
-  html += '<div class="route-city"><span class="flag">🇰🇿</span><div class="name">Астана</div></div>';
-  route.innerHTML = html;
-}
-
-function renderCities() {
-  const grid = document.getElementById('citiesGrid');
-  grid.innerHTML = DATA.cities.map(city => `
-    <div class="city-card" onclick="openCityModal('${city.id}')">
-      <img src="${city.image}" alt="${city.name}" class="city-card-img" loading="lazy">
-      <div class="city-card-body">
-        <div class="city-card-header">
-          <div class="city-card-title">${city.name} ${city.flag}</div>
-          <div class="city-card-nights">${city.nights} ночей</div>
-        </div>
-        <div class="city-card-price">${city.priceRange} / ночь</div>
-        <div class="city-card-district">Лучший район: ${city.district}</div>
-        <button class="btn" style="width:100%">Подробнее</button>
-      </div>
-    </div>
-  `).join('');
-}
-
-function renderTimeline() {
-  const timeline = document.getElementById('timeline');
-  timeline.innerHTML = DATA.days.map((day, i) => `
-    <div class="timeline-item reveal">
-      <div class="timeline-marker">${day.icon}</div>
-      <div class="timeline-content">
-        <div class="timeline-day">День ${day.day}</div>
-        <div class="timeline-title">${day.title}</div>
-        <ul class="timeline-activities">
-          ${day.activities.map(a => `<li>${a}</li>`).join('')}
-        </ul>
-        ${day.cost ? `<div class="timeline-cost">Стоимость дня: ${day.cost}</div>` : ''}
-      </div>
-    </div>
-  `).join('');
-}
-
-function renderHotels() {
-  const grid = document.getElementById('hotelsGrid');
-  const allHotels = [];
-  Object.keys(DATA.hotels).forEach(cityId => {
-    const city = DATA.cities.find(c => c.id === cityId);
-    DATA.hotels[cityId].forEach(hotel => {
-      allHotels.push({...hotel, cityName: city.name, cityFlag: city.flag});
+  renderNavigation() {
+    document.querySelectorAll('.nav-item').forEach(item => {
+      item.addEventListener('click', () => {
+        document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
+        item.classList.add('active');
+        const page = item.dataset.page;
+        document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+        document.getElementById(`page-${page}`).classList.add('active');
+        document.getElementById('sidebar').classList.remove('open');
+      });
     });
-  });
-  grid.innerHTML = allHotels.map(hotel => `
-    <div class="hotel-card">
-      <img src="${hotel.image}" alt="${hotel.name}" class="hotel-card-img" loading="lazy">
-      <div class="hotel-card-body">
-        <span class="hotel-category ${hotel.category.toLowerCase()}">${hotel.category}</span>
-        <div class="hotel-name">${hotel.name}</div>
-        <div class="hotel-district">📍 ${hotel.cityName} ${hotel.cityFlag} — ${hotel.district}</div>
-        <div class="hotel-price">${hotel.price}</div>
+  },
+
+  renderDashboard() {
+    const totalPlan = store.budget.plan.reduce((a, b) => a + b, 0) * 1000;
+    const totalFact = store.budget.fact.filter(x => x).reduce((a, b) => a + b, 0) * 1000;
+    const forecast = totalPlan * 0.98;
+    const deviation = totalFact - totalPlan;
+    const deviationPercent = ((deviation / totalPlan) * 100).toFixed(2);
+    const accuracy = (100 - Math.abs(deviationPercent)).toFixed(2);
+
+    document.getElementById('kpiGrid').innerHTML = `
+      <div class="kpi-card">
+        <div class="kpi-label">Годовой бюджет</div>
+        <div class="kpi-value">${(totalPlan / 1000000).toFixed(1)} млн ₸</div>
       </div>
-    </div>
-  `).join('');
-}
-
-function renderTransport() {
-  const grid = document.getElementById('transportGrid');
-  grid.innerHTML = DATA.transport.map(t => `
-    <div class="transport-card">
-      <div class="transport-icon">${t.type.includes('✈️') ? '✈️' : '🚆'}</div>
-      <div class="transport-info">
-        <div class="transport-route">${t.from} → ${t.to}</div>
-        <div class="transport-type">${t.type.replace(/[✈️🚆]/g, '').trim()}</div>
-      </div>
-      <div class="transport-details">
-        <div class="transport-duration">${t.duration}</div>
-        <div class="transport-price">${t.price}</div>
-      </div>
-    </div>
-  `).join('');
-}
-
-function renderTips() {
-  const grid = document.getElementById('tipsGrid');
-  grid.innerHTML = DATA.tips.map(tip => `
-    <div class="tip-card reveal">
-      <div class="tip-icon">${tip.icon}</div>
-      <div class="tip-title">${tip.title}</div>
-      <div class="tip-text">${tip.text}</div>
-    </div>
-  `).join('');
-}
-
-function renderChecklist() {
-  const list = document.getElementById('checklistItems');
-  list.innerHTML = checklistData.map((item, i) => `
-    <li class="checklist-item ${item.done ? 'done' : ''}" onclick="toggleChecklist(${i})">
-      <div class="checklist-checkbox"></div>
-      <div class="checklist-text">${item.text}</div>
-    </li>
-  `).join('');
-  updateChecklist();
-}
-
-function updateChecklist() {
-  const done = checklistData.filter(i => i.done).length;
-  const total = checklistData.length;
-  document.getElementById('checklistCount').textContent = `${done} / ${total}`;
-  document.getElementById('checklistProgress').style.width = `${(done/total)*100}%`;
-}
-
-function toggleChecklist(index) {
-  checklistData[index].done = !checklistData[index].done;
-  renderChecklist();
-  localStorage.setItem('europeTripChecklist', JSON.stringify(checklistData));
-}
-
-// Load saved checklist
-const saved = localStorage.getItem('europeTripChecklist');
-if (saved) {
-  try { checklistData = JSON.parse(saved); } catch(e) {}
-}
-
-function calculateBudget() {
-  if (!DATA) return;
-  const travelers = parseInt(document.getElementById('travelers').value) || 1;
-  const hotelCat = document.getElementById('hotelCategory').value;
-  const foodCat = document.getElementById('foodCategory').value;
-  const attractionsCat = document.getElementById('attractionsCategory').value;
-  
-  const b = DATA.budget;
-  const flights = b.flights * travelers;
-  const trains = b.trains * travelers;
-  const hotels = b.hotels[hotelCat] * travelers;
-  const food = b.food[foodCat] * travelers;
-  const attractions = b.attractions[attractionsCat] * travelers;
-  const transport = b.transport * travelers;
-  const total = flights + trains + hotels + food + attractions + transport;
-  
-  document.getElementById('budgetBreakdown').innerHTML = `
-    <div class="budget-line"><span class="budget-label"><span>✈️</span> Авиабилеты</span><span>${flights.toLocaleString()} ₸</span></div>
-    <div class="budget-line"><span class="budget-label"><span>🚆</span> Переезды</span><span>${trains.toLocaleString()} ₸</span></div>
-    <div class="budget-line"><span class="budget-label"><span>🏨</span> Отели</span><span>${hotels.toLocaleString()} ₸</span></div>
-    <div class="budget-line"><span class="budget-label"><span>🍽️</span> Питание</span><span>${food.toLocaleString()} ₸</span></div>
-    <div class="budget-line"><span class="budget-label"><span>🎟️</span> Достопримечательности</span><span>${attractions.toLocaleString()} ₸</span></div>
-    <div class="budget-line"><span class="budget-label"><span>🚇</span> Транспорт</span><span>${transport.toLocaleString()} ₸</span></div>
-  `;
-  document.getElementById('budgetTotal').textContent = `${total.toLocaleString()} ₸`;
-  document.getElementById('budgetPerPerson').textContent = travelers > 1 ? `≈ ${Math.round(total/travelers).toLocaleString()} ₸ на человека` : '';
-}
-
-function openCityModal(cityId) {
-  const city = DATA.cities.find(c => c.id === cityId);
-  const attractions = DATA.attractions[cityId] || [];
-  const hotels = DATA.hotels[cityId] || [];
-  
-  document.getElementById('modalTitle').textContent = `${city.name} ${city.flag}`;
-  document.getElementById('modalBody').innerHTML = `
-    <img src="${city.image}" alt="${city.name}" style="width:100%;height:300px;object-fit:cover;margin-bottom:24px;border-radius:var(--radius)">
-    <p style="font-size:18px;margin-bottom:24px;color:var(--gray-500)">${city.description}</p>
-    <div style="display:flex;gap:24px;margin-bottom:32px;flex-wrap:wrap">
-      <div><strong>📅 Ночей:</strong> ${city.nights}</div>
-      <div><strong>💰 Проживание:</strong> ${city.priceRange} / ночь</div>
-      <div><strong>📍 Район:</strong> ${city.district}</div>
-    </div>
-    
-    <h3 style="margin-bottom:20px">Что посмотреть</h3>
-    <div class="attractions-grid" style="margin-bottom:32px">
-      ${attractions.map(a => `
-        <div class="attraction-card">
-          <img src="${a.image}" alt="${a.name}" class="attraction-img" loading="lazy">
-          <div class="attraction-body">
-            <div class="attraction-name">${a.name}</div>
-            <div class="attraction-rating">${'⭐'.repeat(a.rating)}${'☆'.repeat(5-a.rating)}</div>
-            <div class="attraction-desc">${a.description}</div>
-            <div class="attraction-price">Билет: ${a.price}</div>
-          </div>
+      <div class="kpi-card ${deviation < 0 ? 'success' : 'danger'}">
+        <div class="kpi-label">Фактические расходы</div>
+        <div class="kpi-value">${(totalFact / 1000000).toFixed(1)} млн ₸</div>
+        <div class="kpi-delta ${deviation < 0 ? 'positive' : 'negative'}">
+          ${deviation < 0 ? '↓' : '↑'} ${Math.abs(deviation / 1000).toFixed(0)} тыс. ₸
         </div>
-      `).join('')}
-    </div>
-    
-    <h3 style="margin-bottom:20px">Где жить</h3>
-    <div class="hotels-grid">
-      ${hotels.map(h => `
-        <div class="hotel-card">
-          <img src="${h.image}" alt="${h.name}" class="hotel-card-img" loading="lazy">
-          <div class="hotel-card-body">
-            <span class="hotel-category ${h.category.toLowerCase()}">${h.category}</span>
-            <div class="hotel-name">${h.name}</div>
-            <div class="hotel-district">📍 ${h.district}</div>
-            <div class="hotel-price">${h.price}</div>
-          </div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label">Прогноз до конца года</div>
+        <div class="kpi-value">${(forecast / 1000000).toFixed(1)} млн ₸</div>
+      </div>
+      <div class="kpi-card ${deviation < 0 ? 'success' : 'danger'}">
+        <div class="kpi-label">Отклонение</div>
+        <div class="kpi-value">${(deviation / 1000).toFixed(0)} тыс. ₸</div>
+        <div class="kpi-delta ${deviation < 0 ? 'positive' : 'negative'}">${deviationPercent}%</div>
+      </div>
+      <div class="kpi-card success">
+        <div class="kpi-label">Точность бюджета</div>
+        <div class="kpi-value">${accuracy}%</div>
+        <div class="kpi-delta positive">Цель: ≥97%</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label">Исполнение бюджета</div>
+        <div class="kpi-value">${((totalFact / totalPlan) * 100).toFixed(1)}%</div>
+      </div>
+    `;
+
+    // Alerts
+    const alerts = `
+      <div class="alert alert-warning">
+        <span class="alert-icon">⚠️</span>
+        <div class="alert-content">
+          <div class="alert-title">Водоснабжение</div>
+          <div class="alert-text">Фактическое потребление превышает план на 8,4%. План: 6 500 м³, Факт: 7 046 м³</div>
         </div>
-      `).join('')}
-    </div>
-  `;
-  document.getElementById('cityModal').classList.add('open');
-  document.body.style.overflow = 'hidden';
-}
+        <button class="btn btn-sm btn-secondary">Подробнее</button>
+      </div>
+      <div class="alert alert-danger">
+        <span class="alert-icon">🔴</span>
+        <div class="alert-content">
+          <div class="alert-title">Электроэнергия</div>
+          <div class="alert-text">Обнаружено изменение тарифа. Старый: 25,40 ₸, Новый: 28,10 ₸ с 01.07.2026</div>
+        </div>
+        <button class="btn btn-sm btn-primary" onclick="alert('Бюджет пересчитан')">Пересчитать</button>
+      </div>
+    `;
+    document.getElementById('alertsContainer').innerHTML = alerts;
 
-function closeModal() {
-  document.getElementById('cityModal').classList.remove('open');
-  document.body.style.overflow = '';
-}
+    // Audit Log
+    const auditRows = store.auditLog.map(log => `
+      <tr>
+        <td>${log.date}</td>
+        <td>${log.user}</td>
+        <td>${log.object}</td>
+        <td>${log.change}</td>
+      </tr>
+    `).join('');
+    document.getElementById('auditTable').innerHTML = `
+      <thead><tr><th>Дата</th><th>Пользователь</th><th>Объект</th><th>Изменение</th></tr></thead>
+      <tbody>${auditRows}</tbody>
+    `;
 
-// Close modal on outside click
-document.getElementById('cityModal').addEventListener('click', (e) => {
-  if (e.target.id === 'cityModal') closeModal();
-});
+    // Charts (simple CSS-based)
+    this.renderCharts();
+  },
 
-// Mobile menu
-document.getElementById('menuToggle').addEventListener('click', () => {
-  document.getElementById('nav').classList.toggle('active');
-});
-
-// Reveal on scroll
-const observer = new IntersectionObserver(entries => {
-  entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
-}, {threshold: 0.15});
-document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
-
-// Smooth scroll for nav links
-document.querySelectorAll('a[href^="#"]').forEach(a => {
-  a.addEventListener('click', function(e) {
-    e.preventDefault();
-    const target = document.querySelector(this.getAttribute('href'));
-    if (target) {
-      target.scrollIntoView({behavior: 'smooth'});
-      document.getElementById('nav').classList.remove('active');
+  renderCharts() {
+    const months = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];
+    
+    // Plan/Fact Chart
+    const maxVal = Math.max(...store.budget.plan, ...store.budget.fact.filter(x => x)) * 1.1;
+    let planFactHtml = '<div style="display: flex; align-items: flex-end; height: 250px; gap: 8px; padding: 20px 0;">';
+    for (let i = 0; i < 12; i++) {
+      const planH = (store.budget.plan[i] / maxVal) * 100;
+      const factH = store.budget.fact[i] ? (store.budget.fact[i] / maxVal) * 100 : 0;
+      planFactHtml += `
+        <div style="flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;">
+          <div style="display: flex; gap: 2px; align-items: flex-end; height: 200px;">
+            <div style="width: 12px; height: ${planH}%; background: #3182ce; border-radius: 4px 4px 0 0;" title="План: ${store.budget.plan[i]}"></div>
+            <div style="width: 12px; height: ${factH}%; background: ${store.budget.fact[i] && store.budget.fact[i] > store.budget.plan[i] ? '#e53e3e' : '#38a169'}; border-radius: 4px 4px 0 0;" title="Факт: ${store.budget.fact[i] || 'н/д'}"></div>
+          </div>
+          <span style="font-size: 11px; color: var(--gray-500);">${months[i]}</span>
+        </div>
+      `;
     }
-  });
-});
+    planFactHtml += '</div>';
+    document.getElementById('planFactChart').innerHTML = planFactHtml;
+
+    // Structure Chart (simple pie-like with bars)
+    const structure = [
+      { name: 'Электроэнергия', percent: 32, color: '#3182ce' },
+      { name: 'Теплоснабжение', percent: 38, color: '#e53e3e' },
+      { name: 'Водоснабжение', percent: 15, color: '#38a169' },
+      { name: 'Водоотведение', percent: 8, color: '#d69e2e' },
+      { name: 'Газ', percent: 5, color: '#805ad5' },
+      { name: 'Прочее', percent: 2, color: '#718096' },
+    ];
+    let structureHtml = '<div style="padding: 20px;">';
+    structure.forEach(item => {
+      structureHtml += `
+        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
+          <div style="width: 12px; height: 12px; background: ${item.color}; border-radius: 3px;"></div>
+          <span style="flex: 1; font-size: 13px;">${item.name}</span>
+          <span style="font-weight: 600;">${item.percent}%</span>
+        </div>
+        <div style="height: 8px; background: var(--gray-200); border-radius: 4px; margin-bottom: 16px; overflow: hidden;">
+          <div style="width: ${item.percent}%; height: 100%; background: ${item.color};"></div>
+        </div>
+      `;
+    });
+    structureHtml += '</div>';
+    document.getElementById('structureChart').innerHTML = structureHtml;
+  },
+
+  renderTariffs() {
+    const rows = store.tariffs.map(t => `
+      <tr>
+        <td>${t.service}</td>
+        <td>${t.supplier}</td>
+        <td>${t.unit}</td>
+        <td>${t.rate.toFixed(2)} ₸</td>
+        <td>${t.dateFrom.slice(5)}</td>
+        <td>${t.dateTo ? t.dateTo.slice(5) : '—'}</td>
+        <td><span class="status ${t.status}">${t.status === 'active' ? 'Активен' : 'Архив'}</span></td>
+        <td>
+          <button class="btn-icon" onclick="alert('Редактирование')">✏️</button>
+          <button class="btn-icon" onclick="this.closest('tr').remove()">🗑️</button>
+        </td>
+      </tr>
+    `).join('');
+    document.getElementById('tariffTable').innerHTML = `
+      <thead><tr><th>Услуга</th><th>Поставщик</th><th>Ед.</th><th>Тариф</th><th>Начало</th><th>Окончание</th><th>Статус</th><th>Действия</th></tr></thead>
+      <tbody>${rows}</tbody>
+    `;
+
+    // Service select in modal
+    const options = store.services.map(s => `<option value="${s}">${s}</option>`).join('');
+    document.getElementById('tariffService').innerHTML = options;
+  },
+
+  renderBudget() {
+    const months = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];
+    const services = ['Электроэнергия', 'Теплоснабжение', 'Водоснабжение', 'Водоотведение', 'Газ', 'ИТОГО'];
+    
+    let html = '<thead><tr><th>Услуга</th>';
+    months.forEach(m => html += `<th>${m}</th>`);
+    html += '<th>Год</th></tr></thead><tbody>';
+    
+    services.forEach(service => {
+      html += `<tr><td><strong>${service}</strong></td>`;
+      let yearTotal = 0;
+      for (let i = 0; i < 12; i++) {
+        const val = Math.round(Math.random() * 200 + 50);
+        yearTotal += val;
+        html += `<td>${val}</td>`;
+      }
+      html += `<td><strong>${yearTotal}</strong></td></tr>`;
+    });
+    html += '</tbody>';
+    document.getElementById('budgetTable').innerHTML = html;
+  },
+
+  renderConsumption() {
+    const rows = store.consumption.map((c, i) => `
+      <tr>
+        <td>${c.month}</td>
+        <td>${c.electricity}</td>
+        <td>${c.heat}</td>
+        <td>${c.water}</td>
+        <td>${c.sewerage}</td>
+      </tr>
+    `).join('');
+    document.getElementById('consumptionTable').innerHTML = `
+      <thead><tr><th>Месяц</th><th>Электроэнергия (кВт·ч)</th><th>Тепло (Гкал)</th><th>Вода (м³)</th><th>Водоотведение (м³)</th></tr></thead>
+      <tbody>${rows}</tbody>
+    `;
+  },
+
+  renderPlanFact() {
+    const months = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг'];
+    const rows = months.map((m, i) => {
+      const plan = store.budget.plan[i];
+      const fact = store.budget.fact[i] || 0;
+      const dev = fact - plan;
+      const devPercent = ((dev / plan) * 100).toFixed(1);
+      return `
+        <tr>
+          <td>${m}</td>
+          <td>${plan.toLocaleString()} ₸</td>
+          <td>${fact.toLocaleString()} ₸</td>
+          <td style="color: ${dev > 0 ? 'var(--danger)' : 'var(--success)'}">${dev > 0 ? '+' : ''}${dev.toLocaleString()} ₸</td>
+          <td style="color: ${dev > 0 ? 'var(--danger)' : 'var(--success)'}">${dev > 0 ? '+' : ''}${devPercent}%</td>
+          <td>${dev > 0 ? 'Рост тарифа' : 'Экономия'}</td>
+        </tr>
+      `;
+    }).join('');
+    document.getElementById('planFactTable').innerHTML = `
+      <thead><tr><th>Месяц</th><th>План</th><th>Факт</th><th>Отклонение ₸</th><th>Отклонение %</th><th>Причина</th></tr></thead>
+      <tbody>${rows}</tbody>
+    `;
+  },
+
+  renderRegulations() {
+    const chapters = [
+      '1. Общие положения',
+      '2. Ответственные подразделения',
+      '3. Исходные данные',
+      '4. Прогнозирование потребления',
+      '5. Учет изменения тарифов',
+      '6. Формирование бюджета',
+      '7. Контроль исполнения',
+      '8. Анализ отклонений',
+      '9. Корректировка бюджета',
+      '10. Отчетность',
+      '11. Контрольные показатели',
+      '12. Хранение документов'
+    ];
+    document.getElementById('regulationsContent').innerHTML = `
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;">
+        ${chapters.map(c => `
+          <div style="padding: 16px; background: var(--gray-50); border-radius: var(--radius); cursor: pointer;" onclick="alert('Открытие раздела: ${c}')">
+            <strong>${c}</strong>
+            <p style="color: var(--gray-500); font-size: 13px; margin-top: 8px;">Нажмите для просмотра содержания раздела</p>
+          </div>
+        `).join('')}
+      </div>
+    `;
+  },
+
+  renderSettings() {
+    document.getElementById('servicesList').innerHTML = `
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;">
+        ${store.services.map(s => `
+          <div style="padding: 12px; background: var(--gray-50); border-radius: var(--radius); display: flex; justify-content: space-between; align-items: center;">
+            <span>${s}</span>
+            <button class="btn-icon" onclick="alert('Редактирование')">✏️</button>
+          </div>
+        `).join('')}
+      </div>
+      <button class="btn btn-primary btn-sm" style="margin-top: 16px;" onclick="alert('Добавление услуги')">+ Добавить услугу</button>
+    `;
+  },
+
+  openTariffModal() {
+    document.getElementById('tariffModal').classList.add('open');
+  },
+
+  openBudgetModal() {
+    alert('Функция добавления статьи бюджета');
+  },
+
+  openReadingModal() {
+    alert('Функция внесения показаний');
+  },
+
+  closeModal(id) {
+    document.getElementById(id).classList.remove('open');
+  },
+
+  saveTariff() {
+    const service = document.getElementById('tariffService').value;
+    const supplier = document.getElementById('tariffSupplier').value;
+    const rate = parseFloat(document.getElementById('tariffRate').value);
+    const dateFrom = document.getElementById('tariffDateFrom').value;
+    
+    if (!service || !supplier || !rate || !dateFrom) {
+      alert('Заполните обязательные поля');
+      return;
+    }
+    
+    store.tariffs.unshift({
+      id: Date.now(),
+      service,
+      supplier,
+      unit: document.getElementById('tariffUnit').value,
+      rate,
+      vat: parseFloat(document.getElementById('tariffVat').value) || 0,
+      dateFrom,
+      dateTo: document.getElementById('tariffDateTo').value || null,
+      status: 'active'
+    });
+    
+    this.renderTariffs();
+    this.closeModal('tariffModal');
+    document.getElementById('tariffForm').reset();
+    
+    // Add to audit log
+    store.auditLog.unshift({
+      date: new Date().toLocaleDateString('ru-RU', {day: '2-digit', month: '2-digit', year: '2-digit'}),
+      user: 'Жанна',
+      object: 'Тариф',
+      change: `${service}: новый тариф ${rate} ₸ от ${dateFrom.slice(5)}`
+    });
+    this.renderDashboard();
+  },
+
+  exportReport(type) {
+    alert(`Экспорт отчета "${type}" в Excel...`);
+    // В реальной реализации здесь будет генерация XLSX
+  },
+
+  setupEventListeners() {
+    document.getElementById('menuToggle').addEventListener('click', () => {
+      document.getElementById('sidebar').classList.toggle('open');
+    });
+
+    // Close modal on outside click
+    document.querySelectorAll('.modal').forEach(modal => {
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal) modal.classList.remove('open');
+      });
+    });
+  }
+};
+
+// Initialize app
+app.init();
 </script>
 </body>
 </html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..bbb2317
--- /dev/null
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "communal-budget",
+  "private": true,
+  "type": "commonjs",
+  "scripts": {
+    "start": "node --env-file=.env server.js"
+  },
+  "dependencies": {
+    "grammy": "^1.1.0",
+    "xlsx": "^0.18.5",
+    "mammoth": "^1.6.0",
+    "pdf-parse": "^1.1.1",
+    "formidable": "^3.5.0"
+  }
+}