:root{--bg:#0b0b16;--s:#14142a;--s2:#1c1c3a;--t:#ecebff;--m:#9a98c4;--p:#8b5cf6;--b:#3b82f6;--bd:#2a2a52;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:70px}
body{margin:0;background:radial-gradient(900px 400px at 80% -5%,#3b1f7a55,transparent),var(--bg);color:var(--t);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:9;background:#0b0b16ee;backdrop-filter:blur(8px);border-bottom:1px solid var(--bd);padding-top:env(safe-area-inset-top,0)}
.hd{max-width:1100px;margin:auto;padding:10px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.logo{font-weight:900;font-size:22px;letter-spacing:.5px}
.logo b{background:linear-gradient(90deg,var(--p),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{padding:6px 10px;border-radius:8px;color:var(--m);font-size:14px}
nav a:hover,nav a.on{background:var(--s2);color:var(--t)}
.sr{flex:1;min-width:170px}
.acct{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--m)}
input,textarea,select{width:100%;background:var(--s);border:1px solid var(--bd);color:var(--t);border-radius:10px;padding:10px 12px;font:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid var(--p)}
main{flex:1;width:100%;max-width:1100px;margin:auto;padding:20px 16px 40px}
h1{font-size:clamp(26px,5vw,42px);margin:.2em 0}
h2{margin:1.6em 0 .6em;font-size:22px}
.btn{background:linear-gradient(90deg,var(--p),var(--b));border:0;color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;cursor:pointer;display:inline-block;font:inherit;font-weight:700}
.btn.g{background:var(--s2);border:1px solid var(--bd)}
.btn.r{background:#b91c3c}
.btn.sm{padding:6px 12px;font-size:13px}
.btn:disabled{opacity:.5;cursor:wait}
.hero{padding:28px;border-radius:18px;background:linear-gradient(135deg,#2a1466,#10244f);border:1px solid var(--bd)}
.hero p{color:#cfcdf5;max-width:560px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card{background:var(--s);border:1px solid var(--bd);border-radius:14px;overflow:hidden;transition:.15s;display:block}
.card:hover{transform:translateY(-3px);border-color:var(--p)}
.art{position:relative;height:120px;display:flex;align-items:flex-end;padding:10px;background:linear-gradient(135deg,hsl(var(--h) 70% 38%),hsl(calc(var(--h) + 60) 75% 22%));overflow:hidden}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art span{position:relative;background:#000a;padding:2px 8px;border-radius:99px;font-size:12px}
.big .art{height:min(52vw,320px);border-radius:16px}
.cb{padding:12px}
.cb small{display:block;color:var(--m)}
.demo{font-style:normal;font-size:10px;font-weight:800;background:#f59e0b;color:#111;padding:1px 6px;border-radius:5px;margin-left:6px;vertical-align:middle}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 14px;border-radius:99px;background:var(--s2);border:1px solid var(--bd)}
.chip:hover,.chip.on{border-color:var(--p);background:#2b1d5c}
.ad{margin:22px 0;min-height:20px;text-align:center;overflow:hidden}
.ad.ph{border:1px dashed var(--bd);border-radius:12px;min-height:90px;display:grid;place-items:center;color:var(--m);font-size:12px;letter-spacing:1px}
.code{font:700 18px ui-monospace,monospace;background:var(--s);border:1px solid var(--bd);padding:8px 12px;border-radius:10px;display:inline-block;word-break:break-all}
.stars button{background:none;border:0;font-size:30px;color:#555;cursor:pointer;padding:0 2px}
.stars button.on{color:#fbbf24}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.panel{background:var(--s);border:1px solid var(--bd);border-radius:14px;padding:16px;margin:12px 0}
.panel label{display:block;margin:10px 0 2px;color:var(--m);font-size:13px}
.panel label.chk{display:flex;gap:8px;align-items:center;color:var(--t)}
.panel label.chk input{width:auto}
.li{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--bd);align-items:center;flex-wrap:wrap}
.post p,.legal p{white-space:pre-wrap}
.thumb{width:120px;height:68px;object-fit:cover;border-radius:8px;margin-top:6px;display:block}
.auth{max-width:420px;margin:20px auto}
.auth .btn{width:100%;margin-top:12px}
.sep{text-align:center;color:var(--m);margin:14px 0;font-size:13px}
.msg{padding:10px 12px;border-radius:10px;background:#1d2b4f;border:1px solid var(--b);margin:10px 0}
.msg.err{background:#4a1626;border-color:#b91c3c}
footer{border-top:1px solid var(--bd);color:var(--m);font-size:13px;padding:20px 16px;text-align:center}
footer p{margin:4px 0}
footer a{text-decoration:underline}
.muted{color:var(--m)}
@media(max-width:560px){.hd{gap:8px}.acct{width:100%}}

/* MAPRUSH GAMING BACKGROUND */
body {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(37, 99, 235, 0.16), transparent 45%),
    radial-gradient(ellipse at 85% 35%, rgba(124, 58, 237, 0.14), transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(14, 165, 233, 0.10), transparent 50%),
    #080d1a;
  background-attachment: fixed;
}

/* Subtle glow behind the main content */
main {
  position: relative;
  isolation: isolate;
}

main::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(59, 130, 246, 0.07), transparent 35%),
    radial-gradient(circle at 80% 60%, rgba(139, 92, 246, 0.07), transparent 35%);
  pointer-events: none;
  z-index: -1;
}