:root{
  --bg:#080b11; --bg2:#0c1119; --panel:#121a27; --panel2:#0e1520; --raise:#16202f;
  --text:#e9effb; --muted:#9daec7; --dim:#7d8ba3;
  --line:#22304a; --line2:#1a2436;
  --accent:#ff4d7d; --accent2:#a06bff; --accent3:#57c7ff;
  --chip:#1a2236; --chipText:#cfe0ff;
  --ok:#39d98a; --shadow:0 12px 34px rgba(0,0,0,.45);
  --radius:16px; --maxw:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(255,77,125,.16), transparent 60%),
    radial-gradient(900px 560px at 92% 4%, rgba(160,107,255,.14), transparent 62%),
    linear-gradient(180deg,#070a10 0%, var(--bg) 42%, #070a10 100%);
  background-attachment:fixed;
  line-height:1.6; overflow-wrap:anywhere; word-break:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent3);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap,.wrapper{max-width:var(--maxw);margin:0 auto;padding:18px 16px 56px}
h1,h2,h3{line-height:1.22;margin:0 0 12px}
h1{font-size:clamp(24px,3.6vw,38px);letter-spacing:-.02em}
h2{font-size:clamp(20px,2.5vw,27px);letter-spacing:-.01em;margin-top:30px}
h3{font-size:clamp(17px,1.9vw,20px)}
p{margin:0 0 13px}

/* ---------- site nav ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(8,11,17,.86);
  -webkit-backdrop-filter:saturate(150%) blur(10px);backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line2)}
.topbar-in{max-width:var(--maxw);margin:0 auto;padding:11px 16px;display:flex;
  align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:19px;
  color:var(--text);letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo .mark{width:26px;height:26px;border-radius:8px;flex:0 0 26px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid;place-items:center;font-size:15px}
.mainnav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;align-items:center}
.mainnav a{color:var(--muted);font-size:14.5px;font-weight:600;padding:7px 11px;border-radius:9px}
.mainnav a:hover{color:var(--text);background:var(--raise);text-decoration:none}
.mainnav a.cta{background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;box-shadow:0 6px 18px rgba(255,77,125,.28)}
.mainnav a.cta:hover{filter:brightness(1.08)}

/* ---------- generic surfaces ---------- */
.crumb,.breadcrumb{color:var(--dim);font-size:13px;margin:14px 0 16px}
.crumb b,.breadcrumb strong{color:var(--muted);font-weight:700}
.crumb a,.breadcrumb a{color:var(--muted)}
.card,.panel{background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.tag,.chip{display:inline-block;background:var(--chip);color:var(--chipText);
  border:1px solid rgba(255,255,255,.07);padding:3px 10px;border-radius:999px;font-size:12.5px}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:13px 24px;border-radius:12px;font-weight:800;
  font-size:15.5px;border:1px solid transparent;cursor:pointer;text-align:center}
