:root{
  --bg0:#07060a;
  --bg1:#0b0710;

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.66);
  --muted2: rgba(255,255,255,0.50);

  --glass: rgba(255,255,255,0.085);
  --glass2: rgba(255,255,255,0.055);
  --stroke: rgba(255,255,255,0.14);

  --accent:#c51424;
  --accent2:#ff5566;
  --accent3:#6f0b14;
  --ring: rgba(197,20,36,0.40);

  --r1:16px;
  --r2:22px;
  --r3:28px;

  --blur:18px;
  --max: 1200px;

  --shadow: 0 18px 62px rgba(0,0,0,0.62);
  --shadow2: 0 12px 28px rgba(0,0,0,0.40);
  --shadow3: 0 10px 22px rgba(0,0,0,0.30);

  --ease: cubic-bezier(.2,.9,.2,1);
}

html[data-theme="red"]{ --accent:#c51424; --accent2:#ff5566; --accent3:#6f0b14; --ring: rgba(197,20,36,0.40);}
html[data-theme="blue"]{ --accent:#2b7cff; --accent2:#8cc2ff; --accent3:#0e2d70; --ring: rgba(43,124,255,0.35);}
html[data-theme="green"]{ --accent:#28d98b; --accent2:#8ef2c8; --accent3:#0a5c3a; --ring: rgba(40,217,139,0.32);}
html[data-theme="purple"]{ --accent:#a855f7; --accent2:#e1b7ff; --accent3:#4c187a; --ring: rgba(168,85,247,0.34);}
html[data-theme="cyan"]{ --accent:#22d3ee; --accent2:#b2f7ff; --accent3:#0b4d63; --ring: rgba(34,211,238,0.30);}
html[data-theme="orange"]{ --accent:#fb7a28; --accent2:#ffd0a4; --accent3:#6b2805; --ring: rgba(251,122,40,0.34);}

*{box-sizing:border-box}
html,body{
  overflow-y: scroll;
height:100%}
body{
  overflow-y: scroll;

  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 740px at 72% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(900px 520px at 10% 0%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(900px 600px at 20% 110%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:url("/assets/img/cs2/noise.svg") 0 0/320px 320px repeat;
  opacity:0.10;
  pointer-events:none;
  z-index:0;
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 18px; position:relative; z-index:1}

.glass{
  background:
    radial-gradient(120% 140% at 20% 10%, rgba(255,255,255,0.12), transparent 55%),
    linear-gradient(180deg, var(--glass), var(--glass2));
  border:1px solid var(--stroke);
  border-radius: var(--r2);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.kicker{font-weight:900; letter-spacing:0.8px; text-transform:uppercase; font-size:12px; color: color-mix(in srgb, var(--accent2) 55%, white 45%);}
.h1{font-size:56px; line-height:1.02; margin:0; font-weight:950; letter-spacing:0.6px;}
.h1 .accent{color:var(--accent); text-shadow:0 0 42px color-mix(in srgb, var(--accent) 45%, transparent);}
.h2{font-size:18px; margin:0; font-weight:950; letter-spacing:0.2px}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}
.sep{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); margin:14px 0}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 16px; border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor:pointer;
  font-weight:900;
  box-shadow: var(--shadow3);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,0.24)}
.btn.primary{
  background:
    radial-gradient(120% 200% at 30% 0%, rgba(255,255,255,0.16), transparent 35%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #000 8%), color-mix(in srgb, var(--accent3) 92%, #000 8%));
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--accent) 34%, rgba(0,0,0,0.7));
}
.iconbtn{
  width:38px; height:38px; border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.iconbtn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,0.24)}
.icon{width:18px; height:18px; opacity:0.92}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(6,5,10,0.62);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar-inner{
  display:grid;
  grid-template-columns: 280px 1fr 320px;
  align-items:center;
  gap:12px;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:950; letter-spacing:0.6px;}
.logo{
  width:36px; height:36px; border-radius:14px;
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.16);
  display:grid; place-items:center;
  box-shadow: 0 12px 25px rgba(0,0,0,0.48);
}
.nav{display:flex; justify-content:center; gap:8px; flex-wrap:wrap;}
.nav a{padding:10px 12px; border-radius:12px; color: var(--muted); border:1px solid transparent; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);}
.nav a.active{color:var(--text); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18);}
.nav a:hover{color:var(--text); border-color: rgba(255,255,255,0.12);}
.rightbar{display:flex; justify-content:flex-end; gap:10px; align-items:center}
.social{display:flex; gap:8px}
.theme-dots{display:flex; gap:8px; padding:8px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.22)}
.dot{width:14px;height:14px;border-radius:999px;border:1px solid rgba(255,255,255,0.22); cursor:pointer}
.dot.active{outline:3px solid var(--ring); outline-offset:2px}
.dot.red{background:#c51424}
.dot.blue{background:#2b7cff}
.dot.green{background:#28d98b}
.dot.purple{background:#a855f7}
.dot.cyan{background:#22d3ee}
.dot.orange{background:#fb7a28}
.burger{display:none}
.drawer{display:none; margin:10px auto 0; padding:12px; border-radius:18px; max-width:1200px}

/* Hero */
.hero{
  margin-top:16px;
  border-radius: var(--r3);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow);
  position:relative;
}
.hero-bg{position:absolute; inset:-8px; background:url("/assets/img/cs2/hero.svg") center/cover no-repeat; transform: scale(1.03); filter: saturate(1.1) contrast(1.05);}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 22% 36%, rgba(0,0,0,0.62), transparent 62%),
    radial-gradient(900px 520px at 78% 34%, rgba(0,0,0,0.20), transparent 60%),
    radial-gradient(760px 460px at 60% 50%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.34));
  z-index:1;
}
.hero-inner{position:relative; z-index:2; padding: 34px 34px 22px; display:grid; grid-template-columns: 1.25fr 0.75fr; gap:18px;}
.hero-sub{margin-top:10px; font-size:15px; color:var(--muted)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.hero-stats{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.stat{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:18px; border:1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.22); min-width:120px;}
.stat b{font-size:16px}
.stat span{font-size:12px; color:var(--muted2)}
.hero-side{align-self:stretch; padding:14px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.22); font-weight:900; font-size:12px; color: var(--muted);}
.stack{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.big{margin-top:10px; padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,0.12); background: radial-gradient(520px 220px at 30% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%), rgba(0,0,0,0.20);}

/* Sections */
.section{padding:18px 0}
.grid3{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px}
.card{padding:16px}
.lift{transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);}
.lift:hover{transform: translateY(-1px); border-color: rgba(255,255,255,0.20); box-shadow: 0 16px 40px rgba(0,0,0,0.46);}

.list{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.22);}
.item:hover{border-color: rgba(255,255,255,0.18)}
.item .t{font-weight: 950}
.item .m{font-size:12px; color:var(--muted2); margin-top:4px}

