:root {
    --bg-transition: 1.8s cubic-bezier(0.4, 0, 0.2, 1);
    --text-dark: #1a1a1a;
    --text-light: #e0d0c0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body, html {
    width: 100%; height: 100%; overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    background-color: #cfd8dc;
    color: var(--text-dark);
    transition: color var(--bg-transition);
}

.effect-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: hidden;
}

/* --- Типографика --- */
.title-container { position: absolute; top: 8%; width: 100%; text-align: center; z-index: 50; pointer-events: none; }
h1 {
    font-family: 'Cormorant Garamond', serif; font-size: 4.5rem; font-weight: 300;
    letter-spacing: 2px; text-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: color var(--bg-transition), text-shadow var(--bg-transition), opacity 1s ease;
}

body.dark-mode h1 { text-shadow: 0 5px 30px rgba(0,0,0,0.6); color: var(--text-light); }

/* Исключение для Зелени: темный текст на светлом фоне, несмотря на dark-mode кнопок */
body[data-active-bg="greenery"].dark-mode h1 {
    color: var(--text-dark);
    text-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* --- Фоны --- */
.bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity var(--bg-transition), visibility var(--bg-transition); z-index: 1; }
.bg-layer.active { opacity: 1; visibility: visible; }

#bg-default { background: radial-gradient(circle at center, #ece9e6 0%, #ffffff 100%); opacity: 1; visibility: visible; }
#bg-travel { background: linear-gradient(to bottom, #89c4f4 0%, #d4eafc 100%); }
.cloud-puff { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.8); box-shadow: 0 0 30px 15px rgba(255,255,255,0.6); filter: blur(10px); }
.cloud-cluster { position: absolute; animation: floatCloud linear infinite; }
@keyframes floatCloud { from { transform: translateX(-150vw); } to { transform: translateX(150vw); } }

#bg-warmth { background: radial-gradient(circle at 50% 10%, #fff9c4 0%, #ffca28 60%, #ff8f00 100%); }
.sun-ray { position: absolute; top: -40%; left: 50%; width: 180vw; height: 60vh; background: linear-gradient(180deg, rgba(255, 241, 194, 0.4), transparent); transform-origin: top center; filter: blur(50px); mix-blend-mode: soft-light; animation: raySway var(--speed) ease-in-out infinite alternate; }
@keyframes raySway { from { transform: translateX(-50%) rotate(var(--angle1)); opacity: 0.5; } to { transform: translateX(-50%) rotate(var(--angle2)); opacity: 1; } }

