:root{
  --bg:#05070c;
  --bg2:#070a12;
  --panel:rgba(255,255,255,.035);
  --panel2:rgba(255,255,255,.02);
  --text:#eef3ff;
  --muted:#a2afc8;
  --accent:#6ee7ff;
  --accent2:#a78bfa;
  --danger:#ff4d4d;
  --border:rgba(255,255,255,.12);
  --shadow: 0 22px 80px rgba(0,0,0,.78);
}

*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--text);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--text)}
.small-muted{color:var(--muted)}
.hr-soft{border-top:1px solid rgba(255,255,255,.10);opacity:1}
.fade-in{animation:fade .22s ease}
@keyframes fade{from{opacity:.0;transform:translateY(4px)}to{opacity:1;transform:none}}

.container{max-width:1240px}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
}
.panel.soft{box-shadow:none;background:var(--panel2)}

.brand{font-weight:950;letter-spacing:.6px}
.brand span{color:var(--accent)}

/* Typography */
h1,h2,h3,h4,h5{letter-spacing:.2px}
p{line-height:1.55}
.text-decoration-underline{text-underline-offset:3px}

/* Inputs */
.form-control, .form-select{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:var(--text)!important;
  border-radius:14px!important;
}
.form-control:focus, .form-select:focus{
  box-shadow:none!important;
  border-color:rgba(110,231,255,.35)!important;
}
::placeholder{color:rgba(162,175,200,.7)!important}

/* Buttons */
.btn{
  border-radius:14px!important;
  font-weight:900!important;
}
.btn-brutal{
  background: linear-gradient(90deg, rgba(110,231,255,.16), rgba(167,139,250,.16)) !important;
  border:1px solid rgba(110,231,255,.30) !important;
  color:var(--text)!important;
}
.btn-brutal:hover{background: linear-gradient(90deg, rgba(110,231,255,.22), rgba(167,139,250,.22)) !important}
.btn-ghost{
  background: transparent !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color: var(--text) !important;
}
.btn-ghost:hover{background:rgba(255,255,255,.05)!important}
.btn-ghost.active{background:rgba(255,255,255,.07)!important}
.btn-secondary{
  background: rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}
.btn-danger{border-radius:14px!important}

/* Navbar */
.navbar-pro{
  background:rgba(5,7,12,.88)!important;
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}
.navbar-pro__grid{
  display:grid;
  grid-template-columns: 150px 1fr 360px auto;
  gap:12px;
  align-items:center;
}
.navbar-pro__links{gap:6px;align-items:center;min-width:0}
.navlink{
  color:rgba(238,243,255,.92);
  text-decoration:none;
  font-weight:950;
  font-size:.92rem;
  padding:8px 10px;
  border-radius:12px;
  white-space:nowrap;
}
.navlink:hover{background:rgba(255,255,255,.05)}
.navbar-pro__burger{border:1px solid rgba(255,255,255,.16);border-radius:14px}
.navbar-toggler:focus{box-shadow:none}

@media(max-width:1199px){
  .navbar-pro__grid{grid-template-columns: 150px 1fr auto}
  .navbar-pro__search{display:none!important}
}
@media(max-width:991px){
  .navbar-pro__grid{grid-template-columns: 1fr auto}
}

/* Searchbox */
.searchbox{position:relative}
.searchbox__input{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px 44px 12px 14px;
  color:var(--text);
  outline:none;
  transition: border-color .2s ease, background .2s ease, transform .12s ease;
}
.searchbox__input:focus{
  border-color:rgba(110,231,255,.35);
  background:rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.searchbox__btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--text);
}
.searchbox__drop{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(5,7,12,.98);
  box-shadow:0 18px 60px rgba(0,0,0,.80);
  overflow:hidden;
  z-index:50;
}
.qs-item{display:block;padding:12px 12px;text-decoration:none;color:var(--text)}
.qs-item:hover{background:rgba(255,255,255,.06)}
.qs-title{font-weight:950}
.qs-meta{color:var(--muted);font-size:.9rem;margin-top:2px}