.section-title{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.barline{height:4px; border-radius:999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent); flex:1; opacity:0.9}

.cards4{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px}
.game .img{height:150px; border-radius:18px; border:1px solid rgba(255,255,255,0.12); background:
  radial-gradient(640px 320px at 70% 25%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 72%),
  radial-gradient(420px 260px at 30% 85%, rgba(255,255,255,0.14), transparent 62%),
  linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  position:relative; overflow:hidden;}
.game .img::after{content:""; position:absolute; inset:-26px; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 12px); opacity:0.18;}
.game .name{margin-top:10px; font-weight:980}
.game .meta{margin-top:6px; display:flex; gap:8px; flex-wrap:wrap}
.game .btn{margin-top:10px; width:100%}

.two-col{display:grid; grid-template-columns: 1fr 360px; gap:16px; align-items:start}
.sidebar-stack{display:grid; gap:16px}
.panel-list{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.panel-line{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.22)}
.panel-line .left{display:flex; align-items:center; gap:10px}
.avatar{width:34px;height:34px;border-radius:14px;border:1px solid rgba(255,255,255,0.14); background:
  radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,0.18), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  display:grid;place-items:center}
.status-dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,0.28); box-shadow:0 0 0 3px rgba(255,255,255,0.06)}
.status-dot.on{background:#23d18b}
.status-dot.aw{background:#fbbf24}
.small{font-size:12px; color:var(--muted2)}

/* Quick icons */
.quick{display:grid; grid-template-columns: repeat(6, 1fr); gap:12px}
.qitem{padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.20); display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.qicon{width:42px;height:42px;border-radius:16px;border:1px solid rgba(255,255,255,0.16); display:grid; place-items:center; background: radial-gradient(26px 26px at 30% 30%, rgba(255,255,255,0.16), transparent 62%), rgba(255,255,255,0.05)}
.qname{font-weight:950}

/* Tables */
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th{text-align:left; font-size:12px; color:var(--muted2); text-transform:uppercase; letter-spacing:0.6px; padding:0 10px}
.table td{padding:12px 10px; background: rgba(0,0,0,0.22); border-top:1px solid rgba(255,255,255,0.10); border-bottom:1px solid rgba(255,255,255,0.10)}
.table tr td:first-child{border-left:1px solid rgba(255,255,255,0.10); border-top-left-radius:14px; border-bottom-left-radius:14px}
.table tr td:last-child{border-right:1px solid rgba(255,255,255,0.10); border-top-right-radius:14px; border-bottom-right-radius:14px}

/* Footer */
.footer{margin-top:22px; padding:26px 0 34px; border-top:1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.18);}
.footer-grid{display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap:16px}
.partner-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.partner{width:54px; height:32px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background: radial-gradient(24px 24px at 30% 30%, rgba(255,255,255,0.16), transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));}
.copy{margin-top:16px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color: var(--muted2); }

