html, body {
  min-height: 100vh;
  font-family: 'Orbitron', Arial, sans-serif;
  background: #10153e url('/images/bg.png') no-repeat center top;
  background-size: cover;
  color: #eafffa;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body { min-height: 100vh; }

/* === Шапка, меню и бургер === */
.sonic-header {
  width: 100%;
  background: linear-gradient(90deg, #10153e 60%, #1e284d 100%);
  box-shadow: 0 2px 12px 0 #0ff3, 0 1px 0 #181b2f;
  min-height: 64px;
  position: fixed; top: 0; left: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.header-content {
  max-width: 1400px; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 18px;
}
.logo-animate {
  font-size: 2rem;
  letter-spacing: 2px;
  font-weight: 900;
  background: linear-gradient(90deg,#00ffe7,#ff48ea,#ffef40,#00ffe7,#0a70ff,#00ffe7);
  background-size: 500% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: logoRainbow 5s linear infinite;
  text-shadow: 0 0 16px #0ff8, 0 0 44px #09f4;
  font-family: 'Orbitron', Arial, sans-serif;
  cursor: pointer;
}
@keyframes logoRainbow {
  0% { background-position: 0% 50%;}
  50% { background-position: 100% 50%;}
  100% { background-position: 0% 50%;}
}
.burger {
  width: 40px; height: 40px; background: none; border: none; display: none;
  flex-direction: column; justify-content: center; align-items: center; cursor: pointer; z-index: 110;
}
.burger-bar {
  display: block; width: 28px; height: 4px; background: #00ffe7; margin: 3px 0; border-radius: 3px;
  box-shadow: 0 0 6px #00ffe7a7; transition: all 0.2s;
}
.burger.open .burger-bar:nth-child(1) { transform: rotate(45deg) translateY(8px);}
.burger.open .burger-bar:nth-child(2) { opacity: 0;}
.burger.open .burger-bar:nth-child(3) { transform: rotate(-45deg) translateY(-8px);}
.nav-links {
  display: flex; gap: 2rem; align-items: center;
}
.nav-links a {
  color: #fff; text-decoration: none; font-size: 1.07rem; padding: 8px 18px;
  border-radius: 10px;
  background: linear-gradient(120deg,#0b1649 60%, #163782 100%);
  margin-left: 10px; transition: background 0.2s, color 0.2s, transform 0.15s;
  box-shadow: 0 0 16px #00ffe7a2;
}
.nav-links a:hover, .nav-links a.active {
  background: #10285a; color: #00ffe7; transform: scale(1.07);
  box-shadow: 0 0 24px #00ffe7e0;
}
@media (max-width: 900px) {
  .burger { display: flex; }
  .nav-links {
    position: fixed; left: 0; top: 64px; width: 100vw;
    flex-direction: column; gap: 0; background: linear-gradient(130deg,#151d38f2 80%, #0cf9ff11 100%);
    box-shadow: 0 6px 30px #00ffe7aa; border-radius: 0 0 18px 18px;
    z-index: 120; padding: 14px 0 10px 0;
    transform: translateY(-130%); opacity: 0; pointer-events: none;
    transition: transform 0.27s cubic-bezier(.29,1.27,.61,.91), opacity 0.16s;
    justify-content: center; align-items: center;
  }
  .nav-links.open {
    transform: translateY(0); opacity: 1; pointer-events: all;
  }
  .nav-links a {
    width: 90vw; text-align: center; margin: 0; padding: 16px 0;
    border-radius: 10px; font-size: 1.14rem;
    box-shadow: none; background: none;
    border-bottom: 1px solid #00ffe733;
    display: block;
  }
  .nav-links a:last-child { border-bottom: none; }
}

main.container {
  min-height: 70vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.report-form-outer {
  margin-top: 110px;
  background: rgba(14,24,56,0.96);
  border-radius: 26px;
  box-shadow: 0 2px 36px #00ffe744, 0 0 0 2.5px #ffe66d33 inset;
  padding: 36px 32px 34px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 340px;
  max-width: 450px;
  width: 100%;
  margin-bottom: 40px;
}
.report-title {
  font-size: 2.1rem;
  color: #ffe66d;
  margin-bottom: 18px;
  text-align: center;
  letter-spacing: 1.5px;
  text-shadow: 0 0 18px #ffe66db8, 0 2px 6px #000b;
  font-family: 'Orbitron', Arial, sans-serif;
  font-weight: bold;
}
.report-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 8px;
}
.report-form label {
  font-size: 1.13rem;
  color: #ffe66d;
  font-weight: 600;
  margin-bottom: 3px;
  margin-left: 2px;
  text-shadow: 0 0 7px #ffe66d99;
  display: block;
}
.report-form input,
.report-form textarea {
  width: 100%;
  background: linear-gradient(90deg, #14224a 60%, #24345c 100%);
  border: 2.2px solid #00ffe777;
  border-radius: 13px;
  color: #eafffa;
  font-family: 'Orbitron', Arial, sans-serif;
  padding: 15px 17px;
  font-size: 1.13rem;
  transition: border .19s, box-shadow .18s, background .14s;
  outline: none;
  margin-bottom: 0;
  box-sizing: border-box;
  box-shadow: 0 0 14px #13e5ff22;
}
.report-form input::placeholder,
.report-form textarea::placeholder {
  color: #98c7ff;
  opacity: 0.98;
}
.report-form input:focus, .report-form textarea:focus {
  border-color: #ffe66d;
  background: #13224b;
  box-shadow: 0 0 18px #ffe66d77, 0 0 22px #00ffe755 inset;
}
.photos-upload {
  margin-top: 2px;
  margin-bottom: 3px;
  display: flex; flex-direction: column; gap: 7px;
}
.photos-preview {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px;
}
.photos-preview img, .photos-preview video {
  width: 62px; height: 62px; border-radius: 12px; object-fit: cover;
  box-shadow: 0 2px 12px #00ffe777;
  border: 1.5px solid #ffe66d99;
  background: #171d33;
}
.photos-preview video { background: #000; }
.submit-btn {
  background: linear-gradient(90deg, #ffe66d 0%, #09ffe7 100%);
  color: #0a2851;
  font-weight: bold;
  padding: 16px 0;
  border: none;
  border-radius: 15px;
  font-size: 1.16rem;
  font-family: 'Orbitron', Arial, sans-serif;
  letter-spacing: 1px;
  box-shadow: 0 0 24px #ffe66d55;
  margin-top: 10px;
  margin-bottom: 2px;
  cursor: pointer;
  transition: background .13s, color .13s, box-shadow .17s, transform .12s;
  text-align: center;
  text-shadow: 0 2px 16px #fff3;
  width: 100%;
}
.submit-btn:hover {
  background: linear-gradient(90deg, #0cf1f1 0%, #ffe66d 100%);
  color: #031326;
  box-shadow: 0 0 40px #ffe66daa;
  transform: scale(1.03);
}
.form-status {
  text-align: center;
  color: #19ffc4;
  font-size: 1.04rem;
  margin-top: 7px;
  min-height: 28px;
  font-family: 'Orbitron', Arial, sans-serif;
  letter-spacing: 1.1px;
}
@media (max-width: 600px) {
  .header-content { padding: 0 6px;}
  .logo-animate { font-size: 1.26rem;}
  .nav-links a { font-size: 0.95rem; padding: 7px 8px; }
  .report-form-outer {
    min-width: unset;
    padding: 13px 2vw 18px 2vw;
    margin-top: 66px;
    border-radius: 15px;
  }
  .report-title { font-size: 1.13rem;}
  .report-form label { font-size: 1.03rem;}
  .submit-btn { font-size: 1.05rem;}
  .photos-preview img, .photos-preview video { width: 36px; height: 36px;}
}
.sonic-footer {
  width: 100%;
  background: linear-gradient(90deg, #171b2d 70%, #253479 100%);
  position: relative; left: 0; bottom: 0; z-index: 99;
  box-shadow: 0 -2px 16px #00ffe7a3;
  padding: 7px 0;
}
.footer-content {
  max-width: 1200px; margin: 0 auto; display: flex;
  justify-content: space-between; align-items: center;
  font-size: 0.93rem; color: #b6faff; letter-spacing: 1px;
}
.footer-links a {
  color: #c8fff4; font-size: 1.01rem; margin: 0 7px; text-decoration: none;
  opacity: 0.82; transition: color 0.16s, opacity 0.14s;
}
.footer-links a:hover { color: #00ffe7; opacity: 1; }
.footer-social a {
  font-size: 1.16rem; margin-left: 10px;
  text-decoration: none; transition: filter 0.18s, transform 0.15s;
  filter: drop-shadow(0 0 4px #00ffe7a0);
}
.footer-social a:hover {
  filter: brightness(1.9) drop-shadow(0 0 8px #fff8);
  transform: scale(1.11);
}
@media (max-width: 500px) {
  .footer-content { flex-direction: column; gap: 5px; font-size:0.96rem; }
  .sonic-footer { padding: 3px 0; }
}