:root{
  --bg:#0b0a09;--fg:#f2ece2;--muted:#8a7d70;--dim:#4f463d;--line:#221e1a;--card:#131110;
  --accent:#c81f3d;--accent-dim:#3a0f18;--live:#3ddc6f;
  --disp:'Anton',Arial Narrow,sans-serif;--body:'Inter',Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
.back{transition:color .2s}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@view-transition{navigation:auto}
body{background:var(--bg);color:var(--fg);font-family:var(--body);overflow-x:hidden;position:relative;min-height:100vh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:25;will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a2320;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)}
html{scrollbar-color:#2a2320 var(--bg)}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

#ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#ambient i{position:absolute;display:block;border-radius:50%;opacity:.4;will-change:transform}
#ambient i:nth-child(1){width:52vw;height:52vw;max-width:640px;max-height:640px;background:radial-gradient(circle closest-side,var(--accent-dim),var(--accent-dim) 25%,transparent);top:-14vw;right:-12vw;animation:drift1 24s ease-in-out infinite}
#ambient i:nth-child(2){width:42vw;height:42vw;max-width:520px;max-height:520px;background:radial-gradient(circle closest-side,#2b2410,#2b2410 25%,transparent);top:38vh;left:-16vw;animation:drift2 28s ease-in-out infinite}
#ambient i:nth-child(3){width:38vw;height:38vw;max-width:460px;max-height:460px;background:radial-gradient(circle closest-side,#2a1016,#2a1016 25%,transparent);top:80vh;right:-10vw;animation:drift1 20s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-4vw,5vh)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(5vw,-4vh)}}

#glow{position:fixed;top:0;left:0;width:min(85vw,1100px);height:min(85vw,1100px);border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(200,31,61,.18),rgba(226,162,59,.06) 45%,rgba(200,31,61,0) 72%);
  transform:translate(-50%,-50%);transition:opacity .4s;opacity:0;will-change:transform}
#glow.on{opacity:1}