#bg-cozy { background: radial-gradient(ellipse at bottom center, #a66d4f 0%, #804d29 50%, #4a2c17 100%); animation: warmBreath 10s ease-in-out infinite alternate; }
@keyframes warmBreath { 0% { filter: brightness(1) saturate(1); } 100% { filter: brightness(1.1) saturate(1.1); } }
.ember-prog { position: absolute; bottom: -20px; border-radius: 50%; background: #ff8c00; box-shadow: 0 0 8px 3px rgba(255, 102, 0, 0.4); filter: blur(2px); animation: riseAndCool var(--duration) linear infinite; }
@keyframes riseAndCool { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; background: #ff8c00; } 10% { opacity: 0.8; } 50% { background: #cc4100; } 100% { transform: translateY(-85vh) translateX(var(--drift)) scale(0.4); opacity: 0; background: #5c1c00; } }

#bg-inspire { background: radial-gradient(ellipse at bottom, #141e30 0%, #0a0f18 100%); }
.star-dot { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 var(--glow) 1px rgba(255,255,255,0.7); animation: twinkle var(--twinkle-speed) infinite alternate ease-in-out; }
.shooting-star-prog { position: absolute; height: 2px; background: linear-gradient(to right, transparent, white, transparent); animation: shootProg 2.5s ease-in-out; opacity: 0; }
@keyframes twinkle { 0% { opacity: 0.3; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.1); } }
@keyframes shootProg { 0% { transform: translate(var(--sx), var(--sy)) rotate(-45deg) scaleX(0.5); opacity: 1; width: 50px; } 100% { transform: translate(calc(var(--sx) - 30vw), calc(var(--sy) + 30vh)) rotate(-45deg) scaleX(2); opacity: 0; width: 200px; } }

#bg-greenery { background: linear-gradient(to bottom, #dcedc8 0%, #aed581 100%); }
.grass-blade-prog { position: absolute; bottom: 0; width: var(--width); height: var(--height); background: linear-gradient(to top, #33691e 0%, #689f38 60%, #8bc34a 100%); border-radius: 100% 100% 0 0; transform-origin: bottom center; transform: scaleY(0); }
#bg-greenery.active .grass-blade-prog { animation: growAndSway var(--sway-speed) ease-out forwards; animation-delay: var(--grow-delay); }
@keyframes growAndSway { 0% { transform: scaleY(0) rotate(0deg); } 40% { transform: scaleY(1.1) rotate(var(--bend-start)); } 100% { transform: scaleY(1) rotate(var(--bend-end)); } }

/* --- Интерактивный слой --- */
.interactive-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    transition: opacity 1.5s ease; z-index: 10;
}
.interactive-wrapper.hidden {
    opacity: 0; pointer-events: none;
}

/* --- Макет: Орбита сверху, Форма снизу --- */
.orbit-area {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: 100vw; display: flex; align-items: center; justify-content: center; z-index: 50;
}

.form-area {
    position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 320px; z-index: 60;
}

/* Состояние блокировки/размытия формы */
.form-wrapper { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.form-locked { filter: blur(8px) grayscale(50%); opacity: 0.4; pointer-events: none; transform: translateY(20px); }

.glass-form-bottom { display: flex; flex-direction: column; gap: 18px; width: 100%; align-items: center; }

/* --- Единый стиль элементов --- */
.point, .glass-element {
    padding: 16px 30px; font-size: 1.05rem; font-weight: 400; letter-spacing: 2px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--text-dark); text-align: center; font-family: inherit; width: 100%;
}

body.dark-mode .point, body.dark-mode .glass-element {
    background: rgba(0, 0, 0, 0.3); color: var(--text-light);
    border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* --- Точки Орбиты --- */
.star-container { position: relative; width: 0; height: 0; }
.point { position: absolute; text-transform: uppercase; cursor: pointer; white-space: nowrap; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); width: auto; }
.point:hover { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.1); z-index: 10; }
.point.selected { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.15); z-index: 10; background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; box-shadow: 0 15px 50px rgba(0,0,0,0.2), 0 0 30px rgba(255,255,255,0.6); }
.star-container:hover .point:not(:hover):not(.selected) { opacity: 0.4; filter: blur(3px); transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.95); }

/* --- Инпуты и Кнопка --- */
.glass-element { outline: none; }
.glass-element::placeholder { color: rgba(0,0,0,0.4); text-transform: none; letter-spacing: 1px; }
body.dark-mode .glass-element::placeholder { color: rgba(255,255,255,0.5); }
.glass-element:focus, .btn-accent:hover { transform: scale(1.03); background: #ffffff !important; color: #000000 !important; border-color: #ffffff; box-shadow: 0 15px 50px rgba(0,0,0,0.2), 0 0 30px rgba(255,255,255,0.6); }
body.dark-mode .glass-element:focus, body.dark-mode .btn-accent:hover { background: #ffffff !important; color: #000000 !important; }
.btn-accent { cursor: pointer; text-transform: uppercase; font-weight: 500; }
.btn-accent:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; background: rgba(255, 255, 255, 0.2) !important; color: inherit !important; }

/* --- Контейнеры полей --- */
.input-container { position: relative; width: 100%; display: flex; justify-content: center; }

/* --- Кастомный Выпадающий Список (Нижний) --- */
.custom-dropdown {
    position: absolute; top: calc(100% + 8px); left: 0; width: 100%;
    max-height: 200px; overflow-y: auto; z-index: 100;
    background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.3s ease;
}
.custom-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }
body.dark-mode .custom-dropdown { background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.2); }

