[hidden]{display:none!important}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#060606;color:#eee}a{color:inherit;text-decoration:none}.topbar{height:64px;border-bottom:1px solid #1c1c1c;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:relative;z-index:10;background:#080808}.brand{font-weight:900;letter-spacing:.12em}.brand span{opacity:.4}.topbar nav{display:flex;gap:22px;font-size:14px;color:#aaa}.messages{position:fixed;right:20px;top:80px;z-index:50;background:#181818;border:1px solid #333;padding:12px 16px;border-radius:12px}.hero{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:30px}.hero-card{text-align:center;max-width:760px;position:relative}.orb{width:180px;height:180px;border-radius:50%;margin:0 auto -80px;background:radial-gradient(circle,#7772,#2220 65%);filter:blur(4px);animation:pulse 4s infinite}.eyebrow{font-size:11px;letter-spacing:.25em;color:#777}.hero h1{font-size:clamp(54px,9vw,110px);line-height:.9;margin:20px 0}.hero h1 span{color:#777}.muted{color:#888}.btn{display:inline-flex;align-items:center;gap:8px;background:#eee;color:#080808;border:0;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer}.btn.ghost{background:#121212;color:#eee;border:1px solid #292929}.panel{background:#0c0c0c;border:1px solid #202020;border-radius:18px;padding:22px;box-shadow:0 15px 60px #0008}.auth-wrap,.form-wrap{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:30px}.auth,.form{width:min(520px,100%)}label{display:block;color:#aaa;font-size:13px;margin:15px 0}input,textarea,select{width:100%;background:#070707;border:1px solid #292929;border-radius:10px;color:#eee;padding:12px;margin-top:7px;font:inherit}input[type=file]{padding:9px}.dashboard{width:min(1200px,92%);margin:40px auto}.dash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.actions{display:flex;gap:10px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.items{padding:0;list-style:none}.items li{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #202020}.items button,.comments button,.thumb button{background:none;color:#777;border:0;cursor:pointer}.inline{display:inline}.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.thumb{position:relative}.thumb img{width:100px;height:100px;object-fit:cover;border-radius:10px}.thumb button{position:absolute;right:2px;top:2px;background:#000b;color:white;border-radius:50%;width:24px;height:24px}.comments{list-style:none;padding:0}.comments li{border-bottom:1px solid #222;padding:12px 0}.profile-page{min-height:calc(100vh - 64px);background:var(--bg);color:var(--text);position:relative;background-image:linear-gradient(#0008,#0008),var(--bg-image);background-size:cover;background-position:center;background-attachment:fixed}.cover{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0,#7772,transparent 30%)}.intro{position:fixed;inset:0;z-index:20;display:grid;place-items:center;align-content:center;gap:18px;background:#050505f2;backdrop-filter:blur(16px);transition:.5s}.intro.leave{opacity:0;transform:scale(1.04);pointer-events:none}.intro-ring{padding:5px;border:1px solid #777;border-radius:50%;box-shadow:0 0 80px #8885;animation:float 4s ease-in-out infinite}.intro-ring img,.avatar{width:150px;height:150px;object-fit:cover;border-radius:50%;display:block}.avatar-placeholder{display:grid;place-items:center;background:#171717;font-size:50px;font-weight:900}.profile-content{width:min(850px,92%);margin:auto;padding:80px 0 50px;position:relative}.profile-content.hidden{visibility:hidden}.profile-header{text-align:center}.profile-header .avatar{margin:auto;border:2px solid #777;box-shadow:0 0 70px #7774}.profile-header h1{font-size:36px;margin:18px 0 6px}.bio{max-width:600px;margin:0 auto 12px;color:#aaa}.music{margin:30px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.music small{display:block;color:#777;margin-top:4px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:35px 0}.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;border:1px solid #222;transition:.25s}.gallery img:hover{transform:scale(1.02);filter:brightness(1.15)}.section-title{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid #252525;padding-bottom:10px;margin:35px 0 15px}.section-title span{font-weight:900;letter-spacing:.15em}.section-title small{color:#777}.comments-box{margin-top:30px}.comments-box form p{margin:10px 0}.comment-list{display:grid;gap:10px;margin-top:20px}.comment-list article{background:#0c0c0c;border:1px solid #222;padding:15px;border-radius:13px}.comment-list p{color:#bbb}.comment-list small{color:#666}.modal{position:fixed;inset:0;background:#000b;backdrop-filter:blur(8px);display:none;z-index:40;padding:5vh 5vw}.modal.show{display:block}.modal-card{height:90vh;background:#080808;border:1px solid #333;border-radius:16px;overflow:hidden;position:relative}.close{position:absolute;right:12px;top:8px;z-index:2;border:0;background:#222;color:#fff;border-radius:8px;font-size:24px;cursor:pointer}.custom-cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .15s}
.custom-cursor.is-active{opacity:1}
.custom-cursor.dot{width:9px;height:9px;background:var(--accent,#fff)}
.custom-cursor.glow{width:30px;height:30px;background:radial-gradient(circle,var(--accent,#fff) 0%,transparent 70%);filter:blur(1px)}
footer{text-align:center;color:#555;padding:50px 0 20px;font-size:11px;letter-spacing:.15em}@keyframes pulse{50%{transform:scale(1.12);opacity:.7}}@keyframes float{50%{transform:translateY(-8px)}}.profile-content{width:min(1200px,94%)}
.profile-shell{display:grid;grid-template-columns:320px 1fr;gap:36px;align-items:start}
.profile-sidebar{position:sticky;top:20px;display:flex;flex-direction:column;gap:22px}
.profile-sidebar .profile-header{text-align:center}
.profile-sidebar .bio{max-width:none}
.profile-main{min-width:0}
.views-count{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.views-count i{width:14px;height:14px;flex:none}
.music{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.music-info{display:flex;justify-content:space-between;align-items:baseline}
.music-embed-mount:empty{display:none}
.music-embed-mount iframe{border-radius:12px;border:0;display:block}
.yt-hidden{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.music-controls{display:flex;align-items:center;gap:12px}
.music-btn{background:#151515;border:1px solid #292929;color:#eee;border-radius:10px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;flex:none}
.music-btn:hover{border-color:#555}
.music-btn i,.music-btn svg{width:16px;height:16px}
.music-btn .hidden{display:none}
.music-time{font-variant-numeric:tabular-nums;color:#999;font-size:13px}
#playlistToggle{margin-left:auto}
.playlist-panel{display:none;flex-direction:column;gap:6px;border-top:1px solid #222;padding-top:10px}
.playlist-panel.show{display:flex}
.playlist-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#bbb;padding:6px 8px;border-radius:8px;background:#111}
.playlist-item i{width:14px;height:14px;color:#777}
.playlist-item.active{color:#eee;border:1px solid #333}
.code-mini-section{display:flex;flex-direction:column;gap:10px}
.code-mini-title{display:flex;align-items:baseline;justify-content:space-between}
.code-mini-title span{font-weight:900;letter-spacing:.12em;font-size:13px}
.code-mini-title small{color:#777;font-size:11px}
.code-mini-row{display:flex;flex-wrap:wrap;gap:8px}
.code-mini-btn{width:36px;height:36px;border-radius:9px;background:#0c0c0c;border:1px solid #292929;color:#ccc;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;cursor:pointer;display:grid;place-items:center}
.code-mini-btn:hover{border-color:#777;color:#fff}
.comment-locked{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:#0c0c0c;border:1px solid #202020;border-radius:14px;padding:18px;color:#999}
.comment-locked i{width:20px;height:20px}
.postit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.postit{background:#f4e58c;color:#242105;border-radius:4px;padding:16px;box-shadow:0 10px 25px #0007;transform:rotate(-1.2deg);transition:.2s;position:relative}
.postit:nth-child(3n+1){background:#f4e58c;transform:rotate(-1.4deg)}
.postit:nth-child(3n+2){background:#a9e2c9;transform:rotate(1deg)}
.postit:nth-child(3n){background:#f3b8c6;transform:rotate(-.6deg)}
.postit:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 16px 34px #0009}
.postit-author{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.postit-author b{font-size:13px}
.postit-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.postit-avatar-placeholder{display:grid;place-items:center;background:#0003;font-weight:900;font-size:12px}
.postit p{margin:0 0 10px;font-size:14px;line-height:1.4;word-break:break-word}
.postit small{color:#0006;font-size:10px}
@media(max-width:900px){.profile-shell{grid-template-columns:1fr}.profile-sidebar{position:static}}
@media(max-width:700px){.grid2{grid-template-columns:1fr}.dash-head{align-items:flex-start;gap:15px;flex-direction:column}.gallery{grid-template-columns:repeat(2,1fr)}.music{flex-direction:column;align-items:flex-start}.profile-content{padding-top:50px}.topbar{padding:0 20px}}

/* ============ Ajustes 2026-09 ============ */
/* Recados: avatar pequeno e redondo */
.postit .postit-avatar,img.postit-avatar,span.postit-avatar{width:22px!important;height:22px!important;min-width:22px;min-height:22px;border-radius:50%!important;object-fit:cover;flex:none;display:block;border:1px solid #0002}
span.postit-avatar-placeholder{display:grid!important;place-items:center;background:#0002;font-size:11px;font-weight:900}
/* Post-it menor */
.postit-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.postit{padding:10px 11px;border-radius:3px;box-shadow:0 6px 16px #0006}
.postit-author{gap:6px;margin-bottom:6px}
.postit-author b{font-size:11.5px}
.postit p{font-size:12px;line-height:1.35;margin:0 0 7px;max-height:7.4em;overflow:auto}
.postit small{font-size:9px}
/* Caixa de envio de recado menor */
.comment-form{max-width:420px;background:#0c0c0c;border:1px solid #202020;border-radius:12px;padding:12px}
.comment-form textarea{min-height:60px;font-size:13px;padding:9px}
.comment-form p{margin:0 0 8px}
.btn.small{padding:7px 12px;font-size:13px;border-radius:8px}
/* Visualizações em outro lugar: chip no topo do perfil */
.views-chip{position:absolute;top:14px;right:0;display:inline-flex;align-items:center;gap:6px;background:#0c0c0cd9;border:1px solid #262626;color:#bbb;font-size:12px;padding:6px 11px;border-radius:999px;backdrop-filter:blur(6px);z-index:5}
.views-chip i{width:13px;height:13px}
/* Botões de link centralizados, logo abaixo da bio */
.links-centered{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 4px}
.links-centered 
.links-centered 
.links-centered 
/* Mini player de música */
.music-mini{padding:12px;border-radius:14px;gap:9px}
.music-mini .music-info{display:flex;align-items:center;gap:9px}
.music-mini .music-info b{font-size:13px;display:block}
.music-mini .music-info small{font-size:10px;color:#777}
.music-disc{width:18px;height:18px;color:#888}
.music-mini .music-controls{display:flex;align-items:center;gap:9px}
.music-mini .music-btn{width:32px;height:32px;border-radius:9px}
.music-mini .music-btn.small{width:26px;height:26px}
.music-mini .music-btn.small i,.music-mini .music-btn.small svg{width:14px;height:14px}
.music-mini .music-time{font-size:11px}
.music-volume{display:flex;align-items:center;gap:6px;margin-left:auto}
.music-volume input[type=range]{width:72px;margin:0;padding:0;background:transparent;border:0;accent-color:#ddd;cursor:pointer}
.music-btn[data-muted="1"]{color:#666;border-color:#222}
.music-embed-mount .yt-hidden{width:0;height:0;overflow:hidden;position:absolute;opacity:0;pointer-events:none}
.spotify-mode .music-controls{display:none}
/* Botão de código com ícone local */
.code-mini-btn img{display:block;width:18px;height:18px;opacity:.85}
.code-mini-btn:hover img{opacity:1}
/* Campos do formulário com "i" explicativo */
.form-hint{font-size:12px;margin:6px 0 14px;display:flex;align-items:center;gap:6px}
.field-row{margin:14px 0}
.field-label{display:flex;align-items:center;gap:7px}
.field-label label{margin:0}
.field-row input,.field-row textarea,.field-row select{margin-top:6px}
.field-error{color:#ff8080;font-size:12px;margin-top:5px}
.info-dot{width:16px;height:16px;border-radius:50%;border:1px solid #444;color:#aaa;font-size:10px;font-weight:900;font-style:italic;display:inline-grid;place-items:center;cursor:help;position:relative;flex:none}
.info-dot:hover,.info-dot:focus{border-color:#888;color:#fff;outline:none}
.info-dot[data-tip]:hover::after,.info-dot[data-tip]:focus::after{content:attr(data-tip);position:absolute;left:22px;top:-4px;width:250px;background:#151515;border:1px solid #333;border-radius:9px;padding:9px 11px;font:400 11.5px/1.45 Inter,sans-serif;font-style:normal;color:#ddd;z-index:30;box-shadow:0 12px 30px #000a}
@media(max-width:600px){.info-dot[data-tip]:hover::after,.info-dot[data-tip]:focus::after{left:auto;right:0;top:22px;width:min(250px,80vw)}}
/* help_text padrão do Django (dashboard) */
.helptext{display:block;color:#777;font-size:11px;margin-top:4px}

/* ================= v2: botões bonitos ================= */
.btn{position:relative;background:linear-gradient(180deg,#fafafa,#dcdcdc);color:#0a0a0a;border-radius:12px;padding:12px 18px;font-weight:800;letter-spacing:.01em;box-shadow:0 8px 20px #0006,inset 0 1px 0 #fff9;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px #0008,inset 0 1px 0 #fff9;filter:brightness(1.03)}
.btn:active{transform:translateY(0);box-shadow:0 6px 14px #0007}
.btn i{width:16px;height:16px}
.btn.small{padding:9px 14px;font-size:13px;border-radius:10px}
.btn.ghost{background:linear-gradient(180deg,#161616,#0e0e0e);color:#eee;border:1px solid #2b2b2b;box-shadow:0 8px 18px #0006}
.btn.ghost:hover{border-color:#5a5a5a;background:linear-gradient(180deg,#1c1c1c,#131313)}
.btn.danger{background:linear-gradient(180deg,#ff7a7a,#d94a4a);color:#160404}
.pill-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#141414;border:1px solid #2c2c2c;color:#ddd;font-size:12px;font-weight:700;cursor:pointer;transition:.18s}
.pill-btn:hover{border-color:#6d6d6d;color:#fff;transform:translateY(-1px)}
.pill-btn i{width:14px;height:14px}

/* inputs / uploads */
input,textarea,select{transition:border-color .16s ease,box-shadow .16s ease}
input:focus,textarea:focus,select:focus{outline:none;border-color:#5f5f5f;box-shadow:0 0 0 3px #ffffff12}
input[type=file]{cursor:pointer;background:#0d0d0d;border:1px dashed #3a3a3a;border-radius:12px;padding:14px}
input[type=file]:hover{border-color:#6a6a6a;background:#111}
input[type=file]::file-selector-button{margin-right:12px;border:0;border-radius:9px;padding:9px 14px;font-weight:800;cursor:pointer;background:linear-gradient(180deg,#fafafa,#dcdcdc);color:#0a0a0a;box-shadow:0 4px 12px #0007}
input[type=file]::file-selector-button:hover{filter:brightness(1.05)}
input[type=color]{height:44px;padding:5px;cursor:pointer}
.items button,.comments button{border:1px solid #2a2a2a;border-radius:9px;padding:6px 12px;background:#121212;color:#bbb;font-weight:700;font-size:12px;transition:.16s}
.items button:hover,.comments button:hover{border-color:#c05a5a;color:#ffb3b3;background:#180f0f}
.thumb button{display:grid;place-items:center;background:#000c;border:1px solid #ffffff22;font-size:16px;line-height:1;transition:.16s}
.thumb button:hover{background:#c33;border-color:#f88}
.dash-head .actions .btn{min-width:130px;justify-content:center}

/* ================= v2: recado ================= */
.recado-bar{display:flex;justify-content:center;margin:32px 0 10px}
.recado-fab{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;border:1px solid #2b2b2b;background:linear-gradient(180deg,#151515,#0c0c0c);color:#eee;font-weight:800;letter-spacing:.04em;cursor:pointer;box-shadow:0 12px 30px #0008;transition:.2s}
.recado-fab i{width:18px;height:18px}
.recado-fab:hover{transform:translateY(-2px);border-color:#6c6c6c;color:#fff}
.recado-fab.active{background:linear-gradient(180deg,#f4e58c,#e2cf63);color:#221f04;border-color:#e2cf63}
.recado-drawer{max-width:560px;margin:14px auto 0;background:#0c0c0c;border:1px solid #202020;border-radius:16px;padding:18px;box-shadow:0 18px 50px #0009;animation:recadoIn .22s ease}
.recado-drawer textarea{min-height:96px}
.recado-actions{display:flex;gap:10px;margin-top:12px}
@keyframes recadoIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ================= v2: música / playlist ================= */
.music-info{align-items:center;gap:12px}
.music-id{display:flex;align-items:center;gap:10px;min-width:0}
.music-id b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.music-id small{color:#7d7d7d;font-size:11px}
.music-disc{width:22px;height:22px;color:#9a9a9a}
.music.is-playing .music-disc{animation:spin 3.4s linear infinite;color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.playlist-box{padding:14px;display:flex;flex-direction:column;gap:10px}
.playlist-head{display:flex;align-items:center;justify-content:space-between;background:none;border:0;color:#eee;cursor:pointer;padding:0;font:inherit}
.playlist-title{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em}
.playlist-title i{width:16px;height:16px;color:#9a9a9a}
.playlist-caret{width:16px;height:16px;color:#888;transition:transform .2s}
.playlist-box.open .playlist-caret{transform:rotate(180deg)}
.playlist-body{display:none}
.playlist-box.open .playlist-body{display:block}
.playlist-link{align-self:flex-start}

/* ================= Discord Rich Presence ================= */
.discord-card{
  position:relative; width:100%; max-width:520px; margin:14px auto 0; padding:14px 15px;
  overflow:hidden; border:1px solid rgba(255,255,255,.075); border-radius:17px;
  background:linear-gradient(145deg,rgba(20,20,22,.94),rgba(9,9,10,.97));
  box-shadow:0 16px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.discord-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 0% 0%,rgba(255,255,255,.045),transparent 42%)}
.discord-card:hover{border-color:rgba(255,255,255,.12);box-shadow:0 20px 48px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.03)}
.discord-top{position:relative;z-index:1;display:flex;align-items:center;gap:11px;min-height:48px}
.discord-avatar-wrap{position:relative;flex:0 0 46px;width:46px;height:46px}
.discord-avatar,.discord-avatar-fallback{position:absolute;inset:0;width:46px;height:46px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#151517;border:1px solid rgba(255,255,255,.1)}
.discord-avatar-fallback i{width:19px;height:19px;color:#85858d}
.discord-status{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;border:3px solid #0c0c0d;background:#747f8d;z-index:3;transition:.25s}
.discord-status.online{background:#3ba55d;box-shadow:0 0 8px rgba(59,165,93,.35)}
.discord-status.idle{background:#faa81a;box-shadow:0 0 8px rgba(250,168,26,.28)}
.discord-status.dnd{background:#ed4245;box-shadow:0 0 8px rgba(237,66,69,.28)}
.discord-status.offline{background:#747f8d}
.discord-meta{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.discord-meta b{display:block;font-size:14px;font-weight:750;color:#f1f1f3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.discord-meta small{display:block;margin-top:4px;color:#85858d;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Botão copiar — ícone do Discord sem depender de biblioteca de ícones */
.discord-copy-btn{flex:none;width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.065);color:#8b8b93;cursor:pointer;font:inherit;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.discord-brand-icon{width:18px;height:18px;display:block;fill:currentColor;transition:transform .2s ease}
.discord-copy-label{display:none}
.discord-copy-btn:hover{background:rgba(88,101,242,.12);border-color:rgba(88,101,242,.35);color:#aeb7ff;transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,0,0,.2)}
.discord-copy-btn:hover .discord-brand-icon{transform:scale(1.06)}
.discord-copy-btn.is-copied{color:#9fe3b0;border-color:rgba(105,210,133,.24);background:rgba(105,210,133,.07);box-shadow:none}
.discord-copy-btn.is-copied .discord-brand-icon{transform:scale(.94)}
.discord-top .pill-btn{flex:none;width:32px;height:32px;padding:0;margin-left:0;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.065);color:#85858d}
.discord-top .pill-btn span{display:none}.discord-top .pill-btn i{width:15px;height:15px}.discord-top .pill-btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#fff;transform:none}

.discord-activity[hidden]{display:none!important}
.discord-activity{position:relative;z-index:1;display:flex;align-items:center;gap:11px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.055);animation:discordActivityIn .3s ease both}
@keyframes discordActivityIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.discord-activity-art{position:relative;flex:0 0 44px;width:44px;height:44px}
.discord-activity-img{position:absolute;inset:0;width:44px!important;height:44px!important;border-radius:11px;object-fit:cover;background:#151517;border:1px solid rgba(255,255,255,.075);display:block}
.discord-activity-img-fallback{position:absolute;inset:0;width:44px!important;height:44px!important;border-radius:11px;display:grid!important;place-items:center;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);color:#85858d}
.discord-activity-img-fallback i{width:18px;height:18px}
.discord-activity-small{position:absolute!important;right:-5px;bottom:-5px;width:19px!important;height:19px!important;padding:1px;border-radius:6px;object-fit:cover;background:#111112;border:2px solid #0a0a0b;z-index:4;display:block}
.discord-activity-small[hidden]{display:none!important}
.discord-activity-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.discord-activity-info b{font-size:12.5px;font-weight:700;color:#ededee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.discord-activity-info small{font-size:10.5px;color:#85858d;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.discord-activity-time{font-size:10px!important;color:#66666e!important;font-variant-numeric:tabular-nums}
.discord-progress{width:100%;height:3px;margin-top:5px;border-radius:99px;background:rgba(255,255,255,.065);overflow:hidden}
.discord-progress span{display:block;width:0;height:100%;border-radius:99px;background:var(--accent,#aaa);transition:width .9s linear}
@media(max-width:640px){.discord-card{max-width:100%;padding:13px 14px;border-radius:15px}.discord-avatar-wrap,.discord-avatar,.discord-avatar-fallback{width:44px;height:44px}.discord-activity-art,.discord-activity-img,.discord-activity-img-fallback{width:42px!important;height:42px!important}.discord-copy-label{display:none}.discord-copy-btn{width:32px;padding:0}.discord-meta b{font-size:13.5px}.discord-meta small{font-size:11px}}

/* ==== Neon RGB pulsante na foto de perfil ==== */
.avatar-wrap{position:relative;display:inline-block;margin:0 auto;transition:transform .1s ease-out}
.avatar-wrap.has-fx::before{content:"";position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,var(--neon,#39ff14) 0%,transparent 68%);opacity:.35;filter:blur(18px);z-index:-1}
.avatar.avatar-neon{border-color:var(--neon,#39ff14);box-shadow:0 0 10px var(--neon,#39ff14),0 0 24px color-mix(in srgb,var(--neon,#39ff14) 60%,transparent)}
.avatar-fx-canvas{position:absolute;left:50%;top:50%;width:184px;height:184px;transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.decorated-avatar .avatar-photo-link{position:relative;z-index:2;width:var(--avatar-photo-size,152px);height:var(--avatar-photo-size,152px)}
.decorated-avatar .avatar-photo-link .avatar{width:100%;height:100%;object-fit:cover}
.decorated-avatar>.avatar-placeholder{position:relative;z-index:2}
.decorated-avatar .avatar.avatar-neon{box-shadow:0 0 3px var(--neon,#39ff14),0 0 5px color-mix(in srgb,var(--neon,#39ff14) 30%,transparent)}
.decorated-avatar.has-fx::before{inset:0;opacity:.12;filter:blur(3px)}
.decorated-avatar .avatar-decoration{z-index:3}
.decorated-avatar > picture.avatar-decoration > img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
.postit-pending-list{margin:14px 0}
.pending-list-title{display:flex;align-items:center;gap:8px;color:#f0c26b;font-size:12.5px;font-weight:700;margin:0 0 8px}
.pending-list-title i{width:15px;height:15px}
.postit-pending-owner{flex-direction:row;transition:opacity .2s}
.postit-pending-owner + .postit-pending-owner{margin-top:8px}
@keyframes neonAvatarPulse{
  0%,100%{box-shadow:0 0 10px var(--neon,#39ff14),0 0 22px color-mix(in srgb,var(--neon,#39ff14) 55%,transparent)}
  50%{box-shadow:0 0 22px var(--neon,#39ff14),0 0 46px var(--neon,#39ff14),0 0 70px color-mix(in srgb,var(--neon,#39ff14) 50%,transparent)}
}
@keyframes neonBgPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ==== Recados: dark mode nos post-its (mantendo o formato/inclinação já existente) ==== */
.postit{background:#141414;color:#eee;border:1px solid #262626;box-shadow:0 10px 22px #0008}
.postit:nth-child(3n+1){background:#141414;border-color:#262626}
.postit:nth-child(3n+2){background:#131313;border-color:#242424}
.postit:nth-child(3n){background:#151515;border-color:#282828}
.postit:hover{border-color:#3a3a3a}
.postit p{color:#d8d8d8}
.postit small{color:#777!important}
.postit-author b{color:#f2f2f2}
.postit-avatar-placeholder{background:#242424!important;color:#eee}

/* ==== Aviso de aprovação + recado pendente do próprio autor ==== */
.recado-hint{display:flex;align-items:flex-start;gap:8px;color:#8a8a8a;font-size:12px;margin:0 0 10px;line-height:1.4}
.recado-hint i{width:14px;height:14px;flex:none;margin-top:1px}
.postit-pending{display:flex;align-items:flex-start;gap:10px;background:#1a1608;border:1px solid #3a2f12;color:#f0c26b;border-radius:12px;padding:12px 14px;margin:14px 0}
.postit-pending i{width:16px;height:16px;flex:none;margin-top:2px}
.postit-pending b{display:block;font-size:13px;margin-bottom:2px}
.postit-pending p{margin:0;font-size:12.5px;color:#e0bd80;line-height:1.4}

/* ==== Botão "Rejeitar" no dashboard ==== */
.reject-btn{color:#ffb3b3!important;border-color:#3a1e1e!important}
.reject-btn:hover{border-color:#c05a5a!important}

/* ==== Lightbox: modal de foto em tamanho proporcional, centralizado ====
   Antes o .modal-card herdava height:90vh + width automático (cheio da
   tela), então virava um retângulo gigante com a foto pequena grudada no
   canto esquerdo. Agora o card encolhe pro tamanho da própria foto, com
   borda e a legenda (quando existir) logo abaixo. */
.modal.show{display:flex;align-items:center;justify-content:center}
.photo-card{position:relative;height:auto;width:auto;max-width:min(920px,90vw);max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;overflow:visible}
.photo-viewer{position:relative;display:flex;align-items:center;justify-content:center;max-width:100%;max-height:calc(90vh - 70px);min-width:0}
.photo-viewer img{display:block;max-width:100%;max-height:calc(90vh - 70px);width:auto;height:auto;object-fit:contain;border-radius:10px;border:1px solid #262626}
.photo-modal-caption{margin:0;max-width:100%;padding:0 6px;color:#ccc;font-size:13px;line-height:1.4;text-align:center}
.photo-modal-caption:empty{display:none}
.photo-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid #2a2a2a;background:#0f0f0fd9;color:#eee;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s}
.photo-nav:hover{background:#1c1c1c;border-color:#555}
.photo-nav.prev{left:10px}
.photo-nav.next{right:10px}
.photo-counter{position:static;display:block;font-size:12px;color:#888;letter-spacing:.08em;text-align:center}
@media(max-width:640px){
  .photo-card{max-width:96vw;padding:14px}
  .photo-nav{width:36px;height:36px;font-size:22px}
  .photo-nav.prev{left:4px}
  .photo-nav.next{right:4px}
}

/* ==== Botão "x" pra remover um recado já aceito, direto no perfil ==== */
.postit{padding-right:32px}
.postit-remove-form{position:absolute;top:8px;right:8px;z-index:2;margin:0;line-height:0}
.postit-x{width:20px;height:20px;padding:0;border:0;border-radius:50%;background:#0002;color:inherit;cursor:pointer;display:grid;place-items:center;transition:.15s}
.postit-x:hover{background:#c0393985;color:#fff}
.postit-x i{width:12px;height:12px}

/* ======================================================================
   BLACKBIO PUBLIC PROFILE — FLOATING 3-COLUMN REDESIGN (2026-09-03)
   Layout base: perfil, música e playlist à esquerda | fotos centro |
   post-its direita. Reaproveita IDs/JS/backend existentes.
   ====================================================================== */
.profile-page{
  --profile-glass:rgba(9,9,10,.68);
  --profile-glass-strong:rgba(10,10,11,.82);
  --profile-line:rgba(255,255,255,.075);
  --profile-muted:#85858a;
  --profile-shadow:0 18px 55px rgba(0,0,0,.26);
  background-image:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.54)),var(--bg-image);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  overflow-x:hidden;
}
.profile-page .cover{background:radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--accent,#aaa) 11%,transparent),transparent 34%),linear-gradient(90deg,#0002,transparent 28%,transparent 72%,#0002)}
.profile-page .profile-content{width:min(1400px,94vw);padding:58px 0 44px}
.profile-page .views-chip{top:4px;right:0;background:rgba(7,7,7,.56);border-color:var(--profile-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none}

/* Topo central */
.profile-identity{position:relative;z-index:6;text-align:center;max-width:760px;margin:0 auto 44px;display:flex;flex-direction:column;align-items:center}
.profile-identity .avatar-wrap{display:inline-block;margin:0 auto}
.profile-identity .avatar{width:142px;height:142px;margin:auto;border:1px solid color-mix(in srgb,var(--neon,#39ff14) 65%,#fff 10%);box-shadow:0 0 42px color-mix(in srgb,var(--neon,#39ff14) 22%,transparent)}
.profile-identity h1{margin:18px 0 11px;font-size:clamp(28px,3vw,38px);line-height:1;font-weight:900;letter-spacing:-.04em;text-shadow:0 2px 18px #000}
.profile-identity .bio{order:4;max-width:560px;margin:12px auto 0;color:#a1a1a6;font-size:13px;line-height:1.55;text-shadow:0 2px 14px #000}
.profile-actions{order:3;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;min-height:40px}
.profile-action-btn{position:relative;width:38px;height:38px;padding:0;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(10,10,11,.58);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#c8c8cb;box-shadow:0 7px 24px rgba(0,0,0,.22);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.profile-action-btn:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent,#aaa) 42%,rgba(255,255,255,.15));background:rgba(18,18,19,.76);color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.32)}
.profile-action-btn>i,.profile-action-btn>svg{width:17px;height:17px}
.profile-action-btn>img{width:18px;height:18px;display:block;opacity:.9}
.profile-action-btn>span:not(.discord-status){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Discord continua funcional, porém sem virar um card permanente no topo. */
.discord-quick{position:relative;display:inline-grid;place-items:center;z-index:12}
.discord-quick .discord-copy-btn{width:38px;height:38px;border-radius:12px;margin:0;color:#a9afef}
.discord-quick .discord-copy-btn:hover{background:rgba(88,101,242,.13);border-color:rgba(130,140,255,.35)}
.discord-quick .discord-copy-btn .discord-status{position:absolute;right:3px;bottom:3px;width:8px;height:8px;border:1.5px solid #0d0d0e;z-index:2}
.discord-popover{position:absolute;left:50%;top:calc(100% + 10px);width:286px;max-width:calc(100vw - 28px);padding:13px;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,6px);border:1px solid rgba(255,255,255,.085);border-radius:15px;background:rgba(10,10,12,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 22px 60px #000b;transition:.18s ease;text-align:left}
.discord-quick:hover .discord-popover,.discord-quick:focus-within .discord-popover{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.discord-popover .discord-top{min-height:44px}
.discord-popover .discord-avatar-wrap,.discord-popover .discord-avatar,.discord-popover .discord-avatar-fallback{width:40px;height:40px;flex-basis:40px}
.discord-popover .discord-activity{margin-top:10px;padding-top:10px}
.discord-popover .pill-btn{width:30px;height:30px;padding:0;display:grid;place-items:center}
.discord-popover .pill-btn span{display:none}

/* Estrutura principal desktop */
.profile-layout{position:relative;z-index:3;display:grid;grid-template-columns:minmax(230px,280px) minmax(500px,760px) minmax(220px,300px);gap:30px;align-items:start;justify-content:center}
.profile-left-stack{min-width:0;display:flex;flex-direction:column;gap:24px}
.profile-slot{min-width:0}
.slot-heading,.gallery-heading,.notes-heading>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.slot-heading>span,.gallery-heading>span,.notes-heading>div>span{font-size:10px;font-weight:900;letter-spacing:.18em;color:#e1e1e3}
.slot-heading small,.gallery-heading small,.notes-heading>div small{font-size:8px;letter-spacing:.13em;color:#5f5f64}
.floating-panel{background:linear-gradient(150deg,rgba(17,17,18,.71),rgba(7,7,8,.73));border:1px solid var(--profile-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--profile-shadow)}
.empty-profile-module{min-height:92px;border-radius:15px;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#616167;text-align:center;font:10px ui-monospace,monospace;letter-spacing:.08em}
.empty-profile-module svg{width:18px;height:18px;color:#777}

/* Música compacta */
.music-slot .music{margin:0;padding:14px;border-radius:15px;gap:11px}
.music-slot .music-info{display:flex;align-items:center;justify-content:space-between;gap:10px}
.music-slot .music-id{min-width:0;display:flex;align-items:center;gap:8px}
.music-slot .music-id>div:last-child{min-width:0}
.music-slot .music-id b{max-width:150px;font-size:12px;letter-spacing:.01em}
.music-slot .music-id small{font-size:9px;color:#6e6e73}
.music-slot .music-disc{width:17px;height:17px;flex:none}
.music-external{width:29px;height:29px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.07);border-radius:9px;color:#75757b;background:rgba(255,255,255,.025);transition:.18s}
.music-external:hover{color:#fff;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.055)}
.music-external svg{width:13px;height:13px}
.music-progress-track{height:3px;width:100%;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07)}
.music-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:var(--accent,#aaa);box-shadow:0 0 10px color-mix(in srgb,var(--accent,#aaa) 34%,transparent);transition:width .35s linear}
.music-slot .music-controls{display:flex;align-items:center;gap:8px}
.music-slot .music-btn{width:31px;height:31px;border-radius:9px;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.07)}
.music-slot .music-btn.small{width:25px;height:25px}
.music-slot .music-time{font-size:9.5px;color:#85858a;white-space:nowrap}
.music-slot .music-volume{gap:4px;margin-left:auto}
.music-slot .music-volume input[type=range]{width:60px;height:14px}
.music-slot .music-embed-mount iframe{max-width:100%;border-radius:10px}
.music-slot .spotify-mode .music-controls{display:flex}

/* Playlist visual pronta para múltiplas playlists; backend atual fornece 1 URL. */
.playlist-slot .playlist-box{margin:0;padding:13px;border-radius:15px;gap:10px}
.playlist-slot .playlist-head{width:100%;padding:0;color:#ddd;text-align:left}
.playlist-slot .playlist-title{min-width:0;display:flex;align-items:center;gap:9px;letter-spacing:0}
.playlist-slot .playlist-title>svg{width:16px;height:16px;flex:none;color:var(--accent,#aaa)}
.playlist-slot .playlist-title>span{min-width:0;display:block}
.playlist-slot .playlist-title b{display:block;max-width:178px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;letter-spacing:.01em}
.playlist-slot .playlist-title small{display:block;margin-top:3px;color:#66666c;font-size:8.5px;font-weight:500}
.playlist-slot .playlist-caret{width:14px;height:14px;flex:none}
.playlist-slot .playlist-body iframe{height:260px!important;margin-top:3px}
.playlist-link-text{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:2px;color:#8d8d92;font:9px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;transition:.18s}
.playlist-link-text:hover{color:#fff}
.playlist-link-text svg{width:11px;height:11px}
.playlist-link-text.disabled{opacity:.38;pointer-events:none}
.playlist-empty-row{display:flex;align-items:center;gap:9px;color:#777}
.playlist-empty-row svg{width:16px;height:16px;color:#606066}
.playlist-empty-row span{display:block}.playlist-empty-row b{display:block;color:#909096;font-size:11px}.playlist-empty-row small{display:block;margin-top:2px;color:#5f5f64;font-size:8.5px}
.playlist-empty-line{height:1px;background:linear-gradient(90deg,rgba(255,255,255,.08),transparent);margin-top:4px}.playlist-empty-line.short{width:68%}

/* Galeria sem caixa grande: imagens flutuam sobre o background */
.profile-main{min-width:0}
.gallery-heading{margin-bottom:12px;padding:0 2px}
.profile-main .gallery{display:block;columns:2;column-gap:12px;margin:0}
.profile-main .photo-link{position:relative;display:block;width:100%;margin:0 0 12px;break-inside:avoid;overflow:hidden;border-radius:11px;background:rgba(8,8,8,.46);box-shadow:0 12px 32px rgba(0,0,0,.24);cursor:zoom-in}
.profile-main .gallery img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border:0;border-radius:11px;transform:scale(1);filter:none;transition:transform .28s ease,filter .28s ease}
.profile-main .photo-link:hover img{transform:scale(1.025);filter:brightness(.9)}
.photo-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.3));opacity:0;transition:.22s;pointer-events:none}
.photo-overlay svg{width:18px;height:18px;color:#fff;filter:drop-shadow(0 2px 8px #000)}
.video-play-indicator{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:52px;height:52px;transform:translate(-50%,-50%);border:1px solid #ffffffc9;border-radius:50%;background:#050505a6;color:#fff;box-shadow:0 3px 18px #0009;backdrop-filter:blur(5px);pointer-events:none}
.video-play-indicator svg{width:21px;height:21px;fill:currentColor;stroke-width:1.5;transform:translateX(1px)}
.photo-link:hover .video-play-indicator{background:#050505d9;transform:translate(-50%,-50%) scale(1.08)}
.photo-link:hover .photo-overlay{opacity:1}
.gallery-empty{min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px dashed rgba(255,255,255,.08);border-radius:14px;background:rgba(8,8,9,.24);color:#64646a;backdrop-filter:blur(5px);font:9px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.gallery-empty svg{width:24px;height:24px}

/* Recados à direita, estilo zine/scrapbook/hacking */
.profile-notes-zone{min-width:0}
.notes-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.notes-heading>div{margin:0;flex:1}
.profile-notes-zone .recado-fab{flex:none;margin:0;padding:7px 9px;border-radius:9px;gap:5px;background:rgba(10,10,11,.58);border:1px solid rgba(255,255,255,.075);backdrop-filter:blur(10px);box-shadow:none;color:#aaa;font:800 8px ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase}
.profile-notes-zone .recado-fab i{width:11px;height:11px}
.profile-notes-zone .recado-fab:hover,.profile-notes-zone .recado-fab.active{transform:none;color:#fff;border-color:color-mix(in srgb,var(--accent,#aaa) 38%,#333);background:rgba(18,18,19,.76)}
.profile-notes-zone .recado-drawer{width:100%;max-width:none;margin:0 0 16px;padding:11px;border-radius:11px;background:rgba(10,10,11,.88);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);box-shadow:0 16px 40px #0008}
.profile-notes-zone .comment-form{max-width:none;padding:0;border:0;background:transparent}
.profile-notes-zone .comment-form textarea{min-height:74px;background:#080809b8;border-color:#242426;font-size:11px}
.profile-notes-zone .comment-form label{font-size:10px;margin:8px 0}
.profile-notes-zone .recado-actions{gap:6px;flex-wrap:wrap}.profile-notes-zone .recado-actions .btn{font-size:10px;padding:7px 9px}
.profile-notes-zone .recado-hint{font-size:9.5px;color:#6d6d72}
.profile-notes-zone .comment-locked{padding:12px;border-radius:10px;background:#0b0b0ccc;font-size:11px}
.profile-notes-zone .postit-grid{display:flex;flex-direction:column;gap:17px;margin:0;padding:4px 4px 0}
.profile-notes-zone .postit{--tilt:-1.2deg;position:relative;width:92%;margin:0 auto;padding:17px 14px 13px;border-radius:2px;background:linear-gradient(150deg,#171718,#111112);border:1px solid rgba(255,255,255,.075);color:#e4e4e6;box-shadow:0 13px 28px #0007,0 1px 0 rgba(255,255,255,.025) inset;transform:rotate(var(--tilt));transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.profile-notes-zone .postit:nth-child(3n+1){--tilt:-1.2deg;background:linear-gradient(150deg,#171718,#111112)}
.profile-notes-zone .postit:nth-child(3n+2){--tilt:1deg;background:linear-gradient(150deg,#1a1a1b,#121213);margin-left:7%}
.profile-notes-zone .postit:nth-child(3n){--tilt:-.55deg;background:linear-gradient(150deg,#151516,#101011);margin-right:6%}
.profile-notes-zone .postit::before{content:"";position:absolute;left:50%;top:-7px;width:34px;height:13px;transform:translateX(-50%) rotate(-2deg);background:rgba(205,205,190,.13);border-left:1px solid rgba(255,255,255,.05);border-right:1px solid rgba(255,255,255,.035);box-shadow:0 2px 6px #0004}
.profile-notes-zone .postit::after{content:"";position:absolute;top:7px;right:9px;width:3px;height:3px;border-radius:50%;background:var(--accent,#aaa);box-shadow:0 0 7px color-mix(in srgb,var(--accent,#aaa) 38%,transparent);opacity:.72}
.profile-notes-zone .postit:hover{transform:rotate(0deg) translateY(-2px);border-color:rgba(255,255,255,.14);box-shadow:0 18px 34px #0009}
.profile-notes-zone .postit-author{gap:6px;margin:0 0 9px;padding-right:14px}
.profile-notes-zone .postit-author b{font:800 10px ui-monospace,monospace;letter-spacing:.02em;color:#cfcfd2}
.profile-notes-zone .postit p{max-height:none;overflow:visible;margin:0 0 12px;color:#d7d7da;font-size:12px;line-height:1.5}
.profile-notes-zone .postit small{display:block;color:#606066!important;font:8.5px ui-monospace,monospace;letter-spacing:.04em}
.profile-notes-zone .postit-x{background:#09090988;color:#68686d}.profile-notes-zone .postit-x:hover{background:#391416;color:#fff}
.profile-notes-zone .postit-pending,.profile-notes-zone .postit-pending-list{margin:0 0 14px}
.profile-notes-zone .postit-pending{padding:10px;border-radius:9px;background:rgba(32,25,7,.8);font-size:10px}
.notes-empty{padding:18px 10px;text-align:center;color:#55555b;border:1px dashed rgba(255,255,255,.055);border-radius:10px;background:rgba(8,8,9,.2);font:8.5px ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase}

.profile-page footer{padding:45px 0 5px;color:#55555a}
.no-scroll{overflow:hidden}

/* Tablet: fotos primeiro; abaixo música e recados lado a lado. */
@media(max-width:1080px){
  .profile-page .profile-content{width:min(920px,92vw);padding-top:48px}
  .profile-identity{margin-bottom:34px}
  .profile-layout{grid-template-columns:minmax(0,1fr) minmax(250px,.72fr);grid-template-areas:"gallery gallery" "music notes" "playlist notes";gap:24px 22px}
  .profile-left-stack{display:contents}
  .profile-main{grid-area:gallery}
  .music-slot{grid-area:music}
  .playlist-slot{grid-area:playlist}
  
  .profile-notes-zone{grid-area:notes}
  .profile-main .gallery{columns:3;column-gap:11px}
  .profile-main .photo-link{margin-bottom:11px}
}

/* Celular: perfil -> fotos -> música -> playlists -> recados. */
@media(max-width:680px){
  .profile-page{background-attachment:scroll;background-position:center top}
  .profile-page .profile-content{width:min(100% - 28px,620px);padding:36px 0 36px}
  .profile-page .views-chip{position:relative;top:auto;right:auto;width:max-content;margin:0 0 10px auto}
  .profile-identity{margin-bottom:30px}
  .profile-identity .avatar{width:118px;height:118px}
  .profile-identity h1{margin-top:15px;font-size:28px}
  .profile-actions{gap:7px}.profile-action-btn,.discord-quick .discord-copy-btn{width:36px;height:36px;border-radius:11px}
  .profile-identity .bio{font-size:12px;margin-top:10px}
  .discord-popover{position:fixed;left:50%;top:50%;transform:translate(-50%,-48%);z-index:50}
  .discord-quick:hover .discord-popover,.discord-quick:focus-within .discord-popover{transform:translate(-50%,-50%)}
  .profile-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"gallery" "music" "playlist" "notes";gap:28px}
  .profile-left-stack{display:contents}
  .profile-main{grid-area:gallery}.music-slot{grid-area:music}.playlist-slot{grid-area:playlist}.profile-notes-zone{grid-area:notes}
  .profile-main .gallery{columns:2;column-gap:9px}.profile-main .photo-link{margin-bottom:9px;border-radius:9px}.profile-main .gallery img{border-radius:9px}
  .music-slot .music-id b{max-width:180px}
  .playlist-slot .playlist-body iframe{height:230px!important}
  .profile-notes-zone .postit{width:88%;max-width:310px}
  .profile-notes-zone .postit:nth-child(3n+2){margin-left:auto;margin-right:1%}.profile-notes-zone .postit:nth-child(3n){margin-left:1%;margin-right:auto}
}

@media(max-width:420px){
  .profile-page .profile-content{width:calc(100% - 20px)}
  .profile-main .gallery{columns:2;column-gap:7px}.profile-main .photo-link{margin-bottom:7px}
  .music-slot .music-id b{max-width:130px}
  .music-slot .music-volume input[type=range]{width:46px}
  .notes-heading{align-items:flex-start}.profile-notes-zone .recado-fab span{display:none}
}

/* ===== Ajuste 2026-09-03: módulos condicionais + Discord na lateral ===== */
/* O Rich Presence voltou a ser um card real da coluna esquerda. */
.discord-slot .discord-card{
  width:100%;
  max-width:none;
  margin:0;
  padding:13px 14px;
  border-radius:15px;
  background:linear-gradient(150deg,rgba(17,17,18,.71),rgba(7,7,8,.76));
  border-color:var(--profile-line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--profile-shadow);
}
.discord-slot .discord-avatar-wrap,
.discord-slot .discord-avatar,
.discord-slot .discord-avatar-fallback{width:42px;height:42px;flex-basis:42px}
.discord-slot .discord-meta b{font-size:12.5px}
.discord-slot .discord-meta small{font-size:9.5px}
.discord-slot .discord-activity{margin-top:10px;padding-top:10px}
.discord-slot .discord-activity-art,
.discord-slot .discord-activity-img,
.discord-slot .discord-activity-img-fallback{width:40px!important;height:40px!important}
.discord-slot .discord-activity-info b{font-size:11.5px}
.discord-slot .discord-activity-info small{font-size:9.5px}

/* As áreas opcionais simplesmente deixam de ocupar espaço quando o template não as renderiza. */
@media(max-width:1080px){
  .profile-layout{grid-template-areas:"gallery gallery" "music notes" "discord notes" "playlist notes"}
  .discord-slot{grid-area:discord}
}
@media(max-width:680px){
  .profile-layout{grid-template-areas:"gallery" "music" "discord" "playlist" "notes"}
  .discord-slot{grid-area:discord}
}

/* ---- Ajustes pontuais 2026-09: logout, fotos e recados ---- */
.nav-logout-form{display:inline;margin:0}.nav-logout-btn{appearance:none;border:0;background:transparent;color:inherit;padding:0;font:inherit;cursor:pointer}.nav-logout-btn:hover{color:#fff}


/* Legenda do lightbox com hierarquia visual, sem competir com a foto. */
.photo-modal-caption{max-width:min(760px,82vw);padding:10px 14px!important;border:1px solid rgba(255,255,255,.075);border-radius:10px;background:rgba(8,8,9,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px #0007;color:#e4e4e7!important;font:500 12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;letter-spacing:.01em;text-align:left!important}
.photo-modal-caption:empty{display:none}

/* Avatar do autor do recado um pouco maior, mantendo o post-it compacto. */
.profile-notes-zone .postit .postit-avatar,.profile-notes-zone .postit img.postit-avatar,.profile-notes-zone .postit span.postit-avatar{width:30px!important;height:30px!important;min-width:30px;min-height:30px}
.profile-notes-zone .postit-author{gap:8px;margin-bottom:10px;padding-right:16px}
.profile-notes-zone .postit-author b{font-size:10.5px}

/* X discreto e proporcional; ganha contraste só no hover/focus. */
.profile-notes-zone .postit-remove-form{top:8px;right:8px}
.profile-notes-zone .postit-x{width:17px;height:17px;background:rgba(0,0,0,.16);color:#77777c;opacity:.35;border:1px solid transparent;transition:opacity .16s ease,background .16s ease,color .16s ease,border-color .16s ease}
.profile-notes-zone .postit:hover .postit-x,.profile-notes-zone .postit-x:focus-visible{opacity:1}
.profile-notes-zone .postit-x:hover{background:#351416;color:#fff;border-color:#5f282c}
.profile-notes-zone .postit-x i,.profile-notes-zone .postit-x svg{width:10px;height:10px}

/* ========================================================================== */
/* BLACKBIO polish 2026-09-03: avisos, logout, personalização e recados       */
/* ========================================================================== */

/* Avisos não ficam presos na tela. */
.messages{display:flex;flex-direction:column;gap:8px;right:18px;top:78px;max-width:min(430px,calc(100vw - 36px));padding:0;background:transparent;border:0;box-shadow:none;pointer-events:none}
.flash-message{position:relative;padding:12px 38px 12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(15,15,16,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 16px 42px #000a;color:#e9e9ea;font-size:12px;line-height:1.45;animation:flashIn .2s ease both;pointer-events:auto}
.flash-message::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:1px;background:linear-gradient(90deg,var(--accent,#bdbdbd),transparent);opacity:.45}
.flash-message.success{border-color:rgba(98,206,147,.22)}
.flash-message.error{border-color:rgba(255,105,115,.28)}
.flash-message.is-leaving{animation:flashOut .26s ease forwards}
@keyframes flashIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes flashOut{to{opacity:0;transform:translateY(-8px) scale(.98)}}

/* Logout com hierarquia de ação, sem parecer um link solto. */
.topbar nav{align-items:center}
.nav-logout-form{display:flex!important;align-items:center;margin:0!important}
.nav-logout-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:7px!important;min-height:32px;padding:7px 11px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:9px!important;background:rgba(255,255,255,.035)!important;color:#aaa!important;font:800 11px/1 Inter,ui-sans-serif,sans-serif!important;letter-spacing:.035em;text-transform:uppercase;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important}
.nav-logout-btn svg,.nav-logout-btn i{width:14px;height:14px}
.nav-logout-btn:hover{color:#fff!important;background:rgba(126,31,38,.22)!important;border-color:rgba(255,93,105,.28)!important;transform:translateY(-1px)}
.nav-logout-btn:active{transform:none}

/* Checkbox não herda width:100% dos inputs comuns. */
input[type=checkbox],input[type=radio]{width:18px!important;height:18px!important;min-width:18px;margin:0!important;padding:0!important;accent-color:#d8d8d8;box-shadow:none!important;cursor:pointer}
.field-control{min-width:0}
.field-row-check{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label control" "error error";align-items:center;gap:8px 12px;padding:11px 12px;border:1px solid #202022;border-radius:11px;background:#09090a;margin:0!important}
.field-row-check .field-label{grid-area:label;min-width:0}
.field-row-check .field-control{grid-area:control;display:flex;align-items:center;justify-content:flex-end}
.field-row-check .field-error{grid-area:error}
.field-row-check label{color:#d2d2d4;font-weight:700}

/* Tela de personalização: blocos compactos e claramente relacionados. */
.customize-wrap{min-height:calc(100vh - 64px);padding:34px 0 90px;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.025),transparent 28%),#060606}
.customize-shell{width:min(1040px,92vw);margin:0 auto}
.customize-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 20px;padding:0 2px}
.customize-head h1{margin:4px 0 8px;font-size:clamp(28px,4vw,44px);letter-spacing:-.045em}
.customize-head .muted{max-width:680px;margin:0;font-size:12px;line-height:1.55}
.customize-head-actions{display:flex;gap:8px;flex:none}
.customize-head-actions .btn{padding:10px 13px;font-size:11px;border-radius:10px}
.customize-form{display:flex;flex-direction:column;gap:14px}
.customize-section{padding:18px 19px;border-radius:15px;background:linear-gradient(145deg,#0d0d0e,#09090a);border-color:#1f1f21;box-shadow:0 16px 42px #0006}
.photo-upload-section{margin-bottom:14px;border-color:#29292c;background:linear-gradient(145deg,#101011,#09090a)}
.customize-section-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid #1c1c1e}
.customize-section-head>div:first-child{display:flex;align-items:center;gap:11px;min-width:0}
.customize-section-head h2{margin:0 0 3px;font-size:16px;letter-spacing:-.02em}
.customize-section-head p{margin:0;color:#69696f;font-size:10.5px;line-height:1.4}
.section-index{display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid #2a2a2d;border-radius:8px;background:#0a0a0b;color:#73737a;font:800 9px ui-monospace,monospace}
.live-chip{display:inline-flex;align-items:center;gap:6px;flex:none;padding:6px 8px;border:1px solid rgba(92,207,143,.15);border-radius:999px;background:rgba(33,103,63,.09);color:#7eaa8e;font:800 8px ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase}
.live-chip>span{width:5px;height:5px;border-radius:50%;background:#67c58b;box-shadow:0 0 8px #67c58b88;animation:livePulse 1.8s ease-in-out infinite}
@keyframes livePulse{50%{opacity:.35}}
.profile-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 13px}
.profile-field-grid .field-row:not(.field-row-check){margin:0;padding:11px 12px;border:1px solid #1e1e20;border-radius:11px;background:#09090a}
.profile-field-grid .field-row input,.profile-field-grid .field-row textarea,.profile-field-grid .field-row select{margin-top:7px}
.profile-field-grid .field-label label{font-size:11px;color:#b4b4b9;font-weight:700}
.field-span-2{grid-column:1/-1}
.interaction-grid .field-row-check{min-height:50px}
#navbarColorField.is-dimmed{opacity:.42;filter:saturate(.3)}
.navbar-live-preview{display:flex!important;align-items:center!important;gap:3px!important;width:190px;min-height:42px;padding:0 11px;border:1px solid #262629;border-radius:9px;background:#080808;box-shadow:0 7px 18px #0007;transition:background .15s,border-color .15s;overflow:hidden}
.navbar-live-preview span,.navbar-live-preview b{font-size:9px;letter-spacing:.09em}.navbar-live-preview b{opacity:.45}.navbar-live-preview small{margin-left:auto;color:#737379;font:7.5px ui-monospace,monospace;letter-spacing:.04em}
.navbar-live-preview.is-transparent{background-image:linear-gradient(45deg,#111 25%,transparent 25%),linear-gradient(-45deg,#111 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#111 75%),linear-gradient(-45deg,transparent 75%,#111 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}

/* Upload rápido no topo da personalização. */
.photo-upload-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:16px}
.photo-quick-form{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;align-items:stretch}
.photo-drop-preview{position:relative;min-height:185px;border:1px dashed #303034;border-radius:12px;background:#070708;overflow:hidden;display:grid;place-items:center}
.photo-preview-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:20px;text-align:center;color:#77777e}
.photo-preview-placeholder svg{width:25px;height:25px;color:#a1a1a7}.photo-preview-placeholder span{font-size:11px;font-weight:800;color:#aaaab0}.photo-preview-placeholder small{font-size:8.5px}
.photo-drop-preview img,.photo-drop-preview video{width:100%;height:100%;min-height:185px;object-fit:cover}
.photo-preview-column{display:grid;align-content:start;gap:10px;min-width:0}
.video-clip-controls{display:grid;gap:10px;padding:12px;border:1px solid #252529;border-radius:10px;background:#0b0b0d}
.video-clip-controls[hidden]{display:none}
.video-clip-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px}
.video-clip-heading span,.video-clip-controls output{color:#a6c8ff;font-variant-numeric:tabular-nums}
.video-clip-controls label{display:grid;grid-template-columns:1fr auto;gap:5px 10px;color:#aaa;font-size:9px}
.video-clip-controls input[type=range]{grid-column:1/-1;width:100%;accent-color:#d9e5ff}
.photo-upload-fields{display:flex;flex-direction:column;gap:9px}
.photo-upload-fields .field-row{margin:0;padding:10px;border:1px solid #1f1f21;border-radius:10px;background:#09090a}
.photo-upload-fields .field-label label{font-size:10px;margin:0}.photo-upload-fields input{margin-top:6px}
.photo-add-btn{margin-top:auto;justify-content:center}
.photo-current-list{padding:11px;border:1px solid #1f1f21;border-radius:12px;background:#080809}
.photo-current-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.photo-current-head b{font-size:10px}.photo-current-head small{color:#626269;font-size:8.5px}
.customize-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.customize-thumb{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#101011;border:1px solid #202023}.customize-thumb img,.customize-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.customize-thumb form{position:absolute;top:4px;right:4px}.customize-thumb button{width:22px;height:22px;padding:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:rgba(0,0,0,.72);color:#aaa;cursor:pointer;backdrop-filter:blur(7px)}.customize-thumb button:hover{background:#40171b;color:#fff;border-color:#7a3037}.customize-thumb button svg{width:11px;height:11px}
.photo-empty-mini{grid-column:1/-1;min-height:95px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#55555b;border:1px dashed #222226;border-radius:9px;font-size:9px}.photo-empty-mini svg{width:18px;height:18px}
.customize-savebar{position:sticky;bottom:12px;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:2px;padding:10px 11px 10px 14px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(12,12,13,.91);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 50px #000b}
.customize-savebar>span{display:flex;align-items:center;gap:7px;color:#74747a;font-size:9.5px}.customize-savebar>span svg{width:13px;height:13px;color:#7ba58b}.customize-savebar .btn{padding:10px 14px;font-size:11px}

/* X do dono nos recados: maior, alinhado e visualmente proporcional ao post-it. */
.profile-notes-zone .postit{padding-top:18px}
.profile-notes-zone .postit-author{padding-right:30px!important}
.profile-notes-zone .postit-remove-form{top:9px!important;right:9px!important;z-index:4!important}
.profile-notes-zone .postit-x{width:27px!important;height:27px!important;padding:0!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:8px!important;background:rgba(5,5,6,.68)!important;color:#8a8a91!important;opacity:1!important;box-shadow:0 5px 14px #0005;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important}
.profile-notes-zone .postit-x:hover{background:rgba(111,27,34,.68)!important;color:#fff!important;border-color:rgba(255,95,105,.35)!important;transform:scale(1.04)}
.profile-notes-zone .postit-x:focus-visible{outline:2px solid rgba(255,255,255,.32);outline-offset:2px}
.profile-notes-zone .postit-x i,.profile-notes-zone .postit-x svg{width:13px!important;height:13px!important;stroke-width:2.3}

@media(max-width:760px){
  .customize-wrap{padding-top:24px}.customize-shell{width:calc(100% - 24px)}
  .customize-head{align-items:flex-start;flex-direction:column}.customize-head-actions{width:100%}.customize-head-actions .btn{flex:1;justify-content:center}
  .profile-field-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}
  .photo-upload-grid{grid-template-columns:1fr}.photo-quick-form{grid-template-columns:1fr}.photo-drop-preview,.photo-drop-preview img{min-height:210px;max-height:290px}
  .navbar-live-preview{display:none!important}.customize-section-head{align-items:flex-start}
  .customize-savebar{bottom:8px}.customize-savebar>span{display:none}.customize-savebar .btn{width:100%;justify-content:center}
  .topbar nav{gap:12px}.nav-logout-btn span{display:none}.nav-logout-btn{width:32px!important;padding:7px!important}
}

/* dxrkbio: navegação simples e marca com o arquivo original. */
.topbar { position: fixed; inset: 0 0 auto; height: 64px; background: transparent; border: 0; box-shadow: none; z-index: 15; pointer-events: none; }
.topbar > * { pointer-events: auto; }
html { scroll-padding-top: 80px; }
body > main { padding-top: 64px; }
/* O fundo do perfil passa por trás da navegação desde o topo. */
body > main:has(> .profile-page) { padding-top: 0; }
body > main > .profile-page { padding-top: 64px; min-height: 100vh; }
.topbar nav > a, .topbar .nav-logout-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; width: auto!important; padding: 0 4px!important;
  background: transparent!important; border: 0!important; border-radius: 0!important;
  box-shadow: none; color: #eee!important; font: inherit!important;
  letter-spacing: normal; text-transform: none; text-shadow: 0 1px 4px #000, 0 0 8px #000;
}
.topbar .nav-logout-btn span { display: inline; }
.topbar nav > a:hover, .topbar .nav-logout-btn:hover { color: #fff!important; text-decoration: underline; text-underline-offset: 5px; transform: none; }
.topbar a:focus-visible, .topbar button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.topbar .brand-icon { filter: drop-shadow(0 1px 3px #000); }
.profile-sidebar { top: 80px; }
.brand { display: inline-flex; align-items: center; gap: 10px; letter-spacing: .035em; }
.brand .brand-name, .brand .brand-icon { opacity: 1; }
.brand-icon { width: 76px; height: 32px; overflow: hidden; display: grid; place-items: center; flex: none; }
.brand-icon img { width: 108px; height: 36px; max-width: none; object-fit: contain; filter: brightness(0) invert(1); }
.brand-name { font-size: 17px; }
.audio-section-label { padding-top: 14px; border-top: 1px solid #ffffff12; }
.audio-section-label h3 { margin: 0 0 7px; font-size: 14px; color: #eee; }
.audio-section-label p { margin: 0; color: #999; font-size: 12px; line-height: 1.6; }
@media(max-width: 480px) { .topbar { padding: 0 12px; } .topbar nav { gap: 12px; font-size: 12px; } .brand { gap: 5px; } .brand-icon { width: 48px; } .brand-icon img { width: 70px; } .brand-name { font-size: 14px; } }
.brand-icon { position: relative; }
.brand-icon img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* Logo supplied for the navbar; preserve the original image asset. */
.topbar .brand-icon{width:110px;height:40px;}
.topbar .brand-icon img{width:148px;height:auto;left:47.7%;filter:brightness(0) invert(1);}
/* Ambient motion stays behind the content and never captures input. */
.hero{position:relative;isolation:isolate;overflow:hidden;}
.hero-card{z-index:1;}
.intro{isolation:isolate;overflow:hidden;}
.intro > :not(.ambient-particles){position:relative;z-index:1;}
.ambient-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.ambient-particles::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#ffffff07,transparent 65%);}
.ambient-particles span{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#e5e5ed;opacity:.35;box-shadow:0 0 12px #ffffff65;animation:ambient-drift var(--duration) var(--delay) ease-in-out infinite;}
.hero .btn,.intro .btn{transition:transform .25s,box-shadow .25s;animation:entry-glow 4s ease-in-out infinite;}
.hero .btn:hover,.intro .btn:hover{transform:translateY(-3px);}
.hero .btn:focus-visible,.intro .btn:focus-visible{outline:2px solid #fff;outline-offset:5px;}
@keyframes ambient-drift{0%,100%{transform:translate3d(0,24px,0);opacity:.12;}50%{transform:translate3d(var(--drift),-52px,0);opacity:.65;}}
@keyframes entry-glow{0%,100%{box-shadow:0 0 15px #ffffff08;}50%{box-shadow:0 0 32px #ffffff28;}}
@media(max-width:480px){.topbar .brand-icon{width:86px;height:36px;}.topbar .brand-icon img{width:116px;}.ambient-particles span:nth-child(n+21){display:none;}}
@media(prefers-reduced-motion:reduce){.ambient-particles span,.hero .btn,.intro .btn,.hero .orb,.intro .intro-ring{animation:none;}.hero .btn,.intro .btn,.intro{transition:none;}}

/* Entrada do perfil: movimento perceptível, porém leve, sem bloquear cliques. */
.intro{
  background-color:#050505;
  background-image:linear-gradient(180deg,rgba(5,5,5,.58),rgba(5,5,5,.84)),var(--intro-bg-image,none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.intro-text-trail{
  position:fixed!important;
  inset:0;
  z-index:0!important;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transition:opacity .22s ease;
}
.intro-text-trail.visible{opacity:1;}
.intro-text-trail span{
  position:absolute;
  left:0;
  top:0;
  white-space:nowrap;
  color:rgba(255,255,255,.72);
  font:italic 600 clamp(15px,1.35vw,22px)/1.1 Georgia,"Times New Roman",serif;
  letter-spacing:.055em;
  text-shadow:0 2px 14px rgba(0,0,0,.72),0 0 18px color-mix(in srgb,var(--accent,#aaa) 25%,transparent);
  will-change:transform;
  user-select:none;
}
.intro-text-trail span:nth-child(2){opacity:.86}.intro-text-trail span:nth-child(3){opacity:.72}.intro-text-trail span:nth-child(4){opacity:.58}.intro-text-trail span:nth-child(5){opacity:.44}.intro-text-trail span:nth-child(6){opacity:.32}.intro-text-trail span:nth-child(7){opacity:.22}
.hero .ambient-particles span:nth-child(3n){box-shadow:0 0 18px #ffffff7a;}
.hero .ambient-particles span:nth-child(4n){opacity:.5;}

.intro .ambient-particles span{
  opacity:.46;
  animation-duration:calc(var(--duration) * .68);
  box-shadow:0 0 15px #ffffff78;
}
.intro > .intro-effects{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* Efeito do fundo do perfil (profile_effect): entre o fundo e o conteúdo, preso à tela. Enquanto a
   entrada some (.is-arriving, 0,5 s), fica por cima dela, para o efeito que veio de lá não piscar. */
.profile-ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.profile-ambient.is-arriving{z-index:21}
.profile-ambient > .intro-effects{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.profile-ambient .ambient-particles::before,.profile-ambient .ambient-particles::after{content:none}
.intro-effects span{position:absolute;display:block;pointer-events:none}
.intro-effects .effect-heart{top:-36px;color:color-mix(in srgb,var(--accent,#bdbdbd) 72%,white);font-size:var(--size);line-height:1;text-shadow:0 0 12px #ffffff55;opacity:0;animation:intro-heart-fall var(--duration) linear forwards}
.intro .intro-ring{animation:intro-ring-float 4s ease-in-out infinite,intro-ring-glow 3.2s ease-in-out infinite;}
.intro .btn{animation:entry-glow 2.8s ease-in-out infinite,intro-button-float 3.6s ease-in-out infinite;}
@keyframes intro-ring-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes intro-ring-glow{0%,100%{box-shadow:0 0 46px #8883}50%{box-shadow:0 0 92px color-mix(in srgb,var(--accent,#aaa) 38%,transparent)}}
@keyframes intro-button-float{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes intro-heart-fall{0%{opacity:0;transform:translate3d(0,-40px,0) rotate(0)}14%{opacity:var(--opacity)}100%{opacity:0;transform:translate3d(var(--drift),110vh,0) rotate(var(--rotation,360deg))}}
@media(prefers-reduced-motion:reduce){.intro::before,.intro::after,.intro .ambient-particles span,.intro .intro-ring,.intro .btn{animation:none!important;}.intro .btn{translate:none;}.intro-text-trail{display:none!important;}}

/* Partículas/estrelas animadas das telas iniciais. */
.ambient-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.ambient-particles-canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  opacity:.96;
  pointer-events:none;
}
.hero .ambient-particles::after,
.intro .ambient-particles::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.05),transparent 25%),
    radial-gradient(circle at 82% 72%,rgba(255,255,255,.035),transparent 28%);
  mix-blend-mode:screen;
}
/* A animação agora é feita por canvas/JS; não é anulada pela preferência do SO. */
@media(prefers-reduced-motion:reduce){
  .ambient-particles-canvas{opacity:.75;}
}


/* ========================================================================== */
/* Ajustes solicitados 2026-09-21                                             */
/* ========================================================================== */

/* Dashboard: Fotos ficam somente em Personalizar; Códigos não são exibidos. */
.dashboard-single-grid{grid-template-columns:minmax(0,1fr)}
.dashboard > .panel + .panel{margin-top:20px}
.confirm-dialog{box-sizing:border-box;width:min(440px,calc(100% - 32px));padding:26px;background:#0c0c0c;color:#f4f4f4;border:1px solid #292929;border-radius:18px;box-shadow:0 24px 80px #0009}
.confirm-dialog::backdrop{background:rgba(0,0,0,.75);backdrop-filter:blur(4px)}
.confirm-dialog h2{margin:0 0 14px;font-size:22px}
.confirm-dialog p{color:#aaa;line-height:1.6;white-space:pre-line;margin:0 0 24px}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.confirm-dialog button:focus-visible{outline:2px solid #f4f4f4;outline-offset:4px}

/* Personalização mais navegável e área exclusiva para efeitos. */
.customize-jumpnav{display:flex;align-items:center;gap:7px;margin:0 0 14px;padding:8px;border:1px solid #1e1e20;border-radius:13px;background:rgba(10,10,11,.82);overflow-x:auto;scrollbar-width:thin;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.customize-jumpnav a{display:inline-flex;align-items:center;gap:6px;flex:none;padding:8px 10px;border:1px solid transparent;border-radius:9px;color:#85858c;font:800 9px ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;transition:.16s ease}
.customize-jumpnav a svg{width:13px;height:13px}
.customize-jumpnav a:hover,.customize-jumpnav a:focus-visible{color:#f1f1f2;background:#121214;border-color:#2b2b2e;outline:0}
.effects-section{border-color:#29292d;background:linear-gradient(145deg,#101012,#09090a)}
.effects-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.effect-setting-card{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:14px;align-items:start;padding:14px;border:1px solid #202023;border-radius:12px;background:#080809}
.effect-setting-card-wide{grid-column:1/-1;grid-template-columns:minmax(230px,.65fr) minmax(0,1.35fr)}
.effect-setting-copy{padding:2px 2px 0}
.effect-setting-copy h3{margin:6px 0 6px;font-size:13px;letter-spacing:-.01em;color:#ececef}
.effect-setting-copy p{margin:0;color:#74747b;font-size:10.5px;line-height:1.55}
.effect-location{display:inline-flex;padding:4px 6px;border:1px solid #26262a;border-radius:6px;background:#0d0d0f;color:#8e8e95;font:800 7.5px ui-monospace,monospace;letter-spacing:.08em}
.effect-fields{display:grid;gap:8px}
.effect-fields .field-row:not(.field-row-check){margin:0;padding:10px;border:1px solid #1e1e20;border-radius:10px;background:#0b0b0c}
.effect-fields .field-row-check{margin:0!important}
.effect-fields .field-label label{font-size:10.5px}
.effect-fields input,.effect-fields select,.effect-fields textarea{margin-top:6px}

/* Recado: texto um pouco maior sem aumentar demais o post-it. */
.profile-notes-zone .postit p{font-size:13px;line-height:1.52}

/* Galeria pública: todos os cards usam a mesma largura; a altura segue a proporção da mídia. */

/* Mantenha apenas o efeito de fundo escolhido no seletor. */
.intro .ambient-particles::before,.intro .ambient-particles::after{display:none!important;content:none!important}
.intro .intro-ring{animation:intro-ring-float 4s ease-in-out infinite!important;box-shadow:none!important}
.intro .intro-ring{display:grid;place-items:center;width:184px;height:184px;padding:0;border:0!important}
.intro .intro-ring>img:not(.intro-avatar-decoration){width:152px;height:152px}
.intro .intro-ring>.intro-avatar-decoration{position:absolute;left:50%;top:50%;width:184px;height:184px;max-width:none;transform:translate(-50%,-50%);object-fit:contain;border:0;border-radius:0;pointer-events:none;z-index:3}
.intro .btn{animation:intro-button-float 3.6s ease-in-out infinite!important;box-shadow:none}

/* Rastro de frase: acima das partículas e atrás do conteúdo clicável. */
.intro-text-trail{z-index:1!important;display:block!important}
.intro .intro-ring,.intro>p,.intro>.btn{position:relative;z-index:2!important}
.intro-text-trail span{text-shadow:0 2px 14px rgba(0,0,0,.78);font-family:"Segoe UI",Inter,ui-sans-serif,system-ui,sans-serif;font-style:normal;font-weight:700;letter-spacing:.035em}

@media(max-width:760px){
  .effects-guide-grid{grid-template-columns:1fr}
  .effect-setting-card,.effect-setting-card-wide{grid-column:auto;grid-template-columns:1fr}
  .customize-jumpnav{margin-left:-1px;margin-right:-1px}
}


/* --- custom branding: navbar logo, favicon support and profile badge --- */
.topbar .brand-icon{width:158px;height:54px;overflow:visible;}
.topbar .brand-icon img{width:148px;height:auto;left:50%;filter:none;}
@media(max-width:480px){.topbar .brand-icon{width:126px;height:46px;}.topbar .brand-icon img{width:118px;}}

.profile-name-row{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;}
.profile-name-row h1{margin:0;}
.profile-badge{display:block;width:24px;height:24px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.38));}
@media(max-width:640px){.profile-name-row{gap:6px;}.profile-badge{width:20px;height:20px;}}

.cursor-phrase-trail{position:fixed;inset:0;z-index:10001;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .22s ease}
.cursor-phrase-trail.visible{opacity:1}
.cursor-phrase-trail span{position:absolute;left:0;top:0;white-space:nowrap;color:rgba(255,255,255,.9);font:italic 600 clamp(15px,1.35vw,22px)/1.1 Georgia,"Times New Roman",serif;will-change:transform;user-select:none}
.cursor-phrase-trail span:nth-child(2){opacity:.86}.cursor-phrase-trail span:nth-child(3){opacity:.72}.cursor-phrase-trail span:nth-child(4){opacity:.58}.cursor-phrase-trail span:nth-child(5){opacity:.44}.cursor-phrase-trail span:nth-child(6){opacity:.32}.cursor-phrase-trail span:nth-child(7){opacity:.22}
/* "Configurações" no menu do topo: no computador só o nome; em tela bem
   estreita só a engrenagem (o nome continua para leitor de tela). */
.topbar .nav-settings{display:inline-flex;align-items:center;gap:6px}
.topbar .nav-settings svg{display:none;width:17px;height:17px}
/* "Admin" faz o mesmo: em tela estreita, só o ícone (e o menu aperta os espaços para caber
   inteiro, mesmo no caso mais cheio: admin no próprio perfil). */
.topbar .nav-admin{display:inline-flex;align-items:center;gap:6px}
.topbar .nav-admin svg{display:none;width:17px;height:17px}
/* Os espaços do menu em telas estreitas. Com html na frente (e o caso do "Editar fotos" do
   perfil), valem também nas páginas que carregam depois o notifications.css e o
   gallery-grid.css, que têm a própria escada de quando o menu era só texto. */
@media(max-width:520px){.topbar .nav-settings svg,.topbar .nav-admin svg{display:block}.topbar .nav-settings span,.topbar .nav-admin span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}html .topbar nav,html .topbar nav:has(.nav-edit-page){gap:9px}}
@media(max-width:480px){html .topbar nav,html .topbar nav:has(.nav-edit-page){gap:7px}}
@media(max-width:400px){html .topbar nav,html .topbar nav:has(.nav-edit-page){gap:5px}}
@media(max-width:360px){html .topbar nav,html .topbar nav:has(.nav-edit-page){gap:3px}html .topbar .nav-bell-btn{width:30px;height:30px}}
@media(max-width:340px){html .topbar .nav-bell-btn{width:28px;height:28px}.topbar nav > .nav-edit-page.nav-edit-page{padding:7px!important}}

/* dxrk.dj e dxrk.jogos, os dois mundos do site: uma pílula de vidro com marca própria (o
   equalizador do DJ dança devagar; o dado dos jogos rola no hover). No nome, "dxrk" fica
   discreto e ".dj"/".jogos" em destaque. No mundo em que a pessoa está, a pílula acende na
   cor dele (--w). Em tela bem estreita, fica só a marca. */
.topbar nav > a.nav-world{
  --w:#6ff0c9;
  gap:8px;height:34px;min-height:34px;padding:0 14px 0 11px!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:999px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03)),rgba(12,12,16,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 22px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:13.5px!important;letter-spacing:.01em;text-shadow:none;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.topbar nav > a.nav-games{--w:#ffc94d}
.topbar nav > a.nav-world:hover{text-decoration:none;transform:translateY(-1px);border-color:rgba(255,255,255,.32)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 26px rgba(0,0,0,.42),0 0 0 3px color-mix(in srgb,var(--w) 10%,transparent)}
.topbar nav > a.nav-world.is-here{border-color:color-mix(in srgb,var(--w) 58%,transparent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--w) 22%,transparent),color-mix(in srgb,var(--w) 6%,transparent)),rgba(12,12,16,.5)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 3px color-mix(in srgb,var(--w) 13%,transparent),0 8px 24px rgba(0,0,0,.4)}
.nav-world-name{color:rgba(255,255,255,.62);font-weight:500;white-space:nowrap}
.nav-world-name b{color:#fff;font-weight:800}
.nav-world.is-here .nav-world-name{color:rgba(255,255,255,.78)}
.nav-world-mark{position:relative;flex:none}
/* Equalizador: quatro barras na cor do mundo, cada uma no seu tempo; no hover, mais rápido. */
.nav-dj .nav-world-mark{display:flex;align-items:flex-end;gap:2px;width:15px;height:13px}
.nav-dj .nav-world-mark i{flex:1;height:35%;border-radius:1px;background:var(--w);animation:navEq 1.35s ease-in-out infinite}
.nav-dj .nav-world-mark i:nth-child(2){animation-delay:-.5s}
.nav-dj .nav-world-mark i:nth-child(3){animation-delay:-.95s}
.nav-dj .nav-world-mark i:nth-child(4){animation-delay:-.25s}
.nav-dj:hover .nav-world-mark i{animation-duration:.75s}
@keyframes navEq{0%,100%{height:30%}50%{height:100%}}
/* Dado: dourado, com as cinco pintas; no hover ele rola. */
.nav-games .nav-world-mark{display:block;width:14px;height:14px;border-radius:4px;background:var(--w);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.nav-games .nav-world-mark i{position:absolute;width:3px;height:3px;border-radius:50%;background:#2c1c00}
.nav-games .nav-world-mark i:nth-child(1){left:2.5px;top:2.5px}
.nav-games .nav-world-mark i:nth-child(2){right:2.5px;top:2.5px}
.nav-games .nav-world-mark i:nth-child(3){left:5.5px;top:5.5px}
.nav-games .nav-world-mark i:nth-child(4){left:2.5px;bottom:2.5px}
.nav-games .nav-world-mark i:nth-child(5){right:2.5px;bottom:2.5px}
.nav-games:hover .nav-world-mark{transform:rotate(180deg)}
@media(max-width:900px){
  .topbar nav > a.nav-world{width:34px!important;padding:0!important}
  .topbar .nav-world .nav-world-name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(max-width:400px){.topbar nav > a.nav-world{width:31px!important;height:31px;min-height:31px}}
@media(max-width:360px){.topbar nav > a.nav-world{width:29px!important;height:29px;min-height:29px}}
@media(max-width:340px){.topbar nav > a.nav-world{width:27px!important;height:27px;min-height:27px}}
@media(prefers-reduced-motion:reduce){.nav-dj .nav-world-mark i{animation:none}.nav-dj .nav-world-mark i:nth-child(2){height:80%}.nav-dj .nav-world-mark i:nth-child(3){height:55%}.nav-games .nav-world-mark{transition:none}}
/* Sem menu de salvar/copiar ao segurar o dedo numa imagem ou link no iPhone
   (no resto, o protect.js bloqueia o botão direito). Foto da galeria agora é
   "botão" sem link: precisa do próprio contorno de foco no teclado. */
img,video,a{-webkit-touch-callout:none}
.gallery .photo-link:focus-visible{outline:2px solid var(--accent,#bdbdbd);outline-offset:3px}