nav{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:fixed;top:0;width:100%;background:rgba(7,7,7,.75);backdrop-filter:blur(18px);z-index:40}
.logo{font-family:var(--disp);font-weight:400;letter-spacing:-.04em;font-size:20px}
.navlinks{display:flex;gap:27px;font-size:12px;color:var(--muted)}
.navlinks a{position:relative;padding:4px 0}
.navlinks a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--fg);transition:width .3s}
.navlinks a:hover{color:#fff}
.navlinks a:hover:after{width:100%}
.nav-toggle{display:none;background:none;border:0;color:var(--fg);width:26px;height:20px;position:relative;cursor:pointer;z-index:41}
.nav-toggle span,.nav-toggle span:before,.nav-toggle span:after{content:"";position:absolute;left:0;width:100%;height:1px;background:var(--fg);transition:.3s}
.nav-toggle span{top:9px}
.nav-toggle span:before{top:-8px}
.nav-toggle span:after{top:8px}
.nav-toggle.open span{background:transparent}
.nav-toggle.open span:before{transform:translateY(8px) rotate(45deg)}
.nav-toggle.open span:after{transform:translateY(-8px) rotate(-45deg)}
#backtotop{position:fixed;right:5vw;bottom:28px;width:40px;height:40px;border-radius:50%;border:1px solid #2a2a2a;background:rgba(10,10,10,.7);backdrop-filter:blur(8px);color:#ccc;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s,border-color .3s;z-index:39}
#backtotop.show{opacity:1;pointer-events:auto}
#backtotop:hover{border-color:#555;transform:translateY(-3px)}
#progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--live),var(--accent));z-index:50;width:100%;transform:scaleX(0);transform-origin:left;will-change:transform}

main{max-width:1080px;margin:auto;padding:0 5vw;position:relative;z-index:2}
.wrap{min-height:100vh;padding-top:120px;padding-bottom:80px}
.kicker{font-size:11px;color:var(--muted);margin-bottom:22px;letter-spacing:.14em}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);margin-right:8px;box-shadow:0 0 12px var(--live);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
h1{font-family:var(--disp);font-weight:400;font-size:clamp(46px,9vw,86px);line-height:.98;letter-spacing:-.01em}
h2{font-family:var(--disp);font-weight:400;font-size:20px;letter-spacing:-.01em;margin-bottom:18px}
.pitch{max-width:560px;color:#a89a8c;margin-top:22px;font-size:15px;line-height:1.7}
.navlinks a.active{color:#fff}
.navlinks a.active:after{width:100%;background:var(--accent)}
.navuser{font-size:11px;color:var(--muted)}

/* zig-zag topped card, same family as the rest of the site */
.card{border:1px solid var(--line);background:var(--card);padding:24px;position:relative}
.card:before{content:"";position:absolute;top:-1px;left:0;right:0;height:9px;background-image:linear-gradient(135deg,var(--bg) 50%,transparent 50%),linear-gradient(225deg,var(--bg) 50%,transparent 50%);background-size:13px 13px;background-position:0 0,6.5px 0;background-repeat:repeat-x;pointer-events:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #2e2822;background:none;color:var(--fg);font-family:var(--body);font-size:12px;padding:10px 16px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{background:#eee;color:#080808;border-color:#eee;transform:translateY(-1px)}
.btn.primary{border-color:var(--accent);color:#fff;background:var(--accent-dim)}
.btn.primary:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.small{padding:6px 12px;font-size:11px}
.btn.danger:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn[disabled]{opacity:.45;pointer-events:none}
.linkbtn{background:none;border:0;color:var(--muted);font:inherit;font-size:11px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:#fff}

label{display:block;font-size:10px;letter-spacing:.1em;color:#6b6053;margin:18px 0 8px;text-transform:lowercase}
input,textarea,select{width:100%;background:#0e0c0b;border:1px solid var(--line);color:var(--fg);font-family:var(--body);font-size:14px;padding:12px 14px;border-radius:3px;outline:none;transition:border-color .2s}
input:focus,textarea:focus,select:focus{border-color:#4a4038}
textarea{resize:vertical;min-height:90px;line-height:1.6}
input[type=file]{padding:10px;font-size:12px;color:var(--muted)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.msg{font-size:12px;margin-top:14px;line-height:1.6;min-height:1em}
.msg.err{color:#ff6b7f}
.msg.ok{color:var(--live)}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:40px 0 26px}
.tab{border:1px solid var(--line);background:none;color:var(--muted);font-family:var(--body);font-size:12px;padding:8px 14px;border-radius:999px;cursor:pointer;transition:.2s}
.tab:hover{color:#fff;border-color:#4a4038}
.tab.on{color:#fff;border-color:var(--accent);background:var(--accent-dim)}

.tabs-gap{flex:1}
#sort{margin:0}
.vote{margin-left:auto;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px;padding:8px 6px;border:1px solid var(--line);border-radius:10px;background:none;color:var(--muted);font-family:var(--body);font-size:12px;cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .2s}
.vote svg{width:16px;height:16px;fill:currentColor}
.vote:hover{color:#fff;border-color:#4a4038;transform:translateY(-1px)}
.vote.on{color:#fff;border-color:var(--accent);background:var(--accent-dim)}
.vote:disabled{opacity:.6;cursor:wait}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.item{display:flex;flex-direction:column;gap:14px}
.item-top{display:flex;gap:16px;align-items:flex-start}
.art{width:80px;height:80px;flex:0 0 80px;background:#1b1715 center/cover no-repeat;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--disp);color:var(--dim);font-size:28px}
.item h3{font-family:var(--disp);font-weight:400;font-size:22px;line-height:1.1;letter-spacing:-.01em;word-break:break-word}
.tag{display:inline-block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);color:var(--muted);padding:3px 7px;border-radius:2px;margin-bottom:8px}
.tag.beat{color:#e2a23b;border-color:#3a2c12}
.tag.unreleased{color:#ff6b7f;border-color:var(--accent-dim)}
.tag.snippet{color:#8fb8ff;border-color:#1c2a44}
.tag.cover{color:#d59bff;border-color:#33204a}
.tag.plugin{color:var(--live);border-color:#173a22}
.tag.draft{color:#999;border-style:dashed}
.meta{font-size:11px;color:#6b6053;margin-top:4px}
.desc{font-size:13px;color:#a89a8c;line-height:1.6;white-space:pre-wrap}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
audio{width:100%;height:36px;filter:invert(.88) hue-rotate(180deg);opacity:.85}
.locked{font-size:12px;color:var(--muted);border-top:1px dashed var(--line);padding-top:12px}
.locked a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.comments{border-top:1px solid var(--line);padding-top:14px;display:none}
.comments.open{display:block}
.comment{font-size:13px;line-height:1.55;padding:10px 0;border-bottom:1px solid #1a1715}
.comment b{font-weight:500;color:#fff;margin-right:6px}
.comment time{font-size:10px;color:#5d5348;margin-left:6px}
.comment .linkbtn{float:right}
.comment-form{display:flex;gap:8px;margin-top:10px}
.comment-form input{padding:9px 12px;font-size:13px}
.empty{color:var(--muted);font-size:13px;padding:30px 0}

.progressbar{height:4px;background:#1b1715;border-radius:2px;overflow:hidden;margin-top:16px;display:none}
.progressbar.on{display:block}
.progressbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--live),var(--accent));transition:width .2s}

.authbox{max-width:440px;margin-top:44px}
.foot{margin-top:60px;font-size:11px;color:#7d7164}
.foot a:hover{color:#fff}

/* people + profiles */
.avatar,.navavatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex:0 0 auto;
  background:var(--accent-u,var(--accent)) center/cover no-repeat border-box;color:#fff;font-family:var(--disp);overflow:hidden;position:relative}
.navavatar{width:22px;height:22px;font-size:11px;margin-right:8px;vertical-align:middle}
.navme{display:inline-flex!important;align-items:center}
.navme:after{display:none}
.navlinks a.navlogin{border:1px solid var(--accent);background:var(--accent-dim);color:#fff;padding:4px 12px;border-radius:999px;margin:-1px 0}
.navlinks a.navlogin:after{display:none}
.navlinks a.navlogin:hover{background:var(--accent)}
.online-count{color:var(--live)}
.avatar.sm{width:28px;height:28px;font-size:13px}
.avatar.md{width:56px;height:56px;font-size:24px}
.avatar.lg{width:128px;height:128px;font-size:54px;border:4px solid var(--card)}
.ondot{position:absolute;right:2px;bottom:2px;width:12px;height:12px;border-radius:50%;background:var(--live);border:2px solid var(--card);box-shadow:0 0 10px var(--live)}
.avwrap{position:relative;display:inline-flex;flex:0 0 auto}
.avwrap.lgw .ondot{width:22px;height:22px;right:8px;bottom:8px;border-width:4px}

.searchbar{display:flex;gap:10px;align-items:center;margin:40px 0 10px;flex-wrap:wrap}
.searchbar input{max-width:320px}
.section-label{font-size:11px;letter-spacing:.14em;color:var(--muted);margin:34px 0 14px;text-transform:uppercase}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.person{display:block;padding:0;overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.person:before{display:none}
.person:hover{border-color:color-mix(in srgb,var(--accent-u,var(--accent)) 55%,var(--line));transform:translateY(-3px);box-shadow:0 14px 40px -18px var(--accent-u,var(--accent))}
.person .banner{height:58px}
.person .pbody{display:flex;gap:12px;align-items:flex-end;padding:0 16px;margin-top:-26px;position:relative}
.person .avatar.md{border:3px solid var(--card)}
.person .pinfo{padding:12px 16px 16px}
.person h3{font-family:var(--disp);font-weight:400;font-size:20px;line-height:1.1;word-break:break-word;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.person .status{font-size:12px;color:#a89a8c;margin-top:6px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.person.offline .avatar{filter:saturate(.75)}
.live{color:var(--live)}
.you{font-family:var(--body);font-size:10px;color:var(--muted);letter-spacing:.06em}

/* badges */
.ubadge{display:inline-flex;align-items:center;gap:5px;font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px 3px 6px;border-radius:999px;border:1px solid;vertical-align:middle;line-height:1.4;white-space:nowrap;--b:#a89a8c}
.ubadge{color:var(--b);border-color:color-mix(in srgb,var(--b) 40%,transparent);background:color-mix(in srgb,var(--b) 12%,transparent)}
.ubadge svg{width:13px;height:13px;fill:currentColor;flex:0 0 auto}
.ubadge.compact{padding:3px;border-radius:50%;margin-left:4px}
.ubadge.compact svg{width:11px;height:11px}
.ub-admin{--b:#ff4d6a;box-shadow:0 0 14px -4px #ff4d6a}
.ub-founder{--b:#ffb347;box-shadow:0 0 14px -4px #ffb347}
.ub-dev{--b:#4ade80;box-shadow:0 0 12px -5px #4ade80}
.ub-headstaff{--b:#b794ff;box-shadow:0 0 12px -5px #b794ff}
.ub-mod{--b:#8b9cff}
.ub-verified{--b:#4cc2ff}
.ub-og{--b:#e2a23b}
.ub-producer{--b:#3ddc6f}
.ub-artist{--b:#ec4899}
.ub-supporter{--b:#f472b6}
.ub-vip{--b:#ffd166}
.ub-singer{--b:#c084fc}
.ub-rapper{--b:#f97316}
.ub-engineer{--b:#2dd4bf}
.ub-dj{--b:#a78bfa}
.ub-designer{--b:#fb7185}
.ub-goat{--b:#facc15;box-shadow:0 0 14px -5px #facc15}
.ub-early{--b:#93c5fd}
.ub-beta{--b:#84cc16}
.ub-bughunter{--b:#22c55e}
.ub-helper{--b:#38bdf8}
.ub-streamer{--b:#9146ff}
.ub-gamer{--b:#60a5fa}
.ub-fire{--b:#ff6b2c}
.ub-halloween2026{--b:#ff8a1f;box-shadow:0 0 14px -5px #ff8a1f}
.ub-christmas2026{--b:#4ade80;box-shadow:0 0 14px -5px #ef4444}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.comment .ubadge.compact{margin:0 6px 0 -2px}

/* profile — themed by --accent-u / --accent-2 and the theme-* / font-* / layout-* classes */
.profile{padding:0;overflow:hidden;margin-top:40px;--accent-2:#0b0a09}
.profile:before{display:none}
.banner{height:190px;position:relative;background-color:var(--accent-u,var(--accent));background-size:cover;background-position:center}
.banner.b-glow{background-image:radial-gradient(120% 140% at 15% 0%,var(--accent-u,var(--accent)),transparent 60%),radial-gradient(90% 120% at 100% 100%,var(--accent-2),transparent 70%),linear-gradient(135deg,var(--accent-u,var(--accent)),var(--accent-2))}
.banner.b-stripes{background-image:repeating-linear-gradient(-45deg,var(--accent-u,var(--accent)) 0 18px,var(--accent-2) 18px 36px)}
.banner.b-grid{background-color:var(--accent-2);background-image:linear-gradient(color-mix(in srgb,var(--accent-u,var(--accent)) 70%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent-u,var(--accent)) 70%,transparent) 1px,transparent 1px),radial-gradient(circle at 70% 120%,var(--accent-u,var(--accent)),transparent 60%);background-size:24px 24px,24px 24px,100% 100%}
.banner.b-waves{background-color:var(--accent-2);background-image:radial-gradient(circle at 50% 120%,transparent 30%,var(--accent-u,var(--accent)) 31%,var(--accent-u,var(--accent)) 36%,transparent 37%),radial-gradient(circle at 50% 120%,transparent 46%,color-mix(in srgb,var(--accent-u,var(--accent)) 60%,transparent) 47%,color-mix(in srgb,var(--accent-u,var(--accent)) 60%,transparent) 50%,transparent 51%);background-size:80px 60px,80px 60px;background-position:0 0,40px 30px}
.banner.b-noise{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),linear-gradient(160deg,var(--accent-u,var(--accent)),var(--accent-2));background-blend-mode:overlay,normal;background-size:200px,100%}
.banner.b-solid{background-image:none}
.banner.has-img{background-image:var(--banner-img)!important;background-size:cover!important;background-position:center!important}
.banner:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.35))}
.profile-body{padding:0 32px 32px;margin-top:-64px;position:relative}
.profile .avatar.lg{box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
.profile h1{font-size:clamp(36px,6vw,58px);margin-top:14px;word-break:break-word;line-height:1}
.profile .sub{font-size:12px;color:var(--muted);margin-top:12px;display:flex;gap:14px;flex-wrap:wrap}
.profile .status-line{margin-top:18px;font-size:15px;color:#fff;border-left:2px solid var(--accent-u,var(--accent));padding-left:12px}
.profile .bio{margin-top:18px;font-size:14px;color:#b5a798;line-height:1.75;white-space:pre-wrap;max-width:620px}
.profile .bio.empty-bio{color:var(--dim);font-style:italic}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.tags span{font-size:11px;padding:4px 10px;border-radius:3px;background:color-mix(in srgb,var(--accent-u,var(--accent)) 16%,transparent);color:color-mix(in srgb,var(--accent-u,var(--accent)) 50%,#fff)}
.tags span:before{content:"#";opacity:.5;margin-right:1px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.chip{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:7px 13px;color:var(--fg);transition:.2s}
a.chip:hover{border-color:var(--accent-u,var(--accent));background:color-mix(in srgb,var(--accent-u,var(--accent)) 14%,transparent)}
.stats{display:flex;gap:30px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.stats b{display:block;font-family:var(--disp);font-weight:400;font-size:22px;color:#fff}

.profile.card-tinted,.person.card-tinted{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-u,var(--accent)) 14%,var(--card)),var(--card) 70%);border-color:color-mix(in srgb,var(--accent-u,var(--accent)) 30%,var(--line))}
.profile.card-glass,.person.card-glass{background:color-mix(in srgb,var(--card) 55%,transparent);backdrop-filter:blur(16px);border-color:color-mix(in srgb,var(--accent-u,var(--accent)) 40%,transparent);box-shadow:0 0 60px -20px var(--accent-u,var(--accent)),inset 0 1px 0 rgba(255,255,255,.06)}
.profile.card-glass .avatar.lg,.profile.card-tinted .avatar.lg{border-color:transparent}
.font-serif .pname{font-family:'Instrument Serif',Georgia,serif;font-style:italic;letter-spacing:0}
.font-mono .pname{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;letter-spacing:-.04em}
.font-mono h1.pname{font-size:clamp(30px,5vw,48px)}
.font-grotesk .pname{font-family:'Space Grotesk',var(--body);font-weight:700;letter-spacing:-.04em}
.layout-centered .profile-body{text-align:center;display:flex;flex-direction:column;align-items:center}
.layout-centered .sub,.layout-centered .badges,.layout-centered .tags,.layout-centered .chips,.layout-centered .stats,.layout-centered .actions{justify-content:center}
.layout-centered .status-line{border-left:0;padding-left:0}
.layout-centered .bio{margin-left:auto;margin-right:auto}
.layout-centered .stats{width:100%}
/* profile effects — fx-* name colour, glow-* name glow, anim-* name animation, ring-* picture outline, border-* card outline.
   --accent-3 is the member's highlight colour. All motion is dropped by the reduced-motion rule at the top. */
@property --fx-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.fx-gradient .pname,.fx-rainbow .pname,.fx-chrome .pname,.anim-shimmer.fx-solid .pname{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%}
.fx-gradient .pname{background-image:linear-gradient(90deg,var(--accent-u),var(--accent-3),var(--accent-u))}
.fx-rainbow .pname{background-image:linear-gradient(90deg,#ff4d6d,#ffb347,#fff275,#5dffa0,#4dd2ff,#9b7bff,#ff6bd8,#ff4d6d)}
.fx-chrome .pname{background-image:linear-gradient(180deg,#fff 0%,#e4e4e4 42%,#6f6f6f 50%,#d6d6d6 58%,#fff 100%);background-size:100% 100%}
.fx-outline .pname{-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px var(--accent-3)}
.glow-soft .pname{--name-glow:drop-shadow(0 0 10px color-mix(in srgb,var(--accent-u) 75%,transparent));filter:var(--name-glow)}
.glow-neon .pname{--name-glow:drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px var(--accent-u)) drop-shadow(0 0 18px var(--accent-u)) drop-shadow(0 0 34px var(--accent-3));filter:var(--name-glow)}
.anim-shimmer .pname{animation:fx-slide 4s linear infinite}
.anim-shimmer.fx-solid .pname{background-image:linear-gradient(110deg,var(--fg) 40%,var(--accent-3) 50%,var(--fg) 60%);background-size:250% 100%;animation:fx-sheen 2.8s ease-in-out infinite}
.anim-shimmer.fx-chrome .pname{background-image:linear-gradient(110deg,#b9b9b9 35%,#fff 50%,#b9b9b9 65%);background-size:250% 100%;animation:fx-sheen 2.8s ease-in-out infinite}
.anim-shimmer.fx-outline .pname{animation:fx-stroke 3s ease-in-out infinite}
.anim-wave .pname .ch{display:inline-block;animation:fx-wave 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * .08s)}
.anim-wave.fx-gradient .pname,.anim-wave.fx-rainbow .pname{background:none}
.anim-wave.fx-gradient .pname .ch{-webkit-text-fill-color:currentColor;color:color-mix(in oklab,var(--accent-u),var(--accent-3) calc(var(--i) / var(--n) * 100%))}
.anim-wave.fx-rainbow .pname .ch{-webkit-text-fill-color:currentColor;color:hsl(calc(var(--i) * 40 - 10) 95% 66%)}
.anim-wave.fx-chrome .pname{background:none}
.anim-wave.fx-chrome .pname .ch{background:linear-gradient(180deg,#fff 0%,#e4e4e4 42%,#6f6f6f 50%,#d6d6d6 58%,#fff 100%);-webkit-background-clip:text;background-clip:text}
.anim-pulse .pname{animation:fx-pulse 2.4s ease-in-out infinite}
.layout-classic.anim-pulse .pname{transform-origin:left center}
.anim-float .pname{animation:fx-float 3.2s ease-in-out infinite}
.anim-flicker .pname{animation:fx-flicker 4s linear infinite}
.anim-glitch .pname{position:relative}
.anim-glitch .pname:before,.anim-glitch .pname:after{content:attr(data-text);position:absolute;inset:0;background:none;filter:none;pointer-events:none;mix-blend-mode:screen;-webkit-text-stroke:0}
.anim-glitch .pname:before{-webkit-text-fill-color:var(--accent-u);animation:fx-glitch 2.2s steps(1,end) infinite}
.anim-glitch .pname:after{-webkit-text-fill-color:var(--accent-3);animation:fx-glitch 1.7s steps(1,end) infinite reverse}
@keyframes fx-slide{to{background-position:200% 0}}
@keyframes fx-sheen{from{background-position:100% 0}to{background-position:0 0}}
@keyframes fx-stroke{0%,100%{-webkit-text-stroke-color:var(--accent-3)}50%{-webkit-text-stroke-color:var(--accent-u)}}
@keyframes fx-wave{0%,100%{transform:translateY(0)}25%{transform:translateY(-.14em)}50%{transform:translateY(.04em)}}
@keyframes fx-pulse{0%,100%{transform:scale(1);filter:var(--name-glow,brightness(1))}50%{transform:scale(1.035);filter:var(--name-glow,brightness(1)) brightness(1.35)}}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fx-flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.35}}
@keyframes fx-glitch{0%{clip-path:inset(0 0 85% 0);transform:translate(-3px,0)}15%{clip-path:inset(40% 0 40% 0);transform:translate(3px,-1px)}30%{clip-path:inset(0 0 100% 0);transform:none}55%{clip-path:inset(70% 0 6% 0);transform:translate(-2px,1px)}70%{clip-path:inset(12% 0 62% 0);transform:translate(3px,0)}85%{clip-path:inset(0 0 100% 0);transform:none}}
.ring{isolation:isolate}
.ring-accent .ring:before,.ring-gradient .ring:before,.ring-rainbow .ring:before,.ring-glow .ring:before{content:"";position:absolute;inset:-5px;border-radius:50%;z-index:-1}
.fx-tile .ring:before{inset:-3px!important}
.ring-accent .ring:before{background:var(--accent-u)}
.ring-gradient .ring:before{background:conic-gradient(var(--accent-u),var(--accent-3),var(--accent-u));animation:fx-spin 5s linear infinite}
.ring-rainbow .ring:before{background:conic-gradient(#ff4d6d,#ffb347,#fff275,#5dffa0,#4dd2ff,#9b7bff,#ff6bd8,#ff4d6d);animation:fx-spin 3s linear infinite}
.ring-glow .ring:before{background:var(--accent-u);animation:fx-glow 2.6s ease-in-out infinite}
.profile.border-accent:after,.profile.border-gradient:after,.profile.border-rainbow:after{content:"";position:absolute;inset:0;padding:2px;pointer-events:none;z-index:3;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.profile.border-accent:after{background:var(--accent-u)}
.profile.border-gradient:after{background:conic-gradient(from var(--fx-ang),var(--accent-u),var(--accent-3),var(--accent-u));animation:fx-turn 6s linear infinite}
.profile.border-rainbow:after{background:conic-gradient(from var(--fx-ang),#ff4d6d,#ffb347,#fff275,#5dffa0,#4dd2ff,#9b7bff,#ff6bd8,#ff4d6d);animation:fx-turn 4s linear infinite}
.profile.border-glow{border-color:var(--accent-u);animation:fx-cardglow 3.2s ease-in-out infinite}
@keyframes fx-spin{to{transform:rotate(1turn)}}
@keyframes fx-turn{to{--fx-ang:1turn}}
@keyframes fx-glow{0%,100%{box-shadow:0 0 10px 1px var(--accent-u)}50%{box-shadow:0 0 22px 5px var(--accent-u),0 0 40px 8px color-mix(in srgb,var(--accent-3) 55%,transparent)}}
@keyframes fx-cardglow{0%,100%{box-shadow:0 0 0 1px var(--accent-u),0 0 30px -8px var(--accent-u)}50%{box-shadow:0 0 0 1px var(--accent-u),0 0 60px -6px var(--accent-u),0 0 90px -20px var(--accent-3)}}
.fx-tile{display:flex;align-items:center;justify-content:center;min-height:38px}
.fx-tile .pname{display:inline-block;position:relative}
.fx-tile>.card{width:100%}
/* staff & vip only looks — locked in LOCKED_THEME (netlify/lib/vault.ts) */
.banner.b-gold{background-color:#1a1206;background-image:linear-gradient(115deg,transparent 30%,rgba(255,244,200,.55) 45%,transparent 60%),linear-gradient(135deg,#7a4e0e,#f5c54a 30%,#fff1b8 48%,#d99a22 66%,#5a3608);background-size:250% 100%,100% 100%;animation:fx-goldsheen 5s ease-in-out infinite}
.banner.b-aurora{background-color:var(--accent-2);background-image:radial-gradient(60% 120% at 20% 100%,var(--accent-u,var(--accent)),transparent 70%),radial-gradient(50% 110% at 80% 0%,var(--accent-3),transparent 70%),radial-gradient(70% 90% at 55% 60%,#22d3ee,transparent 70%),linear-gradient(160deg,var(--accent-2),#05040a);background-size:180% 180%,160% 160%,200% 200%,100% 100%;animation:fx-aurora 12s ease-in-out infinite alternate}
@keyframes fx-goldsheen{0%,100%{background-position:120% 0,0 0}50%{background-position:-20% 0,0 0}}
@keyframes fx-aurora{0%{background-position:0% 50%,100% 0%,50% 100%,0 0}50%{background-position:100% 30%,0% 60%,0% 40%,0 0}100%{background-position:40% 100%,60% 100%,100% 0%,0 0}}
.profile.card-velvet,.person.card-velvet{background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,#ffd166 12%,transparent),transparent 60%),linear-gradient(180deg,#1b130a,var(--card) 70%);border-color:#6b5020;box-shadow:0 0 0 1px #3a2a10,0 20px 60px -30px #ffd166}
.profile.card-command,.person.card-command{background:linear-gradient(color-mix(in srgb,var(--accent-u,var(--accent)) 9%,transparent) 1px,transparent 1px) 0 0/100% 22px,linear-gradient(180deg,color-mix(in srgb,var(--accent-u,var(--accent)) 10%,var(--card)),var(--card) 60%);border-color:color-mix(in srgb,var(--accent-u,var(--accent)) 50%,var(--line));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent-3) 60%,transparent),0 0 70px -30px var(--accent-u,var(--accent))}
.fx-gold .pname,.fx-holo .pname{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%}
.fx-gold .pname,.anim-wave.fx-gold .pname .ch{background-image:linear-gradient(180deg,#fff6cf 0%,#ffd76a 38%,#b8780f 52%,#ffd76a 64%,#fff1b0 100%)}
.fx-holo .pname,.anim-wave.fx-holo .pname .ch{background-image:linear-gradient(100deg,#9ffcff,#ffb3f5,#c4b5fd,#fffab0,#9ffcff);background-size:200% 100%}
.anim-none.fx-holo .pname{animation:fx-slide 3.5s linear infinite}
.anim-wave.fx-gold .pname,.anim-wave.fx-holo .pname{background:none}
.anim-wave.fx-gold .pname .ch,.anim-wave.fx-holo .pname .ch{-webkit-background-clip:text;background-clip:text}
.glow-aura .pname{--name-glow:drop-shadow(0 0 6px #ffd166) drop-shadow(0 0 22px color-mix(in srgb,#ffb347 70%,transparent));filter:var(--name-glow)}
.glow-electric .pname{--name-glow:drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #7df9ff) drop-shadow(0 0 14px var(--accent-u)) drop-shadow(0 0 30px #7df9ff);filter:var(--name-glow)}
.anim-bounce .pname{animation:fx-bounce 1.8s cubic-bezier(.3,1.6,.5,1) infinite}
.anim-strobe .pname{animation:fx-hue 4s linear infinite}
@keyframes fx-bounce{0%,60%,100%{transform:translateY(0) scale(1)}20%{transform:translateY(-10px) scale(1.04,.97)}40%{transform:translateY(0) scale(.98,1.03)}}
@keyframes fx-hue{to{filter:var(--name-glow,brightness(1)) hue-rotate(1turn)}}
.ring-gold .ring:before,.ring-electric .ring:before{content:"";position:absolute;inset:-5px;border-radius:50%;z-index:-1}
.ring-gold .ring:before{background:conic-gradient(#fff1b0,#d99a22,#7a4e0e,#ffd76a,#fff1b0);box-shadow:0 0 18px -2px #ffd166;animation:fx-spin 6s linear infinite}
.ring-electric .ring:before{background:conic-gradient(var(--accent-u),#7df9ff,#fff,var(--accent-3),var(--accent-u));animation:fx-spin 1.6s linear infinite,fx-glow 1.3s ease-in-out infinite}
.profile.border-gold:after,.profile.border-electric:after{content:"";position:absolute;inset:0;padding:2px;pointer-events:none;z-index:3;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.profile.border-gold:after{background:conic-gradient(from var(--fx-ang),#fff1b0,#d99a22,#7a4e0e,#ffd76a,#fff1b0);animation:fx-turn 7s linear infinite}
.profile.border-gold{box-shadow:0 0 50px -18px #ffd166}
.profile.border-electric:after{background:conic-gradient(from var(--fx-ang),var(--accent-u),#7df9ff 10%,transparent 22%,var(--accent-3) 50%,#fff 60%,transparent 72%,var(--accent-u));animation:fx-turn 2.2s linear infinite}
.profile.border-electric{animation:fx-cardglow 2s ease-in-out infinite}
/* limited-time looks — only for members who bought them in a store drop (LOCKED_THEME "limited" in netlify/lib/vault.ts) */
.banner.b-haunt{background-color:#0d0714;background-image:radial-gradient(40% 90% at 82% 18%,rgba(255,138,40,.55),transparent 70%),radial-gradient(70% 60% at 15% 110%,rgba(124,58,237,.55),transparent 70%),radial-gradient(90% 40% at 50% 100%,rgba(200,190,230,.18),transparent 70%),linear-gradient(180deg,#160b24,#0a0610);background-size:160% 160%,180% 180%,200% 100%,100% 100%;animation:fx-haunt 14s ease-in-out infinite alternate}
@keyframes fx-haunt{0%{background-position:0 0,0 0,0% 100%,0 0}100%{background-position:30% 20%,40% 0,100% 100%,0 0}}
.profile.card-crypt,.person.card-crypt{background:radial-gradient(90% 60% at 100% 0%,color-mix(in srgb,#ff8a28 16%,transparent),transparent 60%),radial-gradient(80% 70% at 0% 100%,color-mix(in srgb,#7c3aed 22%,transparent),transparent 65%),linear-gradient(180deg,#140c1c,var(--card) 75%);border-color:#4a2a5e;box-shadow:inset 0 0 0 1px #24142e,0 20px 60px -30px #ff8a28}
.fx-candycorn .pname{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-image:linear-gradient(180deg,#fff8ec 0 34%,#ff9a2e 34% 68%,#ffd23f 68%)}
.anim-wave.fx-candycorn .pname{background:none}
.anim-wave.fx-candycorn .pname .ch{-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(180deg,#fff8ec 0 34%,#ff9a2e 34% 68%,#ffd23f 68%)}
.glow-ghost .pname{--name-glow:drop-shadow(0 0 3px #eafff4) drop-shadow(0 0 12px #7dffc4) drop-shadow(0 0 28px color-mix(in srgb,#7dffc4 55%,transparent));filter:var(--name-glow)}
.anim-none.glow-ghost .pname{animation:fx-ghost 3.2s ease-in-out infinite}
@keyframes fx-ghost{0%,100%{opacity:1}50%{opacity:.72}}
.ring-pumpkin .ring:before{content:"";position:absolute;inset:-5px;border-radius:50%;z-index:-1;background:conic-gradient(#ff8a28,#1a0d06 12%,#ff8a28 25%,#7c3aed 37%,#ff8a28 50%,#1a0d06 62%,#ff8a28 75%,#7c3aed 87%,#ff8a28);box-shadow:0 0 18px -2px #ff8a28;animation:fx-spin 5s linear infinite}
.profile.border-pumpkin:after{content:"";position:absolute;inset:0;padding:2px;pointer-events:none;z-index:3;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  background:conic-gradient(from var(--fx-ang),#ff8a28,#7c3aed 25%,#ff8a28 50%,#1a0d06 62%,#ff8a28 75%,#7c3aed 90%,#ff8a28);animation:fx-turn 6s linear infinite}
.profile.border-pumpkin{box-shadow:0 0 50px -18px #ff8a28}
/* editor tags for staff & vip options */
.opt{position:relative}
.opt .tier{position:absolute;top:-7px;right:-5px;z-index:2;display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:8.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:999px;border:1px solid;line-height:1.3;white-space:nowrap}
.opt .tier svg{width:9px;height:9px;fill:currentColor}
.opt .tier-staff{color:#b794ff;border-color:#4b3a7a;background:#1a1328}
.opt .tier-vip{color:#ffd166;border-color:#6b5020;background:#211a0c}
.opt .tier-limited{color:#ffad5c;border-color:#7a3d14;background:#24120a}
.opt.opt-locked{cursor:not-allowed;border-style:dashed}
.opt.opt-locked>:not(.tier){opacity:.38;filter:grayscale(.7)}
.opt.opt-locked:hover{border-color:var(--line);color:var(--muted)}

/* admin badge panel */
.badge-admin{margin-top:14px;border-style:dashed}
.badge-admin:before{display:none}
.badge-admin h2{font-size:16px;margin-bottom:6px}
.badge-admin .desc{font-size:12px;margin-bottom:14px}
.toggle-badges{display:flex;gap:8px;flex-wrap:wrap}
.toggle-badges button{background:none;border:0;padding:0;cursor:pointer;opacity:.4;filter:grayscale(.8);transition:.2s}
.toggle-badges button:hover{opacity:.75}
.toggle-badges button.on{opacity:1;filter:none}
.toggle-badges .ubadge{font-size:11px;padding:6px 12px 6px 8px}

.members{display:flex;flex-direction:column;gap:8px}
.member{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px}
.member:before{display:none}
.member .who{display:flex;align-items:center;gap:10px;font-size:14px}
.member .who b{font-weight:500}
.member .who:hover b{text-decoration:underline}
.member .toggle-badges .ubadge{font-size:10px;padding:4px 10px 4px 7px}

/* profile editor */
.editing{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
.editing #view{position:sticky;top:96px}
.editing #view .profile{margin-top:0}
.editor{padding:0;margin-top:0}
.editor:before{display:none}
.editor-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 0}
.editor-head h2{margin:0}
.editor .tabs{margin:16px 22px 0;padding-bottom:16px;border-bottom:1px solid var(--line)}
.editor fieldset{border:0;padding:4px 22px 22px}
.editor fieldset[hidden]{display:none}
.editor-foot{display:flex;gap:8px;align-items:center;padding:16px 22px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--card)}
.editor-foot .msg{margin:0 0 0 auto}
.hint{font-size:11px;color:var(--dim);margin-top:6px}
.counter{float:right;color:var(--dim);letter-spacing:0}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.opt{background:#0e0c0b;border:1px solid var(--line);border-radius:4px;padding:6px;cursor:pointer;color:var(--muted);font:inherit;font-size:11px;text-align:center;transition:.2s;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.opt:hover{border-color:#4a4038;color:#fff}
.opt.on{border-color:var(--accent-u,var(--accent));color:#fff;box-shadow:0 0 0 1px var(--accent-u,var(--accent))}
.opt .banner{height:38px;border-radius:2px}
.opt .banner:after{display:none}
.opt .fs{font-size:22px;line-height:1.2;color:#fff}
.colour-row{display:flex;gap:16px;flex-wrap:wrap}
.colour-row>div{flex:1 1 200px}
.tag-input{display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:#0e0c0b;border:1px solid var(--line);border-radius:3px;padding:8px}
.tag-input input{flex:1 1 120px;border:0;padding:4px;background:none;min-width:80px}
.tag-input .t{font-size:12px;background:#1f1a17;border-radius:3px;padding:4px 6px 4px 9px;display:inline-flex;gap:6px;align-items:center}
.tag-input .t button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
.tag-input .t button:hover{color:#fff}
.banner-edit{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.swatch.on{border-color:#fff}
.swatches input[type=color]{width:40px;height:30px;padding:2px;cursor:pointer}
.avatar-edit{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.check{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--fg);text-transform:none;letter-spacing:0}
.check input{width:auto}
.comment .avatar{margin-right:8px;vertical-align:middle}
.comment a.who:hover b{text-decoration:underline}

/* forum */
.forum-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:40px 0 0}
.forum-head input[type=search]{max-width:280px}
.forum-head select{width:auto;padding:10px 12px;font-size:12px}
.forum-head .btn.primary{margin-left:auto}
.labelbar{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 26px}
.labelbar .tab{font-size:11px;padding:6px 12px}
.labelbar .tab small{color:var(--dim);margin-left:4px}
.posts{display:flex;flex-direction:column;gap:14px}
.post{display:flex;flex-direction:column;gap:14px}
.post-top{display:flex;gap:16px;align-items:flex-start}
.post-top .art{width:96px;height:96px;flex-basis:96px}
.post-main{min-width:0;flex:1}
.post h3{font-family:var(--disp);font-weight:400;font-size:26px;line-height:1.1;letter-spacing:-.01em;word-break:break-word}
.post h3 a:hover{color:var(--accent-u,#ff6b7f)}
.byline{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.byline a.who{display:inline-flex;align-items:center;gap:8px;color:#fff}
.byline a.who:hover b{text-decoration:underline}
.byline b{font-weight:500}
.byline .ubadge.compact{margin:0}
.labels{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.label{font-size:11px;padding:3px 9px;border-radius:3px;background:#1d1917;color:#cbbfb2;border:1px solid transparent;cursor:pointer;font-family:var(--body);transition:.2s}
.label:before{content:"#";opacity:.45;margin-right:1px}
.label:hover,.label.on{border-color:var(--accent);background:var(--accent-dim);color:#fff}
.extlink{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.2s}
.extlink:hover{border-color:var(--accent);background:var(--accent-dim)}
.extlink span{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.post .actions .linkbtn{margin-left:auto}
.post.single{margin-top:40px}
.post.single h3{font-size:clamp(30px,5vw,44px)}

.composer{margin-top:22px;display:none}
.composer.open{display:block}
.composer h2{margin-bottom:4px}
.composer .row{align-items:start}
.composer .suggest{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.composer .suggest button{font-size:11px;background:none;border:1px dashed var(--line);color:var(--muted);border-radius:3px;padding:3px 8px;cursor:pointer;font-family:var(--body)}
.composer .suggest button:hover{color:#fff;border-color:#4a4038}
.composer .foot-row{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap}
.composer .foot-row .msg{margin:0}

/* chat */
.chat{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;margin-top:34px;height:min(70vh,720px);min-height:420px}
.chat .card{padding:0;display:flex;flex-direction:column;min-height:0}
.chat .card:before{display:none}
.chat-head{padding:14px 18px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.chat-log{flex:1;overflow-y:auto;padding:12px 18px;display:flex;flex-direction:column;overscroll-behavior:contain}
.cmsg{display:flex;gap:10px;padding:6px 0;font-size:14px;line-height:1.5;position:relative}
.cmsg.cont{padding-top:0}
.cmsg.cont .avatar,.cmsg.cont .cmeta{visibility:hidden;height:0}
.cmsg .avatar{margin-top:2px}
.cmsg .cbody{min-width:0;flex:1}
.cmsg .cmeta{display:flex;align-items:center;gap:6px;font-size:12px}
.cmsg .cmeta a:hover b{text-decoration:underline}
.cmsg .cmeta b{font-weight:500;color:var(--accent-u,#fff)}
.cmsg .cmeta time{font-size:10px;color:#5d5348}
.cmsg .ctext{color:#e2d9cd;word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap}
.cmsg .ctext a{color:#ff8a9b;text-decoration:underline;text-underline-offset:2px}
.cmsg.mention .ctext{background:color-mix(in srgb,var(--accent) 14%,transparent);border-left:2px solid var(--accent);padding-left:8px}
.cmsg .linkbtn{position:absolute;right:0;top:6px;opacity:0}
.cmsg:hover .linkbtn{opacity:1}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-typing{font-size:12px;font-style:italic;color:var(--muted);padding:0 18px 6px;min-height:20px}
.chat-typing i{display:inline-block;width:4px;height:4px;margin-right:3px;border-radius:50%;background:currentColor;vertical-align:middle;animation:typingDot 1.2s infinite}
.chat-typing i:nth-child(2){animation-delay:.15s}
.chat-typing i:nth-child(3){animation-delay:.3s;margin-right:6px}
@keyframes typingDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.chat-form input{padding:11px 14px}
.chat-new{position:sticky;bottom:6px;align-self:center;display:none}
.chat-new.on{display:inline-flex}
.online-list{overflow-y:auto;padding:8px}
.online-list a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px;font-size:13px}
.online-list a:hover{background:#1a1715}
.online-list .avwrap .ondot{width:9px;height:9px;right:0;bottom:0;border-width:2px}
.online-list .st{display:block;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.day-sep{text-align:center;font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin:14px 0 6px}

@media(max-width:1100px){.navlinks{gap:16px}}
@media(max-width:800px){
 .chat{grid-template-columns:1fr;height:auto}
 .chat .card.room{height:70vh;min-height:420px}
 .online-list{display:flex;flex-wrap:wrap;gap:4px;max-height:180px}
}

@media(max-width:960px){
 .editing{grid-template-columns:1fr}
 .editing #view{position:static}
}
@media(max-width:700px){
 .nav-toggle{display:block}
 .navlinks{position:fixed;top:72px;left:0;right:0;flex-direction:column;gap:0;background:rgba(7,7,7,.97);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .35s ease}
 .navlinks.open{max-height:400px}
 .navlinks a,.navlinks .navuser{padding:16px 5vw;border-top:1px solid var(--line)}
 .navlinks.open{max-height:680px;overflow-y:auto}
 .profile-body{padding:0 18px 22px}
 .navlinks a.navlogin{border-radius:0;border:0;border-top:1px solid var(--line);margin:0}
 .row{grid-template-columns:1fr}
 .post-top .art{width:64px;height:64px;flex-basis:64px}
 .forum-head .btn.primary{margin-left:0}
 #glow{display:none}
}

/* forum categories */
.catbar{display:flex;gap:6px;flex-wrap:wrap;margin:34px 0 0}
.post-cat{margin-bottom:6px}
.catchip{font-family:var(--body);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;transition:.2s}
.catchip:hover{color:#fff;border-color:#4a4038}
.catchip.c-beat{color:#e8b04a;border-color:#4a3a1c}
.catchip.c-question{color:#6fb7ff;border-color:#1c3550}
.catchip.c-info{color:#fff;border-color:var(--accent);background:var(--accent-dim)}
.catchip.c-other{color:#b9a8ff;border-color:#2e2650}
.post.cat-info{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-dim),0 18px 50px -30px var(--accent)}
.composer select{width:100%}
.catbar + .forum-head{margin-top:16px}

/* connected accounts: brand logo chips on profiles + logo labels in the editor */
.chip.social{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;background:color-mix(in srgb,var(--brand) 7%,transparent);font:inherit;font-size:12px;cursor:pointer;max-width:100%}
.chip.social .licon{width:26px;height:26px;padding:5px;border-radius:50%;flex:none;color:var(--brand);background:color-mix(in srgb,var(--brand) 16%,transparent)}
.chip-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-text small{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chip.social:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 16%,transparent);transform:translateY(-1px)}
.chip.social:hover .licon{background:var(--brand);color:#0b0a09}
.link-field label{display:flex;align-items:center;gap:7px;margin-top:4px}
.link-field .licon{width:15px;height:15px;color:var(--brand)}
.link-field input:focus{border-color:var(--brand)}
.person .socials{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.person .socials span{display:inline-flex;width:22px;height:22px;padding:4px;border-radius:50%;color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent)}
.person .socials .licon{width:100%;height:100%}

/* admin view count panel */
.view-stats{display:flex;gap:22px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-bottom:14px}
.view-stats b{display:block;font-family:var(--disp);font-weight:400;font-size:18px;color:#fff}
.view-set{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.view-set input{width:160px;padding:8px 12px}

/* profile wall */
.wall{margin-top:14px}
.wall-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.wall-head h2{font-size:16px;margin:0}
.wall-count{font-size:11px;color:var(--muted);margin-left:6px;vertical-align:middle}
.wall .comment-form{margin:6px 0 10px}
.wall .comment-form input{flex:1}
.wall-off{border:1px dashed var(--line);padding:10px 12px;margin:8px 0 10px;font-size:12px}
.wall-body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px}

/* more card styles, corners and banner sizes. card-holo is vip, card-prism is staff (LOCKED_THEME in netlify/lib/vault.ts) */
:is(.profile,.person).card-outline{background:color-mix(in srgb,var(--card) 35%,transparent);border:1.5px solid color-mix(in srgb,var(--accent-u,var(--accent)) 65%,transparent)}
:is(.profile,.person).card-gradient{background:linear-gradient(160deg,color-mix(in srgb,var(--accent-u,var(--accent)) 30%,var(--card)),var(--card) 55%,color-mix(in srgb,var(--accent-3) 18%,var(--card)));border-color:color-mix(in srgb,var(--accent-u,var(--accent)) 35%,var(--line))}
:is(.profile,.person).card-frosted{background:color-mix(in srgb,var(--card) 40%,rgba(255,255,255,.07));backdrop-filter:blur(22px) saturate(1.5);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 60px -30px rgba(0,0,0,.9)}
:is(.profile,.person).card-midnight{background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.55) .6px,transparent 1.3px) 0 0/90px 90px,radial-gradient(circle at 70% 65%,rgba(255,255,255,.35) .6px,transparent 1.3px) 0 0/64px 64px,linear-gradient(180deg,color-mix(in srgb,#0b1030 70%,var(--card)),color-mix(in srgb,#03040a 70%,var(--card)));border-color:#1e2648}
:is(.profile,.person).card-holo{background:linear-gradient(120deg,rgba(159,252,255,.11),rgba(255,179,245,.13),rgba(196,181,253,.11),rgba(255,250,176,.11),rgba(159,252,255,.11)) 0 0/300% 300%,var(--card);border-color:rgba(196,181,253,.45);box-shadow:0 0 50px -20px #c4b5fd,inset 0 1px 0 rgba(255,255,255,.12);animation:card-holo 8s ease-in-out infinite alternate}
:is(.profile,.person).card-prism{background:conic-gradient(from var(--fx-ang) at 50% -30%,color-mix(in srgb,var(--accent-u,var(--accent)) 24%,transparent),color-mix(in srgb,#7df9ff 16%,transparent),color-mix(in srgb,var(--accent-3) 24%,transparent),color-mix(in srgb,#ff6bd8 16%,transparent),color-mix(in srgb,var(--accent-u,var(--accent)) 24%,transparent)),var(--card);border-color:color-mix(in srgb,var(--accent-3) 45%,var(--line));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 80px -30px var(--accent-3);animation:fx-turn 14s linear infinite}
@keyframes card-holo{to{background-position:100% 100%,0 0}}
.corners-soft{border-radius:14px}
.corners-round{border-radius:28px}
.profile:after{border-radius:inherit}
.opt .corners-soft{border-radius:6px}
.opt .corners-round{border-radius:14px}
.profile.bn-short .banner{height:120px}
.profile.bn-tall .banner{height:270px}
.size-tile{display:flex;align-items:flex-start;height:38px}
.size-tile .banner{width:100%}

/* profile page background (pg-*) and side effects (sfx-*) — built by src/js/lib/profile-scene.js.
   --page is the member's page colour. mesh & nebula are vip, aurora & inferno are staff. */
#scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body.has-page #ambient{display:none}
.scene-bg{position:absolute;inset:0}
.pgbg.pg-default{background:transparent}
.pgbg.pg-solid{background:var(--page)}
.pgbg.pg-tint{background:color-mix(in srgb,var(--accent-u) 14%,var(--page))}
.pgbg.pg-gradient{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-u) 32%,var(--page)),var(--page) 55%,color-mix(in srgb,var(--accent-2) 55%,var(--page)))}
.pgbg.pg-spotlight{background:radial-gradient(90% 70% at 50% -10%,color-mix(in srgb,var(--accent-u) 45%,var(--page)),var(--page) 70%)}
.pgbg.pg-split{background:linear-gradient(90deg,color-mix(in srgb,var(--accent-u) 28%,var(--page)),var(--page) 38%,var(--page) 62%,color-mix(in srgb,var(--accent-3) 24%,var(--page)))}
.pgbg.pg-mesh{background:radial-gradient(45% 50% at 10% 15%,color-mix(in srgb,var(--accent-u) 55%,transparent),transparent 70%),radial-gradient(40% 45% at 90% 25%,color-mix(in srgb,var(--accent-3) 40%,transparent),transparent 70%),radial-gradient(55% 50% at 30% 95%,color-mix(in srgb,var(--accent-2) 80%,transparent),transparent 70%),radial-gradient(40% 40% at 85% 90%,color-mix(in srgb,var(--accent-u) 35%,transparent),transparent 70%),var(--page)}
.pgbg.pg-nebula{background:radial-gradient(circle at 12% 18%,#fff .8px,transparent 1.6px) 0 0/220px 220px,radial-gradient(circle at 68% 42%,rgba(255,255,255,.8) .6px,transparent 1.3px) 0 0/170px 170px,radial-gradient(circle at 35% 80%,rgba(255,255,255,.6) .5px,transparent 1.2px) 0 0/120px 120px,radial-gradient(55% 45% at 25% 30%,color-mix(in srgb,var(--accent-u) 45%,transparent),transparent 70%),radial-gradient(50% 50% at 80% 70%,color-mix(in srgb,var(--accent-3) 35%,transparent),transparent 70%),radial-gradient(40% 35% at 60% 15%,color-mix(in srgb,#8b5cf6 30%,transparent),transparent 70%),color-mix(in srgb,#05040c 50%,var(--page))}
.pgbg.pg-aurora{background:radial-gradient(50% 35% at 30% 20%,color-mix(in srgb,var(--accent-u) 60%,transparent),transparent 70%),radial-gradient(45% 30% at 70% 30%,color-mix(in srgb,var(--accent-3) 50%,transparent),transparent 70%),radial-gradient(60% 40% at 50% 10%,color-mix(in srgb,#22d3ee 35%,transparent),transparent 70%),var(--page);background-size:200% 200%,180% 180%,220% 220%,100% 100%;animation:fx-aurora 18s ease-in-out infinite alternate}
.pgbg.pg-inferno{background:radial-gradient(70% 45% at 50% 115%,color-mix(in srgb,#ff5a1f 80%,transparent),transparent 70%),radial-gradient(40% 35% at 15% 110%,var(--accent-u),transparent 70%),radial-gradient(40% 35% at 85% 110%,var(--accent-3),transparent 70%),linear-gradient(0deg,color-mix(in srgb,#ff3d00 22%,var(--page)),var(--page) 60%);animation:pg-heat 5s ease-in-out infinite}
.pgbg.pg-bloodmoon{background:radial-gradient(circle at 78% 16%,#ffd9c7 0,#ff6b4a 5%,#b3141f 9%,color-mix(in srgb,#b3141f 40%,transparent) 11%,transparent 24%),radial-gradient(circle at 18% 22%,rgba(255,255,255,.7) .6px,transparent 1.3px) 0 0/190px 190px,radial-gradient(70% 40% at 50% 110%,color-mix(in srgb,var(--accent-u) 30%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,#2a0510 60%,var(--page)),var(--page) 70%)}
@keyframes pg-heat{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2) saturate(1.15)}}
.page-tile{display:block;height:38px;border-radius:2px;border:1px solid var(--line)}
.page-tile.pg-default{background:radial-gradient(60% 90% at 90% 0,var(--accent-dim),transparent),var(--bg)}

.scene-side{position:absolute;top:0;bottom:0;width:max(64px,calc((100vw - 1080px) / 2 + 5vw));--travel:105vh}
.scene-side.l{left:0}
.scene-side.r{right:0}
.sides-left .scene-side.r,.sides-right .scene-side.l{display:none}
.fxc-theme{--fx-a:var(--accent-u);--fx-b:var(--accent-3)}
.fxc-highlight{--fx-a:var(--accent-3);--fx-b:color-mix(in srgb,var(--accent-3) 55%,#fff)}
.fxc-white{--fx-a:#fff;--fx-b:#e6e0ff}
.fxc-rainbow{--fx-a:#ff6bd8;--fx-b:#4dd2ff}
.pt{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2);color:var(--c);opacity:0;
  animation:sc-rise var(--t) linear var(--d) infinite;will-change:transform,opacity}
.pt>*{display:block;width:100%;height:100%}
.pt svg{fill:currentColor;overflow:visible}
.m-rise,.m-flutter{top:100%}
.m-fall{top:calc(var(--s) * -1.5);animation-name:sc-fall}
.m-flutter{animation-name:sc-flutter}
.m-still{animation-name:sc-twinkle;animation-timing-function:ease-in-out}
.m-wander{animation-name:sc-wander;animation-timing-function:ease-in-out}
.m-rise>*,.m-fall>*{animation:sc-sway var(--sw) ease-in-out var(--d) infinite alternate}
.sfx-dots .pt b{border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.sfx-bubbles .pt{--o:.7}
.sfx-bubbles .pt b{border-radius:50%;border:1.5px solid color-mix(in srgb,var(--c) 75%,#fff);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),transparent 40%),color-mix(in srgb,var(--c) 12%,transparent)}
.sfx-snow .pt b{border-radius:50%;background:color-mix(in srgb,var(--c) 30%,#fff);box-shadow:0 0 6px rgba(255,255,255,.6)}
.sfx-hearts .pt svg,.sfx-stars .pt svg{filter:drop-shadow(0 0 6px var(--c))}
.sfx-notes .pt b{font-size:var(--s);line-height:1;text-align:center;font-family:var(--body);text-shadow:0 0 10px var(--c)}
.sfx-butterflies .pt{--o:.95}
.sfx-butterflies .pt svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 70%,transparent))}
.sfx-butterflies .w{animation:sc-flap .24s ease-in-out infinite alternate}
.sfx-petals .m-fall>*{animation-name:sc-tumble}
.sfx-petals .pt svg{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 60%,transparent))}
.sfx-sparkles .pt svg{filter:drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 10px var(--c))}
.sfx-fireflies .pt b{border-radius:50%;background:color-mix(in srgb,var(--c) 45%,#fff);box-shadow:0 0 8px 2px var(--c),0 0 22px 6px color-mix(in srgb,var(--c) 50%,transparent)}
.sfx-embers .pt b{border-radius:50%;background:color-mix(in srgb,var(--c) 40%,#ffb347);box-shadow:0 0 6px 1px #ff6b2c,0 0 14px 3px color-mix(in srgb,var(--c) 60%,transparent)}
.sfx-embers .m-rise>*{animation-name:sc-flick;animation-duration:.9s}
.sfx-bats .pt{--o:.9;color:color-mix(in srgb,var(--c) 35%,#0b0a09)}
.sfx-bats .pt svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 80%,transparent))}
.sfx-bats .w{transform-origin:16px 6px;animation:sc-flap .16s ease-in-out infinite alternate}
.sfx-leaves .pt{color:color-mix(in srgb,var(--c) 40%,#e8742a)}
.sfx-leaves .m-fall>*{animation-name:sc-tumble}
@keyframes sc-rise{0%{transform:translateY(0);opacity:0}10%,85%{opacity:var(--o,.85)}100%{transform:translateY(calc(var(--travel) * -1 - 40px));opacity:0}}
@keyframes sc-fall{0%{transform:translateY(0);opacity:0}10%,85%{opacity:var(--o,.85)}100%{transform:translateY(calc(var(--travel) + 40px));opacity:0}}
@keyframes sc-flutter{0%{transform:translate(0,0) rotate(-8deg);opacity:0}8%,90%{opacity:var(--o,.9)}25%{transform:translate(26px,calc(var(--travel) * -.27)) rotate(12deg)}50%{transform:translate(-18px,calc(var(--travel) * -.55)) rotate(-14deg)}75%{transform:translate(24px,calc(var(--travel) * -.8)) rotate(9deg)}100%{transform:translate(-4px,calc(var(--travel) * -1 - 40px)) rotate(-6deg);opacity:0}}
@keyframes sc-sway{from{transform:translateX(-12px) rotate(-12deg)}to{transform:translateX(12px) rotate(12deg)}}
@keyframes sc-tumble{from{transform:translateX(-16px) rotate3d(1,.6,.2,0deg)}to{transform:translateX(16px) rotate3d(1,.6,.2,320deg)}}
@keyframes sc-flick{0%{transform:translateX(-6px) scale(1)}50%{transform:translateX(5px) scale(.55)}100%{transform:translateX(-2px) scale(.9)}}
@keyframes sc-flap{to{transform:scaleX(.2)}}
@keyframes sc-twinkle{0%,100%{opacity:.1;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1) rotate(25deg)}}
@keyframes sc-wander{0%,100%{transform:translate(0,0);opacity:.15}25%{transform:translate(22px,-30px);opacity:1}50%{transform:translate(-14px,-12px);opacity:.35}75%{transform:translate(12px,26px);opacity:1}}
/* editor previews for the background tab */
.fx-box{position:relative;display:flex;align-items:center;justify-content:center;height:44px;overflow:hidden;border-radius:2px;background:var(--page);--travel:44px}
.colour-tile{display:block;height:22px;margin:8px 4px;border-radius:999px}
.colour-tile.c-theme{background:linear-gradient(90deg,var(--accent-u),var(--accent-3))}
.colour-tile.c-highlight{background:var(--accent-3)}
.colour-tile.c-white{background:#fff}
.colour-tile.c-rainbow{background:linear-gradient(90deg,#ff4d6d,#ffb347,#fff275,#5dffa0,#4dd2ff,#9b7bff,#ff6bd8)}
@media(prefers-reduced-motion:reduce){.scene-side,.fx-box .pt{display:none}}

/* ---------- staff dashboard ---------- */
.console-bar{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#cfc6bb;border:1px solid var(--line);background:#0e0c0b;
  padding:12px 16px;margin-top:28px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-left:2px solid var(--live)}
.console-bar .prompt{color:var(--live)}
.console-bar b{color:#fff;font-weight:500}
.console-dim{color:var(--muted);font-size:11px}
.dash-note{max-width:680px;margin-bottom:6px}
.dash-filters{margin-top:18px}
.dash-filters select{width:auto;padding:11px 12px;font-size:12px}
.dash-count{font-size:11px;color:var(--muted);margin-left:auto}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.stat{padding:18px 18px 16px}
.stat:before{display:none}
.stat b{display:block;font-family:var(--disp);font-weight:400;font-size:34px;line-height:1;color:#fff}
.stat span{display:block;margin-top:8px;font-size:11px;color:var(--muted);letter-spacing:.06em}
.stat.live b{color:var(--live)}
.stat.bad b{color:#ff6b7f}
.dash-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.dash-card h2{font-size:16px;margin-bottom:14px}
.access-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.access-list li{display:grid;grid-template-columns:18px 1fr;column-gap:8px;font-size:12px}
.access-list li>span{grid-row:span 2;font-family:ui-monospace,Menlo,Consolas,monospace}
.access-list li.yes>span{color:var(--live)}
.access-list li.no{opacity:.45}
.access-list b{font-weight:500}
.access-list small{color:var(--muted);font-size:11px}
.dash-member{align-items:flex-start}
.dash-member .who{background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:0}
.dash-member .who:hover b{text-decoration:underline}
.who-text{display:flex;flex-direction:column;gap:2px}
.who-text b{font-weight:500;font-size:14px}
.who-text small{font-size:11px;color:var(--muted)}
.member-badges{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-left:auto}
.dash-member.locked .who-text b:after{content:" 🔒";font-size:10px;opacity:.6}
.dash-member.open{border-color:#3a3029}
.member-tools{flex-basis:100%;border-top:1px dashed var(--line);padding-top:14px;display:flex;flex-direction:column;gap:14px}
.member-tools .toggle-badges .ubadge{font-size:10px;padding:5px 10px 5px 7px}
.toggle-badges button[disabled]{cursor:not-allowed;opacity:.18}
.toggle-badges button.on[disabled]{opacity:.7}
.member-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.member-actions .msg{margin:0}
.ban-row{align-items:center}
.ban-reason{flex:1;font-size:13px;color:#d9cfc4;font-style:italic;min-width:180px}
.ban-dialog{max-width:480px;width:calc(100% - 40px);color:var(--fg);margin:auto}
.ban-dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(3px)}
.ban-dialog h2{font-size:22px}
.ban-dialog .desc{font-size:12px;margin-bottom:16px}
.ban-dialog label{display:block;font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.reason-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.reason-chips .chip{background:none;cursor:pointer;font-family:var(--body);font-size:11px;padding:5px 11px}
.reason-chips .chip:hover{border-color:var(--accent);color:#fff}
.perm-wrap{overflow-x:auto;margin-top:18px;border:1px solid var(--line);background:var(--card)}
.perm-table{width:100%;border-collapse:collapse;font-size:12px;min-width:640px}
.perm-table th,.perm-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.perm-table th:first-child,.perm-table td:first-child{text-align:left}
.perm-table td b{display:block;font-weight:500;font-size:13px}
.perm-table td small{color:var(--muted);font-size:11px}
.perm-table thead th{position:sticky;top:0;background:#0e0c0b}
.perm-group td{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:#0e0c0b;padding:8px 12px}
.perm-cell{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;border:1px solid var(--line);background:none;
  color:var(--dim);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;cursor:pointer;transition:.15s}
.perm-cell:hover{border-color:#4a4038;color:#fff}
.perm-cell.on{color:var(--live);border-color:#1d4a2c;background:#0b1f12}
.perm-cell[disabled],.perm-cell.fixed{cursor:default;opacity:.55}
.perm-cell[disabled]:hover{border-color:var(--line);color:var(--dim)}
.perm-cell.on[disabled]:hover{color:var(--live);border-color:#1d4a2c}
.log-list{margin-top:18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;border:1px solid var(--line);background:#0e0c0b}
.log-list .empty{padding:24px 16px;font-family:var(--body)}
.log-list.compact{margin-top:0;font-size:11px}
.log-row{display:grid;grid-template-columns:72px 96px 1fr auto;gap:10px;align-items:baseline;padding:9px 14px;border-bottom:1px solid #191512}
.log-row:last-child{border-bottom:0}
.log-row:hover{background:#13100e}
.log-row time{color:var(--dim)}
.log-row a{color:#fff}
.log-row a:hover{text-decoration:underline}
.log-detail{color:var(--muted)}
.log-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8fb8ff}
.act-ban .log-tag{color:#ff6b7f}
.act-unban .log-tag{color:var(--live)}
.act-badges .log-tag{color:#e2a23b}
.act-permissions .log-tag{color:#d59bff}
.act-moderation .log-tag{color:#ffb347}
.compact .log-row{grid-template-columns:60px 80px 1fr;padding:7px 10px}
@media(max-width:720px){
  .dash-split{grid-template-columns:1fr}
  .log-row{grid-template-columns:1fr auto;gap:4px 10px}
  .log-row .log-tag{grid-column:2;grid-row:1;text-align:right}
  .log-row .log-text{grid-column:1/-1}
  .member-badges{margin-left:0;flex-basis:100%}
}

/* staff dashboard: site design picker */
.drop-form{margin-top:18px}
.drop-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.drop-fields label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted);letter-spacing:.06em}
.drop-form .reason-chips{margin-top:12px}
.wheel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.wheel-slice{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.wheel-slice>b{grid-column:1/-1;font-size:13px;font-weight:500;display:flex;justify-content:space-between;gap:8px}
.wheel-slice>b small{color:var(--muted);font-weight:400}
.wheel-slice label,.drop-edit label,.gift-row label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);letter-spacing:.06em}
.drop-edit{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;align-items:end;border-top:1px dashed var(--line);padding-top:12px}
.gift-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.gift-row input[type=number]{width:120px}
.gift-row input[type=text]{min-width:180px;flex:1}
.gift-looks{display:flex;gap:6px;flex-wrap:wrap}
.gift-looks .chip{background:none;cursor:pointer;font-family:var(--body)}
.gift-looks .chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);color:#fff}
.drop-row.drop-ended{opacity:.55}
.drop-row.drop-live .log-tag{color:var(--live);border-color:var(--live)}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:22px}
.theme-card{display:flex;flex-direction:column;gap:14px;padding:16px;transition:border-color .2s,transform .2s}
.theme-card:hover{transform:translateY(-2px)}
.theme-card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.theme-swatch{height:84px;border-radius:6px;position:relative;overflow:hidden;display:flex;align-items:flex-end;gap:6px;padding:10px;border:1px solid rgba(255,255,255,.06)}
.theme-swatch i{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.sw-original{background:radial-gradient(80% 90% at 90% 0%,#3a0f18,transparent 70%),#0b0a09}
.sw-original i:nth-child(1){background:#c81f3d}.sw-original i:nth-child(2){background:#f2ece2}.sw-original i:nth-child(3){background:#3ddc6f}
.sw-halloween{background:radial-gradient(circle at 80% 30%,#f7e2b2 0 14%,transparent 15%),radial-gradient(80% 90% at 50% 120%,rgba(255,117,24,.35),transparent 70%),#0a0710}
.sw-halloween i:nth-child(1){background:#ff7518}.sw-halloween i:nth-child(2){background:#8a4dff}.sw-halloween i:nth-child(3){background:#ffc14d}
.sw-christmas{background:radial-gradient(circle,#fff 0 1.2px,transparent 1.6px) 0 0/14px 14px,radial-gradient(80% 90% at 50% 120%,rgba(31,122,70,.45),transparent 70%),#06100c}
.sw-christmas i:nth-child(1){background:#e3263a}.sw-christmas i:nth-child(2){background:#1f7a46}.sw-christmas i:nth-child(3){background:#f4c74f}
.sw-gore{background:radial-gradient(80% 90% at 50% 120%,rgba(160,0,24,.55),transparent 70%),linear-gradient(#6e000f 0 6px,transparent 6px),#080405}
.sw-gore i:nth-child(1){background:#c8001e}.sw-gore i:nth-child(2){background:#6e000f}.sw-gore i:nth-child(3){background:#ff4b1f}
.sw-synthwave{background:linear-gradient(transparent 55%,rgba(255,62,165,.5) 55% 56%,transparent 56%),radial-gradient(circle at 75% 55%,#ffd23f 0,#ff3ea5 22%,transparent 23%),linear-gradient(#0b0618,#2a0f40)}
.sw-synthwave i:nth-child(1){background:#ff3ea5}.sw-synthwave i:nth-child(2){background:#29e7ff}.sw-synthwave i:nth-child(3){background:#ffd23f}
.theme-info b{display:block;font-family:var(--disp);font-weight:400;font-size:20px;letter-spacing:-.01em}
.theme-info small{display:block;color:var(--muted);font-size:12px;margin-top:4px;line-height:1.5}
.theme-live{font-size:11px;color:var(--live);letter-spacing:.06em}
.theme-card .btn{align-self:flex-start}

/* ---------- rewards: spin + store (rewards.html) ---------- */
.rw-coin{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-right:6px;flex:none;
  background:radial-gradient(circle at 35% 30%,#fff3c4,#ffd166 40%,#c48a1a 80%);box-shadow:inset 0 0 0 1.5px rgba(120,80,10,.6)}
.rw-wallet{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:30px;font-size:13px;color:var(--muted)}
.rw-wallet b{font-family:var(--disp);font-weight:400;font-size:30px;color:#fff;margin-right:4px;vertical-align:-3px}
.rw-wallet .rw-coin{width:20px;height:20px;vertical-align:-1px}
.rw-vip{color:#ffd166;border:1px solid #6b5020;background:#211a0c;padding:5px 12px;border-radius:999px;font-size:12px}
.rw-muted{color:var(--muted)}
.rw-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;margin-top:30px}
.rw-spin{display:flex;flex-direction:column;align-items:center;padding:36px 24px}
.rw-wheel-box{position:relative;width:min(100%,380px);aspect-ratio:1}
.rw-wheel{position:absolute;inset:0;border-radius:50%;border:3px solid #3a302a;box-shadow:0 0 0 6px #0e0c0b,0 0 0 7px #2e2822,0 24px 70px -20px var(--accent);overflow:hidden;will-change:transform}
.rw-label{position:absolute;inset:0;display:flex;justify-content:center;pointer-events:none}
.rw-label b{margin-top:7%;font-family:var(--disp);font-weight:400;font-size:clamp(15px,4.4vw,22px);color:#f2ece2;letter-spacing:.02em}
.rw-label.vip b{color:#ffd166;text-shadow:0 0 12px rgba(255,209,102,.8)}
.rw-label.win b{color:#fff;animation:rw-win 1.1s ease-in-out infinite alternate}
@keyframes rw-win{from{text-shadow:0 0 6px var(--accent)}to{text-shadow:0 0 18px var(--accent),0 0 32px var(--accent);scale:1.15}}
@media (prefers-reduced-motion:reduce){.rw-label.win b{animation:none;text-shadow:0 0 14px var(--accent)}}
.rw-line{position:absolute;left:50%;top:0;width:1px;height:50%;margin-left:-.5px;background:rgba(255,255,255,.08);transform-origin:50% 100%}
.rw-hub{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#0b0a09;border:2px solid var(--accent);font-family:var(--disp);font-size:clamp(13px,3.4vw,18px);box-shadow:0 0 22px -4px var(--accent);z-index:2}
.rw-pointer{position:absolute;left:50%;top:-14px;translate:-50% 0;width:0;height:0;z-index:3;
  border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid var(--accent);filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));transform-origin:50% 0}
.rw-go{margin-top:30px;min-width:180px;font-size:14px;padding:13px 22px;letter-spacing:.14em;text-transform:uppercase}
.rw-timer{margin-top:14px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center}
.rw-timer a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.rw-spin .msg{text-align:center}
.rw-side{min-width:0}
.rw-odds,.rw-list{list-style:none;font-size:12px}
.rw-odds li,.rw-list li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line)}
.rw-odds li:last-child,.rw-list li:last-child{border-bottom:0}
.rw-odds b{font-weight:500;font-variant-numeric:tabular-nums;color:#fff}
.rw-odds li.vip,.rw-odds li.vip b{color:#ffd166}
.rw-list span:last-child{color:var(--muted);white-space:nowrap}
.rw-list a:hover{color:#fff;text-decoration:underline}
.rw-list .up{color:var(--live);font-weight:500}
.rw-list .down{color:#ff6b7f;font-weight:500}
.rw-store-label{margin-top:56px}
.rw-note{text-transform:none;letter-spacing:0;color:var(--dim)}
.rw-store{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.rw-item{display:flex;flex-direction:column;gap:4px;padding:20px 16px 16px;border-color:#3a2e14}
.rw-item.owned{border-color:var(--line);opacity:.7}
.rw-icon{font-size:24px;color:#ffd166;margin-bottom:8px;line-height:1}
.rw-kind{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rw-name{font-family:var(--disp);font-size:22px}
.rw-price{font-size:13px;margin:8px 0 12px;display:flex;align-items:center}
.rw-item .btn{margin-top:auto}
.rw-limited-label{margin-top:56px;color:#ffad5c}
.rw-limited-label+.rw-store .rw-item{border-color:#7a3d14;background:linear-gradient(180deg,#1d0f08,var(--card) 60%)}
.rw-limited-label+.rw-store .rw-icon{color:#ffad5c}
.rw-ends{font-size:11px;color:#ffad5c;font-variant-numeric:tabular-nums}
.rw-badge-store .rw-item{border-color:#7a3d14;background:linear-gradient(180deg,#1d0f08,var(--card) 60%)}
.rw-badge-store .rw-item.off{border-color:var(--line);background:var(--card)}
.rw-badge-store .rw-item.off .rw-ends{color:var(--muted)}
.rw-badge-preview{margin-bottom:10px}
.rw-badge-preview .ubadge{font-size:11px;padding:6px 12px 6px 8px}
.rw-item.soon{opacity:.6}
.rw-item.soon .rw-ends{color:var(--muted)}
.rw-pop[hidden]{display:none}
.rw-pop{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:5vw;background:rgba(5,4,4,.72);backdrop-filter:blur(6px)}
.rw-pop-card{max-width:360px;width:100%;text-align:center;font-size:14px;line-height:1.6;color:#c8bcae;animation:rwpop .35s cubic-bezier(.16,1,.3,1)}
.rw-pop-big{font-family:var(--disp);font-size:64px;line-height:1.1;color:#fff;margin-bottom:6px}
.rw-pop.vip .rw-pop-card{border-color:#6b5020;box-shadow:0 0 80px -10px rgba(255,209,102,.5)}
.rw-pop.vip .rw-pop-big{color:#ffd166;text-shadow:0 0 24px rgba(255,209,102,.7)}
.rw-pop .btn{margin-top:18px}
@keyframes rwpop{from{transform:scale(.85);opacity:0}}
@media(max-width:800px){.rw-grid{grid-template-columns:1fr}}