/* Offcanvas full-screen “app menu” */
.offcanvas-full{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
}
.offcanvas{background:rgba(5,7,12,.98)!important}
.offcanvas-header{border-bottom:1px solid rgba(255,255,255,.08)}
.offcanvas-body{overflow:clip ;     background: radial-gradient(#000000, #000000)!important;}

.mnav-grid{display:grid;gap:12px}
.mnav-item{
  display:flex;align-items:center;justify-content:center;
  padding:14px;border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);text-decoration:none;font-weight:950;
}
.mnav-item.muted{opacity:.85}
.mnav-item.danger{background:rgba(255,77,77,.12);border-color:rgba(255,77,77,.28)}

/* Layout main */
.layout{display:grid;grid-template-columns: 320px 1fr;gap:16px}
@media(max-width:991px){.layout{grid-template-columns:1fr}}
.sidebar,.content{min-width:0}

/* Filter */
.filter-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:14px;
  box-shadow:none;
}
.filter-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.filter-title{font-weight:950;font-size:16px}
.filter-toggle-btn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:12px;
  padding:8px 12px;
}
.filter-label{font-size:13px;font-weight:900;margin-bottom:8px;color:var(--muted)}
.filter-select,.filter-input{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:991px){.filter-grid{grid-template-columns:1fr}}
.chip-grid{display:flex;flex-wrap:wrap;gap:8px;max-height:220px;overflow:auto;padding-right:6px}
.chip{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;padding:7px 10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  cursor:pointer;user-select:none;font-weight:900;font-size:.82rem;
}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip.active{background:rgba(110,231,255,.12);border-color:rgba(110,231,255,.30)}

/* News cards */
.grid-news{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:12px;
}
@media(max-width:1399px){.grid-news{grid-template-columns: repeat(4, minmax(0,1fr));}}
@media(max-width:991px){.grid-news{grid-template-columns: repeat(2, minmax(0,1fr));}}
@media(max-width:420px){.grid-news{grid-template-columns: 1fr;}}

.news-card{
  text-decoration:none;color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.02);
  box-shadow: 0 16px 55px rgba(0,0,0,.65);
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.news-card:hover{transform:translateY(-2px);border-color:rgba(110,231,255,.22);background:rgba(255,255,255,.03)}
.news-card__poster{position:relative;background:#05070c}
.news-card__poster img{width:100%;height:220px;object-fit:cover}
@media(max-width:575px){.news-card__poster img{height:200px}}
.news-card__chips{position:absolute;left:10px;top:10px;display:flex;gap:8px;flex-wrap:wrap}
.chip-pill{
  padding:6px 10px;border-radius:999px;font-weight:950;font-size:.78rem;
  background:rgba(0,0,0,.50);border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}
.chip-accent{border-color:rgba(110,231,255,.30);background:rgba(110,231,255,.14)}
.news-card__body{padding:10px 12px}
.news-card__title{font-weight:950;line-height:1.12}
.news-card__meta{color:var(--muted);font-size:.92rem;margin-top:6px}

/* Slider */
.hscroll{display:flex;gap:12px;overflow:auto;padding:6px 2px;scroll-snap-type:x mandatory}
.hscroll .news-card{min-width:180px;scroll-snap-align:start}
@media(max-width:575px){.hscroll .news-card{min-width:160px}}

/* “Full movie poster” card: center with blur */
.poster-shell{
  position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
}
.poster-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter: blur(20px);
  transform: scale(1.18);
  opacity:.85;
}
.poster-fg{
  position:relative;padding:18px;display:flex;justify-content:center;
}
.poster-fg img{
  width:78%;max-width:320px;
  border-radius:16px;border:1px solid rgba(255,255,255,.14);
  background:#0b0f17;
}
@media(min-width:992px){
  .poster-bg{display:none}
  .poster-fg{padding:0}
  .poster-fg img{width:100%;max-width:none;border-radius:18px}
}