.btn:hover{text-decoration:none;filter:brightness(1.09)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:0 10px 26px rgba(255,77,125,.3)}
.btn-ghost{background:var(--raise);color:var(--text);border-color:var(--line)}
.btn-yes{background:linear-gradient(135deg,#22c777,#12a45f);color:#fff;
  box-shadow:0 10px 26px rgba(34,199,119,.26)}
.btn-no{background:linear-gradient(135deg,#f04a5e,#c92b41);color:#fff;
  box-shadow:0 10px 26px rgba(240,74,94,.24)}

/* ---------- join / cta strip ---------- */
.joinbox{margin:26px 0;padding:22px 20px;text-align:center;border-radius:var(--radius);
  border:1px solid rgba(255,77,125,.30);
  background:linear-gradient(135deg,rgba(255,77,125,.11),rgba(160,107,255,.09));}
.joinbox h3{margin:0 0 7px;font-size:19px}
.joinbox p{margin:0 0 14px;color:var(--muted);font-size:14.5px}

/* ---------- forum thread ---------- */
.thread-header,.header{background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.thread-meta,.meta{display:flex;flex-wrap:wrap;gap:9px 14px;color:var(--muted);font-size:13.5px}
.thread,.threadlist{margin-top:16px}
.post,.post-row{display:flex;gap:14px;margin:15px 0;align-items:flex-start}
.user,.user-panel{width:210px;flex:0 0 210px;background:rgba(18,26,39,.75);
  border:1px solid var(--line);border-radius:14px;padding:13px;text-align:left}
.user-panel img,.avatar img{width:80px;height:80px;border-radius:13px;object-fit:cover;
  border:1px solid rgba(255,255,255,.09);background:#0a0f18;margin-bottom:9px}
.avatar{width:80px;height:80px;border-radius:13px;overflow:hidden;margin-bottom:9px;
  border:1px solid rgba(255,255,255,.09);background:#0a0f18}
.avatar img{margin:0;border:0;border-radius:0;width:100%;height:100%}
.uname,.user .name{font-weight:800;margin-bottom:6px;font-size:14.5px}
.uname a,.user .name a{color:var(--text)}
.umeta,.user .stats{font-size:12px;color:var(--dim);line-height:1.5}
.content,.post-content{flex:1;min-width:0;background:rgba(18,26,39,.52);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.bar,.post-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 13px;background:rgba(14,21,32,.9);border-bottom:1px solid var(--line);
  color:var(--dim);font-size:13px}
.post-index{color:var(--muted);font-weight:700}
.body,.post-body{padding:15px 15px 6px;font-size:15.2px;line-height:1.68}
.body ul,.post-body ul{margin:9px 0 13px 20px;padding:0}
.body li,.post-body li{margin:0 0 6px}
.post-body p:last-child{margin-bottom:13px}
.login,.login-box{margin-top:24px;padding:20px;text-align:center;border-radius:var(--radius);
  border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel2))}
.login p,.login-box p{color:var(--muted);margin:0 0 13px}
.login-btn{display:inline-block;padding:12px 24px;border-radius:12px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 10px 26px rgba(255,77,125,.28)}
.login-btn:hover{text-decoration:none;filter:brightness(1.08)}
.footer-note{margin-top:12px;font-size:12.5px;color:var(--dim)}

/* ---------- lists / related ---------- */
.linklist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.linklist li{background:rgba(18,26,39,.5);border:1px solid var(--line2);
  border-radius:11px;padding:11px 13px;font-size:14.5px}
.linklist li:hover{border-color:var(--line)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.pill-row a{background:var(--chip);color:var(--chipText);border:1px solid rgba(255,255,255,.07);
  padding:6px 12px;border-radius:999px;font-size:13px}
.pill-row a:hover{background:var(--raise);text-decoration:none}
.quote{border-left:3px solid var(--accent);background:rgba(255,77,125,.06);
  padding:12px 15px;border-radius:0 12px 12px 0;margin:0 0 12px;font-size:14.6px}
.quote .who{display:block;margin-top:7px;font-size:12.8px;color:var(--dim);font-weight:700}

/* ---------- hero (homepage) ---------- */
.hero{display:grid;grid-template-columns:1.06fr .94fr;gap:30px;align-items:center;
  margin:26px 0 10px}
.hero-copy h1{margin-bottom:14px}
.hero-copy .lede{font-size:clamp(15.5px,1.75vw,18px);color:var(--muted);margin-bottom:18px}
.hero-media{border-radius:20px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 22px 60px rgba(0,0,0,.55);position:relative}
.hero-media img{width:100%;display:block}
.gate{margin:20px 0 0;padding:20px;border-radius:var(--radius);
  border:1px solid rgba(255,77,125,.3);
  background:linear-gradient(135deg,rgba(255,77,125,.12),rgba(160,107,255,.09))}
.gate p{margin:0 0 13px;font-weight:800;font-size:17px}
.gate-btns{display:flex;gap:12px;flex-wrap:wrap}
.gate-btns .btn{flex:1 1 150px}

/* ---------- footer ---------- */
.sitefoot{border-top:1px solid var(--line2);background:rgba(7,10,16,.7);margin-top:44px}
.sitefoot-in{max-width:var(--maxw);margin:0 auto;padding:30px 16px 36px}
.footcols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.footcols h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.footcols ul{list-style:none;margin:0;padding:0}
.footcols li{margin:0 0 7px}
.footcols a{color:var(--muted);font-size:14px}
.copy{margin-top:24px;padding-top:18px;border-top:1px solid var(--line2);
  color:var(--dim);font-size:13px;text-align:center}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left}
th{background:var(--raise)}

details{background:rgba(18,26,39,.5);border:1px solid var(--line2);
  border-radius:12px;padding:12px 14px;margin:12px 0}
summary{cursor:pointer;font-weight:700;color:var(--muted)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:22px}
  .user,.user-panel{width:auto;flex:1 1 100%;display:flex;align-items:center;gap:12px;
    text-align:left;padding:11px}
  .user-panel img,.avatar{margin-bottom:0;width:52px;height:52px;flex:0 0 52px}
  .post,.post-row{flex-wrap:wrap}
}
@media (max-width:700px){
  .wrap,.wrapper{padding:14px 13px 44px}
  .mainnav{width:100%;margin-left:0;justify-content:flex-start}
  .mainnav a{padding:6px 9px;font-size:13.6px}
  .card,.panel,.thread-header,.header{padding:16px}
  .btn{width:100%;display:block}
  .gate-btns .btn{flex:1 1 100%}
  .joinbox .btn{width:100%}
}
@media (max-width:460px){
  h1{font-size:22px}
  .body,.post-body{font-size:14.8px;padding:13px 13px 4px}
  .logo{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}