@media (max-width: 980px){
  .topbar-inner{grid-template-columns: 1fr; justify-items:center}
  .rightbar{justify-content:center; flex-wrap:wrap}
  .hero-inner{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .cards4{grid-template-columns: repeat(2, 1fr)}
  .two-col{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .quick{grid-template-columns: repeat(3, 1fr)}
  .burger{display:block}
  .nav{display:none}
  .drawer.show{display:block}
}
@media (max-width: 560px){
  .h1{font-size:40px}
  .cards4{grid-template-columns:1fr}
  .quick{grid-template-columns: repeat(2, 1fr)}
}



/* --- Compatibility layer for existing PHP views (old classes) --- */
.container{max-width:var(--max); margin:0 auto; padding:0 18px; position:relative; z-index:1}
.card{padding:16px; border-radius:var(--r2); border:1px solid var(--stroke);
  background: radial-gradient(120% 140% at 20% 10%, rgba(255,255,255,0.12), transparent 55%),
    linear-gradient(180deg, var(--glass), var(--glass2));
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.pad{padding:16px}
.h{font-weight:950; letter-spacing:0.2px; font-size:18px}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns: 1fr 1fr}
.grid-3{grid-template-columns: 1fr 1fr 1fr}
@media (max-width:980px){ .grid-2,.grid-3{grid-template-columns:1fr} }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-weight:900; font-size:12px;
}
.badge:hover{border-color: rgba(255,255,255,0.24); transform: translateY(-1px)}
.btn.secondary, .btn.secondary.small{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}
.btn.small{padding:9px 12px; border-radius:12px; font-size:12px}
.icon-btn, .iconbtn{width:38px; height:38px; border-radius:12px; display:grid; place-items:center}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  color: var(--text);
  outline:none;
}
textarea{min-height:120px; resize:vertical}
label{display:block; font-weight:900; margin-bottom:6px}
.form-row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width:980px){ .form-row{grid-template-columns:1fr} }
hr{border:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); margin:14px 0}

.posts-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
@media (max-width:980px){ .posts-grid{grid-template-columns:1fr} }
.post-card{display:block}
.post-card-link{transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease)}
.post-card-link:hover{transform: translateY(-1px); border-color: rgba(255,255,255,0.20); box-shadow: 0 16px 40px rgba(0,0,0,0.46)}
.post-title{font-weight:950; font-size:18px; margin-top:10px}
.clamp-2,.clamp-3{display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden}
.clamp-2{-webkit-line-clamp:2}
.clamp-3{-webkit-line-clamp:3}
.thumb{width:100%; border-radius:16px; border:1px solid rgba(255,255,255,0.12)}

.old-nav{display:none} /* old nav wrapper not used */


/* --- v2 UI fixes --- */
:root{
  --font-s: 13px;
  --font: 14.5px;
  --font-m: 16px;
  --font-l: 18px;
}
body{
  overflow-y: scroll;
font-size: var(--font); letter-spacing: .1px}
.container{padding: 0 22px}
@media (max-width:560px){ .container{padding:0 14px} }

