:root{
  --ink:#0E1015;
  --panel:#161922;
  --panel-2:#1D212C;
  --line:#272C38;
  --text:#E7E9EE;
  --text-dim:#8B93A7;
  --text-faint:#5B6376;
  --cyan:#4FD1C5;
  --cyan-dim:#2C8A80;
  --amber:#F2A65A;
  --red:#E5605A;
  --green:#3BA55D;
  --on-accent:#04262b;
  --glow:#1a2230;
  --scroll:#2A2F3C;
  --font-display:var(--font-body);
  --font-body:'Inter','Vazirmatn',sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:radial-gradient(ellipse at 20% -10%, var(--glow) 0%, var(--ink) 55%);
  color:var(--text);
  font-family:var(--font-body);
  overflow:hidden;
}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:4px;}
::-webkit-scrollbar-track{background:transparent;}
button{font-family:inherit;cursor:pointer;}
input,textarea{font-family:inherit;}
a{color:var(--cyan);}
svg{display:block;}

/* ---------- LOGIN ---------- */
#loginScreen{height:100%;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-card{width:380px;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:36px 32px;}
.login-mark{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.login-mark .dot{width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);}
.login-mark span{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:0.2px;}
.login-card h1{font-family:var(--font-display);font-size:22px;font-weight:600;margin:0 0 6px;}
.login-card p.sub{color:var(--text-dim);font-size:13px;margin:0 0 24px;line-height:1.5;}
.avatar-picker{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.avatar-preview{width:64px;height:64px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);object-fit:cover;flex-shrink:0;}
.avatar-btn{background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:9px 14px;border-radius:8px;font-size:13px;font-weight:500;}
.avatar-btn:hover{border-color:var(--cyan-dim);}
.field label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:7px;font-weight:500;}
.field input[type=text],.field input[type=password]{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:11px 13px;font-size:14px;outline:none;font-family:inherit;}
.field input[type=text]:focus,.field input[type=password]:focus{border-color:var(--cyan-dim);}
/* Consistent, single source of truth for the gap between two stacked
   fields — every modal composed of a plain list of .field blocks gets
   even spacing automatically instead of each caller guessing a margin. */
.field + .field{margin-top:18px;}
.auth-error{color:var(--red);font-size:12px;margin:10px 0 0;line-height:1.5;}
.auth-error:empty{display:none;}
.auth-switch{text-align:center;font-size:12px;color:var(--text-dim);margin-top:16px;}
.auth-switch a{color:var(--cyan);text-decoration:none;font-weight:600;}
.auth-switch a:hover{text-decoration:underline;}
.enter-btn{width:100%;margin-top:22px;background:var(--cyan);color:#08201D;border:none;border-radius:8px;padding:12px;font-weight:700;font-size:14px;letter-spacing:0.2px;}
.enter-btn:disabled{opacity:0.45;cursor:not-allowed;}
.enter-btn:not(:disabled):hover{background:#63ddd2;}

/* ---------- APP SHELL ---------- */
#app{display:none;height:100%;}
#app.active{display:flex;}
.sidebar{width:250px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;}
.sidebar-header{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;}
.sidebar-header .dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);}
.sidebar-header span{font-family:var(--font-display);font-weight:700;font-size:16px;}
.channel-scroll{flex:1;overflow-y:auto;padding:14px 10px;}
.group-label{font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.6px;padding:10px 10px 6px;}
.group-label-row{display:flex;align-items:center;justify-content:space-between;padding-right:6px;}
.group-add-btn{
  width:18px;height:18px;border-radius:5px;flex-shrink:0;background:none;border:none;
  color:var(--text-faint);display:flex;align-items:center;justify-content:center;padding:0;
}
.group-add-btn:hover{background:var(--panel-2);color:var(--cyan);}
.chan-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;color:var(--text-dim);font-size:14px;font-weight:500;margin-bottom:1px;cursor:pointer;}
.chan-row:hover{background:var(--panel-2);color:var(--text);}
.chan-row.active{background:var(--panel-2);color:var(--text);}
.chan-row.active .chan-icon{color:var(--cyan);}
.chan-icon{width:16px;display:flex;align-items:center;justify-content:center;color:var(--text-faint);flex-shrink:0;font-size:13px;}
.chan-lock{margin-left:auto;color:var(--text-faint);display:flex;align-items:center;flex-shrink:0;}
.voice-block{margin-bottom:2px;}
.voice-members{padding-left:26px;margin:2px 0 6px;}
.voice-member-row{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:6px;font-size:12px;color:var(--text-dim);cursor:pointer;}
.voice-member-row:hover{background:var(--panel-2);color:var(--text);}
.voice-member-row img{width:18px;height:18px;border-radius:50%;object-fit:cover;transition:box-shadow 0.1s ease;}
.voice-member-row.speaking img{box-shadow:0 0 0 2px var(--green);}
.voice-member-row .vm-icons{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--text-faint);}
.voice-member-row .vm-icons .muted{color:var(--red);}
.voice-member-row .vm-icons .deafened{color:var(--amber);}
.watch-stream-btn{
  display:flex;align-items:center;gap:4px;background:var(--cyan);color:var(--on-accent);border:none;
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;flex-shrink:0;
}
.watch-stream-btn:hover{opacity:0.88;}

/* ---------- message links ---------- */
.msg-link{color:var(--cyan);text-decoration:underline;text-underline-offset:2px;word-break:break-all;}
.msg-link:hover{color:var(--text);}

/* ---------- DM list "see more" ---------- */
.dm-more-row{color:var(--text-faint);font-size:12px;font-weight:500;justify-content:center;}
.dm-more-row:hover{color:var(--text);}
.chan-row.voice-connected{color:var(--cyan);}

/* ---------- Discord-style connected strip ---------- */
.voice-status-bar{
  display:none;
  background:linear-gradient(180deg, rgba(59,165,93,0.12), rgba(59,165,93,0.04));
  border-top:1px solid var(--line);
  padding:9px 14px;
  align-items:center;gap:6px;
}
.voice-status-bar.active{display:flex;}
.vsb-left{flex:1;display:flex;align-items:center;gap:9px;min-width:0;}
.vsb-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex-shrink:0;}
.vsb-title{font-size:12px;font-weight:700;color:var(--green);}
.vsb-channel{font-size:11px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vsb-disconnect{color:var(--red);}
.vsb-disconnect:hover{background:rgba(229,96,90,0.16);}
#shareScreenBtn.sharing{color:var(--cyan);}
#shareScreenBtn.sharing:hover{background:rgba(79,209,197,0.16);}

@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:0.35;}}

.screenshare-viewer{display:none;position:fixed;inset:0;background:rgba(6,7,10,0.96);z-index:1200;flex-direction:column;}
.screenshare-viewer.active{display:flex;}
.ssv-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;color:var(--text);font-size:14px;font-weight:600;flex-shrink:0;}
.ssv-close{background:none;border:none;color:var(--text-faint);font-size:20px;cursor:pointer;line-height:1;}
.ssv-close:hover{color:var(--text);}
#screenShareVideo{flex:1;width:100%;min-height:0;object-fit:contain;background:#000;}
.ssv-connecting{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-dim);font-size:13px;}
.screenshare-viewer.connecting #screenShareVideo{display:none;}
.screenshare-viewer.connecting .ssv-connecting{display:block;}

/* ---------- Bottom identity bar (Discord-style) ---------- */
.user-bar{padding:9px 10px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;background:var(--panel);}
.user-bar img{width:32px;height:32px;border-radius:50%;flex-shrink:0;object-fit:cover;}
.user-bar-info{min-width:0;cursor:pointer;}
.user-bar .un{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-bar .ustat{font-size:11px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-bar-controls{margin-left:auto;display:flex;align-items:center;gap:2px;flex-shrink:0;}

.lightbox-overlay{display:none;position:fixed;inset:0;background:rgba(6,7,10,0.92);align-items:center;justify-content:center;z-index:1100;}
.lightbox-overlay.active{display:flex;}
.lightbox-overlay img{max-width:92vw;max-height:92vh;border-radius:6px;object-fit:contain;}
.lightbox-close{position:absolute;top:18px;right:22px;background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;opacity:0.8;}
.lightbox-close:hover{opacity:1;}

.user-profile-popover{
  display:none;position:fixed;z-index:1210;width:260px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,0.5);overflow:hidden;text-align:left;
}
.user-profile-popover.active{display:block;}
.user-profile-banner{
  position:relative;height:70px;
  background:linear-gradient(135deg, #1a2230, #2b3348 55%, #3a4560);
  background-size:cover;background-position:center;
}
.user-profile-banner.has-image{background-color:transparent;}
.user-profile-close{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:6px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:rgba(14,16,21,0.4);border:none;color:#fff;font-size:12px;line-height:1;
}
.user-profile-close:hover{background:rgba(14,16,21,0.65);}
/* Positioned (not just negative-margined) so it reliably paints above the
   banner — a plain static-flow sibling would render BEHIND a position:relative
   banner regardless of source order, which was the original bug here. */
.user-profile-avatar-wrap{position:absolute;left:14px;bottom:-24px;z-index:2;}
.user-profile-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;border:3px solid var(--panel-2);background:var(--panel);}
.user-profile-online-dot{position:absolute;right:0;bottom:0;width:13px;height:13px;border-radius:50%;background:var(--text-faint);border:3px solid var(--panel-2);}
.user-profile-online-dot.online{background:var(--green);}
.user-profile-online-dot.idle{background:var(--amber);}
.user-profile-body{padding:0 14px 14px;}
.user-profile-namewrap{padding:8px 0 10px 74px;min-height:26px;}
.user-profile-namewrap h3{margin:0;font-family:var(--font-display);font-size:14px;}
.user-profile-status{color:var(--text-dim);font-size:11px;margin-top:2px;}
.user-profile-divider{height:1px;background:var(--line);margin:4px 0 10px;}
.user-profile-bio{color:var(--text-dim);font-size:12px;line-height:1.5;margin-bottom:12px;word-break:break-word;}
.user-profile-actions{display:flex;flex-direction:column;gap:8px;}
.user-profile-actions .enter-btn{padding:9px;font-size:12px;}
.user-profile-actions .fr-btn{width:100%;}

.dm-row{position:relative;}
.dm-avatar{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.dm-online-dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);margin-left:auto;flex-shrink:0;}
.unread-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-left:auto;flex-shrink:0;}
.unread-badge{margin-left:auto;flex-shrink:0;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:1px 5px;border-radius:8px;line-height:1.5;}
.dm-online-dot.on,.dm-online-dot.online{background:var(--green);}
.dm-online-dot.idle{background:var(--amber);}
.friends-empty-sidebar{padding:4px 10px 10px;font-size:12px;color:var(--text-faint);}

.friends-list{display:flex;flex-direction:column;gap:2px;margin-bottom:4px;}
.friends-subhead{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.5px;margin:14px 0 6px;}
.friends-subhead:first-of-type{margin-top:0;}
.friend-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:7px;}
.friend-row:hover{background:var(--panel-2);}
.friend-row img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.fr-avatar-wrap{position:relative;flex-shrink:0;}
.fr-avatar-wrap .status-dot-badge{position:absolute;right:-1px;bottom:-1px;}
.fr-info{min-width:0;flex:1;}
.fr-name{font-size:13px;font-weight:600;color:var(--text);}
.fr-status{font-size:11px;color:var(--text-faint);}
.fr-actions{display:flex;gap:6px;flex-shrink:0;}
.fr-btn{background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);font-size:12px;font-weight:600;padding:6px 10px;border-radius:6px;white-space:nowrap;}
.fr-btn:hover:not(:disabled){border-color:var(--cyan-dim);color:var(--text);}
.fr-btn:disabled{opacity:0.6;cursor:default;}
.fr-btn.accept{background:var(--cyan);border-color:var(--cyan);color:var(--on-accent);}
.fr-btn.accept:hover{opacity:0.9;}
.fr-btn.danger:hover{border-color:var(--red);color:var(--red);}
.friends-empty{color:var(--text-faint);font-size:12px;padding:14px 6px;text-align:center;}

.ub-icon-btn{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:none;border:none;color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.ub-icon-btn:hover:not(:disabled){background:var(--panel-2);color:var(--text);}
.ub-icon-btn:disabled{opacity:0.35;cursor:not-allowed;}
.ub-icon-btn.on{color:var(--red);}
.ub-icon-btn.on:hover{background:rgba(229,96,90,0.16);}
.ub-icon-btn.deaf-on{color:var(--amber);}
.ub-icon-btn.deaf-on:hover{background:rgba(242,166,90,0.16);}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.main-header{padding:15px 22px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:10px;flex-shrink:0;}
.main-header h2{font-family:var(--font-display);font-size:16px;margin:0;font-weight:700;}
.main-header .topic{color:var(--text-dim);font-size:13px;}
.messages{flex:1;overflow-y:auto;padding:18px 22px;}
.typing-indicator{height:0;overflow:hidden;padding:0 22px;font-size:12px;font-family:var(--font-body);color:var(--text-dim);flex-shrink:0;transition:height 0.15s ease;}
.typing-indicator.active{height:22px;padding-top:4px;}
.msg{display:flex;gap:12px;padding:8px 4px;border-radius:8px;position:relative;}
.msg:hover{background:color-mix(in srgb,var(--text) 5%,transparent);}
.msg:hover .msg-actions{display:flex;}
.msg img.avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;margin-top:2px;object-fit:cover;cursor:pointer;}
.msg-body{min-width:0;flex:1;}
.msg-head{display:flex;align-items:baseline;gap:8px;}
.msg-head .name{font-weight:700;font-size:14px;cursor:pointer;}
.msg-head .name:hover{text-decoration:underline;}
.msg-head .time{font-size:11px;color:var(--text-faint);}
.msg-reply-ref{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);margin-bottom:2px;border-left:2px solid var(--cyan-dim);padding-left:8px;cursor:pointer;}
.msg-reply-ref:hover{color:var(--text);}
.msg.jump-highlight{animation:jump-flash 1.5s ease;}
@keyframes jump-flash{0%{background:rgba(79,209,197,0.22);}100%{background:transparent;}}
.msg-text{font-size:14px;line-height:1.5;color:var(--text);word-break:break-word;white-space:pre-wrap;}
.mention{background:rgba(79,209,197,0.16);color:var(--cyan);border-radius:4px;padding:0 3px;font-weight:600;}
.mention-self{background:rgba(242,166,90,0.22);color:var(--amber);}
.msg.mentioned{background:rgba(242,166,90,0.06);border-left:2px solid var(--amber);padding-left:10px;margin-left:-6px;}

.link-preview{display:block;margin-top:8px;max-width:240px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2);text-decoration:none;}
.link-preview img{display:block;width:100%;max-height:135px;object-fit:cover;cursor:pointer;}
.link-preview.yt{position:relative;cursor:pointer;}
.link-preview.yt img{cursor:pointer;}
.link-preview .lp-badge{display:block;padding:6px 10px;font-size:12px;font-weight:600;color:var(--text-dim);}
.link-preview.img img{cursor:zoom-in;}

.mention-popover{position:fixed;z-index:1050;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:5px;min-width:180px;max-width:260px;box-shadow:0 10px 30px rgba(0,0,0,0.45);}
.mention-popover button{width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--text);padding:7px 8px;border-radius:7px;font-size:13px;text-align:left;}
.mention-popover button:hover{background:var(--panel);}
.mention-popover img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.mention-popover .mp-username{margin-left:auto;color:var(--text-faint);font-size:11px;flex-shrink:0;}
.msg-attach img{max-width:280px;max-height:220px;border-radius:8px;margin-top:6px;display:block;cursor:zoom-in;}
.msg-attach video{max-width:340px;max-height:260px;border-radius:8px;margin-top:6px;display:block;background:#000;}
.msg-attach audio{margin-top:6px;display:block;width:300px;max-width:100%;height:36px;}
.msg-attach a.file-chip{margin-top:6px;display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--text-dim);text-decoration:none;}
.msg-attach a.file-chip:hover{border-color:var(--cyan-dim);color:var(--text);}
.msg-actions{display:none;position:absolute;top:-12px;right:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:7px;overflow:hidden;}
.msg-actions button{background:none;border:none;color:var(--text-dim);padding:6px 8px;display:flex;align-items:center;justify-content:center;}
.msg-actions button:hover{color:var(--cyan);background:var(--panel);}
.msg-actions button.confirm{color:var(--red);}
.msg-actions button.confirm:hover{background:rgba(229,96,90,0.16);}
.edited-tag{font-size:11px;color:var(--text-faint);}

.msg-reactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.msg-reactions:empty{display:none;}
.reaction-pill{display:inline-flex;align-items:center;gap:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:3px 9px;font-size:12px;color:var(--text-dim);}
.reaction-pill span{font-size:11px;color:var(--text-faint);}
.reaction-pill:hover{border-color:var(--cyan-dim);color:var(--text);}
.reaction-pill.mine{border-color:var(--cyan-dim);background:rgba(90,200,220,0.12);color:var(--cyan);}
.reaction-pill.mine span{color:var(--cyan);}

.emoji-picker{position:fixed;z-index:1050;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:5px;display:flex;gap:2px;box-shadow:0 10px 30px rgba(0,0,0,0.45);}
.emoji-picker button{background:none;border:none;font-size:18px;line-height:1;padding:6px;border-radius:6px;}
.emoji-picker button:hover{background:var(--panel);}

.msg-edit-input{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:7px;color:var(--text);padding:8px 10px;font-size:14px;font-family:inherit;resize:vertical;min-height:36px;outline:none;}
.msg-edit-input:focus{border-color:var(--cyan-dim);}
.msg-edit-actions{display:flex;gap:6px;margin-top:6px;}
.msg-edit-actions button{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;color:var(--text-dim);font-size:12px;padding:5px 12px;}
.msg-edit-actions .msg-edit-save{background:var(--cyan);border-color:var(--cyan);color:var(--on-accent);font-weight:700;}
.msg-edit-actions .msg-edit-save:hover{opacity:0.9;}
.msg-edit-actions .msg-edit-cancel:hover{color:var(--text);}

.composer-wrap{padding:14px 22px 18px;flex-shrink:0;}
.reply-preview{display:none;align-items:center;justify-content:space-between;background:var(--panel-2);border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;padding:7px 12px;font-size:12px;color:var(--text-dim);}
.reply-preview.active{display:flex;}
.reply-preview .cancel{color:var(--red);cursor:pointer;font-weight:700;}
.attach-preview{display:none;align-items:center;gap:8px;padding:8px 12px;background:var(--panel-2);border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;font-size:12px;color:var(--text-dim);}
.attach-preview.active{display:flex;}
.attach-preview .cancel{color:var(--red);cursor:pointer;font-weight:700;margin-left:auto;}
.composer{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:8px;padding:8px 10px;}
.reply-preview.active + .composer{border-radius:0 0 10px 10px;}
.attach-preview.active + .reply-preview.active + .composer{border-radius:0 0 10px 10px;}
.attach-preview.active + .composer{border-radius:0 0 10px 10px;}
.composer textarea{flex:1;background:none;border:none;color:var(--text);resize:none;outline:none;font-size:14px;padding:8px 4px;max-height:120px;line-height:1.4;align-self:center;}

.plus-btn{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  padding:0;color:var(--text-dim);
}
.plus-btn:hover{color:var(--ink);background:var(--cyan);border-color:var(--cyan);}
.send-btn{background:var(--cyan);border:none;color:#08201D;font-weight:700;border-radius:7px;padding:9px 15px;font-size:13px;flex-shrink:0;align-self:center;}

/* MEMBERS */
.members{width:220px;flex-shrink:0;border-left:1px solid var(--line);background:var(--panel);overflow-y:auto;padding:16px 12px;}
.members .group-label{padding-left:2px;}
.member-row{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:7px;position:relative;cursor:pointer;}
.member-row:hover{background:var(--panel-2);}
.member-row img{width:30px;height:30px;border-radius:50%;object-fit:cover;}
.member-row .mn{font-size:13px;font-weight:500;}
.member-row .msub{font-size:11px;color:var(--text-faint);display:flex;align-items:center;gap:4px;}

/* CONTEXT MENU (right click on a user) */
.context-menu{
  position:fixed;z-index:1200;background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:8px;width:max-content;min-width:244px;max-width:min(340px,calc(100vw - 16px));box-shadow:0 12px 32px rgba(0,0,0,0.5);
  font-size:14px;
}
.cm-header{font-weight:700;font-size:15px;padding:6px 10px 8px;margin-bottom:4px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cm-volume{margin:2px 10px 8px;color:var(--text-dim);}
.cm-volume .cm-vol-label{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:13.5px;}
.cm-vol-icon svg{width:17px;height:17px;}
.cm-vol-icon{display:flex;color:var(--text-faint);flex-shrink:0;}
.cm-volume b{margin-left:auto;color:var(--cyan);font-weight:700;}
.cm-vol-slider{width:100%;accent-color:var(--cyan);}
.cm-divider{height:1px;background:var(--line);margin:6px 6px;}
.cm-item{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:none;border:none;color:var(--text);padding:9px 10px;border-radius:8px;font-size:14px;line-height:1.25;}
.cm-item:hover:not(:disabled){background:var(--panel);color:var(--amber);}
.cm-item:disabled{opacity:0.5;cursor:default;}
.cm-item.danger:hover:not(:disabled){background:rgba(229,96,90,0.14);color:var(--red);}
.cm-item.danger:hover:not(:disabled) .cm-icon{color:var(--red);}

/* ---------- MENTION/UNREAD BADGE (the "@" shown next to a channel you
   were pinged in) — a perfect circle, same size regardless of content ---- */
.unread-badge{
  min-width:16px;height:16px;line-height:16px;border-radius:50%;background:var(--amber);color:#1a1200;
  font-size:10px;font-weight:800;text-align:center;display:inline-block;margin-left:auto;flex-shrink:0;padding:0 1px;
}
.cm-icon{display:flex;width:18px;flex-shrink:0;color:var(--text-faint);}
.cm-icon svg{width:18px;height:18px;}
.cm-item:hover:not(:disabled) .cm-icon{color:var(--amber);}

/* TOASTS */
#toastLayer{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;}
.toast{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:8px;padding:11px 15px;font-size:13px;min-width:220px;max-width:380px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,0.4);animation:toastin 0.25s ease;pointer-events:auto;}
.toast.toast-out{animation:toastout 0.22s ease forwards;}
@keyframes toastin{from{opacity:0;transform:translateY(-18px);}to{opacity:1;transform:translateY(0);}}
@keyframes toastout{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-18px);}}
.toast b{color:var(--amber);}

.friend-requests-panel{position:fixed;bottom:18px;right:0;width:220px;z-index:998;display:flex;flex-direction:column-reverse;gap:8px;padding:0 12px;box-sizing:border-box;}
.frp-card{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 10px;box-shadow:0 10px 28px rgba(0,0,0,0.4);animation:toastin 0.2s ease;}
.frp-card img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.frp-info{min-width:0;flex:1;}
.frp-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.frp-sub{font-size:11px;color:var(--text-faint);}
.frp-actions{display:flex;gap:5px;flex-shrink:0;}
.frp-btn{width:23px;height:23px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);color:var(--text-dim);}
.frp-btn.accept:hover{border-color:var(--cyan-dim);color:var(--cyan);background:rgba(79,209,197,0.12);}
.frp-btn.decline:hover{border-color:var(--red);color:var(--red);background:rgba(229,96,90,0.12);}
@keyframes shakepoke{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* SUPPORT MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(6,7,10,0.7);align-items:center;justify-content:center;z-index:1000;}
.modal-overlay.active{display:flex;}
.modal-card{width:360px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;}
.modal-card h3{font-family:var(--font-display);margin:0 0 10px;font-size:16px;}
.modal-card p{font-size:13px;color:var(--text-dim);line-height:1.6;margin:0 0 8px;}
.modal-card .fa-note{
  direction:rtl;text-align:right;background:var(--panel-2);border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;font-size:14px;color:var(--text);margin:14px 0;line-height:2;
  font-family:'Vazirmatn',var(--font-body);
}
.modal-card .support-link{display:block;text-align:center;background:var(--amber);color:#2b1c00;font-weight:700;border-radius:8px;padding:11px;margin-top:14px;text-decoration:none;font-size:13px;}
.modal-card .close-btn{
  display:block;width:100%;margin-top:10px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--text-dim);font-size:13px;font-weight:500;padding:11px;border-radius:8px;
}
.modal-card .close-btn:hover{border-color:var(--line);color:var(--text);background:var(--panel);}
input[type=file]{display:none;}

/* ===== Settings modal ===== */
.settings-card{width:640px;max-width:92vw;padding:0;overflow:hidden;}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);}
.settings-header h2{margin:0;font-family:var(--font-display);font-size:16px;font-weight:700;}
.settings-close{width:26px;height:26px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-faint);font-size:13px;}
.settings-close:hover{background:var(--panel-2);color:var(--text);}
.settings-layout{display:flex;min-height:420px;max-height:72vh;}
.settings-nav{width:170px;flex-shrink:0;background:var(--panel-2);border-right:1px solid var(--line);padding:16px 10px;}
.settings-nav-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text-dim);font-size:13px;font-weight:500;padding:10px 12px;border-radius:7px;margin-bottom:2px;}
.settings-nav-item:hover{background:var(--panel);color:var(--text);}
.settings-nav-item.active{background:var(--panel);color:var(--cyan);}
.settings-panels{flex:1;padding:24px 26px;overflow-y:auto;}

.profile-banner{
  position:relative;height:130px;margin:-24px -26px 0;
  background:linear-gradient(135deg, #1a2230, #2b3348 55%, #3a4560);
  background-size:cover;background-position:center;
}
.profile-banner-btn{
  position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(14,16,21,0.55);border:1px solid rgba(255,255,255,0.15);color:#fff;
}
.profile-banner-btn:hover{background:rgba(14,16,21,0.75);}
.profile-avatar-wrap{position:absolute;left:24px;bottom:-38px;}
.profile-avatar-lg{width:76px;height:76px;border-radius:50%;object-fit:cover;border:4px solid var(--panel);background:var(--panel-2);display:block;}
.profile-avatar-btn{
  position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:2px solid var(--panel);color:var(--text-dim);
}
.profile-avatar-btn:hover{color:var(--text);}
.profile-online-dot{
  position:absolute;left:1px;bottom:1px;width:13px;height:13px;border-radius:50%;
  background:var(--green);border:3px solid var(--panel);
}
.profile-field{margin-bottom:18px;}
.profile-banner + .profile-field{margin-top:48px;}
.profile-field textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--text);
  padding:10px 13px;font-size:13px;font-family:inherit;resize:vertical;min-height:56px;outline:none;
}
.profile-field textarea:focus{border-color:var(--cyan-dim);}
.char-counter{text-align:right;font-size:11px;color:var(--text-faint);margin-top:4px;}
.settings-panel{display:none;}
.settings-panel.active{display:block;}
.settings-panel h3{font-family:var(--font-display);margin:0 0 18px;font-size:16px;}
.settings-group{margin-bottom:22px;}
.settings-label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:8px;font-weight:500;}
.settings-hint{font-size:12px;color:var(--text-faint);margin:8px 0 0;line-height:1.5;}
.settings-select{
  width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--text);
  padding:10px 34px 10px 12px;font-size:13px;outline:none;cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B93A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.settings-select:focus{border-color:var(--cyan-dim);}

.segmented{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:3px;}
.segmented button{flex:1;background:none;border:none;color:var(--text-dim);font-size:12px;font-weight:600;padding:8px 10px;border-radius:6px;}
.segmented button.active{background:var(--cyan);color:var(--on-accent);}
.segmented.segmented-4 button{padding:8px 4px;font-size:12px;}
/* Matches .field's own bottom margin so a label → segmented → field
   stack reads with the same even rhythm as label → input → label → input. */
#channelTypeSegmented{margin-bottom:18px;}

.settings-toggle{position:relative;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text);padding:10px 0;cursor:pointer;}
.toggle-input{position:absolute;opacity:0;width:0;height:0;}
.toggle-switch{
  position:relative;flex-shrink:0;width:38px;height:22px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--line);transition:background 0.15s ease, border-color 0.15s ease;
}
.toggle-switch::after{
  content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--text-faint);transition:transform 0.15s ease, background 0.15s ease;
}
.toggle-input:checked + .toggle-switch{background:var(--cyan);border-color:var(--cyan-dim);}
.toggle-input:checked + .toggle-switch::after{transform:translateX(16px);background:#04262b;}
.toggle-input:focus-visible + .toggle-switch{outline:2px solid var(--cyan-dim);outline-offset:2px;}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;
  background:var(--panel-2);border:1px solid var(--line);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;margin-top:-5px;
  background:var(--cyan);border:2px solid var(--panel);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.4);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;border:2px solid var(--panel);
  background:var(--cyan);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.4);
}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--panel-2);border:none;}
input[type=range]:focus-visible{outline:2px solid var(--cyan-dim);outline-offset:2px;}

.mic-meter{position:relative;height:10px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;margin-bottom:10px;}
.mic-meter-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--cyan);border-radius:5px;transition:width 60ms linear;}
.mic-meter-threshold{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--amber);left:30%;}

.ptt-key-row{display:flex;align-items:center;gap:10px;}
.ptt-key-badge{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--cyan);font-family:var(--font-mono,monospace);}
.ptt-key-badge.listening{color:var(--amber);border-color:var(--amber);}

.create-voice-result{display:none;}
.create-voice-result.active{display:block;}
#createVoiceForm.hidden{display:none;}
.password-display{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:12px 0 4px;
}
.password-display span{font-family:var(--font-mono,monospace);font-size:22px;font-weight:700;letter-spacing:6px;color:var(--cyan);}
.copy-btn{background:var(--panel);border:1px solid var(--line);color:var(--text-dim);font-size:12px;font-weight:600;padding:8px 14px;border-radius:7px;flex-shrink:0;}
.copy-btn:hover{border-color:var(--cyan-dim);color:var(--text);}
.copy-btn.copied{border-color:var(--cyan-dim);color:var(--cyan);}

@media (max-width: 900px){
  .friend-requests-panel{width:260px;right:18px;}
}

/* ---------- BETA TAG ---------- */
.beta-tag{
  font-family:var(--font-body);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.5px;color:var(--ink);background:var(--amber);border-radius:5px;
  padding:2px 6px;line-height:1.4;
}

/* ---------- SERVER RAIL (Discord-style server list) ---------- */
/* Global and every custom server use the exact same tile treatment
   (size, shape, states) so the rail reads as one consistent list —
   Global is just the first, permanent entry in it, not a special case. */
.server-rail{
  width:66px;flex-shrink:0;background:var(--ink);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;overflow-y:auto;
}
.server-rail-btn{
  width:46px;height:46px;border-radius:16px;flex-shrink:0;background:var(--panel-2);
  border:none;color:var(--text-dim);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:0.2px;
  cursor:pointer;transition:border-radius 0.15s ease,background 0.15s ease,color 0.15s ease;position:relative;
  overflow:hidden;
}
.server-rail-btn:hover{border-radius:14px;background:var(--cyan-dim);color:#fff;}
.server-rail-btn.active{border-radius:14px;background:var(--cyan);color:#08201D;}
/* Same 8px rhythm as every other gap in the rail, so the divider between
   Global and custom servers doesn't read as a bigger or smaller step. */
.server-rail-sep{width:32px;height:2px;background:var(--line);border-radius:1px;flex-shrink:0;}
.server-rail-add{color:var(--cyan);font-size:20px;font-weight:400;}
.server-rail-add:hover{background:var(--green);color:#fff;}

/* ---------- CURRENT SERVER BAR ---------- */
/* Same type scale and vertical rhythm as .main-header (16px / 15px
   padding) so the two header strips sit at a matching weight. */
.current-server-bar{
  padding:15px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:8px;
}
.current-server-bar span{font-family:var(--font-display);font-weight:700;font-size:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- SERVER SETTINGS: shared layout helpers ---------- */
.settings-divider{height:1px;background:var(--line);border:none;margin:22px 0;}
.settings-subhead{
  font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:0.5px;margin:0 0 12px;
}
.settings-subhead.danger{color:var(--red);}
/* A secondary in-panel action (Save, + New channel) — same visual
   language as .enter-btn but not the full-width hero treatment, so it
   doesn't compete with the modal's one primary call to action. */
.btn-compact{width:auto !important;display:inline-block;padding:10px 20px;margin-top:16px;}
/* The invite link reuses .password-display's frame but needs URL-shaped
   type, not the 4-digit password's large letter-spaced digits. */
.invite-link-display span{
  font-family:var(--font-mono,monospace);font-size:12px;font-weight:600;letter-spacing:0;
  color:var(--cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- SERVER SETTINGS: channel management rows ---------- */
.ss-chan-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  background:var(--panel-2);margin-bottom:6px;}
.ss-chan-row .ss-chan-icon{color:var(--text-faint);flex-shrink:0;display:flex;width:16px;justify-content:center;}
.ss-chan-row .ss-chan-name{flex:1;font-size:13px;font-weight:500;color:var(--text);}
.ss-chan-row .ss-chan-sub{font-size:12px;color:var(--text-faint);}
.ss-chan-row .ss-chan-actions{display:flex;gap:4px;}
.ss-chan-row .ss-chan-actions button{
  width:26px;height:26px;border-radius:6px;background:none;border:none;color:var(--text-faint);
  display:flex;align-items:center;justify-content:center;
}
.ss-chan-row .ss-chan-actions button:hover{background:var(--line);color:var(--text);}
.ss-chan-row .ss-chan-actions .danger:hover{color:var(--red);}
.chan-limit{margin-left:auto;color:var(--text-faint);font-size:11px;font-weight:600;flex-shrink:0;}

/* ---------- ROLE EDITOR ---------- */
.role-swatches{display:flex;gap:8px;flex-wrap:wrap;}
.role-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;}
.role-swatch.selected{border-color:var(--text);}
.role-permissions{display:flex;flex-direction:column;gap:9px;max-height:220px;overflow-y:auto;padding:2px;}
.role-perm-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);}
.role-perm-row input{flex-shrink:0;}
.role-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.ss-role-row{display:flex;align-items:center;gap:10px;}
.ss-role-reorder{display:flex;flex-direction:column;gap:2px;flex-shrink:0;}
.ss-role-reorder button{
  width:18px;height:14px;background:none;border:none;color:var(--text-faint);display:flex;
  align-items:center;justify-content:center;border-radius:3px;padding:0;font-size:11px;line-height:1;
}
.ss-role-reorder button:hover:not(:disabled){background:var(--line);color:var(--text);}
.ss-role-reorder button:disabled{opacity:0.25;}

/* ---------- SERVER MEMBER LIST (sidebar, grouped by role) ---------- */
.member-group-label{
  font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:0.5px;
  text-transform:uppercase;color:var(--text-faint);padding:14px 8px 4px;display:flex;align-items:center;gap:6px;
}
.member-group-label .role-dot{width:7px;height:7px;}
.member-row.offline{opacity:0.45;}
.member-row .status-dot{
  width:8px;height:8px;border-radius:50%;background:var(--text-faint);flex-shrink:0;margin-left:auto;
}
.member-row .status-dot.online{background:var(--green);}
.member-row .status-dot.voice{background:var(--cyan);}

/* ---------- USER PROFILE POPOVER: role & moderation extensions ---------- */
.profile-roles{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0 0;align-items:center;}
.owner-tag{font-size:11px;font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:0.3px;}
.role-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--panel-2);color:var(--text-dim);}
.profile-section-label{
  font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:0.4px;text-transform:uppercase;
  color:var(--text-faint);margin:16px 0 8px;
}
.profile-role-picker{display:flex;flex-direction:column;gap:7px;}
.profile-mod-actions{display:flex;gap:6px;flex-wrap:wrap;}
.profile-mod-actions button{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);font-size:12px;font-weight:600;
  padding:6px 11px;border-radius:7px;
}
.profile-mod-actions button:hover{border-color:var(--cyan-dim);color:var(--text);}
.profile-mod-actions button.danger:hover{border-color:var(--red);color:var(--red);}
.profile-mod-actions button.on{border-color:var(--amber);color:var(--amber);}

/* ---------- SERVER SETTINGS: bans tab ---------- */
.ss-ban-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:var(--panel-2);margin-bottom:6px;}
.ss-ban-row img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.ss-ban-row .ss-chan-name{flex:1;}

/* ---------- FRIENDS NAV BUTTON (Discord-style, above DM list) ---------- */
.friends-nav-btn{
  width:100%;display:flex;align-items:center;gap:10px;background:var(--panel-2);border:none;
  color:var(--text-dim);font-size:13px;font-weight:600;padding:9px 10px;border-radius:7px;margin-bottom:10px;
}
.friends-nav-btn:hover{background:var(--line);color:var(--text);}
.friends-nav-icon{width:16px;height:16px;flex-shrink:0;display:flex;position:relative;}
.friends-nav-btn.has-badge .friends-nav-icon::after{
  content:'';position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--red);border:2px solid var(--panel-2);
}

/* ---------- STATUS DOTS + PICKER ---------- */
.status-dot-badge{width:10px;height:10px;border-radius:50%;background:var(--text-faint);border:2px solid var(--panel);flex-shrink:0;display:inline-block;}
.status-dot-badge.online{background:var(--green);}
.status-dot-badge.idle{background:var(--amber);}
.user-bar-avatar-wrap{position:relative;flex-shrink:0;cursor:pointer;}
.user-bar-avatar-wrap .status-dot-badge{position:absolute;right:-2px;bottom:-2px;border-color:var(--panel);}
.status-picker{
  display:none;position:absolute;bottom:64px;left:10px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,0.45);z-index:60;min-width:150px;
}
.status-picker.active{display:block;}
.status-picker button{
  width:100%;display:flex;align-items:center;gap:9px;background:none;border:none;color:var(--text-dim);
  font-size:13px;font-weight:500;padding:8px 9px;border-radius:7px;text-align:left;
}
.status-picker button:hover{background:var(--panel);color:var(--text);}
.status-dot.idle{background:var(--amber);}

/* ---------- DRAG & DROP UPLOAD ---------- */
.messages{position:relative;}
.drop-overlay{
  display:none;position:absolute;inset:8px;z-index:20;align-items:center;justify-content:center;
  background:rgba(79,209,197,0.08);border:2px dashed var(--cyan-dim);border-radius:12px;
  color:var(--cyan);font-size:14px;font-weight:700;pointer-events:none;
}
.messages.drag-over .drop-overlay{display:flex;}

/* ---------- MOBILE: drawer toggles (hidden on desktop) ---------- */
.mobile-icon-btn{
  display:none;width:32px;height:32px;border-radius:8px;flex-shrink:0;background:none;border:none;
  color:var(--text-dim);align-items:center;justify-content:center;padding:0;
}
.mobile-icon-btn:hover{background:var(--panel-2);color:var(--text);}
.mobile-members-btn{margin-left:auto;}
.mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(6,7,10,0.6);z-index:140;}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  #app{position:relative;overflow:hidden;}
  .mobile-icon-btn{display:flex;}
  .main-header{gap:8px;}
  .main-header .topic{display:none;}

  .server-rail,.sidebar{
    position:fixed;top:0;bottom:0;z-index:150;transition:transform 0.22s ease;
  }
  .server-rail{left:0;transform:translateX(-100%);}
  .sidebar{left:66px;width:min(78vw,300px);transform:translateX(-120%);box-shadow:10px 0 30px rgba(0,0,0,0.45);}
  #app.sidebar-open .server-rail,#app.sidebar-open .sidebar{transform:translateX(0);}

  .members{
    position:fixed;top:0;bottom:0;right:0;width:min(78vw,280px);z-index:150;
    transform:translateX(120%);transition:transform 0.22s ease;box-shadow:-10px 0 30px rgba(0,0,0,0.45);
  }
  #app.members-open .members{transform:translateX(0);}

  #app.sidebar-open .mobile-backdrop,#app.members-open .mobile-backdrop{display:block;}

  .main{width:100%;}
  .messages{padding:14px;}
  .composer-wrap{padding:10px 12px 14px;}
  .msg img.avatar{width:32px;height:32px;}

  .settings-layout{flex-direction:column;max-height:80vh;}
  .settings-nav{width:100%;display:flex;overflow-x:auto;padding:10px;gap:4px;border-right:none;border-bottom:1px solid var(--line);}
  .settings-nav-item{white-space:nowrap;margin-bottom:0;}
  .settings-card{width:94vw;}

  .user-profile-popover{width:min(88vw,280px);}
  .modal-card{width:92vw;}
}
@media (max-width: 480px){
  .login-card{padding:22px;}
  .messages{padding:10px;}
  .main-header{padding:12px 14px;}
  .composer textarea{font-size:16px;} /* avoids iOS auto-zoom on focus */
}

/* ---------- LEVEL / XP ---------- */
.level-box{background:var(--panel-2);border-radius:8px;padding:10px 12px;}
.level-box-top{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--text-dim);margin-bottom:6px;}
.level-bar{height:6px;background:var(--panel);border-radius:4px;overflow:hidden;}
.level-bar-fill{height:100%;background:linear-gradient(90deg,var(--cyan-dim),var(--cyan));border-radius:4px;transition:width 0.3s ease;}
.level-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:9px;font-size:11px;color:var(--text-faint);}
.level-stats span{display:flex;align-items:center;gap:4px;}

/* ---------- PROFILE CUSTOMIZATION: gradient presets ---------- */
.gradient-swatches{display:flex;gap:8px;flex-wrap:wrap;}
.gradient-swatch{width:38px;height:26px;border-radius:7px;border:2px solid transparent;cursor:pointer;padding:0;}
.gradient-swatch.selected{border-color:var(--text);}
.gradient-swatch.none-swatch{background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-faint);}

/* ---------- ACHIEVEMENTS ---------- */
.profile-achievements{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.achievement-chip{display:flex;align-items:center;gap:5px;background:var(--panel-2);border-radius:8px;padding:4px 9px;font-size:11px;font-weight:600;color:var(--amber);}

/* ---------- MUTUAL SERVERS ---------- */
.profile-mutual-servers{margin-top:10px;}
.profile-mutual-servers .psect-label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:6px;}
.mutual-chip{display:inline-block;background:var(--panel-2);border-radius:8px;padding:4px 9px;font-size:11.5px;font-weight:600;color:var(--text-dim);margin:0 5px 5px 0;}

/* ---- name#tag (Discord-style discriminator) ---- */
.name-tag{color:var(--text-faint);font-weight:400;font-size:.82em;margin-left:3px;letter-spacing:.2px;}

/* ---- branded link-preview cards ---- */
.link-preview.brand{--brand:#8B93A7;max-width:320px;min-width:180px;border:1px solid color-mix(in srgb, var(--brand) 45%, transparent);border-left:4px solid var(--brand);background:color-mix(in srgb, var(--brand) 10%, var(--panel-2));cursor:pointer;}
.link-preview.brand:hover{background:color-mix(in srgb, var(--brand) 16%, var(--panel-2));}
.link-preview.brand .lp-site{display:flex;align-items:center;gap:7px;padding:7px 10px;font-size:12px;font-weight:700;color:var(--brand);}
.link-preview.brand .lp-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none;}
.link-preview.brand .lp-author{font-weight:500;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.link-preview.brand .lp-thumb{display:block;width:100%;max-height:150px;object-fit:cover;}
.link-preview.brand .lp-title{display:block;padding:0 10px;font-size:13px;font-weight:600;color:var(--text);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.link-preview.brand .lp-title:not(:empty){padding:7px 10px 9px;}

/* ---- Diz music bot ---- */

.voice-member-row.bot-row{cursor:default;}
.voice-member-row.bot-row .bot-note{font-size:11px;}
.music-bar{display:none;flex-direction:column;gap:8px;padding:9px 12px;margin:0 8px 8px;border-radius:10px;border:1px solid color-mix(in srgb, #8C7CF0 45%, transparent);background:color-mix(in srgb, #8C7CF0 12%, var(--panel-2));}
.music-bar.active{display:flex;}
.music-bar .mb-top{display:flex;align-items:center;gap:8px;min-width:0;}
.music-bar .mb-note{font-size:16px;}
.music-bar .mb-info{min-width:0;flex:1;}
.music-bar .mb-title{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.music-bar .mb-sub{font-size:11px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.music-bar .mb-controls{display:flex;align-items:center;gap:6px;}
.music-bar .mb-controls button{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;font-size:13px;line-height:1;}
.music-bar .mb-controls button:hover{background:color-mix(in srgb, #8C7CF0 25%, var(--panel-2));}
.music-bar .mb-controls button.on{background:#8C7CF0;color:#fff;border-color:#8C7CF0;}
.music-bar .mb-controls input[type=range]{flex:1;min-width:50px;accent-color:#8C7CF0;}

/* ---- BOT badge: vertically centred on the name's text line, same height wherever it appears ---- */
.bot-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:15px;padding:0 5px;margin-left:6px;border-radius:4px;
  background:#8C7CF0;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.5px;line-height:1;text-transform:uppercase;vertical-align:baseline;position:relative;top:-1px;}
.msg-head .name .bot-badge{top:-1.5px;}
.member-row.bot-member{cursor:default;}
.member-row.bot-member:hover{background:transparent;}
.member-row.bot-member img{background:#050a24;}
/* player bar: real icons, centred in square buttons */
.music-bar .mb-note{display:inline-flex;color:#8da2ff;}
.music-bar .mb-controls button{display:inline-flex;align-items:center;justify-content:center;padding:0;}
.music-bar .mb-vol{display:inline-flex;color:var(--text-dim);margin-left:2px;}
.voice-member-row.bot-row img{background:#050a24;}
.voice-member-row.bot-row .bot-note{display:inline-flex;color:#8da2ff;}
.link-preview.brand .lp-site-name{display:inline-flex;align-items:center;gap:6px;}

/* ---- install-app button (same purple as the music player box) ---- */
.install-app-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 16px);margin:10px 8px 4px;padding:0 12px;height:38px;
  border-radius:10px;cursor:pointer;white-space:nowrap;line-height:1;
  font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.2px;color:#fff;
  border:1px solid color-mix(in srgb, #8C7CF0 60%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb, #8C7CF0 42%, var(--panel-2)), color-mix(in srgb, #8C7CF0 20%, var(--panel-2)));
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 14px rgba(140,124,240,0.18);
  transition:background .15s, box-shadow .15s, transform .1s;}
.install-app-btn:hover{background:linear-gradient(135deg, color-mix(in srgb, #8C7CF0 58%, var(--panel-2)), color-mix(in srgb, #8C7CF0 32%, var(--panel-2)));box-shadow:0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 18px rgba(140,124,240,0.28);}
.install-app-btn:active{transform:translateY(1px);}
.install-app-btn[hidden]{display:none;}
.install-app-btn .iab-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:#e4e0ff;flex:none;}
.install-app-btn .iab-icon svg{width:16px;height:16px;display:block;}
.install-app-btn span:last-child{display:inline-flex;align-items:center;}

.msg-head .name.bot-name,.member-row.bot-member .mn{color:#8C7CF0;}
.voice-member-row.bot-row>span:first-of-type{color:#8C7CF0;}

/* GROUP DMs + CALLS */
.dm-actions{margin-left:auto;display:flex;gap:6px;align-items:center;}
.dm-act-btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;white-space:nowrap;}
.dm-act-btn:hover{border-color:var(--cyan-dim);color:var(--cyan);}
.dm-act-btn.in-call{border-color:var(--red);color:var(--red);}
.group-avatar{display:inline-flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);font-size:10px;font-weight:700;box-sizing:border-box;}
.dm-group-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;}
.call-banner{display:none;align-items:center;gap:8px;padding:7px 22px;background:rgba(79,209,197,0.1);border-bottom:1px solid var(--line);color:var(--cyan);font-size:12.5px;flex-shrink:0;}
.call-banner.active{display:flex;}
.call-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:calpulse 1.4s ease-in-out infinite;}
@keyframes calpulse{50%{opacity:.35}}
.msg.msg-system{display:block;text-align:center;padding:6px 12px;}
.msg-system-text{display:inline-block;color:var(--text-faint);font-size:12px;}
.call-panel{position:fixed;top:16px;right:16px;width:300px;z-index:1100;display:flex;flex-direction:column;gap:8px;}
.call-card{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--cyan-dim);border-radius:12px;padding:10px 12px;box-shadow:0 12px 30px rgba(0,0,0,0.5);animation:toastin 0.2s ease;}
.call-card img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.call-info{min-width:0;flex:1;}
.call-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.call-sub{font-size:11.5px;color:var(--text-faint);}
.call-btn{width:34px;height:34px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.call-btn.accept{background:#3BA55D;} .call-btn.decline{background:var(--red);}
.gm-card{width:400px;max-height:86vh;overflow-y:auto;}
.gm-hint{color:var(--text-dim);font-size:12.5px;margin:0 0 12px;}
.gm-list{max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;margin:10px 0;}
.gm-row{display:flex;align-items:center;gap:9px;padding:7px 10px;font-size:13px;color:var(--text);cursor:default;}
label.gm-row{cursor:pointer;} label.gm-row:hover{background:var(--panel-2);}
.gm-row .dm-avatar{width:24px;height:24px;}
.gm-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gm-label{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-faint);margin-top:14px;}
.gm-inline{display:flex;gap:8px;}.gm-inline input{flex:1;}
.gm-btn{background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);border-radius:6px;padding:4px 10px;font-size:12px;}
.gm-btn:hover{border-color:var(--cyan-dim);color:var(--cyan);} .gm-btn.danger:hover{border-color:var(--red);color:var(--red);}
.gm-badge{font-size:10px;color:var(--cyan);border:1px solid var(--cyan-dim);border-radius:4px;padding:1px 5px;}
.gm-err{color:var(--red);font-size:12.5px;min-height:16px;margin-top:6px;}
.modal-card .close-btn.danger-text{color:var(--red);}
@media (max-width:700px){.call-panel{width:auto;left:12px;right:12px;}.call-banner{padding:7px 14px;}.dm-act-btn span{display:none;}}

/* new message in a DM / group: the site's own accent (cyan) on its sidebar row until it's read */
.dm-row.has-unread{background:rgba(79,209,197,0.24);box-shadow:inset 3px 0 0 var(--cyan);color:var(--text);}
.dm-row.has-unread:hover{background:rgba(79,209,197,0.32);}

/* ---------- FORM CONTROLS: checkboxes, radios, secondary buttons (one look everywhere) ---------- */
input[type=checkbox]:not(.toggle-input),input[type=radio]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:18px;height:18px;margin:0;flex-shrink:0;cursor:pointer;position:relative;
  background:var(--panel-2);border:1.5px solid #3a4152;
  transition:background .12s,border-color .12s,box-shadow .12s;
}
input[type=checkbox]:not(.toggle-input){border-radius:5px;}
input[type=radio]{border-radius:50%;}
input[type=checkbox]:not(.toggle-input):hover,input[type=radio]:hover{border-color:var(--cyan-dim);}
input[type=checkbox]:not(.toggle-input):checked,input[type=radio]:checked{background-color:var(--cyan);border-color:var(--cyan);}
input[type=checkbox]:not(.toggle-input):checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2304262b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8'/%3E%3C/svg%3E");
  background-size:100% 100%;
}
input[type=radio]:checked{box-shadow:inset 0 0 0 4px var(--panel-2);}
input[type=checkbox]:not(.toggle-input):focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--cyan-dim);outline-offset:2px;}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed;}
label:has(> input[type=checkbox]:not(.toggle-input)),label:has(> input[type=radio]){cursor:pointer;user-select:none;}
.settings-label:has(> input[type=checkbox]){color:var(--text);font-size:13px;margin:8px 0;}

.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:8px;
  transition:border-color .12s,background .12s,color .12s;
}
.btn-secondary:hover{border-color:var(--cyan-dim);color:var(--cyan);background:rgba(79,209,197,0.08);}
.btn-secondary:active{transform:translateY(1px);}
.btn-secondary:disabled{opacity:.5;cursor:not-allowed;}
.btn-secondary:focus-visible{outline:2px solid var(--cyan-dim);outline-offset:2px;}
button:focus-visible{outline:2px solid var(--cyan-dim);outline-offset:2px;}

/* "@" mention badge: a true circle with the glyph dead centre (both axes), same height as the row's text */
.unread-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;min-width:17px;height:17px;padding:0;border-radius:50%;line-height:1;
  font-size:11px;font-weight:800;letter-spacing:0;text-align:center;
  margin-left:auto;flex-shrink:0;align-self:center;
}
.unread-badge{padding-bottom:1px;} /* '@' sits a hair low in Inter: nudge it up so it looks centred in the circle */

/* right-click menu: tall now that it carries moderation actions */
.context-menu{max-height:calc(100vh - 16px);overflow-y:auto;}
.cm-role{display:flex;align-items:center;gap:12px;}
.cm-role .cm-check{margin-left:auto;display:flex;color:var(--cyan);}
.cm-item.danger .cm-icon{color:#c4605b;}

/* MOVE MEMBERS (drag a person onto another voice channel) + menu section labels */
.voice-member-row[draggable=true]{cursor:grab;}
.voice-member-row.dragging{opacity:.45;}
.voice-block.drop-target{background:rgba(79,209,197,0.14);outline:1px dashed var(--cyan-dim);outline-offset:-1px;border-radius:8px;}
.cm-sub{padding:8px 10px 4px;font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);}
.cm-role{margin-top:0;}

/* ---- announcements ---- */
.ann-card{max-width:520px;width:calc(100vw - 32px);padding:0;overflow:hidden;max-height:calc(100vh - 32px);display:flex;flex-direction:column;}
.ann-popup-image{display:block;width:100%;max-height:300px;object-fit:cover;}
.ann-popup-body{padding:18px 20px 6px;overflow-y:auto;}
.ann-popup-body h2{margin:0 0 8px;font-size:20px;}
.ann-popup-text{white-space:pre-wrap;word-break:break-word;line-height:1.5;color:var(--text);}
.ann-popup-actions{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px 18px;flex-wrap:wrap;}
.ann-image-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0;}
.ann-preview{display:block;max-width:100%;max-height:200px;border-radius:8px;margin-top:8px;}
#annText{resize:vertical;width:100%;box-sizing:border-box;font-family:inherit;}
.settings-input{width:100%;box-sizing:border-box;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:10px 12px;font-size:13px;outline:none;}
.settings-input:focus{border-color:var(--cyan-dim);}

/* ---- Diz panel ---- */
.member-row.bot-member{cursor:pointer;}
.member-row.bot-member:hover{background:rgba(140,124,240,0.12);}
#musicBar .mb-top{cursor:pointer;}
.music-bar button:disabled,.diz-ctl:disabled{opacity:.35;cursor:not-allowed;}
/* announcement buttons: one size and scale in the pop-up and in settings */
.ann-btn{width:auto !important;height:38px;min-width:150px;margin:0 !important;padding:0 18px !important;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px !important;font-weight:600;line-height:1;border-radius:10px !important;white-space:nowrap;box-sizing:border-box;}
.ann-btn[hidden]{display:none !important;}
.ann-popup-text,.ann-popup-body h2{text-align:start;unicode-bidi:plaintext;}
#annTitle,#annText{unicode-bidi:plaintext;text-align:start;}

/* ---- Music Bot panel: one scale — 40px controls, 14px titles, 12px secondary text ---- */
.diz-card{width:calc(100vw - 32px);max-width:700px;max-height:calc(100vh - 32px);overflow-y:auto;padding:20px 22px;box-sizing:border-box;}
.diz-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.diz-head h2{margin:0;font-size:18px;font-weight:700;}
.diz-hint{margin:0 0 14px;font-size:12px;line-height:1.5;color:var(--muted,#8B93A7);}
.diz-inputs{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;}
.diz-input-row{display:flex;gap:10px;align-items:center;}
.diz-input-row .settings-input{flex:1;min-width:0;height:40px;padding:0 12px;font-size:14px;}
.diz-input-row .diz-ctl{height:40px;width:40px;}
.diz-input-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;}
.diz-btn{width:auto !important;height:40px;min-width:96px;margin:0 !important;padding:0 18px !important;display:inline-flex;align-items:center;justify-content:center;
  font-size:14px !important;font-weight:600;line-height:1;border-radius:8px !important;white-space:nowrap;box-sizing:border-box;}
.diz-status{margin:8px 0 0;min-height:16px;font-size:12px;line-height:1.4;color:var(--muted,#8B93A7);}
.diz-now{margin-top:14px;}
.diz-queue{margin-top:6px;}
.diz-empty{padding:16px;text-align:center;font-size:13px;color:var(--muted,#8B93A7);border:1px dashed var(--line);border-radius:10px;}
.diz-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;border-radius:10px;background:var(--panel-2);margin-bottom:6px;box-sizing:border-box;}
.diz-row.now{border:1px solid rgba(140,124,240,0.55);background:color-mix(in srgb, #8C7CF0 12%, var(--panel-2));}
.diz-note{color:#8C7CF0;display:inline-flex;align-items:center;justify-content:center;width:20px;flex:none;}
.diz-idx{width:20px;flex:none;text-align:center;color:var(--muted,#8B93A7);font-size:12px;font-weight:600;}
.diz-info{flex:1;min-width:0;}
.diz-title{font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.diz-sub{font-size:12px;line-height:1.3;margin-top:2px;color:var(--muted,#8B93A7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.diz-ctls{display:flex;gap:6px;flex:none;}
.diz-ctl{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:8px;width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.diz-ctl:hover:not(:disabled){border-color:var(--cyan-dim);color:var(--cyan);background:rgba(79,209,197,0.08);}
.diz-q-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#8B93A7);margin:14px 0 8px;}
.diz-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.diz-reach{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px;}
.diz-reach-row{display:flex;align-items:center;gap:8px;font-size:13px;height:20px;}
.diz-reach-name{flex:1;}
.diz-reach-note{font-size:12px;color:var(--muted,#8B93A7);}
.diz-dot{width:8px;height:8px;border-radius:50%;flex:none;background:#8B93A7;}
.diz-dot.ok{background:#4ade80;}.diz-dot.bad{background:#e5534b;}.diz-dot.wait{background:#e3b341;}

/* ---- reports ---- */
.rp-open-btn{position:relative;}
.rp-badge{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#e5534b;color:#fff;font-size:10px;font-weight:700;line-height:15px;text-align:center;box-sizing:border-box;}
.rp-badge[hidden]{display:none;}
.rp-card{width:calc(100vw - 32px);max-width:460px;max-height:calc(100vh - 32px);overflow-y:auto;padding:20px 22px;box-sizing:border-box;}
.rp-card .diz-hint{white-space:pre-wrap;word-break:break-word;}
.rp-reasons{display:flex;flex-direction:column;gap:4px;margin:6px 0 12px;}
.rp-reason{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;background:var(--panel-2);border:1px solid transparent;font-size:13px;cursor:pointer;}
.rp-reason:hover{border-color:var(--cyan-dim);}
#reportNote{width:100%;box-sizing:border-box;resize:vertical;font-family:inherit;}
.rp-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;}
.rp-btn{width:auto !important;height:40px;min-width:120px;margin:0 !important;padding:0 18px !important;display:inline-flex;align-items:center;justify-content:center;font-size:14px !important;font-weight:600;line-height:1;border-radius:8px !important;white-space:nowrap;box-sizing:border-box;}
.rp-inbox{width:calc(100vw - 32px);max-width:680px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;padding:20px 22px;box-sizing:border-box;}
.rp-tabs{display:flex;gap:6px;margin:6px 0 12px;}
.rp-tab{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:8px;height:34px;padding:0 14px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.rp-tab.active{background:rgba(79,209,197,0.12);border-color:var(--cyan-dim);color:var(--cyan);}
.rp-count{font-size:11px;background:#e5534b;color:#fff;border-radius:8px;padding:0 6px;line-height:16px;}
.rp-count:empty{display:none;}
.rp-list{overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:120px;}
.rp-item{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.rp-item-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.rp-chip{font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;background:rgba(255,255,255,0.07);}
.rp-chip.reason{background:rgba(229,83,75,0.18);color:#f0908a;}
.rp-chip.auto{background:rgba(140,124,240,0.2);color:#c9c2ff;}
.rp-ago{margin-left:auto;font-size:12px;color:var(--muted,#8B93A7);}
.rp-target{font-size:14px;font-weight:600;}
.rp-where{font-weight:400;font-size:12px;color:var(--muted,#8B93A7);}
.rp-quote{margin:8px 0 0;padding:8px 10px;border-left:3px solid var(--cyan-dim);background:rgba(0,0,0,0.18);border-radius:0 6px 6px 0;font-size:13px;white-space:pre-wrap;word-break:break-word;unicode-bidi:plaintext;text-align:start;}
.rp-note{margin-top:8px;font-size:12px;color:var(--muted,#8B93A7);white-space:pre-wrap;word-break:break-word;unicode-bidi:plaintext;text-align:start;}
.rp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap;}
.rp-by{font-size:12px;color:var(--muted,#8B93A7);}
.rp-btns{display:flex;gap:6px;}
.rp-sm{width:auto !important;height:32px;margin:0 !important;padding:0 14px !important;font-size:12.5px !important;font-weight:600;border-radius:8px !important;display:inline-flex;align-items:center;justify-content:center;}

/* ===== emoji popover, custom emojis, pins, threads, channel access ===== */
.cemoji{width:22px;height:22px;object-fit:contain;vertical-align:-5px;margin:0 1px;}
.reaction-pill .cemoji{width:16px;height:16px;vertical-align:-3px;}
.emoji-picker button[data-more]{display:flex;align-items:center;color:var(--text-dim);}
.emoji-pop{position:fixed;z-index:1060;width:min(320px,calc(100vw - 16px));background:var(--panel-2);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.5);overflow:hidden;}
.ep-tabs{display:flex;border-bottom:1px solid var(--line);background:var(--panel);}
.ep-tabs button{flex:1;background:none;border:none;color:var(--text-dim);padding:8px 2px;font-size:16px;border-bottom:2px solid transparent;}
.ep-tabs button[data-ep="custom"]{font-size:12px;font-weight:600;}
.ep-tabs button.active{border-bottom-color:var(--cyan);color:var(--cyan);}
.ep-grid{display:flex;flex-wrap:wrap;gap:2px;padding:8px;max-height:220px;overflow-y:auto;}
.ep-grid button{background:none;border:none;font-size:22px;line-height:1;padding:5px;border-radius:6px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;}
.ep-grid button:hover{background:var(--panel);}
.ep-grid .cemoji{width:28px;height:28px;margin:0;vertical-align:0;}
.ep-srv{width:100%;font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;padding:4px 2px 0;}
.ep-empty{padding:16px;font-size:12px;color:var(--text-faint);text-align:center;width:100%;line-height:1.6;}
.emo-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;}
.emo-preview{width:36px;height:36px;object-fit:contain;border-radius:6px;background:var(--panel);}
.emo-name{flex:1;min-width:140px;}
.emo-btn{white-space:nowrap;}
.emo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px;}
.emo-item{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px;}
.emo-item span{flex:1;overflow:hidden;text-overflow:ellipsis;}
.emo-img{width:28px;height:28px;object-fit:contain;}
.pin-tag{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--cyan);margin-left:6px;}
.msg-actions button.on{color:var(--cyan);}
.thread-chip{display:inline-flex;align-items:center;gap:6px;margin-top:4px;background:none;border:none;color:var(--cyan);font-size:12px;font-weight:600;padding:2px 0;}
.thread-chip:hover{text-decoration:underline;}
.msg.flash{background:rgba(79,209,197,.15);}
.pins-pop{position:fixed;z-index:1060;width:min(330px,calc(100vw - 16px));max-height:60vh;overflow-y:auto;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.5);padding:6px;}
.pins-title{font-size:12px;font-weight:700;color:var(--text-dim);padding:6px 8px;}
.pins-item{padding:8px;border-radius:8px;cursor:pointer;font-size:13px;word-break:break-word;}
.pins-item:hover{background:var(--panel);}
.pins-item b{font-size:12px;color:var(--cyan);}
.ch-roles{display:flex;flex-direction:column;gap:6px;max-height:140px;overflow-y:auto;margin-top:6px;}
.ch-role{display:flex;align-items:center;gap:8px;font-size:13px;}
.thread-panel{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);z-index:900;background:var(--panel);border-left:1px solid var(--line);display:none;flex-direction:column;box-shadow:-10px 0 30px rgba(0,0,0,.35);}
.thread-panel.open{display:flex;}
.thread-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);}
.thread-head h3{margin:0;font-size:15px;}
.thread-parent{padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);}
.thread-count{padding:8px 14px;font-size:12px;color:var(--text-faint);}
.thread-msgs{flex:1;overflow-y:auto;padding:4px 14px;}
.th-msg{display:flex;gap:10px;padding:6px 0;}
.th-msg .avatar{width:30px;height:30px;border-radius:50%;flex:none;}
.th-name{font-size:13px;font-weight:600;}
.th-text{font-size:14px;word-break:break-word;white-space:pre-wrap;}
.th-img{max-width:220px;max-height:200px;border-radius:8px;margin-top:4px;}
.thread-compose{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);}
.thread-compose textarea{flex:1;resize:none;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:8px;font:inherit;}

/* ===== proportion pass: new features ===== */
.emo-add{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin-top:14px;}
.emo-add .emo-btn{height:40px;box-sizing:border-box;width:auto;margin:0;padding:0 16px;font-size:13px;font-weight:600;border-radius:8px;flex:none;display:inline-flex;align-items:center;justify-content:center;}
.emo-add .emo-name{height:40px;flex:1;min-width:0;margin:0;}
.emo-add .emo-preview{flex:none;}
#emoStatus{min-height:18px;margin:8px 0 0;}
@media(max-width:560px){.emo-add{flex-wrap:wrap;}.emo-add .emo-name{flex:1 1 100%;order:3;}}
.emo-list{margin-top:14px;gap:10px;}
.emo-item{padding:8px 10px;gap:10px;font-size:13px;}
.emo-item .ss-delete{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;}
.ch-roles{gap:2px;margin-top:8px;max-height:150px;}
.field .ch-role,.ch-role{display:flex;align-items:center;gap:10px;margin:0;padding:7px 8px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text);line-height:18px;}
.ch-role:hover{background:var(--panel-2);}
.ch-role span{flex:1;}
#channelFormAccessField .settings-hint{margin-top:10px;}
.ep-tabs button{padding:9px 0;font-size:16px;line-height:20px;}
.ep-tabs button[data-ep="custom"]{flex:1.7;font-size:12px;font-weight:600;letter-spacing:.02em;}
.ep-grid{padding:10px;gap:2px;}
.pins-pop{padding:8px;}
.pins-title{padding:6px 10px 8px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;}
.pins-item{padding:9px 10px;font-size:13px;line-height:1.45;}
.pins-item b{font-size:12px;display:block;margin-bottom:2px;}
#pinsBtn{margin-left:10px;height:32px;box-sizing:border-box;padding:0 12px;font-size:13px;border-radius:8px;}
@media (max-width:700px){#pinsBtn{width:32px;padding:0;justify-content:center;margin-left:6px;}}
#pinsBtn svg{flex:none;}
#emojiBtn{flex:none;}
.thread-head{padding:14px 16px;}
.thread-head h3{font-size:15px;font-weight:700;}
.thread-parent{padding:12px 16px;}
.thread-count{padding:10px 16px 6px;font-size:12px;}
.thread-msgs{padding:4px 16px 8px;}
.th-msg{gap:10px;padding:8px 0;}
.th-name{font-size:13px;font-weight:600;line-height:1.3;}
.th-name .time{font-size:11px;font-weight:400;color:var(--text-faint);margin-left:4px;}
.th-text{font-size:14px;line-height:1.45;}
.thread-compose{padding:12px 16px;align-items:stretch;}
.thread-compose textarea{font-size:14px;padding:10px 12px;min-height:40px;box-sizing:border-box;}
.thread-compose .send-btn{height:auto;padding:0 18px;font-size:13px;}
.thread-chip{font-size:12px;margin-top:6px;}
.pin-tag{font-size:11px;margin-left:8px;}
.thread-compose{align-items:flex-end;padding-bottom:max(12px,env(safe-area-inset-bottom));}
.thread-compose .send-btn{height:40px;align-self:flex-end;border-radius:8px;padding:0 18px;flex:none;}

/* ===== thread panel: same type scale as the main chat ===== */
.thread-panel{width:min(420px,100vw);}
.thread-head{display:flex;align-items:center;gap:10px;padding:15px 22px;border-bottom:1px solid var(--line);flex-shrink:0;}
.thread-head .th-title{font-family:var(--font-display);font-size:16px;font-weight:700;}
.thread-head .th-sub{font-size:13px;color:var(--text-dim);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.thread-head .ub-icon-btn{margin-right:-6px;}
.thread-parent{padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel-2);max-height:34vh;overflow-y:auto;}
.thread-msgs{padding:8px 18px;}
.thread-panel .msg{padding:8px 4px;gap:12px;}
.thread-panel .msg img.avatar{width:38px;height:38px;}
.thread-panel .msg-text{font-size:14px;line-height:1.5;}
.thread-panel .msg-attach img{max-width:240px;max-height:200px;border-radius:8px;margin-top:4px;}
.thread-compose{padding:0 18px max(16px,env(safe-area-inset-bottom));border-top:none;display:block;}
.th-composer{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:8px;padding:8px 10px;}
.th-composer textarea{flex:1;min-width:0;resize:none;background:transparent;border:none;outline:none;color:var(--text);font:inherit;font-size:14px;line-height:20px;padding:6px 4px;max-height:120px;box-sizing:border-box;}
.th-composer .send-btn{height:34px;padding:0 16px;font-size:13px;border-radius:8px;flex:none;align-self:center;}
.thread-chip{font-size:12px;font-weight:600;padding:3px 0;margin-top:4px;}
@media(max-width:700px){
  .thread-head{padding:12px 14px;}
  .thread-parent,.thread-msgs{padding-left:14px;padding-right:14px;}
  .thread-panel .msg img.avatar{width:32px;height:32px;}
  .thread-compose{padding:0 14px max(12px,env(safe-area-inset-bottom));}
}
/* ===== report icons ===== */
.current-server-bar #currentServerName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.current-server-bar{gap:2px;}
.current-server-bar .ub-icon-btn{width:30px;height:30px;}
.msg-actions .act-report{border-left:1px solid var(--line);}
.msg-actions .act-report:hover{color:var(--red);background:rgba(229,96,90,0.12);}
.thread-head{padding-left:20px;padding-right:20px;}
.thread-parent,.thread-msgs{padding-left:20px;padding-right:20px;}
.thread-compose{padding:14px 20px max(18px,env(safe-area-inset-bottom));}
@media(max-width:700px){.thread-head,.thread-parent,.thread-msgs{padding-left:14px;padding-right:14px;}.thread-compose{padding:10px 12px max(14px,env(safe-area-inset-bottom));}}
/* reports button: red dot like the Friends button, no number */
.rp-badge{top:3px;right:3px;min-width:0;width:8px;height:8px;padding:0;border-radius:50%;background:var(--red);border:2px solid var(--panel);box-sizing:content-box;font-size:0;line-height:0;}

/* ===== reports inbox: people + moderation actions ===== */
.rp-person{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--cyan);font-weight:600;cursor:pointer;}
.rp-person:hover{text-decoration:underline;}
.rp-target .rp-person{font-size:14px;font-weight:700;}
.rp-mod{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;padding:8px 10px;background:rgba(0,0,0,0.16);border:1px solid var(--line);border-radius:8px;}
.rp-mod-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);}
.rp-mod-btns{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.rp-mutewrap{display:inline-flex;align-items:center;gap:0;}
.rp-sel{height:32px;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-right:none;border-radius:8px 0 0 8px;color:var(--text);font-size:12.5px;padding:0 8px;outline:none;}
.rp-mutewrap .rp-act{border-radius:0 8px 8px 0;}
.rp-act{height:32px;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;padding:0 12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:12.5px;font-weight:600;white-space:nowrap;}
.rp-act:hover:not(:disabled){border-color:var(--cyan-dim);color:var(--cyan);}
.rp-act.danger:hover:not(:disabled){border-color:var(--red);color:var(--red);background:rgba(229,96,90,0.1);}
.rp-act.armed{border-color:var(--red);color:var(--red);background:rgba(229,96,90,0.14);}
.rp-act:disabled{opacity:.5;}
@media(max-width:560px){.rp-mod{flex-direction:column;align-items:stretch;}.rp-mod-btns{justify-content:flex-start;}}

/* ===== Reports inbox: one type scale + one control size (matches the rest of the site) ===== */
/* scale: title 18 · item title 14 · body 13 · meta 12 · chips 11 · controls 34px / radius 8 */
.rp-inbox{max-width:700px;padding:22px 24px;gap:0;}
.rp-inbox .diz-head{margin-bottom:14px;}
.rp-inbox .diz-head h2{font-size:18px;line-height:24px;}
.rp-tabs{gap:8px;margin:0 0 14px;}
.rp-tab{height:34px;padding:0 14px;font-size:13px;font-weight:600;border-radius:8px;gap:8px;line-height:1;}
.rp-count{font-size:11px;font-weight:700;line-height:18px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;text-align:center;box-sizing:border-box;}
.rp-list{gap:10px;padding-right:2px;}
.rp-item{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:10px;}
.rp-item-head{display:flex;align-items:center;gap:6px;margin:0;}
.rp-chip{font-size:11px;font-weight:700;line-height:18px;height:20px;padding:0 8px;border-radius:6px;display:inline-flex;align-items:center;box-sizing:border-box;}
.rp-ago{margin-left:auto;font-size:12px;line-height:1;color:var(--text-faint);}
.rp-target{font-size:14px;font-weight:700;line-height:20px;margin:0;}
.rp-target .rp-person{font-size:14px;font-weight:700;}
.rp-where{font-size:12px;font-weight:400;color:var(--text-dim);}
.rp-quote,.rp-note{margin:0;font-size:13px;line-height:1.5;}
.rp-quote{padding:8px 12px;color:var(--text);}
.rp-note{color:var(--text-dim);}
.rp-mod{margin:0;padding:10px 12px;gap:10px 12px;border-radius:8px;}
.rp-mod-label{font-size:11px;font-weight:700;line-height:1;letter-spacing:.06em;}
.rp-mod-btns{gap:8px;}
.rp-act,.rp-sel,.rp-sm,.rp-btn{height:34px !important;box-sizing:border-box;font-size:13px !important;font-weight:600;line-height:1;border-radius:8px;}
.rp-act{padding:0 14px;gap:7px;}
.rp-act svg{flex:none;}
.rp-sel{padding:0 10px;border-radius:8px 0 0 8px;}
.rp-mutewrap .rp-act{border-radius:0 8px 8px 0;}
.rp-foot{margin:0;padding-top:10px;border-top:1px solid var(--line);gap:10px 12px;}
.rp-by{font-size:12px;line-height:1.4;color:var(--text-dim);}
.rp-by .rp-person{font-size:12px;}
.rp-btns{gap:8px;}
.rp-sm{padding:0 16px !important;min-width:96px;border-radius:8px !important;border:1px solid var(--line);}
.enter-btn.rp-sm{border-color:transparent;}
.rp-btn{border-radius:8px !important;padding:0 18px !important;}
.rp-card{padding:22px 24px;}
.rp-card .diz-hint{font-size:12px;line-height:1.5;margin-bottom:14px;}
.rp-reason{padding:0 12px;min-height:38px;font-size:13px;}
.rp-actions{gap:8px;margin-top:14px;}
@media(max-width:560px){
  .rp-inbox,.rp-card{padding:16px 14px;}
  .rp-item{padding:12px;}
  .rp-mod{flex-direction:column;align-items:stretch;}
  .rp-mod-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .rp-mod-btns .rp-act,.rp-mod-btns .rp-mutewrap{width:100%;}
  .rp-mutewrap{grid-column:1 / -1;display:flex;}
  .rp-mutewrap .rp-sel{flex:1;min-width:0;}
  .rp-mutewrap .rp-act{justify-content:center;flex:none;}
  .rp-act{justify-content:center;}
  .rp-foot{flex-direction:column;align-items:stretch;}
  .rp-btns{display:grid;grid-template-columns:1fr 1fr;}
  .rp-sm{min-width:0;}
}
@media(max-width:560px){
  .rp-mod-btns{display:flex;flex-wrap:wrap;gap:8px;}
  .rp-mod-btns > .rp-act{flex:1 1 calc(50% - 4px);width:auto;min-width:0;}
  .rp-mod-btns > .rp-mutewrap{flex:1 1 100%;width:100%;order:-1;}
  .rp-mutewrap .rp-sel{flex:1 1 auto;width:auto;min-width:0;}
  .rp-mutewrap .rp-act{flex:none;padding:0 18px;}
}
@media(max-width:560px){
  .rp-mod-btns > .rp-mutewrap{max-width:100%;min-width:0;box-sizing:border-box;}
  .rp-mutewrap .rp-sel{width:0;flex:1 1 0;}
}
@media(max-width:560px){.rp-mod-btns .rp-mutewrap .rp-act{width:auto;flex:none;}}

/* ===== link cards for any site + GIFs ===== */
.link-preview.brand.generic{--brand:#7C8AA5;}
.link-preview.brand.generic[hidden]{display:none;}
.link-preview.brand .lp-desc{display:-webkit-box;padding:0 10px;font-size:12px;line-height:1.4;color:var(--text-dim);overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.link-preview.brand .lp-desc:not(:empty){padding:0 10px 9px;margin-top:-4px;}
.link-preview.brand.generic .lp-thumb{max-height:160px;cursor:pointer;}
.link-preview.img.gif{max-width:min(320px,100%);border:none;background:none;}
.link-preview.img.gif img{border-radius:8px;max-height:260px;object-fit:contain;background:var(--panel-2);}

/* ===== search box in the chat header ===== */
.main-header{align-items:center;}
.chan-search{margin-left:auto;position:relative;display:flex;align-items:center;gap:8px;height:34px;box-sizing:border-box;width:210px;padding:0 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;transition:width .15s,border-color .15s;}
.chan-search.after-actions{margin-left:0;}
.chan-search:focus-within{width:290px;border-color:var(--cyan-dim);}
.chan-search .cs-icon{display:flex;color:var(--text-faint);flex:none;}
.chan-search input{flex:1;min-width:0;height:100%;background:transparent;border:none;outline:none;color:var(--text);font:inherit;font-size:13px;padding:0;}
.chan-search input::placeholder{color:var(--text-faint);}
.chan-search input::-webkit-search-cancel-button{display:none;}
.chan-search .cs-clear{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;border:none;background:none;color:var(--text-dim);padding:0;flex:none;}
.chan-search .cs-clear:hover{background:var(--panel);color:var(--text);}
.chan-search .cs-clear[hidden]{display:none;}
.search-pop{position:fixed;z-index:1070;max-height:min(60vh,460px);overflow-y:auto;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.5);padding:6px;box-sizing:border-box;}
.sr-count{padding:6px 10px 8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);}
.sr-empty{padding:18px 14px;text-align:center;font-size:13px;color:var(--text-dim);line-height:1.6;}
.sr-tip{font-size:12px;color:var(--text-faint);}
.sr-tip code{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:11px;margin:0 2px;white-space:nowrap;}
.sr-item{display:flex;gap:10px;width:100%;text-align:start;background:none;border:none;color:var(--text);padding:8px 10px;border-radius:8px;}
.sr-item:hover{background:var(--panel);}
.sr-av{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;margin-top:1px;}
.sr-main{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1;}
.sr-head{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--text-faint);}
.sr-head b{font-size:13px;color:var(--text);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sr-text{font-size:13px;line-height:1.45;color:var(--text-dim);word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.sr-text mark{background:rgba(79,209,197,.25);color:var(--cyan);border-radius:3px;padding:0 1px;}
@media(max-width:700px){
  .main-header{position:relative;}
  .chan-search{width:34px;padding:0;justify-content:center;background:none;border-color:transparent;}
  .chan-search:focus-within{width:34px;border-color:transparent;}
  .chan-search input,.chan-search .cs-clear{display:none;}
  .chan-search .cs-icon{cursor:pointer;width:34px;height:34px;align-items:center;justify-content:center;}
  .chan-search.open{position:absolute;left:0;right:0;top:0;bottom:0;width:auto;height:auto;z-index:20;margin:0;border-radius:0;background:var(--panel);border:none;border-bottom:1px solid var(--line);padding:0 14px;justify-content:flex-start;}
  .chan-search.open:focus-within{width:auto;}
  .chan-search.open input{display:block;font-size:16px;}
  .chan-search.open .cs-clear:not([hidden]){display:flex;}
  .chan-search.open .cs-icon{width:auto;height:auto;}
}
.chan-search{height:32px;}
.main-header{padding-top:13px;padding-bottom:13px;}
@media(max-width:480px){.main-header{padding-top:12px;padding-bottom:12px;}}
@media(max-width:700px){.chan-search .cs-icon{color:var(--text-dim);}}

/* =====================================================================
   UX PASS: splash, upload tray, drop zone, unread line, jump button,
   skeletons / empty states, quick switcher, shortcuts, micro-animations.
   Scale used everywhere: title 16-18 · item 14 · body 13 · meta 12 · chip 11 · controls 34px
   ===================================================================== */

/* ---- splash ---- */
#splash{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 20% -10%,#1a2230 0%,var(--ink) 55%);transition:opacity .28s ease,visibility .28s;}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none;}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:0;}
#splash .login-mark{margin-bottom:22px;}
.splash-bar{width:150px;height:3px;border-radius:3px;background:var(--line);overflow:hidden;}
.splash-bar i{display:block;height:100%;width:40%;border-radius:3px;background:var(--cyan);animation:splash-slide 1.1s ease-in-out infinite;}
@keyframes splash-slide{0%{transform:translateX(-110%);}100%{transform:translateX(280%);}}
.splash-msg{margin:14px 0 0;font-size:13px;color:var(--text-dim);}
.splash-retry{margin-top:14px;height:34px;padding:0 18px;border-radius:8px;border:1px solid var(--cyan-dim);background:none;color:var(--cyan);font-size:13px;font-weight:600;}
.splash-retry:hover{background:rgba(79,209,197,.1);}
.splash-retry[hidden]{display:none;}
#splash.err .login-mark .dot{background:var(--red);box-shadow:0 0 12px var(--red);}

/* ---- drop zone: covers the whole chat column ---- */
.main{position:relative;}
.messages.drag-over .drop-overlay{display:none;}
.main > .drop-overlay{display:none;position:absolute;inset:8px;z-index:60;align-items:center;justify-content:center;background:rgba(14,16,21,.78);backdrop-filter:blur(2px);border:2px dashed var(--cyan-dim);border-radius:14px;pointer-events:none;}
.main.drag-over > .drop-overlay{display:flex;animation:fade-in .14s ease;}
.do-box{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-dim);font-size:12px;text-align:center;padding:0 16px;}
.do-box b{color:var(--cyan);font-size:16px;font-weight:700;}
.do-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:rgba(79,209,197,.14);color:var(--cyan);margin-bottom:4px;}

/* ---- attachment tray (preview + progress) ---- */
.composer-wrap{position:relative;}
.attach-preview{gap:12px;padding:10px 12px;align-items:center;}
.attach-preview.active{display:flex;animation:tray-in .16s ease;}
.ap-thumb{position:relative;width:44px;height:44px;border-radius:8px;flex-shrink:0;overflow:hidden;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--text-dim);}
.ap-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ap-thumb small{font-size:9px;font-weight:700;letter-spacing:.4px;color:var(--text-faint);line-height:1;}
.ap-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
.ap-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ap-meta{font-size:12px;color:var(--text-dim);}
.attach-preview:not(.uploading) .ap-meta{color:var(--green);}
.ap-bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:3px;transition:opacity .2s ease;}
.ap-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--cyan);transition:width .12s linear;}
.attach-preview:not(.uploading) .ap-bar{opacity:0;height:0;margin:0;}
.ap-x{width:28px;height:28px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;color:var(--text-dim);}
.ap-x:hover{color:var(--red);border-color:var(--line);background:var(--panel);}
@keyframes tray-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---- jump to latest ---- */
.jump-bottom{position:absolute;right:22px;bottom:calc(100% + 8px);z-index:30;display:flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 11px;border-radius:17px;background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);font-size:12px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.4);animation:pop-in .16s ease;}
.jump-bottom[hidden]{display:none;}
.jump-bottom:hover{color:var(--text);border-color:var(--cyan-dim);}
.jump-bottom.has-new{background:var(--cyan);border-color:var(--cyan);color:#08201D;}
.jb-icon{display:flex;}
.attach-preview.active ~ .jump-bottom,.reply-preview.active ~ .jump-bottom{bottom:calc(100% + 8px);}

/* ---- unread line ---- */
.new-divider{display:flex;align-items:center;gap:10px;margin:10px 4px 6px;color:var(--red);font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;}
.new-divider::before,.new-divider::after{content:"";flex:1;height:1px;background:rgba(229,96,90,.45);}
.new-divider span{background:rgba(229,96,90,.14);border-radius:10px;padding:2px 9px;}

/* ---- loading skeleton / empty / error ---- */
.msg-skel{opacity:0;animation:fade-in .2s ease .18s forwards;} /* fast loads never show it */
.sk-row{display:flex;gap:12px;padding:8px 4px;}
.sk-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:var(--panel-2);}
.sk-col{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:3px;}
.sk-l{display:block;height:11px;border-radius:6px;background:var(--panel-2);}
.sk-l.sk-name{height:12px;background:var(--line);}
.sk-av,.sk-l{position:relative;overflow:hidden;}
.sk-av::after,.sk-l::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);animation:sk-shimmer 1.3s ease-in-out infinite;}
@keyframes sk-shimmer{to{transform:translateX(100%);}}
.msg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 24px;color:var(--text-dim);animation:fade-in .2s ease;}
.me-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px solid var(--line);color:var(--cyan);margin-bottom:14px;}
.msg-empty h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--text);}
.msg-empty p{margin:0;font-size:13px;line-height:1.5;max-width:300px;}
.msg-empty.err .me-icon{color:var(--amber);}
.me-retry{margin-top:16px;height:34px;padding:0 18px;border-radius:8px;border:1px solid var(--cyan-dim);background:none;color:var(--cyan);font-size:13px;font-weight:600;}
.me-retry:hover{background:rgba(79,209,197,.1);}
.hist-loading{position:sticky;top:0;height:0;z-index:12;display:flex;justify-content:center;overflow:visible;pointer-events:none;}
.hist-loading span{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;margin-top:2px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);font-size:12px;box-shadow:0 4px 14px rgba(0,0,0,.35);animation:fade-in .16s ease;}
.spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--cyan);animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- micro-animations (120-200ms) ---- */
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes pop-in{from{opacity:0;transform:translateY(6px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes msg-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes react-pop{0%{transform:scale(1);}45%{transform:scale(1.22);}100%{transform:scale(1);}}
@keyframes slide-in-r{from{transform:translateX(24px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes reply-flash{0%{background:rgba(79,209,197,.2);}100%{background:transparent;}}
.msg.msg-in{animation:msg-in .16s ease-out;}
.msg.reply-flash{animation:reply-flash .5s ease;}
.reaction-pill.pop{animation:react-pop .2s ease;}
.messages{touch-action:manipulation;}
.modal-overlay.active{animation:fade-in .14s ease;}
.modal-overlay.active > .modal-card,.modal-overlay.active > .settings-card{animation:pop-in .18s ease;}
.lightbox-overlay.active{animation:fade-in .14s ease;}
.lightbox-overlay.active img{animation:pop-in .18s ease;}
.thread-panel.open{animation:slide-in-r .18s ease;}
.emoji-pop,.mention-popover,.search-pop,.context-menu,.status-picker.active,.emoji-picker{animation:pop-in .12s ease;}
.toast{animation-duration:.2s;}
/* hover / press feedback on the main controls */
.send-btn,.plus-btn,.dm-act-btn,.msg-actions button,.reaction-pill,.thread-chip,.enter-btn,.mobile-icon-btn,.jump-bottom,.ap-x,.me-retry,.splash-retry{transition:background-color .14s ease,color .14s ease,border-color .14s ease,transform .12s ease,opacity .14s ease;}
.send-btn:active,.plus-btn:active,.dm-act-btn:active,.reaction-pill:active,.enter-btn:active,.jump-bottom:active{transform:scale(.96);}
.send-btn:hover:not(:disabled){filter:brightness(1.06);}
.msg{transition:background-color .12s ease;}

/* ---- quick switcher & shortcuts ---- */
.qs-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-start;justify-content:center;padding:min(14vh,120px) 16px 16px;background:rgba(6,7,10,.62);animation:fade-in .12s ease;}
.qs-overlay[hidden]{display:none;}
.qs-card{width:min(540px,100%);max-height:min(70vh,520px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 60px rgba(0,0,0,.6);overflow:hidden;animation:pop-in .16s ease;}
.qs-search{display:flex;align-items:center;gap:10px;padding:0 14px;height:50px;border-bottom:1px solid var(--line);flex-shrink:0;}
.qs-ico{display:flex;color:var(--text-faint);}
.qs-input{flex:1;min-width:0;height:100%;background:none;border:none;outline:none;color:var(--text);font-size:14px;}
.qs-input::placeholder{color:var(--text-faint);}
.qs-list{overflow-y:auto;padding:6px;flex:1;min-height:0;}
.qs-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:9px;cursor:pointer;}
.qs-item.active{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);}
.qs-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--panel-2);color:var(--text-dim);overflow:hidden;}
.qs-item.active .qs-av{background:var(--panel);color:var(--cyan);}
.qs-av img{width:100%;height:100%;object-fit:cover;display:block;}
.qs-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px;}
.qs-main b{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qs-main small{font-size:12px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qs-cur{font-size:11px;color:var(--text-faint);}
.qs-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px;color:var(--text-faint);font-size:13px;text-align:center;}
.qs-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:9px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--text-faint);flex-shrink:0;}
.qs-foot .qs-tip{margin-left:auto;}
.qs-card kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-right:4px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;color:var(--text-dim);font:600 11px/1 var(--font-body);}
.kb-card{width:min(480px,100%);}
.kb-head{display:flex;align-items:center;gap:10px;padding:0 10px 0 16px;height:50px;border-bottom:1px solid var(--line);flex-shrink:0;}
.kb-head h3{margin:0;flex:1;font-size:16px;font-weight:700;}
.kb-x{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;color:var(--text-dim);}
.kb-x:hover{background:var(--panel-2);border-color:var(--line);color:var(--text);}
.kb-list{overflow-y:auto;padding:6px 8px 10px;}
.kb-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:40px;padding:6px 8px;border-radius:8px;font-size:13px;color:var(--text-dim);}
.kb-row:hover{background:var(--panel-2);color:var(--text);}
.kb-keys{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.kb-keys kbd{margin-right:0;}

@media (max-width:700px){
  .jump-bottom{right:12px;}
  .qs-overlay{padding-top:10vh;}
  .qs-foot span:not(.qs-tip){display:none;}
  .qs-foot .qs-tip{margin-left:0;}
  .main > .drop-overlay{inset:4px;}
  .ap-thumb{width:40px;height:40px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .splash-bar i{width:100%;}
}

/* ---- text direction per line (Persian right-aligned, English/code left-aligned) ---- */
.msg-text .ln{min-height:1.5em;}
.msg-text .msg-link,.msg-text .mention,.msg-text img.cemoji{unicode-bidi:isolate;}
.msg-text .msg-link,.msg-text .mention{direction:ltr;}
.msg-reply-ref bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.msg-edit-input,#msgInput{unicode-bidi:plaintext;}

/* ---- date separators ---- */
.date-divider{display:flex;align-items:center;gap:12px;margin:14px 4px 6px;color:var(--text-faint);font-size:11px;font-weight:600;letter-spacing:.2px;user-select:none;}
.date-divider::before,.date-divider::after{content:"";flex:1;height:1px;background:var(--line);}
.date-divider span{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:2px 10px;color:var(--text-dim);}

/* ---- DM header buttons: same height / type as the search box ---- */
.dm-act-btn{height:32px;padding:0 12px;font-size:13px;gap:7px;border-radius:8px;box-sizing:border-box;line-height:1;}
.dm-act-btn svg{flex:none;}
.dm-act-btn.in-call:hover{background:rgba(229,96,90,.1);}
@media (max-width:700px){.dm-act-btn{width:34px;height:34px;padding:0;justify-content:center;}}
/* incoming call card */
.call-btn{transition:transform .12s ease,filter .14s ease;}
.call-btn:hover{filter:brightness(1.12);}
.call-btn:active{transform:scale(.92);}
.call-btn svg{display:block;}
.call-card{animation:toastin .2s ease,call-glow 1.3s ease-in-out .2s infinite;}
@keyframes call-glow{0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 0 rgba(79,209,197,0);}50%{box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 4px rgba(79,209,197,.22);}}

/* ---- splash loader: wavy outlined "DIZLY" in the site's cyan ---- */
.loader{
  width:fit-content;font-size:40px;line-height:1.5;font-family:system-ui,sans-serif;font-weight:bold;text-transform:uppercase;
  color:#0000;-webkit-text-stroke:1px var(--cyan);
  background:
    radial-gradient(1.13em at 50% 1.6em,var(--cyan) 99%,#0000 101%) calc(50% - 1.6em) 0/3.2em 100% text,
    radial-gradient(1.13em at 50% -0.8em,#0000 99%,var(--cyan) 101%) 50% .8em/3.2em 100% repeat-x text;
  animation:l9 2s linear infinite;
}
.loader:before{content:"Dizly";}
@keyframes l9{to{background-position:calc(50% + 1.6em) 0,calc(50% + 3.2em) .8em;}}
#splash.err .loader{animation-play-state:paused;-webkit-text-stroke-color:var(--red);background:none;}
.splash-msg{margin:10px 0 0;}
@media (max-width:420px){.loader{font-size:32px;}}

/* friends modal: Online / Offline groups */
.fr-group{padding:12px 6px 4px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-faint);}
.fr-group:first-child{padding-top:4px;}
.friend-row .fr-status{transition:color .15s;}

/* ---------- THEMES (Settings → Appearance). :root above is the default cyan/dark theme. ---------- */
html[data-theme="violet"]{--cyan:#9A8BFF;--cyan-dim:#7566d6;--ink:#0f0d18;--panel:#171424;--panel-2:#1f1b30;--line:#2b2640;--glow:#1d1836;--text:#e8e6f5;--text-dim:#8f8aa8;--text-faint:#5f5a78;--on-accent:#0e0a24;--scroll:#2b2640;}
html[data-theme="rose"]{--cyan:#F27AA5;--cyan-dim:#c4577f;--ink:#160d12;--panel:#20141b;--panel-2:#2a1b24;--line:#3a2630;--glow:#2b1622;--text:#f1e6ea;--text-dim:#a58a95;--text-faint:#74606a;--on-accent:#2a0714;--scroll:#3a2630;}
html[data-theme="emerald"]{--cyan:#3DDC84;--cyan-dim:#27a45f;--ink:#0a1410;--panel:#111d17;--panel-2:#17271f;--line:#223629;--glow:#12301f;--text:#e3f0e8;--text-dim:#86a692;--text-faint:#5a7366;--on-accent:#03210f;--scroll:#223629;}
html[data-theme="sunset"]{--cyan:#F2A65A;--cyan-dim:#c47c35;--ink:#15110b;--panel:#201a12;--panel-2:#2a2218;--line:#3a3020;--glow:#2e2112;--text:#f2ebe0;--text-dim:#a89a85;--text-faint:#76695a;--on-accent:#2b1700;--scroll:#3a3020;}
html[data-theme="ocean"]{--cyan:#5AA2F2;--cyan-dim:#3a78bd;--ink:#0a1220;--panel:#111a2c;--panel-2:#172338;--line:#22304a;--glow:#10294a;--text:#e3ebf5;--text-dim:#8a9cb8;--text-faint:#5b6b85;--on-accent:#04152b;--scroll:#22304a;}
html[data-theme="crimson"]{--cyan:#F0605A;--cyan-dim:#b8423d;--ink:#150c0c;--panel:#201313;--panel-2:#2a1a1a;--line:#3a2323;--glow:#321212;--text:#f3e6e5;--text-dim:#a88c8a;--text-faint:#755f5d;--on-accent:#2b0605;--scroll:#3a2323;}
html[data-theme="midnight"]{--cyan:#4FD1C5;--cyan-dim:#2C8A80;--ink:#000000;--panel:#0b0b0d;--panel-2:#121215;--line:#202025;--glow:#0e1a1a;--text:#ececf0;--text-dim:#8a8a96;--text-faint:#5a5a66;--on-accent:#04262b;--scroll:#202025;}
html[data-theme="light"]{--cyan:#0E9F94;--cyan-dim:#0a766e;--ink:#eef1f6;--panel:#ffffff;--panel-2:#f1f4f9;--line:#d8deea;--glow:#dfe8f3;--text:#1a2030;--text-dim:#5a647a;--text-faint:#8a93a6;--on-accent:#ffffff;--scroll:#d8deea;}
html[data-theme="light"]{color-scheme:light;--amber:#b86a12;--red:#d3433c;--green:#1f8a46;}
html[data-theme="light"] body{background:var(--ink);}
html[data-theme="light"] .toast,html[data-theme="light"] .modal-card,html[data-theme="light"] .login-card{box-shadow:0 8px 28px rgba(20,30,60,0.12);}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:8px;}
.theme-card{display:flex;flex-direction:column;gap:7px;padding:8px;border:1.5px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);cursor:pointer;text-align:left;font-size:12.5px;transition:border-color .15s,transform .12s;}
.theme-card:hover{transform:translateY(-1px);border-color:var(--text-faint);}
.theme-card.active{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset;}
.theme-prev{display:flex;height:44px;border-radius:7px;overflow:hidden;border:1px solid rgba(128,128,128,.25);}
.theme-prev i{flex:1;display:block;}
.theme-prev i:last-child{flex:0 0 34%;}
.theme-name{display:flex;align-items:center;justify-content:space-between;gap:6px;font-weight:600;}
.theme-name svg{color:var(--cyan);}
/* ---------- update toast (bottom centre) + install nudge ---------- */
.bar-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:1200;display:flex;align-items:center;gap:12px;max-width:min(520px,calc(100vw - 24px));padding:10px 12px 10px 16px;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45);font-size:13.5px;animation:bar-in .25s ease;}
.bar-toast.out{animation:bar-out .2s ease forwards;}
.bar-toast .bt-text{flex:1;min-width:0;line-height:1.35;}
.bar-toast .bt-text b{display:block;font-size:14px;}
.bar-toast .bt-text span{color:var(--text-dim);font-size:12.5px;}
.bar-toast button{height:34px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--text-dim);font-weight:600;font-size:13px;}
.bar-toast button.bt-go{background:var(--cyan);border-color:var(--cyan);color:var(--on-accent);}
.bar-toast button:hover{filter:brightness(1.1);}
@keyframes bar-in{from{opacity:0;transform:translate(-50%,14px);}to{opacity:1;transform:translate(-50%,0);}}
@keyframes bar-out{to{opacity:0;transform:translate(-50%,14px);}}
.bar-toast.stack2{bottom:84px;}
@media (max-width:640px){.bar-toast{bottom:14px;width:calc(100vw - 24px);}.bar-toast.stack2{bottom:78px;}}

/* ---------- captcha ---------- */
.captcha-row{display:flex;gap:10px;align-items:stretch;}
.captcha-input{flex:1;min-width:0;text-align:center;letter-spacing:4px;font-size:18px;font-weight:700;}
.captcha-img-btn{flex:none;padding:0;border:1px solid var(--line);border-radius:10px;background:#f4f1e8;overflow:hidden;line-height:0;cursor:pointer;position:relative;transition:transform .12s,border-color .15s;}
.captcha-img-btn:hover{border-color:var(--cyan);}
.captcha-img-btn:active{transform:scale(.98);}
.captcha-img-btn img{display:block;width:152px;height:52px;transition:opacity .15s;}
.captcha-field label .cap-en{color:var(--text-faint);font-weight:400;font-size:11.5px;margin-left:4px;}
.captcha-field label{direction:rtl;text-align:right;display:block;}
@media (max-width:380px){.captcha-img-btn img{width:128px;height:44px;}}

/* ---------- markdown + code blocks ---------- */
.msg-text b{font-weight:700;}
.msg-text .quote{border-left:3px solid var(--text-faint);padding-left:10px;color:var(--text-dim);}
.msg-text .quote[dir=rtl],.msg-text .quote:dir(rtl){border-left:0;border-right:3px solid var(--text-faint);padding-left:0;padding-right:10px;}
.msg-text code.ic{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--ink);border:1px solid var(--line);border-radius:5px;padding:1px 5px;direction:ltr;unicode-bidi:isolate;}
.codeblock{margin:5px 0;max-width:min(640px,100%);background:var(--ink);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-align:left;}
.cb-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 4px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);}
.cb-lang{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim);}
.cb-copy{height:24px;padding:0 10px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--text-dim);font-size:11.5px;font-weight:600;transition:background .12s,color .12s;}
.cb-copy:hover{background:var(--panel);color:var(--text);}
.cb-copy.ok{color:var(--green);border-color:var(--green);}
.codeblock pre{margin:0;padding:10px 12px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.8px;line-height:1.5;tab-size:2;}
.codeblock code{white-space:pre;color:var(--text);}
.tk-c{color:var(--text-faint);font-style:italic;} .tk-s{color:#7bd88f;} .tk-n{color:var(--amber);} .tk-k{color:#b4a7ff;font-weight:600;}
html[data-theme="light"] .tk-s{color:#1a7f37;} html[data-theme="light"] .tk-k{color:#6f42c1;}
.spoiler{background:var(--text-faint);color:transparent;border-radius:4px;padding:0 3px;cursor:pointer;transition:background .15s,color .15s;user-select:none;}
.spoiler *{color:transparent;}
.spoiler.revealed{background:rgba(128,128,128,.22);color:inherit;user-select:text;}
.spoiler.revealed *{color:inherit;}

/* ---------- voice messages ---------- */
.voice-btn{flex:none;}
.voice-btn:active,.voice-btn.rec{background:var(--red);border-color:var(--red);color:#fff;}
.composer{position:relative;}
.voice-rec{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 10px;background:var(--panel-2);border-radius:inherit;z-index:2;animation:fade-in .12s ease;}
.voice-rec[hidden]{display:none;}
.vr-trash{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text-dim);display:none;align-items:center;justify-content:center;flex:none;}
.vr-trash:hover{color:var(--red);border-color:var(--red);}
.voice-rec.locked .vr-trash{display:flex;}
.vr-dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex:none;animation:vr-pulse 1s ease-in-out infinite;}
@keyframes vr-pulse{50%{opacity:.25;transform:scale(.8);}}
.vr-time{font-variant-numeric:tabular-nums;font-weight:600;min-width:38px;}
.vr-bars{flex:1;min-width:0;height:26px;display:flex;align-items:center;gap:2px;overflow:hidden;}
.vr-bars i{flex:1;max-width:5px;min-width:2px;background:var(--cyan);border-radius:2px;height:12%;transition:height .08s linear;}
.vr-hint{color:var(--text-dim);font-size:12.5px;white-space:nowrap;}
.voice-rec.will-cancel .vr-hint{color:var(--red);font-weight:600;}
.voice-rec.will-cancel .vr-dot{background:var(--text-faint);animation:none;}
.vr-send{display:none;}
.voice-rec.locked .vr-send{display:inline-flex;}
.voice-rec.locked .vr-hint{display:none;}
@media (max-width:640px){.vr-hint{font-size:12px;}.vr-time{min-width:34px;}}
.vm{display:flex;align-items:center;gap:10px;width:300px;max-width:100%;padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;}
.vm-play{width:34px;height:34px;border-radius:50%;border:none;background:var(--cyan);color:var(--on-accent);display:flex;align-items:center;justify-content:center;flex:none;}
.vm-play:hover{filter:brightness(1.1);}
.vm-wave{flex:1;min-width:0;height:30px;display:flex;align-items:center;gap:2px;cursor:pointer;}
.vm-wave i{flex:1;min-width:2px;background:var(--text-faint);border-radius:2px;pointer-events:none;transition:background .1s;}
.vm-wave i.on{background:var(--cyan);}
.vm-time{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-dim);min-width:32px;text-align:right;}
.vm-speed{height:24px;min-width:38px;padding:0 6px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text-dim);font-size:11.5px;font-weight:700;}
.vm-speed:hover{color:var(--text);border-color:var(--text-faint);}

/* ===================== Explore · Diz Poll · Diz Together ===================== */
.server-rail-explore{color:var(--cyan);}
.server-rail-explore:hover{background:var(--cyan);color:var(--on-accent);}
.ss-check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);margin:2px 0 12px;cursor:pointer;}
.ss-check input{width:16px;height:16px;accent-color:var(--cyan);}
#ssDescInput{width:100%;box-sizing:border-box;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:9px 12px;font-size:13px;outline:none;resize:vertical;min-height:56px;}
#ssDescInput:focus{border-color:var(--cyan-dim);}
select.settings-input{height:38px;padding:0 10px;}

/* Explore */
.ex-card{width:calc(100vw - 32px);max-width:760px;height:min(680px,calc(100vh - 32px));display:flex;flex-direction:column;padding:20px 22px;box-sizing:border-box;}
.ex-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.ex-tools .settings-input{flex:1;min-width:180px;height:38px;}
.ex-sorts{display:flex;gap:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px;}
.ex-sorts button{border:0;background:transparent;color:var(--text-dim);font-size:12px;font-weight:600;padding:6px 11px;border-radius:7px;transition:background .15s,color .15s;}
.ex-sorts button:hover{color:var(--text);}
.ex-sorts button.on{background:var(--cyan);color:var(--on-accent);}
.ex-cats{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:thin;flex-shrink:0;}
.ex-cats button{flex:none;border:1px solid var(--line);background:var(--panel-2);color:var(--text-dim);font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;transition:border-color .15s,color .15s,background .15s;}
.ex-cats button:hover{color:var(--text);border-color:var(--cyan-dim);}
.ex-cats button.on{background:color-mix(in srgb,var(--cyan) 18%,transparent);border-color:var(--cyan);color:var(--cyan);}
.ex-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px;}
.ex-empty{color:var(--text-dim);font-size:13px;text-align:center;padding:48px 12px;}
.ex-item{display:flex;gap:12px;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .15s,transform .15s;}
.ex-item:hover{border-color:var(--cyan-dim);}
.ex-ico{flex:none;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 65% 48%),hsl(calc(var(--h) + 40) 70% 38%));}
.ex-main{flex:1;min-width:0;}
.ex-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ex-hot{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#F2A65A,#E5605A);padding:2px 7px 2px 5px;border-radius:999px;}
.ex-hot svg{fill:currentColor;stroke:none;}
.ex-desc{font-size:12.5px;color:var(--text-dim);margin:2px 0 6px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.ex-meta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:11.5px;color:var(--text-faint);}
.ex-meta span{display:inline-flex;align-items:center;gap:4px;}
.ex-tag{background:color-mix(in srgb,var(--cyan) 14%,transparent);color:var(--cyan);font-weight:600;padding:1px 7px;border-radius:5px;}
.ex-tag.game{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber);}
.ex-dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);display:inline-block;}
.ex-dot.on{background:var(--green);}
.ex-go{flex:none;height:34px;padding:0 16px;font-size:13px;}
@media (max-width:600px){.ex-item{flex-wrap:wrap}.ex-go{width:100%}.ex-card{padding:16px}}

/* Poll creator */
.poll-opts-edit{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
.poll-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:6px;}
.poll-row .settings-input{width:auto;min-width:170px;}
.poll-row .ss-check{margin:0;}

/* Poll card in chat */
.poll-card{margin-top:4px;max-width:440px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.poll-q{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;font-weight:700;line-height:1.4;}
.poll-q svg{flex:none;margin-top:3px;color:var(--amber);}
.poll-hint{font-size:11.5px;color:var(--text-faint);margin:2px 0 10px;}
.poll-opts{display:flex;flex-direction:column;gap:6px;}
.poll-opt{position:relative;display:flex;align-items:center;gap:8px;overflow:hidden;width:100%;min-height:38px;text-align:start;background:var(--panel);border:1px solid var(--line);border-radius:9px;color:var(--text);font-size:13.5px;padding:7px 10px;transition:border-color .15s,background .15s;}
.poll-opt:not(:disabled):hover{border-color:var(--cyan-dim);}
.poll-opt:disabled{cursor:default;}
.poll-opt .po-fill{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--cyan) 16%,transparent);transition:width .35s cubic-bezier(.2,.8,.2,1);z-index:0;}
.poll-opt.mine{border-color:var(--cyan);}
.poll-opt.mine .po-fill{background:color-mix(in srgb,var(--cyan) 28%,transparent);}
.poll-opt.lead{border-color:var(--amber);}
.poll-opt.lead .po-fill{background:color-mix(in srgb,var(--amber) 24%,transparent);}
.poll-opt>*{position:relative;z-index:1;}
.po-check{width:16px;flex:none;color:var(--cyan);display:flex;}
.po-text{flex:1;min-width:0;overflow-wrap:anywhere;}
.po-count{font-weight:700;font-size:13px;display:flex;align-items:baseline;gap:5px;}
.po-count small{font-weight:500;color:var(--text-dim);font-size:11px;min-width:30px;text-align:end;}
.poll-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;color:var(--text-faint);}
.poll-end{background:transparent;border:1px solid var(--line);border-radius:7px;color:var(--text-dim);font-size:11.5px;padding:3px 9px;}
.poll-end:hover{border-color:var(--red);color:var(--red);}

/* Diz Together floating player */
.tg-dock{position:fixed;right:16px;bottom:16px;z-index:60;width:420px;max-width:calc(100vw - 24px);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.45);overflow:hidden;animation:tg-in .2s ease-out;}
@keyframes tg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tg-dock.big{width:min(760px,calc(100vw - 24px));}
.tg-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px 7px 12px;background:var(--panel-2);font-size:12.5px;font-weight:600;cursor:default;}
.tg-title{display:flex;align-items:center;gap:7px;min-width:0;}
.tg-title span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tg-ic{color:var(--cyan);display:flex;}
.tg-btns{display:flex;gap:2px;}
.tg-btns button{width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--text-dim);display:flex;align-items:center;justify-content:center;}
.tg-btns button:hover{background:var(--line);color:var(--text);}
#tgStop:hover{background:var(--red);color:#fff;}
.tg-stage{position:relative;aspect-ratio:16/9;background:#000;}
.tg-stage iframe,.tg-stage video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;}
.tg-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;color:#cfd5e4;font-size:13px;background:#0a0c12;z-index:2;}
.tg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;font-size:11px;color:var(--text-faint);}
.tg-foot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tg-foot button{flex:none;background:var(--panel-2);border:1px solid var(--line);color:var(--text);border-radius:7px;font-size:11.5px;padding:3px 10px;}
.tg-foot button:hover{border-color:var(--cyan-dim);}
.tg-resume{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);z-index:3;background:var(--cyan);color:var(--on-accent);border:0;border-radius:999px;font-weight:700;font-size:13px;padding:10px 18px;box-shadow:0 6px 24px rgba(0,0,0,.5);}
.tg-dock.min .tg-stage,.tg-dock.min .tg-foot,.tg-dock.min .tg-resume{display:none;}
.tg-dock.min .tg-stage{display:block;height:0;aspect-ratio:auto;overflow:hidden;} /* stays mounted so the video keeps playing */
@media (max-width:700px){.tg-dock,.tg-dock.big{left:8px;right:8px;bottom:8px;width:auto;max-width:none;}}
@media (prefers-reduced-motion:reduce){.tg-dock{animation:none}.poll-opt .po-fill{transition:none}}
.ex-item .ex-go{width:auto;min-width:78px;margin:0;display:inline-flex;align-items:center;justify-content:center;flex:none;}
@media (max-width:600px){.ex-item .ex-go{width:100%}}

.accent-row{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:13px;color:var(--text-dim);}
.accent-row input[type=color]{width:42px;height:32px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);cursor:pointer;}
.accent-row .btn-secondary{height:32px;padding:0 12px;font-size:12px;}

.tg-prep{flex-direction:column;} .tg-prep>div{width:100%;max-width:320px;} .tg-prep-t{font-weight:600;margin-bottom:10px;overflow-wrap:anywhere;} .tg-bar{height:6px;background:#1c2030;border-radius:99px;overflow:hidden;} .tg-bar i{display:block;height:100%;background:var(--cyan);border-radius:99px;transition:width .4s;} .tg-prep small{display:block;margin-top:10px;color:#8b93a7;font-size:11.5px;}

/* Diz Log / Diz Guard */
.lg-head-btns{display:flex;gap:4px;align-items:center;}
.lg-list{gap:4px;}
.lg-row{display:flex;gap:10px;align-items:flex-start;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;}
.lg-ic{flex:none;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--cyan) 14%,transparent);color:var(--cyan);margin-top:1px;}
.lg-row.t-kick .lg-ic,.lg-row.t-ban .lg-ic,.lg-row.t-timeout .lg-ic,.lg-row.t-automod .lg-ic,.lg-row.t-msgdelete .lg-ic,.lg-row.t-purge .lg-ic{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red);}
.lg-row.t-warn .lg-ic,.lg-row.t-msgedit .lg-ic,.lg-row.t-vmute .lg-ic{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber);}
.lg-main{flex:1;min-width:0;}
.lg-text{font-size:13px;overflow-wrap:anywhere;}
.lg-detail{font-size:12px;color:var(--text-dim);margin-top:3px;padding-left:8px;border-left:2px solid var(--line);overflow-wrap:anywhere;}
.lg-time{flex:none;text-align:end;font-size:11px;color:var(--text-faint);display:flex;flex-direction:column;gap:1px;}
.lg-time b{color:var(--text-dim);font-weight:600;}
.lg-more{text-align:center;margin-top:8px;}
.lg-cfg{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;max-height:46vh;overflow:auto;}
.lg-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px 12px;}
.gd-sec{border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:12px 14px;margin-bottom:10px;}
.gd-sec .field{margin-top:8px;}
.gd-ta{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:9px 12px;font-size:13px;outline:none;resize:vertical;}
.gd-ta:focus{border-color:var(--cyan-dim);}
.gd-row{margin-top:8px;font-size:13px;color:var(--text-dim);line-height:2.3;}
.gd-num{display:inline-block;width:74px;height:30px;padding:0 8px;text-align:center;margin:0 4px;}
.gd-note{font-size:11.5px;color:var(--text-faint);margin:8px 0 0;}
.gd-lock{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:8px 12px;border-radius:9px;background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red);font-size:13px;}
.gd-lock .diz-btn{height:30px;padding:0 12px;font-size:12px;}
.lg-more [hidden],.lg-cfg[hidden],.gd-lock[hidden],#guardForm[hidden]{display:none !important;}

/* ---- unify sizes of the bot panels with the rest of the site (inputs 40px/14px, buttons 40px/14px) ---- */
#exploreModal .settings-input,#pollModal .settings-input,#togetherModal .settings-input,#logModal .settings-input,#guardModal .settings-input{height:40px;font-size:14px;padding:0 12px;font-family:inherit;}
#exploreModal .ex-tools .settings-input{height:40px;}
#guardModal .gd-ta{font-size:14px;font-family:inherit;line-height:1.5;}
#guardModal .settings-input.gd-num{width:76px;height:34px;font-size:14px;display:inline-block;}
.ex-item .diz-btn{height:36px;min-width:80px;font-size:13px;}
.ex-sorts button{font-size:12.5px;padding:7px 12px;}
.ex-cats button{font-size:12.5px;padding:6px 12px;}
#guardModal .diz-card{max-height:calc(100vh - 32px);overflow-y:auto;}
.gd-sec{padding:14px 16px;}
.gd-sec .ss-check{margin:0;font-size:14px;}
.gd-sec .ss-check b{font-weight:600;}
.gd-sec .field label{font-size:12px;}
.gd-row{font-size:13px;line-height:2.2;margin-top:6px;}
.gd-note{font-size:12px;}
.lg-text{font-size:13.5px;}
.lg-detail{font-size:12.5px;}
#logModal .diz-input-actions .diz-btn,#guardModal .diz-input-actions .diz-btn{height:40px;font-size:14px;}
#logModal .lg-more .diz-btn{height:36px;font-size:13px;}
@media (max-width:600px){
  .ex-card,#guardModal .diz-card,#logModal .ex-card{max-width:none;}
  #guardModal .diz-card{padding:16px;}
  .lg-row{padding:8px 10px;gap:8px;}
  .lg-time{font-size:10.5px;}
  .lg-types{grid-template-columns:1fr 1fr;}
  .ex-item{padding:10px 12px;gap:10px;}
  .ex-ico{width:40px;height:40px;border-radius:12px;font-size:14px;}
  .ex-item .diz-btn{min-width:64px;padding:0 12px !important;}
  .gd-num{width:64px !important;}
}
.ex-item .ex-go{height:36px;min-width:80px;font-size:13px;padding:0 16px;}
#gdWelcomeText{height:64px;min-height:64px;}
#gdWords{height:76px;min-height:76px;}
.gd-sec .field + .ss-check,.gd-sec .ss-check + .field{margin-top:12px;}
.gd-sec .field > label{margin-bottom:6px;}

/* Desktop: icons are drawn larger and a touch bolder (the 10–16px sizes suit phones, not a 1280px+ screen) */
@media (min-width:901px){
  svg[viewBox="0 0 24 24"][width="10"]{width:13px;height:13px;}
  svg[viewBox="0 0 24 24"][width="11"]{width:14px;height:14px;}
  svg[viewBox="0 0 24 24"][width="12"]{width:16px;height:16px;}
  svg[viewBox="0 0 24 24"][width="13"]{width:17px;height:17px;}
  svg[viewBox="0 0 24 24"][width="14"]{width:18px;height:18px;}
  svg[viewBox="0 0 24 24"][width="15"]{width:19px;height:19px;}
  svg[viewBox="0 0 24 24"][width="16"]{width:20px;height:20px;}
  svg[viewBox="0 0 24 24"][width="18"]{width:22px;height:22px;}
  svg[viewBox="0 0 24 24"][width="20"]{width:24px;height:24px;}
  svg[viewBox="0 0 24 24"][stroke-width="1.8"]{stroke-width:2;}
  .settings-close{width:32px;height:32px;}
}
@media (min-width:901px){
  .ub-icon-btn{width:28px;}
  .ub-icon-btn svg{width:18px !important;height:18px !important;}
}

/* ===== Home (Direct Messages) + Friends page — Discord-style ===== */
.server-rail-home{color:var(--text);background:var(--panel-2);overflow:visible;}
.server-rail-home.active{background:var(--cyan);color:var(--on-accent);}
.rail-badge{position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;border:3px solid var(--ink);box-sizing:content-box;font-family:var(--font-ui,inherit);}
.rail-badge[hidden]{display:none;}
#homeBarTitle{display:none;}
#app.home-mode #currentServerName,#app.home-mode #serverSettingsBtn{display:none !important;}
#app.home-mode #homeBarTitle{display:inline;}
#app:not(.home-mode) #dmGroup{display:none;}
#app.home-mode #chanGroups{display:none;}
#app.home-mode .members,#app.home-mode .mobile-members-btn{display:none !important;}
#app.home-mode #dmGroupLabel{margin-top:6px;}
.friends-nav-btn.active{background:var(--line);color:var(--text);}
.friends-nav-btn{font-size:14px;padding:10px 12px;}
#dmList .dm-row{padding:6px 10px;}
#dmList .dm-avatar{width:32px;height:32px;}

.friends-page{position:absolute;inset:0;z-index:5;background:var(--bg,var(--ink));display:flex;flex-direction:column;min-width:0;}
.friends-page[hidden]{display:none;}
.fp-header{display:flex;align-items:center;gap:12px;height:56px;flex-shrink:0;padding:0 18px;border-bottom:1px solid var(--line);background:var(--panel);}
.fp-title{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;color:var(--text);}
.fp-title-ic{display:flex;color:var(--text-dim);}
.fp-sep{width:1px;height:22px;background:var(--line);margin:0 4px;}
.fp-tabs{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;}
.fp-tabs::-webkit-scrollbar{display:none;}
.fp-tabs button{flex:none;border:0;background:transparent;color:var(--text-dim);font-size:14px;font-weight:600;height:32px;padding:0 12px;border-radius:8px;display:flex;align-items:center;gap:7px;cursor:pointer;transition:background .15s,color .15s;}
.fp-tabs button:hover{background:var(--panel-2);color:var(--text);}
.fp-tabs button.on{background:var(--line);color:var(--text);}
.fp-tabs button.fp-addtab{background:var(--cyan);color:var(--on-accent);margin-inline-start:6px;}
.fp-tabs button.fp-addtab:hover{opacity:.9;}
.fp-tabs button.fp-addtab.on{background:transparent;color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan);}
.fp-count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;}
.fp-count[hidden]{display:none;}
.fp-body{flex:1;overflow-y:auto;padding:16px 24px 24px;min-height:0;}
.fp-search{position:relative;margin-bottom:6px;}
.fp-search-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-faint);display:flex;pointer-events:none;}
.fp-search input{width:100%;box-sizing:border-box;height:40px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:0 14px 0 38px;font-size:14px;outline:none;font-family:inherit;}
.fp-search input:focus{border-color:var(--cyan-dim);}
.fp-panel{display:none;}
.fp-panel.on{display:block;}
.friends-page .friends-list{display:flex;flex-direction:column;}
.friends-page .fr-group{padding:16px 4px 8px;font-size:12px;}
.friends-page .friend-row{padding:10px 8px;gap:12px;border-radius:10px;border-top:1px solid var(--line);}
.friends-page .friend-row:first-of-type{border-top-color:transparent;}
.friends-page .friend-row:hover{background:var(--panel);border-radius:10px;}
.friends-page .friend-row img{width:38px;height:38px;}
.friends-page .fr-avatar-wrap{position:relative;flex-shrink:0;}
.friends-page .fr-avatar-wrap .status-dot-badge{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-color:var(--bg,var(--ink));}
.friends-page .fr-name{font-size:15px;font-weight:700;}
.friends-page .fr-status{font-size:13px;color:var(--text-dim);}
.friends-page .fr-info{flex:1;min-width:0;}
.friends-page .fr-actions{display:flex;gap:8px;align-items:center;}
.fr-circle{width:36px;height:36px;border-radius:50%;border:0;background:var(--panel-2);color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s;}
.fr-circle:hover{background:var(--line);color:var(--text);}
.friends-page .fr-btn{height:34px;padding:0 14px;font-size:13px;}
.friends-page .friends-empty{padding:48px 12px;text-align:center;color:var(--text-dim);font-size:14px;}
.fp-add-box{max-width:620px;margin-bottom:12px;}
.fp-add-box h3{margin:0 0 4px;font-size:17px;}
.fp-add-box p{margin:0 0 12px;color:var(--text-dim);font-size:13px;}
.fp-add-box .settings-input{height:44px;font-size:15px;}
@media (min-width:901px){.friends-page #fpMobileBtn{display:none;}}
@media (max-width:900px){
  .fp-header{padding:0 10px;gap:8px;}
  .fp-title,.fp-sep{display:none;}
  .fp-body{padding:12px 12px 20px;}
  .friends-page .fr-name{font-size:14px;}
}
.rail-badge{box-sizing:border-box;min-width:20px;height:20px;line-height:14px;padding:0 4px;right:-6px;bottom:-6px;border-width:3px;font-size:10.5px;}
.server-rail-sep{display:none;}
#serverRailList{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;}

/* Text selection: a soft accent highlight that keeps the text readable in every theme (light theme used to turn selected text black) */
::selection{background:color-mix(in srgb,var(--cyan) 38%,transparent);color:inherit;text-shadow:none;}
::-moz-selection{background:color-mix(in srgb,var(--cyan) 38%,transparent);color:inherit;}
html[data-theme="light"] ::selection{background:rgba(14,159,148,.30);color:#1a2030;}
html[data-theme="light"] .server-rail-btn.active ::selection,html[data-theme="light"] .enter-btn ::selection{color:#fff;background:rgba(0,0,0,.25);}
input::selection,textarea::selection{background:color-mix(in srgb,var(--cyan) 45%,transparent);color:inherit;}
.owner-badge{display:inline-block;margin-left:4px;padding:1px 5px;border-radius:4px;font-size:9.5px;font-weight:800;letter-spacing:.4px;color:var(--amber);background:color-mix(in srgb,var(--amber) 16%,transparent);vertical-align:1px;}
.members{padding-top:12px;}

/* ---- Multi-attachment tray + gallery ---- */
.attach-preview .ap-strip{display:flex;gap:10px;flex:1;min-width:0;overflow-x:auto;padding:4px 2px;}
.ap-item{position:relative;flex:0 0 auto;width:76px;display:flex;flex-direction:column;gap:4px;}
.ap-item .ap-thumb{width:76px;height:64px;}
.ap-item .ap-cap{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ap-item .ap-bar{margin-top:0;}
.ap-item.done .ap-bar{opacity:0;height:0;margin:0;}
.ap-item.uploading .ap-thumb{opacity:.7;}
.ap-rm{position:absolute;top:-5px;right:-5px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);color:var(--text-dim);cursor:pointer;padding:0;}
.ap-rm:hover{color:var(--red);}
.msg-gallery{display:grid;gap:3px;margin-top:6px;width:min(420px,100%);border-radius:10px;overflow:hidden;}
.msg-gallery .gal-cell{position:relative;overflow:hidden;cursor:zoom-in;background:var(--panel-2);min-height:0;}
.msg-gallery .gal-cell img{width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;object-fit:cover;display:block;position:absolute;inset:0;}
.msg-gallery.g2{grid-template-columns:1fr 1fr;aspect-ratio:2/1;}
.msg-gallery.g3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/2;}
.msg-gallery.g3 .gal-cell:first-child{grid-row:1/3;}
.msg-gallery.g4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1/1;}
.gal-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;font-size:26px;font-weight:700;}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;z-index:2;}
.lightbox-nav:hover{background:rgba(255,255,255,.24);}
.lightbox-nav.prev{left:16px;}.lightbox-nav.next{right:16px;}
.lightbox-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;background:rgba(0,0,0,.5);padding:3px 10px;border-radius:12px;}
.lightbox-count:empty{display:none;}
@media (max-width:640px){.lightbox-nav{width:38px;height:38px}.lightbox-nav.prev{left:6px}.lightbox-nav.next{right:6px}}

/* accent row: align label / swatch / Reset on one line, give the swatch a visible border */
.accent-row{align-items:center;}
.accent-row label{margin:0;line-height:1;}
.accent-row .btn-secondary{margin-top:0;height:36px;}
.accent-row input[type=color]{box-sizing:border-box;width:46px;height:36px;padding:3px;margin:0;border:2px solid var(--text-faint,#6b7280);border-radius:9px;background:var(--panel-2);}
.accent-row input[type=color]:hover,.accent-row input[type=color]:focus-visible{border-color:var(--cyan);outline:none;}
.accent-row input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
.accent-row input[type=color]::-webkit-color-swatch{border:none;border-radius:5px;}
.accent-row input[type=color]::-moz-color-swatch{border:none;border-radius:5px;}

/* Security tab */
.sec-input{margin-bottom:8px;}
.sec-sessions{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.sec-session{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;}
.sec-session.current{border-color:var(--cyan-dim);}
.sec-s-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--text-dim);}
.sec-s-info b{font-size:13px;color:var(--text);font-weight:600;}
.sec-session .btn-secondary{margin-top:0;height:32px;padding:0 12px;font-size:12px;flex-shrink:0;}
.sec-danger{border-top:1px solid var(--line);padding-top:16px;margin-top:8px;}
.member-more{padding:6px 12px;font-size:12px;color:var(--text-faint);}

/* Achievement badges (icon only; details in a hover/tap card) */
.profile-achievements{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.ach-badge{box-sizing:border-box;width:34px;height:34px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:0;line-height:0;padding:0;margin:0;cursor:default;background:var(--panel-2);border:2px solid var(--line);transition:transform .12s ease,border-color .12s ease;}
.ach-badge:hover,.ach-badge:focus-visible{transform:scale(1.12);outline:none;}
.ach-badge svg{display:block;flex:none;}
.ach-badge.bronze{border-color:#b9824f;color:#d39a66;} .ach-badge.silver{border-color:#aab4c3;color:#c3ccd9;} .ach-badge.gold{border-color:#f5c542;color:#f5c542;box-shadow:0 0 8px rgba(245,197,66,.35);}
.ach-tip{position:fixed;z-index:1300;max-width:220px;display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:8px;background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,0,0,.35);pointer-events:none;font-size:12px;color:var(--text-dim);}
.ach-tip b{font-size:13px;color:var(--text);}

/* brand logo (the blue "D") */
.brand-logo{display:block;width:40px;height:40px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 8px rgba(30,110,255,.35));}
.login-mark{gap:12px;}


/* Diz Point */
.dp-hero{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:12px;border-radius:12px;background:linear-gradient(135deg,rgba(30,110,255,.18),rgba(79,209,197,.10));border:1px solid var(--line);}
.dp-logo{height:46px;width:auto;flex:none;display:block;user-select:none;-webkit-user-drag:none;}
.dp-mini{height:11px;width:auto;vertical-align:-1px;margin-right:2px;}
.dp-balance{font-size:30px;font-weight:700;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;}
.dp-balance small{font-size:15px;font-weight:600;color:var(--cyan);margin-left:2px;}
.dp-daily{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:16px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);}
.dp-daily-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--text-dim);}
.dp-daily-info b{font-size:13px;color:var(--text);}
.dp-claim{margin-top:0;height:34px;flex:none;}
.dp-meter{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:12px;color:var(--text-dim);}
.dp-meter span{width:68px;flex:none;}.dp-meter em{width:70px;text-align:right;font-style:normal;flex:none;}
.dp-bar{flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden;}
.dp-bar i{display:block;height:100%;width:0;border-radius:6px;background:var(--cyan);transition:width .25s ease;}
.dp-rules{margin:0;padding-left:18px;font-size:12.5px;line-height:1.7;color:var(--text-dim);}
.dp-rules b{color:var(--text);}
.dp-log-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--text);}
.dp-log-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dp-log-row b.pos{color:var(--green);} .dp-log-row b.neg{color:var(--red);}
.dp-log-row em{font-style:normal;font-size:11px;color:var(--text-faint);width:62px;text-align:right;flex:none;}
.dp-empty{font-size:12.5px;color:var(--text-faint);padding:6px 0;}
.dp-top-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;color:var(--text);}
.dp-top-row img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;}
.dp-top-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dp-rank{width:18px;text-align:center;color:var(--text-faint);font-size:12px;flex:none;}
.dp-shop{display:flex;flex-direction:column;gap:3px;padding:12px 14px;margin:4px 0 14px;border-radius:10px;border:1px dashed var(--line);font-size:12.5px;color:var(--text-dim);}
.dp-shop b{color:var(--text);font-size:13px;}
.dp-grant{display:flex;flex-wrap:wrap;gap:8px;} .dp-grant .settings-input{flex:1;min-width:120px;} .dp-grant .btn-secondary{margin-top:0;height:40px;}

.dp-chip{display:inline-flex;align-items:center;gap:6px;height:32px;box-sizing:border-box;padding:0 11px;margin-left:10px;flex:none;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,background .15s;}
.dp-chip[hidden]{display:none;}
.dp-chip img{height:15px;width:auto;display:block;}
.dp-chip b{font-weight:600;font-variant-numeric:tabular-nums;}
.dp-chip:hover{border-color:var(--cyan-dim);background:var(--panel);}
.dp-chip:focus-visible{outline:2px solid var(--cyan-dim);outline-offset:2px;}
.chan-search.after-actions + .dp-chip{margin-left:10px;}
@media (max-width:720px){.dp-chip{margin-left:6px;padding:0 8px;}.dp-chip img{height:13px;}}

/* ================= Avatar decorations (Diz Shop frames) =================
 * A frame is drawn by the two pseudo-elements of the avatar's wrapper (.av-deco in templates, or the existing wrapper
 * around the profile / bottom-bar avatar), so it scales with the avatar and costs only GPU transforms to animate. */
.av-deco{position:relative;display:inline-flex;flex:none;line-height:0;border-radius:50%;}
.av-deco>img{display:block;}
.deco{border-radius:50%;--ring:radial-gradient(farthest-side,transparent 84%,#000 85.5%);}
.deco::before,.deco::after{content:"";position:absolute;pointer-events:none;border-radius:50%;box-sizing:border-box;z-index:2;inset:-12%;}
@keyframes decoSpin{to{transform:rotate(360deg)}}
@keyframes decoPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes decoBeat{0%,56%,100%{transform:scale(1)}14%{transform:scale(1.11)}28%{transform:scale(1)}42%{transform:scale(1.07)}}
@keyframes decoRipple{0%{transform:scale(.94);opacity:.85}100%{transform:scale(1.4);opacity:0}}
@keyframes decoTwinkle{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes decoBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-7%)}}
@keyframes decoHue{to{filter:hue-rotate(360deg)}}
@keyframes decoFlicker{0%,100%{opacity:1}3%{opacity:.25}6%{opacity:1}9%{opacity:.45}12%{opacity:1}56%{opacity:.9}58%{opacity:.2}61%{opacity:1}}
@keyframes decoGlitchA{0%,100%{transform:translate(-1.5px,0);clip-path:none}9%{transform:translate(2.5px,-1px);clip-path:inset(0 0 58% 0)}11%{transform:translate(-2.5px,1px);clip-path:inset(46% 0 0 0)}13%{transform:translate(-1.5px,0);clip-path:none}64%{transform:translate(2px,1px);clip-path:inset(20% 0 40% 0)}66%{transform:translate(-1.5px,0);clip-path:none}}
@keyframes decoGlitchB{0%,100%{transform:translate(1.5px,0);clip-path:none}9%{transform:translate(-2.5px,1px);clip-path:inset(40% 0 0 0)}11%{transform:translate(2.5px,-1px);clip-path:inset(0 0 52% 0)}13%{transform:translate(1.5px,0);clip-path:none}64%{transform:translate(-2px,-1px);clip-path:inset(55% 0 10% 0)}66%{transform:translate(1.5px,0);clip-path:none}}

/* common */
.d-neon::before{inset:-12%;border:2px solid #7ff;box-shadow:0 0 6px #0ff,inset 0 0 6px #0ff;animation:decoPulse 1.8s ease-in-out infinite;}
.d-neon::after{inset:-19%;border:1px solid #f0f;box-shadow:0 0 8px #f0f;opacity:.6;animation:decoPulse 1.8s ease-in-out infinite reverse;}
.d-heart::before{inset:-12%;border:3px solid #ff4d8d;box-shadow:0 0 10px #ff4d8d;animation:decoBeat 1.5s ease-in-out infinite;}
.d-heart::after{inset:-12%;border:2px solid #ff4d8d;animation:decoRipple 1.5s ease-out infinite;}
.d-toxic{box-shadow:0 0 12px 1px rgba(57,255,20,.45);}
.d-toxic::before{background:conic-gradient(#39ff14,#0a2e0a 25%,#c6ff00 50%,#0a2e0a 75%,#39ff14);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 2.6s linear infinite;}
.d-toxic::after{inset:-26%;background:radial-gradient(closest-side,transparent 72%,rgba(57,255,20,.55) 85%,transparent 100%);animation:decoPulse 1.4s ease-in-out infinite;}
.d-frost{box-shadow:0 0 10px 1px rgba(140,220,255,.4);}
.d-frost::before{background:conic-gradient(#e8fbff,#7fd8ff 20%,#fff 40%,#69b7ff 60%,#d7f5ff 80%,#e8fbff);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 9s linear infinite;}
.d-frost::after{inset:-24%;background:radial-gradient(closest-side,#fff 35%,transparent 100%) 50% 0%/9% 9% no-repeat,radial-gradient(closest-side,#cdf 35%,transparent 100%) 100% 36%/7% 7% no-repeat,radial-gradient(closest-side,#fff 35%,transparent 100%) 12% 88%/9% 9% no-repeat,radial-gradient(closest-side,#bff 35%,transparent 100%) 74% 100%/7% 7% no-repeat,radial-gradient(closest-side,#e8fbff 35%,transparent 100%) 0% 30%/6% 6% no-repeat;animation:decoSpin 14s linear infinite reverse,decoTwinkle 1.7s ease-in-out infinite;}

/* rare */
.d-aurora{box-shadow:0 0 14px 2px rgba(0,255,190,.35),0 0 26px 6px rgba(122,92,255,.22);}
.d-aurora::before{background:conic-gradient(#00ffa3,#00c2ff,#7a5cff,#ff5cf0,#00ffa3);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 4s linear infinite;}
.d-aurora::after{inset:-26%;background:radial-gradient(closest-side,transparent 72%,rgba(0,255,190,.4) 85%,transparent 100%);animation:decoPulse 3s ease-in-out infinite,decoHue 6s linear infinite;}
.d-prism::before{background:conic-gradient(#f33,#fd0,#3f5,#0df,#35f,#f3d,#f33);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 2.4s linear infinite;}
.d-prism::after{background:conic-gradient(transparent 0 78%,rgba(255,255,255,.95) 92%,transparent 100%);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 1.1s linear infinite;}
.d-solar{box-shadow:0 0 12px 2px rgba(255,120,0,.45);}
.d-solar::before{background:conic-gradient(#fff2a0,#ffb300 20%,#ff5a00 45%,#ff2d00 60%,#ffb300 85%,#fff2a0);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 3s linear infinite,decoFlicker 4s linear infinite;}
.d-solar::after{inset:-26%;background:radial-gradient(closest-side,#ffd24a 35%,transparent 100%) 50% 0%/10% 10% no-repeat,radial-gradient(closest-side,#ff7a1a 35%,transparent 100%) 100% 50%/8% 8% no-repeat,radial-gradient(closest-side,#ffd24a 35%,transparent 100%) 50% 100%/10% 10% no-repeat,radial-gradient(closest-side,#ff7a1a 35%,transparent 100%) 0% 50%/8% 8% no-repeat;animation:decoSpin 4.5s linear infinite reverse,decoTwinkle .9s ease-in-out infinite;}
.d-glitch::before{inset:-12%;border:2px solid #0ff;mix-blend-mode:screen;animation:decoGlitchA 2.2s steps(1) infinite;}
.d-glitch::after{inset:-12%;border:2px solid #f0f;mix-blend-mode:screen;animation:decoGlitchB 2.2s steps(1) infinite;}
.d-orbit::before{inset:-12%;border:1.5px solid rgba(160,200,255,.3);}
.d-orbit::after{inset:-21%;background:radial-gradient(closest-side,#fff 45%,transparent 100%) 50% 0%/12% 12% no-repeat,radial-gradient(closest-side,#ffb85a 45%,transparent 100%) 50% 100%/9% 9% no-repeat;filter:drop-shadow(0 0 3px #6cf);animation:decoSpin 3.2s linear infinite;}

/* legendary */
.d-royal{box-shadow:0 0 12px 1px rgba(255,200,40,.45);}
.d-royal::before{background:conic-gradient(#fff6b0,#e7b416 18%,#8a5a00 38%,#ffe27a 58%,#b97f00 78%,#fff6b0);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 7s linear infinite;}
.d-royal::after{inset:auto;left:50%;top:-36%;width:60%;height:42%;border-radius:0;transform:translateX(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff2a0'/%3E%3Cstop offset='.55' stop-color='%23f2b61a'/%3E%3Cstop offset='1' stop-color='%23a86a00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 35 8 9l13 12L32 3l11 18L56 9l3 26z' fill='url(%23g)' stroke='%23fff6c8' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='8' r='3' fill='%23ff4d6d'/%3E%3Ccircle cx='32' cy='3' r='3.4' fill='%234dd8ff'/%3E%3Ccircle cx='56' cy='8' r='3' fill='%23ff4d6d'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 3px rgba(255,200,40,.8));animation:decoBob 2.4s ease-in-out infinite;}
.d-void{box-shadow:0 0 16px 2px rgba(130,0,255,.5);}
.d-void::before{background:conic-gradient(#000,#6a00ff 20%,#000 40%,#c400ff 60%,#000 80%,#000);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 4.5s linear infinite reverse;}
.d-void::after{inset:-30%;background:radial-gradient(circle,transparent 52%,rgba(120,0,255,.4) 62%,transparent 74%);animation:decoPulse 2.2s ease-in-out infinite,decoSpin 12s linear infinite;}
.d-storm{box-shadow:0 0 12px 2px rgba(110,190,255,.5);}
.d-storm::before{background:repeating-conic-gradient(#e6f6ff 0 5deg,#3aa0ff 5deg 9deg,transparent 9deg 22deg);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 6s steps(24) infinite;}
.d-storm::after{inset:-24%;background:radial-gradient(closest-side,transparent 72%,rgba(150,210,255,.9) 85%,transparent 100%);animation:decoFlicker 3.2s linear infinite;}
.d-starfall::before{background:conic-gradient(rgba(255,120,220,.2),rgba(140,120,255,.9) 30%,rgba(120,220,255,.2) 55%,rgba(255,120,220,.9) 80%,rgba(255,120,220,.2));-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 9s linear infinite reverse;}
.d-starfall::after{inset:-32%;background:radial-gradient(closest-side,#fff 35%,transparent 100%) 50% 0%/8% 8% no-repeat,radial-gradient(closest-side,#ffe27a 35%,transparent 100%) 92% 20%/7% 7% no-repeat,radial-gradient(closest-side,#ff9be0 35%,transparent 100%) 100% 70%/8% 8% no-repeat,radial-gradient(closest-side,#fff 35%,transparent 100%) 50% 100%/7% 7% no-repeat,radial-gradient(closest-side,#9be7ff 35%,transparent 100%) 6% 76%/8% 8% no-repeat,radial-gradient(closest-side,#ffe27a 35%,transparent 100%) 0% 24%/6% 6% no-repeat;animation:decoSpin 7s linear infinite,decoTwinkle 1.4s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.deco::before,.deco::after{animation:none!important;}}

/* VIP badge (Diz Nova) */
.vip-badge{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:1px 6px 1px 4px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.03em;line-height:14px;vertical-align:middle;color:#2a1a00;background:linear-gradient(135deg,#ffe27a,#f2b61a);}
.vip-badge svg{width:11px;height:11px;}

/* ================= Premium themes (Diz Shop) ================= */
html[data-theme="mocha"]{--cyan:#e0a96d;--cyan-dim:#a97a45;--ink:#14100d;--panel:#1b1612;--panel-2:#251d17;--line:#382d24;--glow:#2a1f17;--text:#f0e7dc;--text-dim:#a8978a;--text-faint:#7a6a5e;--on-accent:#1f1308;--scroll:#382d24;}
html[data-theme="glacier"]{--cyan:#7fe0ff;--cyan-dim:#48a9cc;--ink:#0b1318;--panel:#111c23;--panel-2:#182830;--line:#233a45;--glow:#14323f;--text:#e6f4fa;--text-dim:#86a4b3;--text-faint:#587585;--on-accent:#04222d;--scroll:#233a45;}
html[data-theme="gold"]{--cyan:#e8b923;--cyan-dim:#b08c12;--ink:#0a0906;--panel:#13110b;--panel-2:#1b180e;--line:#3a321a;--glow:#2a2410;--text:#f4edd8;--text-dim:#a99c74;--text-faint:#6f6542;--on-accent:#1b1400;--scroll:#3a321a;}
html[data-theme="gold"] .vip-badge{box-shadow:0 0 8px rgba(255,200,40,.5);}
html[data-theme="cyber"]{--cyan:#ff2bd6;--cyan-dim:#b81d98;--ink:#09051a;--panel:#110a24;--panel-2:#1a1033;--line:#3a1b68;--glow:#2b0f4f;--text:#f2e9ff;--text-dim:#a58fd0;--text-faint:#6f5a9a;--on-accent:#1d0020;--scroll:#3a1b68;--amber:#00f0ff;}
html[data-theme="cyber"] .msg.mine .msg-text,html[data-theme="cyber"] .server-rail-btn.active{box-shadow:0 0 12px rgba(255,43,214,.35);}
html[data-theme="northern"]{--cyan:#3dffb0;--cyan-dim:#22b57a;--ink:#040d12;--panel:#09191c;--panel-2:#0f2326;--line:#1b3a3a;--glow:#0d3a32;--text:#e3fff4;--text-dim:#7fb5a3;--text-faint:#4f7d6f;--on-accent:#00231a;--scroll:#1b3a3a;}
html[data-theme="nebula"]{--cyan:#b69cff;--cyan-dim:#7f63d6;--ink:#06051a;--panel:#0d0a24;--panel-2:#150f36;--line:#2a2060;--glow:#211552;--text:#eceaff;--text-dim:#9a93c9;--text-faint:#625b94;--on-accent:#120a33;--scroll:#2a2060;}
html[data-theme="lava"]{--cyan:#ff7a3d;--cyan-dim:#c24f1b;--ink:#110504;--panel:#1a0b09;--panel-2:#251210;--line:#43201a;--glow:#3a150d;--text:#ffeee6;--text-dim:#b58a7c;--text-faint:#7f5c50;--on-accent:#2a0d02;--scroll:#43201a;}
html[data-theme="synthwave"]{--cyan:#ff4fd8;--cyan-dim:#b72f9c;--ink:#0c0220;--panel:#150431;--panel-2:#1f0847;--line:#3b1272;--glow:#33106b;--text:#fbeaff;--text-dim:#ae92d6;--text-faint:#7358a0;--on-accent:#24002a;--scroll:#3b1272;--amber:#37f3ff;}
html[data-theme="matrix"]{--cyan:#00ff6a;--cyan-dim:#00a847;--ink:#000a03;--panel:#031209;--panel-2:#061c0f;--line:#0d3a1c;--glow:#06301a;--text:#d5ffe3;--text-dim:#6fbf8a;--text-faint:#3f7d58;--on-accent:#00200c;--scroll:#0d3a1c;}
html[data-theme="matrix"] body{font-family:"JetBrains Mono","Fira Code",ui-monospace,Menlo,Consolas,monospace;}

/* the animated ones: a big soft glow that drifts over the whole app at low opacity (transform-only, so it stays cheap) */
html[data-theme="northern"] body::before,html[data-theme="nebula"] body::before,html[data-theme="lava"] body::before,
html[data-theme="synthwave"] body::before,html[data-theme="matrix"] body::before{content:"";position:fixed;left:-30%;top:-30%;width:160%;height:160%;pointer-events:none;z-index:2999;mix-blend-mode:screen;will-change:transform;}
html[data-theme="northern"] body::before{opacity:.2;background:radial-gradient(40% 30% at 30% 40%,#00ffa3 0,transparent 70%),radial-gradient(35% 30% at 70% 30%,#7a5cff 0,transparent 70%),radial-gradient(30% 25% at 55% 70%,#00c2ff 0,transparent 70%);animation:themeDrift 22s ease-in-out infinite alternate;}
html[data-theme="nebula"] body::before{opacity:.22;background:radial-gradient(35% 30% at 25% 30%,#7a3cff 0,transparent 70%),radial-gradient(30% 30% at 75% 65%,#ff4fb8 0,transparent 70%),radial-gradient(30% 25% at 50% 90%,#3c7bff 0,transparent 70%);animation:themeDrift 30s ease-in-out infinite alternate;}
html[data-theme="lava"] body::before{opacity:.2;background:radial-gradient(35% 30% at 30% 80%,#ff3d00 0,transparent 70%),radial-gradient(30% 25% at 70% 70%,#ff9a1a 0,transparent 70%),radial-gradient(30% 25% at 50% 30%,#c4001a 0,transparent 70%);animation:themeDrift 16s ease-in-out infinite alternate,themeBreathe 6s ease-in-out infinite;}
html[data-theme="synthwave"] body::before{opacity:.24;background:linear-gradient(180deg,transparent 55%,rgba(255,60,200,.55) 100%),radial-gradient(30% 25% at 20% 30%,#37f3ff 0,transparent 70%),radial-gradient(30% 25% at 80% 40%,#ff4fd8 0,transparent 70%);animation:themeDrift 20s ease-in-out infinite alternate;}
html[data-theme="matrix"] body::before{opacity:.13;left:0;top:0;width:100%;height:200%;background:repeating-linear-gradient(180deg,transparent 0 6px,rgba(0,255,106,.5) 6px 7px),linear-gradient(180deg,transparent,rgba(0,255,106,.7) 50%,transparent);background-size:100% 100%,100% 50%;animation:themeRain 7s linear infinite;}
@keyframes themeDrift{0%{transform:translate(-4%,-3%) rotate(0deg) scale(1)}50%{transform:translate(5%,4%) rotate(8deg) scale(1.08)}100%{transform:translate(-2%,6%) rotate(-6deg) scale(1.02)}}
@keyframes themeBreathe{0%,100%{filter:brightness(.8)}50%{filter:brightness(1.35)}}
@keyframes themeRain{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){html[data-theme] body::before{animation:none!important;}}

/* ================= Shop ================= */
.profile-vip-hint{margin:8px 0 8px;padding-left:124px;min-height:52px;line-height:1.45;}
.shop-balance{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:13px;color:var(--text-dim);}
.shop-balance img{height:20px;width:auto;}
.shop-balance b{font-size:22px;color:var(--text);font-variant-numeric:tabular-nums;}
.vip-card{position:relative;overflow:hidden;padding:16px 18px;margin-bottom:16px;border-radius:12px;border:1px solid rgba(242,182,26,.35);background:linear-gradient(135deg,rgba(255,214,90,.12),rgba(242,166,90,.05) 60%,transparent),var(--panel-2);}
.vip-card::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,235,160,.14),transparent);animation:vipShine 5s ease-in-out infinite;pointer-events:none;}
@keyframes vipShine{0%,60%{left:-60%}100%{left:130%}}
.vip-head{display:flex;align-items:center;gap:12px;}
.vip-crown{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:#2a1a00;background:linear-gradient(135deg,#ffe27a,#f2b61a);flex:none;}
.vip-head b{display:block;font-size:16px;color:var(--text);}
.vip-head span:not(.vip-crown){font-size:12px;color:var(--text-dim);}
.vip-perks{margin:12px 0 14px;padding-left:18px;font-size:12.5px;line-height:1.7;color:var(--text-dim);}
.vip-buy{height:38px;padding:0 16px;border:none;border-radius:9px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;color:#2a1a00;background:linear-gradient(135deg,#ffe27a,#f2b61a);display:inline-flex;align-items:center;gap:6px;transition:filter .15s,transform .12s;}
.vip-buy:hover{filter:brightness(1.07);} .vip-buy:active{transform:scale(.97);}
.vip-buy .dp-mini,.shop-btn .dp-mini,.shop-balance .dp-mini{height:13px;margin:0;vertical-align:-2px;}
.shop-tabs{display:flex;gap:6px;margin:4px 0 12px;}
.shop-tabs button{height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text-dim);font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,color .15s;}
.shop-tabs button:hover{color:var(--text);}
.shop-tabs button.active{border-color:var(--cyan-dim);color:var(--cyan);}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-bottom:12px;}
.shop-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px 12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);text-align:center;}
.shop-card.tier-rare{border-color:rgba(90,162,242,.45);}
.shop-card.tier-legendary{border-color:rgba(242,182,26,.5);box-shadow:0 0 0 1px rgba(242,182,26,.08) inset;}
.shop-tier{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);}
.tier-rare .shop-tier{color:#5aa2f2;} .tier-legendary .shop-tier{color:#f2b61a;}
.shop-prev{display:flex;align-items:center;justify-content:center;height:84px;width:100%;}
.shop-prev img{width:52px;height:52px;border-radius:50%;object-fit:cover;}
.shop-prev.theme{height:84px;}
.shop-prev.theme{padding:0 2px;}
.shop-name{font-size:13px;font-weight:600;color:var(--text);}
.shop-btn{width:100%;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:border-color .15s,background .15s;}
.shop-btn:hover{border-color:var(--cyan-dim);}
.shop-btn.buy{border-color:var(--cyan-dim);color:var(--cyan);}
.shop-btn.on{background:var(--cyan);border-color:var(--cyan);color:var(--on-accent);font-weight:600;}
.shop-btn:disabled{opacity:.6;cursor:default;}
.theme-card.locked{opacity:.72;}
.theme-card{position:relative;}
.theme-card .theme-name svg{margin-left:5px;vertical-align:-2px;opacity:.7;}
.theme-anim{position:absolute;top:13px;right:13px;font-style:normal;font-size:9px;padding:1px 6px;border-radius:5px;background:var(--cyan);color:var(--on-accent);letter-spacing:.03em;pointer-events:none;}
@media (max-width:560px){.shop-grid{grid-template-columns:repeat(2,1fr);}}

/* VIP premium features grid */
.vip-sec{margin:14px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);}
.vip-limits{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.vip-lim{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);min-width:0;}
.vip-lim-ic{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:var(--panel-2);color:var(--text);flex:none;}
.vip-lim b{display:block;font-size:13px;color:var(--text);}
.vip-lim span:not(.vip-lim-ic){display:block;font-size:11.5px;color:var(--text-dim);line-height:1.35;}
.vip-lim strong{color:var(--text);}
.vip-lim em{font-style:normal;color:var(--text-faint);}
@media (max-width:560px){.vip-limits{grid-template-columns:1fr;}}

/* theme mini-previews in the Shop */
.tm{position:relative;display:flex;width:100%;height:84px;border-radius:9px;overflow:hidden;background:var(--ta);border:1px solid rgba(128,128,128,.3);}
.tm-side{display:flex;flex-direction:column;gap:5px;align-items:center;width:20%;padding:8px 0;background:var(--tb);}
.tm-side b{display:block;width:12px;height:12px;border-radius:50%;background:var(--tc);opacity:.85;}
.tm-side b:nth-child(2),.tm-side b:nth-child(3){opacity:.35;}
.tm-main{flex:1;display:flex;flex-direction:column;gap:6px;padding:7px 8px;min-width:0;}
.tm-head{display:block;height:9px;border-radius:3px;background:var(--tb);}
.tm-row{display:flex;align-items:center;gap:5px;}
.tm-av{display:block;flex:none;width:11px;height:11px;border-radius:50%;background:var(--tc);}
.tm-line{display:block;flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.22);}
.tm-line.s{flex:.6;}
.tm-btn{display:block;margin-top:auto;height:10px;width:34%;align-self:flex-end;border-radius:4px;background:var(--tc);}
.tm.anim::after{content:"";position:absolute;left:-40%;top:-40%;width:180%;height:180%;background:radial-gradient(35% 30% at 30% 40%,var(--tc),transparent 70%),radial-gradient(30% 25% at 72% 62%,var(--tb),transparent 70%);opacity:.5;mix-blend-mode:screen;animation:themeDrift 9s ease-in-out infinite alternate;pointer-events:none;}
.shop-btn.try{height:28px;margin-top:-2px;color:var(--text-dim);}
.shop-btn.try svg{flex:none;}
.shop-card .shop-btn+.shop-btn{margin-top:0;}
@media (prefers-reduced-motion:reduce){.tm.anim::after{animation:none;}}
.deco>.profile-avatar-btn,.deco>.status-dot-badge,.deco>.user-profile-online-dot,.deco>.profile-online-dot{z-index:4;}

/* gifting */
.vip-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.vip-gift{height:38px;padding:0 14px;border-radius:9px;border:1px solid rgba(242,182,26,.45);background:transparent;color:#f2c94c;font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s;}
.vip-gift:hover{background:rgba(242,182,26,.12);}
.shop-btn.gift{margin-top:6px;height:28px;font-size:12px;color:var(--text-dim);background:transparent;}
.shop-btn.gift:hover{color:var(--cyan);}
.gift-card{width:380px;max-width:calc(100vw - 32px);}
.gift-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2,rgba(255,255,255,.03));margin-bottom:14px;font-size:13px;}
.gift-item span{color:var(--text-dim);display:inline-flex;align-items:center;gap:4px;}
.gift-item .dp-mini{height:13px;margin:0;}
.gift-label{display:block;font-size:12px;color:var(--text-dim);margin:10px 0 5px;}
.gift-input{width:100%;box-sizing:border-box;height:38px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:14px;}
.gift-input:focus{outline:none;border-color:var(--cyan-dim);}
.gift-err{min-height:18px;color:#ff7b7b;font-size:12.5px;margin:8px 0 0;}
.gift-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;}
.gift-actions .enter-btn{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 16px;height:38px;}
.gift-actions .btn-secondary{height:38px;padding:0 14px;}
#giftModal{z-index:1100;}

/* frames are always a true circle: the wrapper hugs the picture (no line-gap below an inline <img>) and stays 1:1 */
.deco{line-height:0;aspect-ratio:1/1;box-sizing:border-box;}
.deco>img:first-child{display:block;border-radius:50%;object-fit:cover;}
.user-bar-avatar-wrap.deco{width:32px;height:32px;display:block;flex:none;}
.user-bar-avatar-wrap.deco>img{width:32px;height:32px;}
.av-deco>img{max-width:none;}
.av-deco>img{margin:0 !important;}
.msg>.av-deco{margin-top:2px;}

/* status dots sit above a frame; every row has the same spacing whether or not it carries a frame (room for the ring and the crown) */
.fr-avatar-wrap .status-dot-badge,.user-bar-avatar-wrap .status-dot-badge{z-index:6;}
.member-row,.dm-row,.friend-row{margin-top:6px;margin-bottom:6px;padding-top:8px;padding-bottom:8px;}
.member-row:first-child,.member-group-label + .member-row{margin-top:8px;}
.member-row .mn,.dm-row span{position:relative;z-index:3;}

/* ---- more frames (common) ---- */
.d-sakura{box-shadow:0 0 12px 1px rgba(255,150,190,.4);}
.d-sakura::before{background:conic-gradient(#ffd1e3,#ff8fb8 25%,#fff0f6 50%,#ff8fb8 75%,#ffd1e3);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 8s linear infinite;}
.d-sakura::after{inset:-30%;background:radial-gradient(closest-side,#ffc2d9 40%,transparent 100%) 50% 0%/10% 10% no-repeat,radial-gradient(closest-side,#fff 40%,transparent 100%) 93% 25%/8% 8% no-repeat,radial-gradient(closest-side,#ffa6c9 40%,transparent 100%) 93% 75%/9% 9% no-repeat,radial-gradient(closest-side,#ffc2d9 40%,transparent 100%) 50% 100%/8% 8% no-repeat,radial-gradient(closest-side,#fff 40%,transparent 100%) 7% 75%/9% 9% no-repeat,radial-gradient(closest-side,#ffa6c9 40%,transparent 100%) 7% 25%/8% 8% no-repeat;animation:decoSpin 12s linear infinite reverse;}
.d-ember{box-shadow:0 0 12px 1px rgba(255,100,20,.5);}
.d-ember::before{background:conic-gradient(#ffd24a,#ff7a00 25%,#c21500 50%,#ff7a00 75%,#ffd24a);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 3s linear infinite;}
.d-ember::after{inset:-28%;background:radial-gradient(closest-side,transparent 70%,rgba(255,110,20,.6) 86%,transparent 100%),radial-gradient(closest-side,#ffd24a 40%,transparent 100%) 30% 4%/7% 7% no-repeat,radial-gradient(closest-side,#ff9a3c 40%,transparent 100%) 72% 0%/6% 6% no-repeat,radial-gradient(closest-side,#ffd24a 40%,transparent 100%) 55% 12%/5% 5% no-repeat;animation:decoFlicker 2.4s linear infinite;}
.d-ocean{box-shadow:0 0 12px 1px rgba(40,140,255,.4);}
.d-ocean::before{background:conic-gradient(#0a3d91,#2aa6ff 20%,#bdf0ff 35%,#2aa6ff 50%,#0a3d91 70%,#2aa6ff 85%,#0a3d91);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 5s linear infinite;}
.d-ocean::after{inset:-12%;border:2px solid rgba(90,190,255,.8);animation:decoRipple 2.2s ease-out infinite;}
.d-candy{box-shadow:0 0 10px 1px rgba(255,120,180,.35);}
.d-candy::before{background:repeating-conic-gradient(#ff6fae 0 14deg,#fff 14deg 28deg);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 6s linear infinite;}
.d-candy::after{inset:-18%;background:radial-gradient(closest-side,transparent 78%,rgba(255,120,180,.5) 92%,transparent 100%);animation:decoPulse 2s ease-in-out infinite;}
/* rare */
.d-lightning{box-shadow:0 0 12px 2px rgba(255,230,60,.4);}
.d-lightning::before{background:conic-gradient(#fff9b0,#ffe62e 20%,#8a7400 40%,#ffe62e 60%,#fff9b0 80%,#ffe62e);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 2.4s linear infinite;}
.d-lightning::after{inset:-26%;background:repeating-conic-gradient(transparent 0 40deg,#fff6a8 40deg 43deg,transparent 43deg 90deg);-webkit-mask:radial-gradient(closest-side,transparent 74%,#000 76%,#000 96%,transparent 100%);mask:radial-gradient(closest-side,transparent 74%,#000 76%,#000 96%,transparent 100%);filter:drop-shadow(0 0 3px #ffe62e);animation:decoFlicker 2.8s linear infinite;}
.d-matrix{box-shadow:0 0 10px 1px rgba(0,255,100,.35);}
.d-matrix::before{background:repeating-conic-gradient(#00ff66 0 7deg,transparent 7deg 14deg);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 5s linear infinite reverse;}
.d-matrix::after{inset:-18%;border:1px solid rgba(0,255,100,.55);animation:decoPulse 1.8s ease-in-out infinite;}
.d-sunset{box-shadow:0 0 14px 2px rgba(255,120,120,.4),0 0 24px 4px rgba(190,100,255,.2);}
.d-sunset::before{background:conic-gradient(#ff5e62,#ff9966,#ffd27a,#fa71cd,#c471f5,#ff5e62);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 7s linear infinite;}
.d-sunset::after{inset:-22%;background:radial-gradient(closest-side,transparent 74%,rgba(255,150,120,.45) 88%,transparent 100%);animation:decoPulse 3s ease-in-out infinite;}
.d-crystal{box-shadow:0 0 12px 1px rgba(140,230,255,.4);}
.d-crystal::before{background:repeating-conic-gradient(#e9fdff 0 15deg,#53d6ff 15deg 30deg,#1f8fd1 30deg 45deg,#b9f1ff 45deg 60deg);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 10s linear infinite;}
.d-crystal::after{inset:-28%;background:radial-gradient(closest-side,#fff 30%,transparent 100%) 50% 0%/10% 10% no-repeat,radial-gradient(closest-side,#bdf5ff 30%,transparent 100%) 100% 50%/8% 8% no-repeat,radial-gradient(closest-side,#fff 30%,transparent 100%) 50% 100%/9% 9% no-repeat,radial-gradient(closest-side,#bdf5ff 30%,transparent 100%) 0% 50%/8% 8% no-repeat;animation:decoTwinkle 1.6s ease-in-out infinite;}
.d-radar{box-shadow:0 0 10px 1px rgba(0,255,120,.3);}
.d-radar::before{background:conic-gradient(from 0deg,rgba(0,255,120,0) 0 55%,rgba(0,255,120,.9) 100%);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 2.2s linear infinite;}
.d-radar::after{inset:-12%;border:1.5px solid rgba(0,255,120,.55);}
/* legendary */
.d-halo{box-shadow:0 0 14px 2px rgba(255,240,170,.35);}
.d-halo::before{inset:-12%;border:1.5px solid rgba(255,245,190,.7);}
.d-halo::after{inset:auto;left:50%;top:-30%;width:74%;height:24%;border:3px solid #ffe27a;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 8px 2px rgba(255,226,122,.85),inset 0 0 6px rgba(255,255,255,.8);animation:decoBob 2.6s ease-in-out infinite;}
.d-horns{box-shadow:0 0 14px 2px rgba(255,40,30,.45);}
.d-horns::before{background:conic-gradient(#3a0000,#ff2a1a 20%,#3a0000 45%,#ff6a3c 65%,#3a0000 85%,#ff2a1a);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 4s linear infinite;}
.d-horns::after{inset:auto;left:50%;top:-34%;width:92%;height:40%;border-radius:0;transform:translateX(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23550000'/%3E%3Cstop offset='.6' stop-color='%23e3191f'/%3E%3Cstop offset='1' stop-color='%23ff7a5c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 38C2 22 6 8 20 2C14 12 16 26 24 36Z' fill='url(%23g)' stroke='%23ffb3a0' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M56 38C62 22 58 8 44 2C50 12 48 26 40 36Z' fill='url(%23g)' stroke='%23ffb3a0' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 3px rgba(255,60,40,.8));animation:decoBob 2.8s ease-in-out infinite;}
.d-galaxy{box-shadow:0 0 16px 3px rgba(130,90,255,.4),0 0 28px 6px rgba(255,90,200,.18);}
.d-galaxy::before{background:conic-gradient(#120a3a,#6d4cff 18%,#ff5ccf 36%,#120a3a 50%,#3ac7ff 68%,#6d4cff 84%,#120a3a);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 6s linear infinite;}
.d-galaxy::after{inset:-32%;background:radial-gradient(closest-side,#fff 35%,transparent 100%) 20% 8%/6% 6% no-repeat,radial-gradient(closest-side,#bfa8ff 35%,transparent 100%) 80% 4%/7% 7% no-repeat,radial-gradient(closest-side,#fff 35%,transparent 100%) 98% 55%/5% 5% no-repeat,radial-gradient(closest-side,#ff9be0 35%,transparent 100%) 74% 96%/7% 7% no-repeat,radial-gradient(closest-side,#fff 35%,transparent 100%) 18% 92%/6% 6% no-repeat,radial-gradient(closest-side,#9be7ff 35%,transparent 100%) 0% 45%/6% 6% no-repeat;animation:decoSpin 14s linear infinite reverse,decoTwinkle 2s ease-in-out infinite;}
.d-dragon{box-shadow:0 0 14px 2px rgba(255,70,20,.5);}
.d-dragon::before{background:repeating-conic-gradient(#ff3b1d 0 8deg,#ffb000 8deg 13deg,#5a0b00 13deg 20deg);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 9s linear infinite;}
.d-dragon::after{inset:-28%;background:radial-gradient(closest-side,transparent 70%,rgba(255,80,20,.55) 85%,transparent 100%),radial-gradient(closest-side,#ffd24a 40%,transparent 100%) 50% 0%/9% 9% no-repeat,radial-gradient(closest-side,#ff5a1f 40%,transparent 100%) 96% 70%/7% 7% no-repeat,radial-gradient(closest-side,#ff5a1f 40%,transparent 100%) 4% 70%/7% 7% no-repeat;animation:decoFlicker 3s linear infinite;}

/* ================= more Diz Shop themes ================= */
html[data-theme="forest"]{--cyan:#7bc47f;--cyan-dim:#4f8a53;--ink:#08130c;--panel:#0e1d13;--panel-2:#14281a;--line:#244530;--glow:#16331f;--text:#e4f2e6;--text-dim:#8fb497;--text-faint:#5d8268;--on-accent:#06200c;--scroll:#244530;}
html[data-theme="blossom"]{--cyan:#ffb3c7;--cyan-dim:#c97d95;--ink:#140a12;--panel:#1d101a;--panel-2:#2a1624;--line:#4a2a3f;--glow:#3a1f31;--text:#fbe9f0;--text-dim:#c79bb0;--text-faint:#8c6578;--on-accent:#2a0a18;--scroll:#4a2a3f;}
html[data-theme="mono"]{--cyan:#f2f2f2;--cyan-dim:#a8a8a8;--ink:#050505;--panel:#101010;--panel-2:#1a1a1a;--line:#2e2e2e;--glow:#222;--text:#f2f2f2;--text-dim:#9a9a9a;--text-faint:#666;--on-accent:#000;--scroll:#2e2e2e;--amber:#d8d8d8;--green:#cfcfcf;--red:#bdbdbd;}
html[data-theme="vampire"]{--cyan:#d1163a;--cyan-dim:#8f0f28;--ink:#10050a;--panel:#190810;--panel-2:#26101a;--line:#4a1a2c;--glow:#3a1220;--text:#f5e3e8;--text-dim:#b98a98;--text-faint:#80525f;--on-accent:#fff;--scroll:#4a1a2c;}
html[data-theme="vampire"] .server-rail-btn.active,html[data-theme="vampire"] .msg.mine .msg-text{box-shadow:0 0 12px rgba(209,22,58,.35);}
html[data-theme="retro"]{--cyan:#ffb000;--cyan-dim:#b37b00;--ink:#0d0900;--panel:#150f00;--panel-2:#241a00;--line:#4a3500;--glow:#3a2a00;--text:#ffd37a;--text-dim:#c99a2e;--text-faint:#8a6a1c;--on-accent:#1a1000;--scroll:#4a3500;--green:#ffb000;--red:#ff6a2a;--amber:#ffd37a;}
html[data-theme="retro"] body{font-family:"JetBrains Mono","Fira Code",ui-monospace,Menlo,Consolas,monospace;}
html[data-theme="retro"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2999;background:repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);opacity:.5;}
html[data-theme="paper"]{--cyan:#b5651d;--cyan-dim:#8a4b12;--ink:#f3ecdc;--panel:#fffaf0;--panel-2:#f6eedd;--line:#e0d4bb;--glow:#ead9b6;--text:#3b2f22;--text-dim:#7a6a55;--text-faint:#a39078;--on-accent:#fff;--scroll:#e0d4bb;color-scheme:light;--amber:#a85d10;--red:#c2402f;--green:#3f7f3a;}
html[data-theme="paper"] body{background:var(--ink);}
html[data-theme="paper"] .toast,html[data-theme="paper"] .modal-card,html[data-theme="paper"] .login-card{box-shadow:0 8px 28px rgba(80,55,20,0.14);}
/* animated: falling / twinkling layers made of tiled dots; only transforms and opacity move */
html[data-theme="snow"] body::before,html[data-theme="snow"] body::after,html[data-theme="rain"] body::before,html[data-theme="rain"] body::after,
html[data-theme="petals"] body::before,html[data-theme="petals"] body::after,html[data-theme="starry"] body::before,html[data-theme="starry"] body::after{content:"";position:fixed;left:0;top:-600px;width:100%;height:calc(100% + 600px);pointer-events:none;z-index:2999;will-change:transform;}
@keyframes fall400{to{transform:translateY(400px)}}
@keyframes fall600{to{transform:translateY(600px)}}
@keyframes themeTwinkle{0%,100%{opacity:.3}50%{opacity:1}}
html[data-theme="snow"] body::before{background:radial-gradient(circle at 40px 30px,rgba(255,255,255,.95) 0 2px,transparent 3px),radial-gradient(circle at 150px 120px,rgba(255,255,255,.8) 0 1.5px,transparent 2.5px),radial-gradient(circle at 280px 60px,rgba(255,255,255,.9) 0 2.5px,transparent 3.5px),radial-gradient(circle at 340px 250px,rgba(255,255,255,.75) 0 1.5px,transparent 2.5px),radial-gradient(circle at 90px 300px,rgba(255,255,255,.9) 0 2px,transparent 3px),radial-gradient(circle at 230px 350px,rgba(255,255,255,.7) 0 1.5px,transparent 2.5px);background-size:400px 400px;animation:fall400 9s linear infinite;opacity:.8;}
html[data-theme="snow"] body::after{background:radial-gradient(circle at 80px 70px,rgba(255,255,255,.9) 0 4px,transparent 5.5px),radial-gradient(circle at 320px 200px,rgba(255,255,255,.8) 0 3.5px,transparent 5px),radial-gradient(circle at 460px 400px,rgba(255,255,255,.85) 0 4.5px,transparent 6px),radial-gradient(circle at 200px 520px,rgba(255,255,255,.8) 0 3.5px,transparent 5px);background-size:600px 600px;filter:blur(.6px);animation:fall600 15s linear infinite;opacity:.55;}
html[data-theme="rain"] body::before{background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cline%20x1='30'%20y1='20'%20x2='30'%20y2='48'%20stroke='%23aac8f0'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.7'/%3E%3Cline%20x1='110'%20y1='140'%20x2='110'%20y2='162'%20stroke='%23aac8f0'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.6'/%3E%3Cline%20x1='190'%20y1='60'%20x2='190'%20y2='92'%20stroke='%23aac8f0'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.7'/%3E%3Cline%20x1='250'%20y1='210'%20x2='250'%20y2='234'%20stroke='%23aac8f0'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.5'/%3E%3Cline%20x1='70'%20y1='250'%20x2='70'%20y2='278'%20stroke='%23aac8f0'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.6'/%3E%3Cline%20x1='275'%20y1='100'%20x2='275'%20y2='120'%20stroke='%23aac8f0'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.6'/%3E%3Cline%20x1='160'%20y1='285'%20x2='160'%20y2='303'%20stroke='%23aac8f0'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.5'/%3E%3C/svg%3E");background-size:300px 300px;animation:fall300 .8s linear infinite;opacity:.6;}
html[data-theme="rain"] body::after{background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='500'%20height='500'%3E%3Cline%20x1='60'%20y1='40'%20x2='60'%20y2='78'%20stroke='%2396b9e6'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.6'/%3E%3Cline%20x1='240'%20y1='220'%20x2='240'%20y2='254'%20stroke='%2396b9e6'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.5'/%3E%3Cline%20x1='410'%20y1='120'%20x2='410'%20y2='160'%20stroke='%2396b9e6'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.5'/%3E%3Cline%20x1='150'%20y1='380'%20x2='150'%20y2='412'%20stroke='%2396b9e6'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.45'/%3E%3Cline%20x1='460'%20y1='430'%20x2='460'%20y2='460'%20stroke='%2396b9e6'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.5'/%3E%3C/svg%3E");background-size:500px 500px;animation:fall500 1.4s linear infinite;opacity:.45;}
@keyframes fall500{to{transform:translateY(500px)}}
html[data-theme="petals"] body::before{background:radial-gradient(ellipse 6px 4px at 50px 40px,rgba(255,170,200,.95),transparent 75%),radial-gradient(ellipse 5px 3.5px at 190px 150px,rgba(255,205,225,.9),transparent 75%),radial-gradient(ellipse 6px 4px at 320px 90px,rgba(255,150,190,.9),transparent 75%),radial-gradient(ellipse 5px 3.5px at 120px 300px,rgba(255,190,215,.9),transparent 75%),radial-gradient(ellipse 6px 4px at 350px 330px,rgba(255,170,200,.9),transparent 75%);background-size:400px 400px;animation:fall400 14s linear infinite;opacity:.75;}
html[data-theme="petals"] body::after{background:radial-gradient(ellipse 9px 6px at 100px 90px,rgba(255,175,205,.9),transparent 75%),radial-gradient(ellipse 8px 5px at 400px 260px,rgba(255,215,230,.85),transparent 75%),radial-gradient(ellipse 9px 6px at 250px 480px,rgba(255,160,195,.9),transparent 75%);background-size:600px 600px;filter:blur(.5px);animation:fall600 22s linear infinite;opacity:.5;}
html[data-theme="starry"] body::before{top:0;height:100%;background:radial-gradient(circle at 60px 50px,#fff 0 1px,transparent 2px),radial-gradient(circle at 210px 140px,#ffe9a8 0 1.5px,transparent 2.5px),radial-gradient(circle at 400px 80px,#fff 0 1px,transparent 2px),radial-gradient(circle at 300px 320px,#cfe0ff 0 1.5px,transparent 2.5px),radial-gradient(circle at 90px 380px,#fff 0 1px,transparent 2px),radial-gradient(circle at 460px 430px,#ffe9a8 0 1.5px,transparent 2.5px);background-size:500px 500px;animation:themeTwinkle 3.2s ease-in-out infinite;opacity:.8;}
html[data-theme="starry"] body::after{top:0;height:100%;background:radial-gradient(circle at 130px 90px,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 520px 210px,#cfe0ff 0 1px,transparent 2px),radial-gradient(circle at 330px 480px,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 610px 560px,#ffe9a8 0 1px,transparent 2px),radial-gradient(circle at 40px 600px,#fff 0 1px,transparent 2px);background-size:700px 700px;animation:themeTwinkle 4.6s ease-in-out -1.8s infinite;opacity:.7;}
@keyframes fall300{to{transform:translateY(300px)}}
html[data-theme="gamer"] body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:2999;box-shadow:inset 0 0 0 2px #ff2d55,inset 0 0 90px 0 rgba(255,45,85,.22);animation:decoHue 7s linear infinite;}
html[data-theme="sunrise"] body::before{content:"";position:fixed;left:-30%;top:-30%;width:160%;height:160%;pointer-events:none;z-index:2999;mix-blend-mode:screen;will-change:transform;opacity:.22;background:linear-gradient(0deg,rgba(255,140,60,.7),transparent 45%),radial-gradient(35% 30% at 25% 85%,#ff7a3d 0,transparent 70%),radial-gradient(30% 25% at 75% 75%,#ff4f8b 0,transparent 70%),radial-gradient(30% 25% at 55% 20%,#7a4cff 0,transparent 70%);animation:themeDrift 26s ease-in-out infinite alternate,themeBreathe 9s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){html[data-theme] body::after{animation:none!important;}}
html[data-theme="snow"]{--cyan:#bfe3ff;--cyan-dim:#7fa9cc;--ink:#0a1220;--panel:#101b2e;--panel-2:#16233a;--line:#2a3f60;--glow:#1d3050;--text:#eef6ff;--text-dim:#93aed0;--text-faint:#5f7a9e;--on-accent:#0a1830;--scroll:#2a3f60;}
html[data-theme="rain"]{--cyan:#7aa8d8;--cyan-dim:#52799f;--ink:#070b12;--panel:#0d141f;--panel-2:#121b29;--line:#233248;--glow:#182436;--text:#dfe9f5;--text-dim:#8497b0;--text-faint:#56667c;--on-accent:#06101c;--scroll:#233248;}
html[data-theme="starry"]{--cyan:#ffd873;--cyan-dim:#b8964a;--ink:#050818;--panel:#0a1028;--panel-2:#0f1634;--line:#222b5a;--glow:#18204a;--text:#eef0ff;--text-dim:#98a0cf;--text-faint:#5f679a;--on-accent:#1c1400;--scroll:#222b5a;}
html[data-theme="petals"]{--cyan:#ff9fc0;--cyan-dim:#c46a8c;--ink:#160c14;--panel:#1f1119;--panel-2:#2b1826;--line:#4d2a42;--glow:#3b2033;--text:#fdeaf2;--text-dim:#cc9db4;--text-faint:#8e6679;--on-accent:#2a0a18;--scroll:#4d2a42;}
html[data-theme="gamer"]{--cyan:#ff2d55;--cyan-dim:#b01e3b;--ink:#07070b;--panel:#0e0e15;--panel-2:#15151f;--line:#2a2a3d;--glow:#1d1d2c;--text:#f0f0fa;--text-dim:#9a9ab5;--text-faint:#62627d;--on-accent:#fff;--scroll:#2a2a3d;}
html[data-theme="sunrise"]{--cyan:#ff9a5c;--cyan-dim:#c26a35;--ink:#150a14;--panel:#1e0f1c;--panel-2:#2c1426;--line:#4f2a3f;--glow:#3c1f33;--text:#ffeee4;--text-dim:#cfa08f;--text-faint:#91685b;--on-accent:#2a1000;--scroll:#4f2a3f;}

/* ---- 3D frames: bevels, glass, rings that pass behind and in front of the picture ---- */
.d-bevel{box-shadow:0 3px 7px rgba(0,0,0,.55);}
.d-bevel>img:first-child{box-shadow:0 0 0 1.5px rgba(0,0,0,.55);}
.d-bevel::before{background:conic-gradient(#fff,#8d96a3 12%,#eef2f7 25%,#4f5762 40%,#d7dde6 55%,#7b8492 70%,#f6f9fc 85%,#fff);-webkit-mask:var(--ring);mask:var(--ring);filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));}
.d-bevel::after{background:conic-gradient(transparent 0 82%,rgba(255,255,255,.95) 92%,transparent 100%);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 3.4s linear infinite;}
.d-bubble{box-shadow:0 0 14px 1px rgba(140,200,255,.3);}
.d-bubble::before{background:conic-gradient(rgba(255,150,220,.65),rgba(150,200,255,.65) 25%,rgba(150,255,220,.65) 50%,rgba(255,240,150,.65) 75%,rgba(255,150,220,.65));-webkit-mask:radial-gradient(farthest-side,transparent 74%,#000 76%);mask:radial-gradient(farthest-side,transparent 74%,#000 76%);animation:decoSpin 9s linear infinite;}
.d-bubble::after{background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.9) 0 5%,transparent 13%),radial-gradient(circle at 72% 86%,rgba(150,220,255,.4),transparent 30%),radial-gradient(closest-side,transparent 78%,rgba(255,255,255,.28) 92%,transparent 100%);animation:decoPulse 3.5s ease-in-out infinite;}
.d-pixel::before{background:repeating-conic-gradient(#ff5d8f 0 15deg,#ffd166 15deg 30deg,#06d6a0 30deg 45deg,#118ab2 45deg 60deg);-webkit-mask:var(--ring);mask:var(--ring);filter:drop-shadow(0 3px 0 #15151a);animation:decoSpin 4s steps(24) infinite;}
.d-pixel::after{inset:-12%;border:1px solid rgba(255,255,255,.18);}
.d-gem{box-shadow:0 0 10px 1px rgba(255,200,80,.25);}
.d-gem::before{background:conic-gradient(#fff3b0,#c89313 25%,#6b4300 45%,#e8b923 65%,#fff3b0 85%,#c89313);-webkit-mask:var(--ring);mask:var(--ring);filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));}
.d-gem::after{inset:-17%;background:radial-gradient(circle at 36% 34%,#fff 0 14%,#ff4d6d 34%,#7a0020 100%) 50% 0%/17% 17% no-repeat,radial-gradient(circle at 36% 34%,#fff 0 14%,#4dc3ff 34%,#00306b 100%) 100% 50%/17% 17% no-repeat,radial-gradient(circle at 36% 34%,#fff 0 14%,#5dff9e 34%,#00531e 100%) 50% 100%/17% 17% no-repeat,radial-gradient(circle at 36% 34%,#fff 0 14%,#ffe066 34%,#7a5a00 100%) 0% 50%/17% 17% no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));animation:decoSpin 14s linear infinite;}
.d-coin{box-shadow:0 2px 9px rgba(255,190,40,.4);}
.d-coin::before{background:repeating-conic-gradient(rgba(0,0,0,.28) 0 2.5deg,transparent 2.5deg 6deg),conic-gradient(#fff2a8,#d9a40f 20%,#8a5a00 40%,#ffe27a 60%,#b97f00 80%,#fff2a8);-webkit-mask:radial-gradient(farthest-side,transparent 79%,#000 80.5%);mask:radial-gradient(farthest-side,transparent 79%,#000 80.5%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.65));}
.d-coin::after{background:conic-gradient(transparent 0 78%,rgba(255,255,255,.9) 90%,transparent 100%);-webkit-mask:radial-gradient(farthest-side,transparent 79%,#000 80.5%);mask:radial-gradient(farthest-side,transparent 79%,#000 80.5%);animation:decoSpin 4.2s linear infinite;}
.d-glass{box-shadow:0 0 12px 1px rgba(120,200,255,.28);}
.d-glass::before{background:conic-gradient(#fff,rgba(150,210,255,.5) 25%,#fff 50%,rgba(150,210,255,.5) 75%,#fff);-webkit-mask:var(--ring);mask:var(--ring);animation:decoSpin 8s linear infinite;}
.d-glass::after{inset:12%;border-radius:50%;background:radial-gradient(ellipse 62% 40% at 36% 22%,rgba(255,255,255,.6),transparent 70%),radial-gradient(circle at 50% 118%,rgba(120,200,255,.4),transparent 56%);box-shadow:inset 0 0 8px rgba(255,255,255,.4),inset 0 -6px 10px rgba(0,70,140,.35);}
.d-gears{box-shadow:0 0 8px rgba(184,115,51,.35);}
.d-gears::before{background:repeating-conic-gradient(#d28a45 0 9deg,#7a431a 9deg 13deg,transparent 13deg 20deg);-webkit-mask:var(--ring);mask:var(--ring);filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));animation:decoSpin 12s linear infinite;}
.d-gears::after{inset:-22%;background:repeating-conic-gradient(#a98050 0 5deg,#5c3a18 5deg 8deg,transparent 8deg 12deg);-webkit-mask:radial-gradient(farthest-side,transparent 86%,#000 88%);mask:radial-gradient(farthest-side,transparent 86%,#000 88%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));animation:decoSpin 9s linear infinite reverse;}
.d-diamond{box-shadow:0 0 14px 2px rgba(150,230,255,.35);}
.d-diamond::before{background:repeating-conic-gradient(#fff 0 10deg,#9be7ff 10deg 20deg,#4cb8ff 20deg 30deg,#e6fbff 30deg 40deg);-webkit-mask:var(--ring);mask:var(--ring);filter:drop-shadow(0 0 3px rgba(150,230,255,.8));animation:decoSpin 16s linear infinite;}
.d-diamond::after{inset:-30%;background:linear-gradient(90deg,transparent 42%,#fff 50%,transparent 58%) 8% 8%/26% 26% no-repeat,linear-gradient(0deg,transparent 42%,#fff 50%,transparent 58%) 8% 8%/26% 26% no-repeat,linear-gradient(90deg,transparent 42%,#fff 50%,transparent 58%) 74% 66%/22% 22% no-repeat,linear-gradient(0deg,transparent 42%,#fff 50%,transparent 58%) 74% 66%/22% 22% no-repeat,linear-gradient(90deg,transparent 42%,#fff 50%,transparent 58%) 60% 0%/14% 14% no-repeat,linear-gradient(0deg,transparent 42%,#fff 50%,transparent 58%) 60% 0%/14% 14% no-repeat;filter:drop-shadow(0 0 3px #bdf3ff);animation:decoTwinkle 1.8s ease-in-out infinite;}

/* ---- art frames: drawn as SVG rings (wreaths, rays, petals, runes, wings) ---- */
.d-leaf::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%239be86b'/%3E%3Cstop offset='1' stop-color='%231f7a34'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236fcf5a'/%3E%3Cstop offset='1' stop-color='%2314602a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='43.2' fill='none' stroke='%232a7d36' stroke-width='1.3'/%3E%3Cellipse cx='50.00' cy='5.40' rx='6.4' ry='2.5' transform='rotate(58.00 50.00 5.40)' fill='url(%23b)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='63.78' cy='7.58' rx='6.4' ry='2.5' transform='rotate(140.00 63.78 7.58)' fill='url(%23a)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='76.22' cy='13.92' rx='6.4' ry='2.5' transform='rotate(94.00 76.22 13.92)' fill='url(%23b)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='86.08' cy='23.78' rx='6.4' ry='2.5' transform='rotate(176.00 86.08 23.78)' fill='url(%23a)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='92.42' cy='36.22' rx='6.4' ry='2.5' transform='rotate(130.00 92.42 36.22)' fill='url(%23b)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='94.60' cy='50.00' rx='6.4' ry='2.5' transform='rotate(212.00 94.60 50.00)' fill='url(%23a)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='92.42' cy='63.78' rx='6.4' ry='2.5' transform='rotate(166.00 92.42 63.78)' fill='url(%23b)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='86.08' cy='76.22' rx='6.4' ry='2.5' transform='rotate(248.00 86.08 76.22)' fill='url(%23a)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='76.22' cy='86.08' rx='6.4' ry='2.5' transform='rotate(202.00 76.22 86.08)' fill='url(%23b)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='63.78' cy='92.42' rx='6.4' ry='2.5' transform='rotate(284.00 63.78 92.42)' fill='url(%23a)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='50.00' cy='94.60' rx='6.4' ry='2.5' transform='rotate(238.00 50.00 94.60)' fill='url(%23b)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='36.22' cy='92.42' rx='6.4' ry='2.5' transform='rotate(320.00 36.22 92.42)' fill='url(%23a)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='23.78' cy='86.08' rx='6.4' ry='2.5' transform='rotate(274.00 23.78 86.08)' fill='url(%23b)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='13.92' cy='76.22' rx='6.4' ry='2.5' transform='rotate(356.00 13.92 76.22)' fill='url(%23a)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='7.58' cy='63.78' rx='6.4' ry='2.5' transform='rotate(310.00 7.58 63.78)' fill='url(%23b)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='5.40' cy='50.00' rx='6.4' ry='2.5' transform='rotate(392.00 5.40 50.00)' fill='url(%23a)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='7.58' cy='36.22' rx='6.4' ry='2.5' transform='rotate(346.00 7.58 36.22)' fill='url(%23b)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='13.92' cy='23.78' rx='6.4' ry='2.5' transform='rotate(428.00 13.92 23.78)' fill='url(%23a)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='23.78' cy='13.92' rx='6.4' ry='2.5' transform='rotate(382.00 23.78 13.92)' fill='url(%23b)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Cellipse cx='36.22' cy='7.58' rx='6.4' ry='2.5' transform='rotate(464.00 36.22 7.58)' fill='url(%23a)' stroke='%230f4a1d' stroke-width='.35'/%3E%3Ccircle cx='72.00' cy='11.89' r='1.9' fill='%23ff4d6d' stroke='%238a1030' stroke-width='.4'/%3E%3Ccircle cx='71.50' cy='11.39' r='.55' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='94.00' cy='50.00' r='1.9' fill='%23ff4d6d' stroke='%238a1030' stroke-width='.4'/%3E%3Ccircle cx='93.50' cy='49.50' r='.55' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='72.00' cy='88.11' r='1.9' fill='%23ff4d6d' stroke='%238a1030' stroke-width='.4'/%3E%3Ccircle cx='71.50' cy='87.61' r='.55' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='28.00' cy='88.11' r='1.9' fill='%23ff4d6d' stroke='%238a1030' stroke-width='.4'/%3E%3Ccircle cx='27.50' cy='87.61' r='.55' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='6.00' cy='50.00' r='1.9' fill='%23ff4d6d' stroke='%238a1030' stroke-width='.4'/%3E%3Ccircle cx='5.50' cy='49.50' r='.55' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='28.00' cy='11.89' r='1.9' fill='%23ff4d6d' stroke='%238a1030' stroke-width='.4'/%3E%3Ccircle cx='27.50' cy='11.39' r='.55' fill='%23fff' opacity='.8'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:decoSpin 40s linear infinite;filter:drop-shadow(0 1px 1px rgba(0,30,0,.6));}
.d-sun{box-shadow:0 0 14px 2px rgba(255,190,40,.4);}
.d-sun::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6b0'/%3E%3Cstop offset='1' stop-color='%23ff9d00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='41.9' fill='none' stroke='%23ffc933' stroke-width='1.6'/%3E%3Cpolygon points='47.75,8.46 50.00,0.40 52.25,8.46' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='59.07,9.40 61.96,5.37 62.44,10.30' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='68.82,12.90 74.80,7.05 72.72,15.15' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='78.16,19.38 82.67,17.33 80.62,21.84' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='84.85,27.28 92.95,25.20 87.10,31.18' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='89.70,37.56 94.63,38.04 90.60,40.93' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='91.54,47.75 99.60,50.00 91.54,52.25' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='90.60,59.07 94.63,61.96 89.70,62.44' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='87.10,68.82 92.95,74.80 84.85,72.72' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='80.62,78.16 82.67,82.67 78.16,80.62' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='72.72,84.85 74.80,92.95 68.82,87.10' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='62.44,89.70 61.96,94.63 59.07,90.60' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='52.25,91.54 50.00,99.60 47.75,91.54' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='40.93,90.60 38.04,94.63 37.56,89.70' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='31.18,87.10 25.20,92.95 27.28,84.85' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='21.84,80.62 17.33,82.67 19.38,78.16' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='15.15,72.72 7.05,74.80 12.90,68.82' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='10.30,62.44 5.37,61.96 9.40,59.07' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='8.46,52.25 0.40,50.00 8.46,47.75' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='9.40,40.93 5.37,38.04 10.30,37.56' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='12.90,31.18 7.05,25.20 15.15,27.28' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='19.38,21.84 17.33,17.33 21.84,19.38' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='27.28,15.15 25.20,7.05 31.18,12.90' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='37.56,10.30 38.04,5.37 40.93,9.40' fill='url(%23g)' stroke='%23b36200' stroke-width='.35' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:decoSpin 24s linear infinite;filter:drop-shadow(0 0 3px rgba(255,170,0,.8));}
.d-snow{box-shadow:0 0 12px 1px rgba(150,220,255,.25);}
.d-snow::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='%23a9e1ff' stroke-opacity='.65' stroke-width='1.2'/%3E%3Cg stroke='%23f1fbff' stroke-width='.9' stroke-linecap='round' fill='none'%3E%3Cline x1='50.00' y1='0.10' x2='50.00' y2='8.70'/%3E%3Cline x1='50.00' y1='1.73' x2='49.12' y2='0.68'/%3E%3Cline x1='50.00' y1='1.73' x2='50.88' y2='0.68'/%3E%3Cline x1='50.00' y1='7.07' x2='50.88' y2='8.12'/%3E%3Cline x1='50.00' y1='7.07' x2='49.12' y2='8.12'/%3E%3Cline x1='53.72' y1='2.25' x2='46.28' y2='6.55'/%3E%3Cline x1='52.31' y1='3.07' x2='52.78' y2='1.77'/%3E%3Cline x1='52.31' y1='3.07' x2='53.66' y2='3.31'/%3E%3Cline x1='47.69' y1='5.73' x2='47.22' y2='7.03'/%3E%3Cline x1='47.69' y1='5.73' x2='46.34' y2='5.49'/%3E%3Cline x1='53.72' y1='6.55' x2='46.28' y2='2.25'/%3E%3Cline x1='52.31' y1='5.73' x2='53.66' y2='5.49'/%3E%3Cline x1='52.31' y1='5.73' x2='52.78' y2='7.03'/%3E%3Cline x1='47.69' y1='3.07' x2='46.34' y2='3.31'/%3E%3Cline x1='47.69' y1='3.07' x2='47.22' y2='1.77'/%3E%3Cline x1='82.24' y1='14.46' x2='82.24' y2='21.06'/%3E%3Cline x1='82.24' y1='15.71' x2='81.57' y2='14.90'/%3E%3Cline x1='82.24' y1='15.71' x2='82.92' y2='14.90'/%3E%3Cline x1='82.24' y1='19.80' x2='82.92' y2='20.61'/%3E%3Cline x1='82.24' y1='19.80' x2='81.57' y2='20.61'/%3E%3Cline x1='85.10' y1='16.11' x2='79.39' y2='19.41'/%3E%3Cline x1='84.02' y1='16.73' x2='84.38' y2='15.74'/%3E%3Cline x1='84.02' y1='16.73' x2='85.06' y2='16.92'/%3E%3Cline x1='80.47' y1='18.78' x2='80.11' y2='19.77'/%3E%3Cline x1='80.47' y1='18.78' x2='79.43' y2='18.60'/%3E%3Cline x1='85.10' y1='19.41' x2='79.39' y2='16.11'/%3E%3Cline x1='84.02' y1='18.78' x2='85.06' y2='18.60'/%3E%3Cline x1='84.02' y1='18.78' x2='84.38' y2='19.77'/%3E%3Cline x1='80.47' y1='16.73' x2='79.43' y2='16.92'/%3E%3Cline x1='80.47' y1='16.73' x2='80.11' y2='15.74'/%3E%3Cline x1='95.60' y1='45.70' x2='95.60' y2='54.30'/%3E%3Cline x1='95.60' y1='47.33' x2='94.72' y2='46.28'/%3E%3Cline x1='95.60' y1='47.33' x2='96.48' y2='46.28'/%3E%3Cline x1='95.60' y1='52.67' x2='96.48' y2='53.72'/%3E%3Cline x1='95.60' y1='52.67' x2='94.72' y2='53.72'/%3E%3Cline x1='99.32' y1='47.85' x2='91.88' y2='52.15'/%3E%3Cline x1='97.91' y1='48.67' x2='98.38' y2='47.37'/%3E%3Cline x1='97.91' y1='48.67' x2='99.26' y2='48.91'/%3E%3Cline x1='93.29' y1='51.33' x2='92.82' y2='52.63'/%3E%3Cline x1='93.29' y1='51.33' x2='91.94' y2='51.09'/%3E%3Cline x1='99.32' y1='52.15' x2='91.88' y2='47.85'/%3E%3Cline x1='97.91' y1='51.33' x2='99.26' y2='51.09'/%3E%3Cline x1='97.91' y1='51.33' x2='98.38' y2='52.63'/%3E%3Cline x1='93.29' y1='48.67' x2='91.94' y2='48.91'/%3E%3Cline x1='93.29' y1='48.67' x2='92.82' y2='47.37'/%3E%3Cline x1='82.24' y1='78.94' x2='82.24' y2='85.54'/%3E%3Cline x1='82.24' y1='80.20' x2='81.57' y2='79.39'/%3E%3Cline x1='82.24' y1='80.20' x2='82.92' y2='79.39'/%3E%3Cline x1='82.24' y1='84.29' x2='82.92' y2='85.10'/%3E%3Cline x1='82.24' y1='84.29' x2='81.57' y2='85.10'/%3E%3Cline x1='85.10' y1='80.59' x2='79.39' y2='83.89'/%3E%3Cline x1='84.02' y1='81.22' x2='84.38' y2='80.23'/%3E%3Cline x1='84.02' y1='81.22' x2='85.06' y2='81.40'/%3E%3Cline x1='80.47' y1='83.27' x2='80.11' y2='84.26'/%3E%3Cline x1='80.47' y1='83.27' x2='79.43' y2='83.08'/%3E%3Cline x1='85.10' y1='83.89' x2='79.39' y2='80.59'/%3E%3Cline x1='84.02' y1='83.27' x2='85.06' y2='83.08'/%3E%3Cline x1='84.02' y1='83.27' x2='84.38' y2='84.26'/%3E%3Cline x1='80.47' y1='81.22' x2='79.43' y2='81.40'/%3E%3Cline x1='80.47' y1='81.22' x2='80.11' y2='80.23'/%3E%3Cline x1='50.00' y1='91.30' x2='50.00' y2='99.90'/%3E%3Cline x1='50.00' y1='92.93' x2='49.12' y2='91.88'/%3E%3Cline x1='50.00' y1='92.93' x2='50.88' y2='91.88'/%3E%3Cline x1='50.00' y1='98.27' x2='50.88' y2='99.32'/%3E%3Cline x1='50.00' y1='98.27' x2='49.12' y2='99.32'/%3E%3Cline x1='53.72' y1='93.45' x2='46.28' y2='97.75'/%3E%3Cline x1='52.31' y1='94.27' x2='52.78' y2='92.97'/%3E%3Cline x1='52.31' y1='94.27' x2='53.66' y2='94.51'/%3E%3Cline x1='47.69' y1='96.93' x2='47.22' y2='98.23'/%3E%3Cline x1='47.69' y1='96.93' x2='46.34' y2='96.69'/%3E%3Cline x1='53.72' y1='97.75' x2='46.28' y2='93.45'/%3E%3Cline x1='52.31' y1='96.93' x2='53.66' y2='96.69'/%3E%3Cline x1='52.31' y1='96.93' x2='52.78' y2='98.23'/%3E%3Cline x1='47.69' y1='94.27' x2='46.34' y2='94.51'/%3E%3Cline x1='47.69' y1='94.27' x2='47.22' y2='92.97'/%3E%3Cline x1='17.76' y1='78.94' x2='17.76' y2='85.54'/%3E%3Cline x1='17.76' y1='80.20' x2='17.08' y2='79.39'/%3E%3Cline x1='17.76' y1='80.20' x2='18.43' y2='79.39'/%3E%3Cline x1='17.76' y1='84.29' x2='18.43' y2='85.10'/%3E%3Cline x1='17.76' y1='84.29' x2='17.08' y2='85.10'/%3E%3Cline x1='20.61' y1='80.59' x2='14.90' y2='83.89'/%3E%3Cline x1='19.53' y1='81.22' x2='19.89' y2='80.23'/%3E%3Cline x1='19.53' y1='81.22' x2='20.57' y2='81.40'/%3E%3Cline x1='15.98' y1='83.27' x2='15.62' y2='84.26'/%3E%3Cline x1='15.98' y1='83.27' x2='14.94' y2='83.08'/%3E%3Cline x1='20.61' y1='83.89' x2='14.90' y2='80.59'/%3E%3Cline x1='19.53' y1='83.27' x2='20.57' y2='83.08'/%3E%3Cline x1='19.53' y1='83.27' x2='19.89' y2='84.26'/%3E%3Cline x1='15.98' y1='81.22' x2='14.94' y2='81.40'/%3E%3Cline x1='15.98' y1='81.22' x2='15.62' y2='80.23'/%3E%3Cline x1='4.40' y1='45.70' x2='4.40' y2='54.30'/%3E%3Cline x1='4.40' y1='47.33' x2='3.52' y2='46.28'/%3E%3Cline x1='4.40' y1='47.33' x2='5.28' y2='46.28'/%3E%3Cline x1='4.40' y1='52.67' x2='5.28' y2='53.72'/%3E%3Cline x1='4.40' y1='52.67' x2='3.52' y2='53.72'/%3E%3Cline x1='8.12' y1='47.85' x2='0.68' y2='52.15'/%3E%3Cline x1='6.71' y1='48.67' x2='7.18' y2='47.37'/%3E%3Cline x1='6.71' y1='48.67' x2='8.06' y2='48.91'/%3E%3Cline x1='2.09' y1='51.33' x2='1.62' y2='52.63'/%3E%3Cline x1='2.09' y1='51.33' x2='0.74' y2='51.09'/%3E%3Cline x1='8.12' y1='52.15' x2='0.68' y2='47.85'/%3E%3Cline x1='6.71' y1='51.33' x2='8.06' y2='51.09'/%3E%3Cline x1='6.71' y1='51.33' x2='7.18' y2='52.63'/%3E%3Cline x1='2.09' y1='48.67' x2='0.74' y2='48.91'/%3E%3Cline x1='2.09' y1='48.67' x2='1.62' y2='47.37'/%3E%3Cline x1='17.76' y1='14.46' x2='17.76' y2='21.06'/%3E%3Cline x1='17.76' y1='15.71' x2='17.08' y2='14.90'/%3E%3Cline x1='17.76' y1='15.71' x2='18.43' y2='14.90'/%3E%3Cline x1='17.76' y1='19.80' x2='18.43' y2='20.61'/%3E%3Cline x1='17.76' y1='19.80' x2='17.08' y2='20.61'/%3E%3Cline x1='20.61' y1='16.11' x2='14.90' y2='19.41'/%3E%3Cline x1='19.53' y1='16.73' x2='19.89' y2='15.74'/%3E%3Cline x1='19.53' y1='16.73' x2='20.57' y2='16.92'/%3E%3Cline x1='15.98' y1='18.78' x2='15.62' y2='19.77'/%3E%3Cline x1='15.98' y1='18.78' x2='14.94' y2='18.60'/%3E%3Cline x1='20.61' y1='19.41' x2='14.90' y2='16.11'/%3E%3Cline x1='19.53' y1='18.78' x2='20.57' y2='18.60'/%3E%3Cline x1='19.53' y1='18.78' x2='19.89' y2='19.77'/%3E%3Cline x1='15.98' y1='16.73' x2='14.94' y2='16.92'/%3E%3Cline x1='15.98' y1='16.73' x2='15.62' y2='15.74'/%3E%3C/g%3E%3Ccircle cx='67.45' cy='7.87' r='1.1' fill='%23fff'/%3E%3Ccircle cx='92.13' cy='32.55' r='1.1' fill='%23fff'/%3E%3Ccircle cx='92.13' cy='67.45' r='1.1' fill='%23fff'/%3E%3Ccircle cx='67.45' cy='92.13' r='1.1' fill='%23fff'/%3E%3Ccircle cx='32.55' cy='92.13' r='1.1' fill='%23fff'/%3E%3Ccircle cx='7.87' cy='67.45' r='1.1' fill='%23fff'/%3E%3Ccircle cx='7.87' cy='32.55' r='1.1' fill='%23fff'/%3E%3Ccircle cx='32.55' cy='7.87' r='1.1' fill='%23fff'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:decoSpin 30s linear infinite reverse;filter:drop-shadow(0 0 3px rgba(150,220,255,.8));}
.d-catears::before{background:conic-gradient(#ffd9e8,#ff8fbb 30%,#fff 55%,#ff8fbb 80%,#ffd9e8);-webkit-mask:var(--ring);mask:var(--ring);}
.d-catears::after{inset:auto;left:50%;top:-27%;width:96%;height:57.6%;border-radius:0;transform:translateX(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23ff9ec4'/%3E%3Cstop offset='1' stop-color='%23ffd9e8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 52 C4 30 8 12 14 4 C26 8 40 18 48 34 Z' fill='%232b2234' stroke='%23ff9ec4' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M13 44 C12 30 14 20 17 14 C26 18 34 25 39 34 Z' fill='url(%23c)'/%3E%3Cg transform='translate(100 0) scale(-1 1)'%3E%3Cpath d='M6 52 C4 30 8 12 14 4 C26 8 40 18 48 34 Z' fill='%232b2234' stroke='%23ff9ec4' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M13 44 C12 30 14 20 17 14 C26 18 34 25 39 34 Z' fill='url(%23c)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));animation:decoEar 4s ease-in-out infinite;}
@keyframes decoEar{0%,86%,100%{transform:translateX(-50%) rotate(0)}91%{transform:translateX(-50%) rotate(-4deg)}96%{transform:translateX(-50%) rotate(3deg)}}
.d-rose::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='r' cx='.4' cy='.35'%3E%3Cstop offset='0' stop-color='%23ff8aa0'/%3E%3Cstop offset='.6' stop-color='%23d81e45'/%3E%3Cstop offset='1' stop-color='%237a0a22'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='43' fill='none' stroke='%232f8f3f' stroke-width='1.5' stroke-dasharray='7 1.6'/%3E%3Cellipse cx='56.04' cy='7.02' rx='4' ry='1.9' transform='rotate(58.00 56.04 7.02)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='74.09' cy='13.90' rx='4' ry='1.9' transform='rotate(163.71 74.09 13.90)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='87.37' cy='27.93' rx='4' ry='1.9' transform='rotate(109.43 87.37 27.93)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='93.24' cy='46.33' rx='4' ry='1.9' transform='rotate(215.14 93.24 46.33)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='90.56' cy='65.45' rx='4' ry='1.9' transform='rotate(160.86 90.56 65.45)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='79.84' cy='81.52' rx='4' ry='1.9' transform='rotate(266.57 79.84 81.52)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='63.21' cy='91.34' rx='4' ry='1.9' transform='rotate(212.29 63.21 91.34)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='43.96' cy='92.98' rx='4' ry='1.9' transform='rotate(318.00 43.96 92.98)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='25.91' cy='86.10' rx='4' ry='1.9' transform='rotate(263.71 25.91 86.10)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='12.63' cy='72.07' rx='4' ry='1.9' transform='rotate(369.43 12.63 72.07)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='6.76' cy='53.67' rx='4' ry='1.9' transform='rotate(315.14 6.76 53.67)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='9.44' cy='34.55' rx='4' ry='1.9' transform='rotate(420.86 9.44 34.55)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='20.16' cy='18.48' rx='4' ry='1.9' transform='rotate(366.57 20.16 18.48)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Cellipse cx='36.79' cy='8.66' rx='4' ry='1.9' transform='rotate(472.29 36.79 8.66)' fill='%233fae52' stroke='%23176428' stroke-width='.3'/%3E%3Ccircle cx='81.82' cy='18.18' r='5.4' fill='url(%23r)' stroke='%235a0618' stroke-width='.5'/%3E%3Cpath d='M79.22 18.18 a2.6 2.6 0 0 1 5.2 0 a1.7 1.7 0 0 1 -3.4 0 a.9 .9 0 0 1 1.8 0' fill='none' stroke='%236a0a20' stroke-width='.6'/%3E%3Ccircle cx='81.82' cy='81.82' r='5.4' fill='url(%23r)' stroke='%235a0618' stroke-width='.5'/%3E%3Cpath d='M79.22 81.82 a2.6 2.6 0 0 1 5.2 0 a1.7 1.7 0 0 1 -3.4 0 a.9 .9 0 0 1 1.8 0' fill='none' stroke='%236a0a20' stroke-width='.6'/%3E%3Ccircle cx='18.18' cy='81.82' r='5.4' fill='url(%23r)' stroke='%235a0618' stroke-width='.5'/%3E%3Cpath d='M15.58 81.82 a2.6 2.6 0 0 1 5.2 0 a1.7 1.7 0 0 1 -3.4 0 a.9 .9 0 0 1 1.8 0' fill='none' stroke='%236a0a20' stroke-width='.6'/%3E%3Ccircle cx='18.18' cy='18.18' r='5.4' fill='url(%23r)' stroke='%235a0618' stroke-width='.5'/%3E%3Cpath d='M15.58 18.18 a2.6 2.6 0 0 1 5.2 0 a1.7 1.7 0 0 1 -3.4 0 a.9 .9 0 0 1 1.8 0' fill='none' stroke='%236a0a20' stroke-width='.6'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:decoSpin 60s linear infinite;filter:drop-shadow(0 1px 1px rgba(40,0,10,.6));}
.d-flame{box-shadow:0 0 14px 2px rgba(255,110,10,.5);}
.d-flame::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23c21500'/%3E%3Cstop offset='.5' stop-color='%23ff7a00'/%3E%3Cstop offset='1' stop-color='%23ffe27a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='41.5' fill='none' stroke='%23ff7a00' stroke-width='1.2'/%3E%3Cpath transform='translate(50 50) rotate(0.00) translate(0 -41)' d='M-3.2 0 C-4.6 -4.95 -1.2 -7.70 .3 -11.00 C.8 -6.82 4.6 -5.50 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(20.00) translate(0 -41)' d='M-3.2 0 C-4.6 -4.23 -1.2 -6.58 .3 -9.40 C.8 -5.83 4.6 -4.70 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(40.00) translate(0 -41)' d='M-3.2 0 C-4.6 -3.78 -1.2 -5.88 .3 -8.40 C.8 -5.21 4.6 -4.20 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(60.00) translate(0 -41)' d='M-3.2 0 C-4.6 -4.95 -1.2 -7.70 .3 -11.00 C.8 -6.82 4.6 -5.50 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(80.00) translate(0 -41)' d='M-3.2 0 C-4.6 -4.23 -1.2 -6.58 .3 -9.40 C.8 -5.83 4.6 -4.70 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(100.00) translate(0 -41)' d='M-3.2 0 C-4.6 -3.78 -1.2 -5.88 .3 -8.40 C.8 -5.21 4.6 -4.20 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(120.00) translate(0 -41)' d='M-3.2 0 C-4.6 -4.95 -1.2 -7.70 .3 -11.00 C.8 -6.82 4.6 -5.50 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(140.00) translate(0 -41)' d='M-3.2 0 C-4.6 -4.23 -1.2 -6.58 .3 -9.40 C.8 -5.83 4.6 -4.70 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(160.00) translate(0 -41)' d='M-3.2 0 C-4.6 -3.78 -1.2 -5.88 .3 -8.40 C.8 -5.21 4.6 -4.20 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(180.00) translate(0 -41)' d='M-3.2 0 C-4.6 -4.95 -1.2 -7.70 .3 -11.00 C.8 -6.82 4.6 -5.50 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(200.00) translate(0 -41)' d='M-3.2 0 C-4.6 -4.23 -1.2 -6.58 .3 -9.40 C.8 -5.83 4.6 -4.70 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(220.00) translate(0 -41)' d='M-3.2 0 C-4.6 -3.78 -1.2 -5.88 .3 -8.40 C.8 -5.21 4.6 -4.20 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(240.00) translate(0 -41)' d='M-3.2 0 C-4.6 -4.95 -1.2 -7.70 .3 -11.00 C.8 -6.82 4.6 -5.50 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(260.00) translate(0 -41)' d='M-3.2 0 C-4.6 -4.23 -1.2 -6.58 .3 -9.40 C.8 -5.83 4.6 -4.70 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(280.00) translate(0 -41)' d='M-3.2 0 C-4.6 -3.78 -1.2 -5.88 .3 -8.40 C.8 -5.21 4.6 -4.20 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(300.00) translate(0 -41)' d='M-3.2 0 C-4.6 -4.95 -1.2 -7.70 .3 -11.00 C.8 -6.82 4.6 -5.50 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(320.00) translate(0 -41)' d='M-3.2 0 C-4.6 -4.23 -1.2 -6.58 .3 -9.40 C.8 -5.83 4.6 -4.70 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3Cpath transform='translate(50 50) rotate(340.00) translate(0 -41)' d='M-3.2 0 C-4.6 -3.78 -1.2 -5.88 .3 -8.40 C.8 -5.21 4.6 -4.20 3.2 0Z' fill='url(%23f)' stroke='%238a1d00' stroke-width='.3'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:decoFlicker 2.6s linear infinite,decoSpin 30s linear infinite;filter:drop-shadow(0 0 4px rgba(255,120,0,.9));}
.d-ice{box-shadow:0 0 12px 2px rgba(120,210,255,.4);}
.d-ice::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='i' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%234db5ff'/%3E%3Cstop offset='.6' stop-color='%23d4f3ff'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='41.6' fill='none' stroke='%23bfeaff' stroke-width='1.3'/%3E%3Cpolygon points='47.40,8.68 49.53,0.20 51.67,1.63 52.60,8.68' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='50.00' y1='6.20' x2='50.00' y2='2.40' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='64.09,11.07 67.46,7.01 68.25,8.87 67.56,12.51' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='66.76' y1='9.53' x2='66.91' y2='9.16' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='77.38,18.95 84.88,14.46 85.39,16.98 81.05,22.62' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='80.97' y1='19.03' x2='83.66' y2='16.34' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='87.49,32.44 92.75,31.95 91.99,33.82 88.93,35.91' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='90.47' y1='33.24' x2='90.84' y2='33.09' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='91.32,47.40 99.80,49.53 98.37,51.67 91.32,52.60' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='93.80' y1='50.00' x2='97.60' y2='50.00' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='88.93,64.09 92.99,67.46 91.13,68.25 87.49,67.56' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='90.47' y1='66.76' x2='90.84' y2='66.91' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='81.05,77.38 85.54,84.88 83.02,85.39 77.38,81.05' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='80.97' y1='80.97' x2='83.66' y2='83.66' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='67.56,87.49 68.05,92.75 66.18,91.99 64.09,88.93' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='66.76' y1='90.47' x2='66.91' y2='90.84' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='52.60,91.32 50.47,99.80 48.33,98.37 47.40,91.32' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='50.00' y1='93.80' x2='50.00' y2='97.60' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='35.91,88.93 32.54,92.99 31.75,91.13 32.44,87.49' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='33.24' y1='90.47' x2='33.09' y2='90.84' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='22.62,81.05 15.12,85.54 14.61,83.02 18.95,77.38' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='19.03' y1='80.97' x2='16.34' y2='83.66' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='12.51,67.56 7.25,68.05 8.01,66.18 11.07,64.09' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='9.53' y1='66.76' x2='9.16' y2='66.91' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='8.68,52.60 0.20,50.47 1.63,48.33 8.68,47.40' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='6.20' y1='50.00' x2='2.40' y2='50.00' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='11.07,35.91 7.01,32.54 8.87,31.75 12.51,32.44' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='9.53' y1='33.24' x2='9.16' y2='33.09' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='18.95,22.62 14.46,15.12 16.98,14.61 22.62,18.95' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='19.03' y1='19.03' x2='16.34' y2='16.34' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3Cpolygon points='32.44,12.51 31.95,7.25 33.82,8.01 35.91,11.07' fill='url(%23i)' stroke='%232b85c9' stroke-width='.35' stroke-linejoin='round'/%3E%3Cline x1='33.24' y1='9.53' x2='33.09' y2='9.16' stroke='%23fff' stroke-width='.5' opacity='.8'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:decoSpin 50s linear infinite;filter:drop-shadow(0 0 3px rgba(150,225,255,.9));}
.d-stars::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='s' cx='.4' cy='.35'%3E%3Cstop offset='0' stop-color='%23fffbd0'/%3E%3Cstop offset='1' stop-color='%23ffb400'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='%23ffd24a' stroke-opacity='.55' stroke-width='.9'/%3E%3Cpolygon points='50.00,0.10 51.14,3.14 54.37,3.28 51.84,5.30 52.70,8.42 50.00,6.63 47.30,8.42 48.16,5.30 45.63,3.28 48.86,3.14' fill='url(%23s)' stroke='%239a6a00' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='78.51,10.76 77.90,12.94 79.67,14.34 77.42,14.44 76.63,16.55 75.84,14.44 73.58,14.34 75.35,12.94 74.75,10.76 76.63,12.01' fill='url(%23s)' stroke='%239a6a00' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='97.46,34.58 94.92,36.60 95.79,39.72 93.08,37.93 90.38,39.72 91.25,36.60 88.71,34.58 91.95,34.44 93.08,31.40 94.22,34.44' fill='url(%23s)' stroke='%239a6a00' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='96.13,64.99 93.87,65.09 93.08,67.20 92.29,65.09 90.04,64.99 91.80,63.58 91.20,61.41 93.08,62.65 94.96,61.41 94.36,63.58' fill='url(%23s)' stroke='%239a6a00' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='79.33,90.37 76.63,88.58 73.92,90.37 74.79,87.25 72.25,85.23 75.49,85.09 76.63,82.05 77.76,85.09 81.00,85.23 78.46,87.25' fill='url(%23s)' stroke='%239a6a00' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='50.00,98.50 49.21,96.39 46.96,96.29 48.72,94.88 48.12,92.71 50.00,93.96 51.88,92.71 51.28,94.88 53.04,96.29 50.79,96.39' fill='url(%23s)' stroke='%239a6a00' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='20.67,90.37 21.54,87.25 19.00,85.23 22.24,85.09 23.37,82.05 24.51,85.09 27.75,85.23 25.21,87.25 26.08,90.37 23.37,88.58' fill='url(%23s)' stroke='%239a6a00' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='3.87,64.99 5.64,63.58 5.04,61.41 6.92,62.65 8.80,61.41 8.20,63.58 9.96,64.99 7.71,65.09 6.92,67.20 6.13,65.09' fill='url(%23s)' stroke='%239a6a00' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='2.54,34.58 5.78,34.44 6.92,31.40 8.05,34.44 11.29,34.58 8.75,36.60 9.62,39.72 6.92,37.93 4.21,39.72 5.08,36.60' fill='url(%23s)' stroke='%239a6a00' stroke-width='.35' stroke-linejoin='round'/%3E%3Cpolygon points='21.49,10.76 23.37,12.01 25.25,10.76 24.65,12.94 26.42,14.34 24.16,14.44 23.37,16.55 22.58,14.44 20.33,14.34 22.10,12.94' fill='url(%23s)' stroke='%239a6a00' stroke-width='.35' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:decoSpin 26s linear infinite;filter:drop-shadow(0 0 3px rgba(255,200,40,.85));}
.d-stars::after{inset:-18%;background:radial-gradient(closest-side,#fff 35%,transparent 100%) 50% 0%/6% 6% no-repeat,radial-gradient(closest-side,#fff 35%,transparent 100%) 100% 50%/5% 5% no-repeat,radial-gradient(closest-side,#fff 35%,transparent 100%) 50% 100%/6% 6% no-repeat,radial-gradient(closest-side,#fff 35%,transparent 100%) 0% 50%/5% 5% no-repeat;animation:decoTwinkle 1.5s ease-in-out infinite;}
.d-mandala{box-shadow:0 0 16px 2px rgba(255,150,200,.35);}
.d-mandala::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23ff6fa8'/%3E%3Cstop offset='1' stop-color='%23ffe2ef'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='41.6' fill='none' stroke='%23ffd27a' stroke-width='1.2'/%3E%3Cpath transform='translate(50.00 8.60) rotate(0.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(64.16 11.10) rotate(20.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(76.61 18.29) rotate(40.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(85.85 29.30) rotate(60.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(90.77 42.81) rotate(80.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(90.77 57.19) rotate(100.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(85.85 70.70) rotate(120.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(76.61 81.71) rotate(140.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(64.16 88.90) rotate(160.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(50.00 91.40) rotate(180.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(35.84 88.90) rotate(200.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(23.39 81.71) rotate(220.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(14.15 70.70) rotate(240.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(9.23 57.19) rotate(260.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(9.23 42.81) rotate(280.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(14.15 29.30) rotate(300.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(23.39 18.29) rotate(320.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(35.84 11.10) rotate(340.00)' d='M0 0 C 3.60 -3.01 2.88 -7.31 0 -8.60 C -2.88 -7.31 -3.60 -3.01 0 0Z' fill='url(%23p)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Ccircle cx='58.39' cy='2.43' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='74.15' cy='8.17' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='87.00' cy='18.95' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='95.39' cy='33.48' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='98.30' cy='50.00' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='95.39' cy='66.52' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='87.00' cy='81.05' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='74.15' cy='91.83' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='58.39' cy='97.57' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='41.61' cy='97.57' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='25.85' cy='91.83' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='13.00' cy='81.05' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='4.61' cy='66.52' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='1.70' cy='50.00' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='4.61' cy='33.48' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='13.00' cy='18.95' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='25.85' cy='8.17' r='.9' fill='%23ffe27a'/%3E%3Ccircle cx='41.61' cy='2.43' r='.9' fill='%23ffe27a'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:decoSpin 36s linear infinite;filter:drop-shadow(0 0 3px rgba(255,130,190,.8));}
.d-mandala::after{inset:-26%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='q' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23ffb347'/%3E%3Cstop offset='1' stop-color='%23fff1c4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath transform='translate(50.00 12.00) rotate(0.00)' d='M0 0 C 5.80 -4.02 4.64 -9.78 0 -11.50 C -4.64 -9.78 -5.80 -4.02 0 0Z' fill='url(%23q)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(69.00 17.09) rotate(30.00)' d='M0 0 C 5.80 -4.02 4.64 -9.78 0 -11.50 C -4.64 -9.78 -5.80 -4.02 0 0Z' fill='url(%23q)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(82.91 31.00) rotate(60.00)' d='M0 0 C 5.80 -4.02 4.64 -9.78 0 -11.50 C -4.64 -9.78 -5.80 -4.02 0 0Z' fill='url(%23q)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(88.00 50.00) rotate(90.00)' d='M0 0 C 5.80 -4.02 4.64 -9.78 0 -11.50 C -4.64 -9.78 -5.80 -4.02 0 0Z' fill='url(%23q)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(82.91 69.00) rotate(120.00)' d='M0 0 C 5.80 -4.02 4.64 -9.78 0 -11.50 C -4.64 -9.78 -5.80 -4.02 0 0Z' fill='url(%23q)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(69.00 82.91) rotate(150.00)' d='M0 0 C 5.80 -4.02 4.64 -9.78 0 -11.50 C -4.64 -9.78 -5.80 -4.02 0 0Z' fill='url(%23q)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(50.00 88.00) rotate(180.00)' d='M0 0 C 5.80 -4.02 4.64 -9.78 0 -11.50 C -4.64 -9.78 -5.80 -4.02 0 0Z' fill='url(%23q)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(31.00 82.91) rotate(210.00)' d='M0 0 C 5.80 -4.02 4.64 -9.78 0 -11.50 C -4.64 -9.78 -5.80 -4.02 0 0Z' fill='url(%23q)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(17.09 69.00) rotate(240.00)' d='M0 0 C 5.80 -4.02 4.64 -9.78 0 -11.50 C -4.64 -9.78 -5.80 -4.02 0 0Z' fill='url(%23q)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(12.00 50.00) rotate(270.00)' d='M0 0 C 5.80 -4.02 4.64 -9.78 0 -11.50 C -4.64 -9.78 -5.80 -4.02 0 0Z' fill='url(%23q)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(17.09 31.00) rotate(300.00)' d='M0 0 C 5.80 -4.02 4.64 -9.78 0 -11.50 C -4.64 -9.78 -5.80 -4.02 0 0Z' fill='url(%23q)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Cpath transform='translate(31.00 17.09) rotate(330.00)' d='M0 0 C 5.80 -4.02 4.64 -9.78 0 -11.50 C -4.64 -9.78 -5.80 -4.02 0 0Z' fill='url(%23q)' stroke='%238a3b5a' stroke-width='.3'/%3E%3Ccircle cx='50' cy='50' r='38' fill='none' stroke='%23fff1c4' stroke-width='.7' stroke-dasharray='1.4 2'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:decoSpin 48s linear infinite reverse;filter:drop-shadow(0 0 4px rgba(255,190,90,.8));opacity:.92;}
.d-arcane{box-shadow:0 0 16px 2px rgba(140,160,255,.35);}
.d-arcane::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='49.3' fill='none' stroke='%238ff6ff' stroke-width='.6'/%3E%3Ccircle cx='50' cy='50' r='41.6' fill='none' stroke='%23b69cff' stroke-width='1.1'/%3E%3Cg transform='translate(50.00 4.50) rotate(0.00)' fill='none' stroke='%238ff6ff' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -3.4 L0 3.4 M0 -3.4 L2.4 -1 M0 0 L2.4 2.4'/%3E%3C/g%3E%3Cg transform='translate(72.75 10.60) rotate(30.00)' fill='none' stroke='%238ff6ff' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-2.2 -3 L2.2 -3 L0 3 Z'/%3E%3C/g%3E%3Cg transform='translate(89.40 27.25) rotate(60.00)' fill='none' stroke='%238ff6ff' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Cpath d='M0 -3.6 L0 3.6'/%3E%3C/g%3E%3Cg transform='translate(95.50 50.00) rotate(90.00)' fill='none' stroke='%238ff6ff' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-2.4 -3 L2.4 3 M2.4 -3 L-2.4 3'/%3E%3C/g%3E%3Cg transform='translate(89.40 72.75) rotate(120.00)' fill='none' stroke='%238ff6ff' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-2.2 3 L0 -3 L2.2 3 M-1.4 .8 L1.4 .8'/%3E%3C/g%3E%3Cg transform='translate(72.75 89.40) rotate(150.00)' fill='none' stroke='%238ff6ff' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-2 -3 L-2 3 M2 -3 L2 3 M-2 0 L2 0'/%3E%3C/g%3E%3Cg transform='translate(50.00 95.50) rotate(180.00)' fill='none' stroke='%238ff6ff' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -3.4 L0 3.4 M0 -3.4 L2.4 -1 M0 0 L2.4 2.4'/%3E%3C/g%3E%3Cg transform='translate(27.25 89.40) rotate(210.00)' fill='none' stroke='%238ff6ff' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-2.2 -3 L2.2 -3 L0 3 Z'/%3E%3C/g%3E%3Cg transform='translate(10.60 72.75) rotate(240.00)' fill='none' stroke='%238ff6ff' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Cpath d='M0 -3.6 L0 3.6'/%3E%3C/g%3E%3Cg transform='translate(4.50 50.00) rotate(270.00)' fill='none' stroke='%238ff6ff' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-2.4 -3 L2.4 3 M2.4 -3 L-2.4 3'/%3E%3C/g%3E%3Cg transform='translate(10.60 27.25) rotate(300.00)' fill='none' stroke='%238ff6ff' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-2.2 3 L0 -3 L2.2 3 M-1.4 .8 L1.4 .8'/%3E%3C/g%3E%3Cg transform='translate(27.25 10.60) rotate(330.00)' fill='none' stroke='%238ff6ff' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-2 -3 L-2 3 M2 -3 L2 3 M-2 0 L2 0'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;animation:decoSpin 28s linear infinite;filter:drop-shadow(0 0 3px rgba(130,240,255,.9));}
.d-arcane::after{inset:-26%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3C/defs%3E%3Cpolygon points='50.00,5.00 88.97,72.50 11.03,72.50' fill='none' stroke='%23b69cff' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpolygon points='88.97,27.50 50.00,95.00 11.03,27.50' fill='none' stroke='%23b69cff' stroke-width='.9' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%238ff6ff' stroke-width='.5' stroke-dasharray='2 2'/%3E%3Ccircle cx='50.00' cy='5.00' r='1.5' fill='%238ff6ff'/%3E%3Ccircle cx='88.97' cy='27.50' r='1.5' fill='%238ff6ff'/%3E%3Ccircle cx='88.97' cy='72.50' r='1.5' fill='%238ff6ff'/%3E%3Ccircle cx='50.00' cy='95.00' r='1.5' fill='%238ff6ff'/%3E%3Ccircle cx='11.03' cy='72.50' r='1.5' fill='%238ff6ff'/%3E%3Ccircle cx='11.03' cy='27.50' r='1.5' fill='%238ff6ff'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:decoSpin 40s linear infinite reverse,decoPulse 3s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(170,150,255,.9));}
.d-wings{isolation:isolate;}
.d-wings::before{inset:auto;left:50%;top:-32.5%;width:300%;height:150%;border-radius:0;z-index:-1;transform:translateX(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.7' stop-color='%23e8f1ff'/%3E%3Cstop offset='1' stop-color='%23b9d2ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath transform='translate(104 66) rotate(-120)' d='M0 0 C 6 -5.3999999999999995 6 -21.0 0 -30 C -5.4 -21.0 -4.800000000000001 -6.0 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath transform='translate(104 66) rotate(-102)' d='M0 0 C 7 -6.84 7 -26.599999999999998 0 -38 C -6.3 -26.599999999999998 -5.6000000000000005 -7.6000000000000005 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath transform='translate(104 66) rotate(-84)' d='M0 0 C 8 -8.28 8 -32.199999999999996 0 -46 C -7.2 -32.199999999999996 -6.4 -9.200000000000001 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath transform='translate(104 66) rotate(-66)' d='M0 0 C 8 -9.36 8 -36.4 0 -52 C -7.2 -36.4 -6.4 -10.4 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath transform='translate(104 66) rotate(-48)' d='M0 0 C 8 -9.719999999999999 8 -37.8 0 -54 C -7.2 -37.8 -6.4 -10.8 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath transform='translate(104 66) rotate(-30)' d='M0 0 C 7 -9.0 7 -35.0 0 -50 C -6.3 -35.0 -5.6000000000000005 -10.0 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath transform='translate(104 66) rotate(-14)' d='M0 0 C 6 -7.199999999999999 6 -28.0 0 -40 C -5.4 -28.0 -4.800000000000001 -8.0 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cg transform='translate(240 0) scale(-1 1)'%3E%3Cpath transform='translate(104 66) rotate(-120)' d='M0 0 C 6 -5.3999999999999995 6 -21.0 0 -30 C -5.4 -21.0 -4.800000000000001 -6.0 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath transform='translate(104 66) rotate(-102)' d='M0 0 C 7 -6.84 7 -26.599999999999998 0 -38 C -6.3 -26.599999999999998 -5.6000000000000005 -7.6000000000000005 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath transform='translate(104 66) rotate(-84)' d='M0 0 C 8 -8.28 8 -32.199999999999996 0 -46 C -7.2 -32.199999999999996 -6.4 -9.200000000000001 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath transform='translate(104 66) rotate(-66)' d='M0 0 C 8 -9.36 8 -36.4 0 -52 C -7.2 -36.4 -6.4 -10.4 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath transform='translate(104 66) rotate(-48)' d='M0 0 C 8 -9.719999999999999 8 -37.8 0 -54 C -7.2 -37.8 -6.4 -10.8 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath transform='translate(104 66) rotate(-30)' d='M0 0 C 7 -9.0 7 -35.0 0 -50 C -6.3 -35.0 -5.6000000000000005 -10.0 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath transform='translate(104 66) rotate(-14)' d='M0 0 C 6 -7.199999999999999 6 -28.0 0 -40 C -5.4 -28.0 -4.800000000000001 -8.0 0 0Z' fill='url(%23w)' stroke='%238fb0e6' stroke-width='.7' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;filter:drop-shadow(0 2px 4px rgba(120,160,255,.55));animation:decoFlap 3.4s ease-in-out infinite;}
.d-wings{box-shadow:0 0 10px 1px rgba(180,210,255,.5);}
.d-wings::after{content:none;}
@keyframes decoFlap{0%,100%{transform:translateX(-50%) scaleX(1)}50%{transform:translateX(-50%) scaleX(1.06)}}

/* ================= creative Diz Shop themes (round 3) ================= */
html[data-theme="candy"]{--cyan:#ff5fa2;--cyan-dim:#d63c80;--ink:#fff1f8;--panel:#ffffff;--panel-2:#ffe6f2;--line:#f7c6de;--glow:#ffd6ea;--text:#4a2840;--text-dim:#8c5c7c;--text-faint:#b78ea6;--on-accent:#fff;--scroll:#f7c6de;color-scheme:light;--amber:#d9730d;--red:#e0364f;--green:#1fa36b;}
html[data-theme="candy"] body{background:var(--ink);}
html[data-theme="candy"] .toast,html[data-theme="candy"] .modal-card,html[data-theme="candy"] .login-card{box-shadow:0 8px 26px rgba(214,60,128,.18);}
html[data-theme="candy"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2999;background:radial-gradient(circle,#ff5fa2 0 2px,transparent 2.5px) 0 0/26px 26px,radial-gradient(circle,#7fd8c8 0 2px,transparent 2.5px) 13px 13px/26px 26px;opacity:.06;}
html[data-theme="lofi"]{--cyan:#ffb38a;--cyan-dim:#c97f55;--ink:#1a1326;--panel:#221a31;--panel-2:#2d2142;--line:#43305f;--glow:#3a2a55;--text:#f3e9ff;--text-dim:#b6a3d4;--text-faint:#7d6b9c;--on-accent:#2a1100;--scroll:#43305f;}
html[data-theme="lofi"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2999;background:radial-gradient(ellipse at 50% 40%,transparent 50%,rgba(10,4,22,.5) 100%);}
html[data-theme="blueprint"]{--cyan:#9fd3ff;--cyan-dim:#5f9fd6;--ink:#0a2350;--panel:#0d2c63;--panel-2:#123776;--line:#2c5aa3;--glow:#1b4585;--text:#eaf4ff;--text-dim:#9fbfe6;--text-faint:#6a8fc2;--on-accent:#06224a;--scroll:#2c5aa3;}
html[data-theme="blueprint"] body{font-family:"JetBrains Mono","Fira Code",ui-monospace,Menlo,Consolas,monospace;}
html[data-theme="blueprint"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2999;background:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/120px 120px;}
html[data-theme="inkwash"]{--cyan:#c1272d;--cyan-dim:#8f1c21;--ink:#f1ede4;--panel:#faf7f0;--panel-2:#ece6d9;--line:#d6cdbb;--glow:#e4dccb;--text:#1d1b19;--text-dim:#5d574c;--text-faint:#8d8676;--on-accent:#fff;--scroll:#d6cdbb;color-scheme:light;--amber:#9a5b0b;--red:#b3201f;--green:#3d6b3a;}
html[data-theme="inkwash"] body{background:var(--ink);font-family:"Noto Serif","Source Serif Pro",Georgia,"Times New Roman",serif;}
html[data-theme="inkwash"] .toast,html[data-theme="inkwash"] .modal-card,html[data-theme="inkwash"] .login-card{box-shadow:0 8px 26px rgba(40,30,10,.14);}
html[data-theme="inkwash"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2999;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .12  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.12;mix-blend-mode:multiply;}
html[data-theme="noir"]{--cyan:#e63946;--cyan-dim:#a3232d;--ink:#050505;--panel:#0e0e0e;--panel-2:#181818;--line:#2b2b2b;--glow:#202020;--text:#ececec;--text-dim:#9b9b9b;--text-faint:#666;--on-accent:#fff;--scroll:#2b2b2b;}
html[data-theme="noir"] body{font-family:"Special Elite","Courier New",ui-monospace,monospace;}
html[data-theme="aquarium"]{--cyan:#3de8ff;--cyan-dim:#1fa5b8;--ink:#021a20;--panel:#052630;--panel-2:#08323f;--line:#12586b;--glow:#0b4655;--text:#e2fbff;--text-dim:#7fc3d1;--text-faint:#4f8d9b;--on-accent:#00262d;--scroll:#12586b;}
html[data-theme="fireflies"]{--cyan:#c8ff5a;--cyan-dim:#8fb83a;--ink:#050c08;--panel:#0b1710;--panel-2:#102018;--line:#1e3a28;--glow:#16301f;--text:#e8f5dc;--text-dim:#8fae95;--text-faint:#587560;--on-accent:#162200;--scroll:#1e3a28;}
html[data-theme="space"]{--cyan:#8fa8ff;--cyan-dim:#5d74c9;--ink:#03030a;--panel:#090a18;--panel-2:#0f1124;--line:#22264a;--glow:#171a3a;--text:#e9ecff;--text-dim:#8d94c4;--text-faint:#575d8c;--on-accent:#0a1030;--scroll:#22264a;}
html[data-theme="autumn"]{--cyan:#ff8a3d;--cyan-dim:#c4601f;--ink:#140b06;--panel:#1e120a;--panel-2:#2a190e;--line:#4d2f19;--glow:#3b2412;--text:#fdeede;--text-dim:#c9a285;--text-faint:#8d6b52;--on-accent:#2a1000;--scroll:#4d2f19;}
html[data-theme="thunder"]{--cyan:#9fc2ff;--cyan-dim:#6a8fd0;--ink:#05070d;--panel:#0b101a;--panel-2:#111826;--line:#222f47;--glow:#18223a;--text:#e3ecff;--text-dim:#8497ba;--text-faint:#556587;--on-accent:#06142e;--scroll:#222f47;}
html[data-theme="holo"]{--cyan:#c3b2ff;--cyan-dim:#8a78d6;--ink:#080814;--panel:#0f0f20;--panel-2:#17172f;--line:#2e2e56;--glow:#232348;--text:#f1eeff;--text-dim:#a49fd0;--text-faint:#6b668f;--on-accent:#150a33;--scroll:#2e2e56;}
/* animated layers */
html[data-theme="noir"] body::before,html[data-theme="aquarium"] body::before,html[data-theme="aquarium"] body::after,html[data-theme="fireflies"] body::before,html[data-theme="fireflies"] body::after,
html[data-theme="space"] body::before,html[data-theme="space"] body::after,html[data-theme="autumn"] body::before,html[data-theme="autumn"] body::after,
html[data-theme="thunder"] body::before,html[data-theme="thunder"] body::after,html[data-theme="holo"] body::before{content:"";position:fixed;pointer-events:none;z-index:2999;will-change:transform;left:-700px;top:-700px;width:calc(100% + 1400px);height:calc(100% + 1400px);}
@keyframes grainShift{0%{transform:translate(0,0)}20%{transform:translate(-40px,30px)}40%{transform:translate(35px,-45px)}60%{transform:translate(-25px,-30px)}80%{transform:translate(45px,25px)}100%{transform:translate(0,0)}}
@keyframes rise400{to{transform:translateY(-400px)}}
@keyframes rise600{to{transform:translateY(-600px)}}
@keyframes fall400b{to{transform:translateY(400px)}}
@keyframes fall600b{to{transform:translateY(600px)}}
@keyframes fall300b{to{transform:translateY(300px)}}
@keyframes fall500b{to{transform:translateY(500px)}}
@keyframes drift300{to{transform:translate(-300px,300px)}}
@keyframes drift500{to{transform:translate(-500px,500px)}}
@keyframes flyA{0%,100%{transform:translate(0,0)}25%{transform:translate(40px,-60px)}50%{transform:translate(-30px,-110px)}75%{transform:translate(50px,-50px)}}
@keyframes flyB{0%,100%{transform:translate(0,0)}33%{transform:translate(-50px,40px)}66%{transform:translate(35px,90px)}}
@keyframes lightning{0%,90%,100%{opacity:0}91%{opacity:.38}92%{opacity:0}93.5%{opacity:.24}95%{opacity:0}}
@keyframes holoSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes raysSway{0%,100%{transform:translateX(-30px) skewX(-8deg)}50%{transform:translateX(30px) skewX(-4deg)}}
html[data-theme="noir"] body::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px;opacity:.07;mix-blend-mode:overlay;animation:grainShift .6s steps(1) infinite;}
html[data-theme="aquarium"] body::before{background:repeating-linear-gradient(100deg,transparent 0 90px,rgba(120,255,255,.06) 90px 130px,transparent 130px 260px);animation:raysSway 14s ease-in-out infinite;}
html[data-theme="aquarium"] body::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3C/defs%3E%3Ccircle cx='40' cy='60' r='6' fill='rgba(160,240,255,.07)' stroke='rgba(190,250,255,.55)' stroke-width='1'/%3E%3Ccircle cx='37.9' cy='57.9' r='1.32' fill='rgba(255,255,255,.8)'/%3E%3Ccircle cx='120' cy='200' r='4' fill='rgba(160,240,255,.07)' stroke='rgba(190,250,255,.55)' stroke-width='1'/%3E%3Ccircle cx='118.6' cy='198.6' r='0.88' fill='rgba(255,255,255,.8)'/%3E%3Ccircle cx='210' cy='90' r='9' fill='rgba(160,240,255,.07)' stroke='rgba(190,250,255,.55)' stroke-width='1'/%3E%3Ccircle cx='206.85' cy='86.85' r='1.98' fill='rgba(255,255,255,.8)'/%3E%3Ccircle cx='300' cy='300' r='5' fill='rgba(160,240,255,.07)' stroke='rgba(190,250,255,.55)' stroke-width='1'/%3E%3Ccircle cx='298.25' cy='298.25' r='1.1' fill='rgba(255,255,255,.8)'/%3E%3Ccircle cx='350' cy='140' r='7' fill='rgba(160,240,255,.07)' stroke='rgba(190,250,255,.55)' stroke-width='1'/%3E%3Ccircle cx='347.55' cy='137.55' r='1.54' fill='rgba(255,255,255,.8)'/%3E%3Ccircle cx='90' cy='330' r='8' fill='rgba(160,240,255,.07)' stroke='rgba(190,250,255,.55)' stroke-width='1'/%3E%3Ccircle cx='87.2' cy='327.2' r='1.76' fill='rgba(255,255,255,.8)'/%3E%3Ccircle cx='250' cy='380' r='3.5' fill='rgba(160,240,255,.07)' stroke='rgba(190,250,255,.55)' stroke-width='1'/%3E%3Ccircle cx='248.775' cy='378.775' r='0.8' fill='rgba(255,255,255,.8)'/%3E%3Ccircle cx='180' cy='20' r='3' fill='rgba(160,240,255,.07)' stroke='rgba(190,250,255,.55)' stroke-width='1'/%3E%3Ccircle cx='178.95' cy='18.95' r='0.8' fill='rgba(255,255,255,.8)'/%3E%3Ccircle cx='380' cy='240' r='4' fill='rgba(160,240,255,.07)' stroke='rgba(190,250,255,.55)' stroke-width='1'/%3E%3Ccircle cx='378.6' cy='238.6' r='0.88' fill='rgba(255,255,255,.8)'/%3E%3C/svg%3E");background-size:400px 400px;animation:rise400 16s linear infinite;opacity:.8;}
html[data-theme="fireflies"] body::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23f4ffa8'/%3E%3Cstop offset='.25' stop-color='%23d4ff5a'/%3E%3Cstop offset='1' stop-color='%23d4ff5a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='63' cy='53' r='10' fill='url(%23g)'/%3E%3Ccircle cx='149' cy='30' r='8' fill='url(%23g)'/%3E%3Ccircle cx='148' cy='396' r='8' fill='url(%23g)'/%3E%3Ccircle cx='429' cy='226' r='10' fill='url(%23g)'/%3E%3Ccircle cx='217' cy='86' r='13' fill='url(%23g)'/%3E%3Ccircle cx='368' cy='177' r='6' fill='url(%23g)'/%3E%3Ccircle cx='152' cy='39' r='8' fill='url(%23g)'/%3E%3Ccircle cx='227' cy='468' r='6' fill='url(%23g)'/%3E%3Ccircle cx='147' cy='490' r='6' fill='url(%23g)'/%3E%3C/svg%3E");background-size:500px 500px;animation:flyA 14s ease-in-out infinite,themeTwinkle 4s ease-in-out infinite;opacity:.9;}
html[data-theme="fireflies"] body::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23f4ffa8'/%3E%3Cstop offset='.25' stop-color='%23d4ff5a'/%3E%3Cstop offset='1' stop-color='%23d4ff5a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='659' cy='100' r='10' fill='url(%23g)'/%3E%3Ccircle cx='95' cy='632' r='8' fill='url(%23g)'/%3E%3Ccircle cx='78' cy='280' r='6' fill='url(%23g)'/%3E%3Ccircle cx='474' cy='21' r='10' fill='url(%23g)'/%3E%3Ccircle cx='576' cy='437' r='10' fill='url(%23g)'/%3E%3Ccircle cx='646' cy='142' r='6' fill='url(%23g)'/%3E%3C/svg%3E");background-size:700px 700px;animation:flyB 19s ease-in-out infinite,themeTwinkle 5.5s ease-in-out -2s infinite;opacity:.7;}
html[data-theme="space"] body::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3C/defs%3E%3Ccircle cx='179' cy='254' r='0.85' fill='%23fff' opacity='0.53'/%3E%3Ccircle cx='47' cy='138' r='0.78' fill='%23fff' opacity='0.53'/%3E%3Ccircle cx='158' cy='295' r='1.10' fill='%23fff' opacity='0.64'/%3E%3Ccircle cx='197' cy='177' r='0.51' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='59' cy='252' r='0.54' fill='%23ffe9c4' opacity='0.56'/%3E%3Ccircle cx='126' cy='203' r='0.73' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='229' cy='205' r='0.83' fill='%23cfe0ff' opacity='0.91'/%3E%3Ccircle cx='281' cy='142' r='0.92' fill='%23ffe9c4' opacity='0.84'/%3E%3Ccircle cx='194' cy='118' r='0.59' fill='%23cfe0ff' opacity='0.58'/%3E%3Ccircle cx='119' cy='6' r='0.79' fill='%23cfe0ff' opacity='0.63'/%3E%3Ccircle cx='2' cy='74' r='0.75' fill='%23ffe9c4' opacity='0.80'/%3E%3Ccircle cx='163' cy='64' r='0.91' fill='%23fff' opacity='0.73'/%3E%3Ccircle cx='286' cy='200' r='0.74' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='205' cy='31' r='0.61' fill='%23cfe0ff' opacity='0.72'/%3E%3Ccircle cx='56' cy='174' r='0.86' fill='%23fff' opacity='0.50'/%3E%3Ccircle cx='77' cy='274' r='0.56' fill='%23ffe9c4' opacity='0.81'/%3E%3Ccircle cx='36' cy='106' r='0.87' fill='%23cfe0ff' opacity='0.82'/%3E%3Ccircle cx='177' cy='186' r='0.78' fill='%23fff' opacity='0.92'/%3E%3Ccircle cx='238' cy='245' r='0.79' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='175' cy='135' r='0.79' fill='%23cfe0ff' opacity='0.76'/%3E%3Ccircle cx='105' cy='270' r='0.72' fill='%23fff' opacity='0.88'/%3E%3Ccircle cx='152' cy='46' r='0.92' fill='%23ffe9c4' opacity='0.76'/%3E%3Ccircle cx='85' cy='182' r='0.96' fill='%23ffe9c4' opacity='0.82'/%3E%3Ccircle cx='99' cy='122' r='0.99' fill='%23cfe0ff' opacity='0.60'/%3E%3Ccircle cx='252' cy='182' r='0.94' fill='%23fff' opacity='0.90'/%3E%3Ccircle cx='241' cy='132' r='0.62' fill='%23ffe9c4' opacity='0.72'/%3E%3Ccircle cx='178' cy='186' r='0.55' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='100' cy='172' r='0.62' fill='%23fff' opacity='0.74'/%3E%3Ccircle cx='176' cy='43' r='1.00' fill='%23fff' opacity='0.95'/%3E%3Ccircle cx='102' cy='244' r='1.03' fill='%23fff' opacity='0.89'/%3E%3Ccircle cx='170' cy='44' r='0.98' fill='%23fff' opacity='0.73'/%3E%3Ccircle cx='43' cy='81' r='0.60' fill='%23cfe0ff' opacity='0.51'/%3E%3Ccircle cx='238' cy='74' r='0.87' fill='%23fff' opacity='0.83'/%3E%3Ccircle cx='179' cy='79' r='0.83' fill='%23cfe0ff' opacity='0.51'/%3E%3Ccircle cx='52' cy='269' r='0.95' fill='%23cfe0ff' opacity='0.72'/%3E%3Ccircle cx='99' cy='108' r='0.52' fill='%23cfe0ff' opacity='0.65'/%3E%3Ccircle cx='123' cy='300' r='0.70' fill='%23fff' opacity='0.92'/%3E%3Ccircle cx='31' cy='181' r='1.04' fill='%23fff' opacity='0.91'/%3E%3Ccircle cx='256' cy='66' r='0.82' fill='%23fff' opacity='0.94'/%3E%3Ccircle cx='93' cy='2' r='0.97' fill='%23cfe0ff' opacity='0.59'/%3E%3C/svg%3E");background-size:300px 300px;animation:drift300 70s linear infinite;opacity:.85;}
html[data-theme="space"] body::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cdefs%3E%3C/defs%3E%3Ccircle cx='242' cy='316' r='1.52' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='265' cy='271' r='1.28' fill='%23fff' opacity='0.94'/%3E%3Ccircle cx='29' cy='127' r='0.77' fill='%23fff' opacity='0.89'/%3E%3Ccircle cx='259' cy='231' r='1.29' fill='%23fff' opacity='0.72'/%3E%3Ccircle cx='313' cy='498' r='1.21' fill='%23cfe0ff' opacity='0.85'/%3E%3Ccircle cx='231' cy='260' r='1.25' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='126' cy='357' r='1.23' fill='%23ffe9c4' opacity='0.96'/%3E%3Ccircle cx='457' cy='482' r='0.78' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='62' cy='200' r='1.12' fill='%23fff' opacity='0.84'/%3E%3Ccircle cx='219' cy='37' r='0.80' fill='%23ffe9c4' opacity='0.89'/%3E%3Ccircle cx='459' cy='397' r='0.72' fill='%23ffe9c4' opacity='0.57'/%3E%3Ccircle cx='452' cy='70' r='1.85' fill='%23cfe0ff' opacity='0.87'/%3E%3Ccircle cx='48' cy='203' r='1.74' fill='%23cfe0ff' opacity='0.99'/%3E%3Ccircle cx='426' cy='114' r='0.73' fill='%23fff' opacity='1.00'/%3E%3Ccircle cx='206' cy='173' r='1.09' fill='%23ffe9c4' opacity='0.66'/%3E%3Ccircle cx='369' cy='187' r='0.53' fill='%23fff' opacity='0.72'/%3E%3Ccircle cx='9' cy='196' r='0.96' fill='%23ffe9c4' opacity='0.76'/%3E%3Ccircle cx='32' cy='57' r='1.88' fill='%23cfe0ff' opacity='0.99'/%3E%3C/svg%3E");background-size:500px 500px;animation:drift500 45s linear infinite;opacity:.9;}
html[data-theme="autumn"] body::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3C/defs%3E%3Cg transform='translate(50 40) rotate(30) scale(1.0)'%3E%3Cpath d='M0 -9 C7 -6 8 4 0 10 C-8 4 -7 -6 0 -9Z' fill='%23ff8a3d'/%3E%3Cpath d='M0 -8 L0 12' stroke='rgba(80,30,0,.55)' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='translate(160 120) rotate(-50) scale(1.0)'%3E%3Cpath d='M0 -9 C7 -6 8 4 0 10 C-8 4 -7 -6 0 -9Z' fill='%23e0561b'/%3E%3Cpath d='M0 -8 L0 12' stroke='rgba(80,30,0,.55)' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='translate(300 60) rotate(110) scale(1.0)'%3E%3Cpath d='M0 -9 C7 -6 8 4 0 10 C-8 4 -7 -6 0 -9Z' fill='%23ffc247'/%3E%3Cpath d='M0 -8 L0 12' stroke='rgba(80,30,0,.55)' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='translate(90 230) rotate(200) scale(1.0)'%3E%3Cpath d='M0 -9 C7 -6 8 4 0 10 C-8 4 -7 -6 0 -9Z' fill='%23c2410c'/%3E%3Cpath d='M0 -8 L0 12' stroke='rgba(80,30,0,.55)' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='translate(240 300) rotate(-20) scale(1.0)'%3E%3Cpath d='M0 -9 C7 -6 8 4 0 10 C-8 4 -7 -6 0 -9Z' fill='%23f59e0b'/%3E%3Cpath d='M0 -8 L0 12' stroke='rgba(80,30,0,.55)' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='translate(360 190) rotate(75) scale(1.0)'%3E%3Cpath d='M0 -9 C7 -6 8 4 0 10 C-8 4 -7 -6 0 -9Z' fill='%23ff8a3d'/%3E%3Cpath d='M0 -8 L0 12' stroke='rgba(80,30,0,.55)' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='translate(30 350) rotate(150) scale(1.0)'%3E%3Cpath d='M0 -9 C7 -6 8 4 0 10 C-8 4 -7 -6 0 -9Z' fill='%23e0561b'/%3E%3Cpath d='M0 -8 L0 12' stroke='rgba(80,30,0,.55)' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");background-size:400px 400px;animation:fall400b 18s linear infinite;opacity:.55;}
html[data-theme="autumn"] body::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cdefs%3E%3C/defs%3E%3Cg transform='translate(120 100) rotate(60) scale(1.5)'%3E%3Cpath d='M0 -9 C7 -6 8 4 0 10 C-8 4 -7 -6 0 -9Z' fill='%23ffc247'/%3E%3Cpath d='M0 -8 L0 12' stroke='rgba(80,30,0,.55)' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='translate(420 220) rotate(-30) scale(1.5)'%3E%3Cpath d='M0 -9 C7 -6 8 4 0 10 C-8 4 -7 -6 0 -9Z' fill='%23c2410c'/%3E%3Cpath d='M0 -8 L0 12' stroke='rgba(80,30,0,.55)' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='translate(260 470) rotate(140) scale(1.5)'%3E%3Cpath d='M0 -9 C7 -6 8 4 0 10 C-8 4 -7 -6 0 -9Z' fill='%23f59e0b'/%3E%3Cpath d='M0 -8 L0 12' stroke='rgba(80,30,0,.55)' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='translate(520 60) rotate(10) scale(1.5)'%3E%3Cpath d='M0 -9 C7 -6 8 4 0 10 C-8 4 -7 -6 0 -9Z' fill='%23ff8a3d'/%3E%3Cpath d='M0 -8 L0 12' stroke='rgba(80,30,0,.55)' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='translate(60 420) rotate(220) scale(1.5)'%3E%3Cpath d='M0 -9 C7 -6 8 4 0 10 C-8 4 -7 -6 0 -9Z' fill='%23e0561b'/%3E%3Cpath d='M0 -8 L0 12' stroke='rgba(80,30,0,.55)' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");background-size:600px 600px;animation:fall600b 26s linear infinite;opacity:.45;filter:blur(.4px);}
html[data-theme="thunder"] body::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3C/defs%3E%3Cline x1='170' y1='77' x2='167' y2='105' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.65'/%3E%3Cline x1='29' y1='37' x2='26' y2='70' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.35'/%3E%3Cline x1='192' y1='29' x2='189' y2='61' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.35'/%3E%3Cline x1='24' y1='44' x2='21' y2='73' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.5'/%3E%3Cline x1='40' y1='123' x2='37' y2='141' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.65'/%3E%3Cline x1='222' y1='30' x2='219' y2='64' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.35'/%3E%3Cline x1='119' y1='31' x2='116' y2='65' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.65'/%3E%3Cline x1='208' y1='25' x2='205' y2='48' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.35'/%3E%3Cline x1='290' y1='68' x2='287' y2='93' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.5'/%3E%3Cline x1='78' y1='60' x2='75' y2='94' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.5'/%3E%3Cline x1='291' y1='92' x2='288' y2='111' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.65'/%3E%3Cline x1='101' y1='190' x2='98' y2='209' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.65'/%3E%3Cline x1='37' y1='30' x2='34' y2='52' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.5'/%3E%3Cline x1='277' y1='218' x2='274' y2='244' stroke='%23b4d2ff' stroke-width='1.1' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");background-size:300px 300px;animation:fall300b .75s linear infinite;opacity:.5;}
html[data-theme="thunder"] body::after{left:0;top:0;width:100%;height:100%;background:radial-gradient(ellipse at 50% 0%,#dbe8ff,#9fc2ff 60%,transparent);mix-blend-mode:screen;animation:lightning 9s linear infinite;opacity:0;}
html[data-theme="holo"] body::before{left:0;top:0;width:300%;height:100%;background:linear-gradient(100deg,rgba(255,60,170,.0),rgba(255,60,170,.16) 8%,rgba(60,255,220,.16) 16%,rgba(255,235,60,.14) 24%,rgba(130,90,255,.18) 32%,rgba(255,60,170,.0) 40%,rgba(255,60,170,.16) 48%,rgba(60,255,220,.16) 56%,rgba(255,235,60,.14) 64%,rgba(130,90,255,.18) 72%,rgba(255,60,170,.0) 80%);mix-blend-mode:screen;animation:holoSlide 18s linear infinite;}
@media (prefers-reduced-motion:reduce){html[data-theme] body::after,html[data-theme] body::before{animation:none!important;}}

/* ---- owner admin panel ---- */
.adm-card{width:calc(100vw - 24px);max-width:1100px;height:min(88vh,760px);display:flex;flex-direction:row;padding:0;overflow:hidden;box-sizing:border-box;}
.adm-tabs{flex-wrap:wrap;flex:none;}
.adm-body{flex:1;overflow-y:auto;min-height:0;padding-right:4px;}
.adm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px;}
.adm-stat{background:var(--panel-2,rgba(255,255,255,.04));border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.adm-stat b{display:block;font-size:22px;font-weight:700;line-height:1.2;}
.adm-stat span{font-size:12px;opacity:.7;}
.adm-h{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.7;margin:14px 0 8px;}
.adm-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;align-items:center;}
.adm-tools input,.adm-tools select,.adm-num{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:8px;height:34px;padding:0 10px;font-size:13px;}
.adm-tools input{flex:1;min-width:140px;}
.adm-table{width:100%;border-collapse:collapse;font-size:13px;}
.adm-table th{text-align:left;font-weight:600;opacity:.65;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap;}
.adm-table td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle;}
.adm-table tr.adm-row{cursor:pointer;} .adm-table tr.adm-row:hover{background:rgba(255,255,255,.04);}
.adm-user{display:flex;align-items:center;gap:8px;min-width:0;} .adm-user img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;}
.adm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6b7280;margin-right:6px;} .adm-dot.on{background:#3ecf8e;}
.adm-pill{display:inline-block;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:700;margin-left:4px;background:rgba(255,255,255,.1);}
.adm-pill.red{background:rgba(229,83,75,.25);color:#ff8d86;} .adm-pill.amber{background:rgba(240,180,41,.22);color:#f0b429;} .adm-pill.gold{background:rgba(240,180,41,.22);color:#f0b429;}
.adm-detail{border:1px solid var(--cyan-dim);border-radius:12px;padding:14px;margin-bottom:14px;}
.adm-detail h3{margin:0 0 4px;font-size:16px;} .adm-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 16px;font-size:13px;margin:8px 0;}
.adm-kv i{font-style:normal;opacity:.65;}
.adm-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.adm-actions button,.adm-btn{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:8px;height:32px;padding:0 12px;font-size:13px;font-weight:600;cursor:pointer;}
.adm-actions button:hover,.adm-btn:hover{border-color:var(--cyan-dim);color:var(--cyan);} .adm-actions button.danger,.adm-btn.danger{color:#ff8d86;border-color:rgba(229,83,75,.5);}
.adm-btn.primary{background:rgba(79,209,197,.15);border-color:var(--cyan-dim);color:var(--cyan);}
.adm-pager{display:flex;gap:10px;align-items:center;justify-content:center;margin:12px 0;font-size:13px;}
.adm-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 14px;margin-bottom:12px;} .adm-set label{display:flex;flex-direction:column;gap:3px;font-size:12px;opacity:.9;} .adm-num{width:100%;box-sizing:border-box;}
.adm-empty{opacity:.6;text-align:center;padding:24px 0;font-size:13px;}
@media (max-width:640px){.adm-table .hide-sm{display:none;}}

/* bigger shop window: 3 items per row */
.settings-card{transition:width .15s ease;}
.settings-card.shop-wide{width:980px;max-width:96vw;}
.settings-card.shop-wide .settings-layout{min-height:560px;max-height:88vh;}
.settings-card.shop-wide .settings-panels{padding:24px 30px;}
.settings-card.shop-wide .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.settings-card.shop-wide .shop-card{padding:18px 16px 16px;gap:10px;border-radius:14px;}
.settings-card.shop-wide .shop-prev,.settings-card.shop-wide .shop-prev.theme{height:140px;}
.settings-card.shop-wide .shop-prev img{width:76px;height:76px;}
.settings-card.shop-wide .shop-name{font-size:14.5px;}
.settings-card.shop-wide .shop-btn{height:36px;font-size:13.5px;}
@media (max-width:760px){.settings-card.shop-wide .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.settings-card.shop-wide .settings-nav{width:120px;}}
.settings-card.shop-wide .vip-limits{grid-template-columns:repeat(4,minmax(0,1fr));}
.settings-card.shop-wide .vip-lim{flex-direction:column;align-items:flex-start;gap:6px;}
@media (max-width:760px){.settings-card.shop-wide .vip-limits{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ---- icon animations ---- */
button svg[data-ic],.user-bar-info svg[data-ic]{transition:transform .18s cubic-bezier(.3,1.6,.5,1);transform-origin:center;}
button:hover:not(:disabled) svg[data-ic]{transform:scale(1.14);}
button:active:not(:disabled) svg[data-ic]{transform:scale(.86);transition-duration:.08s;}
.ub-icon-btn:hover:not(:disabled) svg[data-ic="gear"]{transform:rotate(60deg) scale(1.1);}
.ub-icon-btn:hover:not(:disabled) svg[data-ic="x"],.settings-close:hover svg[data-ic="x"]{transform:rotate(90deg) scale(1.1);}
button:active:not(:disabled){transition:transform .08s;}
.server-rail-btn:active{transform:scale(.92);}
.server-rail-btn.ic-click{animation:ic-bounce .5s cubic-bezier(.3,1.6,.5,1);}
.ic-click svg[data-ic]{animation:ic-pop .45s cubic-bezier(.3,1.6,.5,1);}
.ic-click[data-icanim="gear"] svg{animation:ic-spin .7s cubic-bezier(.3,1.2,.4,1);}
.ic-click[data-icanim="x"] svg{animation:ic-spin90 .4s ease-out;}
.ic-click[data-icanim="clock"] svg{animation:ic-spin .7s ease-in-out;}
.ic-click[data-icanim="achStar"] svg,.ic-click[data-icanim="achMedal"] svg,.ic-click[data-icanim="achTrophy"] svg{animation:ic-spin .7s ease-in-out;}
.ic-click[data-icanim="mic"] svg,.ic-click[data-icanim="micOff"] svg,.ic-click[data-icanim="speaker"] svg{animation:ic-pulse .6s ease-out;}
.ic-click[data-icanim="headphones"] svg,.ic-click[data-icanim="headphonesOff"] svg,.ic-click[data-icanim="music"] svg,.ic-click[data-icanim="musicIc"] svg{animation:ic-bounce .55s cubic-bezier(.3,1.6,.5,1);}
.ic-click[data-icanim="shield"] svg,.ic-click[data-icanim="shieldAlert"] svg,.ic-click[data-icanim="warn"] svg,.ic-click[data-icanim="flag"] svg,.ic-click[data-icanim="ban"] svg,.ic-click[data-icanim="poke"] svg{animation:ic-wiggle .55s ease-in-out;}
.ic-click[data-icanim="gift"] svg,.ic-click[data-icanim="edit"] svg,.ic-click[data-icanim="emoji"] svg,.ic-click[data-icanim="trash"] svg,.ic-click[data-icanim="lock"] svg,.ic-click[data-icanim="hangup"] svg,.ic-click[data-icanim="phone"] svg,.ic-click[data-icanim="phoneDown"] svg{animation:ic-wiggle .55s ease-in-out;}
.ic-click[data-icanim="crown"] svg{animation:ic-flip .7s ease-in-out;}
.ic-click[data-icanim="dp"] svg,.ic-click[data-icanim="bag"] svg{animation:ic-flip .7s ease-in-out;}
.ic-click[data-icanim="download"] svg,.ic-click[data-icanim="arrowDown"] svg{animation:ic-drop .5s ease-out;}
.ic-click[data-icanim="upload"] svg{animation:ic-rise .5s ease-out;}
.ic-click[data-icanim="check"] svg,.ic-click[data-icanim="personCheck"] svg{animation:ic-pop .5s cubic-bezier(.2,2,.4,1);}
.ic-click[data-icanim="reply"] svg,.ic-click[data-icanim="chevL"] svg{animation:ic-nudgeL .4s ease-out;}
.ic-click[data-icanim="chevR"] svg{animation:ic-nudgeR .4s ease-out;}
@keyframes ic-pop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-8deg)}70%{transform:scale(.92) rotate(4deg)}100%{transform:scale(1)}}
@keyframes ic-bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-6px) scale(1.1)}55%{transform:translateY(0) scale(.94)}75%{transform:translateY(-2px)}}
@keyframes ic-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes ic-spin90{from{transform:rotate(0)}to{transform:rotate(180deg)}}
@keyframes ic-pulse{0%{transform:scale(1)}30%{transform:scale(1.4)}60%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes ic-wiggle{0%,100%{transform:rotate(0)}15%{transform:rotate(-18deg)}35%{transform:rotate(15deg)}55%{transform:rotate(-10deg)}75%{transform:rotate(6deg)}}
@keyframes ic-flip{0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(180deg) scale(1.25)}100%{transform:rotateY(360deg) scale(1)}}
@keyframes ic-drop{0%{transform:translateY(-6px);opacity:.4}60%{transform:translateY(3px)}100%{transform:translateY(0);opacity:1}}
@keyframes ic-rise{0%{transform:translateY(6px);opacity:.4}60%{transform:translateY(-3px)}100%{transform:translateY(0);opacity:1}}
@keyframes ic-nudgeL{0%{transform:translateX(0)}40%{transform:translateX(-5px)}100%{transform:translateX(0)}}
@keyframes ic-nudgeR{0%{transform:translateX(0)}40%{transform:translateX(5px)}100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){button svg[data-ic]{transition:none!important;}button:hover:not(:disabled) svg[data-ic],button:active:not(:disabled) svg[data-ic]{transform:none!important;}.ic-click,.ic-click svg,.server-rail-btn.ic-click{animation:none!important;}}

/* ---- status menu (click your name / avatar) ---- */
.status-dot-badge.dnd{background:var(--red);}
.dm-online-dot.dnd,.user-profile-online-dot.dnd,.status-dot.dnd{background:var(--red);}
.status-picker{left:10px;right:10px;bottom:68px;min-width:0;padding:8px;border-radius:14px;}
.status-picker .sp-row{display:flex;align-items:center;gap:14px;width:100%;padding:10px 12px;border-radius:10px;font-size:15px;color:var(--text);text-align:left;}
.status-picker .sp-row.current{background:var(--panel);}
.status-picker .sp-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
.status-picker .sp-t b{font-weight:500;}
.status-picker .sp-t small{font-size:13px;color:var(--text-dim);line-height:1.25;white-space:normal;}
.status-picker .sp-row>svg{color:var(--text-dim);flex:none;}
.status-picker .sp-small{color:var(--text);}
.status-picker .sp-small svg{color:var(--text-dim);}
.sp-sep{height:1px;background:var(--line);margin:6px 4px;}
.sp-dot{width:18px;height:18px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;}
.sp-dot.online{background:var(--green,#3ecf8e);}
.sp-dot.idle{color:var(--amber);background:none;}
.sp-dot.dnd{background:var(--red);} .sp-dot.dnd i{display:block;width:9px;height:3px;border-radius:2px;background:var(--panel-2);}
.sp-dot.invisible{box-sizing:border-box;border:3.5px solid var(--text-dim);} .sp-dot.invisible i{display:block;width:0;height:0;}
/* streamer mode: private details are blurred */
body.streamer #ssInviteLink,body.streamer #createdVoicePassword,body.streamer .sec-s-info span{filter:blur(7px);user-select:none;}
body.streamer #connStatus::after{content:" · Live";color:var(--red);font-weight:600;}
.user-bar{position:relative;}
.status-picker{left:0;right:0;bottom:calc(100% + 8px);}

/* ===== user preferences (Appearance / Accessibility / Chat / Privacy) ===== */
html.pf-zoomed body{zoom:var(--zoom);}
.msg-text,.thread-panel .msg-text{font-size:calc(14px * var(--fs,1));}
.pf-h{margin:18px 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-weight:700;}
.pf-h:first-child{margin-top:0;}
.pf-val{color:var(--cyan);font-weight:700;}
.settings-group input[type=range]{width:100%;accent-color:var(--cyan);}
.pf-preview{font-variant-numeric:tabular-nums;}
/* compact message layout */
html.pf-compact .msg{padding:2px 4px;gap:8px;align-items:flex-start;}
html.pf-compact .msg img.avatar{width:22px;height:22px;margin-top:1px;}
html.pf-compact .msg-head{display:inline-flex;margin-right:6px;}
html.pf-compact .msg-text{line-height:1.35;}
html.pf-compact .msg-attach img{max-width:200px;max-height:150px;}
/* colours */
html.pf-nocolors .msg-head .name,html.pf-nocolors .member-name,html.pf-nocolors [data-uid][style*="color"]{color:var(--text)!important;}
html.pf-desat body{filter:saturate(.6);}
/* reduce motion */
html.pf-reduce *,html.pf-reduce *::before,html.pf-reduce *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
/* high contrast */
html.pf-hc{--text:#fff;--text-dim:#e3e6ee;--text-faint:#b9bfcd;--line:#7a8296;}
html.pf-hc .msg-text{color:#fff;}
html.pf-hc button,html.pf-hc input,html.pf-hc select,html.pf-hc textarea{border-color:var(--text-dim)!important;}
html.pf-hc :focus-visible{outline:3px solid var(--cyan)!important;outline-offset:2px;}
/* larger buttons */
html.pf-big button,html.pf-big .settings-nav-item,html.pf-big .channel-item,html.pf-big .server-rail-btn{min-height:44px;}
html.pf-big .msg-actions button{min-width:40px;min-height:40px;}
html.pf-big .settings-input,html.pf-big .settings-select{min-height:44px;}
/* sensitive-content blur */

/* blocked people */
.msg.from-blocked{display:none;}
.blocked-list{display:flex;flex-direction:column;gap:6px;}
.blk-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;}
.blk-row img{width:28px;height:28px;border-radius:50%;object-fit:cover;}
.blk-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
/* two-factor */
.tfa-secret{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.08em;padding:10px 12px;background:var(--ink);border:1px solid var(--line);border-radius:8px;margin:6px 0 10px;user-select:all;word-break:break-all;}
.tfa-codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 12px;}
.tfa-codes code{font-family:ui-monospace,Menlo,Consolas,monospace;padding:6px 8px;background:var(--ink);border:1px solid var(--line);border-radius:6px;text-align:center;font-size:13px;}
#tfaBody .sec-input{display:block;margin:6px 0;max-width:320px;}

/* ===== voice connection panel (signal bars on the "Voice Connected" strip) ===== */
.voice-status-bar{position:relative;}
.vsb-signal{position:relative;background:none;border:none;padding:6px 6px;margin-left:-6px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;flex-shrink:0;color:var(--green);}
.vsb-signal:hover,.vsb-signal[aria-expanded="true"]{background:rgba(255,255,255,.07);}
.vsb-signal svg rect{fill:currentColor;opacity:.28;transition:opacity .2s;}
.vsb-signal svg rect.on{opacity:1;}
.vsb-signal[data-q="ok"]{color:#e8b73a;}
.vsb-signal[data-q="poor"]{color:var(--red);}
.vsb-signal[data-q="none"]{color:var(--text-faint);}
.vsb-signal:hover::after,.vsb-signal:focus-visible::after,.vsb-signal:active::after{content:attr(data-ping);position:absolute;bottom:calc(100% + 6px);left:0;background:var(--ink);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:5;}
.vsb-title{color:var(--green);}
.net-pop{position:absolute;left:8px;right:8px;bottom:calc(100% + 8px);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 12px 36px rgba(0,0,0,.5);z-index:40;max-height:calc(100vh - 120px);overflow:auto;}
.net-pop[hidden]{display:none;}
.np-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;}
.np-q{font-size:12px;font-weight:600;color:var(--green);}
.np-q[data-q="ok"]{color:#e8b73a;}.np-q[data-q="poor"]{color:var(--red);}.np-q[data-q="none"]{color:var(--text-faint);}
.np-chart{position:relative;margin-top:10px;height:70px;background:var(--ink);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.np-chart canvas{width:100%;height:100%;display:block;}
.np-max{position:absolute;top:4px;right:8px;font-size:10px;color:var(--text-faint);}
.np-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--text-faint);margin:4px 2px 8px;}
.np-rows>div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:12px;}
.np-rows span{color:var(--text-dim);}
.np-rows b{font-weight:600;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.np-note{display:flex;gap:10px;align-items:flex-start;margin:10px 0;padding-top:10px;border-top:1px solid var(--line);color:var(--text-dim);font-size:11px;line-height:1.4;}
.np-note p{margin:0;}
.np-note #npLock{color:var(--text-dim);flex-shrink:0;}
.net-pop .btn-secondary{width:100%;}
.vsb-signal[aria-expanded="true"]::after{display:none!important;}
.np-head b{white-space:nowrap;}
/* squarer panel: wider than the sidebar, rows in two columns */
.net-pop{left:8px;right:auto;width:min(360px,calc(100vw - 16px));padding:14px 16px;}
.np-chart{height:64px;}
.np-rows{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;}
.np-rows>div{flex-direction:column;justify-content:flex-start;gap:0;padding:5px 0;}
.np-rows b{text-align:left;font-size:13px;}
.np-rows span{font-size:11px;}
.np-note{margin:8px 0;padding-top:8px;}
.np-rows{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 12px;}
.np-rows>div{padding:4px 0;}
.np-rows b{font-size:12px;}
.np-chart{height:56px;}

/* ===== server pictures ===== */
.server-rail-btn.has-icon{padding:0;background:var(--panel-2);}
.server-rail-btn img,.ex-ico img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.ex-ico.has-icon{background:var(--panel-2);overflow:hidden;}
.ss-icon-row{display:flex;align-items:center;gap:14px;}
.ss-icon-preview{width:64px;height:64px;border-radius:18px;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--text-dim);overflow:hidden;flex:none;}
.ss-icon-preview img{width:100%;height:100%;object-fit:cover;}
.ss-icon-btns{display:flex;gap:8px;flex-wrap:wrap;}

/* ===== server: categories, stats, invites, rules ===== */
.cat-head{display:flex;align-items:center;gap:6px;padding:10px 8px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);cursor:pointer;user-select:none;}
.cat-head:hover{color:var(--text-dim);}
.cat-caret{display:inline-block;transition:transform .15s;font-size:10px;}
.cat-head.closed .cat-caret{transform:rotate(-90deg);}
.cat-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cat-n{font-weight:600;opacity:.6;}
.cat-body.closed{display:none;}
.ss-cat-add{display:flex;gap:8px;margin-bottom:10px;}
.ss-cat-add input{flex:1;}
.st-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.st-head h3{margin:0;}
.st-span{width:auto;}
.st-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;}
.st-tiles>div{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;}
.st-tiles b{font-size:20px;font-variant-numeric:tabular-nums;}
.st-tiles span{font-size:11px;color:var(--text-dim);}
.st-cols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;height:80px;align-items:end;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 8px 0;}
.st-cols>div{height:100%;display:flex;align-items:flex-end;}
.st-cols i{display:block;width:100%;min-height:2px;background:var(--cyan);opacity:.55;border-radius:2px 2px 0 0;}
.st-cols>div:hover i,.st-cols>div.peak i{opacity:1;}
.st-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--text-faint);margin:3px 4px 0;}
.st-two{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px;margin-top:6px;}
@media(max-width:760px){.st-two{grid-template-columns:1fr;}}
.st-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12.5px;min-width:0;}
.st-row img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none;}
.st-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-row b{font-variant-numeric:tabular-nums;font-weight:600;}
.st-bar{flex:1;height:6px;background:var(--panel-2);border-radius:4px;overflow:hidden;min-width:30px;}
.st-bar i{display:block;height:100%;background:var(--cyan);border-radius:4px;}
.st-left{font-size:10px;color:var(--text-faint);font-style:normal;}
.inv-new{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:center;margin:10px 0 4px;}
@media(max-width:760px){.inv-new{grid-template-columns:1fr 1fr;}}
.inv-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.inv-item{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.inv-item.dead{opacity:.6;}
.inv-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;}
.inv-main{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--cyan);border:1px solid var(--cyan);border-radius:5px;padding:0 5px;}
.inv-meta{margin-left:auto;font-size:11.5px;color:var(--text-dim);}
.inv-dead{color:var(--red);font-weight:600;}
.inv-url{display:flex;align-items:center;gap:8px;margin-top:8px;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 8px;}
.inv-url span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text-dim);font-family:ui-monospace,Menlo,Consolas,monospace;}
.inv-joined{margin-top:8px;font-size:12px;color:var(--text-dim);}
.inv-joined summary{cursor:pointer;}
.inv-joined div{display:flex;justify-content:space-between;padding:2px 0 2px 12px;}
.inv-joined div span{color:var(--text-faint);}
.inv-by{margin-top:6px;font-size:11px;color:var(--text-faint);}
.rules-card{max-width:520px;}
.rules-text{white-space:pre-wrap;max-height:50vh;overflow:auto;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.55;margin:10px 0;}
.st-span button{white-space:nowrap;}
.inv-new{grid-template-columns:1.5fr 1fr 1fr auto;}
.inv-new .settings-input{min-width:0;}
.inv-url .ss-delete{background:none;border:1px solid var(--line);border-radius:7px;color:var(--red);width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.inv-url .ss-delete:hover{background:rgba(229,96,90,.15);}
@media(max-width:760px){.inv-new{grid-template-columns:1fr 1fr;}.inv-new .settings-input{grid-column:1/-1;}}

/* status menu: sized like the rest of the sidebar */
.status-picker{padding:6px;border-radius:12px;}
.status-picker .sp-row{gap:10px;padding:7px 10px;border-radius:8px;font-size:13px;}
.status-picker .sp-t{gap:1px;}
.status-picker .sp-t b{font-weight:600;font-size:13px;}
.status-picker .sp-t small{font-size:11px;line-height:1.25;}
.status-picker .sp-row>svg{width:15px;height:15px;}
.status-picker .sp-dot{width:14px;height:14px;}
.status-picker .sp-dot svg{width:13px;height:13px;}
.status-picker .sp-dot.dnd i{width:7px;height:2.5px;}
.status-picker .sp-dot.invisible{border-width:3px;}
.status-picker .sp-small .sp-t b{font-weight:500;}
.sp-sep{margin:4px 4px;}
/* every leading icon in the status menu sits in the same 16px slot */
.status-picker .sp-dot{width:16px;height:16px;}
.status-picker .sp-dot svg{width:16px;height:16px;}
.status-picker .sp-row>svg:first-child{width:16px;height:16px;}
.status-picker .sp-row>svg:last-child:not(:first-child){width:14px;height:14px;}
.status-picker .sp-dot.dnd i{width:8px;height:2.5px;}
.status-picker .sp-dot.idle{overflow:visible;}
.status-picker .sp-dot.idle svg{width:19px;height:19px;margin:-1.5px;flex:none;}
.status-picker .sp-row>svg:first-child{width:18px;height:18px;margin:-1px;}
/* status menu — compact */
.status-picker .sp-row{gap:9px;padding:5px 9px;font-size:12px;}
.status-picker .sp-t b{font-size:12px;}
.status-picker .sp-t small{font-size:10.5px;}
.status-picker .sp-dot{width:12px;height:12px;}
.status-picker .sp-dot svg{width:12px;height:12px;}
.status-picker .sp-dot.idle svg{width:15px;height:15px;margin:-1.5px;}
.status-picker .sp-dot.dnd i{width:6px;height:2px;}
.status-picker .sp-dot.invisible{border-width:2.5px;}
.status-picker .sp-row>svg:first-child{width:14px;height:14px;margin:-1px;}
.status-picker .sp-row>svg:last-child:not(:first-child){width:12px;height:12px;}
.status-picker{padding:5px;}

/* server rail (left column): no looping/bounce animations */
.server-rail *,.server-rail *::before,.server-rail *::after{animation:none!important;} /* (no bouncing/looping animations in the rail — the hover transitions below are allowed) */
.server-rail .server-rail-btn:active,.server-rail .server-rail-btn:hover svg,.server-rail .server-rail-btn:active svg,.server-rail .server-rail-btn svg{transform:none!important;}

/* ===== settings window: grouped sidebar with icons, search and log out ===== */
.settings-nav{width:226px;display:flex;flex-direction:column;padding:14px 10px 12px;overflow-y:auto;}
.sn-search{display:flex;align-items:center;gap:8px;background:var(--ink);border:1px solid var(--line);border-radius:9px;padding:0 10px;height:36px;margin:0 2px 8px;color:var(--text-faint);}
.sn-search:focus-within{border-color:var(--cyan);}
.sn-search-ic svg{width:15px;height:15px;display:block;}
.sn-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-size:13px;}
.sn-search kbd{font-family:inherit;font-size:10.5px;color:var(--text-faint);background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;}
.sn-group{padding:12px 12px 5px;font-size:12px;font-weight:600;color:var(--text-faint);}
.settings-nav .settings-nav-item{display:flex;align-items:center;gap:12px;padding:8px 12px;font-size:13.5px;font-weight:600;border-radius:8px;margin-bottom:1px;}
.settings-nav .sn-ic{display:inline-flex;width:18px;height:18px;flex:none;}
.settings-nav .sn-ic svg{width:18px;height:18px;display:block;}
.settings-nav .settings-nav-item.active{background:var(--panel);color:var(--text);}
.settings-nav .settings-nav-item.active .sn-ic{color:var(--cyan);}
.sn-spacer{flex:1;min-height:12px;}
.settings-nav .sn-logout{color:var(--red);border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;padding-top:12px;}
.settings-nav .sn-logout:hover{background:rgba(229,96,90,.12);color:var(--red);}
.stm-list{margin:4px 0 8px 18px;padding:0;color:var(--text-dim);font-size:12.5px;line-height:1.6;}
html[data-dir="rtl"] .msg-text,html[data-dir="rtl"] .msg-reply-ref{direction:rtl;text-align:right;unicode-bidi:plaintext;}
html[data-dir="ltr"] .msg-text,html[data-dir="ltr"] .msg-reply-ref{direction:ltr;text-align:left;}
@media (max-width:720px){
  .settings-nav{width:100%;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:10px;gap:4px;}
  .sn-search,.sn-group,.sn-spacer{display:none!important;}
  .settings-nav .settings-nav-item{white-space:nowrap;width:auto;flex:none;}
  .settings-nav .sn-logout{border-top:none;margin-top:0;padding-top:8px;}
}
.settings-nav .settings-nav-item{padding:7px 12px;}
.settings-nav .sn-logout{position:sticky;bottom:-12px;background:var(--panel-2);z-index:1;}
@media (max-width:720px){.settings-nav .sn-logout{position:static;}}

/* ---- owner admin panel (sidebar layout) ---- */
.adm-nav{width:220px;flex:none;display:flex;flex-direction:column;padding:14px 10px;gap:1px;border-right:1px solid var(--line);background:rgba(0,0,0,.18);overflow-y:auto;}
.adm-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 12px;} .adm-brand b{display:block;font-size:14px;} .adm-brand small{opacity:.6;font-size:11px;}
.adm-crown{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(240,180,41,.18);color:#f0b429;}
.adm-nav .sn-group{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.5;padding:12px 10px 4px;}
.adm-nav-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;color:var(--text-dim);font-size:13.5px;font-weight:600;padding:8px 10px;border-radius:8px;cursor:pointer;}
.adm-nav-item:hover{background:rgba(255,255,255,.06);color:var(--text);} .adm-nav-item.active{background:rgba(79,209,197,.14);color:var(--cyan);}
.adm-nav-item .sn-ic{display:grid;place-items:center;width:18px;height:18px;}
.adm-badge{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;background:#e5534b;color:#fff;border-radius:9px;padding:0 6px;line-height:17px;}
.adm-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 20px 14px;}
.adm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex:none;} .adm-top h2{margin:0;font-size:19px;}
.adm-card2{background:var(--panel-2,rgba(255,255,255,.04));border:1px solid var(--line);border-radius:12px;padding:14px;}
.adm-two{display:grid;grid-template-columns:3fr 2fr;gap:12px;margin-top:6px;}
.adm-bars{display:flex;align-items:flex-end;gap:5px;height:90px;}
.adm-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;} .adm-bar span{display:block;width:100%;min-height:3px;background:var(--cyan,#4fd1c5);border-radius:4px 4px 0 0;opacity:.85;} .adm-bar i{font-style:normal;font-size:10px;opacity:.6;}
.adm-top-row{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;} .adm-top-row:last-child{border:none;} .adm-top-row span{opacity:.65;white-space:nowrap;}
.adm-stat{transition:border-color .15s;} .adm-stat:hover{border-color:var(--cyan-dim);}
@media (max-width:720px){
  .adm-card{flex-direction:column;} .adm-nav{width:auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);padding:8px;} .adm-brand,.adm-nav .sn-group{display:none;} .adm-nav-item{white-space:nowrap;width:auto;flex:none;}
  .adm-two{grid-template-columns:1fr;} .adm-main{padding:12px;}
}

/* ---- profile popover: about / activity redesign ---- */
.psect-label{font-size:10.5px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;}
.user-profile-bio{background:var(--panel-2);border-radius:10px;padding:10px 12px;margin-bottom:10px;}
.user-profile-bio .upb-text{color:var(--text);font-size:12.5px;line-height:1.5;white-space:pre-wrap;}
.user-profile-bio.empty .upb-text{color:var(--text-faint);font-style:italic;}
.level-box{border-radius:10px;padding:11px 12px;margin-bottom:10px;}
.level-box-top{align-items:baseline;} .level-box-top span:first-of-type{font-size:15px;font-weight:700;color:var(--text);} .level-box-top span:last-of-type{font-size:11px;font-weight:600;color:var(--text-faint);}
.level-stats{display:block;margin-top:12px;font-size:12px;}
.ls-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.ls-tile{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--line);}
.ls-tile .ls-ic{color:var(--cyan,#4fd1c5);display:flex;margin-bottom:2px;} .ls-tile b{font-size:14px;font-weight:700;color:var(--text);} .ls-tile span:last-child{font-size:10.5px;color:var(--text-faint);}
.ls-rows{margin-top:8px;display:flex;flex-direction:column;}
.ls-row{display:flex;align-items:center;gap:8px;padding:6px 2px;border-top:1px solid var(--line);font-size:12px;} .ls-row:first-child{border-top:none;}
.ls-row .ls-ic{display:flex;width:16px;justify-content:center;color:var(--text-faint);} .ls-row .ls-l{color:var(--text-dim);flex:1;} .ls-row b{font-weight:600;color:var(--text);font-size:12px;}
.ls-row .dp-mini{width:14px;height:14px;}
.profile-achievements{margin-bottom:10px;} .ach-list{display:flex;flex-wrap:wrap;gap:6px;}
#userProfileAchievements{display:block;margin-top:0;}
.ls-row .ls-l,.ls-row b{white-space:nowrap;} .ls-row b{font-size:11.5px;}

/* ---- profile: two-pane modal (left: identity, right: tabs) ---- */
.user-profile-popover{width:min(820px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 24px));border-radius:14px;overflow:hidden;box-shadow:0 0 0 100vmax rgba(0,0,0,.62),0 24px 60px rgba(0,0,0,.55);}
.user-profile-popover.active{display:flex;position:fixed;left:50%!important;top:50%!important;transform:translate(-50%,-50%);max-height:min(560px,calc(100vh - 24px))!important;overflow:hidden!important;}
.upm-left{width:300px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line);overflow-y:auto;}
.upm-left .user-profile-banner{height:92px;flex:none;}
.upm-left .user-profile-avatar-wrap{left:16px;bottom:-34px;}
.upm-left .user-profile-avatar{width:72px;height:72px;border-width:4px;}
.upm-left .user-profile-online-dot{width:16px;height:16px;border-width:3px;}
.upm-left-body{padding:0 16px 16px;}
.upm-left .user-profile-namewrap{padding:42px 0 12px;min-height:0;}
.upm-left .user-profile-namewrap h3{font-size:17px;}
.upm-left .user-profile-status{font-size:12px;margin-top:3px;}
.upm-left .user-profile-actions{flex-direction:row;align-items:center;gap:8px;margin-bottom:14px;}
.upm-primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border:none;border-radius:8px;background:var(--cyan,#4fd1c5);color:#06201d;font-size:13px;font-weight:700;cursor:pointer;} .upm-primary:hover{filter:brightness(1.08);} .upm-primary:disabled{opacity:.55;cursor:default;filter:none;background:var(--panel);color:var(--text-dim);}
.upm-icon{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--text-dim);cursor:pointer;} .upm-icon:hover{color:var(--text);border-color:var(--cyan-dim);}
.upm-more-wrap{position:relative;flex:none;}
.upm-more-menu{position:absolute;right:0;top:40px;z-index:5;min-width:160px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:4px;box-shadow:0 10px 28px rgba(0,0,0,.5);}
.upm-more-menu[hidden]{display:none;}
.upm-more-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);font-size:12.5px;padding:7px 10px;border-radius:6px;cursor:pointer;} .upm-more-menu button:hover{background:rgba(255,255,255,.07);} .upm-more-menu button.danger{color:#ff8d86;}
.upm-info{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:10px;}
.upm-field[hidden]{display:none;} .upm-field{display:flex;flex-direction:column;gap:3px;}
.upm-l{font-size:11px;font-weight:600;color:var(--text-faint);} .upm-l small{font-weight:400;opacity:.8;}
.upm-v{font-size:13px;font-weight:600;color:var(--text);}
.upm-note{width:100%;box-sizing:border-box;resize:none;background:transparent;border:none;outline:none;color:var(--text);font:inherit;font-size:12.5px;padding:0;line-height:1.4;overflow:hidden;} .upm-note::placeholder{color:var(--text-faint);}
.upm-info .profile-roles{margin:0;} .upm-info .profile-section-label{margin-top:6px;}
.upm-right{flex:1;min-width:0;display:flex;flex-direction:column;}
.upm-tabs{display:flex;align-items:center;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line);flex:none;position:relative;padding-right:46px;}
.upm-tab{background:none;border:none;color:var(--text-dim);font-size:13px;font-weight:600;padding:7px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;} .upm-tab:hover{color:var(--text);} .upm-tab.active{background:rgba(255,255,255,.08);color:var(--text);} .upm-tab[hidden]{display:none;}
.upm-tabs .user-profile-close{top:50%;right:12px;transform:translateY(-50%);width:26px;height:26px;border-radius:7px;background:transparent;color:var(--text-dim);} .upm-tabs .user-profile-close:hover{background:rgba(255,255,255,.08);color:var(--text);}
.upm-pane{flex:1;overflow-y:auto;padding:16px 18px;} .upm-pane[hidden]{display:none;}
.upm-pane .user-profile-bio{margin-bottom:12px;}
.upm-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13px;} .upm-row b{font-weight:600;} .upm-row small{color:var(--text-faint);} .upm-click{cursor:pointer;} .upm-click:hover,.upm-row:hover{background:rgba(255,255,255,.05);}
.upm-sicon{width:30px;height:30px;border-radius:9px;background:var(--panel);display:grid;place-items:center;font-weight:700;color:var(--text-dim);overflow:hidden;flex:none;} .upm-sicon img{width:100%;height:100%;object-fit:cover;}
.upm-fav{position:relative;width:30px;height:30px;flex:none;} .upm-fav img{width:30px;height:30px;border-radius:50%;object-fit:cover;} .upm-fav i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--text-faint);border:2px solid var(--panel-2);} .upm-fav i.on{background:var(--green);}
.upm-empty{color:var(--text-faint);font-size:13px;text-align:center;padding:30px 0;}
@media (max-width:700px){
  .user-profile-popover.active{flex-direction:column;overflow-y:auto!important;} .upm-left{width:auto;border-right:none;border-bottom:1px solid var(--line);overflow:visible;flex:none;} .upm-right{flex:none;} .upm-tabs{overflow-x:auto;}
}
/* bigger profile modal (closer to the reference) */
.user-profile-popover{width:min(980px,calc(100vw - 24px));}
.user-profile-popover.active{height:min(660px,calc(100vh - 24px));max-height:none!important;}
.upm-left{width:350px;} .upm-left .user-profile-banner{height:116px;}
.upm-left .user-profile-avatar-wrap{left:20px;bottom:-42px;} .upm-left .user-profile-avatar{width:88px;height:88px;}
.upm-left-body{padding:0 20px 20px;} .upm-left .user-profile-namewrap{padding-top:52px;} .upm-left .user-profile-namewrap h3{font-size:20px;} .upm-left .user-profile-status{font-size:13px;}
.upm-primary,.upm-icon{height:38px;} .upm-icon{width:38px;} .upm-primary{font-size:14px;}
.upm-info{padding:14px 16px;gap:14px;} .upm-l{font-size:12px;} .upm-v{font-size:14px;} .upm-note{font-size:13.5px;}
.upm-tabs{padding:14px 16px;padding-right:52px;} .upm-tab{font-size:14px;padding:8px 14px;}
.upm-pane{padding:22px 26px;} .upm-pane .user-profile-bio .upb-text{font-size:14px;}
.upm-pane .level-box{padding:16px;} .upm-pane .level-box-top span:first-of-type{font-size:17px;}
.ls-tile{padding:14px 6px;} .ls-tile b{font-size:17px;} .ls-tile span:last-child{font-size:12px;} .ls-row{font-size:13.5px;padding:9px 2px;} .ls-row b{font-size:13px;}
.upm-row{font-size:14px;padding:10px 12px;} .upm-sicon,.upm-fav,.upm-fav img{width:36px;height:36px;} .upm-sicon{border-radius:10px;}
@media (max-width:700px){.user-profile-popover.active{height:auto;max-height:calc(100vh - 24px)!important;}.upm-left{width:auto;}}
.upm-left .user-profile-actions{align-items:stretch;height:40px;}
.upm-primary,.upm-icon{box-sizing:border-box;height:40px;margin:0;padding-top:0;padding-bottom:0;line-height:1;}
.upm-icon{width:40px;display:inline-flex;align-items:center;justify-content:center;}
.upm-more-wrap{display:flex;height:40px;} .upm-more-wrap .upm-icon{height:40px;} .upm-more-menu{top:46px;}

/* ===== SERVER SETTINGS (redesign): same grammar as the user settings window ===== */
.settings-card.ss-card{width:940px;max-width:96vw;}
.ss-card .settings-layout{min-height:560px;height:min(640px,86vh);max-height:none;}
.ss-card .settings-nav{width:210px;}
.ss-card .settings-panels{padding:22px 26px 28px;}
/* page header of each tab */
.ss-ph{margin-bottom:16px;} .ss-ph h3{margin:0 0 4px;font-size:17px;} .ss-ph p{margin:0;font-size:12.5px;color:var(--text-faint);line-height:1.5;}
.ss-ph-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;} .ss-ph-row>div:first-child{flex:1;min-width:200px;}
/* a section card */
.ss-sec{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px;}
.ss-sec .field{margin:0 0 12px;} .ss-sec .field:last-child{margin-bottom:0;}
.ss-sec .field + .field{margin-top:0;}
.ss-st{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px;} .ss-st.danger{color:var(--red);}
.ss-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .ss-grid2 .field{margin:0;}
@media (max-width:720px){.ss-grid2{grid-template-columns:1fr;}}
.ss-card .field label{display:block;font-size:12px;font-weight:600;color:var(--text-dim);margin:0 0 6px;} .ss-card .field label small{font-weight:400;color:var(--text-faint);}
.ss-card .field input[type=text],.ss-card .settings-input,.ss-card .settings-select{height:36px;box-sizing:border-box;padding:0 12px;font-size:13px;margin:0;}
.ss-card .field textarea,.ss-card .gd-ta{box-sizing:border-box;width:100%;background:var(--ink);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:9px 12px;font-size:13px;font-family:inherit;line-height:1.5;outline:none;resize:vertical;}
.ss-card .field textarea:focus,.ss-card .gd-ta:focus,.ss-card .field input[type=text]:focus,.ss-card .settings-input:focus{border-color:var(--cyan-dim);}
.ss-card .field input[type=text],.ss-card select.settings-input{background-color:var(--ink);}
.ss-card .settings-hint{margin:10px 0 0;}
.ss-card .auth-error{min-height:0;margin:8px 0 0;} .ss-card .auth-error:empty{display:none;}
.ss-card .char-counter{margin-top:4px;}
/* every button in the modal: one height, one baseline, one rhythm */
.ss-card .btn-secondary,.ss-card .btn-compact,.ss-card .btn-danger,.ss-card .emo-btn{box-sizing:border-box;height:36px;margin:0;padding:0 16px;font-size:13px;font-weight:600;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;line-height:1;width:auto;flex:none;}
.ss-card .enter-btn.btn-compact{margin:0;letter-spacing:0;}
.btn-danger{background:transparent;border:1px solid rgba(229,96,90,.55);color:var(--red);cursor:pointer;transition:background .12s,border-color .12s;} .btn-danger:hover{background:rgba(229,96,90,.14);border-color:var(--red);}
.ss-card button:disabled{opacity:.5;cursor:not-allowed;}
.ss-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;} .ss-actions.ss-save{margin:0 0 12px;} .ss-sec .ss-actions:first-child{margin-top:0;}
/* switch row */
.ss-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0 12px;cursor:pointer;}
.ss-sw-t{display:flex;flex-direction:column;gap:2px;min-width:0;} .ss-sw-t b{font-size:13px;font-weight:600;color:var(--text);} .ss-sw-t small{font-size:12px;color:var(--text-faint);line-height:1.45;}
.ss-switch .toggle-switch{flex:none;}
/* picture */
.ss-icon-row{display:flex;align-items:center;gap:16px;} .ss-icon-side{display:flex;flex-direction:column;gap:8px;min-width:0;} .ss-icon-side b{font-size:13px;} .ss-icon-side .ss-actions{margin:0;}
.ss-icon-preview{width:72px;height:72px;border-radius:20px;}
/* invite link row */
.ss-linkrow{display:flex;align-items:center;gap:8px;} .ss-link{flex:1;min-width:0;height:36px;box-sizing:border-box;display:flex;align-items:center;padding:0 12px;background:var(--ink);border:1px solid var(--line);border-radius:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* danger zone */
.ss-danger{border-color:rgba(229,96,90,.4);} .ss-dz{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;} .ss-dz>div{display:flex;flex-direction:column;gap:2px;} .ss-dz b{font-size:13px;} .ss-dz small{font-size:12px;color:var(--text-faint);}
/* lists: channels, roles, categories, bans */
.ss-list{display:flex;flex-direction:column;gap:6px;margin-bottom:4px;} .ss-cat-box .ss-list{margin-top:10px;}
.ss-empty{margin:6px 0;padding:18px 0;text-align:center;font-size:13px;color:var(--text-faint);}
.ss-card .ss-chan-row{margin:0;min-height:48px;box-sizing:border-box;padding:6px 8px 6px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;gap:12px;}
.ss-sec .ss-chan-row{background:var(--ink);}
.ss-card .ss-chan-row:hover{border-color:var(--cyan-dim);}
.ss-card .ss-chan-row .ss-chan-icon{width:18px;color:var(--text-faint);}
.ss-chan-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;} .ss-card .ss-chan-row .ss-chan-name{flex:none;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ss-card .ss-chan-sub{font-size:12px;color:var(--text-faint);}
.ss-card .ss-chan-row .ss-chan-actions{display:flex;align-items:center;gap:4px;flex:none;}
.ss-card .ss-chan-row .ss-chan-actions button{width:30px;height:30px;padding:0;margin:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-faint);cursor:pointer;}
.ss-card .ss-chan-row .ss-chan-actions button:hover:not(:disabled){background:var(--line);color:var(--text);}
.ss-card .ss-chan-row .ss-chan-actions .danger:hover{color:var(--red);background:rgba(229,96,90,.14);}
.ss-card .ss-chan-actions button:disabled{opacity:.25;}
.ss-card .ss-chan-actions svg{display:block;}
.ss-card .role-dot{width:12px;height:12px;}
.ss-ban-row img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;}
.ss-inline{height:30px!important;max-width:260px;}
.ss-cat-add{display:flex;align-items:center;gap:8px;margin:0;} .ss-cat-add input{flex:1;min-width:0;}
/* invites */
.ss-card .inv-new{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:8px;align-items:center;margin:0;}
.ss-card .inv-list{margin-top:0;}
.ss-card .inv-item{background:var(--panel-2);border-radius:10px;}
.ss-card .inv-url .copy-btn,.ss-card .inv-url .ss-delete{height:30px;box-sizing:border-box;margin:0;display:inline-flex;align-items:center;justify-content:center;}
@media(max-width:760px){.ss-card .inv-new{grid-template-columns:1fr 1fr;}.ss-card .inv-new .settings-input{grid-column:1/-1;}}
/* stats */
.ss-card .st-span{width:auto;flex:none;} .ss-card .st-span button{padding:0 14px;height:30px;}
/* emojis */
.ss-card .emo-add{margin:0;} .ss-card .emo-add .emo-btn,.ss-card .emo-add .emo-name{height:36px;} .ss-card .emo-add .enter-btn{margin:0;}
.ss-card .emo-list{margin-top:0;}
/* welcome preview */
.ss-prev{background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:2px;} .ss-prev-l{display:block;font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;} #swPrev{font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;}
#swFields .field{margin-bottom:12px;}
/* members' rules window */
.rules-card{max-width:520px;}
.rules-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;} .rules-head h3{margin:0;font-size:16px;} .rules-head small{color:var(--text-faint);font-size:12px;}
.rules-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(79,209,197,.14);color:var(--cyan);flex:none;}
.rules-card .rules-text{margin:0 0 12px;}
.rules-actions{margin-top:6px;} .rules-card .enter-btn.btn-compact,.rules-card .btn-secondary{box-sizing:border-box;height:38px;margin:0;padding:0 18px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;width:auto;}
@media (max-width:720px){
  .settings-card.ss-card{width:96vw;} .ss-card .settings-layout{height:84vh;}
  .ss-card .settings-nav .settings-nav-item{padding:7px 12px;} .ss-card .settings-panels{padding:16px;}
  .ss-linkrow{flex-wrap:wrap;} .ss-link{flex:1 1 100%;}
}
.ss-sec .ss-grid2 + .field,.ss-sec .field + .ss-grid2,.ss-sec .ss-switch + .ss-grid2,.ss-sec .ss-grid2 + .ss-grid2{margin-top:12px;}
.ss-sec .ss-switch:last-child{padding-bottom:0;}
/* "up" arrows are the down arrow turned around. Use the separate `rotate` property: the hover rule `button:hover svg[data-ic]{transform:scale(1.14)}` would otherwise replace a transform-based flip and the arrow would point down while hovered. */
.ss-card .ss-role-up svg,.ss-card .cat-up svg,.ss-card .ss-chan-up svg{rotate:180deg;}
.ss-cat-box{margin-top:12px;}

/* ---- avatar frames stay circular in tall messages (the wrapper used to stretch to the message height) ---- */
.msg>.av-deco,.thread-panel .msg>.av-deco{align-self:flex-start;height:fit-content;width:fit-content;flex:none;}
.av-deco>img.avatar{display:block;}
/* ---- Telegram-style blurred media ---- */
.mb-on{position:relative;overflow:hidden;border-radius:8px;}
.msg-attach.mb-on{display:inline-block;max-width:100%;margin-top:6px;vertical-align:top;}
.msg-attach.mb-on img,.msg-attach.mb-on video{margin-top:0;}
.mb-on>img,.mb-on>video{filter:blur(28px) saturate(1.1);transform:scale(1.25);pointer-events:none;}
.mb-veil{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;border:none;margin:0;padding:0;cursor:pointer;background:rgba(18,20,28,.38);border-radius:inherit;}
.mb-pill{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:999px;background:rgba(10,12,18,.62);color:#fff;font-size:12.5px;font-weight:600;backdrop-filter:blur(4px);transition:background .12s;}
.mb-pill b{font-weight:600;} .mb-veil:hover .mb-pill{background:rgba(10,12,18,.8);}
.mb-pill svg{display:block;}
.mb-dust{position:absolute;inset:0;pointer-events:none;opacity:.7;background-image:radial-gradient(1.2px 1.2px at 12% 22%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 38% 70%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 64% 30%,#fff 50%,transparent 52%),radial-gradient(1.4px 1.4px at 82% 62%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 52% 88%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 90% 12%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 24% 48%,#fff 50%,transparent 52%);background-size:90px 90px;animation:mbDust 2.4s ease-in-out infinite alternate;}
@keyframes mbDust{0%{background-position:0 0;opacity:.35}100%{background-position:14px 10px;opacity:.85}}
@media (prefers-reduced-motion:reduce){.mb-dust{animation:none;}}
/* spoiler switch on an attachment in the composer tray */
.ap-item{position:relative;}
.ap-spoil{position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:7px;border:none;display:inline-flex;align-items:center;justify-content:center;background:rgba(10,12,18,.6);color:#fff;cursor:pointer;padding:0;z-index:2;}
.ap-spoil:hover{background:rgba(10,12,18,.85);}
.ap-item.spoiler-on .ap-spoil{background:var(--cyan);color:#06201d;}
.ap-item.spoiler-on .ap-thumb img{filter:blur(8px);transform:scale(1.2);}
.ap-thumb{overflow:hidden;}

/* ---- user settings window: roomier, so every nav item is visible and button rows don't wrap ---- */
#settingsModal .settings-card{width:740px;max-width:96vw;}
#settingsModal .settings-card.shop-wide{width:980px;}
#settingsModal .settings-layout{min-height:600px;max-height:90vh;}
#settingsModal .settings-nav .settings-nav-item{padding:6px 12px;margin-bottom:0;}
#settingsModal .sn-group{padding:9px 12px 3px;}
.vip-actions{flex-wrap:nowrap;} .vip-actions>*{flex:none;white-space:nowrap;}
@media (max-width:720px){#settingsModal .settings-card{width:96vw;}.vip-actions{flex-wrap:wrap;}}
/* settings search = same size/look as the chat search box */
.sn-search{height:34px;box-sizing:border-box;gap:8px;padding:0 10px;margin:0 0 8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;transition:border-color .15s;}
.sn-search:focus-within{border-color:var(--cyan-dim);}
.sn-search .sn-search-ic{display:flex;color:var(--text-faint);flex:none;} .sn-search-ic svg{width:14px;height:14px;}
.sn-search input{height:100%;font:inherit;font-size:13px;padding:0;margin:0;border:none;box-shadow:none;}
.sn-search input::placeholder{color:var(--text-faint);}
.sn-search kbd{font-size:10px;line-height:16px;padding:0 5px;}

/* ===== status menu — one consistent size system (rows 36px, 20px icon slots, 13px text) ===== */
#statusPicker{padding:6px;border-radius:12px;}
#statusPicker .sp-row{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;min-height:36px;padding:6px 10px;border-radius:8px;font-size:13px;line-height:1.2;color:var(--text);}
#statusPicker .sp-row:hover{background:var(--panel);}
#statusPicker .sp-row.current{background:var(--panel);}
#statusPicker .sp-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
#statusPicker .sp-t b{font-size:13px;font-weight:600;}
#statusPicker .sp-small .sp-t b{font-weight:500;}
#statusPicker .sp-t small{font-size:11.5px;line-height:1.3;color:var(--text-faint);font-weight:400;}
#statusPicker .sp-dot{position:relative;flex:none;width:20px;height:20px;background:none!important;border:none!important;overflow:visible;display:block;}
#statusPicker .sp-dot::before{content:"";position:absolute;inset:4px;border-radius:50%;box-sizing:border-box;}
#statusPicker .sp-dot.online::before{background:var(--green,#3ecf8e);}
#statusPicker .sp-dot.dnd::before{background:var(--red);}
#statusPicker .sp-dot.dnd i{position:absolute;left:50%;top:50%;width:8px;height:2px;margin:-1px 0 0 -4px;border-radius:2px;background:var(--panel-2);}
#statusPicker .sp-dot.invisible::before{border:2px solid var(--text-dim);}
#statusPicker .sp-dot.invisible i{display:none;}
#statusPicker .sp-dot.idle{color:var(--amber);}
#statusPicker .sp-dot.idle svg{position:absolute;inset:3px;width:14px;height:14px;margin:0;}
#statusPicker .sp-row>svg:first-child{width:16px;height:16px;margin:2px;flex:none;color:var(--text-dim);}
#statusPicker .sp-row>svg:last-child:not(:first-child){width:14px;height:14px;margin:0 3px 0 0;flex:none;color:var(--text-dim);}
#statusPicker .sp-sep{height:1px;background:var(--line);margin:5px 4px;}

/* ===== upload progress: percent on the thumbnail + a clearer bar ===== */
.ap-thumb{position:relative;}
.ap-pct{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:rgba(10,12,18,.55);color:#fff;font-size:12px;font-weight:700;text-align:center;line-height:1.1;font-variant-numeric:tabular-nums;padding:2px;box-sizing:border-box;}
.ap-item.uploading .ap-pct{display:flex;}
.ap-item.uploading .ap-thumb{opacity:1;}
.ap-item.uploading .ap-bar{height:5px;border-radius:5px;} .ap-item.uploading .ap-bar i{border-radius:5px;transition:width .15s linear;}
.ap-item.uploading .ap-spoil{display:none;}

/* ===== member list rows: avatar | name line (name shrinks, badges stay) + status | dot ===== */
.member-row{gap:10px;padding:6px 8px;min-height:44px;box-sizing:border-box;}
.member-row .mcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.member-row .mn{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;font-weight:500;line-height:18px;}
.member-row .mn-name{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.member-row .mn-you{margin-left:4px;font-size:11.5px;font-weight:400;color:var(--text-faint);}
.member-row .mn-badges{display:inline-flex;align-items:center;gap:4px;flex:none;}
.member-row .mn-badges .vip-badge,.member-row .mn-badges .owner-badge,.member-row .mn-badges .bot-badge{margin:0;vertical-align:baseline;}
.member-row .mn-badges .vip-badge{padding:0 5px 0 4px;line-height:15px;height:16px;box-sizing:border-box;align-items:center;}
.member-row .mn-badges .owner-badge{display:inline-flex;align-items:center;height:16px;box-sizing:border-box;padding:0 5px;line-height:1;vertical-align:baseline;}
.member-row .msub{line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.member-row .status-dot{margin-left:4px;}
.member-group-label{padding:16px 8px 6px;}

.member-row .mn-name{min-width:48px;}
.member-row .msub{gap:6px;} .member-row .msub-t{min-width:0;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:4px;}
.member-row .msub .owner-badge{margin:0;flex:none;height:14px;font-size:9px;display:inline-flex;align-items:center;padding:0 5px;box-sizing:border-box;line-height:1;}
.member-row .mn .name-tag{flex:none;margin:0 0 0 -3px;font-size:11.5px;font-weight:400;color:var(--text-faint);}

/* ===== user settings window: ONE fixed size for every tab (Shop included) ===== */
#settingsModal .settings-card,#settingsModal .settings-card.shop-wide{width:min(920px,96vw);height:min(660px,94vh);max-width:none;display:flex;flex-direction:column;transition:none;}
#settingsModal .settings-header{flex:none;}
#settingsModal .settings-layout,#settingsModal .settings-card.shop-wide .settings-layout{flex:1;min-height:0;height:auto;max-height:none;}
#settingsModal .settings-panels,#settingsModal .settings-card.shop-wide .settings-panels{padding:22px 28px;overflow-y:auto;min-height:0;}
#settingsModal .settings-nav{min-height:0;}
#settingsModal .settings-card.shop-wide .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
#settingsModal .settings-card.shop-wide .shop-prev,#settingsModal .settings-card.shop-wide .shop-prev.theme{height:120px;}
@media (max-width:720px){#settingsModal .settings-card,#settingsModal .settings-card.shop-wide{width:96vw;height:92vh;}#settingsModal .settings-card.shop-wide .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
#settingsModal .settings-nav>*{flex:none;}
#settingsModal .settings-nav .sn-spacer{flex:1 0 8px;}
#settingsModal .settings-nav .settings-nav-item{padding:5px 12px;}
#settingsModal .sn-group{padding:8px 12px 2px;}

/* ---- Settings: nav spacing + unified control sizes ---- */
#settingsModal .settings-nav{padding:14px 10px 12px;gap:0;}
#settingsModal .settings-nav .settings-nav-item{height:36px;padding:0 12px;margin-bottom:4px;font-size:14px;font-weight:600;gap:12px;line-height:1;}
#settingsModal .settings-nav .sn-ic,#settingsModal .settings-nav .sn-ic svg{width:18px;height:18px;}
#settingsModal .sn-group{padding:12px 12px 6px;font-size:12px;}
#settingsModal .settings-nav .sn-logout{margin-top:6px;padding-top:0;}
#settingsModal .settings-panels{font-size:14px;}
#settingsModal .settings-panels h3,#settingsModal .settings-panels .panel-title{font-size:18px;font-weight:700;}
#settingsModal .settings-panels label,#settingsModal .settings-panels .hint,#settingsModal .settings-panels small{font-size:13px;}
#settingsModal .settings-panels .btn-secondary,#settingsModal .settings-panels .btn-primary,#settingsModal .settings-panels .copy-btn,#settingsModal .settings-panels .enter-btn{font-size:13px;min-height:36px;padding:0 16px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
#settingsModal .settings-panels input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),#settingsModal .settings-panels select{font-size:14px;height:38px;border-radius:8px;}
#settingsModal .settings-panels textarea{font-size:14px;border-radius:8px;}
#settingsModal .settings-panels svg{max-width:20px;max-height:20px;}

/* ---- Bigger channel icons (# and speaker) ---- */
.chan-row{gap:10px;}
.chan-row .chan-icon{width:22px;font-size:21px;font-weight:500;line-height:1;}
.chan-row .chan-icon svg{width:19px;height:19px;}
.chan-row .chan-lock svg{width:13px;height:13px;}

.member-row .mn-crown{display:inline-flex;align-items:center;color:#f2b61a;flex:none;}
.member-row .mn-crown svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:1;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(242,182,26,.35));}

/* ===== Status glyphs: online = green dot, idle = moon, DND = red minus, offline = hollow ring ===== */
.status-dot-badge,.user-profile-online-dot,.member-row .status-dot,.dm-online-dot{--dc:var(--panel);box-sizing:border-box;}
.user-profile-online-dot{--dc:var(--panel-2);}
.status-dot-badge,.user-profile-online-dot,.member-row .status-dot,.dm-online-dot{background:var(--dc);box-shadow:inset 0 0 0 var(--ring,2px) var(--text-faint);}
.status-dot-badge.online,.user-profile-online-dot.online,.member-row .status-dot.online,.dm-online-dot.on,.dm-online-dot.online{background:var(--green);box-shadow:none;}
.status-dot-badge.idle,.user-profile-online-dot.idle,.member-row .status-dot.idle,.dm-online-dot.idle{background:radial-gradient(circle at 30% 30%,var(--dc) 0 36%,var(--amber) 39%);box-shadow:none;}
.status-dot-badge.dnd,.user-profile-online-dot.dnd,.member-row .status-dot.dnd,.dm-online-dot.dnd{background:linear-gradient(var(--dc),var(--dc)) center/58% 22% no-repeat,var(--red);box-shadow:none;}
.member-row .status-dot{width:12px;height:12px;--ring:2px;}
.dm-online-dot{width:10px;height:10px;--ring:1.5px;}
.status-dot-badge{width:12px;height:12px;--ring:2px;}
.upm-left .user-profile-online-dot{width:28px;height:28px;right:-3px;bottom:-3px;border:5px solid var(--panel-2);--ring:3.5px;}
.upm-left .user-profile-online-dot.dnd{background:linear-gradient(var(--dc),var(--dc)) center/60% 20% no-repeat,var(--red);}

/* ===== Profile actions: compact, site-style buttons (no blue ring) ===== */
.upm-left .user-profile-actions{flex-direction:row;gap:8px;height:auto;align-items:center;}
.upm-left .upm-primary{flex:none;height:36px;padding:0 16px;font-size:14px;font-weight:600;border-radius:8px;gap:8px;}
.upm-left .upm-icon,.upm-left .upm-more-wrap .upm-icon{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text-dim);transition:background .12s,color .12s;}
.upm-left .upm-more-wrap{height:36px;}
.upm-left .upm-icon:hover,.upm-left .upm-icon:focus-visible{background:var(--panel);color:var(--text);border-color:var(--line);outline:none;box-shadow:none;}
.upm-more-menu{top:42px;min-width:210px;padding:6px;border-radius:12px;}
.upm-more-menu .um-head{padding:6px 10px 8px;font-size:12px;color:var(--text-faint);font-weight:600;border-bottom:1px solid var(--line);margin-bottom:4px;}
.upm-more-menu button{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;padding:8px 10px;border-radius:7px;}
.upm-more-menu button .um-ic{display:inline-flex;color:var(--text-dim);}
.upm-more-menu button.danger,.upm-more-menu button.danger .um-ic{color:var(--red);}
.upm-more-menu .um-sep{height:1px;background:var(--line);margin:4px 0;}
.upm-left .user-profile-bio{margin:12px 0 0;padding:10px 12px;}
.upm-left .user-profile-bio .upb-text{font-size:13.5px;}
.upm-left .user-profile-bio[hidden]{display:none;}
.upm-left .user-profile-status{color:var(--text-dim);font-size:13.5px;}

/* category headers: same type scale as TEXT / VOICE CHANNELS, redesigned chevron */
.cat-head{gap:4px;padding:10px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.6px;}
.cat-caret{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:-3px;border-radius:4px;color:var(--text-faint);transition:transform .18s,color .12s;}
.cat-caret svg{display:block;}
.cat-head:hover .cat-caret{color:var(--text);}
.cat-head.closed .cat-caret{transform:rotate(-90deg);}
.cat-n{display:none;}

/* ===== Gift dialog redesign ===== */
.gift-card{width:420px;padding:24px;border-radius:16px;}
.gift-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.gift-head h3{margin:0;font-size:18px;font-weight:700;}
.gift-sub{margin:3px 0 0;font-size:13px;color:var(--text-faint);}
.gift-badge{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:rgba(242,182,26,.14);color:#f2c94c;}
.gift-item{gap:12px;padding:12px 14px;border-radius:12px;background:var(--panel-2);margin-bottom:18px;}
.gift-item .gi-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--panel);color:var(--text-dim);flex:none;}
.gift-item .gi-t{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.gift-item .gi-t b{font-size:14px;font-weight:600;}
.gift-item .gi-t small{font-size:12px;color:var(--text-faint);}
.gift-item .gi-p{font-weight:700;color:var(--text);font-size:14px;}
.gift-label{font-size:13px;font-weight:600;color:var(--text-dim);margin:14px 0 6px;}
.gift-label small{font-weight:400;color:var(--text-faint);}
.gift-input{height:40px;border-radius:10px;background:var(--panel-2);font-size:14px;}
.gift-field{position:relative;}
.gift-at{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-faint);font-size:14px;pointer-events:none;}
.gift-input-at{padding-left:30px;}
.gift-input:focus{border-color:var(--cyan-dim);box-shadow:0 0 0 3px rgba(79,209,197,.12);}
.gift-err{min-height:20px;margin:10px 0 0;}
.gift-actions{align-items:center;justify-content:flex-end;gap:10px;margin-top:6px;}
.gift-actions .btn-secondary,.gift-actions .enter-btn{box-sizing:border-box;height:40px;margin:0;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;border-radius:10px;width:auto;}

/* ===== Profile ⋯ menu stays inside the card, profile opens with an animation ===== */
.upm-left .user-profile-actions{position:relative;}
.upm-left .upm-more-wrap{position:static;}
.upm-left .upm-more-menu{left:0;right:auto;top:44px;}
@keyframes upm-in{from{opacity:0;transform:translate(-50%,-47%) scale(.96);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
.user-profile-popover.active{animation:upm-in .2s cubic-bezier(.2,.8,.3,1);}
.context-menu{z-index:1300;}

/* ===== Voice channel members: bigger, no tag / (you) ===== */
.voice-members{padding-left:22px;}
.voice-member-row{gap:10px;padding:5px 8px;font-size:14px;font-weight:500;border-radius:8px;}
.voice-member-row img{width:28px;height:28px;flex:none;}
.voice-member-row .vm-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ===== Log out: opaque hover so nothing shows through ===== */
.settings-nav .sn-logout,#settingsModal .settings-nav .sn-logout{background:var(--panel-2);}
.settings-nav .sn-logout:hover,#settingsModal .settings-nav .sn-logout:hover{background:linear-gradient(rgba(229,96,90,.14),rgba(229,96,90,.14)),var(--panel-2);}

/* ===== Settings buttons: one consistent system ===== */
#settingsModal .settings-panels .btn-secondary,#settingsModal .settings-panels .copy-btn,#settingsModal .settings-panels .shop-btn{box-sizing:border-box;height:36px;min-height:36px;padding:0 16px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1;cursor:pointer;transition:background .12s,border-color .12s,color .12s;}
#settingsModal .settings-panels .btn-secondary:hover,#settingsModal .settings-panels .copy-btn:hover,#settingsModal .settings-panels .shop-btn:hover{background:var(--panel);border-color:var(--text-faint);color:var(--text);}
#settingsModal .settings-panels .btn-secondary:active{transform:translateY(1px);}
#settingsModal .settings-panels .btn-secondary:focus-visible,#settingsModal .settings-panels .copy-btn:focus-visible{outline:2px solid var(--cyan-dim);outline-offset:2px;}
#settingsModal .settings-panels .enter-btn{box-sizing:border-box;width:auto;min-width:140px;height:38px;padding:0 20px;margin-top:18px;border-radius:8px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
#settingsModal .settings-panels #secDeleteBtn{background:transparent;color:var(--red)!important;border-color:rgba(229,96,90,.55)!important;}
#settingsModal .settings-panels #secDeleteBtn:hover{background:rgba(229,96,90,.12);border-color:var(--red)!important;}
#settingsModal .settings-panels .dp-claim{background:var(--cyan);border-color:var(--cyan);color:#08201D;}
#settingsModal .settings-panels .dp-claim:hover{background:#63ddd2;border-color:#63ddd2;color:#08201D;}
#settingsModal .settings-panels .dp-claim:disabled{background:var(--panel-2);border-color:var(--line);color:var(--text-faint);}
#settingsModal .settings-panels .btn-secondary:disabled{opacity:.5;cursor:not-allowed;}
#settingsModal .settings-panels .segmented{padding:3px;border-radius:10px;}
#settingsModal .settings-panels .segmented button{height:32px;padding:0 12px;font-size:13px;border-radius:7px;}
#settingsModal .settings-panels .segmented button:not(.active):hover{background:var(--panel);color:var(--text);}
#settingsModal .shop-tabs button{height:34px;padding:0 16px;border-radius:8px;font-size:13.5px;font-weight:600;}
#settingsModal .shop-tabs button:not(.active):hover{background:var(--panel);}
#settingsModal .settings-panels .shop-btn{width:100%;font-size:13px;}
#settingsModal .settings-panels .shop-btn.buy{border-color:var(--cyan-dim);color:var(--cyan);background:transparent;}
#settingsModal .settings-panels .shop-btn.buy:hover{background:rgba(79,209,197,.1);border-color:var(--cyan);}
#settingsModal .settings-panels .shop-btn.on{background:var(--cyan);border-color:var(--cyan);color:var(--on-accent);}
#settingsModal .settings-panels .shop-btn.try{height:32px;min-height:32px;margin-top:0;color:var(--text-dim);font-weight:500;}
#settingsModal .settings-panels .shop-btn:disabled{opacity:.6;cursor:default;}
.gift-item .gi-t{text-align:left;align-items:flex-start;}

.member-row .mn .name-tag{flex:0 100 auto;min-width:0;overflow:hidden;white-space:nowrap;}
.member-row .mn-name{min-width:30px;}
.members{width:252px;}
.member-row .mn .name-tag{flex:none;min-width:max-content;}

/* ===== Server name dropdown ===== */
.current-server-bar{cursor:pointer;transition:background .12s;}
.current-server-bar:hover,.current-server-bar.menu-open{background:var(--panel-2);}
.current-server-bar #currentServerName{flex:0 1 auto;}
.current-server-bar .srv-caret{flex:none;display:inline-flex;margin-right:auto;margin-left:2px;color:var(--text-faint);overflow:visible;transform:rotate(90deg);transition:transform .18s,color .12s;}
.current-server-bar.menu-open .srv-caret{transform:rotate(-90deg);color:var(--text);}
.current-server-bar .srv-caret svg{display:block;}
#app.home-mode .srv-caret{display:none!important;}
#app.home-mode .current-server-bar{cursor:default;}
#app.home-mode .current-server-bar:hover{background:none;}
.srv-menu{position:fixed;z-index:1250;box-sizing:border-box;padding:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.55);animation:pop-in .14s ease;}
.srv-menu[hidden]{display:none;}
.srv-menu .sm-item{width:100%;display:flex;align-items:center;gap:12px;height:38px;padding:0 10px;border:none;border-radius:8px;background:none;color:var(--text);font:inherit;font-size:14px;font-weight:500;text-align:left;cursor:pointer;}
.srv-menu .sm-item:hover{background:rgba(255,255,255,.07);}
.srv-menu .sm-ic{display:inline-flex;color:var(--text-dim);flex:none;}
.srv-menu .sm-t{flex:1;min-width:0;}
.srv-menu .sm-caret{display:inline-flex;color:var(--text-faint);}
.srv-menu .sm-item.danger,.srv-menu .sm-item.danger .sm-ic{color:var(--red);}
.srv-menu .sm-item.danger:hover{background:rgba(229,96,90,.12);}
.srv-menu .sm-sep{height:1px;background:var(--line);margin:5px 4px;}
.srv-menu .sm-note{padding:2px 12px 6px 38px;font-size:12px;color:var(--text-faint);}
.srv-menu .sm-sub-wrap{position:relative;}
.srv-menu .sm-sub{display:none;position:absolute;left:calc(100% + 8px);top:-6px;width:210px;padding:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.55);}
.srv-menu .sm-sub-wrap:hover>.sm-sub,.srv-menu.sub-open .sm-sub{display:block;}
.srv-menu.flip-sub .sm-sub{left:auto;right:calc(100% + 8px);}
.server-rail-btn.srv-muted{opacity:.55;}
.server-rail-btn.srv-muted.active,.server-rail-btn.srv-muted:hover{opacity:.9;}
.nick-card{width:400px;max-width:calc(100vw - 32px);padding:24px;border-radius:16px;}
.nick-card h3{margin:0 0 4px;font-size:18px;}
.nick-sub{margin:0 0 14px;font-size:13px;color:var(--text-faint);}
.nick-card .gift-input{height:40px;border-radius:10px;background:var(--panel-2);}
.nick-card .gift-actions .btn-secondary,.nick-card .gift-actions .enter-btn{box-sizing:border-box;height:40px;margin:0;padding:0 18px;width:auto;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;border-radius:10px;}

/* ===== Invite people dialog ===== */
.inv-card{position:relative;width:440px;max-width:calc(100vw - 32px);padding:24px;border-radius:16px;}
.inv-card h3{margin:0 28px 14px 0;font-size:18px;font-weight:700;}
.inv-x{position:absolute;right:14px;top:14px;width:32px;height:32px;border:none;border-radius:8px;background:none;color:var(--text-dim);font-size:22px;line-height:1;cursor:pointer;}
.inv-x:hover{background:var(--panel-2);color:var(--text);}
.inv-card .gift-input{height:40px;border-radius:10px;background:var(--panel-2);}
.inv-list{margin:12px 0 4px;max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.inv-row{display:flex;align-items:center;gap:12px;padding:7px 8px;border-radius:10px;}
.inv-row:hover{background:var(--panel-2);}
.inv-row img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;}
.inv-name{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.inv-btn{box-sizing:border-box;height:32px;min-width:72px;padding:0 14px;border-radius:8px;border:1px solid var(--cyan-dim);background:transparent;color:var(--cyan);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s;}
.inv-btn:hover:not(:disabled){background:rgba(79,209,197,.12);}
.inv-btn:disabled{border-color:var(--line);color:var(--text-faint);cursor:default;}
.inv-btn.sent{color:var(--green);border-color:rgba(90,201,138,.4);}
.inv-empty{padding:18px 8px;text-align:center;font-size:13px;color:var(--text-faint);}
.inv-link-box{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.inv-link-label{font-size:12.5px;font-weight:600;color:var(--text-dim);margin-bottom:8px;}
.inv-link-row{display:flex;gap:8px;align-items:center;}
.inv-link-row .gift-input{flex:1;min-width:0;font-size:13.5px;}
.inv-link-row .enter-btn{box-sizing:border-box;flex:none;width:auto;min-width:84px;height:40px;margin:0;padding:0 18px;border-radius:10px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;}
.inv-link-row .enter-btn.copied{background:var(--green);}
.inv-expiry{margin-top:8px;font-size:12px;color:var(--text-faint);}
.inv-list{flex:none;min-height:56px;}
.inv-row,.inv-empty{flex:none;}

/* ===== Custom emoji / sticker sizes (message text only) ===== */
.msg-text .cemoji.ce-s{width:16px;height:16px;vertical-align:-3px;}
.msg-text .cemoji.ce-l{width:40px;height:40px;vertical-align:-12px;margin:0 2px;}
.msg-text .cemoji.ce-xl{width:72px;height:72px;vertical-align:-20px;margin:2px 3px;}
.emo-add{flex-wrap:wrap!important;}
.emo-add .emo-name{min-width:150px;}
.emo-size{box-sizing:border-box;height:40px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit;font-size:13px;cursor:pointer;}
.emo-item .emo-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.emo-item .emo-meta span{flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.emo-item .emo-meta small{font-size:11.5px;color:var(--text-faint);}
.emo-item .emo-size{height:26px;padding:0 6px;font-size:12px;border-radius:6px;width:100%;}
.emo-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}

/* ===== Audio files use the voice-message look ===== */
.vm-card{display:block;width:320px;max-width:100%;}
.vm-card-head{display:flex;align-items:center;gap:8px;margin:0 2px 6px;font-size:12.5px;color:var(--text-dim);}
.vm-card-ic{display:inline-flex;color:var(--cyan);flex:none;}
.vm-card-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--text);}
.vm-card-dl{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;color:var(--text-faint);flex:none;}
.vm-card-dl:hover{background:var(--panel-2);color:var(--text);}
.vm-card .vm{width:100%;box-sizing:border-box;}
/* video files: same card feel */
.msg-attach video{display:block;max-width:min(420px,100%);max-height:340px;border-radius:14px;border:1px solid var(--line);background:#000;}

/* ===== Explore category chips: slim dark scrollbar ===== */
.ex-cats{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.ex-cats::-webkit-scrollbar{height:6px;}
.ex-cats::-webkit-scrollbar-track{background:transparent;}
.ex-cats::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
.ex-cats::-webkit-scrollbar-thumb:hover{background:var(--text-faint);}
.ex-cats::-webkit-scrollbar-button{display:none;width:0;height:0;}

/* ===== Voice channel members: a bit smaller ===== */
.voice-members{padding-left:20px;}
.voice-member-row{gap:8px;padding:4px 8px;font-size:13px;}
.voice-member-row img{width:22px;height:22px;}
.vm-file .vm-wave{gap:1.5px;overflow:hidden;}
.vm-file .vm-wave i{min-width:1px;}
.vm-file .vm-time{flex:none;}
.emo-item .ss-delete{background:transparent;border:1px solid var(--line);color:var(--red);border-radius:7px;}
.emo-item .ss-delete:hover{background:rgba(229,96,90,.12);border-color:rgba(229,96,90,.5);}

/* ===== Soundboard ===== */
.sb-pop{position:absolute;left:8px;right:8px;bottom:calc(100% + 8px);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 12px 36px rgba(0,0,0,.5);z-index:41;max-height:min(420px,calc(100vh - 140px));display:flex;flex-direction:column;min-width:0;}
.sb-pop[hidden]{display:none;}
.sb-pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:14px;}
.sb-mute{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap;}
.sb-pop-body{overflow-y:auto;min-height:0;}
.sb-group{margin-bottom:10px;}
.sb-group-name{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 2px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;}
.sb-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;min-width:0;border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:10px;cursor:pointer;font:inherit;transition:background .12s,transform .08s;}
.sb-btn:hover:not(:disabled){background:var(--panel-3,var(--line));}
.sb-btn:active:not(:disabled){transform:scale(.96);}
.sb-btn:disabled{opacity:.45;cursor:not-allowed;}
.sb-btn-emoji{font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;height:22px;}
.sb-btn-name{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-empty{padding:14px 8px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5;}
.voice-member-row.sb-playing img{box-shadow:0 0 0 2px var(--accent,#7c8cff);}
#settingsModal .sb-meter{margin:10px 0 14px;max-width:560px;}
#settingsModal .sb-meter-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;margin-bottom:6px;}
#settingsModal .sb-plan{color:var(--muted);}
#settingsModal .sb-bar{height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden;}
#settingsModal .sb-bar i{display:block;height:100%;width:0;background:var(--accent,#7c8cff);border-radius:99px;transition:width .25s;}
#settingsModal .sb-form{max-width:560px;display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
#settingsModal .sb-file{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#settingsModal .sb-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
#settingsModal .sb-emoji{width:56px;flex:none;text-align:center;}
#settingsModal .sb-name{flex:1 1 140px;min-width:0;}
#settingsModal .sb-status{min-height:16px;font-size:12px;color:var(--muted);}
#settingsModal .sb-status.bad{color:var(--red);}
#settingsModal .sb-list{max-width:560px;display:flex;flex-direction:column;gap:6px;}
#settingsModal .sb-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);min-width:0;}
#settingsModal .sb-item-emoji{width:28px;flex:none;text-align:center;font-size:18px;display:flex;align-items:center;justify-content:center;}
#settingsModal .sb-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;}
#settingsModal .sb-item-dur{font-size:12px;color:var(--muted);flex:none;}
#settingsModal .sb-empty{border:1px dashed var(--line);border-radius:10px;}

/* ===== Soundboard redesign ===== */
.sb-pop{padding:0;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,var(--panel),var(--bg-2,var(--panel)));}
.sb-pop-head{margin:0;padding:12px 14px;border-bottom:1px solid var(--line);}
.sb-pop-title{display:flex;align-items:center;gap:8px;font-size:14px;min-width:0;}
.sb-pop-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:rgba(77,208,196,.14);color:var(--cyan,#4dd0c4);flex:none;}
.sb-mute{font-size:12px;gap:6px;padding:4px 8px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);}
.sb-mute input{margin:0;accent-color:var(--cyan,#4dd0c4);}
.sb-pop-body{padding:12px 14px 14px;}
.sb-group-name{font-size:11px;letter-spacing:.06em;margin:0 0 8px;}
.sb-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;}
.sb-btn{padding:10px 6px 8px;gap:6px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);}
.sb-btn:hover:not(:disabled){background:rgba(77,208,196,.12);border-color:var(--cyan-dim,#2f8f86);}
.sb-btn:focus-visible{outline:2px solid var(--cyan-dim,#2f8f86);outline-offset:2px;}
.sb-btn-emoji{font-size:24px;height:28px;}
.sb-btn-name{font-size:12px;font-weight:600;}
/* settings panel */
#settingsModal .sb-meter{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;max-width:560px;margin:12px 0;}
#settingsModal .sb-meter-top{font-size:13px;margin-bottom:8px;}
#settingsModal .sb-meter-top span:first-child{font-weight:700;}
#settingsModal .sb-bar{background:var(--bg,#0d1117);}
#settingsModal .sb-bar i{background:var(--cyan,#4dd0c4);}
#settingsModal .sb-form{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px;max-width:560px;gap:12px;box-sizing:border-box;}
#settingsModal .sb-pick{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:12px 14px;border:1.5px dashed var(--text-faint,#5a6577);border-radius:10px;background:transparent;color:var(--text);cursor:pointer;text-align:left;font:inherit;transition:border-color .12s,background .12s;}
#settingsModal .sb-pick:hover{border-color:var(--cyan,#4dd0c4);background:rgba(77,208,196,.06);}
#settingsModal .sb-pick-ic{width:36px;height:36px;border-radius:10px;background:rgba(77,208,196,.14);color:var(--cyan,#4dd0c4);display:flex;align-items:center;justify-content:center;flex:none;}
#settingsModal .sb-pick-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
#settingsModal .sb-pick-txt b{font-size:14px;}
#settingsModal .sb-pick-txt small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#settingsModal .sb-row .settings-input{height:38px;box-sizing:border-box;}
#settingsModal .sb-add{height:38px;padding:0 18px;border:0;border-radius:8px;background:var(--cyan,#4dd0c4);color:#06201d;font-size:13.5px;font-weight:700;cursor:pointer;flex:none;transition:filter .12s,transform .08s;}
#settingsModal .sb-add:hover:not(:disabled){filter:brightness(1.08);}
#settingsModal .sb-add:active:not(:disabled){transform:translateY(1px);}
#settingsModal .sb-add:disabled{opacity:.45;cursor:not-allowed;}
#settingsModal .sb-item{padding:8px 10px;border-radius:12px;}
#settingsModal .sb-item-emoji{width:34px;height:34px;border-radius:10px;background:var(--bg,#0d1117);}
.sb-pop-title{flex:1;min-width:0;white-space:nowrap;}
.sb-pop-title b{overflow:hidden;text-overflow:ellipsis;}
.sb-mute{flex:none;}
/* compact soundboard tiles */
.sb-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;}
.sb-btn{padding:6px 4px 5px;gap:3px;border-radius:10px;}
.sb-btn-emoji{font-size:18px;height:20px;}
.sb-btn-name{font-size:11px;font-weight:600;}
.sb-pop-body{padding:10px 12px 12px;}

/* ===== connection banner (soft red, slides in from the top) ===== */
#connBanner{position:fixed;top:0;left:50%;transform:translate(-50%,-120%);z-index:9000;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:8px 16px;border-radius:0 0 12px 12px;background:rgba(229,96,90,.16);border:1px solid rgba(229,96,90,.32);border-top:0;color:#f3c3c0;font-size:13px;font-weight:600;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.28);pointer-events:none;opacity:0;transition:transform .28s ease,opacity .28s ease,background .2s,border-color .2s,color .2s;}
#connBanner.show{transform:translate(-50%,0);opacity:1;}
#connBanner .cb-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#connBanner .cb-dot{width:8px;height:8px;border-radius:50%;background:#e5605a;flex:none;animation:cbPulse 1.2s ease-in-out infinite;}
#connBanner.ok{background:rgba(63,185,120,.16);border-color:rgba(63,185,120,.34);color:#bfe9d1;}
#connBanner.ok .cb-dot{background:#3fb978;animation:none;}
@keyframes cbPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){#connBanner,#connBanner .cb-dot{transition:none;animation:none;}}

/* ===== bottom dock: voice strip + profile bar run the full width of the left side (rail + channels) ===== */
.me-dock{display:block;}
@media (min-width:901px){
  .me-dock{position:fixed;left:0;bottom:0;width:316px;z-index:30;background:var(--panel);border-top:1px solid var(--line);border-right:1px solid var(--line);box-shadow:0 -10px 24px rgba(0,0,0,.28);}
  .me-dock .voice-status-bar{border-top:0;}
  .me-dock .user-bar{border-top:1px solid var(--line);}
  .sidebar .channel-scroll{padding-bottom:calc(var(--dock-h,64px) + 8px);}
  .server-rail{padding-bottom:calc(var(--dock-h,64px) + 12px);}
}
@media (min-width:901px){.me-dock .status-picker{left:8px;right:36px;}}

/* ===== image cropper (matches the site's modal cards) ===== */
.crp-overlay{z-index:1400;}
.crp-card{width:min(420px,92vw);padding:22px 24px;box-sizing:border-box;box-shadow:0 18px 50px rgba(0,0,0,.55);}
.crp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.crp-head h3{margin:0;font-size:17px;font-weight:700;}
.crp-x{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.crp-x:hover{background:var(--panel-2);color:var(--text);}
.crp-hint{margin:6px 0 16px;font-size:13px;color:var(--text-dim);}
.crp-stage-wrap{display:flex;justify-content:center;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--ink,#0b0d12);}
.crp-stage{position:relative;overflow:hidden;border-radius:10px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;background:#000;max-width:100%;}
.crp-stage.drag{cursor:grabbing;}
.crp-img{position:absolute;left:0;top:0;max-width:none;pointer-events:none;will-change:transform;}
.crp-guide{position:absolute;inset:0;pointer-events:none;border-radius:10px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);}
.crp-guide.round{inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(6,7,10,.58),inset 0 0 0 2px rgba(255,255,255,.55);}
.crp-zoom{display:flex;align-items:center;gap:12px;margin:16px 4px 4px;color:var(--text-dim);}
.crp-zi{display:flex;flex:none;}
.crp-range{flex:1;min-width:0;height:4px;accent-color:var(--cyan,#4dd0c4);cursor:pointer;}
.crp-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.crp-cancel,.crp-apply{height:36px;padding:0 18px;border-radius:8px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid var(--line);}
.crp-cancel{background:var(--panel-2);color:var(--text);}
.crp-cancel:hover{border-color:var(--text-faint);}
.crp-apply{background:var(--cyan,#4dd0c4);border-color:transparent;color:#06201d;font-weight:700;}
.crp-apply:hover{filter:brightness(1.08);}
.crp-apply:focus-visible,.crp-cancel:focus-visible{outline:2px solid var(--cyan-dim);outline-offset:2px;}
/* zoom slider: custom track + thumb so the circle sits exactly on the line */
.crp-range{-webkit-appearance:none;appearance:none;height:16px;background:transparent;padding:0;margin:0;outline:none;--p:0%;}
.crp-range::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(to right,var(--cyan,#4dd0c4) var(--p),var(--line,#2a3140) var(--p));}
.crp-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--cyan,#4dd0c4);border:0;margin-top:-11px;box-shadow:0 0 0 3px rgba(77,208,196,.18);}
.crp-range::-moz-range-track{height:4px;border-radius:99px;background:var(--line,#2a3140);}
.crp-range::-moz-range-progress{height:4px;border-radius:99px;background:var(--cyan,#4dd0c4);}
.crp-range::-moz-range-thumb{transform:translateY(-5px);width:16px;height:16px;border-radius:50%;background:var(--cyan,#4dd0c4);border:0;box-shadow:0 0 0 3px rgba(77,208,196,.18);}
.crp-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(77,208,196,.4);}

/* ===== server bar: name on the left, the menu arrow on the far right (settings, reports, rules live in the menu) ===== */
#app:not(.home-mode) .current-server-bar .ub-icon-btn{display:none!important;}
.current-server-bar #currentServerName{flex:0 1 auto;min-width:0;}
.current-server-bar .srv-caret{margin-left:auto;margin-right:0;position:relative;}
.current-server-bar.has-alert .srv-caret::after{content:"";position:absolute;top:-3px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--red,#e5605a);border:2px solid var(--panel);box-sizing:content-box;}
.srv-menu .sm-badge{margin-left:auto;min-width:18px;height:18px;padding:0 6px;border-radius:99px;background:var(--red,#e5605a);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}

/* ===== Create your server ===== */
.cs-card{position:relative;width:min(540px,94vw);max-height:94vh;padding:0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55);border-radius:16px;}
.cs-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;}
.cs-x:hover{background:var(--panel-2);color:var(--text);}
.cs-panel{display:none;flex-direction:column;min-height:0;}
.cs-panel.active{display:flex;}
.cs-body{padding:24px 26px 8px;overflow-y:auto;min-height:0;}
.cs-body h2{margin:0;font-size:20px;font-weight:700;padding-right:36px;}
.cs-sub{margin:6px 0 18px;font-size:13.5px;color:var(--text-dim);}
.cs-top{display:flex;gap:14px;align-items:flex-end;margin:20px 0 18px;}
.cs-pic-wrap{position:relative;flex:none;}
.cs-pic{width:80px;height:80px;border-radius:18px;border:1.5px dashed var(--text-faint,#5a6577);background:var(--panel-2);color:var(--text-dim);cursor:pointer;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:border-color .12s,background .12s;}
.cs-pic:hover{border-color:var(--cyan);background:rgba(77,208,196,.06);}
.cs-pic.has{border-style:solid;border-color:var(--line);}
.cs-pic-ph{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;}
.cs-pic-ph small{font-size:12px;}
.cs-pic.has .cs-pic-ph{display:none;}
.cs-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-pic img[hidden]{display:none;}
.cs-pic-rm{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:2px solid var(--panel);background:var(--panel-2);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.cs-pic-rm[hidden]{display:none;}
.cs-pic-rm:hover{background:var(--red,#e5605a);color:#fff;}
.cs-name{flex:1;min-width:0;}
.cs-name label,.cs-limit label{display:block;font-size:12.5px;font-weight:600;color:var(--text-dim);margin-bottom:6px;}
.cs-name input,.cs-limit input{width:100%;box-sizing:border-box;height:42px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--ink,#0b0d12);color:var(--text);font:inherit;font-size:15px;outline:none;transition:border-color .12s,box-shadow .12s;}
.cs-name input:focus,.cs-limit input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(77,208,196,.15);}
.cs-label{font-size:12.5px;font-weight:600;color:var(--text-dim);margin:2px 0 8px;}
.cs-tpls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.cs-tpl{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);color:var(--text);cursor:pointer;text-align:left;font:inherit;min-width:0;transition:border-color .12s,background .12s;}
.cs-tpl:hover{border-color:var(--text-faint,#5a6577);}
.cs-tpl.sel{border-color:var(--cyan);background:rgba(77,208,196,.08);}
.cs-tpl:focus-visible{outline:2px solid var(--cyan-dim);outline-offset:2px;}
.cs-tpl-ic{width:38px;height:38px;border-radius:10px;background:var(--ink,#0b0d12);display:flex;align-items:center;justify-content:center;flex:none;color:var(--text-dim);}
.cs-tpl.sel .cs-tpl-ic{color:var(--cyan);}
.cs-tpl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.cs-tpl-t b{font-size:14px;font-weight:600;}
.cs-tpl-t small{font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cs-tpl-ck{flex:none;width:16px;color:var(--cyan);display:flex;}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;min-height:30px;}
.cs-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);font-size:13px;color:var(--text);}
.cs-chip svg{color:var(--text-dim);}
.cs-limit{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);}
.cs-limit label{margin:0;}
.cs-limit label small{font-weight:400;color:var(--text-faint,#8a97a3);}
.cs-limit input{width:84px;height:36px;text-align:center;font-size:14px;}
.cs-join-field{margin-top:6px;}
.cs-body .auth-error{min-height:18px;margin:10px 0 0;}
.cs-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 26px;border-top:1px solid var(--line);background:var(--panel);}
.cs-link{border:0;background:transparent;color:var(--text-dim);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:8px 4px;border-radius:6px;}
.cs-link:hover{color:var(--text);text-decoration:underline;}
.cs-create{height:40px;padding:0 22px;border:0;border-radius:10px;background:var(--cyan,#4dd0c4);color:#06201d;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:filter .12s,transform .08s;}
.cs-create:hover:not(:disabled){filter:brightness(1.08);}
.cs-create:active:not(:disabled){transform:translateY(1px);}
.cs-create:disabled{opacity:.6;cursor:wait;}
@media (max-width:520px){.cs-tpls{grid-template-columns:1fr;}.cs-top{align-items:flex-start;}.cs-body{padding:20px 18px 8px;}.cs-foot{padding:14px 18px;}.cs-limit{flex-wrap:wrap;}}

/* ===== Create your server — refined look ===== */
.cs-card{background:linear-gradient(180deg,var(--panel) 0%,var(--panel) 100%);border-radius:18px;}
.cs-card::before{content:"";position:absolute;inset:0 0 auto 0;height:110px;background:radial-gradient(120% 100% at 0% 0%,rgba(77,208,196,.13),transparent 70%);pointer-events:none;}
.cs-body{position:relative;padding:26px 28px 10px;}
.cs-body h2{font-size:21px;letter-spacing:-.01em;}
.cs-sub{margin:6px 0 4px;}
.cs-top{margin:20px 0 22px;}
.cs-pic{width:84px;height:84px;border-radius:22px;background:var(--panel-2);}
.cs-pic-ph{gap:6px;color:var(--text-dim);}
.cs-pic-ph small{font-size:11.5px;font-weight:600;letter-spacing:.02em;}
.cs-pic:hover .cs-pic-ph{color:var(--cyan);}
.cs-label{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint,#8a97a3);margin:0 0 10px;}
.cs-tpls{gap:10px;margin-bottom:20px;}
.cs-tpl{--ac:77,208,196;position:relative;padding:14px;gap:12px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);transition:border-color .14s,background .14s,transform .1s,box-shadow .14s;}
.cs-tpl[data-tpl="friends"]{--ac:140,124,240;}
.cs-tpl[data-tpl="study"]{--ac:242,166,90;}
.cs-tpl[data-tpl="community"]{--ac:229,96,90;}
.cs-tpl:hover{border-color:rgba(var(--ac),.55);background:rgba(var(--ac),.05);}
.cs-tpl:active{transform:scale(.99);}
.cs-tpl.sel{border-color:rgb(var(--ac));background:rgba(var(--ac),.09);box-shadow:0 0 0 3px rgba(var(--ac),.14);}
.cs-tpl-ic{width:42px;height:42px;border-radius:12px;background:rgba(var(--ac),.14);color:rgb(var(--ac));}
.cs-tpl.sel .cs-tpl-ic{background:rgb(var(--ac));color:#0b0d12;}
.cs-tpl-t b{font-size:14.5px;}
.cs-tpl-t small{font-size:12px;}
.cs-tpl-ck{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;color:#0b0d12;}
.cs-tpl.sel .cs-tpl-ck{background:rgb(var(--ac));}
.cs-tpl-t{padding-right:14px;}
.cs-chips{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--ink,#0b0d12);margin-bottom:14px;min-height:0;gap:8px;}
.cs-chip{height:28px;padding:0 11px;border-radius:99px;background:var(--panel-2);font-size:12.5px;gap:6px;}
.cs-chip svg{color:var(--cyan);opacity:.9;}
.cs-limit{border-radius:14px;}
.cs-foot{padding:16px 28px;background:rgba(0,0,0,.12);}
.cs-link{color:var(--text-dim);}
.cs-create{height:42px;padding:0 24px;border-radius:12px;box-shadow:0 6px 18px rgba(77,208,196,.22);}
.cs-x{top:18px;right:18px;border-radius:10px;}
@media (max-width:520px){.cs-body{padding:22px 18px 8px;}.cs-foot{padding:14px 18px;}}

/* fixed-size create-server card: the box never grows or shrinks when you change template or switch to "Join" */
.cs-card{height:min(640px,94vh);}
.cs-panel.active{flex:1;min-height:0;}
.cs-body{flex:1;}
.cs-chips{min-height:100px;align-content:flex-start;}
@media (max-width:520px){.cs-card{height:min(720px,96vh);}.cs-chips{min-height:100px;}}

/* ===== friend-request cards (bottom-right) — same look as the site's cards ===== */
.friend-requests-panel{right:18px;bottom:18px;width:318px;padding:0;gap:10px;}
.frp-card{gap:12px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.45);}
.frp-card img{width:40px;height:40px;}
.frp-card .av-deco{display:inline-block;flex:none;}
.frp-info{display:flex;flex-direction:column;gap:2px;}
.frp-name{font-size:14px;font-weight:700;display:flex;align-items:baseline;gap:5px;}
.frp-name .tag,.frp-name .user-tag,.frp-name small{font-size:12px;font-weight:500;color:var(--text-faint);}
.frp-sub{font-size:12.5px;color:var(--text-dim);}
.frp-actions{gap:8px;}
.frp-btn{width:32px;height:32px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);cursor:pointer;transition:background .12s,border-color .12s,color .12s;}
.frp-btn:hover{color:var(--text);border-color:var(--text-faint);}
.frp-btn.accept{background:var(--cyan);border-color:transparent;color:#06201d;}
.frp-btn.accept:hover{filter:brightness(1.08);background:var(--cyan);color:#06201d;border-color:transparent;}
@media (max-width:900px){.friend-requests-panel{width:min(318px,calc(100vw - 24px));right:12px;bottom:12px;}}

/* desktop: the cards sit inside the online-people column and stop at its divider line */
@media (min-width:901px){
  .friend-requests-panel{right:0;bottom:14px;width:252px;padding:0 10px 0 11px;box-sizing:border-box;}
  .frp-card{gap:10px;padding:10px 12px;}
  .frp-card img{width:36px;height:36px;}
  .frp-name{font-size:13px;}
  .frp-sub{font-size:12px;}
  .frp-actions{gap:6px;}
  .frp-btn{width:28px;height:28px;border-radius:8px;}
}
/* server-icon crop: the frame has the same rounded-square shape as the server icons in the rail */
.crp-guide.srv{border-radius:35%;box-shadow:0 0 0 999px rgba(6,7,10,.58),inset 0 0 0 2px rgba(255,255,255,.55);}
.cs-pic{border-radius:35%;}

/* Global's settings: only the picture is editable */
#serverSettingsModal.ss-global .ss-hide-g{display:none !important;}
#serverSettingsModal .ss-ov-sub-g{display:none;}
#serverSettingsModal.ss-global .ss-ov-sub{display:none;}
#serverSettingsModal.ss-global .ss-ov-sub-g{display:block;}

/* ===== bottom-left profile card (floating) + notification bell ===== */
.me-dock{padding:0;}
.user-bar{margin:8px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);gap:10px;}
.me-dock .user-bar{border-top:1px solid var(--line);}
.user-bar .un{font-size:14px;font-weight:700;}
.user-bar .ustat{font-size:12px;}
.user-bar-controls{gap:2px;align-items:center;}
.user-bar-controls .ub-icon-btn{width:32px;height:32px;border-radius:8px;}
.ub-sep{width:1px;height:20px;background:var(--line);margin:0 4px;flex:none;}
.ub-bell{position:relative;}
.ub-bell.has{color:var(--text);}
.ub-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--red,#e5605a);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-sizing:border-box;border:2px solid var(--panel-2);box-sizing:content-box;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.ub-badge[hidden]{display:none;}
.user-bar-avatar-wrap .status-dot-badge{width:13px;height:13px;border:3px solid var(--panel-2);right:-3px;bottom:-3px;box-sizing:content-box;}
.nc-pop{position:absolute;left:8px;right:8px;bottom:calc(100% + 8px);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.55);z-index:42;max-height:min(460px,calc(100vh - 140px));display:flex;flex-direction:column;overflow:hidden;}
.nc-pop[hidden]{display:none;}
.nc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px;}
.nc-clear{border:0;background:transparent;color:var(--cyan);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:6px;}
.nc-clear:hover{background:rgba(77,208,196,.1);}
.nc-body{overflow-y:auto;min-height:0;padding:6px;}
.nc-item{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer;min-width:0;}
.nc-item:hover,.nc-item:focus-visible{background:var(--panel-2);outline:none;}
.nc-av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;}
.nc-ic{width:34px;height:34px;border-radius:10px;background:rgba(77,208,196,.14);color:var(--cyan);display:flex;align-items:center;justify-content:center;flex:none;}
.nc-daily .nc-ic{background:rgba(242,166,90,.16);color:var(--amber,#f2a65a);}
.nc-ann .nc-ic{background:rgba(140,124,240,.16);color:#a99cff;}
.nc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.nc-t b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nc-t small{font-size:11px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nc-t span{font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nc-act{display:flex;gap:6px;flex:none;}
.nc-btn{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font:inherit;}
.nc-btn:hover{color:var(--text);border-color:var(--text-faint);}
.nc-btn.ok{background:var(--cyan);border-color:transparent;color:#06201d;}
.nc-btn.wide{width:auto;padding:0 12px;font-size:12px;font-weight:700;}
.nc-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:26px 18px;color:var(--text-dim);font-size:12.5px;}
.nc-empty svg{color:var(--cyan);}
.nc-empty b{color:var(--text);font-size:14px;}
@media (max-width:900px){.nc-pop{left:6px;right:6px;}}
/* the card is compact like the reference: the #tag stays in the profile, not here */
@media (min-width:901px){.user-bar .un .utag,.user-bar .un .tag,.user-bar .un small{display:none;}}
.user-bar-info{flex:1;min-width:0;}
@media (min-width:901px){.user-bar .un .name-tag{display:none;}}

/* alert dot lives on the bar (not on the arrow) so it does not rotate with the arrow */
.current-server-bar{position:relative;}
.current-server-bar.has-alert .srv-caret::after{display:none;}
.current-server-bar.has-alert::after{content:"";position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--red,#e5605a);border:2px solid var(--panel);box-sizing:content-box;pointer-events:none;}
#app.home-mode .current-server-bar.has-alert::after{display:none;}
/* count badge in the menu: small circle, number exactly centred */
.srv-menu .sm-badge{margin-left:auto;min-width:18px;width:auto;height:18px;padding:0 5px;border-radius:99px;font-size:10.5px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-variant-numeric:tabular-nums;}
.srv-menu .sm-badge:not(:empty){padding-top:0;padding-bottom:0;}
.srv-menu .sm-badge:not(:empty){padding-top:1.5px;padding-bottom:0;}

/* theme cards: name wraps inside its own space, the lock / check is a fixed round chip that never shrinks or clips */
.theme-card .theme-name{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;padding:0 2px;}
.theme-card .theme-name .tn-t{flex:1;min-width:0;line-height:1.2;overflow-wrap:anywhere;}
.theme-card .theme-name svg{margin:0;vertical-align:baseline;opacity:1;}
.tn-ic{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}
.tn-ic svg{width:12px;height:12px;display:block;}
.tn-ic.lock{background:rgba(77,208,196,.12);color:var(--cyan);border:1px solid rgba(77,208,196,.28);}
.tn-ic.on{background:var(--cyan);color:var(--on-accent,#06201d);}
.theme-card.locked:hover .tn-ic.lock{background:rgba(77,208,196,.22);}
.theme-card .theme-name{gap:6px;font-size:12.5px;}
.tn-ic{width:20px;height:20px;}
.tn-ic svg{width:11px;height:11px;}
.tn-ic.on{background:var(--cyan);color:#06201d;}
.tn-ic.on svg{stroke:#06201d;stroke-width:2.6;}
.theme-card .theme-name .tn-t{overflow-wrap:break-word;letter-spacing:-.005em;}
.theme-grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));}

/* status dots: a little smaller, in proportion to the names */
.member-row .status-dot{width:9px;height:9px;--ring:1.6px;}
.dm-online-dot{width:8px;height:8px;--ring:1.4px;}
.status-dot-badge{width:10px;height:10px;--ring:1.6px;}
.user-bar-avatar-wrap .status-dot-badge{width:10px;height:10px;border:3px solid var(--panel-2);right:-3px;bottom:-3px;box-sizing:content-box;}
.fr-avatar-wrap .status-dot-badge{right:-2px;bottom:-2px;}
.friends-page .fr-avatar-wrap .status-dot-badge{width:12px;height:12px;}

/* DND: the minus bar is a fixed pixel size on an even-sized dot, so it sits exactly in the centre both ways */
.status-dot-badge.dnd,.user-profile-online-dot.dnd,.member-row .status-dot.dnd,.dm-online-dot.dnd{background:linear-gradient(var(--dc),var(--dc)) 50% 50%/var(--bw,6px) var(--bh,2px) no-repeat,var(--red);background-origin:padding-box;}
.member-row .status-dot{width:10px;height:10px;--bw:6px;--bh:2px;}
.dm-online-dot{width:8px;height:8px;--bw:4px;--bh:2px;}
.status-dot-badge{width:10px;height:10px;--bw:6px;--bh:2px;}
.user-bar-avatar-wrap .status-dot-badge{width:10px;height:10px;--bw:6px;--bh:2px;}
.friends-page .fr-avatar-wrap .status-dot-badge{width:12px;height:12px;--bw:8px;--bh:2px;}
.user-profile-online-dot{width:14px;height:14px;--bw:4px;--bh:2px;}
.upm-left .user-profile-online-dot{width:28px;height:28px;--bw:10px;--bh:4px;}
.upm-left .user-profile-online-dot.dnd{background:linear-gradient(var(--dc),var(--dc)) 50% 50%/10px 4px no-repeat,var(--red);background-origin:padding-box;}

/* drag & drop of channels / categories (admins) */
.chan-row[draggable="true"],.cat-head[draggable="true"]{cursor:grab;}
.dnd-src{opacity:.45;}
.dnd-before,.dnd-after{position:relative;}
.dnd-before::before,.dnd-after::after{content:"";position:absolute;left:6px;right:6px;height:2px;border-radius:2px;background:var(--cyan);pointer-events:none;z-index:2;}
.dnd-before::before{top:-1px;}
.dnd-after::after{bottom:-1px;}
.cat-head.dnd-into,.chan-list.dnd-into,.dnd-into{background:rgba(88,200,220,.14);border-radius:8px;box-shadow:inset 0 0 0 1px var(--cyan);}

/* composer: GIF / sticker buttons, send button only when there is something to send */
.composer:not(.can-send) #sendBtn{display:none;}
.composer.can-send #voiceBtn{display:none;}
.msg-text .cemoji[alt^=":st_"]{width:112px;height:112px;vertical-align:middle;margin:2px 4px;}

.mp-pop{position:fixed;z-index:1062;width:min(400px,calc(100vw - 16px));height:min(430px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.55);overflow:hidden;}
.mp-head{display:flex;gap:8px;padding:10px;align-items:center;}
.mp-search{flex:1;min-width:0;height:36px;border-radius:9px;border:1.5px solid var(--line);background:var(--bg,#0b1016);color:var(--text);padding:0 12px;font:inherit;font-size:14px;outline:none;}
.mp-search:focus,.mp-body{flex:1;min-height:0;overflow-y:auto;padding:0 10px 10px;}
.mp-title{font-size:12px;font-weight:700;color:var(--text-faint);margin:6px 2px 8px;}
.mp-grid-st{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px;}
.mp-st{aspect-ratio:1;border:0;border-radius:10px;background:transparent;cursor:pointer;padding:4px;}
.mp-st:hover{background:rgba(255,255,255,.07);}
.mp-st img{width:100%;height:100%;object-fit:contain;display:block;}
.mp-foot{padding:10px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--text-faint);}

/* sticker picker: server rail on the left like the emoji picker, sticker grid on the right */
.mp-pop.mp-sticker,.mp-pop.mp-emoji{flex-direction:row;width:min(440px,calc(100vw - 16px));} /* the sticker and emoji boxes are always exactly the same size */
.mp-search:focus{border-color:var(--cyan);}
.mp-rail{width:48px;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;border-right:1px solid var(--line);overflow-y:auto;}
.mp-rail-btn{width:34px;height:34px;border-radius:10px;border:0;background:rgba(255,255,255,.05);color:var(--text-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:0;flex:none;font-size:14px;}
.mp-rail-btn:hover{background:rgba(255,255,255,.1);color:var(--text);}
.mp-rail-btn.active{box-shadow:0 0 0 2px var(--cyan);color:var(--text);}
.mp-rail-btn img{width:100%;height:100%;object-fit:cover;display:block;}
.mp-rail-sep{width:22px;height:1px;background:var(--line);flex:none;}
.mp-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.msg-sticker{display:block;width:120px;height:120px;object-fit:contain;margin:4px 0;}

.nova-nav-btn[hidden]{display:none;}
.nova-nav-btn .friends-nav-icon{color:#f5b73b;}
.nova-nav-btn:hover span:last-child{color:var(--text);}

/* ===== Framed layout (desktop): the site sits inside a border; chat and members are rounded cards ===== */
@media (min-width:901px){
  #app{padding:8px;gap:8px;background:var(--ink);}
  .server-rail{background:transparent;border-right:0;padding-top:4px;gap:10px;}
  .sidebar{background:transparent;border-right:0;}
  .current-server-bar{border-bottom:0;padding:14px 12px 10px;}
  .channel-scroll{padding:6px 6px;}
  .main{background:color-mix(in srgb,var(--panel) 45%,var(--ink));border:1px solid var(--line);border-radius:16px;overflow:hidden;}
  .members{background:color-mix(in srgb,var(--panel) 45%,var(--ink));border:1px solid var(--line);border-radius:16px;}
  .composer{border-radius:14px;}
  .chan-row{border-radius:10px;}
  .group-label{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--text-dim);}
  .me-dock{left:8px;bottom:8px;width:316px;background:transparent;border:0;box-shadow:none;}
  .me-dock .user-bar{margin:0;border-top:1px solid var(--line);border-radius:14px;background:var(--panel-2);}
  .me-dock .voice-status-bar,.me-dock .music-bar{border-radius:14px 14px 0 0;}
  .me-dock:has(.voice-status-bar.active) .user-bar{border-radius:0 0 14px 14px;}
  .me-dock .status-picker{left:0;right:30px;}
}
/* round server tiles; the open one is a rounded square with a white marker on the left edge */
.server-rail-btn{border-radius:50%;overflow:visible;}
.server-rail-btn:hover{border-radius:16px;}
.server-rail-btn.active{border-radius:16px;}
.server-rail-btn img{border-radius:inherit;}
.server-rail-btn.active::before{content:"";position:absolute;left:-10px;top:50%;width:4px;height:22px;margin-top:-11px;border-radius:0 4px 4px 0;background:var(--text);}
@media (min-width:901px){ .cat-head{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--text-dim);} }

/* profile card: same contents, a taller and wider box that sits closer to the chat card */
@media (min-width:901px){
  .me-dock{width:322px;}
  .me-dock .user-bar{padding-top:15px;padding-bottom:15px;}
}

/* notification bell: a plain red dot, no number */
.ub-badge{top:6px;right:7px;min-width:0;width:9px;height:9px;padding:0;border-width:2px;box-sizing:content-box;line-height:0;font-size:0;}

/* bell dot = same look as the reports dot; dock reaches closer to the chat card */
.ub-badge{top:3px;right:3px;width:8px;height:8px;border:2px solid var(--panel-2);background:var(--red);}
@media (min-width:901px){ .me-dock{width:330px;} }

/* profile card: a little more air next to the chat, slightly shorter, same colour as the chat card */
@media (min-width:901px){
  .me-dock{width:326px;}
  .me-dock .user-bar{padding-top:11px;background:color-mix(in srgb,var(--panel) 45%,var(--ink));}
}

/* server rail: hover keeps the normal tile colour; smoother shape + marker animation */
.server-rail-btn{transition:border-radius .32s cubic-bezier(.4,0,.2,1),background-color .25s ease,color .25s ease,opacity .25s ease;}
.server-rail-btn:not(.active):hover{background:var(--panel-2);color:var(--text);}
.server-rail-btn.server-rail-add:not(.active):hover{background:var(--panel-2);color:var(--cyan);}
.server-rail-btn.active:hover{background:var(--cyan);color:#08201D;}
.server-rail-btn::before{content:"";position:absolute;left:-10px;top:50%;width:4px;height:22px;margin-top:-11px;border-radius:0 4px 4px 0;background:var(--text);transform:scaleY(0);opacity:0;transform-origin:center;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .25s ease;pointer-events:none;}
.server-rail-btn:hover::before{transform:scaleY(.4);opacity:1;}
.server-rail-btn.active::before,.server-rail-btn.active:hover::before{transform:scaleY(1);opacity:1;}

/* Friends header: All / Requests / New group / Blocked + a tinted "Add friend" button */
.fp-tabs button.fp-addtab{background:color-mix(in srgb,var(--cyan) 16%,var(--panel));color:var(--cyan);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyan) 28%,transparent);margin-inline-start:8px;padding:0 14px;gap:8px;}
.fp-tabs button.fp-addtab:hover{background:color-mix(in srgb,var(--cyan) 24%,var(--panel));opacity:1;}
.fp-tabs button.fp-addtab.on{background:color-mix(in srgb,var(--cyan) 26%,var(--panel));color:var(--cyan);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyan) 45%,transparent);}
.fp-add-ic{display:flex;}
#friendsBlockedList .blk-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);margin-bottom:8px;}
#friendsBlockedList .blk-row img{width:38px;height:38px;border-radius:50%;object-fit:cover;}
#friendsBlockedList .blk-row span{flex:1;min-width:0;font-weight:600;}
.cat-head.cat-hidden,.cat-body.cat-hidden{display:none;}
body.chan-dragging .cat-head.cat-hidden{display:flex;}
body.chan-dragging .cat-body.cat-hidden{display:block;min-height:4px;}

/* ===== styled tooltips (replace the browser's title bubbles) ===== */
.dz-tip{position:fixed;left:0;top:0;z-index:5000;pointer-events:none;max-width:300px;padding:9px 14px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);box-shadow:0 10px 28px rgba(0,0,0,.5);opacity:0;transform:translateX(-4px);transition:opacity .14s ease,transform .14s ease;}
.dz-tip[data-dir="t"]{transform:translateY(4px);}
.dz-tip[data-dir="b"]{transform:translateY(-4px);}
.dz-tip.show{opacity:1;transform:none;}
.dz-tip-t{display:block;font-size:14px;font-weight:700;line-height:1.35;overflow-wrap:anywhere;}
.dz-tip-meta{display:flex;gap:14px;margin-top:5px;font-size:13px;font-weight:500;color:var(--text-dim);white-space:nowrap;}
.dz-tip-meta span{display:inline-flex;align-items:center;gap:6px;}
.dz-tip-meta i{width:9px;height:9px;border-radius:50%;background:var(--text-faint);flex:none;}
.dz-tip-meta i.on{background:#3ba55d;}

/* server strip: hover/active both use the site's normal blue (full strength); the shape morphs smoothly in pixels */
.server-rail-btn{border-radius:23px;transition:border-radius .42s cubic-bezier(.22,.9,.28,1),background-color .3s ease,color .3s ease,opacity .25s ease;}
.server-rail-btn:hover,.server-rail-btn.active{border-radius:15px;}
.server-rail-btn:not(.active):hover,.server-rail-btn.server-rail-add:not(.active):hover{background:var(--cyan);color:#08201D;}
.server-rail-btn::before{transition:transform .42s cubic-bezier(.22,.9,.28,1),opacity .3s ease;}

/* tiles with a picture: no blue behind/around the image on hover or when open */
.server-rail-btn.has-icon,.server-rail-btn.has-icon:hover,.server-rail-btn.has-icon.active,.server-rail-btn.has-icon.active:hover,.server-rail-btn.has-icon:not(.active):hover{background:var(--panel-2);}
.server-rail-btn.has-icon img{border-radius:inherit;}

/* slower, gentler hover: colour fades and the shape eases from circle to rounded square */
.server-rail-btn{transition:border-radius .6s cubic-bezier(.25,.8,.25,1),background-color .55s ease,color .55s ease,opacity .3s ease;}
.server-rail-btn::before{transition:transform .6s cubic-bezier(.25,.8,.25,1),opacity .45s ease;}

/* profile card: equal space above and below so the contents sit exactly on the middle line */
@media (min-width:901px){ .me-dock .user-bar{padding-top:13px;padding-bottom:13px;} }

/* even slower, softer hover on the server strip */
.server-rail-btn{transition:border-radius .9s cubic-bezier(.25,.8,.25,1),background-color .8s ease,color .8s ease,opacity .3s ease;}
.server-rail-btn::before{transition:transform .9s cubic-bezier(.25,.8,.25,1),opacity .7s ease;}

/* Friends and Upgrade to Nova sit closer together */
#friendsNavBtn{margin-bottom:3px;}

/* server name bar: rounded corners like the other cards */
.current-server-bar{border-radius:12px;}
@media (min-width:901px){ .current-server-bar{margin:6px 6px 2px;padding:10px 10px;} }

/* ---- server invite card (a link to a server on this site, shown like Discord's) ---- */
.invite-card{margin-top:8px;width:min(460px,100%);box-sizing:border-box;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;padding:0 16px 16px;}
.invite-card .ic-banner{height:52px;margin:0 -16px 12px;background:linear-gradient(135deg,#8f89dd 0%,#7a74c8 45%,#5a53a0 100%);}
.invite-card .ic-label{font-size:13px;color:var(--text-dim);margin-bottom:10px;}
.invite-card .ic-row{display:flex;align-items:center;gap:12px;}
.invite-card .ic-icon{flex:0 0 46px;width:46px;height:46px;border-radius:13px;overflow:hidden;background:var(--panel-2);}
.invite-card .ic-icon img{display:block;width:100%;height:100%;object-fit:cover;cursor:default;max-height:none;}
.invite-card .ic-info{flex:1;min-width:0;}
.invite-card .ic-name{font-size:17px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.invite-card .ic-stats{display:flex;align-items:center;flex-wrap:wrap;margin-top:3px;font-size:13px;color:var(--text-dim);}
.invite-card .ic-dot{width:8px;height:8px;border-radius:50%;background:var(--text-faint);margin:0 6px 0 0;display:inline-block;}
.invite-card .ic-dot.on{background:var(--green);}
.invite-card .ic-stats .ic-dot + .ic-dot,.invite-card .ic-stats > .ic-dot:not(.on){margin-left:14px;}
.invite-card .ic-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:8px;border:1px solid transparent;background:var(--green);color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer;}
.invite-card .ic-btn:hover:not(:disabled){filter:brightness(1.1);}
.invite-card .ic-btn:disabled{opacity:.6;cursor:default;}
.invite-card .ic-btn.is-joined{background:transparent;border-color:var(--line);color:var(--text);}
.invite-card .ic-btn.is-joined:hover{background:var(--panel-2);filter:none;}
.invite-card.loading .ic-icon,.invite-card.loading .ic-name{animation:icPulse 1.2s ease-in-out infinite;}
.invite-card.loading .ic-name{background:var(--panel-2);border-radius:6px;width:55%;}
@keyframes icPulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.invite-card.loading .ic-icon,.invite-card.loading .ic-name{animation:none}}

/* ---- server rail hover: circle → rounded square, marker grows on the left edge, and a card fades in beside the icon ---- */
.server-rail-btn{transition:border-radius .24s cubic-bezier(.3,.9,.3,1),background-color .2s ease,color .2s ease,opacity .2s ease,transform .2s ease;}
.server-rail-btn:hover{border-radius:16px;}
.server-rail-btn::before{transition:transform .26s cubic-bezier(.3,.9,.3,1),opacity .2s ease;}
.rail-pop{position:fixed;z-index:800;pointer-events:none;box-sizing:border-box;padding:11px 16px 12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.4);white-space:nowrap;max-width:320px;opacity:0;transform:translateX(-8px) scale(.97);transform-origin:left center;
  transition:opacity .16s ease,transform .22s cubic-bezier(.2,.9,.3,1.1);}
.rail-pop.show{opacity:1;transform:none;}
.rail-pop.moving{transition:opacity .16s ease,transform .22s cubic-bezier(.2,.9,.3,1.1),top .14s ease;}
.rail-pop .rp-name{font-size:15px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;}
.rail-pop .rp-stats{display:flex;align-items:center;margin-top:5px;font-size:13px;color:var(--text-dim);}
.rail-pop .rp-dot{width:8px;height:8px;border-radius:50%;background:var(--text-faint);margin:0 6px 0 0;display:inline-block;flex:0 0 auto;}
.rail-pop .rp-dot.on{background:var(--green);}
.rail-pop .rp-stats .rp-dot:not(.on){margin-left:14px;}
@media (prefers-reduced-motion:reduce){.server-rail-btn,.server-rail-btn::before,.rail-pop,.rail-pop.moving{transition:none;}}
@media (hover:none){.rail-pop{display:none;}}

/* expired / invalid invite: no banner, a red envelope tile, red "Invalid Invite" title (like Discord) */
.invite-card.invalid{padding-top:14px;}
.invite-card.invalid .ic-banner{display:none;}
.invite-card.invalid .ic-label{margin-bottom:12px;}
.invite-card.invalid .ic-icon{flex-basis:50px;width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--red) 22%,var(--panel));color:color-mix(in srgb,var(--red) 62%,#fff);}
.invite-card.invalid .ic-icon svg{width:26px;height:26px;stroke-width:1.6;}
.invite-card.invalid .ic-icon svg rect{fill:currentColor;}
.invite-card.invalid .ic-icon svg path{stroke:color-mix(in srgb,var(--red) 22%,var(--panel));stroke-width:1.9;}
.invite-card.invalid .ic-name{font-size:16px;font-weight:700;color:color-mix(in srgb,var(--red) 62%,#fff);}
.invite-card.invalid .ic-stats{font-size:14px;margin-top:3px;}
.invite-card.invalid.offline .ic-icon{background:var(--panel-2);color:var(--text-dim);}
.invite-card.invalid.offline .ic-icon svg path{stroke:var(--panel-2);}
.invite-card.invalid.offline .ic-name{color:var(--text);}
html[data-theme="light"] .invite-card.invalid .ic-name{color:var(--red);}
html[data-theme="light"] .invite-card.invalid:not(.offline) .ic-icon{color:var(--red);}

.context-menu .cm-item:disabled{opacity:.4;cursor:default;pointer-events:none;}
.context-menu .cm-flip svg{rotate:180deg;}
.ss-chan-actions button:disabled{opacity:.3;cursor:default;}

/* ---- emoji picker (same frame as the sticker picker) ---- */
.mp-pop{animation:pop-in .12s ease;}
.mp-head .mp-prev{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:24px;line-height:1;}
.mp-head .mp-prev img{width:28px;height:28px;object-fit:contain;}
.mp-emojis .mp-title{margin:8px 2px 6px;}
.mp-grid-em{display:grid;grid-template-columns:repeat(9,1fr);gap:1px;margin-bottom:6px;}
.mp-em{aspect-ratio:1;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;}
.mp-em:hover,.mp-em:focus-visible{background:rgba(255,255,255,.09);outline:none;}
.mp-em img{width:28px;height:28px;object-fit:contain;display:block;margin:0;}
.mp-rail-btn{font-weight:600;}
.mp-body .ep-empty{padding:28px 12px;}
@media (max-width:420px){.mp-grid-em{grid-template-columns:repeat(7,1fr);}}

.sfx-test{display:flex;flex-wrap:wrap;gap:8px;}
.sfx-test .btn-secondary{padding:7px 12px;font-size:13px;}

/* ---- dragging a server icon in the rail ---- */
.srv-dragging,.srv-dragging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none;}
#serverRailList .server-rail-btn img{-webkit-user-drag:none;user-drag:none;}
.srv-dragging #serverRailList .server-rail-btn:not(.dragging){transition:transform .18s ease;}
#serverRailList .server-rail-btn.dragging{position:relative;z-index:30;transition:none;opacity:.95;box-shadow:0 8px 22px rgba(0,0,0,.5);transform:translateY(var(--ty,0px)) scale(1.06)!important;}
@media (prefers-reduced-motion:reduce){.srv-dragging #serverRailList .server-rail-btn:not(.dragging){transition:none;}}

/* ---- server banner (settings + invite card), animated-emoji tags ---- */
.ss-banner-row{display:flex;gap:14px;align-items:center;}
.ss-banner-preview{flex:0 0 190px;height:60px;border-radius:10px;background:var(--panel-2) center/cover no-repeat;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:12px;}
.ss-nova-tag{font-size:11px;color:var(--amber);margin-left:6px;font-weight:600;}
.invite-card .ic-banner.has-img{background-size:cover;background-position:center;background-repeat:no-repeat;}
.invite-card .ic-banner{background-size:cover;background-position:center;}
.emo-tag{font-style:normal;font-size:11px;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--cyan) 18%,transparent);color:var(--cyan);margin-left:6px;}
.emo-tag.lock{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber);}
.emo-item.emo-locked .emo-img{opacity:.45;filter:grayscale(.7);}
@media (max-width:560px){.ss-banner-row{flex-direction:column;align-items:flex-start;}.ss-banner-preview{flex-basis:auto;width:100%;}}

.segmented button.nova-locked{opacity:.65;}
.segmented button.nova-opt svg{vertical-align:-1px;color:var(--amber);margin-left:2px;}

/* ===== profile themes (bought in the shop with Diz Points): how a person's profile window looks to everybody who opens it ===== */
[data-ptheme="sakura"]{--pt-a:#ff7eb6;--pt-b:#c77dff;--pt-banner:linear-gradient(135deg,#a78bfa,#f472b6);}
[data-ptheme="ocean"]{--pt-a:#38bdf8;--pt-b:#2dd4bf;--pt-banner:linear-gradient(135deg,#0ea5e9,#14b8a6 60%,#0f766e);}
[data-ptheme="forest"]{--pt-a:#4ade80;--pt-b:#a3e635;--pt-banner:linear-gradient(135deg,#166534,#4d7c0f 60%,#84cc16);}
[data-ptheme="mocha"]{--pt-a:#e0b48a;--pt-b:#c08457;--pt-banner:linear-gradient(135deg,#78350f,#b4783f 60%,#e0b48a);}
[data-ptheme="slate"]{--pt-a:#9fb0c6;--pt-b:#64748b;--pt-banner:linear-gradient(135deg,#334155,#64748b);}
[data-ptheme="sunset"]{--pt-a:#fb923c;--pt-b:#f472b6;--pt-banner:linear-gradient(120deg,#f59e0b,#ef4444 55%,#ec4899);}
[data-ptheme="aurora"]{--pt-a:#34d399;--pt-b:#818cf8;--pt-banner:linear-gradient(135deg,#10b981,#06b6d4 50%,#8b5cf6);}
[data-ptheme="royal"]{--pt-a:#c4b5fd;--pt-b:#fbbf24;--pt-banner:linear-gradient(135deg,#4c1d95,#7c3aed 55%,#d4a017);}
[data-ptheme="crimson"]{--pt-a:#f87171;--pt-b:#fb7185;--pt-banner:linear-gradient(135deg,#450a0a,#b91c1c 55%,#f43f5e);}
[data-ptheme="cyber"]{--pt-a:#22d3ee;--pt-b:#e879f9;--pt-banner:linear-gradient(135deg,#0f172a,#0891b2 50%,#c026d3);}
[data-ptheme="galaxy"]{--pt-a:#a78bfa;--pt-b:#60a5fa;--pt-banner:radial-gradient(circle at 12px 14px,rgba(255,255,255,.95) 0 1px,transparent 2px) 0 0/70px 46px,radial-gradient(circle at 40px 30px,rgba(255,255,255,.7) 0 1px,transparent 2px) 0 0/110px 62px,radial-gradient(circle at 20px 20px,rgba(180,200,255,.9) 0 1.4px,transparent 2.4px) 0 0/150px 80px,linear-gradient(135deg,#1e1b4b,#4c1d95 50%,#1e3a8a);}
[data-ptheme="holo"]{--pt-a:#a5f3fc;--pt-b:#f0abfc;--pt-banner:linear-gradient(120deg,#a5f3fc,#f0abfc,#fde68a,#86efac,#a5f3fc);}
[data-ptheme="inferno"]{--pt-a:#fb923c;--pt-b:#ef4444;--pt-banner:linear-gradient(120deg,#7f1d1d,#ea580c,#facc15,#ea580c,#7f1d1d);}
[data-ptheme="gilded"]{--pt-a:#fcd34d;--pt-b:#f59e0b;--pt-banner:linear-gradient(120deg,#78350f,#f59e0b,#fde68a,#f59e0b,#78350f);}
.user-profile-popover[data-ptheme]{background:linear-gradient(160deg,color-mix(in srgb,var(--pt-a) 11%,var(--panel)) 0%,var(--panel) 58%);}
.user-profile-popover[data-ptheme] .upm-left,.user-profile-popover[data-ptheme] .upm-right{background:transparent;}
.user-profile-popover[data-ptheme] .upm-left{border-right-color:color-mix(in srgb,var(--pt-a) 28%,var(--line));}
.user-profile-popover[data-ptheme] .user-profile-banner:not(.has-image){background:var(--pt-banner);}
.user-profile-popover[data-ptheme] .user-profile-avatar{border-color:color-mix(in srgb,var(--pt-a) 14%,var(--panel));box-shadow:0 0 0 2px color-mix(in srgb,var(--pt-a) 70%,transparent);}
.user-profile-popover[data-ptheme] #userProfileName{color:var(--pt-a);}
.user-profile-popover[data-ptheme] .upm-primary{background:var(--pt-a);color:#101318;}
.user-profile-popover[data-ptheme] .upm-tab.active{background:color-mix(in srgb,var(--pt-a) 22%,transparent);color:var(--pt-a);}
.user-profile-popover[data-ptheme] .psect-label{color:color-mix(in srgb,var(--pt-a) 70%,var(--text-faint));}
.user-profile-popover[data-ptheme] .level-bar-fill{background:linear-gradient(90deg,var(--pt-b),var(--pt-a));}
.user-profile-popover[data-ptheme] .level-box-top span:first-child{color:var(--pt-a);}
/* the animated ones: colours drift, a shimmer sweeps across the banner, the avatar ring glows (Galaxy: the stars drift and twinkle) */
:is([data-ptheme="holo"],[data-ptheme="inferno"],[data-ptheme="gilded"]) .user-profile-banner:not(.has-image),
.ptp:is([data-ptheme="holo"],[data-ptheme="inferno"],[data-ptheme="gilded"]) .ptp-banner{background-size:300% 300%!important;animation:ptDrift 12s ease-in-out infinite;}
[data-ptheme="galaxy"] .user-profile-banner:not(.has-image),.ptp[data-ptheme="galaxy"] .ptp-banner{animation:ptStars 36s linear infinite,ptTwinkle 5s ease-in-out infinite;}
:is([data-ptheme="holo"],[data-ptheme="inferno"],[data-ptheme="gilded"],[data-ptheme="galaxy"]) .user-profile-banner:not(.has-image)::after,
.ptp:is([data-ptheme="holo"],[data-ptheme="inferno"],[data-ptheme="gilded"],[data-ptheme="galaxy"]) .ptp-banner::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.3) 50%,transparent 64%) 150% 0/250% 100% no-repeat;animation:ptSweep 6s ease-in-out infinite;}
.user-profile-popover:is([data-ptheme="holo"],[data-ptheme="inferno"],[data-ptheme="gilded"],[data-ptheme="galaxy"]) .user-profile-avatar{animation:ptRing 3.2s ease-in-out infinite;}
.ptp:is([data-ptheme="holo"],[data-ptheme="inferno"],[data-ptheme="gilded"],[data-ptheme="galaxy"]) .ptp-av{animation:ptRing 3.2s ease-in-out infinite;}
@keyframes ptDrift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ptStars{from{background-position:0 0,0 0,0 0,0 0}to{background-position:70px 46px,-110px 62px,150px -80px,0 0}}
@keyframes ptTwinkle{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
@keyframes ptSweep{0%{background-position:150% 0}55%,100%{background-position:-50% 0}}
@keyframes ptRing{0%,100%{box-shadow:0 0 0 2px var(--pt-a),0 0 4px color-mix(in srgb,var(--pt-a) 35%,transparent)}50%{box-shadow:0 0 0 2px var(--pt-a),0 0 15px color-mix(in srgb,var(--pt-a) 80%,transparent)}}
@media (prefers-reduced-motion:reduce){[data-ptheme] .user-profile-banner,[data-ptheme] .ptp-banner,[data-ptheme] .user-profile-banner::after,[data-ptheme] .ptp-banner::after,[data-ptheme] .user-profile-avatar,[data-ptheme] .ptp-av{animation:none!important;}}
/* shop preview: a small copy of the profile window */
.shop-prev.ptprev{height:auto;display:block;padding:2px 0;}
.ptp{position:relative;border-radius:11px;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--pt-a) 12%,var(--panel)),var(--panel) 62%);border:1px solid color-mix(in srgb,var(--pt-a) 38%,var(--line));text-align:left;}
.ptp-banner{position:relative;height:40px;background:var(--pt-banner);}
.shop-prev .ptp-av{position:absolute;left:10px;top:22px;width:36px;height:36px;border-radius:50%;overflow:hidden;border:3px solid color-mix(in srgb,var(--pt-a) 14%,var(--panel));box-shadow:0 0 0 2px var(--pt-a);background:var(--panel);}
.shop-prev .ptp-av img{width:100%;height:100%;border-radius:0;}
.ptp-body{padding:24px 10px 11px;}
.ptp-name{height:8px;width:48%;border-radius:4px;background:var(--pt-a);}
.ptp-bar{margin-top:9px;height:5px;border-radius:3px;background:rgba(255,255,255,.09);}
.ptp-bar i{display:block;height:100%;width:62%;border-radius:3px;background:linear-gradient(90deg,var(--pt-b),var(--pt-a));}
.vip-perks li{margin-bottom:2px;}

/* ---- right-click menus ---- */
.cm-item .cm-hint{margin-left:auto;padding-left:14px;font-size:11px;color:var(--text-faint);}
.cm-item:focus-visible{outline:none;background:var(--panel);color:var(--amber);}
.context-menu:focus{outline:none;}
@media (pointer:coarse){
  .server-rail-btn,.chan-row,.cat-head,.member-row,#messagesEl .msg{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
  #messagesEl .msg .msg-text{-webkit-user-select:text;user-select:text;}
}

/* ---- fly-out groups inside right-click menus ---- */
.context-menu.cm-flyout{position:fixed;z-index:1310;min-width:190px;max-width:320px;animation:cmFly .12s ease;}
.context-menu.cm-flyout[hidden]{display:none!important;}
@keyframes cmFly{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.cm-item.cm-parent.open{background:var(--panel);color:var(--amber);}
.cm-item.cm-parent.open .cm-icon{color:var(--amber);}
.cm-arrow{margin-left:auto;display:flex;opacity:.7;}
.cm-arrow svg{rotate:0deg;}
.context-menu .cm-item{white-space:nowrap;}
@media (prefers-reduced-motion:reduce){.context-menu.cm-flyout{animation:none;}}

/* ---- right-click menus: larger, easier to read ---- */
.context-menu.cm-flyout{width:max-content;min-width:224px;max-width:min(340px,calc(100vw - 16px));}
.cm-role .cm-check svg{width:17px;height:17px;}
.cm-arrow svg{width:15px;height:15px;}
.cm-item .cm-hint{font-size:12.5px;}
.cm-vol-slider{height:20px;}
@media (pointer:coarse){.cm-item{padding:13px 12px;}.context-menu{min-width:260px;}}

/* ---- owner panel: backups & updates ---- */
.sys{display:flex;flex-direction:column;gap:14px;max-width:880px;}
.sys-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);}
.sys-stats{display:flex;gap:6px 22px;flex-wrap:wrap;}
.sys-stats span{display:flex;flex-direction:column;gap:1px;min-width:64px;}
.sys-stats i{font-style:normal;font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;}
.sys-stats b{font-size:14px;font-weight:600;}
.sys-stats .ok b{color:var(--green);} .sys-stats .warn b{color:var(--amber);}
.sys-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--panel);width:max-content;max-width:100%;overflow-x:auto;}
.sys-tabs button{background:none;border:0;color:var(--text-dim);font:inherit;font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:9px;cursor:pointer;white-space:nowrap;}
.sys-tabs button:hover{color:var(--text);} .sys-tabs button.on{background:var(--panel-2);color:var(--text);box-shadow:0 0 0 1px var(--line) inset;}
.sys-panel{display:flex;flex-direction:column;gap:14px;} .sys-panel[hidden]{display:none;}
.sys-card{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px;}
.sys-card-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;}
.sys-card-h h4{margin:0;font-size:15px;font-weight:650;} .sys-card-h h4 small{font-weight:500;font-size:12.5px;color:var(--text-dim);margin-left:8px;}
.sys-card-h p{margin:3px 0 0;font-size:13px;color:var(--text-dim);line-height:1.55;}
.sys-step,.sys-ic{flex:0 0 30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;background:color-mix(in srgb,var(--cyan) 16%,transparent);color:var(--cyan);}
.sys-ic svg{width:17px;height:17px;}
.sys-drop{position:relative;display:flex;align-items:center;gap:14px;padding:18px;border:2px dashed var(--line);border-radius:12px;background:var(--panel-2);cursor:pointer;transition:border-color .15s,background .15s;}
.sys-drop:hover,.sys-drop.over,.sys-drop:focus-within{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 7%,var(--panel-2));}
.sys-drop[hidden]{display:none;}
.sys-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.sys-drop-ic{flex:0 0 46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--cyan) 15%,transparent);color:var(--cyan);}
.sys-drop-t b{display:block;font-size:14.5px;} .sys-drop-t small{display:block;margin-top:2px;font-size:12.5px;color:var(--text-dim);}
.sys-file{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);} .sys-file[hidden]{display:none;}
.sys-file-ic{flex:0 0 34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--cyan) 15%,transparent);color:var(--cyan);}
.sys-file b{display:block;font-size:13.5px;word-break:break-all;} .sys-file small{color:var(--text-dim);font-size:12px;} .sys-file>div{flex:1;min-width:0;}
.sys-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.sys-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;transition:filter .12s,background .12s,border-color .12s;}
.sys-btn:hover:not(:disabled){filter:brightness(1.12);} .sys-btn:disabled{opacity:.45;cursor:not-allowed;}
.sys-btn svg{width:15px;height:15px;}
.sys-btn.primary{background:var(--cyan);border-color:var(--cyan);color:#06121a;}
.sys-btn.danger{background:transparent;border-color:color-mix(in srgb,var(--red) 70%,transparent);color:var(--red);} .sys-btn.danger:hover:not(:disabled){background:color-mix(in srgb,var(--red) 14%,transparent);}
.sys-btn.ghost{background:transparent;} .sys-del:hover:not(:disabled){border-color:var(--red);color:var(--red);}
.sys-link{background:none;border:0;color:var(--cyan);font:inherit;font-size:12.5px;cursor:pointer;padding:2px 4px;} .sys-link:hover{text-decoration:underline;}
.sys-banner{display:flex;flex-direction:column;gap:3px;margin:0 0 10px;padding:11px 14px;border-radius:12px;font-size:13px;line-height:1.55;border:1px solid var(--line);border-left-width:4px;background:var(--panel);}
.sys-banner b{font-size:13.5px;} .sys-banner span{color:var(--text-dim);}
.sys-banner.ok{border-left-color:var(--green);} .sys-banner.warn{border-left-color:var(--amber);} .sys-banner.bad{border-left-color:var(--red);}
.sys-banner code,.sys-checks code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;font-size:12px;}
.sys-banner-btns{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.sys-prog{margin-top:12px;} .sys-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.09);overflow:hidden;} .sys-bar i{display:block;height:100%;border-radius:5px;background:var(--cyan);transition:width .2s;}
.sys-prog.busy .sys-bar i{background:repeating-linear-gradient(45deg,var(--cyan) 0 10px,color-mix(in srgb,var(--cyan) 55%,transparent) 10px 20px);background-size:28px 28px;animation:sysStripe 1s linear infinite;}
@keyframes sysStripe{to{background-position:28px 0}}
.sys-prog-t{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;font-size:12.5px;color:var(--text-dim);}
.sys-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);flex-wrap:wrap;} .sys-card-h + .sys-item{border-top:0;}
.sys-item-main{min-width:0;flex:1;} .sys-item-main b{font-size:13px;word-break:break-all;} .sys-item-main small{font-size:12px;color:var(--text-dim);}
.sys-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px;}
.sys-tag{font-size:11px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--cyan) 14%,transparent);color:var(--cyan);}
.sys-item-btns{display:flex;gap:8px;flex-wrap:wrap;} .sys-item-btns .sys-btn{padding:7px 12px;font-size:12.5px;}
.sys-empty{padding:14px;border:1px dashed var(--line);border-radius:10px;font-size:13px;color:var(--text-dim);text-align:center;}
.sys-result{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);} .sys-result.good{border-color:color-mix(in srgb,var(--green) 55%,var(--line));} .sys-result.bad{border-color:color-mix(in srgb,var(--red) 55%,var(--line));}
.sys-checks{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px;}
.sys-checks li{display:flex;gap:10px;font-size:13px;line-height:1.5;} .sys-checks li>span{flex:0 0 20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.sys-checks li.ok>span{background:color-mix(in srgb,var(--green) 22%,transparent);color:var(--green);} .sys-checks li.bad>span{background:color-mix(in srgb,var(--red) 22%,transparent);color:var(--red);}
.sys-checks pre{margin:6px 0 0;padding:9px 11px;max-height:180px;overflow:auto;background:rgba(0,0,0,.32);border-radius:8px;font-size:11.5px;white-space:pre-wrap;word-break:break-word;color:var(--text-dim);}
.sys-result details{margin:6px 0;font-size:13px;} .sys-result summary{cursor:pointer;color:var(--text-dim);}
.sys-files{max-height:190px;overflow:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--text-dim);padding:6px 2px;}
.sys-opts{display:flex;flex-direction:column;gap:8px;margin:10px 0;} .sys-opts.row{flex-direction:row;flex-wrap:wrap;gap:10px;}
.sys-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);font-size:13.5px;cursor:pointer;} .sys-opts.row .sys-opt{flex:1 1 190px;}
.sys-opt input{margin-top:3px;accent-color:var(--cyan);} .sys-opt b{display:block;font-weight:600;} .sys-opt small{display:block;font-size:12px;color:var(--text-dim);margin-top:1px;line-height:1.45;} .sys-opt.off{opacity:.65;cursor:default;}
.sys-opt:has(input:checked){border-color:color-mix(in srgb,var(--cyan) 60%,var(--line));background:color-mix(in srgb,var(--cyan) 8%,var(--panel-2));}
.sys-dlg{width:min(460px,92vw);max-height:90vh;overflow:auto;padding:22px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.55);}
.sys-dlg h3{margin:0 0 10px;font-size:17px;} .sys-dlg-body{font-size:13.5px;line-height:1.6;color:var(--text-dim);} .sys-dlg-body p{margin:0 0 8px;} .sys-dlg-body b{color:var(--text);}
.sys-pwl{display:block;font-size:12.5px;color:var(--text-dim);margin:14px 0 4px;} .sys-pwl input{display:block;width:100%;margin-top:6px;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit;} .sys-pwl input:focus{outline:none;border-color:var(--cyan);}
.sys-dlg-msg{min-height:20px;font-size:12.5px;color:var(--red);margin-top:6px;} .sys-dlg-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:8px;}
@media (max-width:640px){.sys-top{flex-direction:column;align-items:stretch;}.sys-drop{flex-direction:column;text-align:center;}.sys-tabs{width:100%;}.sys-tabs button{flex:1;padding:8px 10px;}.sys-item-btns{width:100%;}}
@media (prefers-reduced-motion:reduce){.sys-prog.busy .sys-bar i{animation:none;}}

/* ---- Channel hover actions (invite / settings) + drag grip: absolutely positioned, so the row never changes size ---- */
.chan-row{position:relative;}
.chan-actions{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none;align-items:center;gap:6px;padding-left:6px;background:var(--panel-2);}
.chan-row:hover .chan-actions,.chan-row:focus-within .chan-actions{display:flex;}
.chan-act{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:5px;background:none;color:var(--text-dim);cursor:pointer;}
.chan-act:hover{background:var(--panel);color:var(--text);}
.chan-act svg{width:13px;height:13px;}
.chan-grip{position:absolute;left:0;top:50%;transform:translateY(-50%);display:none;color:var(--text-faint);pointer-events:none;}
.chan-row:hover .chan-grip{display:flex;}
@media (hover:none){.chan-actions{display:none !important;}.chan-grip{display:none !important;}}

/* ---- Buy Diz Point ---- */
.dp-buy{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}
.dp-buy-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,.08));background:var(--panel-2);color:var(--text);cursor:pointer;text-align:left;}
.dp-buy-card b{font-size:16px;}
.dp-buy-card span{font-size:12.5px;color:var(--text-dim);}
.dp-buy-card:hover:not(:disabled){background:var(--panel);border-color:var(--amber,#F2A65A);}
.dp-buy-card:disabled{opacity:.55;cursor:default;}
/* ===== bottom dock (desktop): music player sits flush between the voice strip and the profile bar (same width, no gaps) ===== */
@media (min-width:901px){
  .me-dock .music-bar{margin:0;border:0;border-radius:0;padding:10px 14px 12px;background:color-mix(in srgb,#8C7CF0 12%,var(--panel-2))}
  .me-dock:not(:has(.voice-status-bar.active)) .music-bar.active{border-radius:14px 14px 0 0}
  .me-dock:has(.music-bar.active) .user-bar{border-radius:0 0 14px 14px}
  .me-dock .music-bar .mb-controls button{background:rgba(255,255,255,.06)}
  .me-dock .music-bar .mb-controls button.on{background:#8C7CF0}
}