.dropdown-item {
    padding: 12px 20px; font-size: 0.95rem; font-weight: 400; color: var(--text-dark);
    cursor: pointer; transition: background 0.2s; text-align: center;
}
body.dark-mode .dropdown-item { color: var(--text-light); }
.dropdown-item:hover { background: rgba(255, 255, 255, 0.6); }
body.dark-mode .dropdown-item:hover { background: rgba(255, 255, 255, 0.2); }
.dropdown-item:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.custom-dropdown::-webkit-scrollbar { width: 6px; }
.custom-dropdown::-webkit-scrollbar-track { background: transparent; }
.custom-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 10px; }
body.dark-mode .custom-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); }

/* --- Верхняя Всплывающая Подсказка (НОВЫЙ КЛАСС ДЛЯ ОБХОДА КЭША) --- */
.top-glass-hint {
    position: absolute;
    bottom: calc(100% + 15px); /* Строго над полем ввода */
    left: 0;
    width: 100%;
    z-index: 200;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    padding: 12px 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    text-align: center;
    line-height: 1.4;
    pointer-events: none; /* Пропускает клики насквозь */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.top-glass-hint.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.dark-mode .top-glass-hint {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

/* Сообщения */
.form-msg { font-size: 0.85rem; text-align: center; margin-top: -5px; min-height: 20px; font-weight: 500; width: 100%; }
.error { color: #d32f2f; } body.dark-mode .error { color: #ff8a80; }

/* Автозаполнение браузеров */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{ -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.6) inset !important; -webkit-text-fill-color: var(--text-dark) !important; border-radius: 50px; }
body.dark-mode input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.6) inset !important; -webkit-text-fill-color: var(--text-light) !important; }

/* --- Адаптивность для мобильных и математически невозможных экранов --- */
@media (max-width: 900px) {
    body, html { overflow-y: auto; overflow-x: hidden; }
    .interactive-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100vh; }
    .title-container { position: relative; top: 0; padding: 40px 20px 20px; }
    h1 { font-size: 2.5rem; }
    .orbit-area { position: relative; top: 0 !important; left: 0; transform: none; width: 100%; height: auto; padding-bottom: 30px; }
    .star-container { width: 100%; height: auto; display: flex; flex-direction: column; gap: 15px; align-items: center; }
    .point { position: relative; width: 85%; max-width: 320px; transform: none !important; }
    .point:hover, .point.selected { transform: scale(1.05) !important; }
    .star-container:hover .point:not(:hover):not(.selected) { transform: scale(0.98) !important; }
    .form-area { position: relative; bottom: 0; left: auto; transform: none; margin: 0 auto 50px auto; width: 85%; max-width: 320px; }
}

/* Принудительный режим списка, управляемый из JS (для узких по высоте экранов) */
body.compact-mode, html.compact-mode { overflow-y: auto !important; overflow-x: hidden !important; }
body.compact-mode .interactive-wrapper { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; min-height: 100vh !important; }
body.compact-mode .title-container { position: relative !important; top: 0 !important; padding: 40px 20px 20px !important; }
body.compact-mode h1 { font-size: 2.5rem !important; }
body.compact-mode .orbit-area { position: relative !important; top: 0 !important; left: 0 !important; transform: none !important; width: 100% !important; height: auto !important; padding-bottom: 30px !important; }
body.compact-mode .star-container { width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; gap: 15px !important; align-items: center !important; }
body.compact-mode .point { position: relative !important; width: 85% !important; max-width: 320px !important; transform: none !important; }
body.compact-mode .point:hover, body.compact-mode .point.selected { transform: scale(1.05) !important; }
body.compact-mode .star-container:hover .point:not(:hover):not(.selected) { transform: scale(0.98) !important; }
body.compact-mode .form-area { position: relative !important; bottom: 0 !important; left: auto !important; transform: none !important; margin: 0 auto 50px auto !important; width: 85% !important; max-width: 320px !important; }