.page-hero{
  margin: 18px 0 14px;
  padding: 18px 18px;
  border-radius: var(--r3);
  border:1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(900px 520px at 70% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%),
    rgba(0,0,0,0.22);
  backdrop-filter: blur(var(--blur));
}
.page-hero .kicker{opacity:.95}
.page-title{font-size: 42px; font-weight: 980; margin: 6px 0 10px}
.page-sub{color: var(--muted); max-width: 780px; line-height: 1.5}

.tabs{
  display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;
}
.tab{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  min-height: 40px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-weight: 950;
  color: var(--muted);
  transition: transform .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.tab:hover{transform: translateY(-1px); border-color: rgba(255,255,255,0.22); color: var(--text)}
.tab.active{
  color: var(--text);
  border-color: rgba(255,255,255,0.22);
  background:
    radial-gradient(120% 200% at 30% 0%, rgba(255,255,255,0.14), transparent 35%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.06)),
                          rgba(255,255,255,0.06));
}

.meta-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.meta-row .pill{padding:7px 10px}

.table{border-spacing:0 12px}
.table th{padding: 0 12px}
.table td{padding: 14px 12px; font-size: var(--font)}
.table tr td:first-child{padding-left:14px}
.table tr td:last-child{padding-right:14px}

.card .list .item{background: rgba(0,0,0,0.20)}
.item .t{font-weight: 980}
.item .m{line-height: 1.35}

.forum-grid{
  display:grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 16px;
  align-items:start;
}
@media (max-width: 980px){ .forum-grid{grid-template-columns:1fr} }

.forum-cats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px){ .forum-cats{grid-template-columns:1fr} }

.cat-card .desc{color: var(--muted); margin-top: 8px; line-height:1.5}
.cat-card .foot{display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top: 12px}
.cat-stats{display:flex; gap:8px; flex-wrap:wrap}

.thread-row{
  display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
}
.thread-row .info{min-width:0}
.thread-row .title{font-weight:980; font-size: 16px; line-height:1.25}
.thread-row .sub{margin-top:6px; color: var(--muted2); font-size: 12.5px; line-height:1.35}
.thread-row .actions{display:flex; gap:10px; align-items:center; flex-shrink:0}
.like-btn{
  width:38px; height:38px; border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  display:grid; place-items:center;
  cursor:pointer;
}
.like-btn:hover{border-color: rgba(255,255,255,0.22); transform: translateY(-1px)}
.like-btn.active{outline:3px solid var(--ring); outline-offset:2px}

.modal{
  position:fixed; inset:0; display:none; place-items:center;
  background: rgba(0,0,0,0.55);
  z-index: 999;
}
.modal.show{display:grid}
.modal .box{width:min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow:auto; padding:16px}
.modal .top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.modal .close{width:40px;height:40px;border-radius:14px;border:1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); cursor:pointer}


/* --- v4 header + dashboard + members polish --- */

/* Header alignment */
.topbar-inner{display:flex; align-items:center; gap:16px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.nav{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
}
.nav a{
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  color: var(--muted);
}
.nav a:hover{color:var(--text); background: rgba(255,255,255,0.06)}
.rightbar{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.theme-dots{display:flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid rgba(255,255,255,0.14); border-radius:16px; background: rgba(255,255,255,0.04)}
.theme-dots .dot{width:14px; height:14px; border-radius:999px}
.iconbtn, .icon-btn{display:grid; place-items:center}
.burger{display:none}
@media (max-width: 980px){
  .nav{display:none}
  .burger{display:grid}
}

/* Dashboard shell */
.dash{
  display:grid;
  grid-template-columns: 260px 1fr 340px;
  gap:16px;
  align-items:start;
  margin:18px 0 24px;
}
.dash-side{position:sticky; top:86px; height: fit-content}
.dash-side .dash-brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.dash-side .dash-brand img{width:28px; height:28px; border-radius:10px; border:1px solid rgba(255,255,255,0.14)}
.dash-side-title{margin-top:14px; font-weight:950; color:var(--muted2); font-size:12px; text-transform:uppercase; letter-spacing:.12em}
.dash-nav{display:grid; gap:8px; margin-top:10px}
.dash-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  text-decoration:none;
}
.dash-link .ic{width:20px; text-align:center}
.dash-link:hover{border-color: rgba(255,255,255,0.20); transform: translateY(-1px)}
.dash-link.active{
  border-color: rgba(255,255,255,0.22);
  background:
    radial-gradient(120% 220% at 30% 0%, rgba(255,255,255,0.14), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.05)), rgba(255,255,255,0.04));
}
.dash-main{min-width:0}
.dash-right{position:sticky; top:86px; height: fit-content}
.notif-badge{
  margin-left:auto;
  background: var(--accent);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;
  font-weight:950;
  padding:2px 7px;
  border-radius:999px;
  font-size:12px;
}
@media (max-width: 1180px){
  .dash{grid-template-columns: 260px 1fr}
  .dash-right{display:none}
}
@media (max-width: 980px){
  .dash{grid-template-columns: 1fr}
  .dash-side{position:relative; top:auto}
}

