:root{--bg:#0b0d10;--card:#16191e;--text:#fff;--sub:#c8cdd3;--acc:#ff3b30;--acch:#e03228;--line:#262a31;--r:16px}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--acc)}h1,h2{line-height:1.2;margin:.2em 0 .6em}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;max-width:900px;margin:auto;gap:10px;flex-wrap:wrap}
.nav nav{display:flex;gap:14px;align-items:center}.nav a{color:var(--sub);text-decoration:none}.brand{font-weight:800;color:#fff!important}
.wrap{max-width:640px;margin:0 auto;padding:16px}.narrow{max-width:440px}
.card{background:var(--card);border-radius:var(--r);padding:22px;margin:0 0 18px;border:1px solid var(--line)}
.center{text-align:center}.muted,.sub,small{color:var(--sub)}
.btn{display:inline-block;background:var(--acc);color:#fff;border:0;border-radius:999px;padding:14px 26px;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{background:var(--acch)}.btn.big{font-size:19px;padding:17px 36px}.btn.sm{padding:8px 14px;font-size:14px}.btn.full{display:block;width:100%;margin-top:12px}
.btn.ghost{background:#232831;color:#fff}.btn.ghost:hover{background:#2e343e}
button.link{background:none;border:0;color:var(--sub);text-decoration:underline;cursor:pointer;padding:6px 0}
.nav .btn{color:#fff}
.hero{text-align:center;padding:48px 0 36px}.hero h1{font-size:clamp(36px,9vw,58px);margin:0 0 12px}.hero .sub{font-size:19px;margin:0 0 28px}
.steps{list-style:none;padding:0;margin:0}.steps li{display:flex;gap:14px;margin:0 0 16px}.steps p{margin:2px 0 0;color:var(--sub)}
.steps span{flex:0 0 38px;height:38px;border-radius:50%;background:var(--acc);display:grid;place-items:center;font-weight:800}
label{display:block;margin:0 0 12px;color:var(--sub);font-size:14px}
input:not([type=radio]):not([type=file]),textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0f1216;color:#fff;font-size:16px}
input:focus,textarea:focus{outline:2px solid var(--acc);border-color:transparent}
.flash{padding:12px 16px;border-radius:12px;margin:10px auto;max-width:608px;background:#12321e;color:#bff5cf}.flash.err{background:#3a1414;color:#ffc9c5}
.copyrow{display:flex;gap:8px;align-items:center;margin-bottom:6px}.copyrow input{margin:0!important}
.two{display:grid;grid-template-columns:1fr 2fr;gap:16px}
.avatar-prev{width:96px;height:96px;border-radius:50%;background:#0f1216;overflow:hidden;margin-bottom:8px}
.banner-prev{height:96px;border-radius:12px;background:#0f1216;overflow:hidden;margin-bottom:8px}
.avatar-prev img,.banner-prev img{width:100%;height:100%;object-fit:cover}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.theme{display:flex;align-items:center;gap:8px;background:#0f1216;padding:10px;border-radius:12px;color:#fff;cursor:pointer;margin:0}
.theme span{width:20px;height:20px;border-radius:50%}.t-red span{background:#ff3b30}.t-blue span{background:#2f80ff}.t-purple span{background:#a855f7}.t-green span{background:#22c55e}
.item{border-bottom:1px solid var(--line);padding:10px 0}
.linkedit{display:grid;grid-template-columns:1fr 1.4fr auto;gap:6px;align-items:center}.linkedit input{margin:0!important}
.tools{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.tools form{margin:0}
.addlink{margin-top:14px}
.drop{position:relative;display:block;border:2px dashed #3a404a;border-radius:var(--r);padding:28px 16px;text-align:center;cursor:pointer;color:#fff}
.drop span{display:block;color:var(--sub);font-size:14px}.drop.over{border-color:var(--acc);background:#1d1416}
.drop input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.ph .tools{justify-content:center}.ph .btn.sm{padding:5px 10px}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:8px;border-bottom:1px solid var(--line);text-align:left}.tablewrap{overflow-x:auto}
.checks{list-style:none;padding:0}.pass{color:#7ee2a0}.fail{color:#ff8a80}
.foot{text-align:center;color:var(--sub);padding:30px 0;font-size:14px}
@media(max-width:520px){.two{grid-template-columns:1fr}.linkedit{grid-template-columns:1fr}}
/* public page */
.public{--acc:#ff3b30;--acch:#e03228}.theme-blue{--acc:#2f80ff;--acch:#1f6ae0}.theme-purple{--acc:#a855f7;--acch:#9333ea}.theme-green{--acc:#22c55e;--acch:#16a34a}
.profile{max-width:600px;margin:0 auto;padding:0 0 30px;text-align:center}
.banner{height:180px;background:linear-gradient(135deg,var(--acc),#16191e);overflow:hidden}.banner img{width:100%;height:100%;object-fit:cover}
@media(min-width:620px){.banner{border-radius:0 0 var(--r) var(--r)}}
.avatar{width:110px;height:110px;border-radius:50%;margin:-55px auto 10px;border:4px solid var(--bg);overflow:hidden;background:var(--card);display:grid;place-items:center;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover}.avatar span{font-size:44px;font-weight:800}
.profile h1{margin:0}.handle{color:var(--sub);margin:2px 0 8px}.bio{color:var(--sub);padding:0 20px;white-space:normal}
.links{padding:8px 16px}.linkbtn{display:block;background:var(--acc);color:#fff;text-decoration:none;font-weight:700;padding:16px;border-radius:14px;margin:0 0 12px;transition:transform .1s,background .2s}
.linkbtn:hover{background:var(--acch);transform:scale(1.02)}
.profile .grid{padding:0 16px}
.powered{margin-top:30px;font-size:14px}.powered a{color:var(--sub);text-decoration:none}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;z-index:99}
#lightbox[hidden]{display:none}#lightbox img{max-width:100%;max-height:100%;object-fit:contain}
#lightbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:48px;height:48px;font-size:26px;cursor:pointer}
.lbx{top:14px;right:14px}.lbp{left:10px;top:50%}.lbn{right:10px;top:50%}
