:root{
 --bg:#000;
 --card:#111;
 --accent:#fff;
 --text:#fff;
 --muted:#ccc;
 --glass: rgba(255,255,255,0.05);

 font-family: Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}

body{
 margin:0;
 background:var(--bg);
 color:var(--text);
 min-height:100vh
}

.wrap{
 max-width:1100px;
 margin:36px auto;
 padding:20px
}

.site-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  margin-top:20px;
}
.site-header.center{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 20px;
}

.logo{
  height: 120px;          /* velikost loga */
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.logo img{
  height: 100%;
  width: auto;
  object-fit: contain;
}

@keyframes floatLogo {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}

.main-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  gap:40px;
}

.main-nav a{
  font-size:22px;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  letter-spacing:.5px;
  position:relative;
  transition:.25s;
}

.main-nav a:hover{
  color:white;
}

.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:white;
  transition:.25s;
}

.main-nav a:hover::after{
  width:100%;
}

.logo-float{
  animation: floatLogo 4s ease-in-out infinite;
}

.logo-float:hover{
  animation-play-state: paused;
  transform: scale(1.05);
}

nav{margin-left:auto}

nav a{
 color:var(--muted);
 text-decoration:none;
 margin-left:14px;
 font-weight:600;
}

.card{
 background:var(--card);
 padding:18px;
 border-radius:12px;
 box-shadow:0 6px 18px rgba(255,255,255,0.1)
}

.admins{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
 gap:12px
}

.admin{
 background:var(--glass);
 padding:12px;
 border-radius:10px;
 text-align:center
}
.admin .avatar{
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 12px;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 32px;
  color: var(--accent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin .avatar:hover{
  transform: scale(1.3) translateY(-5px);
  box-shadow: 0 4px 20px rgba(255,255,255,0.6);
  cursor: pointer;
}
.name{font-weight:700;margin-top:6px}
.role{font-size:13px;color:var(--muted)}

.news-list{
 display:flex;
 flex-direction:column;
 gap:10px
}

.news-item{
 padding:10px;
 border-radius:8px;
 background:rgba(255,255,255,0.05)
}

.news-item time{
 display:block;
 font-size:12px;
 color:var(--muted);
 margin-bottom:6px
}

footer{
 margin-top:22px;
 color:var(--muted);
 font-size:13px;
 text-align:center
}

canvas {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1000;
}

@keyframes dotFall {
  0% { transform: translateY(0); }
  100% { transform: translateY(100vh); }
}
@media(max-width:520px){
 .logo{width:72px;height:72px;flex:0 0 72px}
 .wrap{padding:12px}
}