/* 10 rating UI */
.rating10{margin-top:12px}
.rating10__head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rating10__title{font-weight:950}
.rating10__stats{color:var(--muted);font-size:.92rem}
.rating10__stats .sep{margin:0 6px;opacity:.6}
.rating10__stars{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.rating10__stars .rstar{
  width:28px;height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  position:relative;
}
.rating10__stars .rstar:hover{border-color:rgba(110,231,255,.28)}
.rating10__stars .rstar::before{
  content:"";
  position:absolute;inset:6px;
  background:linear-gradient(90deg, rgba(110,231,255,.85), rgba(167,139,250,.85));
  clip-path: polygon(50% 0%, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 78%, 20% 100%, 30% 60%, 0% 38%, 38% 35%);
  opacity:.18;
}
.rating10__stars .rstar.active::before{opacity:1}

/* Service ratings */
.rate-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.rate-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.rate-pill .logo{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:950;letter-spacing:.5px;
}
.logo-imdb{background:#f5c542;color:#121212}
.logo-kp{background:linear-gradient(90deg,#ff8a00,#ff3d00);color:#111}
.rate-pill .val{font-weight:950;font-size:18px}
.rate-pill .lbl{color:var(--muted);font-size:13px;margin-top:-2px}

/* Dropdown / modal / tables */
.dropdown-menu-dark{
  background:rgba(5,7,12,.98)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:16px!important;
}
.dropdown-item{color:var(--text)!important;font-weight:900}
.dropdown-item:hover{background:rgba(255,255,255,.06)!important}

.modal-content{
  background:rgba(5,7,12,.97)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:18px!important;
  color:var(--text)!important;
}
.modal-header{border-bottom:1px solid rgba(255,255,255,.08)!important}
.modal-footer{border-top:1px solid rgba(255,255,255,.08)!important}
.btn-close{filter: invert(1); opacity:.9}

.table{color:var(--text)!important}
.table td,.table th{border-color:rgba(255,255,255,.10)!important}

/* Comments */
.comment{padding:10px 0}
.comment__head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.comment__ava{
  width:36px!important;height:36px!important;border-radius:50%!important;
  object-fit:cover;border:1px solid rgba(255,255,255,.14)
}
.comment__votes{display:flex;gap:10px;margin-top:8px}
.cv-btn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:12px;
  padding:6px 10px;
  font-weight:950;
}
.cv-btn:hover{border-color:rgba(110,231,255,.28);background:rgba(255,255,255,.06)}

/* Profile */
.profile-head{
  display:grid;
  grid-template-columns: 72px 1fr auto;
  gap:14px;
  align-items:center;
}
@media(max-width:767px){
  .profile-head{grid-template-columns: 72px 1fr;}
  .profile-actions{grid-column:1/-1; display:flex; gap:10px; flex-wrap:wrap}
}
.profile-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.avatar{
  width:72px;height:72px;border-radius:50%;
  object-fit:cover;border:1px solid rgba(255,255,255,.14);
}
.avatar-letter{
  width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:950;font-size:24px;
  background: radial-gradient(circle at 30% 30%, rgba(110,231,255,.65), rgba(167,139,250,.65));
  border:1px solid rgba(255,255,255,.16);
}

/* Calendar - beautiful */
.calendar-days{display:grid;gap:14px;margin-top:14px}
.cal-day{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  border-radius:18px;
  padding:14px;
}
.cal-day__head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:10px;
}
.cal-day__date{font-weight:950}
.cal-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media(max-width:767px){.cal-grid{grid-template-columns:1fr}}
.cal-item{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  border-radius:16px;
  padding:12px;
}
.cal-title{font-weight:950}
.cal-sub{margin-top:2px}
.cal-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge-soft{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
}

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(5,7,12,.70);
  margin-top:40px;
}
.footer-grid{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-links a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

.comment__ava.letter{
  width:36px!important;
  height:36px!important;
  border-radius:50%!important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  font-size:14px;
  background: radial-gradient(circle at 30% 30%, rgba(110,231,255,.65), rgba(167,139,250,.65));
  border:1px solid rgba(255,255,255,.16);
  color: #0b0f17;
}

.nav-pills-brutal .nav-link{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color: var(--text);
  font-weight:900;
  padding:10px 14px;
}
.nav-pills-brutal .nav-link:hover{
  background:rgba(255,255,255,.05);
  border-color: rgba(110,231,255,.22);
}
.nav-pills-brutal .nav-link.active{
  background: linear-gradient(90deg, rgba(110,231,255,.16), rgba(167,139,250,.16));
  border-color: rgba(110,231,255,.30);
  color: var(--text);
}