/* Styles for the newer client features: uploads, invites, threads, polls, inbox, pickers, discovery,
   community settings, profile styling, security and the custom CSS editor. Uses the tokens from style.css. */

/* ----- small utilities ----- */
.yellow { color: var(--yellow); }
.row.wrap { flex-wrap: wrap; }
.pad-x { padding: 0 16px; margin: 0; }
.cur-tag.grey { background: #4e5058; }
.radio-card.slim { padding: 8px 12px; font-size: 14px; }
.radio-row { display: flex; gap: 8px; }
.radio-row .radio-card { flex: 1; }
.check-row { display: flex; align-items: center; gap: 8px; text-transform: none; font-weight: 400; color: var(--text); font-size: 14px; cursor: pointer; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; margin-top: 8px; }
.field-toggle { margin-top: 16px; }
img.emoji { width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -0.3em; }
.jumbo img.emoji { width: 48px; height: 48px; }
.r-emoji img.emoji { width: 16px; height: 16px; vertical-align: -3px; }
.dot-badge { position: absolute; top: -2px; right: -4px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; min-width: 14px; height: 14px; border-radius: 7px; padding: 0 3px; display: flex; align-items: center; justify-content: center; }
.inbox-btn { position: relative; }

/* ----- uploads ----- */
.att-prev.failed { outline: 2px solid var(--red); }
.att-prev.failed .att-prev-name { color: var(--red); }
.att-prev-size { margin-top: 2px; }
.att-progress { height: 4px; background: var(--bg-rail); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.att-progress i { display: block; height: 100%; background: var(--brand); transition: width .15s; }
.att-limit { align-self: flex-end; white-space: nowrap; }

/* ----- invites ----- */
.inv-settings { margin-top: 12px; }
.inv-settings summary { cursor: pointer; color: var(--text-muted); font-size: 14px; }
.inv-table { margin-top: 16px; }
.inv-row { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr .9fr 70px; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--divider); font-size: 14px; }
.inv-row.head { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.inv-row.dead { opacity: .55; }
.inv-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.inv-actions { display: flex; justify-content: flex-end; gap: 4px; }

/* ----- sidebar extras ----- */
.thread-row { margin-left: 22px; position: relative; padding-left: 14px !important; font-size: 14px; }
.thread-spine { position: absolute; left: 0; top: -6px; width: 10px; height: 18px; border-left: 2px solid var(--divider); border-bottom: 2px solid var(--divider); border-bottom-left-radius: 6px; }
.muted-chan { opacity: .45; }
.server-header.has-banner { background-size: cover; background-position: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); color: #fff; }
.server-header .sh-name { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verified { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); color: var(--on-brand); margin-right: 6px; flex-shrink: 0; }
.srv-alert { font-size: 12px; font-weight: 600; padding: 6px 12px; background: rgba(240, 178, 50, .15); color: var(--yellow); display: flex; gap: 6px; align-items: center; }
.srv-alert.red { background: rgba(242, 63, 67, .15); color: var(--red); }
.events-row { margin: 8px 8px 0; }

/* ----- message extras ----- */
.fwd { border-left: 4px solid var(--border); padding: 4px 0 4px 12px; margin: 4px 0; }
.fwd-head { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; font-style: italic; }
.fwd-meta { font-size: 14px; margin: 2px 0; }
.stickers { display: flex; gap: 8px; margin-top: 4px; }
.sticker { width: 160px; height: 160px; object-fit: contain; }
.thread-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px; background: var(--bg-side); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; max-width: 480px; }
.thread-chip:hover { border-color: var(--brand); }
.tc-name { font-weight: 600; color: var(--text-strong); }
.seen { text-align: right; font-size: 12px; color: var(--text-muted); padding: 2px 16px 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.edited[data-action] { cursor: pointer; }
.edited[data-action]:hover { text-decoration: underline; }

.poll { background: var(--bg-side); border: 1px solid var(--border); border-radius: 8px; padding: 14px; max-width: 520px; margin-top: 6px; }
.poll-q { font-weight: 700; color: var(--text-strong); font-size: 17px; margin-bottom: 2px; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 12px; background: var(--bg-input); border: 1px solid transparent; border-radius: 6px; color: var(--text); text-align: left; overflow: hidden; font-size: 15px; }
.poll-opt:not(:disabled):hover { border-color: var(--brand); }
.poll-opt.mine { border-color: var(--brand); }
.poll-opt.win .poll-text { font-weight: 700; }
.poll-opt:disabled { cursor: default; }
.poll-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--brand) 25%, transparent); transition: width .3s; }
.poll-text { position: relative; flex: 1; }
.poll-pct { position: relative; font-weight: 600; font-size: 13px; }
.poll-opt .ic { position: relative; color: var(--brand); }
.poll-foot { margin-top: 10px; }
.poll-answers .input { margin-top: 6px; }