/* Ticket page grid inside card */
.ticket-grid{display:grid; grid-template-columns: 1.05fr 0.95fr; gap:18px; align-items:start}
@media (max-width:980px){ .ticket-grid{grid-template-columns:1fr} }
.ticket-item{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
  text-decoration:none;
  color: var(--text);
}
.ticket-item:hover{border-color: rgba(255,255,255,0.18); transform: translateY(-1px)}
.ticket-badges{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ticket-form .field{display:grid; gap:6px; margin-top:10px}
.ticket-form label{margin:0}
.ticket-form textarea{min-height:140px}

/* Members list */
.members-wrap{max-width: 1180px; margin: 0 auto}
.members-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top:16px;
}
@media (max-width: 1180px){ .members-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 720px){ .members-grid{grid-template-columns: 1fr} }

.member-card{
  display:flex; gap:14px; align-items:flex-start;
  text-decoration:none;
}
.member-ava{
  width:64px; height:64px; border-radius:18px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  display:grid; place-items:center;
  flex:0 0 auto;
  overflow:hidden;
}
.member-ava img{width:100%; height:100%; object-fit:cover}
.member-info{min-width:0}
.member-name{font-weight:980; font-size:16px; line-height:1.25}
.member-meta{margin-top:6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}


/* --- v5 members polish --- */
.members-wrap .page-title{font-size:40px}
.members-grid .glass.card{padding:14px}
.members-grid .member-card{align-items:center}
.member-info{display:flex; flex-direction:column}
.member-meta .pill{padding:6px 10px}


/* --- v6 navigation + notification fixes --- */
.topbar{position:sticky; top:0; z-index:100}
.topbar-inner{position:relative; z-index:2}
.topbar::before{
  content:"";
  position:absolute; inset:0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(0,0,0,0.35);
  pointer-events:none;
}

.nav{min-width:0; overflow:visible}
.rightbar{position:relative; z-index:5}
.rightbar, .social{gap:8px}
.theme-dots{padding:7px 9px}
.iconbtn{width:40px; height:40px}
.btn.small{padding:8px 12px}

.nav-more{position:relative; display:inline-flex; align-items:center}
.nav-more-btn{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-weight:900;
}
.nav-more-btn:hover{color:var(--text); border-color:rgba(255,255,255,0.18)}
.nav-more-dd{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:220px;
  padding:10px;
  border:1px solid rgba(255,255,255,0.14);
  z-index:80;
}
.nav-more-dd a{
  display:flex;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color: var(--text);
}
.nav-more-dd a:hover{background: rgba(255,255,255,0.06)}


/* --- v7 toast + tabs polish + header simplify --- */
.toast-root{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:min(380px, calc(100vw - 36px));
}
.toast{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  transform: translateY(10px);
  opacity:0;
  transition: all .22s ease;
}
.toast.show{transform: translateY(0); opacity:1;}
.toast.hide{transform: translateY(10px); opacity:0;}
.toast-h{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.toast-title{font-weight:950; font-size:13.5px}
.toast-body{
  overflow-y: scroll;
margin-top:6px; font-size:12.5px; color:rgba(255,255,255,0.84); line-height:1.35}
.toast-x{
  width:30px;height:30px;border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.86);
}
.toast-x:hover{background: rgba(255,255,255,0.08)}
.toast-btn{margin-top:10px; display:inline-flex}

/* Tabs */
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.tab{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  white-space:nowrap;
}
.tab.active{border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.06); color: var(--text);}

