/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

:root{
  --bg:#0e0e12; --panel:#141419; --panel-2:#0c0c10; --text:#e9e7ef; --muted:#a6a3b5;
  --accent:#8b6dd8; --accent-2:#6f55c6; --border:1px solid rgba(255,255,255,.06);
  --radius:16px; --shadow:0 8px 30px rgba(0,0,0,.35);
  --container:1280px; --gutter:16px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body.page{
  margin:0; color:var(--text);
  font-family:"Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing:.02em; font-weight:500;
  min-height:100svh; display:flex; flex-direction:column;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(139,109,216,.08), transparent 60%),
    radial-gradient(1000px 700px at 120% 10%, rgba(139,109,216,.08), transparent 60%),
    var(--bg);
}

/* ===== Header ===== */
.header{
  position:sticky; top:0; z-index:10;
  background: linear-gradient(180deg, rgba(139,109,216,.10), transparent 60%);
  backdrop-filter: blur(6px);
}
.header__bar{
  width:min(var(--container), 100% - 2*var(--gutter));
  margin:10px auto 0;
  padding:8px var(--gutter);
  display:flex; align-items:center; gap:12px;
  background: linear-gradient(180deg, #1b1722, #15121b);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.logo__badge{
  width:40px;height:40px;border-radius:999px;background:#0f0f14;color:#eae7ff;
  display:grid;place-items:center;font-weight:800;letter-spacing:.8px;
  box-shadow:0 0 16px rgba(139,109,216,.55), inset 0 0 8px rgba(139,109,216,.35)
}
.logo__word{
  font-weight:800;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 16px rgba(139,109,216,.25)
}

/* ===== Nav buttons ===== */
.nav{display:flex; gap:10px; margin-left:auto; align-items:center}
.navbtn{
  --bg1:#0f0d14; --bg2:#14111c;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, var(--bg2), var(--bg1));
  color:var(--text); text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  box-shadow: inset 0 -8px 20px rgba(0,0,0,.25);
}
.navbtn:hover{
  border-color: rgba(139,109,216,.45);
  box-shadow: 0 0 24px rgba(139,109,216,.18), inset 0 -10px 24px rgba(0,0,0,.3);
  transform: translateY(-1px);
}
.navbtn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(139,109,216,.35), inset 0 -10px 24px rgba(0,0,0,.3);
}
.navbtn--accent{ border-color:rgba(139,109,216,.35); }

/* профіль */
.profile{position:relative}
.profile__menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:220px; padding:8px;
  background:linear-gradient(180deg, #1b1722, #15121b);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.profile__item{display:block; padding:10px 12px; border-radius:10px; color:#e9e7ef; text-decoration:none}
.profile__item:hover{background: rgba(255,255,255,.04)}
.profile__sep{border:none; border-top:1px solid rgba(255,255,255,.06); margin:6px 0}
.role-badge{
  margin-left:8px; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.06);
  background:#221b2c; color:#e9e7ef; font-size:12px; font-weight:700;
}

#logoutBtn, #mobileLogoutBtn{
  background-color: #0c0c10;
}

#logoutBtn:hover, #mobileLogoutBtn:hover{
  background-color:#221b2c;
}

/* Burger */
.burger{ margin-left:10px; display:none; width:40px; height:40px;
  border:1px solid rgba(255,255,255,.06); border-radius:12px; background:#0f0f14; cursor:pointer; position:relative;
  transition:background .2s ease, box-shadow .2s ease, transform .15s ease; }