/* ----- side panels ----- */
.sp-sec { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); padding: 10px 6px 4px; }
.thread-item { padding: 10px 12px; border-radius: 8px; background: var(--bg-main); margin-bottom: 6px; cursor: pointer; border: 1px solid transparent; }
.thread-item:hover { border-color: var(--border); }
.ti-name { font-weight: 600; color: var(--text-strong); display: flex; align-items: center; gap: 6px; }
.notice-item { padding: 10px 12px; border-radius: 8px; background: var(--bg-main); margin-bottom: 6px; border-left: 3px solid var(--border); }
.notice-item.unread { border-left-color: var(--brand); }
.notice-item.n-warning { border-left-color: var(--yellow); }
.ni-title { font-weight: 600; color: var(--text-strong); }
.inbox-wrap { width: 480px; padding: 0; background: var(--bg-side); }
.inbox-modal { width: 100% !important; max-width: none; height: 70vh; display: flex !important; }
.history-item { padding: 10px 0; border-bottom: 1px solid var(--divider); }
.history-item.current .muted { color: var(--green); }
.report-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }

/* ----- expression picker ----- */
.expr-picker { height: 460px; }
.ep-tabs { display: flex; gap: 4px; padding: 10px 12px 0; }
.ep-tab { background: none; border: 0; color: var(--text-muted); font-weight: 600; padding: 4px 10px; border-radius: 4px; }
.ep-tab:hover { color: var(--text); background: var(--bg-hover); }
.ep-tab.active { color: var(--text-strong); background: var(--bg-active); }
.ep-grid button img.emoji { width: 32px; height: 32px; vertical-align: middle; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.sticker-grid button, .gif-grid button { background: none; border: 0; padding: 4px; border-radius: 6px; }
.sticker-grid button:hover, .gif-grid button:hover { background: var(--bg-active); }
.sticker-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.gif-grid { columns: 2; column-gap: 6px; }
.gif-tile { position: relative; display: block; width: 100%; margin-bottom: 6px; border-radius: 6px; overflow: hidden; break-inside: avoid; cursor: pointer; }
.gif-tile:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.gif-grid img { width: 100%; display: block; border-radius: 6px; }
/* favourite star on GIFs (picker tiles and GIFs in chat) */
.gif-fav { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; opacity: 0; transition: opacity .12s; cursor: pointer; }
.gif-tile:hover .gif-fav, .gif-embed:hover .gif-fav, .gif-fav:focus-visible { opacity: 1; }
.gif-fav:hover { background: rgba(0, 0, 0, .8); }
.gif-fav.on { color: #facc15; }
.gif-fav.on svg { fill: currentColor; }
.gif-embed { position: relative; display: inline-block; max-width: 100%; }
/* message length counter in the composer */
.char-count { align-self: flex-end; padding: 0 4px 12px; font-size: 12px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.char-count.full { color: var(--red, #f23f43); font-weight: 600; }
/* full-screen camera / screen share */
.tile-fs { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; opacity: 0; transition: opacity .12s; cursor: pointer; }
.tile:hover .tile-fs, .tile-fs:focus-visible { opacity: 1; }
.tile-fs:hover { background: rgba(0, 0, 0, .85); }
@media (hover: none) { .tile-fs { opacity: 1; } }
.video-fs { position: fixed; inset: 0; z-index: 10000; background: #000; display: flex; align-items: center; justify-content: center; }
.video-fs video { width: 100%; height: 100%; object-fit: contain; }
.video-fs video.mirror { transform: scaleX(-1); }
.video-fs-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #fff; background: linear-gradient(rgba(0, 0, 0, .65), transparent); opacity: 0; transition: opacity .2s; }
.video-fs:hover .video-fs-bar { opacity: 1; }
.video-fs-bar .icon-btn { color: #fff; }
/* audio processing options */
.ns-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
/* GIF folders (Favorites, Trending) */
.gif-folders { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 8px; }
.gif-folder { position: relative; height: 84px; border: 0; border-radius: 6px; overflow: hidden; background: var(--bg-active); color: #fff; cursor: pointer; padding: 0; }
.gif-folder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.gif-folder span { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 100%; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.gif-folder:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.gif-back { display: flex; align-items: center; gap: 6px; padding: 8px 0; position: sticky; top: 0; background: var(--bg-side); z-index: 1; }

/* ----- discovery ----- */
.discovery .set-content-inner { max-width: 1100px; }
.disc-hero { background: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%), linear-gradient(135deg, var(--bg-input), var(--bg-rail)); border: 1px solid var(--border); border-radius: 14px; padding: 40px 32px; color: var(--text-strong); text-align: center; margin-bottom: 24px; }
.disc-hero h1 { margin: 0 0 8px; font-size: 26px; }
.disc-hero p { margin: 0 0 18px; opacity: .9; }
.disc-search { display: flex; align-items: center; gap: 8px; background: #fff; color: #4e5058; border-radius: 6px; padding: 0 12px; max-width: 520px; margin: 0 auto; }
.disc-search input { flex: 1; border: 0; outline: none; padding: 12px 0; font-size: 16px; color: #060607; background: none; }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.disc-card { background: var(--bg-side); border-radius: 10px; overflow: hidden; position: relative; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.disc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.dc-banner { height: 110px; background: linear-gradient(135deg, var(--bg-input), var(--bg-rail)) center/cover; }
.dc-icon { position: absolute; top: 80px; left: 14px; width: 48px; height: 48px; border-radius: 14px; border: 4px solid var(--bg-side); background: var(--bg-main); display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: 700; }
.dc-icon img { width: 100%; height: 100%; object-fit: cover; }
.dc-body { padding: 30px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dc-name { font-weight: 700; color: var(--text-strong); display: flex; align-items: center; }
.dc-desc { color: var(--text-muted); font-size: 14px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dc-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.dc-tag { font-size: 11px; background: var(--bg-input); border-radius: 4px; padding: 1px 6px; color: var(--text-muted); }

/* ----- community settings ----- */
.srv-banner-prev { height: 120px; border-radius: 8px; margin-top: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); text-transform: none; font-weight: 400; }
.expr-list { margin-top: 8px; }
.expr-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--divider); }
.expr-img { width: 32px; height: 32px; object-fit: contain; }
.sticker-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 8px; }
.sticker-card { background: var(--bg-side); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.sticker-card img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.sticker-card .icon-btn { position: absolute; top: 6px; right: 6px; }
.an-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.an-card { background: var(--bg-side); border-radius: 8px; padding: 14px; }
.an-num { font-size: 26px; font-weight: 800; color: var(--text-strong); }
.an-bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; background: var(--bg-side); border-radius: 8px; padding: 10px; }
.an-bar { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--brand); }
.an-bar.j { background: var(--green); }
.badge-admin { padding: 12px 0; border-bottom: 1px solid var(--divider); }
.badge-icon { font-size: 22px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.badge-icon img { width: 24px; height: 24px; }
.event-card { background: var(--bg-side); border-radius: 8px; padding: 14px; margin-top: 12px; border-left: 3px solid var(--brand); }
.event-card.live { border-left-color: var(--green); }
.ev-when { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.ev-name { font-weight: 700; font-size: 17px; color: var(--text-strong); margin: 4px 0; }
.ev-desc { font-size: 14px; margin-bottom: 6px; }
.ev-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.events-modal { width: 600px; }

/* ----- profile card styling ----- */
.pc-wrap { position: relative; }
.pc-badges { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 6px; background: var(--bg-float); border-radius: 6px; padding: 2px 4px; }
.pc-badge { font-size: 14px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; cursor: default; }
.pc-badge img { width: 18px; height: 18px; object-fit: contain; }
.pc-badge.official { filter: drop-shadow(0 0 3px var(--brand)); }
.pc-style-glass .pc-sec { background: color-mix(in srgb, var(--pc-accent) 12%, var(--bg-float)); backdrop-filter: blur(6px); }
.pc-style-gradient { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-accent) 45%, transparent), transparent 70%); border-radius: inherit; }
.pc-style-minimal .pc-banner { height: 60px; }
.badge-pref { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--divider); text-transform: none; font-weight: 400; color: var(--text); font-size: 14px; }

/* ----- appearance & custom css ----- */
.preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.preset-card { background: var(--bg-side); border: 2px solid transparent; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text); font-size: 13px; font-weight: 600; }
.preset-card:hover { border-color: var(--border); }
.preset-card.sel { border-color: var(--brand); }
.preset-swatch { width: 100%; height: 48px; border-radius: 6px; border: 1px solid var(--border); }
.custom-colors { margin-top: 16px; }
.color-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.color-pick input { width: 48px; height: 36px; border: 0; background: none; padding: 0; cursor: pointer; }
.slider-row { display: grid; grid-template-columns: 220px 1fr 70px; align-items: center; gap: 12px; margin-top: 14px; font-size: 14px; }
.css-editor { position: relative; height: 340px; margin-top: 12px; border-radius: 6px; background: var(--bg-rail); border: 1px solid var(--border); overflow: hidden; font-family: var(--code-font); font-size: 13px; line-height: 1.5; }
.css-editor textarea, .css-hl { position: absolute; inset: 0; margin: 0; padding: 12px; border: 0; font: inherit; white-space: pre; overflow: auto; tab-size: 2; }
.css-editor textarea { background: transparent; color: transparent; caret-color: var(--text-strong); resize: none; outline: none; }
.css-editor textarea::placeholder { color: var(--text-faint); }
.css-editor textarea::selection { background: color-mix(in srgb, var(--brand) 40%, transparent); color: transparent; }
.css-hl { pointer-events: none; color: var(--text); }
.hl-comment { color: #6a9955; } .hl-string { color: #ce9178; } .hl-at { color: #c586c0; } .hl-brace { color: var(--text-muted); }
.hl-prop { color: #9cdcfe; } .hl-num { color: #b5cea8; } .hl-var { color: #4fc1ff; } .hl-sel { color: #d7ba7d; }
body[data-theme="light"] .hl-prop { color: #0451a5; } body[data-theme="light"] .hl-sel { color: #800000; } body[data-theme="light"] .hl-num { color: #098658; }
.css-status { margin: 6px 0 10px; color: var(--text-muted); min-height: 18px; }
.snippets { display: flex; flex-direction: column; gap: 8px; }
.snippet { display: flex; align-items: center; gap: 12px; background: var(--bg-side); border-radius: 6px; padding: 10px 12px; }
.snippet code { color: var(--text-muted); display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 480px; }
kbd { background: var(--bg-rail); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; font-size: 12px; font-family: var(--code-font); }

/* ----- security ----- */
.sec-card { background: var(--bg-side); border-radius: 8px; padding: 16px; }
.sec-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; }
.sec-ic.ok { background: rgba(35, 165, 90, .2); color: var(--green); }
.login-table { font-size: 13px; }
.login-row { display: grid; grid-template-columns: 22px 170px 1fr 120px 120px; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--divider); align-items: center; }
.login-row.bad { color: var(--red); }
.notif-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--divider); flex-wrap: wrap; }
.mfa-steps { padding-left: 18px; color: var(--text-muted); }
.mfa-qr { display: flex; justify-content: center; margin: 12px 0; }
.mfa-qr svg { border-radius: 6px; }
.backup-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.backup-codes code { background: var(--bg-rail); border-radius: 4px; padding: 8px; text-align: center; font-family: var(--code-font); letter-spacing: .05em; }
.role-choice { padding: 8px; border-radius: 6px; background: var(--bg-side); }

@media (max-width: 760px) {
  .preset-grid, .an-cards { grid-template-columns: repeat(2, 1fr); }
  .inv-row { grid-template-columns: 1fr 1fr; }
  .inv-row.head { display: none; }
  .slider-row { grid-template-columns: 1fr; }
  .login-row { grid-template-columns: 22px 1fr; }
  .report-reasons { grid-template-columns: 1fr; }
}
.discovery .set-tab { justify-content: flex-start; gap: 10px; }
.auth textarea { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 0; border-radius: 3px; background: #1b1b1f; font-size: 16px; color: #d8d8dc; outline: none; resize: vertical; text-transform: none; font-weight: 400; letter-spacing: 0; }
#restricted-form .auth-error { color: #9a9aa3; margin-top: 12px; }
.field .btn { text-transform: none; letter-spacing: 0; }
.srv-alert.staff { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.auth input:focus, .auth textarea:focus { border-color: #c8f560; }

/* ----- mascot (the Nullcord bat) ----- */
:root { --m-body: #1b1530; --m-head: #231b3c; --m-wing: #5b33d6; --m-wing-in: #8b5cf6; --m-ear-in: #b388ff; --m-eye: #b27cff; --m-pupil: #170f2e; --m-mouth: #120b22; --m-tongue: #e879f9; --m-rim: #4b32a3; --m-iris: #7c3aed; --m-glow: rgba(139, 92, 246, .35); }
body[data-theme="light"] { --m-glow: rgba(139, 92, 246, .2); }
.mascot { display: block; overflow: visible; filter: drop-shadow(0 6px 18px var(--m-glow)); }
.mascot .m-body { fill: var(--m-body); }
.mascot .m-head { fill: var(--m-head); }
.mascot .m-wing { fill: var(--m-wing); }
.mascot .m-wing-in { fill: var(--m-wing-in); opacity: .55; }
.mascot .m-ear-in { fill: var(--m-ear-in); }
.mascot .m-eye { fill: var(--m-eye); }
.mascot .m-iris { fill: var(--m-iris); }
.mascot .m-pupil { fill: var(--m-pupil); }
.mascot .m-rim { stroke: var(--m-rim); stroke-width: 2.5; }
.mascot .m-shine { fill: #fff; }
.mascot .m-mouth { fill: var(--m-mouth); }
.mascot .m-tongue { fill: var(--m-tongue); }
.mascot .m-fang { fill: #f4f0ff; }
.mascot .m-line { fill: none; stroke: var(--m-eye); stroke-width: 3.5; stroke-linecap: round; }
.mascot .m-zzz { fill: var(--m-ear-in); font: 700 20px var(--font); }
/* gentle motion (off with Reduce motion) */
.mascot .m-wings { transform-origin: 100px 120px; animation: m-flap 3.2s ease-in-out infinite; }
.mascot.m-wave .m-wings { animation-duration: .9s; }
.mascot.m-sleepy .m-wings { animation: none; }
.mascot.m-sleepy .m-zzz text { animation: m-float 2.4s ease-in-out infinite; }
.mascot.m-sleepy .m-zzz text:nth-child(2) { animation-delay: .4s; } .mascot.m-sleepy .m-zzz text:nth-child(3) { animation-delay: .8s; }
.mascot.float { animation: m-bob 4s ease-in-out infinite; }
@keyframes m-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.9) translateY(4px); } }
@keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes m-float { 0%, 100% { opacity: .4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
body.reduce-motion .mascot, body.reduce-motion .mascot *, body.no-animations .mascot * { animation: none !important; }
.mascot-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 20px; color: var(--text-muted); gap: 6px; }
.mascot-empty h3 { color: var(--text-strong); margin: 8px 0 0; font-size: 17px; }
.mascot-empty p { margin: 0; max-width: 340px; font-size: 14px; }
.mascot-empty .btn { margin-top: 12px; }
.sp-empty .mascot, .an-empty .mascot { margin: 0 auto 8px; }
/* boot splash */
#splash { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #09090b; color: #8c8c95; font: 500 14px var(--font); transition: opacity .25s; }
#splash.out { opacity: 0; pointer-events: none; }
.auth-mascot { display: flex; justify-content: center; }
.adm-denied .mascot, .mascot.center { margin: 0 auto 12px; }
.auth-mascot .mascot { margin: 0 auto; }

/* ----- Plus, Echoes, levels, official servers ----- */
.plus-tag { display: inline-flex; align-items: center; font: 800 9px/1 var(--font); letter-spacing: .08em; padding: 3px 5px; border-radius: 4px; margin-left: 6px; vertical-align: 2px; color: #120b22; background: linear-gradient(135deg, #c8f560, #b388ff); }
.level-chip { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px; margin-left: 6px; background: color-mix(in srgb, var(--m-wing-in) 22%, transparent); color: var(--m-ear-in); cursor: pointer; flex-shrink: 0; }
.level-chip.l3 { background: linear-gradient(135deg, #8b5cf6, #c8f560); color: #120b22; }
.verified.official { background: #f2f2f0; color: #0a0a0b; }
body[data-theme="light"] .verified.official { background: #111113; color: #fff; }
.dc-official { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.plus-hero { display: flex; gap: 20px; align-items: center; padding: 20px; border-radius: 14px; border: 1px solid var(--border); background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, .22), transparent 55%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%), var(--bg-side); margin-bottom: 16px; }
.plus-hero h2 { margin: 0 0 6px; }
.plus-hero p { margin: 0; color: var(--text-muted); }
.plus-price { margin-top: 10px; font-size: 22px; font-weight: 800; color: var(--text-strong); }
.plus-perks { display: grid; gap: 10px; }
.plus-perk { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-side); border-radius: 10px; padding: 12px 14px; }
.plus-perk p { margin: 2px 0 0; color: var(--text-muted); font-size: 13px; }
.pp-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-input); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--m-ear-in); }
.pp-ic .plus-tag { margin: 0; }
.notice.plus-active { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.echo-slots { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 12px; }
.es-num { font-size: 34px; font-weight: 800; color: var(--text-strong); }
.es-num span { font-size: 18px; color: var(--text-muted); }
.level-modal { width: 560px; }
.lvl-head { display: flex; gap: 14px; align-items: center; }
.lvl-head h2 { margin: 0; }
.lvl-bar { height: 10px; border-radius: 6px; background: var(--bg-input); margin: 14px 0 6px; overflow: hidden; }
.lvl-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8b5cf6, var(--accent)); border-radius: 6px; }
.lvl-table-wrap { overflow-x: auto; margin-top: 14px; }
.lvl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lvl-table th, .lvl-table td { padding: 7px 8px; border-bottom: 1px solid var(--divider); text-align: center; }
.lvl-table td:first-child, .lvl-table th:first-child { text-align: left; color: var(--text-muted); }
.lvl-table .cur { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text-strong); font-weight: 600; }
.echoers { display: flex; flex-wrap: wrap; gap: 4px; }
/* account switcher */
.sm-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); padding: 6px 8px 2px; letter-spacing: .04em; }
.acct-item .avatar { flex: 0 0 24px !important; }
.acct-item.current { cursor: default; }
.acct-item .icon-btn { opacity: 0; }
.acct-item:hover .icon-btn { opacity: 1; }
.status-pop .status-menu { max-height: calc(100vh - 24px); overflow-y: auto; }