/* Notification dropdown items */
.notif-item{padding:10px;border-radius:14px; display:flex; gap:10px; align-items:flex-start; justify-content:space-between}
.notif-item .ni-main{min-width:0}
.notif-item .ni-title{font-weight:950; font-size:13.2px; line-height:1.2}
.notif-item .ni-body{
  overflow-y: scroll;
margin-top:6px; font-size:12.4px; color:rgba(255,255,255,0.78); line-height:1.35}
.notif-item.is-read{opacity:.82}


.settings{position:relative}
.settings-dd{
  position:absolute;
  top: calc(100% + 10px);
  right:0;
  width: 260px;
  padding:12px;
  border:1px solid rgba(255,255,255,0.14);
  z-index:90;
}
.dd-title{font-weight:950; font-size:13px; margin-bottom:10px}
.theme-grid{display:flex; flex-wrap:wrap; gap:10px}
.theme-grid .dot{
  width:20px;height:20px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
}
.theme-grid .dot.red{background:#b3001a}
.theme-grid .dot.blue{background:#1b4cff}
.theme-grid .dot.purple{background:#7b3cff}
.theme-grid .dot.green{background:#19b86b}
.theme-grid .dot.orange{background:#ff7a18}
.theme-grid .dot.cyan{background:#00bcd4}
.dd-link{display:flex; padding:10px 10px; border-radius:12px; text-decoration:none; color:var(--text)}
.dd-link:hover{background: rgba(255,255,255,0.06)}

/* v9 forum role pills */
.pill.role-admin{background:rgba(220,20,60,0.18); border-color:rgba(220,20,60,0.35)}
.pill.role-mod{background:rgba(255,165,0,0.16); border-color:rgba(255,165,0,0.30)}
.pill.role-staff{background:rgba(0,180,255,0.14); border-color:rgba(0,180,255,0.28)}
.pill.role-vip{background:rgba(140,80,255,0.16); border-color:rgba(140,80,255,0.28)}
.pill.role-member{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12)}

/* v11 dropdown readability (not glass) */
.dropdown{
  background: rgba(10,10,14,0.96) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,0.70) !important;
  backdrop-filter: none !important;
}
.dropdown .dd-title{color: rgba(255,255,255,0.92)}
.dropdown a, .dropdown button{color: rgba(255,255,255,0.92)}
.dropdown .muted{color: rgba(255,255,255,0.70)}

/* v12 dropdown fixes */
.notif-dd, .settings-dd, .nav-more-dd { z-index: 9999; }
.notif-dd .notif-item{background: rgba(20,20,28,0.88) !important; border-color: rgba(255,255,255,0.12) !important;}
.notif-dd .ni-title{color: rgba(255,255,255,0.95)}
.notif-dd .ni-body{
  overflow-y: scroll;
color: rgba(255,255,255,0.78)}

/* v13 role pills stronger */
.pill{display:inline-flex;align-items:center;gap:6px}

/* v14b cosmetic badge */
.pill.role-badge{background:rgba(0,0,0,0.18); border-color:rgba(255,255,255,0.18)}

/* v15 dropdown readability (not glass) */
.dropdown{background: rgba(10,10,14,0.96) !important; border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: 0 20px 55px rgba(0,0,0,0.70) !important; backdrop-filter:none !important;}
.dropdown .dd-title{color:rgba(255,255,255,0.92)}
.dropdown a, .dropdown button{color:rgba(255,255,255,0.92)}
.dropdown .muted{color:rgba(255,255,255,0.70)}


/* v21 dropdown positioning + overflow */
.rightbar, .notif-wrap, .settings, .nav-more-wrap{ position: relative; }
.dropdown{ position:absolute; top: calc(100% + 10px); right:0; min-width: 320px; }
.nav-more-dd{ right:0; left:auto; }
#notifList{ max-height: 340px; overflow:auto; padding-right:6px; }
.notif-dd .ni-body{
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}



/* v23: keep large images inside ticket thread / posts */
.msg-body img,
.ticket-thread img,
.ticket-chat img,
.post-body img{
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 12px;
}
.msg-body, .ticket-thread, .ticket-chat, .post-body{
  overflow: hidden;
}
.msg-body{
  overflow-wrap: anywhere;
  word-break: break-word;
}
.img-wrap{
  max-width:100%;
  overflow:hidden;
}


.iconbtn .ico{display:block}


/* v25: lighten theme/settings button + make icon always visible */
#settingsBtn.iconbtn{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  color: var(--text);
}
#settingsBtn.iconbtn:hover{
  background: rgba(255,255,255,0.14);
}