/* ===== ГОРНЫЙ ФОН ===== */

:root, :root.dark {
  --mountain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%230a1628'/%3E%3Cstop offset='100%25' stop-color='%23112940'/%3E%3C/linearGradient%3E%3ClinearGradient id='m1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23112940'/%3E%3Cstop offset='100%25' stop-color='%230d1f33'/%3E%3C/linearGradient%3E%3ClinearGradient id='m2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%230a2a35'/%3E%3Cstop offset='100%25' stop-color='%230a1e2e'/%3E%3C/linearGradient%3E%3ClinearGradient id='m3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%230d3040'/%3E%3Cstop offset='100%25' stop-color='%230a2030'/%3E%3C/linearGradient%3E%3ClinearGradient id='aurora' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%2300ffaa' stop-opacity='0'/%3E%3Cstop offset='30%25' stop-color='%2300cc88' stop-opacity='0.12'/%3E%3Cstop offset='60%25' stop-color='%230088ff' stop-opacity='0.08'/%3E%3Cstop offset='100%25' stop-color='%2300ffaa' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23sky)'/%3E%3Cellipse cx='720' cy='200' rx='900' ry='120' fill='url(%23aurora)' opacity='0.6'/%3E%3Ccircle cx='100' cy='80' r='1' fill='white' opacity='0.6'/%3E%3Ccircle cx='250' cy='50' r='1.5' fill='white' opacity='0.5'/%3E%3Ccircle cx='400' cy='100' r='1' fill='white' opacity='0.7'/%3E%3Ccircle cx='600' cy='60' r='1' fill='white' opacity='0.5'/%3E%3Ccircle cx='800' cy='40' r='1.5' fill='white' opacity='0.6'/%3E%3Ccircle cx='1000' cy='90' r='1' fill='white' opacity='0.5'/%3E%3Ccircle cx='1200' cy='70' r='1' fill='white' opacity='0.7'/%3E%3Ccircle cx='1350' cy='110' r='1.5' fill='white' opacity='0.5'/%3E%3Ccircle cx='500' cy='30' r='1' fill='white' opacity='0.6'/%3E%3Ccircle cx='900' cy='120' r='1' fill='white' opacity='0.4'/%3E%3Ccircle cx='1100' cy='45' r='1.5' fill='white' opacity='0.5'/%3E%3Cpolygon points='0,520 120,340 240,430 360,300 480,390 600,280 720,360 840,270 960,350 1080,290 1200,380 1320,310 1440,400 1440,900 0,900' fill='url(%23m1)' opacity='0.9'/%3E%3Cpolygon points='0,620 100,480 200,540 320,420 440,500 560,400 680,480 800,390 920,470 1040,410 1160,490 1280,430 1440,520 1440,900 0,900' fill='url(%23m2)' opacity='0.95'/%3E%3Cpolygon points='0,720 150,580 280,650 400,560 520,630 660,520 780,600 900,540 1020,610 1160,550 1300,630 1440,580 1440,900 0,900' fill='url(%23m3)'/%3E%3C/svg%3E");
}

/* Фон на теле — для основного интерфейса */
body {
  background-color: #0a1628 !important;
  background-image: var(--mountain-svg) !important;
  background-size: cover !important;
  background-position: center bottom !important;
  background-attachment: fixed !important;
}

/* ГЛАВНОЕ: login div занимает весь экран — делаем его прозрачным */
#login {
  background: transparent !important;
}

/* Карточка входа */
.login-form {
  background: rgba(10, 22, 40, 0.80) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(74, 158, 173, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important;
}

/* Поля ввода */
.login-form input {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(74, 158, 173, 0.4) !important;
  color: #e0f0f5 !important;
  border-radius: 8px !important;
}
.login-form input:focus {
  border-color: #4a9ead !important;
  outline: none !important;
}
.login-form input::placeholder { color: #5a8a9a !important; }

/* Кнопка Login */
.login-form button[type="submit"] {
  background: linear-gradient(135deg, #1a5c7a, #0d3a52) !important;
  border: 1px solid #4a9ead !important;
  border-radius: 8px !important;
  color: #e0f0f5 !important;
  font-weight: 600 !important;
}
.login-form button[type="submit"]:hover {
  background: linear-gradient(135deg, #226b8a, #1a4d68) !important;
  box-shadow: 0 4px 15px rgba(74,158,173,0.3) !important;
}

/* Заголовок */
.login-form h1 { color: #7dd4e0 !important; }

/* ===== ОСНОВНОЙ ИНТЕРФЕЙС — панели поверх гор ===== */
:root.dark {
  --background: transparent;
  --surfacePrimary: rgba(15, 28, 44, 0.82);
  --surfaceSecondary: rgba(25, 42, 62, 0.85);
}