:root{
  --accent:#00e5ff;
  --accent2:#8a5cff;
  --text:#eef3ff;
  --muted:#9fb0d0;
  --line:#25304a;
}
html,body{height:100%}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(0,229,255,.18), transparent 30%),
    radial-gradient(circle at top right, rgba(138,92,255,.16), transparent 28%),
    linear-gradient(180deg,#080a11 0%,#0a0f18 40%,#070910 100%);
  color:var(--text);
}
.site-main{flex:1 0 auto}
a{color:#8bdfff;text-decoration:none}
a:hover{color:#c9f3ff}
.brand-mark{font-family:Orbitron,sans-serif;letter-spacing:.08em;font-weight:800}
.nav-glass{
  background:rgba(5,8,15,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.navbar .nav-link,.navbar .btn,.navbar .small{
  display:flex;align-items:center;height:40px
}
.navbar .btn{min-width:82px;justify-content:center;border-radius:10px}
.hero{padding:5rem 0 3rem}
.hero-card,.content-card,.post-card,.panel-card,.profile-card{
  background:linear-gradient(180deg,rgba(18,24,39,.92),rgba(11,15,25,.9));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 50px rgba(0,0,0,.28);
  border-radius:1.5rem
}
.hero-card,.content-card,.panel-card,.profile-card{padding:1.75rem}
.neon-text{text-shadow:0 0 16px rgba(0,229,255,.25)}
.btn-neon{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#04111a;border:none;font-weight:700
}
.btn-neon:hover{color:#04111a;filter:brightness(1.05)}
.text-light-emphasis,.text-secondary{color:var(--muted)!important}
.section-title{font-family:Orbitron,sans-serif;letter-spacing:.05em}
.stat-box{
  border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;
  padding:1rem;
  background:rgba(255,255,255,.02);
  height:100%;
}
.post-card{overflow:hidden;height:100%;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:0 0 18px rgba(0,229,255,.12);border-color:rgba(0,229,255,.25)}
.post-cover{width:100%;height:230px;object-fit:cover;background:#0c1220}
.badge-status-pending{background:#ffb703;color:#1f1300}
.badge-status-approved{background:#00d084;color:#032214}
.badge-status-rejected{background:#ff5d73;color:#24050b}
.form-control,.form-select,.form-control:focus,.form-select:focus{
  background:#0c1321;border:1px solid var(--line);color:var(--text);box-shadow:none
}
.form-label{color:#dbe7ff}
.gallery-thumb{width:100%;height:180px;object-fit:cover;border-radius:12px}
.avatar-preview{
  width:110px;height:110px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.12)
}
.footer-zone{
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(6,10,18,.92), rgba(4,8,14,.98));
  box-shadow:0 -10px 30px rgba(0,0,0,.25)
}
.footer-card{
  height:100%;
  min-height:180px;
  padding:1.5rem;
  border-radius:1.25rem;
  background:linear-gradient(180deg, rgba(18,24,39,.9), rgba(10,14,24,.88));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
.footer-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,229,255,.35);
  box-shadow:0 0 20px rgba(0,229,255,.12)
}
.footer-zone ul{list-style:none;margin:0;padding:0}
.footer-zone li{margin-bottom:.65rem}
.footer-zone a{display:inline-block;transition:color .2s ease, text-shadow .2s ease, transform .2s ease}
.footer-zone a:hover{color:#fff;text-shadow:0 0 12px rgba(0,229,255,.45);transform:translateX(3px)}
@keyframes floatGlow{
  0%{transform:translateY(0);box-shadow:0 0 0 rgba(0,229,255,.0)}
  50%{transform:translateY(-3px);box-shadow:0 0 20px rgba(0,229,255,.08)}
  100%{transform:translateY(0);box-shadow:0 0 0 rgba(0,229,255,.0)}
}
.floating{animation:floatGlow 3.5s ease-in-out infinite}
@media (max-width: 991.98px){
  .footer-card{min-height:auto}
}


.image-tile{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:1rem;
  padding:.75rem;
  height:100%;
}
.post-lightbox-trigger{
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.post-lightbox-trigger:hover{
  transform:scale(1.03);
  box-shadow:0 0 24px rgba(0,229,255,.24);
  filter:brightness(1.05);
}
.image-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.88);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:2rem;
}
.image-lightbox.active{display:flex}
.lightbox-image{
  max-width:90vw;
  max-height:85vh;
  border-radius:1rem;
  box-shadow:0 0 40px rgba(0,229,255,.18);
}
.lightbox-close{
  position:absolute;
  top:18px;
  right:24px;
  font-size:2.5rem;
  line-height:1;
  background:transparent;
  color:#fff;
  border:none;
  cursor:pointer;
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1.5rem;
  cursor:pointer;
}
.lightbox-prev{left:24px}
.lightbox-next{right:24px}
.lightbox-nav:hover,.lightbox-close:hover{
  box-shadow:0 0 18px rgba(0,229,255,.22);
}


.trend-card{position:relative;overflow:hidden}
.trend-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(0,229,255,.14), transparent 35%);pointer-events:none}
.profile-stat{padding:1rem;border-radius:1rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);text-align:center}
.video-preview{width:100%;border-radius:1rem;border:1px solid rgba(255,255,255,.08);background:#000}
.page-link{background:#0c1321;color:#fff;border-color:#25304a}
.page-item.active .page-link{background:linear-gradient(90deg,var(--accent),var(--accent2));border-color:transparent;color:#04111a;font-weight:700}


.nav-box-row{
  gap:.55rem;
  align-items:center;
}
.nav-box-link{
  min-width:130px;
  justify-content:center;
  text-align:center;
  padding:.85rem 1rem !important;
  border-radius:1rem;
  background:linear-gradient(180deg, rgba(18,24,39,.92), rgba(10,14,24,.9));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 10px 22px rgba(0,0,0,.20);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease;
}
.nav-box-link:hover,
.nav-box-link:focus,
.navbar .nav-link.active{
  transform:translateY(-3px);
  border-color:rgba(0,229,255,.35);
  box-shadow:0 0 20px rgba(0,229,255,.16);
  color:#ffffff !important;
}
.header-action-btn{
  min-width:96px;
  height:44px;
  border-radius:1rem;
}
.header-user-text{
  padding:.75rem 1rem;
  border-radius:1rem;
  background:linear-gradient(180deg, rgba(18,24,39,.92), rgba(10,14,24,.9));
  border:1px solid rgba(255,255,255,.07);
  min-height:44px;
  display:flex;
  align-items:center;
}
@media (max-width: 1199.98px){
  .nav-box-link{
    min-width:100%;
  }
}


.brand-logo-wrap{display:flex;align-items:center;gap:.85rem}
.brand-logo{width:42px;height:42px;filter:drop-shadow(0 0 12px rgba(0,229,255,.25))}
.brand-special{
  font-family:Orbitron,sans-serif;
  letter-spacing:.08em;
  font-weight:800;
  background:linear-gradient(90deg,#ffffff 0%, #9aefff 45%, #b68cff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 18px rgba(0,229,255,.12);
}
.header-user-dropdown{
  min-height:44px;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(18,24,39,.92), rgba(10,14,24,.9));
  color:#dbe7ff;
}
.header-user-dropdown:hover,.header-user-dropdown:focus{
  border-color:rgba(0,229,255,.35);
  box-shadow:0 0 20px rgba(0,229,255,.16);
  color:#fff;
}
.public-user-link{
  color:#8bdfff;
  text-decoration:none;
}
.public-user-link:hover{
  color:#fff;
  text-shadow:0 0 12px rgba(0,229,255,.35);
}
.panel-nav-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:1rem;
}
.panel-nav-card{
  min-height:96px;
  border-radius:1.25rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(18,24,39,.94), rgba(10,14,24,.92));
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
  color:#eaf5ff;
  font-family:Orbitron,sans-serif;
  letter-spacing:.04em;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.panel-nav-card:hover,.panel-nav-card.active{
  transform:translateY(-4px);
  border-color:rgba(0,229,255,.35);
  box-shadow:0 0 24px rgba(0,229,255,.14);
  color:#fff;
}
.user-profile-hero{
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  align-items:center;
}
.user-stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1rem;
}


.chat-box{max-height:420px;overflow:auto;padding-right:.25rem}
.chat-message{border:1px solid rgba(255,255,255,.06);border-radius:1rem;padding:1rem;background:rgba(255,255,255,.02)}
.music-track{border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:1rem;background:rgba(255,255,255,.02)}
.comment-tags .badge{margin-right:.35rem}
.emoji-bar button{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#fff;
  border-radius:.75rem;
  padding:.4rem .6rem;
}
.emoji-bar button:hover{box-shadow:0 0 12px rgba(0,229,255,.18)}
.gif-preview{
  max-width:220px;
  max-height:220px;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.08);
}


.footer-social-icon{
  width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.footer-social-icon:hover{
  box-shadow:0 0 18px rgba(0,229,255,.18);
  transform:translateY(-2px);
}


.footer-social-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(18,24,39,.92), rgba(10,14,24,.9));
  color:#dff7ff;
  font-size:1.05rem;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease;
}
.footer-social-icon:hover{
  color:#fff;
  border-color:rgba(0,229,255,.35);
  box-shadow:0 0 20px rgba(0,229,255,.18);
  transform:translateY(-2px);
}
.footer-copy{
  font-size:.92rem;
  color:#94a3b8;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:1rem;
}