:root{--abyss:#050a24;--vio:#9b5cff;--cor:#ff4d6d;--pink:#ff9bb3;--cy:#58e1ff;--ink:#f2f0ff;--mute:#a9aee0;--glass:#ffffff0f;--line:#ffffff24;--hd:Syne,system-ui,sans-serif;color-scheme:dark;box-sizing:border-box}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
body{min-height:100vh;background:radial-gradient(1200px 700px at 85% -10%,#3a1f9a66,transparent 60%),radial-gradient(900px 600px at 0 100%,#0a6a8a44,transparent 60%),linear-gradient(#0b1458,#050a24 70%);background-attachment:fixed;color:var(--ink);font:400 1rem/1.6 Manrope,system-ui,sans-serif}
button,input{font:inherit;color:inherit}
a{color:inherit}
.bub{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bub i{position:absolute;bottom:-30px;width:var(--w);height:var(--w);border:1px solid #ffffff55;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffffff44,transparent 60%);animation:rise var(--d) linear var(--t) infinite}
@keyframes rise{to{transform:translate(30px,-115vh);opacity:0}}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;font:800 1.35rem var(--hd);letter-spacing:.06em}
.brand b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9bb3,#6a3fd8 60%,#1b1170);box-shadow:0 0 24px #9b5cff77}
h1{font:800 clamp(1.9rem,5vw,3.2rem)/1.1 var(--hd);margin-bottom:.4rem}
h2{font:700 1.3rem var(--hd);margin-bottom:.9rem}
.lead,.mute{color:var(--mute)}
.card{background:var(--glass);border:1px solid var(--line);border-radius:22px;padding:1.4rem;backdrop-filter:blur(10px)}
.btn{display:inline-block;border:0;cursor:pointer;text-decoration:none;border-radius:999px;padding:.75rem 1.5rem;font-weight:700;background:linear-gradient(110deg,var(--cor),#c44bff);box-shadow:0 8px 28px #ff4d6d55;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px #ff4d6d88}
.btn.sm{padding:.5rem 1.1rem;font-size:.88rem}
.ghost{display:inline-block;background:none;border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem;cursor:pointer;font-size:.82rem;font-weight:600;text-decoration:none;transition:border-color .25s,color .25s}
.ghost:hover{border-color:var(--pink);color:var(--pink)}
label{display:grid;gap:.25rem;font-size:.85rem;font-weight:600;color:var(--mute)}
input{background:#050a2499;border:1px solid var(--line);border-radius:12px;padding:.7rem .95rem;outline:0}
input:focus{border-color:var(--cy);box-shadow:0 0 0 3px #58e1ff33}
.center{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:1.2rem}
.auth{width:min(420px,100%);display:grid;gap:1rem}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;padding:.3rem;border:1px solid var(--line);border-radius:999px}
.tabs button{border:0;background:none;border-radius:999px;padding:.55rem;cursor:pointer;font-weight:700;color:var(--mute)}
.tabs button.on{background:linear-gradient(110deg,var(--cor),#c44bff);color:#fff}
form{display:grid;gap:.8rem}
.or{display:flex;align-items:center;gap:.8rem;color:var(--mute);font-size:.82rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
#g{display:flex;justify-content:center;min-height:0}
.err{color:#ff8da1;font-size:.88rem;min-height:1.2em}
.hello{text-align:center;display:grid;gap:1rem;justify-items:center;max-width:640px}
.hello h1{font-size:clamp(2.2rem,8vw,4.4rem)}
.hello .nm{background:linear-gradient(110deg,var(--pink),var(--cy));-webkit-background-clip:text;background-clip:text;color:transparent;overflow-wrap:anywhere}

/* dashboard */
.app{position:relative;z-index:1;display:grid;grid-template-columns:250px 1fr;min-height:100vh}
aside{position:sticky;top:0;height:100vh;padding:1.6rem 1.1rem;display:flex;flex-direction:column;gap:1.4rem;border-right:1px solid var(--line);background:#050a2499;backdrop-filter:blur(14px)}
nav{display:flex;flex-direction:column;gap:.25rem;position:relative}
nav::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--cy),var(--vio),var(--cor));opacity:.35}
nav a{position:relative;display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;border-radius:14px;color:var(--mute);text-decoration:none;font-weight:600;white-space:nowrap;transition:background .25s,color .25s}
nav a span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#0b1458;border:1px solid var(--line);z-index:1}
nav a:hover{color:var(--ink);background:var(--glass)}
nav a.on{color:var(--ink);background:linear-gradient(90deg,#ff4d6d33,#9b5cff22)}
nav a.on span{border-color:var(--pink);box-shadow:0 0 16px #ff4d6d77}
.me{margin-top:auto;display:grid;gap:.6rem;padding:.8rem;border:1px solid var(--line);border-radius:16px;background:var(--glass);font-size:.85rem}
.me strong{overflow-wrap:anywhere}
main{padding:clamp(1.2rem,3.5vw,3rem);max-width:1000px;width:100%}
.sec{display:none;scroll-margin-top:6rem;animation:in .5s cubic-bezier(.2,.8,.2,1)}
.sec.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
.idcard{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:start;overflow:hidden}
.ava{width:112px;height:112px;border-radius:50%;border:2px solid var(--pink);box-shadow:0 0 36px #ff4d6d66;display:grid;place-items:center;font:800 2.8rem var(--hd);background:linear-gradient(135deg,var(--vio),var(--cor))}
.row{display:grid;grid-template-columns:140px 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid #ffffff14}
.row:last-child{border:0}
.row dt{color:var(--mute);font-weight:600;font-size:.9rem}
.row dd{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:linear-gradient(110deg,#ff4d6d22,#58e1ff18);font-weight:700}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1rem}
.ck{list-style:none;display:grid;gap:.55rem}
.ck li{display:flex;gap:.6rem}
.ck li::before{content:"✓";color:var(--cy);font-weight:800}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:1rem 0}
.info div{padding:.8rem 1rem;border:1px solid var(--line);border-radius:14px;background:#ffffff08}
.info small{display:block;color:var(--mute);font-weight:600}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem}
.gal figure{display:grid;gap:.6rem}
.gal img{width:100%;border-radius:22px;border:1px solid var(--line);box-shadow:0 20px 50px #0008;cursor:zoom-in;transition:transform .3s}
.gal img:hover{transform:translateY(-6px)}
.gal figcaption{text-align:center;font-weight:600;color:var(--mute);font-size:.9rem}
#lb{position:fixed;inset:0;z-index:50;background:#050a24ee;display:none;place-items:center;padding:1rem;cursor:zoom-out}
#lb.on{display:grid}
#lb img{max-height:94vh;max-width:96vw;border-radius:18px}
.wrap{position:relative;z-index:1;width:min(1100px,100% - 2rem);margin:auto;padding:1.5rem 0 3rem}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.topbar{display:none}
@media(max-width:820px){
 .app{grid-template-columns:1fr}
 aside{position:fixed;inset:auto 0 0 0;height:auto;z-index:30;padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom,0px));flex-direction:row;border:0;border-top:1px solid var(--line)}
 aside .brand,.me{display:none}
 nav{flex-direction:row;width:100%;justify-content:space-around}
 nav::before{display:none}
 nav a{flex-direction:column;gap:.1rem;padding:.3rem .4rem;font-size:.7rem;background:none!important}
 main{padding-bottom:6rem}
 .topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
 .idcard{grid-template-columns:1fr;justify-items:center}
 .idcard>div:last-child{width:100%}
 .row{grid-template-columns:110px 1fr}
}
main.center{max-width:none;padding:1.2rem}