.burger:hover{ box-shadow:0 0 16px rgba(139,109,216,.18); transform: translateY(-1px); }
.burger__line, .burger::before, .burger::after{ content:""; position:absolute; left:9px; right:9px; height:2px; background:#e9e7ef; transition:.25s; }
.burger__line{ top:50%; transform:translateY(-50%) }
.burger::before{ top:12px } .burger::after{ bottom:12px }
.burger.is-active .burger__line{opacity:0}
.burger.is-active::before{ top:50%; transform:translateY(-50%) rotate(45deg) }
.burger.is-active::after{ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }

/* Off-canvas */
.mobileMenu{
  position:fixed; right:0; top:0; height:100vh; width:min(84vw, 360px);
  background:#17141d; border-left:1px solid rgba(255,255,255,.06);
  box-shadow:-20px 0 60px rgba(0,0,0,.35);
  transform:translateX(100%); transition:transform .28s ease; z-index:15; padding:18px 14px;
}
.mobileMenu.is-open{ transform:translateX(0) }
.mobileMenu__nav{ display:flex; flex-direction:column; gap:6px }
.mobileMenu__link{ padding:12px 10px; border-radius:10px; color:#e9e7ef; text-decoration:none }
.mobileMenu__link:hover{ background:rgba(255,255,255,.04) }
.mobileMenu__backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:14; opacity:0; transition:opacity .28s ease; }
.mobileMenu__backdrop.is-open{ opacity:1 }
body.menu-open{ overflow:hidden }

/* Main */
.main{flex:1; width:min(var(--container), 100% - 2*var(--gutter)); margin:18px auto 20px; padding:0}

/* Секции и сетки */
.section + .section{margin-top:22px}
.section__header{display:flex; align-items:center; justify-content:space-between; gap:12px}
.section__title{margin:0; padding:12px 16px; font-size:26px; font-weight:800; background:#17141d; border:var(--border); border-radius:12px; box-shadow:inset 0 -10px 30px rgba(0,0,0,.25)}
.section__title_Mod{margin:0; padding:0 16px 12px 16px; font-size:26px; font-weight:800}
.section__more{display:inline-block; padding:8px 12px; border-radius:10px; border:var(--border); background:#121019; color:#e9e7ef; text-decoration:none}

/* Три колонки */
.board{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px}
.panel{background:#17141d; border:var(--border); border-radius:12px; padding:10px}
.panel__head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.panel__title{margin:0; font-size:16px; font-weight:700}
.panel__more{color:#e9e7ef; text-decoration:none; opacity:.7}

/* Карточки */
.grid{display:grid; gap:10px}
.grid--genres{grid-template-columns:repeat(2, 1fr)}
.grid--tight{grid-template-columns:repeat(2, 1fr)}
.grid--latest{grid-template-columns:repeat(3, 1fr)}
.card{ background:#222028; border:var(--border); border-radius:12px; overflow:hidden; position:relative; aspect-ratio:3/4; box-shadow:inset 0 -40px 60px rgba(0,0,0,.25) }
.card--latest{ aspect-ratio:16/9 }
.card__title{position:absolute; left:8px; right:8px; bottom:8px; font-size:14px; font-weight:700; color:#e9e7ef; text-shadow:0 1px 0 rgba(0,0,0,.5)}
.card__stub{ position:absolute; inset:0; display:grid; place-items:center; color:#a8a5b8; font-size:13px }

/* BG handwriting */
.bg-script{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; opacity:.18; z-index:0}
.bg-script__text{ font-family:'Great Vibes', cursive; font-size:clamp(72px, 16vw, 280px); fill:transparent; stroke:rgba(139,109,216,.85); stroke-width:2.4; paint-order:stroke; filter:url(#soft-glow); mix-blend-mode:screen; stroke-dasharray:1000; stroke-dashoffset:1000; animation:drawText 6s ease-in-out infinite }
@keyframes drawText{ 0%{stroke-dashoffset:var(--dash,1000);opacity:0} 10%{opacity:.9} 55%{stroke-dashoffset:0;opacity:1} 70%{opacity:.85} 100%{stroke-dashoffset:0;opacity:0} }

/* Footer */
.footer{color:#a6a3b5; text-align:center; padding:28px 0}

/* Guard (гость) */
.is-disabled{ opacity:.5; pointer-events:none; }
.guard-tip{ position:absolute; inset:auto auto 100% 0; transform:translateY(-6px); background:#1c1524; border:1px solid rgba(255,255,255,.08); color:#e9e7ef; padding:6px 10px; border-radius:8px; font-size:12px; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.35) }

/* Adaptive */
@media (max-width:992px){
  .board{grid-template-columns:1fr}
  .grid--genres{grid-template-columns:repeat(3,1fr)}
  .grid--tight{grid-template-columns:repeat(3,1fr)}
  .grid--latest{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .nav{display:none}
  .burger{display:inline-block; margin-left:auto}
  .grid--genres{grid-template-columns:repeat(3,1fr)}
  .grid--tight{grid-template-columns:repeat(3,1fr)}
  .grid--latest{grid-template-columns:repeat(3,1fr)}
  .section__title{font-size:22px}
}
@media (max-width:520px){
  .grid--genres{grid-template-columns:repeat(2,1fr)}
  .grid--tight{grid-template-columns:repeat(2,1fr)}
  .grid--latest{grid-template-columns:repeat(1,1fr)}
  .logo__word{font-size:16px; font-weight:700}
}
.mobileMenu__backdrop.is-open{opacity:1}