html, body {
  height: 100%;
  min-height: 100vh;
  font-family: 'Orbitron', sans-serif;
  background: url('/images/bg.png') no-repeat center top;
  background-size: cover;
  color: white;
  overflow-x: hidden;
}
body { display: flex; flex-direction: column; 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;
  animation: fadeInDown 1.2s;
}
@keyframes fadeInDown {
  from { transform: translateY(-70px); opacity: 0;}
  to   { transform: none; opacity: 1;}
}
.header-content {
  display: flex; align-items: center; height: 64px;
  max-width: 1400px; margin: 0 auto; justify-content: space-between;
  padding: 0 18px;
}
.logo-animate {
  font-size: 2.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;
  margin-bottom: 16px;
  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 {
  margin-top: 90px !important;
  max-width: 1200px;
  width: 100%;
  padding: 34px 16px 44px 16px;
  box-sizing: border-box;
}

.blacklist-title {
  font-size: 2.2rem;
  margin-bottom: 28px;
  color: #ffe875;
  text-shadow: 0 0 12px #ffe66d88, 0 2px 6px #0009;
  letter-spacing: 2px;
  font-family: 'Orbitron', Arial, sans-serif;
}

.blacklist-controls {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

#search {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
  background: linear-gradient(90deg, #101f3a 70%, #233d61 120%);
  color: #faffd2;
  border: 2px solid #13e5ff;
  border-radius: 14px;
  padding: 12px 20px;
  font-size: 1.13rem;
  font-family: 'Orbitron', Arial, sans-serif;
  box-shadow: 0 0 20px #00f1ff23;
  outline: none;
  transition: border .18s, box-shadow .16s;
}
#search:focus {
  border: 2px solid #ffe66d;
  box-shadow: 0 0 30px #ffe66d44;
}

.report-btn {
  background: linear-gradient(90deg, #ffe66d 0%, #09ffe7 100%);
  color: #073263;
  font-weight: bold;
  padding: 13px 36px;
  border: none;
  border-radius: 15px;
  font-size: 1.13rem;
  font-family: 'Orbitron', Arial, sans-serif;
  letter-spacing: 1px;
  box-shadow: 0 0 30px #ffe66d55;
  text-shadow: 0 2px 16px #fff2;
  transition: background .13s, color .13s, box-shadow .17s;
  text-decoration: none;
  text-align: center;
}
.report-btn:hover {
  background: linear-gradient(90deg, #0cf1f1 0%, #ffe66d 100%);
  color: #031326;
  box-shadow: 0 0 44px #ffe66d99;
}

/* ===== Сетка и карточки жалоб ===== */
.blacklist-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  min-height: 250px;
}
@media (max-width: 1200px) {
  .blacklist-list { grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 700px) {
  .blacklist-list { grid-template-columns: 1fr;}
}

/* ======= Карточка ======= */
.blacklist-card {
  background: linear-gradient(180deg, #191f35 72%, #232b47 100%);
  border-radius: 18px;
  box-shadow: 0 2px 32px #00e1ff55, 0 0 0 2.5px #25edff33 inset;
  padding: 19px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  transition: box-shadow .19s, border .17s;
  border: 2.3px solid #ffe66d60;
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
.blacklist-card:hover {
  box-shadow: 0 6px 48px #fff88888, 0 0 0 2.5px #ffe66daa inset;
  border-color: #ffe66d;
}

.card-photos {
  display: flex;
  gap: 13px;
  margin-bottom: 10px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.card-photos img {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 4px 24px #13e5ff80, 0 0 0 3px #ffe66d77;
  border: 2.5px solid #0cf1ff55;
  background: #191e33;
  transition: transform .16s, box-shadow .18s;
}
.card-photos img:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 38px #ffe66daa, 0 0 0 5px #0cf1ffcc;
}

.card-head {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  margin-bottom: 5px;
}
.card-name {
  font-weight: bold;
  color: #ffe66d;
  font-size: 1.19rem;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px #fffadf88;
}
.card-server {
  color: #19e0fc;
  background: #122b54;
  border-radius: 8px;
  padding: 2px 14px;
  font-size: 1.03rem;
  margin-left: 13px;
  font-family: 'Orbitron', Arial, sans-serif;
  letter-spacing: 2px;
  box-shadow: 0 0 6px #0cf1ff44;
}
.card-desc {
  font-size: 1.14rem;
  color: #e6f5ff;
  margin: 6px 0 8px 0;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 7px #0cf1ff22;
}
.card-meta {
  font-size: 1.01rem;
  color: #8ffffc;
  opacity: 0.8;
  letter-spacing: 1.1px;
}
.empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 1.18rem;
  color: #ffe66d;
  opacity: 0.92;
  margin-top: 38px;
  background: rgba(30,38,88,0.47);
  border-radius: 18px;
  padding: 18px 0;
  box-shadow: 0 0 32px #ffe66d22;
}

/* ======= Мелкие адаптивы ====== */
@media (max-width: 900px) {
  .header-content {padding: 0 8px;}
  .logo-animate { font-size: 1.38rem;}
  .blacklist-title { font-size: 1.25rem;}
  .report-btn { padding: 8px 20px; font-size: 1rem;}
  #search { font-size: 1rem; padding: 10px 10px;}
}
@media (max-width: 700px) {
  main.container { padding: 16px 2px 28px 2px; }
  .card-photos img { width: 64px; height: 64px;}
}
.scam-card {
  background: rgba(11,24,56,0.96);
  border-radius: 21px;
  box-shadow: 0 0 28px #00ffe740, 0 0 0 2.5px #ffe66d33 inset;
  border: 2.2px solid #ffe66d55;
  padding: 26px 32px 26px 32px;
  max-width: 380px;
  margin: 32px auto 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scam-card-img img {
  width: 120px; height: 120px; border-radius: 14px;
  box-shadow: 0 0 22px #00ffe799;
  object-fit: cover;
  background: #151d30;
  border: 2.5px solid #19e0fc;
}
.scam-card-row {
  display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 18px; margin-bottom: 8px;
}
.scam-name {
  font-size: 1.44em;
  font-weight: bold;
  color: #ffe66d;
  letter-spacing: 1.3px;
  text-shadow: 0 0 6px #ffe66dcc;
}
.scam-server {
  background: rgba(16, 185, 255, 0.21);
  color: #3fd3fd;
  border-radius: 9px;
  padding: 2px 14px 2px 14px;
  font-size: 1.13em;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 0 5px #00ffe7a0;
  margin-left: 6px;
}
.scam-id {
  font-size: 1em;
  color: #ffe66d;
  margin-bottom: 16px;
  margin-top: 3px;
  font-weight: 500;
  letter-spacing: 0.7px;
}
.scam-details-btn {
  display: inline-block;
  margin-top: 10px;
  background: linear-gradient(90deg,#00ffe7 0%,#ffe66d 100%);
  color: #031326;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.08em;
  padding: 11px 28px;
  border-radius: 12px;
  box-shadow: 0 0 14px #00ffe744, 0 0 0 2px #ffe66d33;
  letter-spacing: 1px;
  transition: background .14s, color .13s, transform .11s, box-shadow .11s;
  text-align: center;
}
.scam-details-btn:hover {
  background: linear-gradient(90deg,#ffe66d 0%,#00ffe7 100%);
  color: #011122;
  transform: scale(1.06);
  box-shadow: 0 0 20px #ffe66daa;
}
@media (max-width: 600px) {
  .scam-card { padding: 10vw 2vw 10vw 2vw; max-width: 97vw;}
  .scam-card-img img { width: 80px; height: 80px;}
}
.sonic-footer {
  width: 100%;
  background: linear-gradient(90deg, #171b2d 70%, #253479 100%);
  position: fixed;
  left: 0; bottom: 0; z-index: 99;
  box-shadow: 0 -2px 16px #00ffe7a3;
  padding: 6px 0;
}
.footer-content {
  max-width: 1200px; margin: 0 auto; display: flex;
  justify-content: space-between; align-items: center;
  font-size: 0.95rem; 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: 600px) {
  .footer-content { flex-direction: column; gap: 5px; font-size:0.96rem; }
  .sonic-footer { padding: 3px 0; }
}